@vuu-ui/vuu-table-extras 3.0.0-beta.3 → 3.1.0-beta.1

package/src/datasource-stats/DatasourceStats.css.js

@@ -0,0 +1,56 @@
+const css = `
+.vuuDatasourceStats {
+  --datasourceStats-background: var(--vuuDatasourceStats-background);
+  background: var(--datasourceStats-background, var(--salt-container-secondary-background));
+  font-size: var(--vuuDatasourceStats-fontSize, 10px);
+  align-items: center;
+  gap: var(--vuuDatasourceStats-gap, var(--salt-spacing-100));
+  height: var(--vuuDatasourceStats-height, 100%);
+  padding: 0 var(--salt-spacing-200);
+  grid-template: "panel-start panel-center panel-end"
+  / 1fr 1fr 1fr;
+  display: grid;
+
+  &.vuuDatasourceStats-withSelection {
+    --datasourceStats-background: var(--vuuDatasourceStats-withSelection-background, var(--vuuDatasourceStats-background));
+  }
+
+  & .vuuDatasourceStats-statsPanel {
+    align-items: center;
+    gap: var(--salt-spacing-100);
+    width: fit-content;
+    display: flex;
+  }
+
+  & .vuuDatasourceStats-rowStats {
+    grid-area: panel-start;
+    justify-self: flex-start;
+  }
+
+  & .vuuDatasourceStats-selected {
+    margin-left: var(--salt-spacing-100);
+  }
+
+  & .vuuDatasourceStats-label {
+    color: var(--salt-content-secondary-foreground);
+    white-space: nowrap;
+  }
+
+  & .vuuDatasourceStats-range {
+    white-space: nowrap;
+  }
+
+  & .vuuDatasourceStats-value {
+    color: var(--salt-content-primary-foreground);
+  }
+
+  & .vuuDatasourceStats-tooltray {
+    margin: 0 var(--salt-spacing-200);
+    grid-area: panel-end;
+    justify-self: end;
+  }
+}
+
+
+`;
+export default css;

package/src/datasource-stats/DatasourceStats.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useDatasourceStats } from "./useDatasourceStats.js";
+import DatasourceStats from "./DatasourceStats.css";
+const classBase = "vuuDatasourceStats";
+const numberFormatter = new Intl.NumberFormat();
+const DataSourceStats = ({ children, className, dataSource, showRowStats = true, tooltrayActions, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-datasource-stats",
+        css: DatasourceStats,
+        window: targetWindow
+    });
+    const { maxScroll, range, selectedCount, size } = useDatasourceStats({
+        dataSource,
+        showRowStats
+    });
+    const from = numberFormatter.format(range.from + 1);
+    const to = numberFormatter.format(Math.min(range.to, size, maxScroll));
+    const value = numberFormatter.format(size);
+    if (0 === size) return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        children: /*#__PURE__*/ jsx("span", {
+            className: `${classBase}-label`,
+            children: "No Rows to display"
+        })
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className, {
+            [`${classBase}-withSelection`]: selectedCount > 0
+        }),
+        children: [
+            showRowStats ? /*#__PURE__*/ jsxs("div", {
+                className: `${classBase}-statsPanel ${classBase}-rowStats`,
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: `${classBase}-label`,
+                        children: "Row count"
+                    }),
+                    /*#__PURE__*/ jsxs("span", {
+                        className: `${classBase}-range`,
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: `${classBase}-value`,
+                                children: from
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: `${classBase}-label`,
+                                children: "-"
+                            }),
+                            /*#__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: clsx(`${classBase}-label`, `${classBase}-selected`),
+                        children: `${selectedCount.toLocaleString()} selected`
+                    }) : null
+                ]
+            }) : null,
+            selectedCount > 0 ? /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-statsPanel ${classBase}-selectionActions`,
+                children: children
+            }) : null,
+            tooltrayActions ? /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-statsPanel ${classBase}-tooltray`,
+                children: /*#__PURE__*/ jsx("span", {
+                    className: `${classBase}-actions`,
+                    children: tooltrayActions
+                })
+            }) : null
+        ]
+    });
+};
+export { DataSourceStats };

package/src/datasource-stats/useDatasourceStats.js

@@ -0,0 +1,51 @@
+import { formatDate } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useState } from "react";
+const timeFormatter = formatDate({
+    time: "hh:mm:ss"
+});
+const formatTime = (ts)=>{
+    if ("number" == typeof ts) return timeFormatter(new Date(ts));
+};
+const useDatasourceStats = ({ dataSource })=>{
+    const [selectedCount, setSelectedCount] = useState(0);
+    const [range, setRange] = useState(dataSource.range);
+    const [size, setSize] = useState(dataSource.size);
+    const [maxRangeEnd, setMaxRangeEnd] = useState(dataSource.maxRangeEnd ?? Number.MAX_SAFE_INTEGER);
+    const [freezeTime, setFreezeTime] = useState(formatTime(dataSource.freezeTimestamp));
+    const handleFreeze = useCallback((isFrozen, freezeTimestamp)=>{
+        isFrozen ? setFreezeTime(formatTime(freezeTimestamp)) : setFreezeTime(void 0);
+    }, []);
+    const handleRowSelection = useCallback((count)=>{
+        setSelectedCount(count);
+    }, []);
+    const handleSize = useCallback((size, maxRangeEnd = Number.MAX_SAFE_INTEGER)=>{
+        setSize(size);
+        if (maxRangeEnd !== Number.MAX_SAFE_INTEGER) setMaxRangeEnd(maxRangeEnd);
+    }, []);
+    useMemo(()=>{
+        setSize(dataSource.size);
+        dataSource.on("resize", handleSize);
+        dataSource.on("range", setRange);
+        dataSource.on("freeze", handleFreeze);
+        dataSource.on("row-selection", handleRowSelection);
+        return ()=>{
+            dataSource.removeListener("resize", handleSize);
+            dataSource.removeListener("range", setRange);
+            dataSource.removeListener("freeze", handleFreeze);
+            dataSource.removeListener("row-selection", handleRowSelection);
+        };
+    }, [
+        dataSource,
+        handleFreeze,
+        handleRowSelection,
+        handleSize
+    ]);
+    return {
+        range,
+        selectedCount,
+        size,
+        freezeTime,
+        maxScroll: maxRangeEnd
+    };
+};
+export { useDatasourceStats };

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,23 @@
+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 * from "./inline-add-row/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/inline-add-row/InlineAddRow.css.js

@@ -0,0 +1,16 @@
+const css = `
+.vuuInlineAddRow {
+  --row-borderColor: transparent;
+  height: var(--row-height, var(--salt-size-base));
+  padding: 0 var(--table-selection-bookend-width, 4px);
+  display: flex;
+  position: relative;
+
+  & .vuuTableCell {
+    height: 100%;
+  }
+}
+
+
+`;
+export default css;

package/src/inline-add-row/InlineAddRow.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { Row } from "@vuu-ui/vuu-table";
+import clsx from "clsx";
+import { useInlineAddRow } from "./useInlineAddRow.js";
+import InlineAddRow from "./InlineAddRow.css";
+const classBase = "vuuInlineAddRow";
+const InlineAddRow_InlineAddRow = ({ ariaRowIndex, className, columns, style })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-inline-add-row",
+        css: InlineAddRow,
+        window: targetWindow
+    });
+    const { containerRef, dataRow, draftRevision, inlineAddColumns } = useInlineAddRow({
+        columns
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: clsx(classBase, className),
+        ref: containerRef,
+        children: /*#__PURE__*/ jsx(Row, {
+            ariaRowIndex: ariaRowIndex,
+            columns: inlineAddColumns,
+            dataRow: dataRow,
+            offset: 0,
+            searchPattern: "",
+            showBookends: false,
+            style: style,
+            virtualColSpan: 0
+        }, draftRevision)
+    });
+};
+export { InlineAddRow_InlineAddRow as InlineAddRow };

package/src/inline-add-row/index.js

@@ -0,0 +1,2 @@
+export { InlineAddRow } from "./InlineAddRow.js";
+export { useInlineAddRow } from "./useInlineAddRow.js";