@vuu-ui/vuu-table 2.1.18 → 2.1.19-beta.2

package/src/header-cell/HeaderCell.mjs

@@ -0,0 +1,126 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox, useForkRef } from "@salt-ds/core";
+import { ColumnMenu } from "@vuu-ui/vuu-table-extras";
+import { isTypeDescriptor, useSortable } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { useCallback, useMemo, useRef } from "react";
+import { SortIndicator } from "../column-header-pill/index.mjs";
+import { ColumnResizer, useTableColumnResize } from "../column-resizing/index.mjs";
+import { useCell } from "../useCell.mjs";
+const classBase = "vuuTableHeaderCell";
+const doNothing = ()=>({
+        ref: {
+            current: null
+        }
+    });
+const HeaderCell = ({ allowDragColumnHeader = true, allowSelectAll, allRowsSelected, className: classNameProp, column, id, index, onCheckBoxColumnHeaderClick, onClick, onResize, showColumnHeaderMenus = true, ...htmlAttributes })=>{
+    const dragDropSortHook = allowDragColumnHeader ? useSortable : doNothing;
+    const { ref: sortableRef } = dragDropSortHook({
+        id,
+        index
+    });
+    const { allowColumnHeaderMenu = true, HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;
+    const rootRef = useRef(null);
+    const { isResizing, ...resizeProps } = useTableColumnResize({
+        column,
+        onResize,
+        rootRef
+    });
+    const handleCheckBoxClick = useCallback((e)=>{
+        e.stopPropagation();
+        onCheckBoxColumnHeaderClick?.();
+    }, [
+        onCheckBoxColumnHeaderClick
+    ]);
+    const headerItems = useMemo(()=>{
+        const renderCheckbox = allowSelectAll && column.isSystemColumn && isTypeDescriptor(column.type) && "checkbox" === column.type.name;
+        if (renderCheckbox) return [
+            /*#__PURE__*/ jsx(Checkbox, {
+                checked: allRowsSelected,
+                className: "vuuCheckboxRowSelector",
+                onClick: handleCheckBoxClick
+            }, "checkbox")
+        ];
+        {
+            const sortIndicator = /*#__PURE__*/ jsx(SortIndicator, {
+                column: column
+            });
+            const columnLabel = HeaderCellLabelRenderer ? /*#__PURE__*/ jsx(HeaderCellLabelRenderer, {
+                className: `${classBase}-label`,
+                column: column
+            }) : /*#__PURE__*/ jsx("div", {
+                className: `${classBase}-label`,
+                children: column.label ?? column.name
+            });
+            const columnContent = HeaderCellContentRenderer ? [
+                /*#__PURE__*/ jsx(HeaderCellContentRenderer, {
+                    column: column
+                }, "content")
+            ] : [];
+            if (!showColumnHeaderMenus || !allowColumnHeaderMenu) return [
+                columnLabel,
+                sortIndicator,
+                columnContent
+            ];
+            {
+                const menuPermissions = true === showColumnHeaderMenus ? void 0 : showColumnHeaderMenus;
+                const columnMenu = /*#__PURE__*/ jsx(ColumnMenu, {
+                    column: column,
+                    menuPermissions: menuPermissions
+                });
+                return [
+                    columnLabel,
+                    columnContent,
+                    sortIndicator,
+                    columnMenu
+                ];
+            }
+        }
+    }, [
+        HeaderCellContentRenderer,
+        HeaderCellLabelRenderer,
+        allRowsSelected,
+        allowColumnHeaderMenu,
+        allowSelectAll,
+        column,
+        handleCheckBoxClick,
+        showColumnHeaderMenus
+    ]);
+    const handleClick = useCallback((evt)=>{
+        isResizing || onClick?.(evt);
+    }, [
+        isResizing,
+        onClick
+    ]);
+    const handleKeyDown = useCallback((evt)=>{
+        if ("Enter" === evt.key) onClick?.(evt);
+    }, [
+        onClick
+    ]);
+    const { className, style } = useCell(column, classBase, true);
+    return /*#__PURE__*/ jsxs("div", {
+        ...htmlAttributes,
+        "aria-colindex": column.ariaColIndex,
+        "aria-label": `${column.label ?? column.name} column header`,
+        className: clsx(className, classNameProp, column.status, {
+            [`${classBase}-resizing`]: isResizing,
+            [`${classBase}-selected`]: column.selected,
+            [`${classBase}-noMenu`]: false === showColumnHeaderMenus
+        }),
+        "data-column-name": column.name,
+        "data-index": index,
+        id: id,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        ref: useForkRef(rootRef, sortableRef),
+        role: "columnheader",
+        style: style,
+        children: [
+            ...headerItems,
+            false !== column.resizeable ? /*#__PURE__*/ jsx(ColumnResizer, {
+                ...resizeProps
+            }) : null
+        ]
+    });
+};
+export { HeaderCell };

package/src/header-cell/index.mjs

@@ -0,0 +1,2 @@
+export * from "./GroupHeaderCell.mjs";
+export * from "./HeaderCell.mjs";

package/src/index.mjs

@@ -0,0 +1,20 @@
+export * from "./cell-renderers/index.mjs";
+export * from "./header-cell/index.mjs";
+export * from "./pagination/index.mjs";
+export * from "./Table.mjs";
+export * from "./table-cell/index.mjs";
+export * from "./table-config.mjs";
+export * from "./table-header/index.mjs";
+export * from "./useControlledTableNavigation.mjs";
+export * from "./useEditableCell.mjs";
+export * from "./applyHighlighting.mjs";
+export * from "./useKeyboardNavigation.mjs";
+export * from "./useTableContextMenu.mjs";
+export * from "./useTableModel.mjs";
+export * from "./useTableScroll.mjs";
+export * from "./useTableViewport.mjs";
+export * from "./VirtualColSpan.mjs";
+export { BulkEditPanel } from "./bulk-edit/BulkEditPanel.mjs";
+export { dataRowFactory } from "./data-row/DataRow.mjs";
+export { Row } from "./Row.mjs";
+export { useTableConfig } from "./table-config/useTableConfig.mjs";

package/src/pagination/PaginationControl.css.js

@@ -0,0 +1,18 @@
+const css = `
+.vuuPaginationControl {
+  height: var(--vuuPaginationControl-height, auto);
+  padding: 0 var(--salt-spacing-100);
+  justify-content: flex-end;
+  align-items: center;
+  display: flex;
+
+  & .saltButton {
+    & .saltIcon {
+      display: block !important;
+    }
+  }
+}
+
+
+`;
+export default css;

package/src/pagination/PaginationControl.mjs

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { GoToInput, Pagination, Paginator } from "@salt-ds/core";
+import clsx from "clsx";
+import { usePagination } from "./usePagination.mjs";
+import PaginationControl_0 from "./PaginationControl.css";
+import { forwardRef } from "react";
+const classBase = "vuuPaginationControl";
+const PaginationControl_PaginationControl = /*#__PURE__*/ forwardRef(function({ className, dataSource, ...htmlAttributes }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-table",
+        css: PaginationControl_0,
+        window: targetWindow
+    });
+    const { onPageChange, pageCount } = usePagination({
+        dataSource
+    });
+    return /*#__PURE__*/ jsx("div", {
+        ...htmlAttributes,
+        className: clsx(classBase, className),
+        ref: forwardedRef,
+        children: /*#__PURE__*/ jsxs(Pagination, {
+            count: pageCount,
+            onPageChange: onPageChange,
+            children: [
+                /*#__PURE__*/ jsx(GoToInput, {}),
+                /*#__PURE__*/ jsx(Paginator, {})
+            ]
+        })
+    });
+});
+export { PaginationControl_PaginationControl as PaginationControl };

package/src/pagination/index.mjs

@@ -0,0 +1 @@
+export * from "./PaginationControl.mjs";

package/src/pagination/usePagination.mjs

@@ -0,0 +1,29 @@
+import { useCallback, useMemo, useState } from "react";
+import { Range } from "@vuu-ui/vuu-utils";
+const getPageCount = (dataSource)=>{
+    const { range, size } = dataSource;
+    const pageSize = range.to - range.from;
+    if (pageSize > 0) return Math.ceil(size / pageSize);
+    return 0;
+};
+const usePagination = ({ dataSource })=>{
+    const [pageCount, setPageCount] = useState(getPageCount(dataSource));
+    useMemo(()=>{
+        dataSource.on("page-count", (n)=>setPageCount(n));
+    }, [
+        dataSource
+    ]);
+    const handlePageChange = useCallback((_evt, page)=>{
+        const { range } = dataSource;
+        const pageSize = range.to - range.from;
+        const firstRow = pageSize * (page - 1);
+        dataSource.range = Range(firstRow, firstRow + pageSize);
+    }, [
+        dataSource
+    ]);
+    return {
+        onPageChange: handlePageChange,
+        pageCount
+    };
+};
+export { usePagination };

package/src/table-cell/TableCell.css.js

@@ -0,0 +1,67 @@
+const css = `
+.vuuTableCell {
+  border-right-color: var(--cell-borderColor);
+  white-space: nowrap;
+  outline-offset: -2px;
+  height: 100%;
+  padding: var(--vuuTableCell-padding, 0 11px 0 8px);
+  text-overflow: ellipsis;
+  vertical-align: top;
+  border-right-style: solid;
+  border-right-width: 1px;
+  display: inline-block;
+  overflow: hidden;
+
+  &:has(.vuuCheckboxRowSelector) {
+    text-overflow: unset;
+  }
+}
+
+.vuuTableCell-right {
+  text-align: right;
+}
+
+.vuuTableCell-editable {
+  padding: var(--vuuTableCell-padding-editable, 0px 1px 0 2px);
+  align-items: center;
+  display: inline-flex;
+}
+
+.vuuTableCell:focus-visible {
+  outline: none;
+}
+
+.vuuTableCell-editable:focus-within, .vuuTableCell:focus {
+  border-bottom: none;
+
+  & .saltInput-bordered {
+    outline: solid var(--salt-editable-borderColor-active) 2px;
+    outline-offset: -1px;
+    border-color: #0000;
+  }
+
+  & .saltInput-bordered.vuuEditing {
+    outline: dashed var(--salt-editable-borderColor-active) 2px;
+    outline-offset: -1px;
+  }
+
+  & .vuuTableInputCell-error.saltInput-bordered {
+    outline: dashed var(--salt-status-error-borderColor) 2px;
+  }
+}
+
+.vuuTableRow-selected .vuuTableCell:not(.vuuTableCell-editable):focus {
+  outline: var(--vuuTableCell-outline, solid var(--salt-focused-outlineColor) 2px);
+
+  &:has(.vuuCheckboxRowSelector) {
+    outline: none;
+  }
+}
+
+.vuuTableCell.ContextOpen {
+  outline: var(--vuuTableCell-outline, solid var(--vuuTableCell-contextOpen-outlineColor, var(--salt-focused-outlineColor)) 2px);
+}
+
+
+`;
+export default css;

package/src/table-cell/TableCell.mjs

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { useEditSession } from "@vuu-ui/vuu-utils";
+import { useCallback, useState } from "react";
+import { applyHighlighting } from "../applyHighlighting.mjs";
+import { useCell } from "../useCell.mjs";
+import TableCell from "./TableCell.css";
+const classBase = "vuuTableCell";
+const TableCell_TableCell = ({ column, dataRow, onClick, searchPattern = "" })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-table-cell",
+        css: TableCell,
+        window: targetWindow
+    });
+    const editSession = useEditSession();
+    const { className, style } = useCell(column, classBase, false);
+    const { ariaColIndex, CellRenderer, name, valueFormatter } = column;
+    const [editedDuringCurrentSession, setEditingDuringCurrentSession] = useState(void 0);
+    const handleDataItemEdited = useCallback(async (editState, editPhase)=>{
+        const { isValid = true, previousValue = "", value } = editState;
+        if ("commit" === editPhase && editSession) {
+            const { editedDuringCurrentSession, ...response } = await editSession.commit(dataRow.key, name, previousValue, value, isValid);
+            setEditingDuringCurrentSession(editedDuringCurrentSession);
+            return response;
+        }
+    }, [
+        dataRow.key,
+        editSession,
+        name
+    ]);
+    const handleClick = useCallback((evt)=>{
+        onClick?.(evt, column);
+    }, [
+        column,
+        onClick
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        "aria-colindex": ariaColIndex,
+        className: className,
+        onClick: onClick ? handleClick : void 0,
+        role: "cell",
+        style: style,
+        children: CellRenderer ? /*#__PURE__*/ jsx(CellRenderer, {
+            column: column,
+            dataRow: dataRow,
+            editedDuringCurrentSession: editedDuringCurrentSession,
+            onEdit: handleDataItemEdited,
+            searchPattern: searchPattern
+        }) : applyHighlighting(valueFormatter(dataRow[column.name]), searchPattern)
+    });
+};
+export { TableCell_TableCell as TableCell };

package/src/table-cell/TableGroupCell.css.js

@@ -0,0 +1,91 @@
+const css = `
+.vuuTableGroupCell.vuuTableCell {
+  --group-cell-spacer-width: 20px;
+  border-right-color: var(--vuuTableGroupCell-borderColor, var(--salt-separable-tertiary-borderColor));
+  cursor: pointer;
+  border-right-style: solid;
+  border-right-width: 1px;
+  align-items: center;
+  line-height: 16px;
+  display: inline-flex;
+
+  & .vuuIcon {
+    --vuu-icon-height: 20px;
+    --vuu-icon-width: 20px;
+    margin-right: var(--salt-spacing-100);
+    min-width: 20px;
+  }
+
+  & .vuuToggleIconButton.saltButton {
+    --saltButton-height: 20px;
+    --saltButton-width: 20px;
+  }
+
+  & .vuuTableGroupCell-label {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+}
+
+[aria-level="2"] {
+  --indent: 1;
+
+  &:not([aria-expanded]) {
+    --indent: 2;
+  }
+}
+
+[aria-level="3"] {
+  --indent: 2;
+
+  &:not([aria-expanded]) {
+    --indent: 3;
+  }
+}
+
+[aria-level="4"] {
+  --indent: 3;
+
+  &:not([aria-expanded]) {
+    --indent: 4;
+  }
+}
+
+[aria-level="5"] {
+  --indent: 4;
+}
+
+[aria-level="6"] {
+  --indent: 5;
+}
+
+[aria-level="7"] {
+  --indent: 6;
+}
+
+[aria-level="8"] {
+  --indent: 7;
+}
+
+[aria-level="9"] {
+  --indent: 8;
+}
+
+[aria-level="10"] {
+  --indent: 9;
+}
+
+.vuuTableGroupCell-spacer {
+  min-width: calc(var(--indent, 0) * var(--group-cell-spacer-width));
+  display: inline-block;
+}
+
+.vuuTreeTable {
+  & .vuuTableGroupCell.vuuTableCell {
+    border-right: none;
+  }
+}
+
+
+`;
+export default css;

package/src/table-cell/TableGroupCell.mjs

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon, ToggleIconButton } from "@vuu-ui/vuu-ui-controls";
+import { getGroupIcon, getGroupValue } from "@vuu-ui/vuu-utils";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { useCallback } from "react";
+import { useCell } from "../useCell.mjs";
+import TableCell from "./TableCell.css";
+import TableGroupCell from "./TableGroupCell.css";
+import { applyHighlighting } from "../applyHighlighting.mjs";
+const classBase = "vuuTableGroupCell";
+const TableGroupCell_TableGroupCell = ({ column, dataRow, onClick, searchPattern = "" })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-table-cell",
+        css: TableCell,
+        window: targetWindow
+    });
+    useComponentCssInjection({
+        testId: "vuu-table-group-cell",
+        css: TableGroupCell,
+        window: targetWindow
+    });
+    const { columns } = column;
+    const value = getGroupValue(columns, dataRow);
+    const valueWithHighlighting = applyHighlighting(value || "", searchPattern);
+    const icon = getGroupIcon(columns, dataRow);
+    const { className, style } = useCell(column, classBase);
+    const handleClick = useCallback((evt)=>{
+        onClick?.(evt, column);
+    }, [
+        column,
+        onClick
+    ]);
+    const { childCount, isExpanded, isLeaf } = dataRow;
+    const isLeafNode = isLeaf || 0 == childCount;
+    return /*#__PURE__*/ jsxs("div", {
+        "aria-colindex": 1,
+        className: clsx(className, "vuuTableCell"),
+        role: "cell",
+        style: style,
+        onClick: isLeafNode ? void 0 : handleClick,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                className: `${classBase}-spacer`
+            }),
+            isLeafNode ? null : /*#__PURE__*/ jsx(ToggleIconButton, {
+                isExpanded: isExpanded
+            }),
+            icon ? /*#__PURE__*/ jsx(Icon, {
+                name: icon
+            }) : null,
+            /*#__PURE__*/ jsx("span", {
+                className: `${classBase}-label`,
+                children: valueWithHighlighting
+            })
+        ]
+    });
+};
+export { TableGroupCell_TableGroupCell as TableGroupCell };

package/src/table-cell/index.mjs

@@ -0,0 +1,2 @@
+export * from "./TableCell.mjs";
+export * from "./TableGroupCell.mjs";

package/src/table-config/useTableConfig.mjs

@@ -0,0 +1,49 @@
+import { ColumnModel } from "@vuu-ui/vuu-table-extras";
+import { useCallback, useMemo, useState } from "react";
+const useTableConfig = ({ availableColumns, config: initialTableConfig, dataSource, onTableConfigChange })=>{
+    const [tableConfig, setTableConfig] = useState(initialTableConfig);
+    const handleColumnModelChange = useCallback((columns, changeSource, changeDescriptor)=>{
+        if ("column-picker" === changeSource || "column-settings" === changeSource) {
+            if (changeDescriptor?.type === "calculated-column-added" || changeDescriptor?.type === "column-added") dataSource.columns = dataSource.columns.concat(changeDescriptor.column.name);
+            else if (changeDescriptor?.type === "column-removed") dataSource.columns = dataSource.columns.filter((name)=>name !== changeDescriptor.column.name);
+            let newConfig;
+            setTableConfig((config)=>newConfig = {
+                    ...config,
+                    columns
+                });
+            if (changeDescriptor?.type === "column-removed" || changeDescriptor?.type === "column-added" || changeDescriptor?.type === "calculated-column-added") {
+                if (newConfig) onTableConfigChange?.(newConfig, changeDescriptor);
+            }
+        }
+    }, [
+        dataSource,
+        onTableConfigChange
+    ]);
+    const columnModel = useMemo(()=>{
+        const model = new ColumnModel(availableColumns, tableConfig.columns);
+        model.on("change", handleColumnModelChange);
+        return model;
+    }, [
+        availableColumns,
+        handleColumnModelChange,
+        tableConfig.columns
+    ]);
+    const handleTableConfigChange = useCallback((_config, changeType)=>{
+        if ("column-removed" === changeType.type) columnModel.removeItemFromSelectedColumns(changeType.column.name, "table");
+    }, [
+        columnModel
+    ]);
+    const handleTableDisplayAttributeChange = useCallback((displayAttributes)=>{
+        setTableConfig((config)=>({
+                ...config,
+                ...displayAttributes
+            }));
+    }, []);
+    return {
+        columnModel,
+        onTableDisplayAttributeChange: handleTableDisplayAttributeChange,
+        onTableConfigChange: handleTableConfigChange,
+        tableConfig
+    };
+};
+export { useTableConfig };

package/src/table-config.mjs

@@ -0,0 +1,38 @@
+import { getRuntimeColumnWidth } from "@vuu-ui/vuu-utils";
+const updateTableConfig = (config, action)=>{
+    switch(action.type){
+        case "col-size":
+            {
+                const { columns: runtimeColumns, width } = action;
+                const isFit = "fit" === config.columnLayout;
+                return {
+                    ...config,
+                    columnLayout: isFit ? "manual" : config.columnLayout,
+                    columns: config.columns.map((col)=>{
+                        if (isFit) return col.name === action.column.name ? {
+                            ...col,
+                            width
+                        } : col.width ? col : {
+                            ...col,
+                            width: getRuntimeColumnWidth(col, runtimeColumns)
+                        };
+                        return col.name === action.column.name ? {
+                            ...col,
+                            width: action.width
+                        } : col;
+                    })
+                };
+            }
+        case "column-prop":
+            return {
+                ...config,
+                columns: config.columns.map((col)=>col.name === action.column.name ? {
+                        ...col,
+                        [action.property]: action.value
+                    } : col)
+            };
+        default:
+            return config;
+    }
+};
+export { updateTableConfig };

package/src/table-data-source/DataRowMovingWindow.mjs

@@ -0,0 +1,66 @@
+import { WindowRange } from "@vuu-ui/vuu-utils";
+class DataRowMovingWindow {
+    data;
+    rowCount = 0;
+    #range;
+    constructor({ from, to }){
+        this.#range = new WindowRange(from, to);
+        this.data = new Array(Math.max(0, to - from));
+        this.rowCount = 0;
+    }
+    setRowCount = (rowCount)=>{
+        if (rowCount < this.data.length) this.data.length = rowCount;
+        this.rowCount = rowCount;
+    };
+    add(data) {
+        const { index } = data;
+        if (this.isWithinRange(index)) {
+            const internalIndex = index - this.#range.from;
+            this.data[internalIndex] = data;
+        }
+    }
+    getAtIndex(index) {
+        return this.#range.isWithin(index) && null != this.data[index - this.#range.from] ? this.data[index - this.#range.from] : void 0;
+    }
+    getByKey(key) {
+        return this.data.find((row)=>row.key === key);
+    }
+    isWithinRange(index) {
+        return index < this.rowCount && this.#range.isWithin(index);
+    }
+    setRange({ from, to }) {
+        if (from !== this.#range.from || to !== this.#range.to) {
+            const [overlapFrom, overlapTo] = this.#range.overlap(from, to);
+            const newData = new Array(Math.max(0, to - from));
+            for(let i = overlapFrom; i < overlapTo; i++){
+                const data = this.getAtIndex(i);
+                if (data) {
+                    const index = i - from;
+                    newData[index] = data;
+                }
+            }
+            this.data = newData;
+            this.#range.from = from;
+            this.#range.to = to;
+        }
+    }
+    getSelectedRows() {
+        return this.data.filter((dataRow)=>dataRow.isSelected);
+    }
+    get hasData() {
+        return this.data.some((d)=>void 0 !== d);
+    }
+    get firstRow() {
+        for(let i = 0; i < this.data.length; i++)if (this.data[i]) return this.data[i];
+        throw Error("[DataRowMovingWinddow] firstRow, no data");
+    }
+    get range() {
+        return this.#range;
+    }
+    get hasAllRowsWithinRange() {
+        const { from, to } = this.#range;
+        for(let i = from; i < to; i++)if (void 0 === this.getAtIndex(i)) return false;
+        return true;
+    }
+}
+export { DataRowMovingWindow };