diff --git a/vuu-ui/package.json b/vuu-ui/package.json index 0c1e9081a..c77dddc6d 100644 --- a/vuu-ui/package.json +++ b/vuu-ui/package.json @@ -26,7 +26,6 @@ "build:table": "cd sample-apps/standalone-table && node scripts/build.mjs", "build:packages": "npm run build -- --cjs --license && npm run type-defs", "build:packages:debug": "npm run build -- --cjs --debug && npm run type-defs -- --debug", - "build:themes": "node ./scripts/build-themes.mjs", "launch:demo": "node ./scripts/launch-app.mjs", "launch:table": "node ./scripts/launch-table.mjs", "launch:demo:electron": "cd tools/electron && node ./node_modules/.bin/electron .", diff --git a/vuu-ui/packages/vuu-data-react/src/hooks/useLookupValues.ts b/vuu-ui/packages/vuu-data-react/src/hooks/useLookupValues.ts index ef2c2d6c1..40635bc32 100644 --- a/vuu-ui/packages/vuu-data-react/src/hooks/useLookupValues.ts +++ b/vuu-ui/packages/vuu-data-react/src/hooks/useLookupValues.ts @@ -9,11 +9,17 @@ import { buildColumnMap, isLookupRenderer, isTypeDescriptor, + isValueListRenderer, } from "@finos/vuu-utils"; import { useMemo, useState } from "react"; const NO_VALUES: ListOption[] = []; +const toListOption = (value: string): ListOption => ({ + label: value, + value, +}); + const lookupValueMap = new Map>(); const loadLookupValues = ({ @@ -87,22 +93,36 @@ export const useLookupValues = ( column: ColumnDescriptor, initialValueProp: number | string ) => { - const lookupDetails = getLookupDetails(column); + const { type: columnType } = column; const { getLookupValues } = useShellContext(); const initialState = useMemo(() => { - const values = getLookupValues?.(lookupDetails.table) ?? NO_VALUES; - return { - initialValue: getSelectedOption(values, initialValueProp), - values, - }; - }, [getLookupValues, initialValueProp, lookupDetails.table]); + if ( + isTypeDescriptor(columnType) && + isValueListRenderer(columnType?.renderer) + ) { + const values = columnType.renderer.values.map(toListOption); + return { + initialValue: getSelectedOption(values, initialValueProp), + values, + }; + } else { + const lookupDetails = getLookupDetails(column); + const values = getLookupValues?.(lookupDetails.table) ?? NO_VALUES; + + return { + initialValue: getSelectedOption(values, initialValueProp), + values, + }; + } + }, [column, columnType, getLookupValues, initialValueProp]); const [{ initialValue, values }, setLookupState] = useState(initialState); useMemo(() => { if (values === NO_VALUES) { + const lookupDetails = getLookupDetails(column); loadLookupValues(lookupDetails).then((values) => setLookupState({ initialValue: getSelectedOption(values, initialValueProp), @@ -110,7 +130,7 @@ export const useLookupValues = ( }) ); } - }, [values, lookupDetails, initialValueProp]); + }, [values, column, initialValueProp]); return { initialValue, diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/FilterClauseEditor.css b/vuu-ui/packages/vuu-filters/src/filter-clause/FilterClauseEditor.css index a345c802b..cf678cc5a 100644 --- a/vuu-ui/packages/vuu-filters/src/filter-clause/FilterClauseEditor.css +++ b/vuu-ui/packages/vuu-filters/src/filter-clause/FilterClauseEditor.css @@ -50,7 +50,7 @@ .vuuFilterClause .saltInput-focused, .vuuFilterClause .saltTokenizedInput-focused { outline: none; - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); } .vuuFilterClause .saltInput-input::selection { diff --git a/vuu-ui/packages/vuu-filters/src/filter-input/FilterInput.css b/vuu-ui/packages/vuu-filters/src/filter-input/FilterInput.css index f62bd786f..46e6bfdc1 100644 --- a/vuu-ui/packages/vuu-filters/src/filter-input/FilterInput.css +++ b/vuu-ui/packages/vuu-filters/src/filter-input/FilterInput.css @@ -11,10 +11,10 @@ .vuuFilterInput { --vuuFilterEditor-background: var(--salt-container-primary-background); - --vuuFilterEditor-color: var(--salt-text-primary-foreground); + --vuuFilterEditor-color: var(--salt-content-primary-foreground); --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily); --vuuFilterEditor-fontSize: var(--salt-text-fontSize); - --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground); + --vuuFilterEditor-cursorColor: var(--salt-content-secondary-foreground); --vuuFilterEditor-selectionBackground: var(--salt-text-background-selected); --vuuFilterEditor-tooltipBackground: var(--salt-container-primary-background); --vuuFilterEditor-tooltipBorder: var(--tooltip-status-borderColor) var(--salt-container-borderWidth) var(--salt-container-borderStyle); diff --git a/vuu-ui/packages/vuu-filters/src/filter-pill/FilterPill.css b/vuu-ui/packages/vuu-filters/src/filter-pill/FilterPill.css index dc7db2b2e..af94ad748 100644 --- a/vuu-ui/packages/vuu-filters/src/filter-pill/FilterPill.css +++ b/vuu-ui/packages/vuu-filters/src/filter-pill/FilterPill.css @@ -20,7 +20,7 @@ .vuuFilterPill[aria-selected="true"]{ --vuuPopupMenu-iconColor: white; --salt-text-background-selected: var(--vuu-color-blue-40); - --salt-text-color-selected: var(--salt-text-primary-foreground); + --salt-text-color-selected: var(--salt-content-primary-foreground); --saltInput-background-hover: var(--salt-taggable-background-active); --saltInput-color: var(--salt-taggable-foreground-active); background: var(--salt-taggable-background-active); diff --git a/vuu-ui/packages/vuu-layout/src/palette/Palette.css b/vuu-ui/packages/vuu-layout/src/palette/Palette.css index 908333603..17bf41362 100644 --- a/vuu-ui/packages/vuu-layout/src/palette/Palette.css +++ b/vuu-ui/packages/vuu-layout/src/palette/Palette.css @@ -8,7 +8,7 @@ } .vuuPaletteItem { - --vuu-icon-color: var(--salt-text-primary-foreground); + --vuu-icon-color: var(--salt-content-primary-foreground); --vuu-icon-left: 0; --vuu-icon-size: 16px; --vuu-icon-top: 11px; diff --git a/vuu-ui/packages/vuu-popups/src/menu/MenuList.css b/vuu-ui/packages/vuu-popups/src/menu/MenuList.css index 35ede9d87..0bf06bb12 100644 --- a/vuu-ui/packages/vuu-popups/src/menu/MenuList.css +++ b/vuu-ui/packages/vuu-popups/src/menu/MenuList.css @@ -7,7 +7,6 @@ --context-menu-shadow: var(--hw-dialog-shadow, 0 6px 12px rgba(0, 0, 0, 0.175)); --focus-visible-border-color: var(--hw-focus-visible-border-color, rgb(141, 154, 179)); --context-menu-highlight-bg: var(--salt-selectable-background-hover); - --context-menu-blur-focus-bg: #e0e4e9; --menu-item-icon-color: black; --menu-item-twisty-color: black; --menu-item-twisty-content: ''; @@ -33,11 +32,15 @@ } .vuuMenuItem { + --menu-item-background: var(--salt-selectable-background); + --menu-item-text-color: var(--salt-content-primary-foreground); + align-items: center; + background: var(--vuuMenuItem-background, var(--menu-item-background)); border-width: 1px; border-color: var(--vuuMenuItem-borderColor, transparent); border-style: var(--vuuMenuItem-borderStyle, none); - color: var(--context-menu-color); + color: var(--vuuMenuItem-color, var(--menu-item-text-color)); display: flex; gap: 6px; height: var(--vuuMenuItem-height, var(--hw-list-item-height, 24px)); @@ -56,7 +59,9 @@ } .vuuMenuItem[aria-expanded='true'] { - background-color: var(--context-menu-blur-focus-bg); + --menu-item-twisty-color: var(--salt-selectable-foreground-selected); + color: var(--salt-selectable-foreground-selected); + background-color: var(--salt-selectable-background-selected); } .vuuMenuItem-separator { @@ -78,19 +83,15 @@ width: 16px; } -.vuuMenuItem[data-highlighted] { - background-color: var(--context-menu-highlight-bg); +.vuuMenuItem.vuuHighlighted { + --menu-item-background: var(--tar-color-gray-15); } .vuuMenuItem:hover { - background-color: var(--context-menu-highlight-bg); + --menu-item-background: var(--salt-selectable-background-hover); cursor: default; } -.vuuMenuList-childMenuShowing .vuuMenuItem[data-highlighted] { - background-color: var(--context-menu-blur-focus-bg); -} - .vuuMenuItem.focusVisible:before { content: ''; position: absolute; diff --git a/vuu-ui/packages/vuu-popups/src/menu/MenuList.tsx b/vuu-ui/packages/vuu-popups/src/menu/MenuList.tsx index 3e9be1c20..a645dffa8 100644 --- a/vuu-ui/packages/vuu-popups/src/menu/MenuList.tsx +++ b/vuu-ui/packages/vuu-popups/src/menu/MenuList.tsx @@ -245,9 +245,9 @@ const getMenuItemProps = ( id: `menuitem-${itemId}`, key: key ?? idx, "data-index": idx, - "data-highlighted": idx === highlightedIdx || undefined, className: cx("vuuMenuItem", className, { "vuuMenuItem-separator": hasSeparator, + vuuHighlighted: idx === highlightedIdx, focusVisible: focusVisible === idx, }), }); diff --git a/vuu-ui/packages/vuu-popups/src/popup-menu/PopupMenu.css b/vuu-ui/packages/vuu-popups/src/popup-menu/PopupMenu.css index 9f1473798..14a70e1b0 100644 --- a/vuu-ui/packages/vuu-popups/src/popup-menu/PopupMenu.css +++ b/vuu-ui/packages/vuu-popups/src/popup-menu/PopupMenu.css @@ -3,6 +3,5 @@ --vuu-icon-left: 2px; --vuu-icon-size: var(--vuuPopupMenu-iconSize, 16px); --vuu-icon-width: 16px; - background: var(--vuuPopupMenu-background, transparent); } diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.css b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.css index 65f9dbf2b..9daada00c 100644 --- a/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.css +++ b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.css @@ -5,10 +5,14 @@ --saltButton-borderRadius: 4px; font-weight: 500; + + .vuuDropdownButton { + --saltButton-height: var(--vuu-table-embedded-control-height); + } } .vuuTableDropdownCell button:focus-visible { - --saltButton-borderColor: var(--vuu-color-purple-10); + --saltButton-borderColor: var(--salt-focused-outlineColor); --saltButton-borderWidth: 2px; - padding-left: 3px; + padding-left: 7px; } \ No newline at end of file diff --git a/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx index e2fc2bacc..2bd60250e 100644 --- a/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx +++ b/vuu-ui/packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx @@ -1,5 +1,5 @@ import { getSelectedOption, useLookupValues } from "@finos/vuu-data-react"; -import { VuuColumnDataType } from "@finos/vuu-protocol-types"; +import type { VuuColumnDataType } from "@finos/vuu-protocol-types"; import { ListOption, TableCellRendererProps } from "@finos/vuu-table-types"; import { Dropdown, diff --git a/vuu-ui/packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.css b/vuu-ui/packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.css index 7a74d195c..39b9d70f4 100644 --- a/vuu-ui/packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.css +++ b/vuu-ui/packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.css @@ -1,7 +1,7 @@ .vuuColumnExpressionInput { --vuuFilterEditor-background: var(--salt-container-primary-background); - --vuuFilterEditor-color: var(--salt-text-primary-foreground); + --vuuFilterEditor-color: var(--salt-content-primary-foreground); --vuuFilterEditor-fontFamily: var(--salt-typography-fontFamily); --vuuFilterEditor-fontSize: var(--salt-text-fontSize); --vuuFilterEditor-cursorColor: var(--salt-text-secondary-foreground); @@ -10,7 +10,7 @@ --vuuFilterEditor-tooltipBorder: solid 1px var(--vuu-color-purple-10); --vuuFilterEditor-tooltipElevation: var(--salt-overlayable-shadow-popout); --vuuFilterEditor-suggestion-selectedBackground: var(--vuu-color-gray-10); - --vuuFilterEditor-suggestion-selectedColor: var(--salt-text-primary-foreground); + --vuuFilterEditor-suggestion-selectedColor: var(--salt-content-primary-foreground); --vuuFilterEditor-suggestion-detailColor: var(--salt-text-secondary-foreground-disabled); --vuuFilterEditor-suggestion-height: 24px; --vuuFilterEditor-variableColor: var(--vuu-color-purple-10); diff --git a/vuu-ui/packages/vuu-table/src/Row.css b/vuu-ui/packages/vuu-table/src/Row.css index a47226f70..0aa946007 100644 --- a/vuu-ui/packages/vuu-table/src/Row.css +++ b/vuu-ui/packages/vuu-table/src/Row.css @@ -1,13 +1,14 @@ .vuuTableRow { - background: var(--row-background,#fff); - border-bottom: 1px solid var(--row-borderColor); + background: var(--row-background,var(--table-background)); + color: var(--salt-content-secondary-foreground); + border-bottom: 1px solid var(--row-borderColor, var(--table-background)); box-sizing: border-box; height: var(--row-height); line-height: calc(var(--row-height) - 1px); position: absolute; top:0; white-space: nowrap; - } +} .vuuTableRow-proxy { visibility: hidden; @@ -18,13 +19,13 @@ } .vuuTableRow-highlighted { - background-color: var(--salt-selectable-background-hover); + background: var(--salt-selectable-background-hover); } .vuuTableRow-selected, .vuuTableRow-selectedEnd { - --row-borderColor: var(--salt-separable-secondary-borderColor); + /* --row-borderColor: var(--salt-separable-secondary-borderColor); */ background-color: var(--salt-selectable-background-selected); } @@ -32,20 +33,12 @@ z-index: 1; } -.vuuTable-zebra { - .vuuTableRow-even.vuuTableRow-selected, - .vuuTableRow-even.vuuTableRow-selectedEnd { - /** thisis really where we want a darken function */ - background-color: var(--vuu-color-gray-07); +.vuuTableRow-selectedStart { + --vuu-selection-decorator-left-radius: 5px 0 0 0; + --vuu-selection-decorator-right-radius: 0 5px 0 0; - } + border-radius: 5px 5px 0 0; } - - .vuuTableRow-selectedStart { - --vuu-selection-decorator-left-radius: 5px 0 0 0; - --vuu-selection-decorator-right-radius: 0 5px 0 0; - border-radius: 5px 5px 0 0; - } .vuuTableRow-selectedEnd { --vuu-selection-decorator-left-radius: 0 0 0 5px; @@ -63,20 +56,20 @@ .vuuTableRow-selectedStart:after { content: ''; position: absolute; - top:0; + top: -1px; left: 4px; height: 1px; - background-color: var(--vuu-color-purple-10); + background: var(--vuuTableRow-selectionBlock-borderColor); width: calc(var(--content-width) - 8px); z-index: 1; } .vuuTableRow-selectedEnd { - border-bottom-color: var(--vuu-color-purple-10); + border-bottom-color: var(--vuuTableRow-selectionBlock-borderColor, var(--row-borderColor)); } .vuuTableRow-selectionDecorator { - background-color: var(--vuu-selection-decorator-bg, white); + background: var(--table-background); display: inline-block; position: relative; height: var(--row-height); @@ -92,31 +85,16 @@ .vuuTableRow-selectionDecorator.vuuStickyRight { right:0; position: sticky; - } - - .vuuTableRow-selected { - --vuu-selection-decorator-bg: var(--vuu-color-purple-10); - - } - - .vuuTableRow-selectedStart { - --vuu-selection-decorator-bg: white; - } - - .vuuTableRow-selectedEnd { - --vuu-selection-decorator-bg: white; - } - + } .vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before, .vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before { content: ''; - inset: 0; + inset: -1px 0 0 0; position: absolute; - background-color: var(--vuu-color-purple-10); + background: var(--table-background); } - .vuuTableRow-selectionDecorator.vuuStickyLeft:before { border-radius: var(--vuu-selection-decorator-left-radius, 0); } @@ -129,9 +107,9 @@ --toggle-icon-transform: rotate(90deg); } - .vuuDraggable .vuuTableRow { - --cell-borderColor: transparent; - --vuu-selection-decorator-bg: transparent; - transform: none!important; - z-index: 1; - } \ No newline at end of file +.vuuDraggable .vuuTableRow { + --cell-borderColor: transparent; + --vuu-selection-decorator-bg: transparent; + transform: none!important; + z-index: 1; +} \ No newline at end of file diff --git a/vuu-ui/packages/vuu-table/src/Table.css b/vuu-ui/packages/vuu-table/src/Table.css index 2e3f8dc75..d7422a13d 100644 --- a/vuu-ui/packages/vuu-table/src/Table.css +++ b/vuu-ui/packages/vuu-table/src/Table.css @@ -1,25 +1,13 @@ -.vuu-density-high { - --vuu-table-row-height: 20px; -} -.vuu-density-medium { - --vuu-table-row-height: 28px; -} -.vuu-density-low { - --vuu-table-row-height: 36px; -} -.vuu-density-touch { - --vuu-table-row-height: 48px; -} - .vuuTable { --vuu-table-cell-outlineWidth: 1px; --table-height: var(--measured-px-height); --table-width: var(--measured-px-width); --vuu-table-next-selection-bookend-width: 4px; + --vuu-table-embedded-control-height: calc(var(--row-height) - 3px); --columnResizer-color: transparent; - --row-background: white; - --row-height: var(--row-height-prop, var(--vuu-table-row-height, 20px)); + --row-height: var(--row-height-prop, var(--vuu-table-row-height, var(--salt-size-base))); + --cell-borderColor: transparent; --row-borderColor: var(--row-background); --table-background: var(--salt-container-primary-background); @@ -32,11 +20,13 @@ } .vuuTable-zebra { - --row-background-even: var(--salt-container-secondary-background); + --row-background-even: var(--table-background); } .vuuTable-colLines { - --cell-borderColor: var(--salt-separable-tertiary-borderColor); + --cell-borderColor: var( + + ); } .vuuTable-rowLines { @@ -87,7 +77,7 @@ } .vuuTable-contentContainer { - background-color: var(--salt-container-primary-background); + background: var(--table-background); height: calc(var(--table-height) - var(--horizontal-scrollbar-height)); position: relative; overflow: auto; @@ -124,7 +114,7 @@ } .vuuTable-col-headings { - background-color: white; + background-color: var(--table-background); padding: 0 var(--vuu-table-next-selection-bookend-width, 0); position: sticky; @@ -140,6 +130,7 @@ .vuuTable-col-headers { background-color: var(--table-background); + color: var(--salt-content-secondary-foreground); white-space: nowrap; } diff --git a/vuu-ui/packages/vuu-table/src/Table.tsx b/vuu-ui/packages/vuu-table/src/Table.tsx index f1d35226d..8510b9cbc 100644 --- a/vuu-ui/packages/vuu-table/src/Table.tsx +++ b/vuu-ui/packages/vuu-table/src/Table.tsx @@ -206,7 +206,7 @@ const TableCore = ({ onRowClick: onRowClickProp, onSelect, onSelectionChange, - renderBufferSize, + renderBufferSize: Math.max(5, renderBufferSize), rowHeight, scrollingApiRef, selectionModel, @@ -342,6 +342,8 @@ export const Table = forwardRef(function TableNext( throw Error("vuu Table requires dataSource prop"); } + console.log({ rowHeight }); + return ( { cy.get(".vuuTable-scrollbarContainer").scrollTo(100, 0); assertRenderedColumns({ rendered: { from: 1, to: 8 }, - visible: { from: 1, to: 6 }, + visible: { from: 1, to: 7 }, }); }); }); diff --git a/vuu-ui/packages/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.css b/vuu-ui/packages/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.css new file mode 100644 index 000000000..6aae65dfa --- /dev/null +++ b/vuu-ui/packages/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.css @@ -0,0 +1,5 @@ +.vuuTableCell { + .vuuCheckboxIcon { + margin-top: calc(var(--row-height) / 2 - 6px ); + } +} \ No newline at end of file diff --git a/vuu-ui/packages/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.tsx b/vuu-ui/packages/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.tsx index ad0ce9067..3827a7586 100644 --- a/vuu-ui/packages/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.tsx +++ b/vuu-ui/packages/vuu-table/src/cell-renderers/checkbox-cell/CheckboxCell.tsx @@ -8,6 +8,8 @@ import { registerComponent, } from "@finos/vuu-utils"; +import "./CheckboxCell.css"; + export const CheckboxCell: React.FC = memo( ({ column, columnMap, onCommit = WarnCommit, row }) => { const dataIdx = columnMap[column.name]; diff --git a/vuu-ui/packages/vuu-table/src/cell-renderers/input-cell/InputCell.css b/vuu-ui/packages/vuu-table/src/cell-renderers/input-cell/InputCell.css index 83cd96d74..f9fde6271 100644 --- a/vuu-ui/packages/vuu-table/src/cell-renderers/input-cell/InputCell.css +++ b/vuu-ui/packages/vuu-table/src/cell-renderers/input-cell/InputCell.css @@ -1,15 +1,15 @@ .vuuTableInputCell.saltInput-primary { --salt-focused-outlineStyle: none; - --saltInput-height: 17px; - --saltInput-minHeight: 17px; + --saltInput-height: var(--vuu-table-embedded-control-height); + --saltInput-minHeight: var(--saltInput-height); border-radius: 4px; font-weight: 500; } .vuuTableCell:focus .vuuTableInputCell.saltInput-primary, .vuuTableInputCell.saltInput-primary.saltInput-focused { - border: solid 2px var(--vuu-color-purple-10); + border: solid 2px var(--salt-focused-outlineColor); padding: 0 3px; } diff --git a/vuu-ui/packages/vuu-table/src/column-header-pill/ColumnHeaderPill.css b/vuu-ui/packages/vuu-table/src/column-header-pill/ColumnHeaderPill.css index 2d9140740..41406adc0 100644 --- a/vuu-ui/packages/vuu-table/src/column-header-pill/ColumnHeaderPill.css +++ b/vuu-ui/packages/vuu-table/src/column-header-pill/ColumnHeaderPill.css @@ -1,12 +1,12 @@ .vuuColumnHeaderPill { --vuu-icon-size: 14px; --menu-item-icon-color: black; - --vuu-icon-color: white; + --vuu-icon-color: var(--salt-actionable-primary-foreground); --vuu-icon-height: 12px; --vuu-icon-width: 12px; align-items: center; - background: var(--salt-taggable-background-active); - color: white; + background: var(--salt-actionable-primary-background); + color: var(--salt-actionable-primary-foreground); border-radius: 4px; flex: var(--vuuColumnHeaderPill-flex, none); font-size: 11px; @@ -19,9 +19,9 @@ } .vuuColumnHeaderPill:hover { - --vuu-icon-color: var(--vuu-color-gray-80); - background-color: var(--salt-taggable-background-hover); - color: var(--vuu-color-gray-80); + --vuu-icon-color: var(--salt-actionable-primary-foreground-hover); + background-color: var(--salt-actionable-primary-background-hover); + color: var(--salt-actionable-primary-foreground-hover); } diff --git a/vuu-ui/packages/vuu-table/src/column-menu/ColumnMenu.css b/vuu-ui/packages/vuu-table/src/column-menu/ColumnMenu.css index 3c4e712ac..79933d9af 100644 --- a/vuu-ui/packages/vuu-table/src/column-menu/ColumnMenu.css +++ b/vuu-ui/packages/vuu-table/src/column-menu/ColumnMenu.css @@ -1,40 +1,21 @@ .vuuMenuItem { --vuu-svg-cog: url('data:image/svg+xml;utf8,'); } -.vuuTable-columnMenu { +.vuuColumnMenu { + --menu-button-size: calc(var(--salt-size-base) - var(--salt-spacing-100)); + --saltButton-padding: var(--salt-spacing-50); + --saltButton-minWidth: var(--menu-button-size); + --saltButton-height: var(--menu-button-size); + --saltButton-width: var(--menu-button-size); - --vuu-icon-color: #606477; - --vuu-icon-height: 20px; + --vuu-icon-height: var(--menu-button-size); --vuu-icon-left: 0px; - --vuu-icon-size: 16px; --vuu-icon-top: 0px; - --vuu-icon-width: 20px; + --vuu-icon-width: var(--menu-button-size); border-radius: 4px; - cursor: pointer; - display: inline-block; - flex: 0 0 20px; - padding: 2px; - /* left: var(--column-menu-left, 0); */ + flex: 0 0 var(--menu-button-size); margin: var(--vuuTable-columnMenu-margin, 0); - width: auto; } -.vuuTable-columnMenu:hover { - --vuu-icon-color: #15171B; - background-color: #F37880; -} - -.vuuTable-columnMenu-open:hover, -.vuuTable-columnMenu-open { - background-color: #6D18BD; - --vuu-icon-color: white; - -} - -[data-icon='cog'] { - --vuu-icon-svg: var(--vuu-svg-cog); - --vuu-icon-size: 14px; - } - \ No newline at end of file diff --git a/vuu-ui/packages/vuu-table/src/column-menu/ColumnMenu.tsx b/vuu-ui/packages/vuu-table/src/column-menu/ColumnMenu.tsx index 7bc1204ab..e4e8204ce 100644 --- a/vuu-ui/packages/vuu-table/src/column-menu/ColumnMenu.tsx +++ b/vuu-ui/packages/vuu-table/src/column-menu/ColumnMenu.tsx @@ -1,63 +1,22 @@ import { RuntimeColumnDescriptor } from "@finos/vuu-table-types"; -import { useContextMenu } from "@finos/vuu-popups"; +import { PopupMenu } from "@finos/vuu-popups"; +import { HTMLAttributes } from "react"; import cx from "clsx"; -import { - HTMLAttributes, - MouseEvent, - useCallback, - useRef, - useState, -} from "react"; import "./ColumnMenu.css"; +const classBase = "vuuColumnMenu"; export interface ColumnMenuProps extends HTMLAttributes { column: RuntimeColumnDescriptor; } -const getPosition = (element: HTMLElement | null) => { - if (element) { - const { bottom, left } = element.getBoundingClientRect(); - return { x: left, y: bottom + 6 }; - } -}; - -export const ColumnMenu = ({ - className, - column, - ...props -}: ColumnMenuProps) => { - const rootRef = useRef(null); - const [menuOpen, setMenuOpen] = useState(false); - const [showContextMenu] = useContextMenu(); - - const handleMenuClose = useCallback(() => { - setMenuOpen(false); - }, []); - - const showColumnMenu = useCallback( - (e: MouseEvent) => { - setMenuOpen(true); - showContextMenu(e, "column-menu", { - column, - ContextMenuProps: { - onClose: handleMenuClose, - position: getPosition(rootRef.current), - }, - }); - }, - [column, handleMenuClose, showContextMenu] - ); - +export const ColumnMenu = ({ className, column }: ColumnMenuProps) => { return ( - ); }; diff --git a/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCellNext.tsx b/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCell.tsx similarity index 96% rename from vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCellNext.tsx rename to vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCell.tsx index d89e44116..9a20c46b7 100644 --- a/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCellNext.tsx +++ b/vuu-ui/packages/vuu-table/src/header-cell/GroupHeaderCell.tsx @@ -27,21 +27,21 @@ const switchIfChanged = ( } }; -export interface GroupHeaderCellNextProps +export interface GroupHeaderCellProps extends Omit { column: GroupColumnDescriptor; onMoveColumn?: (columns: ColumnDescriptor[]) => void; onRemoveColumn: (column: RuntimeColumnDescriptor) => void; } -export const GroupHeaderCellNext = ({ +export const GroupHeaderCell = ({ column: groupColumn, className: classNameProp, onMoveColumn, onRemoveColumn, onResize, ...htmlAttributes -}: GroupHeaderCellNextProps) => { +}: GroupHeaderCellProps) => { const rootRef = useRef(null); const { isResizing, ...resizeProps } = useTableColumnResize({ column: groupColumn, diff --git a/vuu-ui/packages/vuu-table/src/header-cell/index.ts b/vuu-ui/packages/vuu-table/src/header-cell/index.ts index 14785a095..debfca4f1 100644 --- a/vuu-ui/packages/vuu-table/src/header-cell/index.ts +++ b/vuu-ui/packages/vuu-table/src/header-cell/index.ts @@ -1,2 +1,2 @@ -export * from "./GroupHeaderCellNext"; +export * from "./GroupHeaderCell"; export * from "./HeaderCell"; diff --git a/vuu-ui/packages/vuu-table/src/index.ts b/vuu-ui/packages/vuu-table/src/index.ts index db5414018..f862a02a4 100644 --- a/vuu-ui/packages/vuu-table/src/index.ts +++ b/vuu-ui/packages/vuu-table/src/index.ts @@ -1,4 +1,4 @@ -export { GroupHeaderCellNext } from "./header-cell"; +export { GroupHeaderCell as GroupHeaderCellNext } from "./header-cell"; export * from "./header-cell"; export * from "./Table"; export * from "./table-cell"; diff --git a/vuu-ui/packages/vuu-table/src/table-cell/TableCell.css b/vuu-ui/packages/vuu-table/src/table-cell/TableCell.css index 3c0852460..e4f4ce250 100644 --- a/vuu-ui/packages/vuu-table/src/table-cell/TableCell.css +++ b/vuu-ui/packages/vuu-table/src/table-cell/TableCell.css @@ -2,7 +2,9 @@ border-right-color: var(--cell-borderColor); border-right-style: solid; border-right-width: 1px; + /* unfortunately inline-flex doesn't play nice with text-overflow ellipsis */ display: inline-block; + white-space: nowrap; height: 100%; overflow:hidden; padding: var(--vuuTableCell-padding, 0 11px 0 12px); @@ -15,15 +17,13 @@ } .vuuTableCell-editable { + align-items: center; display: inline-flex; - line-height: 18px; - padding-bottom: 1px; - padding-top: 1px; text-overflow: unset; } .vuuTableCell:focus { - outline: var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px); + outline: var(--vuuTableCell-outline, solid var(--salt-focused-outlineColor) 2px); outline-offset: -2px; /** This is to achieve a white background to outline dashes */ box-shadow: inset 0 0 0 var(--cell-outline-width) white; @@ -31,7 +31,7 @@ } .vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus { - outline: var(--vuuTableCell-outline, solid var(--vuu-color-purple-10) 2px); + outline: var(--vuuTableCell-outline, solid var(--salt-focused-outlineColor) 2px); outline-offset: -1px; } diff --git a/vuu-ui/packages/vuu-table/src/table-header/TableHeader.tsx b/vuu-ui/packages/vuu-table/src/table-header/TableHeader.tsx index d0c24e740..adbeafddb 100644 --- a/vuu-ui/packages/vuu-table/src/table-header/TableHeader.tsx +++ b/vuu-ui/packages/vuu-table/src/table-header/TableHeader.tsx @@ -9,7 +9,7 @@ import { import { isGroupColumn, isNotHidden } from "@finos/vuu-utils"; import cx from "clsx"; import { memo } from "react"; -import { GroupHeaderCellNext, HeaderCell } from "../header-cell"; +import { GroupHeaderCell, HeaderCell } from "../header-cell"; import { useTableHeader } from "./useTableHeader"; export type ColumnSortHandler = ( @@ -80,7 +80,7 @@ export const TableHeader = memo( ) : null} {columns.filter(isNotHidden).map((col, i) => isGroupColumn(col) ? ( - { return new ResizeObserver((entries: ResizeObserverEntry[]) => { for (const entry of entries) { - const { height: measuredHeight } = entry.contentRect; - const newHeight = Math.round(measuredHeight); + const [{ blockSize: measuredSize }] = entry.borderBoxSize; + const newHeight = Math.round(measuredSize); if (isValidNumber(newHeight) && heightRef.current !== newHeight) { heightRef.current = newHeight; setRowHeight(newHeight); @@ -29,7 +29,8 @@ export const useRowHeight = ({ if (el) { if (rowHeightProp === 0) { const { height } = el.getBoundingClientRect(); - console.log(`measured rowHeight = ${height}`); + console.log({ boundingClientHeight: height }); + console.log(`measured rowHeight = ${height} (${rowHeightProp})`); resizeObserver.observe(el); setRowHeight(height); } diff --git a/vuu-ui/packages/vuu-table/src/useTableScroll.ts b/vuu-ui/packages/vuu-table/src/useTableScroll.ts index d7d03f076..bc26fed62 100644 --- a/vuu-ui/packages/vuu-table/src/useTableScroll.ts +++ b/vuu-ui/packages/vuu-table/src/useTableScroll.ts @@ -391,11 +391,13 @@ export const useTableScroll = ({ contentContainer, scrollRequest.rowIndex ); + if (activeRow !== null) { const [direction, distance] = howFarIsRowOutsideViewport( activeRow, totalHeaderHeight ); + console.log(`outside viewport ? ${direction} ${distance}`); if (direction && distance) { if (isVirtualScroll) { const offset = direction === "down" ? 1 : -1; diff --git a/vuu-ui/packages/vuu-theme/css/components/components.css b/vuu-ui/packages/vuu-theme/css/components/components.css index 248a0ca79..ff9c82dc1 100644 --- a/vuu-ui/packages/vuu-theme/css/components/components.css +++ b/vuu-ui/packages/vuu-theme/css/components/components.css @@ -4,5 +4,6 @@ @import url(input.css); @import url(splitter.css); @import url(switch.css); +@import url(table.css); @import url(tabstrip.css); @import url(toggle-button.css); diff --git a/vuu-ui/packages/vuu-theme/css/components/input.css b/vuu-ui/packages/vuu-theme/css/components/input.css index 3e89014aa..748ab7618 100644 --- a/vuu-ui/packages/vuu-theme/css/components/input.css +++ b/vuu-ui/packages/vuu-theme/css/components/input.css @@ -1,18 +1,20 @@ -.saltInput-activationIndicator { - display: none; -} - -.saltInput:hover { - background: inherit;; -} +.vuu-theme { -.saltInput-primary { - --saltInput-height: 24px; - border: solid 1px var(--input-borderColor, var(--salt-editable-borderColor)); - border-radius: 6px; + .saltInput-activationIndicator { + display: none; + } + + .saltInput:hover { + background: inherit;; + } + + .saltInput-primary { + border: solid 1px var(--input-borderColor, var(--salt-editable-borderColor)); + border-radius: 6px; + } + + .saltInput-focused:hover, + .saltInput-focused { + --input-borderColor: var(--vuu-color-purple-10); + } } - -.saltInput-focused:hover, -.saltInput-focused { - --input-borderColor: var(--vuu-color-purple-10); -} \ No newline at end of file diff --git a/vuu-ui/packages/vuu-theme/css/components/switch.css b/vuu-ui/packages/vuu-theme/css/components/switch.css index e032d64e8..d651b461f 100644 --- a/vuu-ui/packages/vuu-theme/css/components/switch.css +++ b/vuu-ui/packages/vuu-theme/css/components/switch.css @@ -1,56 +1,59 @@ -.saltSwitch { - --switch-color: var(--vuu-color-gray-45); - --vuu-icon-left: -1px; +.vuu-theme { + .saltSwitch { + --switch-color: var(--vuu-color-gray-45); + --vuu-icon-left: -1px; + } + + .saltSwitch-track { + background-color: var(--switch-color); + border: none; + border-radius: 4px; + height: 14px; + padding: 0 2px; + width: 26px; + } + + .saltSwitch:not(.saltSwitch-disabled):hover .saltSwitch-track { + --switch-color: var(--vuu-color-pink-10); + } + + .saltSwitch-thumb { + background-color: var(--vuu-color-white); + border: none; + border-radius: 3px; + height: 10px; + margin:0; + width: 10px; + } + + .saltSwitch-checked { + --switch-color: var(--vuu-color-purple-10); + } + + .saltSwitch-disabled { + --switch-color: var(--vuu-color-gray-30); + } + + .saltSwitch-checked .saltSwitch-thumb, + .saltSwitch-checked:hover .saltSwitch-thumb { + background-color: white; + transform: translateX(calc(100% + 2px)); + } + + + .saltSwitch-checked .saltSwitch-thumb:after { + background-color: var(--switch-color); + content: ""; + left: var(--vuu-icon-left, auto); + height: var(--vuu-icon-height, var(--vuu-icon-size, 12px)); + mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size); + -webkit-mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size); + mask-repeat: no-repeat; + -webkit-mask-repeat: no-repeat; + position: absolute; + top: var(--vuu-icon-top, auto); + width: var(--vuu-icon-width, var(--vuu-icon-size, 12px)); + + } } -.saltSwitch-track { - background-color: var(--switch-color); - border: none; - border-radius: 4px; - height: 14px; - padding: 0 2px; - width: 26px; -} - -.saltSwitch:not(.saltSwitch-disabled):hover .saltSwitch-track { - --switch-color: var(--vuu-color-pink-10); -} - -.saltSwitch-thumb { - background-color: var(--vuu-color-white); - border: none; - border-radius: 3px; - height: 10px; - margin:0; - width: 10px; -} - -.saltSwitch-checked { - --switch-color: var(--vuu-color-purple-10); -} - -.saltSwitch-disabled { - --switch-color: var(--vuu-color-gray-30); -} - -.saltSwitch-checked .saltSwitch-thumb, -.saltSwitch-checked:hover .saltSwitch-thumb { - background-color: white; - transform: translateX(calc(100% + 2px)); -} - - -.saltSwitch-checked .saltSwitch-thumb:after { - background-color: var(--switch-color); - content: ""; - left: var(--vuu-icon-left, auto); - height: var(--vuu-icon-height, var(--vuu-icon-size, 12px)); - mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size); - -webkit-mask: var(--vuu-svg-tick) center center/var(--vuu-icon-size) var(--vuu-icon-size); - mask-repeat: no-repeat; - -webkit-mask-repeat: no-repeat; - position: absolute; - top: var(--vuu-icon-top, auto); - width: var(--vuu-icon-width, var(--vuu-icon-size, 12px)); - -} \ No newline at end of file diff --git a/vuu-ui/packages/vuu-theme/css/components/table.css b/vuu-ui/packages/vuu-theme/css/components/table.css new file mode 100644 index 000000000..b28c52114 --- /dev/null +++ b/vuu-ui/packages/vuu-theme/css/components/table.css @@ -0,0 +1,29 @@ +.vuu-theme { + --vuuTableRow-selectionBlock-borderColor: var(--vuu-color-purple-10); + + &.vuu-density-high { + --vuu-table-row-height: 20px; + } + &.vuu-density-medium { + --vuu-table-row-height: 28px; + } + &.vuu-density-low { + --vuu-table-row-height: 36px; + } + &.vuu-density-touch { + --vuu-table-row-height: 48px; + } + + .vuuTableRow-selected:not(.vuuTableRow-selectedStart, .vuuTableRow-selectedEnd) { + .vuuTableRow-selectionDecorator { + background: var(--vuuTableRow-selectionBlock-borderColor); + } + } + + .vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before, + .vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before { + background: var(--vuuTableRow-selectionBlock-borderColor); + } + +} + diff --git a/vuu-ui/packages/vuu-ui-controls/src/dropdown/Dropdown.css b/vuu-ui/packages/vuu-ui-controls/src/dropdown/Dropdown.css index 4782939ba..55e1a47d6 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/dropdown/Dropdown.css +++ b/vuu-ui/packages/vuu-ui-controls/src/dropdown/Dropdown.css @@ -1,18 +1,18 @@ .vuuDropdown { --saltIcon-margin: 2px 0 0 8px; + --saltButton-height: var(--vuuDropdown-height); + --saltButton-width : var(--vuuDropdown-width); - display: inline-block; line-height: 0; - position: relative; - width: var(--vuuDropdown-width, auto); + } .vuuDropdownButton.saltButton-secondary { + --saltButton-background: var(--salt-editable-background); + --saltButton-color: var(--salt-editable-foreground); --saltButton-borderStyle: solid; --saltButton-borderColor: var(--salt-editable-borderColor); --saltButton-borderWidth: 1px; - --saltButton-borderRadius: 6px; - --saltButton-height: var(--vuuDropdown-height, auto); } .vuuDropdown-fullWidth { @@ -27,7 +27,3 @@ .vuuDropdown-popup-component { --vuuList-borderStyle: none; } - -.vuuDropdownButton { - width: 100%; -} \ No newline at end of file diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/CheckboxIcon.css b/vuu-ui/packages/vuu-ui-controls/src/list/CheckboxIcon.css index 90e532d35..82e9b6a00 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/list/CheckboxIcon.css +++ b/vuu-ui/packages/vuu-ui-controls/src/list/CheckboxIcon.css @@ -3,6 +3,7 @@ --vuu-icon-left: -1px; --vuu-icon-top: -1px; --vuu-icon-svg: var(--vuu-svg-tick); + background: var(--salt-editable-primary-background); border-style: solid; border-color: var( --vuuCheckboxIcon-borderColor, diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/List.tsx b/vuu-ui/packages/vuu-ui-controls/src/list/List.tsx index 18270ddf6..2deab6ce6 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/list/List.tsx +++ b/vuu-ui/packages/vuu-ui-controls/src/list/List.tsx @@ -29,9 +29,9 @@ import { ListItemProps, ListProps } from "./listTypes"; import { useList } from "./useList"; import { useListHeight } from "./useListHeight"; import { useScrollPosition } from "./useScrollPosition"; +import { MeasuredContainer, MeasuredSize } from "../measured-container"; import "./List.css"; -import { MeasuredContainer, MeasuredSize } from "../measured-container"; const defaultEmptyMessage = "No data to display"; diff --git a/vuu-ui/packages/vuu-ui-controls/src/list/ListItem.css b/vuu-ui/packages/vuu-ui-controls/src/list/ListItem.css index de9992e1b..daea8399e 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/list/ListItem.css +++ b/vuu-ui/packages/vuu-ui-controls/src/list/ListItem.css @@ -1,9 +1,9 @@ .vuuListItem { /* Color */ - --list-item-text-color: var(--salt-text-primary-foreground); + --list-item-text-color: var(--salt-content-primary-foreground); --list-item-background: var(--vuuList-item-background, var(--salt-selectable-background)); /* --list-item-selected-focus-outlineColor: var(--salt-color-white); TODO: Check token with design */ - --list-item-text-color-active: var(--salt-text-primary-foreground); + --list-item-text-color-active: var(--salt-selectable-foreground-selected); --list-item-background-active: var(--salt-selectable-background-selected); --list-item-alignItems: center; } @@ -48,7 +48,7 @@ .vuuListItem-checkbox { --list-item-background-active: var(--salt-selectable-background); - --list-item-text-color-active: var(--salt-text-primary-foreground); + --list-item-text-color-active: var(--salt-content-primary-foreground); --list-item-text-padding: 0 0 0 var(--salt-size-unit); } @@ -58,7 +58,7 @@ } .vuuListItem.vuuDisabled { - --list-item-text-color: var(--salt-text-primary-foreground-disabled); + --list-item-text-color: var(--salt-content-primary-foreground-disabled); cursor: var(--salt-selectable-cursor-disabled); } diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.css b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.css index bd4cd0378..b83155c33 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.css +++ b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.css @@ -17,7 +17,7 @@ border-style: var(--vuuTab-borderStyle, none); border-width: var(--vuuTab-borderWidth, 0px); border-radius: var(--vuuTab-borderRadius, 0); - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); cursor: var(--vuuTab-cursor, var(--tab-cursor)); display: var(--tabstrip-display); gap: 8px; @@ -34,7 +34,7 @@ .vuuTab-selected { background: var(--vuuTab-background-selected, var(--tab-background)); - color: var(--salt-text-primary-foreground); + color: var(--salt-content-primary-foreground); font-weight: var(--salt-navigable-fontWeight-active); } diff --git a/vuu-ui/scripts/build-themes.mjs b/vuu-ui/scripts/build-themes.mjs deleted file mode 100644 index 8d4c22b54..000000000 --- a/vuu-ui/scripts/build-themes.mjs +++ /dev/null @@ -1,26 +0,0 @@ -import { execWait, getCommandLineArg, withArgs } from "./utils.mjs"; - -const jsonOutput = getCommandLineArg("json", false); - -export const buildAll = async () => { - const buildPackage = async (packageName) => - execWait( - `npm run --silent build${withArgs("dev", "debug")}`, - `themes/${packageName}` - ); - - // TODO determine the dependency graph/build order programatically - const packages = ["tar-theme"]; - - if (jsonOutput) { - console.log( - JSON.stringify({ - "package-list": packages, - }) - ); - } - - await Promise.all(packages.map(buildPackage)); -}; - -buildAll(); diff --git a/vuu-ui/showcase/src/examples/Popups/ContextMenu.examples.tsx b/vuu-ui/showcase/src/examples/Popups/ContextMenu.examples.tsx index 49212dad2..aa7e6ab6b 100644 --- a/vuu-ui/showcase/src/examples/Popups/ContextMenu.examples.tsx +++ b/vuu-ui/showcase/src/examples/Popups/ContextMenu.examples.tsx @@ -99,6 +99,40 @@ export const DefaultContextMenu = () => { DefaultContextMenu.displaySequence = displaySequence++; +export const FlatContextMenu = () => { + const { ref } = usePosition(); + + return ( +
+ + Item 1.1 + Item 1.2 + Item 1.3 + + Item 1.4 + Item 1.5 + Item 3.1.1 + Item 3.1.2 + Item 3.1.3 + Item 3.1.4 + Item 3.2 + Item 3.3 + Item 3.3 + +
+ ); +}; + +FlatContextMenu.displaySequence = displaySequence++; + export const ContextMenuControlledHighlighting = () => { const handleClose: ContextMenuProps["onClose"] = () => { console.log(`clicked menu action`); diff --git a/vuu-ui/showcase/src/examples/Table/TEST.examples.tsx b/vuu-ui/showcase/src/examples/Table/TEST.examples.tsx index 1c18fc57c..402e19d65 100644 --- a/vuu-ui/showcase/src/examples/Table/TEST.examples.tsx +++ b/vuu-ui/showcase/src/examples/Table/TEST.examples.tsx @@ -52,6 +52,6 @@ const TestTable = ({ }; export const TwoHundredColumns = (props: Partial) => ( - + ); TwoHundredColumns.displaySequence = displaySequence++; diff --git a/vuu-ui/showcase/src/examples/Table/Table.examples.tsx b/vuu-ui/showcase/src/examples/Table/Table.examples.tsx index 2f2728489..cbd740593 100644 --- a/vuu-ui/showcase/src/examples/Table/Table.examples.tsx +++ b/vuu-ui/showcase/src/examples/Table/Table.examples.tsx @@ -14,7 +14,7 @@ import { View, } from "@finos/vuu-layout"; import { ContextPanel } from "@finos/vuu-shell"; -import { GroupHeaderCellNext, Table, TableProps } from "@finos/vuu-table"; +import { GroupHeaderCell, Table, TableProps } from "@finos/vuu-table"; import { ColumnSettingsPanel, TableSettingsPanel, @@ -175,7 +175,7 @@ export const ControlledNavigation = () => { }; ControlledNavigation.displaySequence = displaySequence++; -export const EditableTableNextArrayData = () => { +export const EditableTableArrayData = () => { const getDefaultColumnConfig = useMemo( () => (_, columnName) => { switch (columnName) { @@ -197,7 +197,7 @@ export const EditableTableNextArrayData = () => { }, }, }; - case "ccy": + case "currency": return { editable: true, type: { @@ -238,6 +238,10 @@ export const EditableTableNextArrayData = () => { }, }, }; + case "wishlist": + return { + editable: true, + }; } }, [] @@ -263,7 +267,7 @@ export const EditableTableNextArrayData = () => { ); }; -EditableTableNextArrayData.displaySequence = displaySequence++; +EditableTableArrayData.displaySequence = displaySequence++; export const VuuInstruments = () => { const schemas = getAllSchemas(); @@ -337,7 +341,7 @@ export const FlexLayoutTables = () => { }; FlexLayoutTables.displaySequence = displaySequence++; -export const TableNextInLayoutWithContextPanel = () => { +export const TableInLayoutWithContextPanel = () => { useMemo(() => { registerComponent("ColumnSettings", ColumnSettingsPanel, "view"); registerComponent("TableSettings", TableSettingsPanel, "view"); @@ -367,9 +371,9 @@ export const TableNextInLayoutWithContextPanel = () => { ); }; -TableNextInLayoutWithContextPanel.displaySequence = displaySequence++; +TableInLayoutWithContextPanel.displaySequence = displaySequence++; -export const AutoTableNext = () => { +export const AutoTable = () => { const tableConfig = useMemo(() => { return { columns: getSchema("instruments").columns, @@ -385,9 +389,9 @@ export const AutoTableNext = () => {
); }; -AutoTableNext.displaySequence = displaySequence++; +AutoTable.displaySequence = displaySequence++; -export const AutoTableNextAsFlexChild = () => { +export const AutoTableAsFlexChild = () => { const tableConfig = useMemo(() => { return { columns: getSchema("instruments").columns, @@ -420,7 +424,7 @@ export const AutoTableNextAsFlexChild = () => { ); }; -AutoTableNextAsFlexChild.displaySequence = displaySequence++; +AutoTableAsFlexChild.displaySequence = displaySequence++; export const VuuTableCalculatedColumns = () => { const calculatedColumns: ColumnDescriptor[] = useMemo( @@ -507,7 +511,7 @@ export const VuuTableCalculatedColumns = () => { }; VuuTableCalculatedColumns.displaySequence = displaySequence++; -export const GroupHeaderCellNextOneColumn = () => { +export const GroupHeaderCellOneColumn = () => { const column: GroupColumnDescriptor = useMemo(() => { const valueFormatter = defaultValueFormatter; return { @@ -540,16 +544,13 @@ export const GroupHeaderCellNextOneColumn = () => { } as CSSProperties } > - + ); }; -GroupHeaderCellNextOneColumn.displaySequence = displaySequence++; +GroupHeaderCellOneColumn.displaySequence = displaySequence++; -export const GroupHeaderCellNextTwoColumn = () => { +export const GroupHeaderCellTwoColumn = () => { const column: GroupColumnDescriptor = useMemo(() => { const valueFormatter = defaultValueFormatter; return { @@ -588,16 +589,13 @@ export const GroupHeaderCellNextTwoColumn = () => { } as CSSProperties } > - + ); }; -GroupHeaderCellNextTwoColumn.displaySequence = displaySequence++; +GroupHeaderCellTwoColumn.displaySequence = displaySequence++; -export const GroupHeaderCellNextThreeColumn = () => { +export const GroupHeaderCellThreeColumn = () => { const valueFormatter = defaultValueFormatter; const [column] = useState({ @@ -644,7 +642,7 @@ export const GroupHeaderCellNextThreeColumn = () => { } >
- { ); }; -GroupHeaderCellNextThreeColumn.displaySequence = displaySequence++; +GroupHeaderCellThreeColumn.displaySequence = displaySequence++; -export const GroupHeaderCellNextThreeColumnFixedWidth = () => { +export const GroupHeaderCellThreeColumnFixedWidth = () => { const valueFormatter = defaultValueFormatter; const [column] = useState({ @@ -693,7 +691,7 @@ export const GroupHeaderCellNextThreeColumnFixedWidth = () => { return (
- {
); }; -GroupHeaderCellNextThreeColumnFixedWidth.displaySequence = displaySequence++; +GroupHeaderCellThreeColumnFixedWidth.displaySequence = displaySequence++; const SymbolHeader = (_: HeaderCellProps) => { const handleClick = useCallback((e) => { diff --git a/vuu-ui/showcase/src/examples/UiControls/Dropdown.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/Dropdown.examples.tsx index 44a8de8b9..fff70dc49 100644 --- a/vuu-ui/showcase/src/examples/UiControls/Dropdown.examples.tsx +++ b/vuu-ui/showcase/src/examples/UiControls/Dropdown.examples.tsx @@ -19,6 +19,7 @@ export const DefaultDropdown = () => { ); return (