@vuu-ui/vuu-table-extras 0.13.66 → 0.13.68
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.
- package/cjs/column-picker/ColumnPicker.css.js +1 -1
- package/cjs/column-picker/useColumnPicker.js +6 -1
- package/cjs/column-picker/useColumnPicker.js.map +1 -1
- package/cjs/datasource-stats/DatasourceStats.js +1 -1
- package/cjs/datasource-stats/DatasourceStats.js.map +1 -1
- package/cjs/freeze-control/FreezeControl.css.js +1 -1
- package/cjs/freeze-control/FreezeControl.js +4 -4
- package/cjs/freeze-control/FreezeControl.js.map +1 -1
- package/cjs/freeze-control/FrozenBanner.css.js +1 -1
- package/esm/column-picker/ColumnPicker.css.js +1 -1
- package/esm/column-picker/useColumnPicker.js +7 -2
- package/esm/column-picker/useColumnPicker.js.map +1 -1
- package/esm/datasource-stats/DatasourceStats.js +1 -1
- package/esm/datasource-stats/DatasourceStats.js.map +1 -1
- package/esm/freeze-control/FreezeControl.css.js +1 -1
- package/esm/freeze-control/FreezeControl.js +4 -4
- package/esm/freeze-control/FreezeControl.js.map +1 -1
- package/esm/freeze-control/FrozenBanner.css.js +1 -1
- package/package.json +11 -11
- package/types/column-picker/useColumnPicker.d.ts +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var columnPickerCss = ".vuuColumnPicker {\n\n container-type: inline-size;\n display: flex; \n flex-direction: column;\n gap: var(--salt-spacing-300);\n overflow: hidden;\n padding: var(--salt-spacing-300) 0;\n\n .saltListBox {\n background-color: inherit;\n }\n\n .saltOption {\n align-items: center;\n background-color: inherit;\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n gap: var(--salt-spacing-200);\n height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n .vuuIcon {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n }\n\n .vuuHighlight {\n color: var(--vuu-color-blue-40);\n text-decoration: underline;\n }\n\n }\n\n .vuuColumnPickerListItem-action {\n margin-left: auto;\n visibility: hidden;\n }\n\n .saltOption:hover {\n .vuuColumnPickerListItem-action {\n visibility: visible;\n }\n }\n\n .vuuColumnPicker-search {\n --saltInput-paddingLeft: var(--salt-spacing-300);\n padding: var(--salt-spacing-200) var(--salt-spacing-300) 0 var(--salt-spacing-300);\n }\n\n .vuuColumnPicker-scrollContainer {\n\n flex: 1 1 0px;\n overflow: auto;\n\n\n .vuuColumnPicker-sectionHeader {\n align-items: center;\n background
|
|
3
|
+
var columnPickerCss = ".vuuColumnPicker {\n\n --columnpicker-background: var(--vuuColumnPicker-background, var(--salt-container-primary-background));\n background: var(--columnpicker-background);\n container-type: inline-size;\n display: flex; \n flex-direction: column;\n gap: var(--salt-spacing-300);\n height: var(--vuuColumnPicker-height, auto);\n overflow: hidden;\n padding: var(--salt-spacing-300) 0;\n\n .saltListBox {\n background-color: inherit;\n }\n\n .saltOption {\n align-items: center;\n background-color: inherit;\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n gap: var(--salt-spacing-200);\n height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n .vuuIcon {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n }\n\n .vuuHighlight {\n color: var(--vuu-color-blue-40);\n text-decoration: underline;\n }\n\n }\n\n .vuuColumnPickerListItem-action {\n margin-left: auto;\n visibility: hidden;\n }\n\n .saltOption:hover {\n .vuuColumnPickerListItem-action {\n visibility: visible;\n }\n }\n\n .vuuColumnPicker-search {\n --saltInput-paddingLeft: var(--salt-spacing-300);\n padding: var(--salt-spacing-200) var(--salt-spacing-300) 0 var(--salt-spacing-300);\n }\n\n .vuuColumnPicker-scrollContainer {\n\n flex: 1 1 0px;\n overflow: auto;\n\n\n .vuuColumnPicker-sectionHeader {\n align-items: center;\n background: var(--columnpicker-background);\n display: flex;\n height: 32px;\n padding: 0 var(--salt-spacing-300);\n position: sticky;\n top:0;\n z-index: 1;\n }\n\n .vuuColumnPicker-availableHeader {\n top: 32px;\n }\n\n\n .vuuColumnPicker-availableList {\n .saltOption {\n padding-left: var(--salt-spacing-300);\n }\n }\n\n }\n\n}";
|
|
4
4
|
|
|
5
5
|
module.exports = columnPickerCss;
|
|
6
6
|
//# sourceMappingURL=ColumnPicker.css.js.map
|
|
@@ -10,6 +10,7 @@ const nonSelectedColumns = ({
|
|
|
10
10
|
}) => availableColumns.filter(
|
|
11
11
|
({ name }) => selectedColumns.findIndex((c) => c.name === name) === -1
|
|
12
12
|
);
|
|
13
|
+
const byColumnName = ({ name: n1, label: l1 = n1 }, { name: n2, label: l2 = n2 }) => l1 > l2 ? 1 : l2 > l1 ? -1 : 0;
|
|
13
14
|
const findColumn = (target, columns) => {
|
|
14
15
|
const listItem = vuuUtils.queryClosest(target, ".saltOption", true);
|
|
15
16
|
const { name } = listItem.dataset;
|
|
@@ -26,12 +27,16 @@ const SelectedColumnChangeType = {
|
|
|
26
27
|
ColumnsReordered: "columns-reordered"
|
|
27
28
|
};
|
|
28
29
|
const useColumnPicker = ({
|
|
29
|
-
availableColumns,
|
|
30
|
+
availableColumns: availableColumnsProp,
|
|
30
31
|
defaultSelectedColumns,
|
|
31
32
|
onChangeSelectedColumns,
|
|
32
33
|
selectedColumns: selectedColumnsProp
|
|
33
34
|
}) => {
|
|
34
35
|
const [searchState, setSearchState] = react.useState({ searchText: "" });
|
|
36
|
+
const availableColumns = react.useMemo(
|
|
37
|
+
() => availableColumnsProp.toSorted(byColumnName),
|
|
38
|
+
[availableColumnsProp]
|
|
39
|
+
);
|
|
35
40
|
const [selectedColumns, setSelectedColumns] = core.useControlled({
|
|
36
41
|
controlled: selectedColumnsProp,
|
|
37
42
|
default: defaultSelectedColumns ?? [],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/useColumnPicker.tsx"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { queryClosest, ValueOf } from \"@vuu-ui/vuu-utils\";\nimport {\n FormEventHandler,\n MouseEventHandler,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nexport type ColumnPickerAction = (column: ColumnDescriptor) => void;\n\nconst nonSelectedColumns = ({\n availableColumns,\n selectedColumns,\n}: {\n availableColumns: ColumnDescriptor[];\n selectedColumns: ColumnDescriptor[];\n}) =>\n availableColumns.filter(\n ({ name }) => selectedColumns.findIndex((c) => c.name === name) === -1,\n );\n\nconst findColumn = (target: EventTarget, columns: ColumnDescriptor[]) => {\n const listItem = queryClosest(target, \".saltOption\", true);\n const { name } = listItem.dataset;\n const column = columns.find((col) => col.name === name);\n if (column) {\n return column;\n } else {\n throw Error(`[useColumnPicker] column ${name} not found`);\n }\n};\nexport const SelectedColumnChangeType = {\n ColumnAdded: \"column-added\",\n ColumnRemoved: \"column-removed\",\n ColumnsReordered: \"columns-reordered\",\n} as const;\nexport type SelectedColumnChangeType = ValueOf<typeof SelectedColumnChangeType>;\nexport type SelectedColumnsChangeHandler = (\n columns: ColumnDescriptor[],\n changeType: SelectedColumnChangeType,\n) => void;\n\nexport interface ColumPickerHookProps {\n /**\n * All available columns, including selected columns.\n */\n availableColumns: ColumnDescriptor[];\n /**\n * Columns already selected and rendered in Table,\n * columnPicker will be uncontrolled\n */\n defaultSelectedColumns?: ColumnDescriptor[];\n onChangeSelectedColumns: SelectedColumnsChangeHandler;\n /**\n * Columns already selected and rendered in Table.\n * columnPicker will be controlled\n */\n selectedColumns?: ColumnDescriptor[];\n}\n\nexport const useColumnPicker = ({\n availableColumns,\n defaultSelectedColumns,\n onChangeSelectedColumns,\n selectedColumns: selectedColumnsProp,\n}: ColumPickerHookProps) => {\n const [searchState, setSearchState] = useState<{\n searchText: string;\n }>({ searchText: \"\" });\n\n const [selectedColumns, setSelectedColumns] = useControlled({\n controlled: selectedColumnsProp,\n default: defaultSelectedColumns ?? [],\n name: \"ColumnPicker\",\n state: \"selectedColumns\",\n });\n\n const visibleColumnsRef = useRef({ availableColumns, selectedColumns });\n\n useMemo(() => {\n const value = searchState.searchText.toLowerCase();\n if (value) {\n const pattern = value.toLowerCase();\n visibleColumnsRef.current = {\n availableColumns: availableColumns.filter(\n ({ name, label = name }) =>\n label.toLowerCase().indexOf(pattern) !== -1,\n ),\n selectedColumns: selectedColumns.filter(\n ({ name, label = name }) =>\n label.toLowerCase().indexOf(pattern) !== -1,\n ),\n };\n } else {\n visibleColumnsRef.current = { availableColumns, selectedColumns };\n }\n }, [availableColumns, selectedColumns, searchState.searchText]);\n\n const handleChangeSearchInput = useCallback<FormEventHandler>((evt) => {\n const { value } = evt.target as HTMLInputElement;\n setSearchState({\n searchText: value,\n });\n }, []);\n\n const handleAddItemToSelectedList = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(\n ({ target }) => {\n const targetColumn = findColumn(target, availableColumns);\n const newColumns = selectedColumns.concat(targetColumn);\n onChangeSelectedColumns(newColumns, SelectedColumnChangeType.ColumnAdded);\n setSelectedColumns(newColumns);\n },\n [\n availableColumns,\n onChangeSelectedColumns,\n selectedColumns,\n setSelectedColumns,\n ],\n );\n\n const handleRemoveItemFromSelectedList = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(\n ({ target }) => {\n const targetColumn = findColumn(target, selectedColumns);\n const newColumns = selectedColumns.filter(\n (col) => col.name !== targetColumn.name,\n );\n onChangeSelectedColumns(\n newColumns,\n SelectedColumnChangeType.ColumnRemoved,\n );\n setSelectedColumns(newColumns);\n },\n [onChangeSelectedColumns, selectedColumns, setSelectedColumns],\n );\n\n return {\n availableColumns: nonSelectedColumns(visibleColumnsRef.current),\n onAddItemToSelectedList: handleAddItemToSelectedList,\n onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,\n onChangeSearchInput: handleChangeSearchInput,\n searchState,\n selectedColumns: visibleColumnsRef.current.selectedColumns,\n };\n};\n"],"names":["queryClosest","useState","
|
|
1
|
+
{"version":3,"file":"useColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/useColumnPicker.tsx"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { queryClosest, ValueOf } from \"@vuu-ui/vuu-utils\";\nimport {\n FormEventHandler,\n MouseEventHandler,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nexport type ColumnPickerAction = (column: ColumnDescriptor) => void;\n\nconst nonSelectedColumns = ({\n availableColumns,\n selectedColumns,\n}: {\n availableColumns: ColumnDescriptor[];\n selectedColumns: ColumnDescriptor[];\n}) =>\n availableColumns.filter(\n ({ name }) => selectedColumns.findIndex((c) => c.name === name) === -1,\n );\n\nconst byColumnName = (\n { name: n1, label: l1 = n1 }: ColumnDescriptor,\n { name: n2, label: l2 = n2 }: ColumnDescriptor,\n) => (l1 > l2 ? 1 : l2 > l1 ? -1 : 0);\n\nconst findColumn = (target: EventTarget, columns: ColumnDescriptor[]) => {\n const listItem = queryClosest(target, \".saltOption\", true);\n const { name } = listItem.dataset;\n const column = columns.find((col) => col.name === name);\n if (column) {\n return column;\n } else {\n throw Error(`[useColumnPicker] column ${name} not found`);\n }\n};\nexport const SelectedColumnChangeType = {\n ColumnAdded: \"column-added\",\n ColumnRemoved: \"column-removed\",\n ColumnsReordered: \"columns-reordered\",\n} as const;\nexport type SelectedColumnChangeType = ValueOf<typeof SelectedColumnChangeType>;\nexport type SelectedColumnsChangeHandler = (\n columns: ColumnDescriptor[],\n changeType: SelectedColumnChangeType,\n) => void;\n\nexport interface ColumPickerHookProps {\n /**\n * All available columns, including selected columns.\n */\n availableColumns: ColumnDescriptor[];\n /**\n * Columns already selected and rendered in Table,\n * columnPicker will be uncontrolled\n */\n defaultSelectedColumns?: ColumnDescriptor[];\n onChangeSelectedColumns: SelectedColumnsChangeHandler;\n /**\n * Columns already selected and rendered in Table.\n * columnPicker will be controlled\n */\n selectedColumns?: ColumnDescriptor[];\n}\n\nexport const useColumnPicker = ({\n availableColumns: availableColumnsProp,\n defaultSelectedColumns,\n onChangeSelectedColumns,\n selectedColumns: selectedColumnsProp,\n}: ColumPickerHookProps) => {\n const [searchState, setSearchState] = useState<{\n searchText: string;\n }>({ searchText: \"\" });\n\n const availableColumns = useMemo(\n () => availableColumnsProp.toSorted(byColumnName),\n [availableColumnsProp],\n );\n\n const [selectedColumns, setSelectedColumns] = useControlled({\n controlled: selectedColumnsProp,\n default: defaultSelectedColumns ?? [],\n name: \"ColumnPicker\",\n state: \"selectedColumns\",\n });\n\n const visibleColumnsRef = useRef({ availableColumns, selectedColumns });\n\n useMemo(() => {\n const value = searchState.searchText.toLowerCase();\n if (value) {\n const pattern = value.toLowerCase();\n visibleColumnsRef.current = {\n availableColumns: availableColumns.filter(\n ({ name, label = name }) =>\n label.toLowerCase().indexOf(pattern) !== -1,\n ),\n selectedColumns: selectedColumns.filter(\n ({ name, label = name }) =>\n label.toLowerCase().indexOf(pattern) !== -1,\n ),\n };\n } else {\n visibleColumnsRef.current = { availableColumns, selectedColumns };\n }\n }, [availableColumns, selectedColumns, searchState.searchText]);\n\n const handleChangeSearchInput = useCallback<FormEventHandler>((evt) => {\n const { value } = evt.target as HTMLInputElement;\n setSearchState({\n searchText: value,\n });\n }, []);\n\n const handleAddItemToSelectedList = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(\n ({ target }) => {\n const targetColumn = findColumn(target, availableColumns);\n const newColumns = selectedColumns.concat(targetColumn);\n onChangeSelectedColumns(newColumns, SelectedColumnChangeType.ColumnAdded);\n setSelectedColumns(newColumns);\n },\n [\n availableColumns,\n onChangeSelectedColumns,\n selectedColumns,\n setSelectedColumns,\n ],\n );\n\n const handleRemoveItemFromSelectedList = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(\n ({ target }) => {\n const targetColumn = findColumn(target, selectedColumns);\n const newColumns = selectedColumns.filter(\n (col) => col.name !== targetColumn.name,\n );\n onChangeSelectedColumns(\n newColumns,\n SelectedColumnChangeType.ColumnRemoved,\n );\n setSelectedColumns(newColumns);\n },\n [onChangeSelectedColumns, selectedColumns, setSelectedColumns],\n );\n\n return {\n availableColumns: nonSelectedColumns(visibleColumnsRef.current),\n onAddItemToSelectedList: handleAddItemToSelectedList,\n onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,\n onChangeSearchInput: handleChangeSearchInput,\n searchState,\n selectedColumns: visibleColumnsRef.current.selectedColumns,\n };\n};\n"],"names":["queryClosest","useState","useMemo","useControlled","useRef","useCallback"],"mappings":"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"}
|
|
@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
var cx = require('clsx');
|
|
5
5
|
var styles = require('@salt-ds/styles');
|
|
6
6
|
var window = require('@salt-ds/window');
|
|
7
|
-
var DatasourceStats = require('./DatasourceStats.css.js');
|
|
8
7
|
var useDatasourceStats = require('./useDatasourceStats.js');
|
|
8
|
+
var DatasourceStats = require('./DatasourceStats.css.js');
|
|
9
9
|
|
|
10
10
|
const classBase = "vuuDatasourceStats";
|
|
11
11
|
const numberFormatter = new Intl.NumberFormat();
|
|
@@ -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\";\
|
|
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.firstRowInViewport);\n const to = numberFormatter.format(Math.min(range.lastRowInViewport, 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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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var freezeControlCss = ".FreezeControl {\n display: inline-flex;\n --freeze-control-flash-duration: 0.25s;\n\n .FreezeControl-buttonRow {\n background-color: var(--salt-container-secondary-background);\n border: 1px solid var(--salt-container-secondary-borderColor);\n border-radius: 50px;\n display: flex;\n height: var(--salt-size-base);\n overflow: hidden;\n }\n\n .FreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n }\n\n .FreezeControl-buttonWrapper-active {\n background-color: var(--salt-actionable-secondary-
|
|
3
|
+
var freezeControlCss = ".FreezeControl {\n display: inline-flex;\n --freeze-control-flash-duration: 0.25s;\n --freeze-control-active-button-color: var(--salt-palette-error-background);\n --freeze-control-badge-color: var(--salt-palette-success-background);\n\n .FreezeControl-buttonRow {\n background-color: var(--salt-container-secondary-background);\n border: 1px solid var(--salt-container-secondary-borderColor);\n border-radius: 50px;\n display: flex;\n height: var(--salt-size-base);\n overflow: hidden;\n }\n\n .FreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n background-color: var(--salt-container-secondary-background);\n }\n\n .FreezeControl-buttonWrapper-active {\n background-color: var(--freeze-control-active-button-color);\n }\n\n .FreezeControl-buttonWrapper-active .saltToggleButton {\n background-color: var(--freeze-control-active-button-color);\n color: var(--salt-actionable-secondary-foreground-active);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup {\n background-color: var(--salt-container-secondary-background);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup .saltToggleButton {\n background-color: transparent;\n }\n\n .FreezeControl-customBadge {\n background-color: transparent;\n border-radius: 50%;\n color: var(--salt-text-primary-foreground);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--salt-text-fontSize);\n font-weight: bold;\n height: var(--salt-size-base);\n width: var(--salt-size-base);\n min-width: var(--salt-size-base);\n margin-left: var(--salt-spacing-100);\n }\n\n .FreezeControl-newOrders {\n align-items: center;\n background-color: var(--salt-container-secondary-background);\n display: flex;\n font-size: var(--salt-text-fontSize);\n padding: 0 var(--salt-spacing-200);\n }\n}\n\n.FreezeControl-customBadge-flashing {\n animation: flashGreenRed var(--freeze-control-flash-duration, 0.25s)\n steps(1, end) infinite;\n}\n\n@keyframes flashGreenRed {\n 0% {\n background-color: var(--freeze-control-badge-color);\n }\n 50% {\n background-color: transparent;\n }\n 100% {\n background-color: var(--freeze-control-badge-color);\n }\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = freezeControlCss;
|
|
6
6
|
//# sourceMappingURL=FreezeControl.css.js.map
|
|
@@ -59,18 +59,18 @@ const FreezeControl = ({
|
|
|
59
59
|
"div",
|
|
60
60
|
{
|
|
61
61
|
className: cx(`FreezeControl-buttonWrapper`, {
|
|
62
|
-
[`FreezeControl-buttonWrapper-active`]:
|
|
62
|
+
[`FreezeControl-buttonWrapper-active`]: isFrozen
|
|
63
63
|
}),
|
|
64
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "
|
|
64
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "frozen", children: isFrozen ? "Frozen" : "Freeze" })
|
|
65
65
|
}
|
|
66
66
|
),
|
|
67
67
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
68
68
|
"div",
|
|
69
69
|
{
|
|
70
70
|
className: cx(`FreezeControl-buttonWrapper`, {
|
|
71
|
-
[`FreezeControl-buttonWrapper-active`]: isFrozen
|
|
71
|
+
[`FreezeControl-buttonWrapper-active`]: !isFrozen
|
|
72
72
|
}),
|
|
73
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "
|
|
73
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(core.ToggleButton, { value: "live", children: "Active" })
|
|
74
74
|
}
|
|
75
75
|
)
|
|
76
76
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport freezeControlCss from \"./FreezeControl.css\";\n\n// Duration to keep flashing after last new record (in milliseconds)\nconst FLASH_DURATION_MS = 3000;\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Duration of the flash animation for the badge (in seconds).\n * @default 0.25\n */\n flashDuration?: number;\n}\n\nexport const FreezeControl = ({\n dataSource,\n className,\n flashDuration = 0.25,\n ...htmlAttributes\n}: FreezeControlProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-freeze-control\",\n css: freezeControlCss,\n window: targetWindow,\n });\n\n const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({\n dataSource,\n });\n\n const [isFlashing, setIsFlashing] = useState(false);\n const flashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // Check if we're frozen and have new records and set the flash with a 3 second timeout\n useEffect(() => {\n if (isFrozen && newRecordCount > 0) {\n setIsFlashing(true);\n\n if (flashTimeoutRef.current) {\n clearTimeout(flashTimeoutRef.current);\n }\n\n flashTimeoutRef.current = setTimeout(() => {\n setIsFlashing(false);\n }, FLASH_DURATION_MS);\n }\n }, [newRecordCount, isFrozen]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\"FreezeControl\", className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`FreezeControl-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]:
|
|
1
|
+
{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport freezeControlCss from \"./FreezeControl.css\";\n\n// Duration to keep flashing after last new record (in milliseconds)\nconst FLASH_DURATION_MS = 3000;\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Duration of the flash animation for the badge (in seconds).\n * @default 0.25\n */\n flashDuration?: number;\n}\n\nexport const FreezeControl = ({\n dataSource,\n className,\n flashDuration = 0.25,\n ...htmlAttributes\n}: FreezeControlProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-freeze-control\",\n css: freezeControlCss,\n window: targetWindow,\n });\n\n const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({\n dataSource,\n });\n\n const [isFlashing, setIsFlashing] = useState(false);\n const flashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // Check if we're frozen and have new records and set the flash with a 3 second timeout\n useEffect(() => {\n if (isFrozen && newRecordCount > 0) {\n setIsFlashing(true);\n\n if (flashTimeoutRef.current) {\n clearTimeout(flashTimeoutRef.current);\n }\n\n flashTimeoutRef.current = setTimeout(() => {\n setIsFlashing(false);\n }, FLASH_DURATION_MS);\n }\n }, [newRecordCount, isFrozen]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\"FreezeControl\", className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`FreezeControl-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: isFrozen,\n })}\n >\n <ToggleButton value=\"frozen\">\n {isFrozen ? \"Frozen\" : \"Freeze\"}\n </ToggleButton>\n </div>\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: !isFrozen,\n })}\n >\n <ToggleButton value=\"live\">Active</ToggleButton>\n </div>\n </ToggleButtonGroup>\n {isFrozen && (\n <div className={`FreezeControl-newOrders`}>\n New Orders\n <div\n className={cx(`FreezeControl-customBadge`, {\n [`FreezeControl-customBadge-flashing`]: isFlashing,\n })}\n >\n {newRecordCount}\n </div>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","freezeControlCss","useFreezeControl","useState","useRef","useEffect","jsx","jsxs","ToggleButtonGroup","ToggleButton"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var frozenBannerCss = ".FrozenBanner {\n align-items: center;\n background-color: var(--
|
|
3
|
+
var frozenBannerCss = ".FrozenBanner {\n --freeze-control-active-button-color: var(--salt-palette-error-background);\n align-items: center;\n background-color: var(--freeze-control-active-button-color);\n border-radius: 4px;\n color: var(--salt-actionable-secondary-foreground-active);\n display: flex;\n font-size: var(--salt-text-fontSize);\n height: var(--salt-size-base);\n padding: 0 var(--salt-spacing-200);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = frozenBannerCss;
|
|
6
6
|
//# sourceMappingURL=FrozenBanner.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var columnPickerCss = ".vuuColumnPicker {\n\n container-type: inline-size;\n display: flex; \n flex-direction: column;\n gap: var(--salt-spacing-300);\n overflow: hidden;\n padding: var(--salt-spacing-300) 0;\n\n .saltListBox {\n background-color: inherit;\n }\n\n .saltOption {\n align-items: center;\n background-color: inherit;\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n gap: var(--salt-spacing-200);\n height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n .vuuIcon {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n }\n\n .vuuHighlight {\n color: var(--vuu-color-blue-40);\n text-decoration: underline;\n }\n\n }\n\n .vuuColumnPickerListItem-action {\n margin-left: auto;\n visibility: hidden;\n }\n\n .saltOption:hover {\n .vuuColumnPickerListItem-action {\n visibility: visible;\n }\n }\n\n .vuuColumnPicker-search {\n --saltInput-paddingLeft: var(--salt-spacing-300);\n padding: var(--salt-spacing-200) var(--salt-spacing-300) 0 var(--salt-spacing-300);\n }\n\n .vuuColumnPicker-scrollContainer {\n\n flex: 1 1 0px;\n overflow: auto;\n\n\n .vuuColumnPicker-sectionHeader {\n align-items: center;\n background
|
|
1
|
+
var columnPickerCss = ".vuuColumnPicker {\n\n --columnpicker-background: var(--vuuColumnPicker-background, var(--salt-container-primary-background));\n background: var(--columnpicker-background);\n container-type: inline-size;\n display: flex; \n flex-direction: column;\n gap: var(--salt-spacing-300);\n height: var(--vuuColumnPicker-height, auto);\n overflow: hidden;\n padding: var(--salt-spacing-300) 0;\n\n .saltListBox {\n background-color: inherit;\n }\n\n .saltOption {\n align-items: center;\n background-color: inherit;\n border-bottom: var(--vuuColumnListItem-border, solid) 1px\n var(--salt-separable-tertiary-borderColor);\n gap: var(--salt-spacing-200);\n height: calc(var(--salt-size-base) + var(--salt-spacing-200));\n .vuuIcon {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n }\n\n .vuuHighlight {\n color: var(--vuu-color-blue-40);\n text-decoration: underline;\n }\n\n }\n\n .vuuColumnPickerListItem-action {\n margin-left: auto;\n visibility: hidden;\n }\n\n .saltOption:hover {\n .vuuColumnPickerListItem-action {\n visibility: visible;\n }\n }\n\n .vuuColumnPicker-search {\n --saltInput-paddingLeft: var(--salt-spacing-300);\n padding: var(--salt-spacing-200) var(--salt-spacing-300) 0 var(--salt-spacing-300);\n }\n\n .vuuColumnPicker-scrollContainer {\n\n flex: 1 1 0px;\n overflow: auto;\n\n\n .vuuColumnPicker-sectionHeader {\n align-items: center;\n background: var(--columnpicker-background);\n display: flex;\n height: 32px;\n padding: 0 var(--salt-spacing-300);\n position: sticky;\n top:0;\n z-index: 1;\n }\n\n .vuuColumnPicker-availableHeader {\n top: 32px;\n }\n\n\n .vuuColumnPicker-availableList {\n .saltOption {\n padding-left: var(--salt-spacing-300);\n }\n }\n\n }\n\n}";
|
|
2
2
|
|
|
3
3
|
export { columnPickerCss as default };
|
|
4
4
|
//# sourceMappingURL=ColumnPicker.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useControlled } from '@salt-ds/core';
|
|
2
2
|
import { queryClosest } from '@vuu-ui/vuu-utils';
|
|
3
|
-
import { useState,
|
|
3
|
+
import { useState, useMemo, useRef, useCallback } from 'react';
|
|
4
4
|
|
|
5
5
|
const nonSelectedColumns = ({
|
|
6
6
|
availableColumns,
|
|
@@ -8,6 +8,7 @@ const nonSelectedColumns = ({
|
|
|
8
8
|
}) => availableColumns.filter(
|
|
9
9
|
({ name }) => selectedColumns.findIndex((c) => c.name === name) === -1
|
|
10
10
|
);
|
|
11
|
+
const byColumnName = ({ name: n1, label: l1 = n1 }, { name: n2, label: l2 = n2 }) => l1 > l2 ? 1 : l2 > l1 ? -1 : 0;
|
|
11
12
|
const findColumn = (target, columns) => {
|
|
12
13
|
const listItem = queryClosest(target, ".saltOption", true);
|
|
13
14
|
const { name } = listItem.dataset;
|
|
@@ -24,12 +25,16 @@ const SelectedColumnChangeType = {
|
|
|
24
25
|
ColumnsReordered: "columns-reordered"
|
|
25
26
|
};
|
|
26
27
|
const useColumnPicker = ({
|
|
27
|
-
availableColumns,
|
|
28
|
+
availableColumns: availableColumnsProp,
|
|
28
29
|
defaultSelectedColumns,
|
|
29
30
|
onChangeSelectedColumns,
|
|
30
31
|
selectedColumns: selectedColumnsProp
|
|
31
32
|
}) => {
|
|
32
33
|
const [searchState, setSearchState] = useState({ searchText: "" });
|
|
34
|
+
const availableColumns = useMemo(
|
|
35
|
+
() => availableColumnsProp.toSorted(byColumnName),
|
|
36
|
+
[availableColumnsProp]
|
|
37
|
+
);
|
|
33
38
|
const [selectedColumns, setSelectedColumns] = useControlled({
|
|
34
39
|
controlled: selectedColumnsProp,
|
|
35
40
|
default: defaultSelectedColumns ?? [],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/useColumnPicker.tsx"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { queryClosest, ValueOf } from \"@vuu-ui/vuu-utils\";\nimport {\n FormEventHandler,\n MouseEventHandler,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nexport type ColumnPickerAction = (column: ColumnDescriptor) => void;\n\nconst nonSelectedColumns = ({\n availableColumns,\n selectedColumns,\n}: {\n availableColumns: ColumnDescriptor[];\n selectedColumns: ColumnDescriptor[];\n}) =>\n availableColumns.filter(\n ({ name }) => selectedColumns.findIndex((c) => c.name === name) === -1,\n );\n\nconst findColumn = (target: EventTarget, columns: ColumnDescriptor[]) => {\n const listItem = queryClosest(target, \".saltOption\", true);\n const { name } = listItem.dataset;\n const column = columns.find((col) => col.name === name);\n if (column) {\n return column;\n } else {\n throw Error(`[useColumnPicker] column ${name} not found`);\n }\n};\nexport const SelectedColumnChangeType = {\n ColumnAdded: \"column-added\",\n ColumnRemoved: \"column-removed\",\n ColumnsReordered: \"columns-reordered\",\n} as const;\nexport type SelectedColumnChangeType = ValueOf<typeof SelectedColumnChangeType>;\nexport type SelectedColumnsChangeHandler = (\n columns: ColumnDescriptor[],\n changeType: SelectedColumnChangeType,\n) => void;\n\nexport interface ColumPickerHookProps {\n /**\n * All available columns, including selected columns.\n */\n availableColumns: ColumnDescriptor[];\n /**\n * Columns already selected and rendered in Table,\n * columnPicker will be uncontrolled\n */\n defaultSelectedColumns?: ColumnDescriptor[];\n onChangeSelectedColumns: SelectedColumnsChangeHandler;\n /**\n * Columns already selected and rendered in Table.\n * columnPicker will be controlled\n */\n selectedColumns?: ColumnDescriptor[];\n}\n\nexport const useColumnPicker = ({\n availableColumns,\n defaultSelectedColumns,\n onChangeSelectedColumns,\n selectedColumns: selectedColumnsProp,\n}: ColumPickerHookProps) => {\n const [searchState, setSearchState] = useState<{\n searchText: string;\n }>({ searchText: \"\" });\n\n const [selectedColumns, setSelectedColumns] = useControlled({\n controlled: selectedColumnsProp,\n default: defaultSelectedColumns ?? [],\n name: \"ColumnPicker\",\n state: \"selectedColumns\",\n });\n\n const visibleColumnsRef = useRef({ availableColumns, selectedColumns });\n\n useMemo(() => {\n const value = searchState.searchText.toLowerCase();\n if (value) {\n const pattern = value.toLowerCase();\n visibleColumnsRef.current = {\n availableColumns: availableColumns.filter(\n ({ name, label = name }) =>\n label.toLowerCase().indexOf(pattern) !== -1,\n ),\n selectedColumns: selectedColumns.filter(\n ({ name, label = name }) =>\n label.toLowerCase().indexOf(pattern) !== -1,\n ),\n };\n } else {\n visibleColumnsRef.current = { availableColumns, selectedColumns };\n }\n }, [availableColumns, selectedColumns, searchState.searchText]);\n\n const handleChangeSearchInput = useCallback<FormEventHandler>((evt) => {\n const { value } = evt.target as HTMLInputElement;\n setSearchState({\n searchText: value,\n });\n }, []);\n\n const handleAddItemToSelectedList = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(\n ({ target }) => {\n const targetColumn = findColumn(target, availableColumns);\n const newColumns = selectedColumns.concat(targetColumn);\n onChangeSelectedColumns(newColumns, SelectedColumnChangeType.ColumnAdded);\n setSelectedColumns(newColumns);\n },\n [\n availableColumns,\n onChangeSelectedColumns,\n selectedColumns,\n setSelectedColumns,\n ],\n );\n\n const handleRemoveItemFromSelectedList = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(\n ({ target }) => {\n const targetColumn = findColumn(target, selectedColumns);\n const newColumns = selectedColumns.filter(\n (col) => col.name !== targetColumn.name,\n );\n onChangeSelectedColumns(\n newColumns,\n SelectedColumnChangeType.ColumnRemoved,\n );\n setSelectedColumns(newColumns);\n },\n [onChangeSelectedColumns, selectedColumns, setSelectedColumns],\n );\n\n return {\n availableColumns: nonSelectedColumns(visibleColumnsRef.current),\n onAddItemToSelectedList: handleAddItemToSelectedList,\n onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,\n onChangeSearchInput: handleChangeSearchInput,\n searchState,\n selectedColumns: visibleColumnsRef.current.selectedColumns,\n };\n};\n"],"names":[],"mappings":";;;;AAcA,MAAM,qBAAqB,CAAC;AAAA,EAC1B,gBAAA;AAAA,EACA;AACF,CAAA,KAIE,gBAAiB,CAAA,MAAA;AAAA,EACf,CAAC,EAAE,IAAA,EAAW,KAAA,eAAA,CAAgB,SAAU,CAAA,CAAC,CAAM,KAAA,CAAA,CAAE,IAAS,KAAA,IAAI,CAAM,KAAA,CAAA;AACtE,CAAA;AAEF,MAAM,UAAA,GAAa,CAAC,MAAA,EAAqB,OAAgC,KAAA;AACvE,EAAA,MAAM,QAAW,GAAA,YAAA,CAAa,MAAQ,EAAA,aAAA,EAAe,IAAI,CAAA;AACzD,EAAM,MAAA,EAAE,IAAK,EAAA,GAAI,QAAS,CAAA,OAAA;AAC1B,EAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,GAAQ,KAAA,GAAA,CAAI,SAAS,IAAI,CAAA;AACtD,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,OAAA,MAAA;AAAA,GACF,MAAA;AACL,IAAM,MAAA,KAAA,CAAM,CAA4B,yBAAA,EAAA,IAAI,CAAY,UAAA,CAAA,CAAA;AAAA;AAE5D,CAAA;AACO,MAAM,wBAA2B,GAAA;AAAA,EACtC,WAAa,EAAA,cAAA;AAAA,EACb,aAAe,EAAA,gBAAA;AAAA,EACf,gBAAkB,EAAA;AACpB;AAyBO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,
|
|
1
|
+
{"version":3,"file":"useColumnPicker.js","sources":["../../../../packages/vuu-table-extras/src/column-picker/useColumnPicker.tsx"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { queryClosest, ValueOf } from \"@vuu-ui/vuu-utils\";\nimport {\n FormEventHandler,\n MouseEventHandler,\n useCallback,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nexport type ColumnPickerAction = (column: ColumnDescriptor) => void;\n\nconst nonSelectedColumns = ({\n availableColumns,\n selectedColumns,\n}: {\n availableColumns: ColumnDescriptor[];\n selectedColumns: ColumnDescriptor[];\n}) =>\n availableColumns.filter(\n ({ name }) => selectedColumns.findIndex((c) => c.name === name) === -1,\n );\n\nconst byColumnName = (\n { name: n1, label: l1 = n1 }: ColumnDescriptor,\n { name: n2, label: l2 = n2 }: ColumnDescriptor,\n) => (l1 > l2 ? 1 : l2 > l1 ? -1 : 0);\n\nconst findColumn = (target: EventTarget, columns: ColumnDescriptor[]) => {\n const listItem = queryClosest(target, \".saltOption\", true);\n const { name } = listItem.dataset;\n const column = columns.find((col) => col.name === name);\n if (column) {\n return column;\n } else {\n throw Error(`[useColumnPicker] column ${name} not found`);\n }\n};\nexport const SelectedColumnChangeType = {\n ColumnAdded: \"column-added\",\n ColumnRemoved: \"column-removed\",\n ColumnsReordered: \"columns-reordered\",\n} as const;\nexport type SelectedColumnChangeType = ValueOf<typeof SelectedColumnChangeType>;\nexport type SelectedColumnsChangeHandler = (\n columns: ColumnDescriptor[],\n changeType: SelectedColumnChangeType,\n) => void;\n\nexport interface ColumPickerHookProps {\n /**\n * All available columns, including selected columns.\n */\n availableColumns: ColumnDescriptor[];\n /**\n * Columns already selected and rendered in Table,\n * columnPicker will be uncontrolled\n */\n defaultSelectedColumns?: ColumnDescriptor[];\n onChangeSelectedColumns: SelectedColumnsChangeHandler;\n /**\n * Columns already selected and rendered in Table.\n * columnPicker will be controlled\n */\n selectedColumns?: ColumnDescriptor[];\n}\n\nexport const useColumnPicker = ({\n availableColumns: availableColumnsProp,\n defaultSelectedColumns,\n onChangeSelectedColumns,\n selectedColumns: selectedColumnsProp,\n}: ColumPickerHookProps) => {\n const [searchState, setSearchState] = useState<{\n searchText: string;\n }>({ searchText: \"\" });\n\n const availableColumns = useMemo(\n () => availableColumnsProp.toSorted(byColumnName),\n [availableColumnsProp],\n );\n\n const [selectedColumns, setSelectedColumns] = useControlled({\n controlled: selectedColumnsProp,\n default: defaultSelectedColumns ?? [],\n name: \"ColumnPicker\",\n state: \"selectedColumns\",\n });\n\n const visibleColumnsRef = useRef({ availableColumns, selectedColumns });\n\n useMemo(() => {\n const value = searchState.searchText.toLowerCase();\n if (value) {\n const pattern = value.toLowerCase();\n visibleColumnsRef.current = {\n availableColumns: availableColumns.filter(\n ({ name, label = name }) =>\n label.toLowerCase().indexOf(pattern) !== -1,\n ),\n selectedColumns: selectedColumns.filter(\n ({ name, label = name }) =>\n label.toLowerCase().indexOf(pattern) !== -1,\n ),\n };\n } else {\n visibleColumnsRef.current = { availableColumns, selectedColumns };\n }\n }, [availableColumns, selectedColumns, searchState.searchText]);\n\n const handleChangeSearchInput = useCallback<FormEventHandler>((evt) => {\n const { value } = evt.target as HTMLInputElement;\n setSearchState({\n searchText: value,\n });\n }, []);\n\n const handleAddItemToSelectedList = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(\n ({ target }) => {\n const targetColumn = findColumn(target, availableColumns);\n const newColumns = selectedColumns.concat(targetColumn);\n onChangeSelectedColumns(newColumns, SelectedColumnChangeType.ColumnAdded);\n setSelectedColumns(newColumns);\n },\n [\n availableColumns,\n onChangeSelectedColumns,\n selectedColumns,\n setSelectedColumns,\n ],\n );\n\n const handleRemoveItemFromSelectedList = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(\n ({ target }) => {\n const targetColumn = findColumn(target, selectedColumns);\n const newColumns = selectedColumns.filter(\n (col) => col.name !== targetColumn.name,\n );\n onChangeSelectedColumns(\n newColumns,\n SelectedColumnChangeType.ColumnRemoved,\n );\n setSelectedColumns(newColumns);\n },\n [onChangeSelectedColumns, selectedColumns, setSelectedColumns],\n );\n\n return {\n availableColumns: nonSelectedColumns(visibleColumnsRef.current),\n onAddItemToSelectedList: handleAddItemToSelectedList,\n onRemoveItemFromSelectedList: handleRemoveItemFromSelectedList,\n onChangeSearchInput: handleChangeSearchInput,\n searchState,\n selectedColumns: visibleColumnsRef.current.selectedColumns,\n };\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -2,8 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import cx from 'clsx';
|
|
3
3
|
import { useComponentCssInjection } from '@salt-ds/styles';
|
|
4
4
|
import { useWindow } from '@salt-ds/window';
|
|
5
|
-
import dataSourceStats from './DatasourceStats.css.js';
|
|
6
5
|
import { useDatasourceStats } from './useDatasourceStats.js';
|
|
6
|
+
import dataSourceStats from './DatasourceStats.css.js';
|
|
7
7
|
|
|
8
8
|
const classBase = "vuuDatasourceStats";
|
|
9
9
|
const numberFormatter = new Intl.NumberFormat();
|
|
@@ -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\";\
|
|
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.firstRowInViewport);\n const to = numberFormatter.format(Math.min(range.lastRowInViewport, 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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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var freezeControlCss = ".FreezeControl {\n display: inline-flex;\n --freeze-control-flash-duration: 0.25s;\n\n .FreezeControl-buttonRow {\n background-color: var(--salt-container-secondary-background);\n border: 1px solid var(--salt-container-secondary-borderColor);\n border-radius: 50px;\n display: flex;\n height: var(--salt-size-base);\n overflow: hidden;\n }\n\n .FreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n }\n\n .FreezeControl-buttonWrapper-active {\n background-color: var(--salt-actionable-secondary-
|
|
1
|
+
var freezeControlCss = ".FreezeControl {\n display: inline-flex;\n --freeze-control-flash-duration: 0.25s;\n --freeze-control-active-button-color: var(--salt-palette-error-background);\n --freeze-control-badge-color: var(--salt-palette-success-background);\n\n .FreezeControl-buttonRow {\n background-color: var(--salt-container-secondary-background);\n border: 1px solid var(--salt-container-secondary-borderColor);\n border-radius: 50px;\n display: flex;\n height: var(--salt-size-base);\n overflow: hidden;\n }\n\n .FreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n background-color: var(--salt-container-secondary-background);\n }\n\n .FreezeControl-buttonWrapper-active {\n background-color: var(--freeze-control-active-button-color);\n }\n\n .FreezeControl-buttonWrapper-active .saltToggleButton {\n background-color: var(--freeze-control-active-button-color);\n color: var(--salt-actionable-secondary-foreground-active);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup {\n background-color: var(--salt-container-secondary-background);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup .saltToggleButton {\n background-color: transparent;\n }\n\n .FreezeControl-customBadge {\n background-color: transparent;\n border-radius: 50%;\n color: var(--salt-text-primary-foreground);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--salt-text-fontSize);\n font-weight: bold;\n height: var(--salt-size-base);\n width: var(--salt-size-base);\n min-width: var(--salt-size-base);\n margin-left: var(--salt-spacing-100);\n }\n\n .FreezeControl-newOrders {\n align-items: center;\n background-color: var(--salt-container-secondary-background);\n display: flex;\n font-size: var(--salt-text-fontSize);\n padding: 0 var(--salt-spacing-200);\n }\n}\n\n.FreezeControl-customBadge-flashing {\n animation: flashGreenRed var(--freeze-control-flash-duration, 0.25s)\n steps(1, end) infinite;\n}\n\n@keyframes flashGreenRed {\n 0% {\n background-color: var(--freeze-control-badge-color);\n }\n 50% {\n background-color: transparent;\n }\n 100% {\n background-color: var(--freeze-control-badge-color);\n }\n}\n";
|
|
2
2
|
|
|
3
3
|
export { freezeControlCss as default };
|
|
4
4
|
//# sourceMappingURL=FreezeControl.css.js.map
|
|
@@ -57,18 +57,18 @@ const FreezeControl = ({
|
|
|
57
57
|
"div",
|
|
58
58
|
{
|
|
59
59
|
className: cx(`FreezeControl-buttonWrapper`, {
|
|
60
|
-
[`FreezeControl-buttonWrapper-active`]:
|
|
60
|
+
[`FreezeControl-buttonWrapper-active`]: isFrozen
|
|
61
61
|
}),
|
|
62
|
-
children: /* @__PURE__ */ jsx(ToggleButton, { value: "
|
|
62
|
+
children: /* @__PURE__ */ jsx(ToggleButton, { value: "frozen", children: isFrozen ? "Frozen" : "Freeze" })
|
|
63
63
|
}
|
|
64
64
|
),
|
|
65
65
|
/* @__PURE__ */ jsx(
|
|
66
66
|
"div",
|
|
67
67
|
{
|
|
68
68
|
className: cx(`FreezeControl-buttonWrapper`, {
|
|
69
|
-
[`FreezeControl-buttonWrapper-active`]: isFrozen
|
|
69
|
+
[`FreezeControl-buttonWrapper-active`]: !isFrozen
|
|
70
70
|
}),
|
|
71
|
-
children: /* @__PURE__ */ jsx(ToggleButton, { value: "
|
|
71
|
+
children: /* @__PURE__ */ jsx(ToggleButton, { value: "live", children: "Active" })
|
|
72
72
|
}
|
|
73
73
|
)
|
|
74
74
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport freezeControlCss from \"./FreezeControl.css\";\n\n// Duration to keep flashing after last new record (in milliseconds)\nconst FLASH_DURATION_MS = 3000;\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Duration of the flash animation for the badge (in seconds).\n * @default 0.25\n */\n flashDuration?: number;\n}\n\nexport const FreezeControl = ({\n dataSource,\n className,\n flashDuration = 0.25,\n ...htmlAttributes\n}: FreezeControlProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-freeze-control\",\n css: freezeControlCss,\n window: targetWindow,\n });\n\n const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({\n dataSource,\n });\n\n const [isFlashing, setIsFlashing] = useState(false);\n const flashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // Check if we're frozen and have new records and set the flash with a 3 second timeout\n useEffect(() => {\n if (isFrozen && newRecordCount > 0) {\n setIsFlashing(true);\n\n if (flashTimeoutRef.current) {\n clearTimeout(flashTimeoutRef.current);\n }\n\n flashTimeoutRef.current = setTimeout(() => {\n setIsFlashing(false);\n }, FLASH_DURATION_MS);\n }\n }, [newRecordCount, isFrozen]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\"FreezeControl\", className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`FreezeControl-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]:
|
|
1
|
+
{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport freezeControlCss from \"./FreezeControl.css\";\n\n// Duration to keep flashing after last new record (in milliseconds)\nconst FLASH_DURATION_MS = 3000;\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Duration of the flash animation for the badge (in seconds).\n * @default 0.25\n */\n flashDuration?: number;\n}\n\nexport const FreezeControl = ({\n dataSource,\n className,\n flashDuration = 0.25,\n ...htmlAttributes\n}: FreezeControlProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-freeze-control\",\n css: freezeControlCss,\n window: targetWindow,\n });\n\n const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({\n dataSource,\n });\n\n const [isFlashing, setIsFlashing] = useState(false);\n const flashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // Check if we're frozen and have new records and set the flash with a 3 second timeout\n useEffect(() => {\n if (isFrozen && newRecordCount > 0) {\n setIsFlashing(true);\n\n if (flashTimeoutRef.current) {\n clearTimeout(flashTimeoutRef.current);\n }\n\n flashTimeoutRef.current = setTimeout(() => {\n setIsFlashing(false);\n }, FLASH_DURATION_MS);\n }\n }, [newRecordCount, isFrozen]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\"FreezeControl\", className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`FreezeControl-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: isFrozen,\n })}\n >\n <ToggleButton value=\"frozen\">\n {isFrozen ? \"Frozen\" : \"Freeze\"}\n </ToggleButton>\n </div>\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: !isFrozen,\n })}\n >\n <ToggleButton value=\"live\">Active</ToggleButton>\n </div>\n </ToggleButtonGroup>\n {isFrozen && (\n <div className={`FreezeControl-newOrders`}>\n New Orders\n <div\n className={cx(`FreezeControl-customBadge`, {\n [`FreezeControl-customBadge-flashing`]: isFlashing,\n })}\n >\n {newRecordCount}\n </div>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var frozenBannerCss = ".FrozenBanner {\n align-items: center;\n background-color: var(--
|
|
1
|
+
var frozenBannerCss = ".FrozenBanner {\n --freeze-control-active-button-color: var(--salt-palette-error-background);\n align-items: center;\n background-color: var(--freeze-control-active-button-color);\n border-radius: 4px;\n color: var(--salt-actionable-secondary-foreground-active);\n display: flex;\n font-size: var(--salt-text-fontSize);\n height: var(--salt-size-base);\n padding: 0 var(--salt-spacing-200);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { frozenBannerCss as default };
|
|
4
4
|
//# sourceMappingURL=FrozenBanner.css.js.map
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.13.
|
|
2
|
+
"version": "0.13.68",
|
|
3
3
|
"author": "heswell",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"devDependencies": {
|
|
6
|
-
"@vuu-ui/vuu-filter-types": "0.13.
|
|
7
|
-
"@vuu-ui/vuu-protocol-types": "0.13.
|
|
6
|
+
"@vuu-ui/vuu-filter-types": "0.13.68",
|
|
7
|
+
"@vuu-ui/vuu-protocol-types": "0.13.68"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@vuu-ui/vuu-codemirror": "0.13.
|
|
11
|
-
"@vuu-ui/vuu-data-react": "0.13.
|
|
12
|
-
"@vuu-ui/vuu-data-types": "0.13.
|
|
13
|
-
"@vuu-ui/vuu-table-types": "0.13.
|
|
14
|
-
"@vuu-ui/vuu-popups": "0.13.
|
|
15
|
-
"@vuu-ui/vuu-table": "0.13.
|
|
16
|
-
"@vuu-ui/vuu-utils": "0.13.
|
|
17
|
-
"@vuu-ui/vuu-ui-controls": "0.13.
|
|
10
|
+
"@vuu-ui/vuu-codemirror": "0.13.68",
|
|
11
|
+
"@vuu-ui/vuu-data-react": "0.13.68",
|
|
12
|
+
"@vuu-ui/vuu-data-types": "0.13.68",
|
|
13
|
+
"@vuu-ui/vuu-table-types": "0.13.68",
|
|
14
|
+
"@vuu-ui/vuu-popups": "0.13.68",
|
|
15
|
+
"@vuu-ui/vuu-table": "0.13.68",
|
|
16
|
+
"@vuu-ui/vuu-utils": "0.13.68",
|
|
17
|
+
"@vuu-ui/vuu-ui-controls": "0.13.68",
|
|
18
18
|
"@lezer/lr": "1.4.2",
|
|
19
19
|
"@salt-ds/core": "1.48.0",
|
|
20
20
|
"@salt-ds/styles": "0.2.1",
|
|
@@ -26,7 +26,7 @@ export interface ColumPickerHookProps {
|
|
|
26
26
|
*/
|
|
27
27
|
selectedColumns?: ColumnDescriptor[];
|
|
28
28
|
}
|
|
29
|
-
export declare const useColumnPicker: ({ availableColumns, defaultSelectedColumns, onChangeSelectedColumns, selectedColumns: selectedColumnsProp, }: ColumPickerHookProps) => {
|
|
29
|
+
export declare const useColumnPicker: ({ availableColumns: availableColumnsProp, defaultSelectedColumns, onChangeSelectedColumns, selectedColumns: selectedColumnsProp, }: ColumPickerHookProps) => {
|
|
30
30
|
availableColumns: ColumnDescriptor[];
|
|
31
31
|
onAddItemToSelectedList: MouseEventHandler<HTMLButtonElement>;
|
|
32
32
|
onRemoveItemFromSelectedList: MouseEventHandler<HTMLButtonElement>;
|