npm - @vuu-ui/vuu-table-extras - Versions diffs - 0.13.112-alpha.1 → 0.13.112 - Mend

@vuu-ui/vuu-table-extras 0.13.112-alpha.1 → 0.13.112

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/cjs/cell-renderers/dropdown-cell/DropdownCell.js CHANGED Viewed

@@ -47,7 +47,7 @@ const DropdownCell = react.memo(function DropdownCell2({
           },
           "commit"
         );
-        if (vuuUtils.isRpcSuccess(response)) {
+        if (response === true) {
           vuuUtils.dispatchCustomEvent(evt.target, "vuu-commit");
         }
       }

package/cjs/cell-renderers/dropdown-cell/DropdownCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownCell.js","sources":["../../../../../packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n getSelectedOption,\n ~~isRpcSuccess,\n~~ registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n SyntheticEvent,\n memo,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(function DropdownCell({\n column,\n columnMap,\n onEdit,\n row,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dropdown-cell\",\n css: dropdownCellCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as string \| number;\n const { values } = useLookupValues(column, dataValue);\n const valueRef = useRef<ListOption>(undefined);\n\n useMemo(() => {\n valueRef.current = getSelectedOption(values, dataValue);\n }, [dataValue, values]);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n console.log(`handleOpenChange ${isOpen}`);\n if (isOpen === false) {\n setOpen(false);\n }\n }, []);\n\n const handleSelectionChange = useCallback(\n async (evt: SyntheticEvent, [selectedOption]: ListOption[]) => {\n if (selectedOption) {\n // Note, we do not setState locally when a selection is made, we just send the update\n // to the server. We rely on the update coming back in from a server response which\n // we handle in the useMemo above. If we worry that server repsonses might be too slow\n // we can extend this logic with some kind of pending update state.\n const response = await onEdit?.(\n {\n editType: \"commit\",\n previousValue: valueRef.current?.value,\n value: selectedOption.value as VuuColumnDataType,\n },\n \"commit\",\n );\n if (~~isRpcSuccess(~~response)) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n }\n },\n [onEdit],\n );\n\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n if (!open) {\n setOpen(true);\n }\n }, [open]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"Enter\" && !open) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n },\n [open],\n );\n\n const { current: selectedOption } = valueRef;\n return (\n <Dropdown<ListOption>\n className={classBase}\n data-icon=\"triangle-down\"\n onClick={handleClick}\n onKeyDownCapture={handleKeyDown}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selectedOption ? [selectedOption] : []}\n value={selectedOption?.label}\n >\n {values.map((listOption, i) => (\n <Option key={i} value={listOption}>\n {listOption.label}\n </Option>\n ))}\n </Dropdown>\n );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["memo","DropdownCell","useWindow","useComponentCssInjection","dropdownCellCss","useState","useLookupValues","useRef","useMemo","getSelectedOption","useCallback","selectedOption","~~isRpcSuccess","~~dispatchCustomEvent","jsx","Dropdown","Option","dataColumnAndKeyUnchanged","registerComponent"],"mappings":";;;;;;;;;;;~~AA0BA~~,MAAM,SAAY,GAAA,sBAAA;AAEL,MAAA,YAAA,GAAeA,UAAK,CAAA,SAASC,aAAa,CAAA;AAAA,EACrD,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA2B,EAAA;AACzB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,eAAS,KAAK,CAAA;AACtC,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA;AAC7B,EAAA,MAAM,EAAE,MAAA,EAAW,GAAAC,4BAAA,CAAgB,QAAQ,SAAS,CAAA;AACpD,EAAM,MAAA,QAAA,GAAWC,aAAmB,KAAS,CAAA,CAAA;AAE7C,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAS,QAAA,CAAA,OAAA,GAAUC,0BAAkB,CAAA,MAAA,EAAQ,SAAS,CAAA;AAAA,GACrD,EAAA,CAAC,SAAW,EAAA,MAAM,CAAC,CAAA;AAEtB,EAAM,MAAA,gBAAA,GAAmBC,iBAAY,CAAA,CAAC,MAAoB,KAAA;AACxD,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAoB,iBAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AACxC,IAAA,IAAI,WAAW,KAAO,EAAA;AACpB,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA;AACf,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,qBAAwB,GAAAA,iBAAA;AAAA,IAC5B,OAAO,GAAA,EAAqB,CAACC,eAAc,CAAoB,KAAA;AAC7D,MAAA,IAAIA,eAAgB,EAAA;AAKlB,QAAA,MAAM,WAAW,MAAM,MAAA;AAAA,UACrB;AAAA,YACE,QAAU,EAAA,QAAA;AAAA,YACV,aAAA,EAAe,SAAS,OAAS,EAAA,KAAA;AAAA,YACjC,OAAOA,eAAe,CAAA;AAAA,WACxB;AAAA,UACA;AAAA,SACF;AACA,~~QAAI~~,~~IAAAC~~,~~qBAAA~~,~~CAAa~~,~~QAAQ,CAAG,~~EAAA;~~AAC1B~~,UAAoBC,4BAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAC7D;AACF,KACF;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAM,MAAA,WAAA,~~GAAcH~~,kBAAkD,MAAM;AAC1E,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAA,OAAA,CAAQ,IAAI,CAAA;AAAA;AACd,GACF,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,OAAW,IAAA,CAAC,IAAM,EAAA;AAC9B,QAAA,CAAA,CAAE,cAAe,EAAA;AACjB,QAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,QAAA,OAAA,CAAQ,IAAI,CAAA;AAAA;AACd,KACF;AAAA,IACA,CAAC,IAAI;AAAA,GACP;AAEA,EAAM,MAAA,EAAE,OAAS,EAAA,cAAA,EAAmB,GAAA,QAAA;AACpC,EACE,~~uBAAAI~~,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,SAAA;AAAA,MACX,WAAU,EAAA,eAAA;AAAA,MACV,OAAS,EAAA,WAAA;AAAA,MACT,gBAAkB,EAAA,aAAA;AAAA,MAClB,YAAc,EAAA,gBAAA;AAAA,MACd,iBAAmB,EAAA,qBAAA;AAAA,MACnB,IAAA;AAAA,MACA,QAAU,EAAA,cAAA,GAAiB,CAAC,cAAc,IAAI,EAAC;AAAA,MAC/C,OAAO,cAAgB,EAAA,KAAA;AAAA,MAEtB,QAAO,EAAA,MAAA,CAAA,GAAA,CAAI,CAAC,UAAA,EAAY,CACvB,qBAAAD,cAAA,CAACE,WAAe,EAAA,EAAA,KAAA,EAAO,UACpB,EAAA,QAAA,EAAA,UAAA,CAAW,KADD,EAAA,EAAA,CAEb,CACD;AAAA;AAAA,GACH;AAEJ,CAAA,EAAGC,kCAAyB;AAE5BC,0BAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
1	+ {"version":3,"file":"DropdownCell.js","sources":["../../../../../packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n getSelectedOption,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n SyntheticEvent,\n memo,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(function DropdownCell({\n column,\n columnMap,\n onEdit,\n row,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dropdown-cell\",\n css: dropdownCellCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as string \| number;\n const { values } = useLookupValues(column, dataValue);\n const valueRef = useRef<ListOption>(undefined);\n\n useMemo(() => {\n valueRef.current = getSelectedOption(values, dataValue);\n }, [dataValue, values]);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n console.log(`handleOpenChange ${isOpen}`);\n if (isOpen === false) {\n setOpen(false);\n }\n }, []);\n\n const handleSelectionChange = useCallback(\n async (evt: SyntheticEvent, [selectedOption]: ListOption[]) => {\n if (selectedOption) {\n // Note, we do not setState locally when a selection is made, we just send the update\n // to the server. We rely on the update coming back in from a server response which\n // we handle in the useMemo above. If we worry that server repsonses might be too slow\n // we can extend this logic with some kind of pending update state.\n const response = await onEdit?.(\n {\n editType: \"commit\",\n previousValue: valueRef.current?.value,\n value: selectedOption.value as VuuColumnDataType,\n },\n \"commit\",\n );\n if (response === true) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n }\n },\n [onEdit],\n );\n\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n if (!open) {\n setOpen(true);\n }\n }, [open]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"Enter\" && !open) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n },\n [open],\n );\n\n const { current: selectedOption } = valueRef;\n return (\n <Dropdown<ListOption>\n className={classBase}\n data-icon=\"triangle-down\"\n onClick={handleClick}\n onKeyDownCapture={handleKeyDown}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selectedOption ? [selectedOption] : []}\n value={selectedOption?.label}\n >\n {values.map((listOption, i) => (\n <Option key={i} value={listOption}>\n {listOption.label}\n </Option>\n ))}\n </Dropdown>\n );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["memo","DropdownCell","useWindow","useComponentCssInjection","dropdownCellCss","useState","useLookupValues","useRef","useMemo","getSelectedOption","useCallback","selectedOption","dispatchCustomEvent","jsx","Dropdown","Option","dataColumnAndKeyUnchanged","registerComponent"],"mappings":"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"}

package/cjs/column-menu/ColumnMenu.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var columnMenuCss = ".vuuMenuItem {\n  --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>');\n}\n.vuuColumnMenu {\n  --menu-button-size: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: 3px;\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-minWidth: var(--menu-button-size);\n  --saltButton-height: var(--vuuColumnMenu-height,var(--menu-button-size));\n  --saltButton-width: var(--vuuColumnMenu-width, var(--menu-button-size));\n\n  --vuu-icon-height: var(--menu-button-size);\n  --vuu-icon-left: 0px;\n  --vuu-icon-top: 0px;\n  --vuu-icon-width: var(--menu-button-size);\n\n  border: none;\n  flex: 0 0 var(--menu-button-size);\n  margin: var(--vuuTable-columnMenu-margin, 0);\n  padding: 0;\n}\n";
+var columnMenuCss = ".vuuMenuItem {\n  --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>');\n}\n.vuuColumnMenu {\n  --menu-button-size: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: 3px;\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-minWidth: var(--menu-button-size);\n  --saltButton-height: var(--menu-button-size);\n  --saltButton-width: var(--menu-button-size);\n\n  --vuu-icon-height: var(--menu-button-size);\n  --vuu-icon-left: 0px;\n  --vuu-icon-top: 0px;\n  --vuu-icon-width: var(--menu-button-size);\n\n  border: none;\n  flex: 0 0 var(--menu-button-size);\n  margin: var(--vuuTable-columnMenu-margin, 0);\n  padding: 0;\n}\n";
 module.exports = columnMenuCss;
 //# sourceMappingURL=ColumnMenu.css.js.map

package/cjs/column-menu/useColumnActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useColumnActions.js","sources":["../../../../packages/vuu-table-extras/src/column-menu/useColumnActions.ts"],"sourcesContent":["/* eslint-disable no-sequences /\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { VuuFilter } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n ColumnDescriptor,\n ~~ColumnDisplayAction,\n~~ RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n addGroupColumn,\n addSortColumn,\n AggregationType,\n logUnhandledMessage,\n removeGroupColumn,\n setAggregations,\n setSortColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport { ColumnMenuActionType } from \"./column-menu-utils\";\nimport { DisplaySettingsAction } from \"./column-action-types\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface ContextMenuOptions {\n column?: RuntimeColumnDescriptor;\n filter?: Filter;\n sort?: VuuFilter;\n}\nexport interface ContextMenuHookProps {\n dataSource: DataSource;\n onColumnDisplayAction?: (action: ColumnDisplayAction) => void;\n onDisplaySettingsAction?: (action: DisplaySettingsAction) => void;\n}\n\nconst { Average, Count, Distinct, High, Low, Sum } = AggregationType;\n\nexport const useColumnActions = ({\n dataSource,\n onColumnDisplayAction,\n onDisplaySettingsAction,\n}: ContextMenuHookProps) => {\n /* return {boolean} used by caller to determine whether to forward to additional installed context menu handlers */\n const handleContextMenuAction: MenuActionHandler<\n ColumnMenuActionType,\n ColumnDescriptor\n > = (columnMenuActionType, column): boolean => {\n if (column && dataSource) {\n // prettier-ignore\n switch(columnMenuActionType){\n // 1) DataSource operations ...\n case \"sort-asc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-dsc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"D\")), true;\n case \"remove-sort\": return (dataSource.sort = {sortDefs:[]}), true;\n case \"sort-add-asc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-add-dsc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"D\")), true;\n case \"group-column\": return (dataSource.groupBy = [column.name]), true;\n case \"add-to-group\": return (dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"remove-group\": return (dataSource.groupBy = []), true;\n case \"remove-from-group\": return (dataSource.groupBy = removeGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"remove-column\": {\n dataSource.columns = dataSource.columns.filter(name => name !== column.name);\n onColumnDisplayAction?.({type: \"removeColumn\", column});\n return true;\n }\n case \"agg-avg\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Average)), true;\n case \"agg-high\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, High)), true;\n case \"agg-low\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Low)), true;\n case \"agg-count\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Count)), true;\n case \"agg-distinct\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Distinct)), true;\n case \"agg-sum\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Sum)), true;\n // 2) Column display options ...\n case \"hide-column\": return onColumnDisplayAction?.({type: \"hideColumn\", column}), true;\n case \"pin-column-left\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"left\"}), true;\n case \"pin-column-right\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"right\"}), true;\n case \"unpin-column\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: false}), true\n // 3) Table Admin options ...\n case \"column-settings\": return onDisplaySettingsAction?.({type: \"column-settings\", column}), true\n case \"table-settings\": return onDisplaySettingsAction?.({type: \"table-settings\"}), true\n default:\n logUnhandledMessage(columnMenuActionType, `[vuu-table-extras] useColumnActions handleContextMenuAction, unhandled columnMenuActionType`)\n }\n }\n return false;\n };\n\n return handleContextMenuAction;\n};\n"],"names":["AggregationType","setSortColumn","addSortColumn","addGroupColumn","removeGroupColumn","setAggregations","logUnhandledMessage"],"mappings":";;;;~~AAiCA~~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"}
1	+ {"version":3,"file":"useColumnActions.js","sources":["../../../../packages/vuu-table-extras/src/column-menu/useColumnActions.ts"],"sourcesContent":["/* eslint-disable no-sequences /\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { VuuFilter } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n ColumnDescriptor,\n RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n addGroupColumn,\n addSortColumn,\n AggregationType,\n logUnhandledMessage,\n removeGroupColumn,\n setAggregations,\n setSortColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport { ColumnMenuActionType } from \"./column-menu-utils\";\nimport {\n ColumnDisplayAction,\n DisplaySettingsAction,\n} from \"./column-action-types\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface ContextMenuOptions {\n column?: RuntimeColumnDescriptor;\n filter?: Filter;\n sort?: VuuFilter;\n}\nexport interface ContextMenuHookProps {\n dataSource: DataSource;\n onColumnDisplayAction?: (action: ColumnDisplayAction) => void;\n onDisplaySettingsAction?: (action: DisplaySettingsAction) => void;\n}\n\nconst { Average, Count, Distinct, High, Low, Sum } = AggregationType;\n\nexport const useColumnActions = ({\n dataSource,\n onColumnDisplayAction,\n onDisplaySettingsAction,\n}: ContextMenuHookProps) => {\n /* return {boolean} used by caller to determine whether to forward to additional installed context menu handlers */\n const handleContextMenuAction: MenuActionHandler<\n ColumnMenuActionType,\n ColumnDescriptor\n > = (columnMenuActionType, column): boolean => {\n if (column && dataSource) {\n // prettier-ignore\n switch(columnMenuActionType){\n // 1) DataSource operations ...\n case \"sort-asc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-dsc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"D\")), true;\n case \"remove-sort\": return (dataSource.sort = {sortDefs:[]}), true;\n case \"sort-add-asc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-add-dsc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"D\")), true;\n case \"group-column\": return (dataSource.groupBy = [column.name]), true;\n case \"add-to-group\": return (dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"remove-group\": return (dataSource.groupBy = []), true;\n case \"remove-from-group\": return (dataSource.groupBy = removeGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"remove-column\": {\n dataSource.columns = dataSource.columns.filter(name => name !== column.name);\n onColumnDisplayAction?.({type: \"removeColumn\", column});\n return true;\n }\n case \"agg-avg\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Average)), true;\n case \"agg-high\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, High)), true;\n case \"agg-low\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Low)), true;\n case \"agg-count\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Count)), true;\n case \"agg-distinct\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Distinct)), true;\n case \"agg-sum\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Sum)), true;\n // 2) Column display options ...\n case \"hide-column\": return onColumnDisplayAction?.({type: \"hideColumn\", column}), true;\n case \"pin-column-left\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"left\"}), true;\n case \"pin-column-right\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"right\"}), true;\n case \"unpin-column\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: false}), true\n // 3) Table Admin options ...\n case \"column-settings\": return onDisplaySettingsAction?.({type: \"column-settings\", column}), true\n case \"table-settings\": return onDisplaySettingsAction?.({type: \"table-settings\"}), true\n default:\n logUnhandledMessage(columnMenuActionType, `[vuu-table-extras] useColumnActions handleContextMenuAction, unhandled columnMenuActionType`)\n }\n }\n return false;\n };\n\n return handleContextMenuAction;\n};\n"],"names":["AggregationType","setSortColumn","addSortColumn","addGroupColumn","removeGroupColumn","setAggregations","logUnhandledMessage"],"mappings":"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"}

package/cjs/datasource-stats/DatasourceStats.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var dataSourceStats = ".vuuDatasourceStats {\n  --datasourceStats-background: var(--vuuDatasourceStats-background);\n  align-items: center;\n  background: var(--datasourceStats-background, var(--salt-container-secondary-background));\n  display: grid;\n  font-size: var(--vuuDatasourceStats-fontSize, 10px);\n  gap: var(--vuuDatasourceStats-gap, var(--salt-spacing-100));\n  grid-template-areas: \"panel-start panel-center panel-end\";\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  height: var(--vuuDatasourceStats-height, 100%);\n  padding: 0 var(--salt-spacing-200);\n\n  &.vuuDatasourceStats-withSelection {\n    --datasourceStats-background: var(--vuuDatasourceStats-withSelection-background, var(--vuuDatasourceStats-background));\n  }\n\n  .vuuDatasourceStats-statsPanel {\n    align-items: center;\n    display: flex;\n    gap: var(--salt-spacing-100);\n    width: fit-content;\n  }\n\n  .vuuDatasourceStats-rowStats {\n    justify-self: flex-start;\n    grid-area: panel-start;\n  }\n  .vuuDatasourceStats-selected {\n    margin-left: var(--salt-spacing-100);\n  }\n\n  .vuuDatasourceStats-range {\n    white-space: nowrap;\n  }\n\n  .vuuDatasourceStats-label {\n    color: var(--salt-content-secondary-foreground);\n    white-space: nowrap;\n  }\n\n  .vuuDatasourceStats-selectionActions {\n    grid-area: panel-center;\n    justify-self: center;\n  }\n\n  .vuuDatasourceStats-value {\n    color: var(--salt-content-primary-foreground);\n  }\n  .vuuDatasourceStats-tooltray {\n    justify-self: end;;\n    margin: 0 var(--salt-spacing-200);\n    grid-area: panel-end;\n  }\n\n}\n\n";
+var dataSourceStats = ".vuuDatasourceStats {\n  align-items: center;\n  background: var(--vuuDatasourceStats-background, var(--salt-container-secondary-background));\n  display: grid;\n  font-size: var(--vuuDatasourceStats-fontSize, 10px);\n  gap: var(--vuuDatasourceStats-gap, var(--salt-spacing-100));\n  grid-template-areas: \"panel-start panel-center panel-end\";\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  height: var(--vuuDatasourceStats-height, 100%);\n  padding: 0 var(--salt-spacing-200);\n\n    .vuuDatasourceStats-statsPanel {\n      align-items: center;\n      display: flex;\n      gap: var(--salt-spacing-100);\n      width: fit-content;\n    }\n\n    .vuuDatasourceStats-rowStats {\n      justify-self: flex-start;\n      grid-area: panel-start;\n    }\n    .vuuDatasourceStats-freezeStatus {\n      justify-self: flex-start;\n      grid-area: panel-start;\n    }\n    .vuuDatasourceStats-selectionStats {\n      justify-self: center;\n      grid-area: panel-center;\n    }\n\n  .vuuDatasourceStats-label {\n    color: var(--salt-content-secondary-foreground);\n  }\n\n  .vuuDatasourceStats-value {\n    color: var(--salt-content-primary-foreground);\n  }\n  .vuuDatasourceStats-tooltray {\n    justify-self: end;;\n    margin: 0 var(--salt-spacing-200);\n    grid-area: panel-end;\n  }\n\n}\n\n";
 module.exports = dataSourceStats;
 //# sourceMappingURL=DatasourceStats.css.js.map

package/cjs/datasource-stats/DatasourceStats.js CHANGED Viewed

@@ -9,11 +9,21 @@ var DatasourceStats = require('./DatasourceStats.css.js');
 const classBase = "vuuDatasourceStats";
 const numberFormatter = new Intl.NumberFormat();
+const getLabel = (label, count = 1) => {
+  if (count === 1) {
+    return typeof label === "string" ? label : label.singlular;
+  } else {
+    return typeof label === "string" ? `${label}s` : label.plural;
+  }
+};
 const DataSourceStats = ({
   children,
   className,
   dataSource,
+  itemLabel = "row",
+  showFreezeStatus = true,
   showRowStats = true,
+  showSelectionStats = true,
   tooltrayActions,
   ...htmlAttributes
 }) => {
@@ -23,13 +33,16 @@ const DataSourceStats = ({
     css: DatasourceStats,
     window: targetWindow
   });
-  const { range, selectedCount, size } = useDatasourceStats.useDatasourceStats({
+  const { freezeTime, range, selectedCount, size } = useDatasourceStats.useDatasourceStats({
     dataSource,
-    showRowStats
+    showFreezeStatus,
+    showRowStats,
+    showSelectionStats
   });
   const from = numberFormatter.format(range.from + 1);
   const to = numberFormatter.format(Math.min(range.to, size));
   const value = numberFormatter.format(size);
+  const showSelection = showSelectionStats && selectedCount > 0;
   if (size === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlAttributes, className: cx(classBase, className), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-label`, children: "No Rows to display" }) });
   } else {
@@ -38,7 +51,7 @@ const DataSourceStats = ({
       {
         ...htmlAttributes,
         className: cx(classBase, className, {
-          [`${classBase}-withSelection`]: selectedCount > 0
+          [`${classBase}-withSelection`]: showSelection
         }),
         children: [
           showRowStats ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-statsPanel ${classBase}-rowStats`, children: [
@@ -49,20 +62,30 @@ const DataSourceStats = ({
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-value`, children: to })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-label`, children: "of" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-value`, children: value }),
-            selectedCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                className: cx(`${classBase}-label`, `${classBase}-selected`),
-                children: `${selectedCount.toLocaleString()} selected`
-              }
-            ) : null
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-value`, children: value })
           ] }) : null,
-          selectedCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+          showFreezeStatus && freezeTime !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-statsPanel ${classBase}-freezeStatus`, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: `${classBase}-label`,
+              children: `(frozen at ${freezeTime})`
+            }
+          ) }) : null,
+          showSelection ? /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: `${classBase}-statsPanel ${classBase}-selectionActions`,
-              children
+              className: `${classBase}-statsPanel ${classBase}-selectionStats`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-value`, children: selectedCount }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: `${classBase}-label`,
+                    children: `selected ${getLabel(itemLabel, selectedCount)}`
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-actions`, children })
+              ]
             }
           ) : null,
           tooltrayActions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-statsPanel ${classBase}-tooltray`, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-actions`, children: tooltrayActions }) }) : null

package/cjs/datasource-stats/DatasourceStats.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatasourceStats.js","sources":["../../../../packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport {\n DatasourceStatsHookProps,\n useDatasourceStats,\n} from \"./useDatasourceStats\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\n\nexport type ItemLabel =\n \| string\n \| {\n singlular: string;\n plural: string;\n };\n\nexport interface DataSourceStatsProps\n extends DatasourceStatsHookProps,\n Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n /*\n children will be displayed when selection present. Intended\n * use case is display of action button(s) that will operate on\n * selected rows.\n */\n children?: ReactNode;\n selectionActions?: ReactNode;\n tooltrayActions?: ReactNode;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nexport const DataSourceStats = ({\n children,\n className,\n dataSource,\n showRowStats = true,\n tooltrayActions,\n ...htmlAttributes\n}: DataSourceStatsProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-datasource-stats\",\n css: dataSourceStats,\n window: targetWindow,\n });\n\n const { range, selectedCount, size } = useDatasourceStats({\n dataSource,\n showRowStats,\n });\n\n const from = numberFormatter.format(range.from + 1);\n const to = numberFormatter.format(Math.min(range.to, size));\n const value = numberFormatter.format(size);\n\n if (size === 0) {\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n <span className={`${classBase}-label`}>No Rows to display</span>\n </div>\n );\n } else {\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className, {\n [`${classBase}-withSelection`]: ~~selectedCount > 0~~,\n })}\n >\n {showRowStats ? (\n <div className={`${classBase}-statsPanel ${classBase}-rowStats`}>\n <span className={`${classBase}-label`}>Row count</span>\n <span className={`${classBase}-range`}>\n <span className={`${classBase}-value`}>{from}</span>\n <span className={`${classBase}-label`}>-</span>\n <span className={`${classBase}-value`}>{to}</span>\n </span>\n <span className={`${classBase}-label`}>of</span>\n <span className={`${classBase}-value`}>{value}</span>\n {~~selectedCount~~ > 0 ? (\n <~~span\n~~ className={~~cx(~~`${classBase}-~~label`,~~ `${classBase}-~~selected~~`)}\n >{`${~~selectedCount.toLocaleString()~~} ~~selected~~`}~~</span>\~~n ) : ~~null~~}\n </div>\n ) : null}\n {~~selectedCount~~ ~~> 0~~ ? (\n <div\n className={`${classBase}-statsPanel ${classBase}-~~selectionActions~~`}\n >\n {~~children~~}\n </div>\n ) : null}\n {tooltrayActions ? (\n <div className={`${classBase}-statsPanel ${classBase}-tooltray`}>\n <span className={`${classBase}-actions`}>{tooltrayActions}</span>\n </div>\n ) : null}\n </div>\n );\n }\n};\n"],"names":["useWindow","useComponentCssInjection","dataSourceStats","useDatasourceStats","jsx","jsxs"],"mappings":";;;;;;;;;~~AA+BA~~,MAAM,SAAY,GAAA,oBAAA;AAElB,MAAM,eAAA,GAAkB,IAAI,IAAA,CAAK,YAAa,EAAA;~~AAEvC~~,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAe,GAAA,IAAA;AAAA,EACf,eAAA;AAAA,EACA,GAAG;AACL,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,aAAe,EAAA,IAAA,KAASC,qCAAmB,CAAA;AAAA,~~IACxD~~,UAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,IAAO,GAAA,eAAA,CAAgB,MAAO,CAAA,KAAA,CAAM,OAAO,CAAC,CAAA;AAClD,EAAM,MAAA,EAAA,GAAK,gBAAgB,MAAO,CAAA,IAAA,CAAK,IAAI,KAAM,CAAA,EAAA,EAAI,IAAI,CAAC,CAAA;AAC1D,EAAM,MAAA,KAAA,GAAQ,eAAgB,CAAA,MAAA,CAAO,IAAI,CAAA;~~AAEzC~~,EAAA,IAAI,SAAS,CAAG,EAAA;AACd,IAAA,sCACG,KAAK,EAAA,EAAA,GAAG,cAAgB,EAAA,SAAA,EAAW,GAAG,SAAW,EAAA,SAAS,CACzD,EAAA,QAAA,kBAAAC,cAAA,CAAC,UAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,MAAA,CAAA,EAAU,gCAAkB,CAC3D,EAAA,CAAA;AAAA,GAEG,MAAA;AACL,IACE,uBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,UAClC,CAAC,CAAA,EAAG,SAAS,CAAA,cAAA,CAAgB,GAAG~~,aAAgB,GAAA~~;AAAA,~~SACjD~~,CAAA;AAAA,QAEA,QAAA,EAAA;AAAA,UAAA,YAAA,mCACE,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,YAAA,EAAe,SAAS,CAClD,SAAA,CAAA,EAAA,QAAA,EAAA;AAAA,4BAAAD,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAS,EAAA,WAAA,EAAA,CAAA;AAAA,4BAC/CC,eAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAC3B,MAAA,CAAA,EAAA,QAAA,EAAA;AAAA,8BAAAD,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,6CAC5C,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,6CACvC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAG,EAAA,EAAA,EAAA;AAAA,aAC7C,EAAA,CAAA;AAAA,2CACC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,2CACxC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAM,EAAA,KAAA,EAAA~~,CAAA~~;AAAA,~~YAC7C~~,~~gBAAgB~~,~~CACf~~,~~mBAAAA~~,~~cAAA~~;AAAA,~~cAAC~~,~~MAAA;AAAA~~,~~cAAA;AAAA~~,~~gBACC~~,~~WAAW~~,~~EAAG~~,CAAA,CAAA,~~EAAG~~,~~SAAS~~,~~CAAU~~,~~MAAA~~,~~CAAA~~,EAAA,~~CAAA~~,~~EAAG~~,SAAS,~~CAAW~~,~~SAAA~~,CAAA,~~CAAA~~;AAAA,~~gBAC3D~~,~~QAAA~~,~~EAAA~~,~~CAAA~~,~~EAAG~~,~~aAAc~~,CAAA,~~cAAA~~,~~EAAgB~~,CAAA,~~SAAA~~;AAAA;AAAA,~~aACjC~~,~~GAAA;AAAA,WAAA,EACN,~~CACE,GAAA,IAAA;AAAA,UACH,~~gBAAgB~~,~~CACf~~,~~mBAAAA,cAAA~~;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,YAAA,EAAe,SAAS,CAAA,~~iBAAA~~,CAAA;AAAA,~~cAE9C~~;AAAA;AAAA,~~WAED~~,GAAA,IAAA;AAAA,UACH,kCACEA,cAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAe,YAAA,EAAA,SAAS,CAClD,SAAA,CAAA,EAAA,QAAA,kBAAAA,cAAA,CAAC,UAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,QAAA,CAAA,EAAA,QAAA,EAAA,eAAA,EAAgB,GAC5D,CACE,GAAA;AAAA;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}
1	+ {"version":3,"file":"DatasourceStats.js","sources":["../../../../packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport {\n DatasourceStatsHookProps,\n useDatasourceStats,\n} from \"./useDatasourceStats\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\n\nexport type ItemLabel =\n \| string\n \| {\n singlular: string;\n plural: string;\n };\n\nexport interface DataSourceStatsProps\n extends DatasourceStatsHookProps,\n Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n /*\n children will be displayed when selection present. Intended\n * use case is display of action button(s) that will operate on\n * selected rows.\n /\n children?: ReactNode;\n /\n Label will be used in display of selected row count, e.g\n * '6 trades selected', where 'trade' is the itemLabel, will\n * default to 'row'\n */\n itemLabel?: ItemLabel;\n\n selectionActions?: ReactNode;\n tooltrayActions?: ReactNode;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nconst getLabel = (label: ItemLabel, count = 1) => {\n if (count === 1) {\n return typeof label === \"string\" ? label : label.singlular;\n } else {\n return typeof label === \"string\" ? `${label}s` : label.plural;\n }\n};\n\nexport const DataSourceStats = ({\n children,\n className,\n dataSource,\n itemLabel = \"row\",\n showFreezeStatus = true,\n showRowStats = true,\n showSelectionStats = true,\n tooltrayActions,\n ...htmlAttributes\n}: DataSourceStatsProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-datasource-stats\",\n css: dataSourceStats,\n window: targetWindow,\n });\n\n const { freezeTime, range, selectedCount, size } = useDatasourceStats({\n dataSource,\n showFreezeStatus,\n showRowStats,\n showSelectionStats,\n });\n\n const from = numberFormatter.format(range.from + 1);\n const to = numberFormatter.format(Math.min(range.to, size));\n const value = numberFormatter.format(size);\n const showSelection = showSelectionStats && selectedCount > 0;\n\n if (size === 0) {\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n <span className={`${classBase}-label`}>No Rows to display</span>\n </div>\n );\n } else {\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className, {\n [`${classBase}-withSelection`]: showSelection,\n })}\n >\n {showRowStats ? (\n <div className={`${classBase}-statsPanel ${classBase}-rowStats`}>\n <span className={`${classBase}-label`}>Row count</span>\n <span className={`${classBase}-range`}>\n <span className={`${classBase}-value`}>{from}</span>\n <span className={`${classBase}-label`}>-</span>\n <span className={`${classBase}-value`}>{to}</span>\n </span>\n <span className={`${classBase}-label`}>of</span>\n <span className={`${classBase}-value`}>{value}</span>\n </div>\n ) : null}\n {showFreezeStatus && freezeTime !== undefined ? (\n <div className={`${classBase}-statsPanel ${classBase}-freezeStatus`}>\n <span\n className={`${classBase}-label`}\n >{`(frozen at ${freezeTime})`}</span>\n </div>\n ) : null}\n {showSelection ? (\n <div\n className={`${classBase}-statsPanel ${classBase}-selectionStats`}\n >\n <span className={`${classBase}-value`}>{selectedCount}</span>\n <span\n className={`${classBase}-label`}\n >{`selected ${getLabel(itemLabel, selectedCount)}`}</span>\n <span className={`${classBase}-actions`}>{children}</span>\n </div>\n ) : null}\n {tooltrayActions ? (\n <div className={`${classBase}-statsPanel ${classBase}-tooltray`}>\n <span className={`${classBase}-actions`}>{tooltrayActions}</span>\n </div>\n ) : null}\n </div>\n );\n }\n};\n"],"names":["useWindow","useComponentCssInjection","dataSourceStats","useDatasourceStats","jsx","jsxs"],"mappings":"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"}

package/esm/cell-renderers/dropdown-cell/DropdownCell.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useLookupValues } from '@vuu-ui/vuu-data-react';
-import { getSelectedOption, isRpcSuccess, dispatchCustomEvent, dataColumnAndKeyUnchanged, registerComponent } from '@vuu-ui/vuu-utils';
+import { getSelectedOption, dispatchCustomEvent, dataColumnAndKeyUnchanged, registerComponent } from '@vuu-ui/vuu-utils';
 import { Dropdown, Option } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
@@ -45,7 +45,7 @@ const DropdownCell = memo(function DropdownCell2({
           },
           "commit"
         );
-        if (isRpcSuccess(response)) {
+        if (response === true) {
           dispatchCustomEvent(evt.target, "vuu-commit");
         }
       }

package/esm/cell-renderers/dropdown-cell/DropdownCell.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownCell.js","sources":["../../../../../packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n getSelectedOption,\n ~~isRpcSuccess,\n~~ registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n SyntheticEvent,\n memo,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(function DropdownCell({\n column,\n columnMap,\n onEdit,\n row,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dropdown-cell\",\n css: dropdownCellCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as string \| number;\n const { values } = useLookupValues(column, dataValue);\n const valueRef = useRef<ListOption>(undefined);\n\n useMemo(() => {\n valueRef.current = getSelectedOption(values, dataValue);\n }, [dataValue, values]);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n console.log(`handleOpenChange ${isOpen}`);\n if (isOpen === false) {\n setOpen(false);\n }\n }, []);\n\n const handleSelectionChange = useCallback(\n async (evt: SyntheticEvent, [selectedOption]: ListOption[]) => {\n if (selectedOption) {\n // Note, we do not setState locally when a selection is made, we just send the update\n // to the server. We rely on the update coming back in from a server response which\n // we handle in the useMemo above. If we worry that server repsonses might be too slow\n // we can extend this logic with some kind of pending update state.\n const response = await onEdit?.(\n {\n editType: \"commit\",\n previousValue: valueRef.current?.value,\n value: selectedOption.value as VuuColumnDataType,\n },\n \"commit\",\n );\n if (~~isRpcSuccess(~~response)) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n }\n },\n [onEdit],\n );\n\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n if (!open) {\n setOpen(true);\n }\n }, [open]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"Enter\" && !open) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n },\n [open],\n );\n\n const { current: selectedOption } = valueRef;\n return (\n <Dropdown<ListOption>\n className={classBase}\n data-icon=\"triangle-down\"\n onClick={handleClick}\n onKeyDownCapture={handleKeyDown}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selectedOption ? [selectedOption] : []}\n value={selectedOption?.label}\n >\n {values.map((listOption, i) => (\n <Option key={i} value={listOption}>\n {listOption.label}\n </Option>\n ))}\n </Dropdown>\n );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["DropdownCell","selectedOption"],"mappings":";;;;;;;;;~~AA0BA~~,MAAM,SAAY,GAAA,sBAAA;AAEL,MAAA,YAAA,GAAe,IAAK,CAAA,SAASA,aAAa,CAAA;AAAA,EACrD,MAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAA2B,EAAA;AACzB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,KAAK,CAAA;AACtC,EAAM,MAAA,OAAA,GAAU,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACrC,EAAM,MAAA,SAAA,GAAY,IAAI,OAAO,CAAA;AAC7B,EAAA,MAAM,EAAE,MAAA,EAAW,GAAA,eAAA,CAAgB,QAAQ,SAAS,CAAA;AACpD,EAAM,MAAA,QAAA,GAAW,OAAmB,KAAS,CAAA,CAAA;AAE7C,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAS,QAAA,CAAA,OAAA,GAAU,iBAAkB,CAAA,MAAA,EAAQ,SAAS,CAAA;AAAA,GACrD,EAAA,CAAC,SAAW,EAAA,MAAM,CAAC,CAAA;AAEtB,EAAM,MAAA,gBAAA,GAAmB,WAAY,CAAA,CAAC,MAAoB,KAAA;AACxD,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAoB,iBAAA,EAAA,MAAM,CAAE,CAAA,CAAA;AACxC,IAAA,IAAI,WAAW,KAAO,EAAA;AACpB,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA;AACf,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,OAAO,GAAA,EAAqB,CAACC,eAAc,CAAoB,KAAA;AAC7D,MAAA,IAAIA,eAAgB,EAAA;AAKlB,QAAA,MAAM,WAAW,MAAM,MAAA;AAAA,UACrB;AAAA,YACE,QAAU,EAAA,QAAA;AAAA,YACV,aAAA,EAAe,SAAS,OAAS,EAAA,KAAA;AAAA,YACjC,OAAOA,eAAe,CAAA;AAAA,WACxB;AAAA,UACA;AAAA,SACF;AACA,~~QAAI~~,~~IAAA~~,~~YAAA~~,~~CAAa~~,~~QAAQ,CAAG,~~EAAA;~~AAC1B~~,UAAoB,mBAAA,CAAA,GAAA,CAAI,QAAuB,YAAY,CAAA;AAAA;AAC7D;AACF,KACF;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAM,MAAA,WAAA,GAAc,YAAkD,MAAM;AAC1E,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAA,OAAA,CAAQ,IAAI,CAAA;AAAA;AACd,GACF,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,OAAW,IAAA,CAAC,IAAM,EAAA;AAC9B,QAAA,CAAA,CAAE,cAAe,EAAA;AACjB,QAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,QAAA,OAAA,CAAQ,IAAI,CAAA;AAAA;AACd,KACF;AAAA,IACA,CAAC,IAAI;AAAA,GACP;AAEA,EAAM,MAAA,EAAE,OAAS,EAAA,cAAA,EAAmB,GAAA,QAAA;AACpC,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,SAAA;AAAA,MACX,WAAU,EAAA,eAAA;AAAA,MACV,OAAS,EAAA,WAAA;AAAA,MACT,gBAAkB,EAAA,aAAA;AAAA,MAClB,YAAc,EAAA,gBAAA;AAAA,MACd,iBAAmB,EAAA,qBAAA;AAAA,MACnB,IAAA;AAAA,MACA,QAAU,EAAA,cAAA,GAAiB,CAAC,cAAc,IAAI,EAAC;AAAA,MAC/C,OAAO,cAAgB,EAAA,KAAA;AAAA,MAEtB,QAAO,EAAA,MAAA,CAAA,GAAA,CAAI,CAAC,UAAA,EAAY,CACvB,qBAAA,GAAA,CAAC,MAAe,EAAA,EAAA,KAAA,EAAO,UACpB,EAAA,QAAA,EAAA,UAAA,CAAW,KADD,EAAA,EAAA,CAEb,CACD;AAAA;AAAA,GACH;AAEJ,CAAA,EAAG,yBAAyB;AAE5B,iBAAkB,CAAA,eAAA,EAAiB,cAAc,eAAiB,EAAA;AAAA,EAChE,aAAe,EAAA;AACjB,CAAC,CAAA;;;;"}
1	+ {"version":3,"file":"DropdownCell.js","sources":["../../../../../packages/vuu-table-extras/src/cell-renderers/dropdown-cell/DropdownCell.tsx"],"sourcesContent":["import { useLookupValues } from \"@vuu-ui/vuu-data-react\";\nimport type { VuuColumnDataType } from \"@vuu-ui/vuu-protocol-types\";\nimport { ListOption, TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\nimport {\n dataColumnAndKeyUnchanged,\n dispatchCustomEvent,\n getSelectedOption,\n registerComponent,\n} from \"@vuu-ui/vuu-utils\";\nimport { Dropdown, Option } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n KeyboardEventHandler,\n MouseEventHandler,\n SyntheticEvent,\n memo,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport dropdownCellCss from \"./DropdownCell.css\";\n\nconst classBase = \"vuuTableDropdownCell\";\n\nexport const DropdownCell = memo(function DropdownCell({\n column,\n columnMap,\n onEdit,\n row,\n}: TableCellRendererProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-dropdown-cell\",\n css: dropdownCellCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n const dataIdx = columnMap[column.name];\n const dataValue = row[dataIdx] as string \| number;\n const { values } = useLookupValues(column, dataValue);\n const valueRef = useRef<ListOption>(undefined);\n\n useMemo(() => {\n valueRef.current = getSelectedOption(values, dataValue);\n }, [dataValue, values]);\n\n const handleOpenChange = useCallback((isOpen: boolean) => {\n console.log(`handleOpenChange ${isOpen}`);\n if (isOpen === false) {\n setOpen(false);\n }\n }, []);\n\n const handleSelectionChange = useCallback(\n async (evt: SyntheticEvent, [selectedOption]: ListOption[]) => {\n if (selectedOption) {\n // Note, we do not setState locally when a selection is made, we just send the update\n // to the server. We rely on the update coming back in from a server response which\n // we handle in the useMemo above. If we worry that server repsonses might be too slow\n // we can extend this logic with some kind of pending update state.\n const response = await onEdit?.(\n {\n editType: \"commit\",\n previousValue: valueRef.current?.value,\n value: selectedOption.value as VuuColumnDataType,\n },\n \"commit\",\n );\n if (response === true) {\n dispatchCustomEvent(evt.target as HTMLElement, \"vuu-commit\");\n }\n }\n },\n [onEdit],\n );\n\n const handleClick = useCallback<MouseEventHandler<HTMLButtonElement>>(() => {\n if (!open) {\n setOpen(true);\n }\n }, [open]);\n\n const handleKeyDown = useCallback<KeyboardEventHandler>(\n (e) => {\n if (e.key === \"Enter\" && !open) {\n e.preventDefault();\n e.stopPropagation();\n setOpen(true);\n }\n },\n [open],\n );\n\n const { current: selectedOption } = valueRef;\n return (\n <Dropdown<ListOption>\n className={classBase}\n data-icon=\"triangle-down\"\n onClick={handleClick}\n onKeyDownCapture={handleKeyDown}\n onOpenChange={handleOpenChange}\n onSelectionChange={handleSelectionChange}\n open={open}\n selected={selectedOption ? [selectedOption] : []}\n value={selectedOption?.label}\n >\n {values.map((listOption, i) => (\n <Option key={i} value={listOption}>\n {listOption.label}\n </Option>\n ))}\n </Dropdown>\n );\n}, dataColumnAndKeyUnchanged);\n\nregisterComponent(\"dropdown-cell\", DropdownCell, \"cell-renderer\", {\n userCanAssign: false,\n});\n"],"names":["DropdownCell","selectedOption"],"mappings":"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"}

package/esm/column-menu/ColumnMenu.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var columnMenuCss = ".vuuMenuItem {\n  --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>');\n}\n.vuuColumnMenu {\n  --menu-button-size: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: 3px;\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-minWidth: var(--menu-button-size);\n  --saltButton-height: var(--vuuColumnMenu-height,var(--menu-button-size));\n  --saltButton-width: var(--vuuColumnMenu-width, var(--menu-button-size));\n\n  --vuu-icon-height: var(--menu-button-size);\n  --vuu-icon-left: 0px;\n  --vuu-icon-top: 0px;\n  --vuu-icon-width: var(--menu-button-size);\n\n  border: none;\n  flex: 0 0 var(--menu-button-size);\n  margin: var(--vuuTable-columnMenu-margin, 0);\n  padding: 0;\n}\n";
+var columnMenuCss = ".vuuMenuItem {\n  --vuu-svg-cog: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M12.9533 8.65331C12.98 8.43998 13 8.22665 13 7.99998C13 7.77331 12.98 7.55998 12.9533 7.34665L14.36 6.24665C14.4867 6.14665 14.52 5.96665 14.44 5.81998L13.1067 3.51331C13.0267 3.36665 12.8467 3.31331 12.7 3.36665L11.04 4.03331C10.6933 3.76665 10.32 3.54665 9.91333 3.37998L9.66 1.61331C9.64 1.45331 9.5 1.33331 9.33333 1.33331H6.66667C6.5 1.33331 6.36 1.45331 6.34 1.61331L6.08667 3.37998C5.68 3.54665 5.30667 3.77331 4.96 4.03331L3.3 3.36665C3.14667 3.30665 2.97333 3.36665 2.89333 3.51331L1.56 5.81998C1.47333 5.96665 1.51333 6.14665 1.64 6.24665L3.04667 7.34665C3.02 7.55998 3 7.77998 3 7.99998C3 8.21998 3.02 8.43998 3.04667 8.65331L1.64 9.75331C1.51333 9.85331 1.48 10.0333 1.56 10.18L2.89333 12.4866C2.97333 12.6333 3.15333 12.6866 3.3 12.6333L4.96 11.9666C5.30667 12.2333 5.68 12.4533 6.08667 12.62L6.34 14.3866C6.36 14.5466 6.5 14.6666 6.66667 14.6666H9.33333C9.5 14.6666 9.64 14.5466 9.66 14.3866L9.91333 12.62C10.32 12.4533 10.6933 12.2266 11.04 11.9666L12.7 12.6333C12.8533 12.6933 13.0267 12.6333 13.1067 12.4866L14.44 10.18C14.52 10.0333 14.4867 9.85331 14.36 9.75331L12.9533 8.65331V8.65331ZM8 10.3333C6.71333 10.3333 5.66667 9.28665 5.66667 7.99998C5.66667 6.71331 6.71333 5.66665 8 5.66665C9.28667 5.66665 10.3333 6.71331 10.3333 7.99998C10.3333 9.28665 9.28667 10.3333 8 10.3333Z\"/></svg>');\n}\n.vuuColumnMenu {\n  --menu-button-size: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: 3px;\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-minWidth: var(--menu-button-size);\n  --saltButton-height: var(--menu-button-size);\n  --saltButton-width: var(--menu-button-size);\n\n  --vuu-icon-height: var(--menu-button-size);\n  --vuu-icon-left: 0px;\n  --vuu-icon-top: 0px;\n  --vuu-icon-width: var(--menu-button-size);\n\n  border: none;\n  flex: 0 0 var(--menu-button-size);\n  margin: var(--vuuTable-columnMenu-margin, 0);\n  padding: 0;\n}\n";
 export { columnMenuCss as default };
 //# sourceMappingURL=ColumnMenu.css.js.map

package/esm/column-menu/useColumnActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useColumnActions.js","sources":["../../../../packages/vuu-table-extras/src/column-menu/useColumnActions.ts"],"sourcesContent":["/* eslint-disable no-sequences /\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { VuuFilter } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n ColumnDescriptor,\n ~~ColumnDisplayAction,\n~~ RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n addGroupColumn,\n addSortColumn,\n AggregationType,\n logUnhandledMessage,\n removeGroupColumn,\n setAggregations,\n setSortColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport { ColumnMenuActionType } from \"./column-menu-utils\";\nimport { DisplaySettingsAction } from \"./column-action-types\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface ContextMenuOptions {\n column?: RuntimeColumnDescriptor;\n filter?: Filter;\n sort?: VuuFilter;\n}\nexport interface ContextMenuHookProps {\n dataSource: DataSource;\n onColumnDisplayAction?: (action: ColumnDisplayAction) => void;\n onDisplaySettingsAction?: (action: DisplaySettingsAction) => void;\n}\n\nconst { Average, Count, Distinct, High, Low, Sum } = AggregationType;\n\nexport const useColumnActions = ({\n dataSource,\n onColumnDisplayAction,\n onDisplaySettingsAction,\n}: ContextMenuHookProps) => {\n /* return {boolean} used by caller to determine whether to forward to additional installed context menu handlers */\n const handleContextMenuAction: MenuActionHandler<\n ColumnMenuActionType,\n ColumnDescriptor\n > = (columnMenuActionType, column): boolean => {\n if (column && dataSource) {\n // prettier-ignore\n switch(columnMenuActionType){\n // 1) DataSource operations ...\n case \"sort-asc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-dsc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"D\")), true;\n case \"remove-sort\": return (dataSource.sort = {sortDefs:[]}), true;\n case \"sort-add-asc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-add-dsc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"D\")), true;\n case \"group-column\": return (dataSource.groupBy = [column.name]), true;\n case \"add-to-group\": return (dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"remove-group\": return (dataSource.groupBy = []), true;\n case \"remove-from-group\": return (dataSource.groupBy = removeGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"remove-column\": {\n dataSource.columns = dataSource.columns.filter(name => name !== column.name);\n onColumnDisplayAction?.({type: \"removeColumn\", column});\n return true;\n }\n case \"agg-avg\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Average)), true;\n case \"agg-high\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, High)), true;\n case \"agg-low\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Low)), true;\n case \"agg-count\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Count)), true;\n case \"agg-distinct\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Distinct)), true;\n case \"agg-sum\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Sum)), true;\n // 2) Column display options ...\n case \"hide-column\": return onColumnDisplayAction?.({type: \"hideColumn\", column}), true;\n case \"pin-column-left\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"left\"}), true;\n case \"pin-column-right\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"right\"}), true;\n case \"unpin-column\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: false}), true\n // 3) Table Admin options ...\n case \"column-settings\": return onDisplaySettingsAction?.({type: \"column-settings\", column}), true\n case \"table-settings\": return onDisplaySettingsAction?.({type: \"table-settings\"}), true\n default:\n logUnhandledMessage(columnMenuActionType, `[vuu-table-extras] useColumnActions handleContextMenuAction, unhandled columnMenuActionType`)\n }\n }\n return false;\n };\n\n return handleContextMenuAction;\n};\n"],"names":[],"mappings":";;~~AAiCA~~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"}
1	+ {"version":3,"file":"useColumnActions.js","sources":["../../../../packages/vuu-table-extras/src/column-menu/useColumnActions.ts"],"sourcesContent":["/* eslint-disable no-sequences /\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\nimport { Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { VuuFilter } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n ColumnDescriptor,\n RuntimeColumnDescriptor,\n} from \"@vuu-ui/vuu-table-types\";\nimport {\n addGroupColumn,\n addSortColumn,\n AggregationType,\n logUnhandledMessage,\n removeGroupColumn,\n setAggregations,\n setSortColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport { ColumnMenuActionType } from \"./column-menu-utils\";\nimport {\n ColumnDisplayAction,\n DisplaySettingsAction,\n} from \"./column-action-types\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface ContextMenuOptions {\n column?: RuntimeColumnDescriptor;\n filter?: Filter;\n sort?: VuuFilter;\n}\nexport interface ContextMenuHookProps {\n dataSource: DataSource;\n onColumnDisplayAction?: (action: ColumnDisplayAction) => void;\n onDisplaySettingsAction?: (action: DisplaySettingsAction) => void;\n}\n\nconst { Average, Count, Distinct, High, Low, Sum } = AggregationType;\n\nexport const useColumnActions = ({\n dataSource,\n onColumnDisplayAction,\n onDisplaySettingsAction,\n}: ContextMenuHookProps) => {\n /* return {boolean} used by caller to determine whether to forward to additional installed context menu handlers */\n const handleContextMenuAction: MenuActionHandler<\n ColumnMenuActionType,\n ColumnDescriptor\n > = (columnMenuActionType, column): boolean => {\n if (column && dataSource) {\n // prettier-ignore\n switch(columnMenuActionType){\n // 1) DataSource operations ...\n case \"sort-asc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-dsc\": return (dataSource.sort = setSortColumn(dataSource.sort, column, \"D\")), true;\n case \"remove-sort\": return (dataSource.sort = {sortDefs:[]}), true;\n case \"sort-add-asc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"A\")), true;\n case \"sort-add-dsc\": return (dataSource.sort = addSortColumn(dataSource.sort, column, \"D\")), true;\n case \"group-column\": return (dataSource.groupBy = [column.name]), true;\n case \"add-to-group\": return (dataSource.groupBy = addGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"remove-group\": return (dataSource.groupBy = []), true;\n case \"remove-from-group\": return (dataSource.groupBy = removeGroupColumn(dataSource.groupBy ?? [], column)), true;\n case \"remove-column\": {\n dataSource.columns = dataSource.columns.filter(name => name !== column.name);\n onColumnDisplayAction?.({type: \"removeColumn\", column});\n return true;\n }\n case \"agg-avg\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Average)), true;\n case \"agg-high\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, High)), true;\n case \"agg-low\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Low)), true;\n case \"agg-count\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Count)), true;\n case \"agg-distinct\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Distinct)), true;\n case \"agg-sum\": return dataSource.aggregations = (setAggregations(dataSource.aggregations, column, Sum)), true;\n // 2) Column display options ...\n case \"hide-column\": return onColumnDisplayAction?.({type: \"hideColumn\", column}), true;\n case \"pin-column-left\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"left\"}), true;\n case \"pin-column-right\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: \"right\"}), true;\n case \"unpin-column\": return onColumnDisplayAction?.({type: \"pinColumn\", column, pin: false}), true\n // 3) Table Admin options ...\n case \"column-settings\": return onDisplaySettingsAction?.({type: \"column-settings\", column}), true\n case \"table-settings\": return onDisplaySettingsAction?.({type: \"table-settings\"}), true\n default:\n logUnhandledMessage(columnMenuActionType, `[vuu-table-extras] useColumnActions handleContextMenuAction, unhandled columnMenuActionType`)\n }\n }\n return false;\n };\n\n return handleContextMenuAction;\n};\n"],"names":[],"mappings":"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"}

package/esm/datasource-stats/DatasourceStats.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-var dataSourceStats = ".vuuDatasourceStats {\n  --datasourceStats-background: var(--vuuDatasourceStats-background);\n  align-items: center;\n  background: var(--datasourceStats-background, var(--salt-container-secondary-background));\n  display: grid;\n  font-size: var(--vuuDatasourceStats-fontSize, 10px);\n  gap: var(--vuuDatasourceStats-gap, var(--salt-spacing-100));\n  grid-template-areas: \"panel-start panel-center panel-end\";\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  height: var(--vuuDatasourceStats-height, 100%);\n  padding: 0 var(--salt-spacing-200);\n\n  &.vuuDatasourceStats-withSelection {\n    --datasourceStats-background: var(--vuuDatasourceStats-withSelection-background, var(--vuuDatasourceStats-background));\n  }\n\n  .vuuDatasourceStats-statsPanel {\n    align-items: center;\n    display: flex;\n    gap: var(--salt-spacing-100);\n    width: fit-content;\n  }\n\n  .vuuDatasourceStats-rowStats {\n    justify-self: flex-start;\n    grid-area: panel-start;\n  }\n  .vuuDatasourceStats-selected {\n    margin-left: var(--salt-spacing-100);\n  }\n\n  .vuuDatasourceStats-range {\n    white-space: nowrap;\n  }\n\n  .vuuDatasourceStats-label {\n    color: var(--salt-content-secondary-foreground);\n    white-space: nowrap;\n  }\n\n  .vuuDatasourceStats-selectionActions {\n    grid-area: panel-center;\n    justify-self: center;\n  }\n\n  .vuuDatasourceStats-value {\n    color: var(--salt-content-primary-foreground);\n  }\n  .vuuDatasourceStats-tooltray {\n    justify-self: end;;\n    margin: 0 var(--salt-spacing-200);\n    grid-area: panel-end;\n  }\n\n}\n\n";
+var dataSourceStats = ".vuuDatasourceStats {\n  align-items: center;\n  background: var(--vuuDatasourceStats-background, var(--salt-container-secondary-background));\n  display: grid;\n  font-size: var(--vuuDatasourceStats-fontSize, 10px);\n  gap: var(--vuuDatasourceStats-gap, var(--salt-spacing-100));\n  grid-template-areas: \"panel-start panel-center panel-end\";\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  height: var(--vuuDatasourceStats-height, 100%);\n  padding: 0 var(--salt-spacing-200);\n\n    .vuuDatasourceStats-statsPanel {\n      align-items: center;\n      display: flex;\n      gap: var(--salt-spacing-100);\n      width: fit-content;\n    }\n\n    .vuuDatasourceStats-rowStats {\n      justify-self: flex-start;\n      grid-area: panel-start;\n    }\n    .vuuDatasourceStats-freezeStatus {\n      justify-self: flex-start;\n      grid-area: panel-start;\n    }\n    .vuuDatasourceStats-selectionStats {\n      justify-self: center;\n      grid-area: panel-center;\n    }\n\n  .vuuDatasourceStats-label {\n    color: var(--salt-content-secondary-foreground);\n  }\n\n  .vuuDatasourceStats-value {\n    color: var(--salt-content-primary-foreground);\n  }\n  .vuuDatasourceStats-tooltray {\n    justify-self: end;;\n    margin: 0 var(--salt-spacing-200);\n    grid-area: panel-end;\n  }\n\n}\n\n";
 export { dataSourceStats as default };
 //# sourceMappingURL=DatasourceStats.css.js.map

package/esm/datasource-stats/DatasourceStats.js CHANGED Viewed

@@ -7,11 +7,21 @@ import dataSourceStats from './DatasourceStats.css.js';
 const classBase = "vuuDatasourceStats";
 const numberFormatter = new Intl.NumberFormat();
+const getLabel = (label, count = 1) => {
+  if (count === 1) {
+    return typeof label === "string" ? label : label.singlular;
+  } else {
+    return typeof label === "string" ? `${label}s` : label.plural;
+  }
+};
 const DataSourceStats = ({
   children,
   className,
   dataSource,
+  itemLabel = "row",
+  showFreezeStatus = true,
   showRowStats = true,
+  showSelectionStats = true,
   tooltrayActions,
   ...htmlAttributes
 }) => {
@@ -21,13 +31,16 @@ const DataSourceStats = ({
     css: dataSourceStats,
     window: targetWindow
   });
-  const { range, selectedCount, size } = useDatasourceStats({
+  const { freezeTime, range, selectedCount, size } = useDatasourceStats({
     dataSource,
-    showRowStats
+    showFreezeStatus,
+    showRowStats,
+    showSelectionStats
   });
   const from = numberFormatter.format(range.from + 1);
   const to = numberFormatter.format(Math.min(range.to, size));
   const value = numberFormatter.format(size);
+  const showSelection = showSelectionStats && selectedCount > 0;
   if (size === 0) {
     return /* @__PURE__ */ jsx("div", { ...htmlAttributes, className: cx(classBase, className), children: /* @__PURE__ */ jsx("span", { className: `${classBase}-label`, children: "No Rows to display" }) });
   } else {
@@ -36,7 +49,7 @@ const DataSourceStats = ({
       {
         ...htmlAttributes,
         className: cx(classBase, className, {
-          [`${classBase}-withSelection`]: selectedCount > 0
+          [`${classBase}-withSelection`]: showSelection
         }),
         children: [
           showRowStats ? /* @__PURE__ */ jsxs("div", { className: `${classBase}-statsPanel ${classBase}-rowStats`, children: [
@@ -47,20 +60,30 @@ const DataSourceStats = ({
               /* @__PURE__ */ jsx("span", { className: `${classBase}-value`, children: to })
             ] }),
             /* @__PURE__ */ jsx("span", { className: `${classBase}-label`, children: "of" }),
-            /* @__PURE__ */ jsx("span", { className: `${classBase}-value`, children: value }),
-            selectedCount > 0 ? /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cx(`${classBase}-label`, `${classBase}-selected`),
-                children: `${selectedCount.toLocaleString()} selected`
-              }
-            ) : null
+            /* @__PURE__ */ jsx("span", { className: `${classBase}-value`, children: value })
           ] }) : null,
-          selectedCount > 0 ? /* @__PURE__ */ jsx(
+          showFreezeStatus && freezeTime !== void 0 ? /* @__PURE__ */ jsx("div", { className: `${classBase}-statsPanel ${classBase}-freezeStatus`, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `${classBase}-label`,
+              children: `(frozen at ${freezeTime})`
+            }
+          ) }) : null,
+          showSelection ? /* @__PURE__ */ jsxs(
             "div",
             {
-              className: `${classBase}-statsPanel ${classBase}-selectionActions`,
-              children
+              className: `${classBase}-statsPanel ${classBase}-selectionStats`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: `${classBase}-value`, children: selectedCount }),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${classBase}-label`,
+                    children: `selected ${getLabel(itemLabel, selectedCount)}`
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: `${classBase}-actions`, children })
+              ]
             }
           ) : null,
           tooltrayActions ? /* @__PURE__ */ jsx("div", { className: `${classBase}-statsPanel ${classBase}-tooltray`, children: /* @__PURE__ */ jsx("span", { className: `${classBase}-actions`, children: tooltrayActions }) }) : null

package/esm/datasource-stats/DatasourceStats.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatasourceStats.js","sources":["../../../../packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport {\n DatasourceStatsHookProps,\n useDatasourceStats,\n} from \"./useDatasourceStats\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\n\nexport type ItemLabel =\n \| string\n \| {\n singlular: string;\n plural: string;\n };\n\nexport interface DataSourceStatsProps\n extends DatasourceStatsHookProps,\n Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n /*\n children will be displayed when selection present. Intended\n * use case is display of action button(s) that will operate on\n * selected rows.\n */\n children?: ReactNode;\n selectionActions?: ReactNode;\n tooltrayActions?: ReactNode;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nexport const DataSourceStats = ({\n children,\n className,\n dataSource,\n showRowStats = true,\n tooltrayActions,\n ...htmlAttributes\n}: DataSourceStatsProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-datasource-stats\",\n css: dataSourceStats,\n window: targetWindow,\n });\n\n const { range, selectedCount, size } = useDatasourceStats({\n dataSource,\n showRowStats,\n });\n\n const from = numberFormatter.format(range.from + 1);\n const to = numberFormatter.format(Math.min(range.to, size));\n const value = numberFormatter.format(size);\n\n if (size === 0) {\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n <span className={`${classBase}-label`}>No Rows to display</span>\n </div>\n );\n } else {\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className, {\n [`${classBase}-withSelection`]: ~~selectedCount > 0~~,\n })}\n >\n {showRowStats ? (\n <div className={`${classBase}-statsPanel ${classBase}-rowStats`}>\n <span className={`${classBase}-label`}>Row count</span>\n <span className={`${classBase}-range`}>\n <span className={`${classBase}-value`}>{from}</span>\n <span className={`${classBase}-label`}>-</span>\n <span className={`${classBase}-value`}>{to}</span>\n </span>\n <span className={`${classBase}-label`}>of</span>\n <span className={`${classBase}-value`}>{value}</span>\n {~~selectedCount~~ > 0 ? (\n <~~span\n~~ className={~~cx(~~`${classBase}-~~label`,~~ `${classBase}-~~selected~~`)}\n >{`${~~selectedCount.toLocaleString()~~} ~~selected~~`}~~</span>\~~n ) : ~~null~~}\n </div>\n ) : null}\n {~~selectedCount~~ ~~> 0~~ ? (\n <div\n className={`${classBase}-statsPanel ${classBase}-~~selectionActions~~`}\n >\n {~~children~~}\n </div>\n ) : null}\n {tooltrayActions ? (\n <div className={`${classBase}-statsPanel ${classBase}-tooltray`}>\n <span className={`${classBase}-actions`}>{tooltrayActions}</span>\n </div>\n ) : null}\n </div>\n );\n }\n};\n"],"names":[],"mappings":";;;;;;;~~AA+BA~~,MAAM,SAAY,GAAA,oBAAA;AAElB,MAAM,eAAA,GAAkB,IAAI,IAAA,CAAK,YAAa,EAAA;~~AAEvC~~,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAe,GAAA,IAAA;AAAA,EACf,eAAA;AAAA,EACA,GAAG;AACL,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,aAAe,EAAA,IAAA,KAAS,kBAAmB,CAAA;AAAA,~~IACxD~~,UAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,IAAO,GAAA,eAAA,CAAgB,MAAO,CAAA,KAAA,CAAM,OAAO,CAAC,CAAA;AAClD,EAAM,MAAA,EAAA,GAAK,gBAAgB,MAAO,CAAA,IAAA,CAAK,IAAI,KAAM,CAAA,EAAA,EAAI,IAAI,CAAC,CAAA;AAC1D,EAAM,MAAA,KAAA,GAAQ,eAAgB,CAAA,MAAA,CAAO,IAAI,CAAA;~~AAEzC~~,EAAA,IAAI,SAAS,CAAG,EAAA;AACd,IAAA,2BACG,KAAK,EAAA,EAAA,GAAG,cAAgB,EAAA,SAAA,EAAW,GAAG,SAAW,EAAA,SAAS,CACzD,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,MAAA,CAAA,EAAU,gCAAkB,CAC3D,EAAA,CAAA;AAAA,GAEG,MAAA;AACL,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,UAClC,CAAC,CAAA,EAAG,SAAS,CAAA,cAAA,CAAgB,GAAG~~,aAAgB,GAAA~~;AAAA,~~SACjD~~,CAAA;AAAA,QAEA,QAAA,EAAA;AAAA,UAAA,YAAA,wBACE,KAAI,EAAA,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,YAAA,EAAe,SAAS,CAClD,SAAA,CAAA,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAS,EAAA,WAAA,EAAA,CAAA;AAAA,4BAC/C,IAAA,CAAA,MAAA,EAAA,EAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAC3B,MAAA,CAAA,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAK,EAAA,IAAA,EAAA,CAAA;AAAA,kCAC5C,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,kCACvC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAG,EAAA,EAAA,EAAA;AAAA,aAC7C,EAAA,CAAA;AAAA,gCACC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,gCACxC,MAAK,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAW,QAAM,EAAA,KAAA,EAAA~~,CAAA~~;AAAA,~~YAC7C~~,~~gBAAgB~~,~~CACf~~,~~mBAAA~~,~~GAAA~~;AAAA,~~cAAC~~,~~MAAA;AAAA~~,~~cAAA;AAAA~~,~~gBACC~~,~~WAAW~~,~~EAAG~~,CAAA,CAAA,~~EAAG~~,~~SAAS~~,~~CAAU~~,~~MAAA~~,~~CAAA~~,EAAA,~~CAAA~~,~~EAAG~~,SAAS,~~CAAW~~,~~SAAA~~,CAAA,~~CAAA~~;AAAA,~~gBAC3D~~,~~QAAA~~,~~EAAA~~,~~CAAA~~,~~EAAG~~,~~aAAc~~,CAAA,~~cAAA~~,~~EAAgB~~,CAAA,~~SAAA~~;AAAA;AAAA,~~aACjC~~,~~GAAA;AAAA,WAAA,EACN,~~CACE,GAAA,IAAA;AAAA,UACH,~~gBAAgB~~,~~CACf,~~mBAAA,~~GAAA~~;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,YAAA,EAAe,SAAS,CAAA,~~iBAAA~~,CAAA;AAAA,~~cAE9C~~;AAAA;AAAA,~~WAED~~,GAAA,IAAA;AAAA,UACH,kCACE,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAe,YAAA,EAAA,SAAS,CAClD,SAAA,CAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,UAAK,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,QAAA,CAAA,EAAA,QAAA,EAAA,eAAA,EAAgB,GAC5D,CACE,GAAA;AAAA;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}
1	+ {"version":3,"file":"DatasourceStats.js","sources":["../../../../packages/vuu-table-extras/src/datasource-stats/DatasourceStats.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes, ReactNode } from \"react\";\nimport {\n DatasourceStatsHookProps,\n useDatasourceStats,\n} from \"./useDatasourceStats\";\n\nimport dataSourceStats from \"./DatasourceStats.css\";\n\nexport type ItemLabel =\n \| string\n \| {\n singlular: string;\n plural: string;\n };\n\nexport interface DataSourceStatsProps\n extends DatasourceStatsHookProps,\n Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n /*\n children will be displayed when selection present. Intended\n * use case is display of action button(s) that will operate on\n * selected rows.\n /\n children?: ReactNode;\n /\n Label will be used in display of selected row count, e.g\n * '6 trades selected', where 'trade' is the itemLabel, will\n * default to 'row'\n */\n itemLabel?: ItemLabel;\n\n selectionActions?: ReactNode;\n tooltrayActions?: ReactNode;\n}\n\nconst classBase = \"vuuDatasourceStats\";\n\nconst numberFormatter = new Intl.NumberFormat();\n\nconst getLabel = (label: ItemLabel, count = 1) => {\n if (count === 1) {\n return typeof label === \"string\" ? label : label.singlular;\n } else {\n return typeof label === \"string\" ? `${label}s` : label.plural;\n }\n};\n\nexport const DataSourceStats = ({\n children,\n className,\n dataSource,\n itemLabel = \"row\",\n showFreezeStatus = true,\n showRowStats = true,\n showSelectionStats = true,\n tooltrayActions,\n ...htmlAttributes\n}: DataSourceStatsProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-datasource-stats\",\n css: dataSourceStats,\n window: targetWindow,\n });\n\n const { freezeTime, range, selectedCount, size } = useDatasourceStats({\n dataSource,\n showFreezeStatus,\n showRowStats,\n showSelectionStats,\n });\n\n const from = numberFormatter.format(range.from + 1);\n const to = numberFormatter.format(Math.min(range.to, size));\n const value = numberFormatter.format(size);\n const showSelection = showSelectionStats && selectedCount > 0;\n\n if (size === 0) {\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n <span className={`${classBase}-label`}>No Rows to display</span>\n </div>\n );\n } else {\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, className, {\n [`${classBase}-withSelection`]: showSelection,\n })}\n >\n {showRowStats ? (\n <div className={`${classBase}-statsPanel ${classBase}-rowStats`}>\n <span className={`${classBase}-label`}>Row count</span>\n <span className={`${classBase}-range`}>\n <span className={`${classBase}-value`}>{from}</span>\n <span className={`${classBase}-label`}>-</span>\n <span className={`${classBase}-value`}>{to}</span>\n </span>\n <span className={`${classBase}-label`}>of</span>\n <span className={`${classBase}-value`}>{value}</span>\n </div>\n ) : null}\n {showFreezeStatus && freezeTime !== undefined ? (\n <div className={`${classBase}-statsPanel ${classBase}-freezeStatus`}>\n <span\n className={`${classBase}-label`}\n >{`(frozen at ${freezeTime})`}</span>\n </div>\n ) : null}\n {showSelection ? (\n <div\n className={`${classBase}-statsPanel ${classBase}-selectionStats`}\n >\n <span className={`${classBase}-value`}>{selectedCount}</span>\n <span\n className={`${classBase}-label`}\n >{`selected ${getLabel(itemLabel, selectedCount)}`}</span>\n <span className={`${classBase}-actions`}>{children}</span>\n </div>\n ) : null}\n {tooltrayActions ? (\n <div className={`${classBase}-statsPanel ${classBase}-tooltray`}>\n <span className={`${classBase}-actions`}>{tooltrayActions}</span>\n </div>\n ) : null}\n </div>\n );\n }\n};\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,22 +1,22 @@
 {
-  "version": "0.13.112-alpha.1",
+  "version": "0.13.112",
   "author": "heswell",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@vuu-ui/vuu-filter-types": "0.13.112-alpha.1",
-    "@vuu-ui/vuu-protocol-types": "0.13.112-alpha.1"
+    "@vuu-ui/vuu-filter-types": "0.13.112",
+    "@vuu-ui/vuu-protocol-types": "0.13.112"
   },
   "dependencies": {
-    "@vuu-ui/vuu-codemirror": "0.13.112-alpha.1",
-    "@vuu-ui/vuu-data-react": "0.13.112-alpha.1",
-    "@vuu-ui/vuu-data-types": "0.13.112-alpha.1",
-    "@vuu-ui/vuu-table-types": "0.13.112-alpha.1",
-    "@vuu-ui/vuu-popups": "0.13.112-alpha.1",
-    "@vuu-ui/vuu-table": "0.13.112-alpha.1",
-    "@vuu-ui/vuu-utils": "0.13.112-alpha.1",
-    "@vuu-ui/vuu-ui-controls": "0.13.112-alpha.1",
+    "@vuu-ui/vuu-codemirror": "0.13.112",
+    "@vuu-ui/vuu-data-react": "0.13.112",
+    "@vuu-ui/vuu-data-types": "0.13.112",
+    "@vuu-ui/vuu-table-types": "0.13.112",
+    "@vuu-ui/vuu-popups": "0.13.112",
+    "@vuu-ui/vuu-table": "0.13.112",
+    "@vuu-ui/vuu-utils": "0.13.112",
+    "@vuu-ui/vuu-ui-controls": "0.13.112",
     "@lezer/lr": "1.4.2",
-    "@salt-ds/core": "1.54.1",
+    "@salt-ds/core": "1.48.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1"
   },

package/types/column-menu/column-action-types.d.ts CHANGED Viewed

@@ -1,5 +1,19 @@
 import { VuuTable } from "@vuu-ui/vuu-protocol-types";
-import { ColumnDescriptor, ColumnDisplayAction } from "@vuu-ui/vuu-table-types";
+import { ColumnDescriptor, PinLocation } from "@vuu-ui/vuu-table-types";
+export interface ColumnPinAction {
+    type: "pinColumn";
+    column: ColumnDescriptor;
+    pin: PinLocation | false;
+}
+export interface ColumnHideAction {
+    type: "hideColumn";
+    column: ColumnDescriptor;
+}
+export interface ColumnRemoveAction {
+    type: "removeColumn";
+    column: ColumnDescriptor;
+}
+export type ColumnDisplayAction = ColumnPinAction | ColumnHideAction | ColumnRemoveAction;
 export type ColumnDisplayActionHandler = (action: ColumnDisplayAction) => void;
 export type DisplayTableSettingsAction = {
     type: "table-settings";

package/types/column-menu/useColumnActions.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
 import { Filter } from "@vuu-ui/vuu-filter-types";
 import { VuuFilter } from "@vuu-ui/vuu-protocol-types";
-import { ColumnDescriptor, ColumnDisplayAction, RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
+import { ColumnDescriptor, RuntimeColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { ColumnMenuActionType } from "./column-menu-utils";
-import { DisplaySettingsAction } from "./column-action-types";
+import { ColumnDisplayAction, DisplaySettingsAction } from "./column-action-types";
 import { DataSource } from "@vuu-ui/vuu-data-types";
 export interface ContextMenuOptions {
     column?: RuntimeColumnDescriptor;

package/types/datasource-stats/DatasourceStats.d.ts CHANGED Viewed

@@ -11,7 +11,13 @@ export interface DataSourceStatsProps extends DatasourceStatsHookProps, Omit<HTM
      * selected rows.
      */
     children?: ReactNode;
+    /**
+     * Label will be used in display of selected row count, e.g
+     * '6 trades selected', where 'trade' is the itemLabel, will
+     *  default to 'row'
+     */
+    itemLabel?: ItemLabel;
     selectionActions?: ReactNode;
     tooltrayActions?: ReactNode;
 }
-export declare const DataSourceStats: ({ children, className, dataSource, showRowStats, tooltrayActions, ...htmlAttributes }: DataSourceStatsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataSourceStats: ({ children, className, dataSource, itemLabel, showFreezeStatus, showRowStats, showSelectionStats, tooltrayActions, ...htmlAttributes }: DataSourceStatsProps) => import("react/jsx-runtime").JSX.Element;