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

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

@@ -0,0 +1,177 @@
+import { Range } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { DataRowMovingWindow } from "./DataRowMovingWindow.mjs";
+import { dataRowFactory } from "../data-row/DataRow.mjs";
+const NullDataRow = ()=>({});
+const useDataSource = ({ autoSelectFirstRow, autoSelectRowKey, dataSource, onSizeChange, onSubscribed, renderBufferSize = 0, revealSelected, onSelect, selectionModel, suspenseProps })=>{
+    const [, forceUpdate] = useState(null);
+    const dataRows = useRef([]);
+    const isMounted = useRef(true);
+    const hasUpdated = useRef(false);
+    const rangeRef = useRef(dataSource.range);
+    const dataRowRef = useRef(NullDataRow);
+    const setColumnsRef = useRef(void 0);
+    const totalRowCountRef = useRef(0);
+    const rowAutoSelected = useRef(false);
+    const autoSelect = autoSelectRowKey ?? (autoSelectFirstRow || "single-no-deselect" === selectionModel);
+    const handleConfigChange = useCallback((_config, _range, _confirmed, configChanges)=>{
+        if (configChanges?.filterChanged) rowAutoSelected.current = false;
+    }, []);
+    useEffect(()=>{
+        if (autoSelect) dataSource.on("config", handleConfigChange);
+        return ()=>{
+            if (autoSelect) dataSource.removeListener("config", handleConfigChange);
+        };
+    }, [
+        autoSelect,
+        dataSource,
+        handleConfigChange
+    ]);
+    const dataRowWindow = useMemo(()=>new DataRowMovingWindow(rangeRef.current.withBuffer), []);
+    const handleResume = useCallback(()=>{
+        const { range } = dataSource;
+        if (0 !== range.to) dataRowWindow.setRange(dataSource.range.withBuffer);
+    }, [
+        dataRowWindow,
+        dataSource
+    ]);
+    useEffect(()=>()=>{
+            dataSource.removeListener("resumed", handleResume);
+        }, [
+        dataSource,
+        handleResume
+    ]);
+    const setData = useCallback((updates)=>{
+        const { current: DataRow } = dataRowRef;
+        for (const row of updates)dataRowWindow.add(DataRow(row));
+        dataRows.current = dataRowWindow.data;
+        if (isMounted.current) forceUpdate({});
+    }, [
+        dataRowWindow
+    ]);
+    const selectRow = useCallback((dataRow)=>{
+        const rowKey = dataRow.key;
+        dataSource.select?.({
+            preserveExistingSelection: false,
+            rowKey,
+            type: "SELECT_ROW"
+        });
+        onSelect?.(dataRow);
+    }, [
+        dataSource,
+        onSelect
+    ]);
+    const createDataRow = useCallback((columns, schemaColumns)=>{
+        const [DataRow, setColumns] = dataRowFactory(columns, schemaColumns);
+        dataRowRef.current = DataRow;
+        setColumnsRef.current = setColumns;
+    }, []);
+    const datasourceMessageHandler = useCallback((message)=>{
+        if ("subscribed" === message.type) {
+            createDataRow(message.columns, message.tableSchema.columns);
+            onSubscribed?.(message);
+        } else if ("subscribe-failed" === message.type) console.warn(`subscribe failed ${message.msg}`);
+        else if ("viewport-update" === message.type) {
+            if ("number" == typeof message.size) {
+                onSizeChange?.(message.size);
+                dataRowWindow.setRowCount(message.size);
+                totalRowCountRef.current = message.size;
+            }
+            if (message.rows) {
+                setData(message.rows);
+                if (autoSelect && false === rowAutoSelected.current) {
+                    rowAutoSelected.current = true;
+                    if ("string" == typeof autoSelect) {
+                        const dataRow = dataRowWindow.getByKey(autoSelect);
+                        if (dataRow) selectRow(dataRow);
+                        else console.warn(`[useDataSource] autoSelect row key ${autoSelect} not in viewport`);
+                    } else if (dataRowWindow.hasData) selectRow(dataRowWindow.firstRow);
+                }
+            } else if (0 === message.size) setData([]);
+            else if ("number" == typeof message.size) {
+                dataRows.current = dataRowWindow.data;
+                hasUpdated.current = true;
+            }
+        } else if ("viewport-clear" === message.type) {
+            onSizeChange?.(0);
+            dataRowWindow.setRowCount(0);
+            setData([]);
+            forceUpdate({});
+        } else console.log(`useDataSource unexpected message ${message.type}`);
+    }, [
+        autoSelect,
+        createDataRow,
+        dataRowWindow,
+        onSizeChange,
+        onSubscribed,
+        selectRow,
+        setData
+    ]);
+    const getSelectedRows = useCallback(()=>dataRowWindow.getSelectedRows(), [
+        dataRowWindow
+    ]);
+    useEffect(()=>{
+        if ("disabled" === dataSource.status) dataSource.enable?.(datasourceMessageHandler);
+    }, [
+        dataSource,
+        datasourceMessageHandler
+    ]);
+    useMemo(()=>{
+        setColumnsRef.current?.(dataSource.columns);
+    }, [
+        dataSource.columns
+    ]);
+    const setRange = useCallback((viewportRange)=>{
+        if (!rangeRef.current.equals(viewportRange)) {
+            const range = Range(viewportRange.from, viewportRange.to, renderBufferSize);
+            dataRowWindow.setRange(range.withBuffer);
+            if ("subscribed" !== dataSource.status && "subscribing" !== dataSource.status && "enabling" !== dataSource.status) dataSource?.subscribe({
+                range,
+                revealSelected,
+                selectedKeyValues: autoSelectRowKey ? [
+                    autoSelectRowKey
+                ] : void 0
+            }, datasourceMessageHandler);
+            else dataSource.range = rangeRef.current = range;
+        }
+    }, [
+        autoSelectRowKey,
+        dataRowWindow,
+        dataSource,
+        datasourceMessageHandler,
+        renderBufferSize,
+        revealSelected
+    ]);
+    useEffect(()=>{
+        if ("initialising" !== dataSource.status) {
+            const { columns, tableSchema } = dataSource;
+            if (tableSchema) createDataRow(columns, tableSchema.columns);
+            else throw Error("[useDataSource] a resumed dataSource must have a tableSchema");
+            dataSource.resume?.(datasourceMessageHandler);
+            if (dataSource.range.from > 0) {
+                const { from, to } = rangeRef.current.reset;
+                setRange({
+                    from,
+                    to
+                });
+            }
+        }
+        return ()=>{
+            dataSource.suspend?.(suspenseProps?.escalateToDisable, suspenseProps?.escalateDelay);
+        };
+    }, [
+        createDataRow,
+        dataSource,
+        datasourceMessageHandler,
+        setRange,
+        suspenseProps
+    ]);
+    return {
+        dataRows: dataRows.current,
+        dataRowsRef: dataRows,
+        getSelectedRows,
+        range: rangeRef.current,
+        setRange
+    };
+};
+export { useDataSource };

package/src/table-dom-utils.mjs

@@ -0,0 +1,162 @@
+import { getAriaColIndex, getAriaRowIndex } from "@vuu-ui/vuu-utils";
+const headerCellQuery = (colIdx)=>`.vuuTable-col-headers .vuuTableHeaderCell[aria-colindex='${colIdx}']`;
+const dataCellQuery = (ariaRowIdx, ariaColIdx)=>`.vuuTable-table [aria-rowindex='${ariaRowIdx}'] > [aria-colindex='${ariaColIdx}']`;
+const getLevelUp = (containerRef, cellPos)=>{
+    const cell = getTableCell(containerRef, cellPos);
+    let row = cell?.parentElement;
+    const level = parseInt(row?.ariaLevel ?? "1");
+    if (level > 1) {
+        const targetLevel = `${level - 1}`;
+        while(null !== row && row.ariaLevel !== targetLevel)row = row.previousElementSibling;
+        if (row) {
+            const nextRowIndex = parseInt(row.ariaRowIndex ?? "- 1");
+            if (-1 !== nextRowIndex) return [
+                nextRowIndex,
+                1
+            ];
+        }
+    }
+    return cellPos;
+};
+const getTableCellElement = (containerRef, [rowIdx, colIdx])=>{
+    const cssQuery = dataCellQuery(rowIdx, colIdx);
+    return containerRef.current?.querySelector(cssQuery);
+};
+const getTableCell = (containerRef, cellPos)=>{
+    const cell = getTableCellElement(containerRef, cellPos);
+    if (!cellIsEditable(cell)) return cell;
+    {
+        const focusableContent = cell.querySelector('button,input[type="checkbox"]');
+        return focusableContent || cell;
+    }
+};
+const getHeaderCell = (containerRef, columnName)=>containerRef.current?.querySelector(`.vuuTableHeaderCell[data-column-name="${columnName}"]`);
+const getFocusedCell = (el)=>{
+    if (el?.role == "cell" || el?.role === "columnheader") return el;
+    return el?.closest("[role='columnHeader'],[role='cell']");
+};
+const cellIsEditable = (cell)=>cell?.classList.contains("vuuTableCell-editable");
+const cellDropdownShowing = (cell)=>{
+    if (cellIsEditable(cell)) return cell?.querySelector('.saltDropdown[aria-expanded="true"]') !== null;
+    return false;
+};
+const cellIsGroupCell = (cell)=>cell?.classList.contains("vuuTableGroupCell");
+const rowIsExpanded = (cell)=>{
+    switch(cell.parentElement?.ariaExpanded){
+        case "true":
+            return true;
+        case "false":
+            return false;
+        default:
+            return;
+    }
+};
+const cellIsTextInput = (cell)=>null !== cell.querySelector(".vuuTableInputCell");
+const getRowElementByAriaIndex = (container, rowIndex)=>{
+    if (-1 === rowIndex) return null;
+    {
+        const activeRow = container.querySelector(`[aria-rowindex="${rowIndex}"]`);
+        if (activeRow) return activeRow;
+        throw Error(`getRowElementAtIndex no row found for index index ${rowIndex}`);
+    }
+};
+const getIndexFromCellElement = (cellElement)=>getAriaColIndex(cellElement);
+const getAriaCellPos = (tableCell)=>{
+    const focusedRow = tableCell.closest("[role='row']");
+    return [
+        getAriaRowIndex(focusedRow),
+        getAriaColIndex(tableCell)
+    ];
+};
+const closestRow = (el)=>el.closest('[role="row"]');
+const closestRowIndex = (el)=>getAriaRowIndex(closestRow(el));
+function getNextCellPos(key, [rowIdx, colIdx], columnCount, maxRowIndex) {
+    if ("ArrowUp" === key) {
+        if (rowIdx > -1) return [
+            rowIdx - 1,
+            colIdx
+        ];
+    } else if ("ArrowDown" === key) {
+        if (-1 === rowIdx) return [
+            1,
+            colIdx
+        ];
+        else if (rowIdx !== maxRowIndex) return [
+            rowIdx + 1,
+            colIdx
+        ];
+    } else if ("ArrowRight" === key) {
+        if (colIdx < columnCount) return [
+            rowIdx,
+            colIdx + 1
+        ];
+    } else if ("ArrowLeft" === key) {
+        if (colIdx > 1) return [
+            rowIdx,
+            colIdx - 1
+        ];
+    }
+    return [
+        rowIdx,
+        colIdx
+    ];
+}
+const getNextEditableCellPos = (containerRef, key, cellPos, columnCount, maxRowIndex)=>{
+    let [lastRowIdx, lastColIdx] = cellPos;
+    do {
+        const [nextRowIdx, nextColIdx] = getNextCellPos(key, [
+            lastRowIdx,
+            lastColIdx
+        ], columnCount, maxRowIndex);
+        if (nextRowIdx === lastRowIdx && nextColIdx === lastColIdx) return cellPos;
+        const cell = getTableCellElement(containerRef, [
+            nextRowIdx,
+            nextColIdx
+        ]);
+        if (cellIsEditable(cell)) return [
+            nextRowIdx,
+            nextColIdx
+        ];
+        [lastRowIdx, lastColIdx] = [
+            nextRowIdx,
+            nextColIdx
+        ];
+    }while (true)
+};
+const getTreeNodeOperation = (containerRef, navigationStyle, cellPos, key, shiftKey)=>{
+    const cell = getTableCell(containerRef, cellPos);
+    if ("cell" === navigationStyle && !cellIsGroupCell(cell)) return;
+    if ("cell" == navigationStyle && !shiftKey) return;
+    if (cellIsGroupCell(cell)) {
+        const isExpanded = rowIsExpanded(cell);
+        if (true === isExpanded) {
+            if ("ArrowLeft" === key) return "collapse";
+        } else if (false === isExpanded) {
+            if ("ArrowRight" === key) return "expand";
+            else if ("ArrowLeft" === key) return "level-up";
+        } else if ("ArrowLeft" === key) return "level-up";
+    }
+};
+const NO_SCROLL_NECESSARY = [
+    void 0,
+    void 0
+];
+const howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer = rowEl.closest(".vuuTable-contentContainer"))=>{
+    if (contentContainer) {
+        const viewport = contentContainer?.getBoundingClientRect();
+        const upperBoundary = viewport.top + totalHeaderHeight;
+        const row = rowEl.getBoundingClientRect();
+        if (row) if (row.bottom > viewport.bottom) return [
+            "down",
+            row.bottom - viewport.bottom
+        ];
+        else if (row.top < upperBoundary) return [
+            "up",
+            row.top - upperBoundary
+        ];
+        else return NO_SCROLL_NECESSARY;
+        throw Error("Whats going on, row not found");
+    }
+    throw Error("Whats going on, scrollbar container not found");
+};
+export { cellDropdownShowing, cellIsEditable, cellIsTextInput, closestRowIndex, dataCellQuery, getAriaCellPos, getFocusedCell, getHeaderCell, getIndexFromCellElement, getLevelUp, getNextCellPos, getNextEditableCellPos, getRowElementByAriaIndex, getTableCell, getTableCellElement, getTreeNodeOperation, headerCellQuery, howFarIsRowOutsideViewport };

package/src/table-header/HeaderProvider.mjs

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const HeaderContext = /*#__PURE__*/ createContext({
+    columns: []
+});
+const HeaderProvider = ({ children, columns, virtualColSpan })=>/*#__PURE__*/ jsx(HeaderContext.Provider, {
+        value: {
+            columns,
+            virtualColSpan
+        },
+        children: children
+    });
+const useHeaderProps = ()=>useContext(HeaderContext);
+export { HeaderProvider, useHeaderProps };

package/src/table-header/TableHeader.mjs

@@ -0,0 +1,182 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { DragDropProvider, DragOverlay, KeyboardSensor, PointerSensor, RestrictToHorizontalAxis, isGroupColumn, isNotHidden } from "@vuu-ui/vuu-utils";
+import { cloneElement, isValidElement, memo, useMemo } from "react";
+import { GroupHeaderCell, HeaderCell as index_mjs_HeaderCell } from "../header-cell/index.mjs";
+import { HeaderProvider } from "./HeaderProvider.mjs";
+import { useTableHeader } from "./useTableHeader.mjs";
+import header_cell_HeaderCell from "../header-cell/HeaderCell.css";
+const isHeaderElement = (h)=>/*#__PURE__*/ isValidElement(h);
+const classBase = "vuuTableHeader";
+const TableHeader = /*#__PURE__*/ memo(({ HeaderCell = index_mjs_HeaderCell, allowDragColumnHeader, allowSelectAll, allRowsSelected, columns, customHeader, headings, onCheckBoxColumnHeaderClick, onHeightMeasured, onMoveColumn, onMoveGroupColumn, onRemoveGroupColumn, onResizeColumn, onSortColumn, showBookends, showColumnHeaderMenus, tableConfig, tableId, virtualColSpan = 0 })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-table-header-cell",
+        css: header_cell_HeaderCell,
+        window: targetWindow
+    });
+    const [customHeaders, customHeaderCount] = useMemo(()=>{
+        const offset = headings.length;
+        const createElement = (Component, index)=>/*#__PURE__*/ jsx(Component, {
+                ariaRowIndex: offset + index + 2,
+                ariaRole: "row",
+                columns: columns,
+                virtualColSpan: virtualColSpan
+            }, index);
+        const enrichElementWithAria = (el, rowIndex)=>{
+            const offset = headings.length;
+            return /*#__PURE__*/ cloneElement(el, {
+                "aria-rowindex": rowIndex + offset + 2,
+                ariaRole: "row"
+            });
+        };
+        if (void 0 === customHeader) return [
+            null,
+            0
+        ];
+        if (Array.isArray(customHeader)) {
+            const header = /*#__PURE__*/ jsx(HeaderProvider, {
+                columns: columns,
+                virtualColSpan: virtualColSpan,
+                children: customHeader.map((header, i)=>isHeaderElement(header) ? enrichElementWithAria(header, i) : createElement(header, i))
+            });
+            return [
+                header,
+                customHeader.length
+            ];
+        }
+        if (!isHeaderElement(customHeader)) return [
+            createElement(customHeader, 0),
+            1
+        ];
+        {
+            const header = /*#__PURE__*/ jsx(HeaderProvider, {
+                columns: columns,
+                virtualColSpan: virtualColSpan,
+                children: enrichElementWithAria(customHeader, 0)
+            });
+            return [
+                header,
+                1
+            ];
+        }
+    }, [
+        columns,
+        customHeader,
+        headings.length,
+        virtualColSpan
+    ]);
+    const { dragColumn, onClick, onDragEnd, onDragStart, setContainerRef } = useTableHeader({
+        columns,
+        customHeaderCount,
+        headings,
+        onHeightMeasured,
+        onMoveColumn,
+        onSortColumn,
+        tableConfig
+    });
+    const visibleColumns = columns.filter(isNotHidden);
+    return /*#__PURE__*/ jsxs("div", {
+        className: classBase,
+        ref: setContainerRef,
+        role: "rowgroup",
+        children: [
+            headings.map((colHeaders, i)=>/*#__PURE__*/ jsx("div", {
+                    className: "vuuTable-heading",
+                    role: "row",
+                    "aria-rowindex": i + 1,
+                    children: colHeaders.map(({ label, width }, j)=>/*#__PURE__*/ jsx("div", {
+                            className: "vuuTable-headingCell",
+                            style: {
+                                width
+                            },
+                            children: label
+                        }, j))
+                }, i)),
+            /*#__PURE__*/ jsxs(DragDropProvider, {
+                onDragEnd: onDragEnd,
+                onDragStart: onDragStart,
+                modifiers: [
+                    RestrictToHorizontalAxis
+                ],
+                sensors: [
+                    KeyboardSensor.configure({
+                        keyboardCodes: {
+                            start: [
+                                "Space"
+                            ],
+                            cancel: [
+                                "Escape"
+                            ],
+                            end: [
+                                "Space",
+                                "Enter"
+                            ],
+                            left: [
+                                "ArrowLeft"
+                            ],
+                            right: [
+                                "ArrowRight"
+                            ],
+                            up: [],
+                            down: []
+                        }
+                    }),
+                    PointerSensor
+                ],
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "vuuTableColHeaderRow",
+                        role: "row",
+                        "aria-rowindex": headings.length + 1,
+                        children: [
+                            showBookends ? /*#__PURE__*/ jsx("div", {
+                                className: "vuuSelectionDecorator vuuStickyLeft"
+                            }) : null,
+                            visibleColumns.map((col, i)=>{
+                                const allowDragDrop = !!allowDragColumnHeader && !col.pin;
+                                return isGroupColumn(col) ? /*#__PURE__*/ jsx(GroupHeaderCell, {
+                                    column: col,
+                                    id: `${tableId}-${col.name}`,
+                                    onMoveColumn: onMoveGroupColumn,
+                                    onRemoveColumn: onRemoveGroupColumn,
+                                    onResize: onResizeColumn
+                                }, col.name) : /*#__PURE__*/ jsx(HeaderCell, {
+                                    allowDragColumnHeader: allowDragDrop,
+                                    allowSelectAll: allowSelectAll,
+                                    allRowsSelected: allRowsSelected,
+                                    column: col,
+                                    index: i,
+                                    id: `${tableId}-${col.name}`,
+                                    onCheckBoxColumnHeaderClick: onCheckBoxColumnHeaderClick,
+                                    onClick: onClick,
+                                    onResize: onResizeColumn,
+                                    showColumnHeaderMenus: showColumnHeaderMenus
+                                }, `${col.name}-${allowDragDrop}`);
+                            }),
+                            showBookends ? /*#__PURE__*/ jsx("div", {
+                                className: "vuuSelectionDecorator vuuStickyRight"
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(DragOverlay, {
+                        children: dragColumn ? /*#__PURE__*/ jsx("div", {
+                            id: dragColumn.id,
+                            className: "DragColumn",
+                            children: /*#__PURE__*/ jsx(HeaderCell, {
+                                column: dragColumn.column,
+                                className: "vuuDragging",
+                                id: `${tableId}-${dragColumn.id}-dragging`,
+                                index: -1
+                            })
+                        }) : null
+                    })
+                ]
+            }),
+            customHeaders
+        ]
+    });
+});
+TableHeader.displayName = "TableHeader";
+export { TableHeader };

package/src/table-header/index.mjs

@@ -0,0 +1,2 @@
+export * from "./HeaderProvider.mjs";
+export * from "./TableHeader.mjs";

package/src/table-header/useTableHeader.mjs

@@ -0,0 +1,69 @@
+import { queryClosest, reorderColumnItems, visibleColumnAtIndex } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef, useState } from "react";
+import { useMeasuredHeight } from "../useMeasuredHeight.mjs";
+import { useForkRef } from "@salt-ds/core";
+const useTableHeader = ({ columns, customHeaderCount, headings, onHeightMeasured, onMoveColumn, onSortColumn })=>{
+    const containerRef = useRef(null);
+    const scrollingContainerRef = useRef(null);
+    const [dragColumn, setDragColumn] = useState(null);
+    const handleHeightMeasured = useCallback((height)=>{
+        onHeightMeasured(height, customHeaderCount + headings.length + 1);
+    }, [
+        customHeaderCount,
+        headings,
+        onHeightMeasured
+    ]);
+    const { measuredRef: rowRef } = useMeasuredHeight({
+        onHeightMeasured: handleHeightMeasured
+    });
+    const setContainerRef = useCallback((el)=>{
+        containerRef.current = el;
+        if (el) scrollingContainerRef.current = el.closest(".vuuTable-contentContainer");
+        else scrollingContainerRef.current = null;
+    }, []);
+    const handleDragStart = useCallback((evt)=>{
+        const element = evt.operation.source;
+        const columnName = element.id.split("-").at(-1);
+        const column = columns.find((col)=>col.name === columnName);
+        if (void 0 === column) throw Error(`[useTableHeader] No column '${columnName}'`);
+        setDragColumn({
+            column,
+            id: element.id
+        });
+    }, [
+        columns
+    ]);
+    const handleDragEnd = useCallback(()=>{
+        setTimeout(()=>{
+            const listItems = containerRef.current?.querySelectorAll(".vuuTableHeaderCell");
+            if (listItems && dragColumn?.column) {
+                const orderedColumnNames = Array.from(listItems).map(({ dataset })=>dataset.columnName);
+                onMoveColumn(dragColumn?.column.name, reorderColumnItems(columns, orderedColumnNames));
+            }
+        }, 300);
+    }, [
+        columns,
+        dragColumn,
+        onMoveColumn
+    ]);
+    const handleColumnHeaderClick = useCallback((evt)=>{
+        const headerCell = queryClosest(evt.target, ".vuuTableHeaderCell");
+        const colIdx = parseInt(headerCell?.dataset.index ?? "-1");
+        const column = visibleColumnAtIndex(columns, colIdx);
+        if (column && false !== column.sortable) {
+            const isAdditive = evt.shiftKey;
+            onSortColumn(column, isAdditive);
+        }
+    }, [
+        columns,
+        onSortColumn
+    ]);
+    return {
+        dragColumn,
+        onClick: handleColumnHeaderClick,
+        onDragEnd: handleDragEnd,
+        onDragStart: handleDragStart,
+        setContainerRef: useForkRef(setContainerRef, rowRef)
+    };
+};
+export { useTableHeader };

package/src/useCell.mjs

@@ -0,0 +1,22 @@
+import { getColumnStyle } from "@vuu-ui/vuu-utils";
+import clsx from "clsx";
+import { useMemo } from "react";
+const useCell = (column, classBase, isHeader)=>useMemo(()=>{
+        const className = clsx(classBase, column.className, {
+            vuuPinLeft: "left" === column.pin,
+            vuuPinRight: "right" === column.pin,
+            vuuEndPin: isHeader && column.pinnedWidth,
+            [`${classBase}-editable`]: column.editable,
+            [`${classBase}-right`]: "right" === column.align
+        });
+        const style = getColumnStyle(column);
+        return {
+            className,
+            style
+        };
+    }, [
+        classBase,
+        column,
+        isHeader
+    ]);
+export { useCell };

package/src/useCellEditing.mjs

@@ -0,0 +1,58 @@
+import { isCharacterKey } from "@vuu-ui/vuu-utils";
+import { useCallback } from "react";
+import { cellIsTextInput } from "./table-dom-utils.mjs";
+const useCellEditing = ({ navigate })=>{
+    const commitHandler = useCallback(()=>{
+        navigate();
+    }, [
+        navigate
+    ]);
+    const editInput = useCallback((evt)=>{
+        const cellEl = evt.target;
+        const input = cellEl.matches("input") ? cellEl : cellEl.querySelector("input");
+        if (input) input.focus();
+    }, []);
+    const focusInput = useCallback((evt)=>{
+        const cellEl = evt.target;
+        const input = cellEl.querySelector("input");
+        if (input) input.focus();
+    }, []);
+    const handleKeyDown = useCallback((e)=>{
+        const el = e.target;
+        if (cellIsTextInput(el)) {
+            if (isCharacterKey(e.key)) editInput(e);
+            else if ("Enter" === e.key) focusInput(e);
+        }
+    }, [
+        editInput,
+        focusInput
+    ]);
+    const handleDoubleClick = useCallback((e)=>{
+        const el = e.target;
+        if (el.matches("input") || el.querySelector("input")) {
+            editInput(e);
+            e.stopPropagation();
+        }
+    }, [
+        editInput
+    ]);
+    const handleBlur = useCallback((e)=>{
+        const el = e.target;
+        el.removeEventListener("vuu-commit", commitHandler, true);
+    }, [
+        commitHandler
+    ]);
+    const handleFocus = useCallback((e)=>{
+        const el = e.target;
+        el.addEventListener("vuu-commit", commitHandler, true);
+    }, [
+        commitHandler
+    ]);
+    return {
+        onBlur: handleBlur,
+        onDoubleClick: handleDoubleClick,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown
+    };
+};
+export { useCellEditing };