@vuu-ui/vuu-table-extras 2.1.19-beta.1 → 2.1.19-beta.2

package/src/freeze-control/FreezeControl.css.js

@@ -0,0 +1,108 @@
+const css = `
+.vuuFreezeControl {
+  --freeze-control-flash-duration: .25s;
+  --freeze-control-active-button-color: var(--salt-palette-error-background);
+  --freeze-control-badge-color: var(--salt-palette-success-background);
+  height: fit-content;
+  display: inline-flex;
+
+  & .vuuFreezeControl-buttonRow {
+    background-color: var(--salt-container-secondary-background);
+    border: 1px solid var(--salt-container-secondary-borderColor);
+    white-space: nowrap;
+    border-radius: 50px;
+    display: flex;
+    overflow: hidden;
+  }
+
+  & .vuuFreezeControl-buttonWrapper {
+    padding: 0 var(--salt-spacing-150);
+    background-color: var(--salt-container-secondary-background);
+    border-radius: 50px;
+  }
+
+  & .vuuFreezeControl-buttonWrapper-active {
+    background-color: var(--freeze-control-active-button-color);
+  }
+
+  & .saltToggleButtonGroup {
+    padding: var(--vuuFreezeControl-padding, 0px);
+  }
+
+  & .vuuFreezeControl-buttonWrapper-active .saltToggleButton {
+    background-color: var(--freeze-control-active-button-color);
+    color: var(--salt-actionable-secondary-foreground-active);
+  }
+
+  & .saltToggleButtonGroup.vuuStateButtonGroup {
+    background-color: var(--salt-container-secondary-background);
+  }
+
+  & .saltToggleButtonGroup.vuuStateButtonGroup .saltToggleButton {
+    background-color: #0000;
+  }
+
+  & .vuuFreezeControl-customBadge {
+    color: var(--salt-text-primary-foreground);
+    font-size: var(--salt-text-fontSize);
+    height: var(--salt-size-base);
+    width: var(--salt-size-base);
+    min-width: var(--salt-size-base);
+    margin-left: var(--salt-spacing-100);
+    background-color: #0000;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    line-height: 1;
+    display: flex;
+    position: relative;
+    overflow: visible;
+  }
+
+  & .vuuFreezeControl-newItems {
+    background-color: var(--salt-container-secondary-background);
+    font-size: var(--salt-text-fontSize);
+    padding: 0 var(--salt-spacing-200);
+    align-items: center;
+    display: flex;
+  }
+}
+
+.vuuFreezeControl-customBadge-flashing {
+  animation: flashGreenRed var(--freeze-control-flash-duration, .25s)
+    steps(1, end) infinite;
+}
+
+.vuuFreezeControl-customBadge[data-overflow="true"] {
+  padding-right: .2em;
+}
+
+.vuuFreezeControl-plus {
+  color: inherit;
+  pointer-events: none;
+  font-size: .8em;
+  font-weight: bold;
+  line-height: 1;
+  position: absolute;
+  top: .1em;
+  right: -.05em;
+}
+
+@keyframes flashGreenRed {
+  0% {
+    background-color: var(--freeze-control-badge-color);
+  }
+
+  50% {
+    background-color: #0000;
+  }
+
+  100% {
+    background-color: var(--freeze-control-badge-color);
+  }
+}
+
+
+`;
+export default css;

package/src/freeze-control/FreezeControl.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+import { useFreezeControl } from "./useFreezeControl.js";
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { calculateBadgeState } from "./freezeControlBadge.js";
+import FreezeControl from "./FreezeControl.css";
+const FLASH_DURATION_MS = 3000;
+const classBase = "vuuFreezeControl";
+const FreezeControl_FreezeControl = ({ dataSource, className, newItemsLabel = "New Orders", flashDuration = 0.25, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-freeze-control",
+        css: FreezeControl,
+        window: targetWindow
+    });
+    const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({
+        dataSource
+    });
+    const [isFlashing, setIsFlashing] = useState(false);
+    const flashTimeoutRef = useRef(null);
+    useEffect(()=>{
+        if (isFrozen && newRecordCount > 0) {
+            setIsFlashing(true);
+            if (flashTimeoutRef.current) clearTimeout(flashTimeoutRef.current);
+            flashTimeoutRef.current = setTimeout(()=>{
+                setIsFlashing(false);
+            }, FLASH_DURATION_MS);
+        }
+    }, [
+        newRecordCount,
+        isFrozen
+    ]);
+    const { badgeValue, isOverflow } = calculateBadgeState(newRecordCount);
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        style: {
+            ...htmlAttributes.style,
+            "--freeze-control-flash-duration": `${flashDuration}s`
+        },
+        children: /*#__PURE__*/ jsxs("div", {
+            className: `${classBase}-buttonRow`,
+            children: [
+                /*#__PURE__*/ jsxs(ToggleButtonGroup, {
+                    className: "vuuStateButtonGroup",
+                    onChange: onToggleChange,
+                    value: isFrozen ? "frozen" : "live",
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: clsx(`${classBase}-buttonWrapper`, {
+                                [`${classBase}-buttonWrapper-active`]: isFrozen
+                            }),
+                            children: /*#__PURE__*/ jsx(ToggleButton, {
+                                value: "frozen",
+                                children: isFrozen ? "Frozen" : "Freeze"
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: clsx(`${classBase}-buttonWrapper`, {
+                                [`${classBase}-buttonWrapper-active`]: !isFrozen
+                            }),
+                            children: /*#__PURE__*/ jsx(ToggleButton, {
+                                value: "live",
+                                children: "Active"
+                            })
+                        })
+                    ]
+                }),
+                isFrozen && /*#__PURE__*/ jsxs("div", {
+                    className: `${classBase}-newItems`,
+                    children: [
+                        newItemsLabel,
+                        /*#__PURE__*/ jsxs("div", {
+                            className: clsx(`${classBase}-customBadge`, {
+                                [`${classBase}-customBadge-flashing`]: isFlashing,
+                                [`${classBase}-customBadge-overflow`]: isOverflow
+                            }),
+                            "data-overflow": isOverflow ? "true" : void 0,
+                            children: [
+                                badgeValue,
+                                isOverflow && /*#__PURE__*/ jsx("span", {
+                                    className: `${classBase}-plus`,
+                                    children: "+"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+export { FreezeControl_FreezeControl as FreezeControl };

package/src/freeze-control/FrozenBanner.css.js

@@ -0,0 +1,16 @@
+const css = `
+.FrozenBanner {
+  --freeze-control-active-button-color: var(--salt-palette-error-background);
+  background-color: var(--freeze-control-active-button-color);
+  color: var(--salt-actionable-secondary-foreground-active);
+  font-size: var(--salt-text-fontSize);
+  height: var(--salt-size-base);
+  padding: 0 var(--salt-spacing-200);
+  border-radius: 4px;
+  align-items: center;
+  display: flex;
+}
+
+
+`;
+export default css;

package/src/freeze-control/FrozenBanner.js

@@ -0,0 +1,48 @@
+import { jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useEffect, useState } from "react";
+import clsx from "clsx";
+import FrozenBanner from "./FrozenBanner.css";
+const classBase = "FrozenBanner";
+const formatFreezeTime = (ts)=>{
+    const date = new Date(ts);
+    return date.toLocaleTimeString(void 0, {
+        hour: "2-digit",
+        minute: "2-digit"
+    });
+};
+const FrozenBanner_FrozenBanner = ({ dataSource, className, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-frozen-banner",
+        css: FrozenBanner,
+        window: targetWindow
+    });
+    const [isFrozen, setIsFrozen] = useState(dataSource.isFrozen ?? false);
+    const [freezeTime, setFreezeTime] = useState(dataSource.freezeTimestamp);
+    useEffect(()=>{
+        const handleFreezeChange = (frozen, timestamp)=>{
+            setIsFrozen(frozen);
+            setFreezeTime(timestamp);
+        };
+        setIsFrozen(dataSource.isFrozen ?? false);
+        setFreezeTime(dataSource.freezeTimestamp);
+        dataSource.on("freeze", handleFreezeChange);
+        return ()=>{
+            dataSource.removeListener("freeze", handleFreezeChange);
+        };
+    }, [
+        dataSource
+    ]);
+    if (!isFrozen) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        children: [
+            "Frozen at ",
+            freezeTime ? formatFreezeTime(freezeTime) : "--:--"
+        ]
+    });
+};
+export { FrozenBanner_FrozenBanner as FrozenBanner };

package/src/freeze-control/freezeControlBadge.js

@@ -0,0 +1,9 @@
+const calculateBadgeState = (newRecordCount)=>{
+    const badgeValue = Math.min(newRecordCount, 99);
+    const isOverflow = newRecordCount > 99;
+    return {
+        badgeValue,
+        isOverflow
+    };
+};
+export { calculateBadgeState };

package/src/freeze-control/useFreezeControl.js

@@ -0,0 +1,68 @@
+import { messageHasSize, useData } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useState } from "react";
+const FreezeState = (dataSource, newRecordCount)=>({
+        isFrozen: dataSource.isFrozen ?? false,
+        newRecordCount
+    });
+const useFreezeControl = ({ dataSource })=>{
+    const { VuuDataSource } = useData();
+    const table = useMemo(()=>{
+        if (void 0 === dataSource.table) throw Error("[useFreezeControls] dataSource must have VuuTable");
+        return dataSource.table;
+    }, [
+        dataSource
+    ]);
+    const [freezeState, setFreezeState] = useState(FreezeState(dataSource, 0));
+    const [startTrackingNewRows, stopTrackingNewRows] = useMemo(()=>{
+        let ds;
+        const dataCallback = (message)=>{
+            if (messageHasSize(message)) setFreezeState((prev)=>({
+                    ...prev,
+                    newRecordCount: message.size
+                }));
+        };
+        const start = (ts)=>{
+            ds = new VuuDataSource({
+                columns: [
+                    "vuuCreatedTimestamp"
+                ],
+                table
+            });
+            ds.subscribe({
+                filterSpec: {
+                    filter: `vuuCreatedTimestamp > ${ts}`
+                }
+            }, dataCallback);
+        };
+        const stop = ()=>{
+            ds?.unsubscribe();
+        };
+        return [
+            start,
+            stop
+        ];
+    }, [
+        VuuDataSource,
+        table
+    ]);
+    const handleToggleChange = useCallback((evt)=>{
+        const value = evt.target.value;
+        if ("frozen" === value) {
+            dataSource.freeze?.();
+            startTrackingNewRows(dataSource.freezeTimestamp);
+        } else {
+            dataSource.unfreeze?.();
+            stopTrackingNewRows();
+        }
+        setFreezeState(FreezeState(dataSource, 0));
+    }, [
+        dataSource,
+        startTrackingNewRows,
+        stopTrackingNewRows
+    ]);
+    return {
+        ...freezeState,
+        onToggleChange: handleToggleChange
+    };
+};
+export { useFreezeControl };

package/src/index.js

@@ -0,0 +1,22 @@
+export * from "./csv-upload/index.js";
+export * from "./cell-edit-validators/index.js";
+export * from "./cell-renderers/index.js";
+export * from "./column-expression-input/index.js";
+export * from "./column-formatting-settings/index.js";
+export { CalculatedColumnPanel } from "./calculated-column/CalculatedColumnPanel.js";
+export { ColumnMenu } from "./column-menu/ColumnMenu.js";
+export { useColumnActions } from "./column-menu/useColumnActions.js";
+export { ColumnChangeSource, ColumnModel, SelectedColumnChangeType, isColumnAdded, isColumnRemoved, isColumnsReordered } from "./column-picker/ColumnModel.js";
+export { ColumnPicker } from "./column-picker/ColumnPicker.js";
+export { ColumnPickerAction } from "./column-picker/ColumnPickerAction.js";
+export { useTableColumnPicker } from "./column-picker/useTableColumnPicker.js";
+export { ColumnSettingsPanel } from "./column-settings-panel/ColumnSettingsPanel.js";
+export { useColumnSettings } from "./column-settings-panel/useColumnSettings.js";
+export { DataSourceStats } from "./datasource-stats/DatasourceStats.js";
+export { FreezeControl } from "./freeze-control/FreezeControl.js";
+export { FrozenBanner } from "./freeze-control/FrozenBanner.js";
+export { TabbedTableConfigPanel } from "./tabbed-table-config-panel/TabbedTableConfigPanel.js";
+export { TabbedTableSettingsAction } from "./tabbed-table-config-panel/TabbedTableSettingsAction.js";
+export { TableFooter, TableFooterTray } from "./table-footer/TableFooter.js";
+export { TableProvider, useTableContext } from "./table-provider/TableProvider.js";
+export { TableSettingsPanel, defaultTableSettingsPermissions } from "./table-settings-panel/TableSettingsPanel.js";

package/src/tabbed-table-config-panel/TabbedTableConfigPanel.css.js

@@ -0,0 +1,23 @@
+const css = `
+.vuuTabbedTableConfigPanel {
+  --tabs-height: 25px;
+  position: absolute;
+  inset: 0;
+
+  & .saltTabsNext {
+    height: 100%;
+
+    & .saltTabListNext {
+      border-bottom: solid var(--salt-separable-secondary-borderColor) 1px;
+      height: var(--tabs-height);
+    }
+
+    & .saltTabNextPanel {
+      height: calc(100% - var(--tabs-height));
+    }
+  }
+}
+
+
+`;
+export default css;

package/src/tabbed-table-config-panel/TabbedTableConfigPanel.js

@@ -0,0 +1,99 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TabListNext, TabNext, TabNextPanel, TabNextTrigger, TabsNext } from "@salt-ds/lab";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useCallback, useState } from "react";
+import { useEditCalculatedColumn } from "../calculated-column/useEditCalculatedColumn.js";
+import { ColumnPicker } from "../column-picker/ColumnPicker.js";
+import { ColumnSettingsPanel } from "../column-settings-panel/ColumnSettingsPanel.js";
+import { TableSettingsPanel } from "../table-settings-panel/TableSettingsPanel.js";
+import TabbedTableConfigPanel from "./TabbedTableConfigPanel.css";
+const classBase = "vuuTabbedTableConfigPanel";
+const TabbedTableConfigPanel_TabbedTableConfigPanel = ({ allowCreateCalculatedColumn = false, className, columnModel, config, onDisplayAttributeChange, selectedTab = "table-settings", vuuTable, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-tabbed-table-config-panel",
+        css: TabbedTableConfigPanel,
+        window: targetWindow
+    });
+    const [columns, setColumns] = useState([]);
+    const [value, setValue] = useState(selectedTab);
+    const handleChange = useCallback((_e, value)=>{
+        setValue(value);
+    }, []);
+    const handleSelectionChange = useCallback((_e, selectedItems)=>{
+        setColumns(selectedItems);
+    }, []);
+    const handleSaveCalculatedColumn = useCallback((column)=>{
+        setColumns([
+            column
+        ]);
+    }, []);
+    const { onCreateCalculatedColumn, onEditCalculatedColumn } = useEditCalculatedColumn({
+        columnModel,
+        calculatedColumn: columns[0],
+        onSaveColumn: handleSaveCalculatedColumn,
+        vuuTable
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        children: /*#__PURE__*/ jsxs(TabsNext, {
+            onChange: handleChange,
+            value: value,
+            children: [
+                /*#__PURE__*/ jsxs(TabListNext, {
+                    appearance: "transparent",
+                    children: [
+                        /*#__PURE__*/ jsx(TabNext, {
+                            value: "table-settings",
+                            children: /*#__PURE__*/ jsx(TabNextTrigger, {
+                                children: "Table settings"
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(TabNext, {
+                            value: "table-columns",
+                            children: /*#__PURE__*/ jsx(TabNextTrigger, {
+                                children: "Table columns"
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(TabNext, {
+                            disabled: 0 === columns.length,
+                            value: "column-settings",
+                            children: /*#__PURE__*/ jsx(TabNextTrigger, {
+                                children: "Column settings"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx(TabNextPanel, {
+                    value: "table-settings",
+                    children: /*#__PURE__*/ jsx(TableSettingsPanel, {
+                        onDisplayAttributeChange: onDisplayAttributeChange,
+                        tableDisplayAttributes: config
+                    })
+                }),
+                /*#__PURE__*/ jsx(TabNextPanel, {
+                    value: "table-columns",
+                    children: /*#__PURE__*/ jsx(ColumnPicker, {
+                        allowCreateCalculatedColumn: allowCreateCalculatedColumn,
+                        columnModel: columnModel,
+                        onClickCreateCalculatedColumn: onCreateCalculatedColumn,
+                        onSelectionChange: handleSelectionChange,
+                        selected: columns
+                    })
+                }),
+                /*#__PURE__*/ jsx(TabNextPanel, {
+                    value: "column-settings",
+                    children: columns.length > 0 ? /*#__PURE__*/ jsx(ColumnSettingsPanel, {
+                        column: columns[0],
+                        columnModel: columnModel,
+                        onClickEditCalculatedColumn: onEditCalculatedColumn
+                    }) : null
+                })
+            ]
+        })
+    });
+};
+export { TabbedTableConfigPanel_TabbedTableConfigPanel as TabbedTableConfigPanel };

package/src/tabbed-table-config-panel/TabbedTableSettingsAction.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { IconButton } from "@vuu-ui/vuu-ui-controls";
+import { useCallback } from "react";
+import { useTabbedTableConfigPanel } from "./useTabbedTableConfigPanel.js";
+const TabbedTableSettingsAction = ({ allowCreateCalculatedColumn, appearance = "transparent", columnModel, config, icon = "settings", onDisplayAttributeChange, sentiment = "neutral", vuuTable, ...IconButtonProps })=>{
+    const { showTabbedTableConfigPanel } = useTabbedTableConfigPanel({
+        allowCreateCalculatedColumn,
+        columnModel,
+        config,
+        onDisplayAttributeChange,
+        vuuTable
+    });
+    const handleClick = useCallback(()=>{
+        showTabbedTableConfigPanel();
+    }, [
+        showTabbedTableConfigPanel
+    ]);
+    return /*#__PURE__*/ jsx(IconButton, {
+        ...IconButtonProps,
+        appearance: appearance,
+        "data-action": "table-settings",
+        icon: icon,
+        onClick: handleClick,
+        sentiment: sentiment,
+        size: 20
+    });
+};
+export { TabbedTableSettingsAction };

package/src/tabbed-table-config-panel/useTabbedTableConfigPanel.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
+import { useContextPanel } from "@vuu-ui/vuu-ui-controls";
+import { TabbedTableConfigPanel } from "./TabbedTableConfigPanel.js";
+const useTabbedTableConfigPanel = ({ allowCreateCalculatedColumn, columnModel, config, onDisplayAttributeChange, vuuTable })=>{
+    const showContextPanel = useContextPanel();
+    const contextPanelShowing = useRef(false);
+    const showTabbedTableConfigPanel = useCallback((title = "Table settings")=>{
+        contextPanelShowing.current = true;
+        showContextPanel(/*#__PURE__*/ jsx(TabbedTableConfigPanel, {
+            allowCreateCalculatedColumn: allowCreateCalculatedColumn,
+            columnModel: columnModel,
+            config: config,
+            onDisplayAttributeChange: onDisplayAttributeChange,
+            vuuTable: vuuTable
+        }), title);
+    }, [
+        allowCreateCalculatedColumn,
+        columnModel,
+        config,
+        onDisplayAttributeChange,
+        showContextPanel,
+        vuuTable
+    ]);
+    return {
+        showTabbedTableConfigPanel
+    };
+};
+export { useTabbedTableConfigPanel };

package/src/table-footer/TableFooter.css.js

@@ -0,0 +1,22 @@
+const css = `
+.vuuTableFooter {
+  background-color: var(--salt-container-secondary-background);
+  --table-footer-height: var(--vuuTableFooter-height, 32px);
+  flex: 0 0 var(--table-footer-height);
+  height: var(--table-footer-height);
+  grid-template: "panel-start panel-center panel-end"
+  / 1fr 1fr 1fr;
+  display: grid;
+
+  & .vuuTableFooterTray {
+    margin: 0 var(--salt-spacing-200);
+    grid-area: panel-end;
+    justify-self: end;
+    align-items: center;
+    display: flex;
+  }
+}
+
+
+`;
+export default css;

package/src/table-footer/TableFooter.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import TableFooter from "./TableFooter.css";
+const classBase = "vuuTableFooter";
+const TableFooterTray = ({ children })=>/*#__PURE__*/ jsx("div", {
+        className: `${classBase}Tray`,
+        children: children
+    });
+const TableFooter_TableFooter = ({ children, className, onInvokeAction, tooltrayActions, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-table-footer",
+        css: TableFooter,
+        window: targetWindow
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        children: [
+            children,
+            tooltrayActions ? /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-tooltray`,
+                children: tooltrayActions
+            }) : null
+        ]
+    });
+};
+export { TableFooterTray, TableFooter_TableFooter as TableFooter };

package/src/table-provider/TableProvider.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const NullMenuActionHandler = (menuItemId)=>{
+    console.log(`[TableContext] no menu action handler installed (menuItemHandler invoked with ${menuItemId})`);
+    return false;
+};
+const NullDataSource = {};
+const TableContext = /*#__PURE__*/ createContext({
+    dataSource: NullDataSource,
+    menuActionHandler: NullMenuActionHandler
+});
+const TableProvider = ({ children, dataSource, menuActionHandler, rowActionHandlers })=>/*#__PURE__*/ jsx(TableContext.Provider, {
+        value: {
+            dataSource,
+            menuActionHandler,
+            rowActionHandlers
+        },
+        children: children
+    });
+function useTableContext(throwIfNoDataSource = false) {
+    const { dataSource, menuActionHandler } = useContext(TableContext);
+    if (dataSource !== NullDataSource || menuActionHandler != NullMenuActionHandler || !throwIfNoDataSource) return {
+        dataSource,
+        menuActionHandler
+    };
+    throw Error("[TableProvider] no DataSourceProvider has been declared");
+}
+const useRowAction = (actionId)=>{
+    const { rowActionHandlers } = useContext(TableContext);
+    if (rowActionHandlers?.[actionId]) return rowActionHandlers[actionId];
+    throw Error(`[TableProvider] useRowAction, no action configured #${actionId}`);
+};
+export { TableContext, TableProvider, useRowAction, useTableContext };