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

package/src/useCellFocus.mjs

@@ -0,0 +1,112 @@
+import { useCallback } from "react";
+import { dataCellQuery, getTableCell, headerCellQuery } from "./table-dom-utils.mjs";
+import { isArrowKey, queryClosest } from "@vuu-ui/vuu-utils";
+const getCellPosition = (el)=>{
+    const top = parseInt(el.parentElement?.style.top ?? "-1");
+    return {
+        top
+    };
+};
+const isDifferentCellPosition = (currentPos, newPos)=>{
+    if (void 0 === currentPos) return true;
+    return currentPos[0] !== newPos[0] || currentPos[1] !== newPos[1];
+};
+const useCellFocus = ({ cellFocusStateRef, containerRef, disableFocus = false, requestScroll })=>{
+    const focusCellPlaceholderRef = useCallback((el)=>{
+        cellFocusStateRef.current.placeholderEl = el;
+    }, [
+        cellFocusStateRef
+    ]);
+    const focusCell = useCallback((cellPos)=>{
+        if (containerRef.current) {
+            const { current: state } = cellFocusStateRef;
+            if (isDifferentCellPosition(state.cellPos, cellPos)) {
+                const activeCell = getTableCell(containerRef, cellPos);
+                if (activeCell) {
+                    if (activeCell !== state.el) {
+                        state.el?.removeAttribute("tabindex");
+                        activeCell.setAttribute("tabindex", "0");
+                        state.el = activeCell;
+                        state.pos = getCellPosition(activeCell);
+                        state.outsideViewport = false;
+                        if (state.placeholderEl) state.placeholderEl.style.top = `${state.pos.top}px`;
+                    }
+                    state.cellPos = cellPos;
+                    requestScroll?.({
+                        type: "scroll-row",
+                        rowIndex: cellPos[0]
+                    });
+                    activeCell.focus({
+                        preventScroll: true
+                    });
+                }
+            }
+        }
+    }, [
+        cellFocusStateRef,
+        containerRef,
+        requestScroll
+    ]);
+    const setTableBodyRef = useCallback((el)=>{
+        if (el) {
+            const { current: state } = cellFocusStateRef;
+            const table = queryClosest(el, ".vuuTable");
+            if (table) {
+                if (null === state.el && !disableFocus) {
+                    const headerCell = table.querySelector(headerCellQuery(1));
+                    if (headerCell) {
+                        headerCell.setAttribute("tabindex", "0");
+                        state.cellPos = [
+                            1,
+                            1
+                        ];
+                        state.el = headerCell;
+                        state.pos = {
+                            top: -20
+                        };
+                        if (state.placeholderEl) state.placeholderEl.style.top = "-20px";
+                    } else {
+                        const cell = table.querySelector(dataCellQuery(0, 0));
+                        if (cell) {
+                            cell.setAttribute("tabindex", "0");
+                            state.cellPos = [
+                                1,
+                                1
+                            ];
+                            state.el = cell;
+                            state.pos = {
+                                top: 0
+                            };
+                            if (state.placeholderEl) state.placeholderEl.style.top = "0px";
+                        }
+                    }
+                }
+            }
+        }
+    }, [
+        cellFocusStateRef,
+        disableFocus
+    ]);
+    const focusCellPlaceholderKeyDown = useCallback((evt)=>{
+        const { outsideViewport, pos } = cellFocusStateRef.current;
+        if (pos && isArrowKey(evt.key)) if ("above" === outsideViewport) requestScroll?.({
+            type: "scroll-top",
+            scrollPos: pos.top
+        });
+        else if ("below" === outsideViewport) requestScroll?.({
+            type: "scroll-bottom",
+            scrollPos: pos.top
+        });
+        else throw Error("cellFocusPlaceholder should not have focus if inside viewport");
+    }, [
+        cellFocusStateRef,
+        requestScroll
+    ]);
+    return {
+        focusCell,
+        focusCellPlaceholderKeyDown,
+        focusCellPlaceholderRef,
+        setTableBodyRef
+    };
+};
+export { useCellFocus };

package/src/useControlledTableNavigation.mjs

@@ -0,0 +1,34 @@
+import { dispatchMouseEvent, useStateRef } from "@vuu-ui/vuu-utils";
+import { useCallback, useRef } from "react";
+const isRowSelectionKey = (key)=>"Enter" === key || " " === key;
+const useControlledTableNavigation = (initialValue, rowCount)=>{
+    const tableRef = useRef(null);
+    const [highlightedIndexRef, setHighlightedIndex] = useStateRef(initialValue);
+    const handleKeyDown = useCallback((e)=>{
+        if ("ArrowDown" === e.key) setHighlightedIndex((index = -1)=>Math.min(rowCount - 1, index + 1));
+        else if ("ArrowUp" === e.key) setHighlightedIndex((index = -1)=>Math.max(0, index - 1));
+        else if (isRowSelectionKey(e.key)) {
+            const { current: rowIdx } = highlightedIndexRef;
+            if ("number" == typeof rowIdx) {
+                const rowEl = tableRef.current?.querySelector(`[aria-rowindex="${rowIdx + 1}"]`);
+                if (rowEl) dispatchMouseEvent(rowEl, "click");
+            }
+        }
+    }, [
+        highlightedIndexRef,
+        rowCount,
+        setHighlightedIndex
+    ]);
+    const handleHighlight = useCallback((idx)=>{
+        setHighlightedIndex(idx);
+    }, [
+        setHighlightedIndex
+    ]);
+    return {
+        highlightedIndexRef,
+        onHighlight: handleHighlight,
+        onKeyDown: handleKeyDown,
+        tableRef
+    };
+};
+export { isRowSelectionKey, useControlledTableNavigation };

package/src/useEditableCell.mjs

@@ -0,0 +1,18 @@
+import { queryClosest } from "@vuu-ui/vuu-utils";
+import { useCallback } from "react";
+const useEditableCell = ()=>useCallback((evt)=>{
+        if ("Enter" === evt.key) {
+            const el = evt.target;
+            const inputElement = el.querySelector("input");
+            if (inputElement !== document.activeElement) inputElement?.focus();
+        } else if ("Escape" === evt.key) {
+            const input = queryClosest(evt.target, "input");
+            const cell = queryClosest(input, ".vuuTableCell");
+            if (cell) {
+                cell.tabIndex = 0;
+                cell.focus();
+                evt.stopPropagation();
+            }
+        }
+    }, []);
+export { useEditableCell };

package/src/useInitialValue.mjs

@@ -0,0 +1,6 @@
+import { useMemo, useRef } from "react";
+const useInitialValue = (value)=>{
+    const ref = useRef(value);
+    return useMemo(()=>ref.current, []);
+};
+export { useInitialValue };

package/src/useKeyboardNavigation.mjs

@@ -0,0 +1,275 @@
+import { queryClosest } from "@vuu-ui/vuu-utils";
+import { useControlled } from "@salt-ds/core";
+import { useCallback, useEffect, useRef } from "react";
+import { cellDropdownShowing, closestRowIndex, getAriaCellPos, getFocusedCell, getLevelUp, getNextCellPos, getNextEditableCellPos, getTreeNodeOperation } from "./table-dom-utils.mjs";
+const rowNavigationKeys = new Set([
+    "Home",
+    "End",
+    "PageUp",
+    "PageDown",
+    "ArrowDown",
+    "ArrowUp"
+]);
+const CellLocator = ".vuuTableCell,.vuuTableHeaderCell,.vuuTableGroupHeaderCell";
+const CellControlLocator = ".vuuColumnMenu,.vuuColumnHeaderPill";
+const cellNavigationKeys = new Set(rowNavigationKeys);
+cellNavigationKeys.add("ArrowLeft");
+cellNavigationKeys.add("ArrowRight");
+const isNavigationKey = (key, navigationStyle)=>{
+    switch(navigationStyle){
+        case "cell":
+        case "tree":
+            return cellNavigationKeys.has(key);
+        case "row":
+            return rowNavigationKeys.has(key);
+        default:
+            return false;
+    }
+};
+const focusControlWithinCell = (e, el)=>{
+    if (e.shiftKey && e.key.match(/Arrow(Left|Right)/)) {
+        if (el?.classList.contains("vuuTableHeaderCell")) {
+            const menuButton = el?.querySelector(".vuuColumnMenu");
+            if (menuButton) {
+                menuButton.focus();
+                return true;
+            }
+        } else if (el?.classList.contains("vuuTableGroupHeaderCell")) {
+            const headerPill = el?.querySelector(".vuuColumnHeaderPill");
+            if (headerPill) {
+                headerPill.focus();
+                return true;
+            }
+        } else if (el?.classList.contains("vuuColumnHeaderPill")) {
+            const nextPill = el.parentElement?.nextElementSibling?.firstChild;
+            if (nextPill?.classList.contains("vuuColumnHeaderPill")) {
+                nextPill.focus();
+                return true;
+            }
+            {
+                const removeButton = queryClosest(el, ".vuuTableGroupHeaderCell", true).querySelector(".vuuTableGroupHeaderCell-removeAll");
+                if (removeButton) {
+                    removeButton.focus();
+                    return true;
+                }
+            }
+        }
+    }
+    return false;
+};
+const PageKeys = [
+    "Home",
+    "End",
+    "PageUp",
+    "PageDown"
+];
+const isPagingKey = (key)=>PageKeys.includes(key);
+const useKeyboardNavigation = ({ cellFocusStateRef, columnCount = 0, containerRef, defaultHighlightedIndex, disableHighlightOnFocus, editSessionInProgress, focusCell, headerCount, highlightedIndex: highlightedIndexProp, navigationStyle, requestScroll, onHighlight, onToggleGroup, rowCount = 0, viewportRowCount })=>{
+    const highlightedIndexRef = useRef(void 0);
+    const [highlightedIndex, setHighlightedIdx] = useControlled({
+        controlled: highlightedIndexProp,
+        default: defaultHighlightedIndex,
+        name: "UseKeyboardNavigation"
+    });
+    highlightedIndexRef.current = highlightedIndex;
+    const maxRowIndex = rowCount + headerCount;
+    const setHighlightedIndex = useCallback((idx)=>{
+        onHighlight?.(idx);
+        setHighlightedIdx(idx);
+        highlightedIndexRef.current = idx;
+    }, [
+        onHighlight,
+        setHighlightedIdx
+    ]);
+    const setActiveCell = useCallback((rowIdx, colIdx)=>{
+        const pos = [
+            rowIdx,
+            colIdx
+        ];
+        if ("row" === navigationStyle) setHighlightedIdx(rowIdx);
+        else focusCell(pos);
+    }, [
+        focusCell,
+        navigationStyle,
+        setHighlightedIdx
+    ]);
+    const nextPageItemIdx = useCallback((key, [rowIdx, colIdx])=>new Promise((resolve)=>{
+            let newRowIdx = rowIdx;
+            switch(key){
+                case "PageDown":
+                    newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);
+                    if (newRowIdx !== rowIdx) requestScroll?.({
+                        type: "scroll-page",
+                        direction: "down"
+                    });
+                    break;
+                case "PageUp":
+                    newRowIdx = Math.max(0, rowIdx - viewportRowCount);
+                    if (newRowIdx !== rowIdx) requestScroll?.({
+                        type: "scroll-page",
+                        direction: "up"
+                    });
+                    break;
+                case "Home":
+                    newRowIdx = headerCount + 1;
+                    if (newRowIdx !== rowIdx) requestScroll?.({
+                        type: "scroll-end",
+                        direction: "home"
+                    });
+                    break;
+                case "End":
+                    newRowIdx = rowCount + headerCount;
+                    if (newRowIdx !== rowIdx) requestScroll?.({
+                        type: "scroll-end",
+                        direction: "end"
+                    });
+                    break;
+            }
+            setTimeout(()=>{
+                resolve([
+                    newRowIdx,
+                    colIdx
+                ]);
+            }, 35);
+        }), [
+        headerCount,
+        requestScroll,
+        rowCount,
+        viewportRowCount
+    ]);
+    const handleFocus = useCallback(()=>{
+        if (true !== disableHighlightOnFocus) {
+            if (containerRef.current?.contains(document.activeElement)) {
+                const focusedCell = getFocusedCell(document.activeElement);
+                if (focusedCell) {
+                    cellFocusStateRef.current.cell = focusedCell;
+                    if ("row" === navigationStyle) setHighlightedIdx(cellFocusStateRef.current.cellPos?.[0]);
+                }
+            }
+        }
+    }, [
+        disableHighlightOnFocus,
+        containerRef,
+        cellFocusStateRef,
+        navigationStyle,
+        setHighlightedIdx
+    ]);
+    const navigateChildItems = useCallback(async (navigationStyle = "cell", key, shiftKey = false)=>{
+        const { cellPos } = cellFocusStateRef.current;
+        if (void 0 === cellPos) throw Error("navigateChildItems called before cellPos is set");
+        const [rowIdx, colIdx] = cellPos;
+        let nextRowIdx = -1, nextColIdx = -1;
+        if (isPagingKey(key)) [nextRowIdx, nextColIdx] = await nextPageItemIdx(key, cellPos);
+        else {
+            const treeNodeOperation = getTreeNodeOperation(containerRef, navigationStyle, cellPos, key, shiftKey);
+            if ("expand" === treeNodeOperation || "collapse" === treeNodeOperation) onToggleGroup(treeNodeOperation, rowIdx - headerCount - 1);
+            else if ("level-up" === treeNodeOperation) [nextRowIdx, nextColIdx] = getLevelUp(containerRef, cellPos);
+            else if (editSessionInProgress) [nextRowIdx, nextColIdx] = getNextEditableCellPos(containerRef, key, cellPos, columnCount, maxRowIndex);
+            else [nextRowIdx, nextColIdx] = getNextCellPos(key, cellPos, columnCount, maxRowIndex);
+        }
+        if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {
+            setActiveCell(nextRowIdx, nextColIdx);
+            setHighlightedIndex(nextRowIdx);
+        }
+    }, [
+        cellFocusStateRef,
+        nextPageItemIdx,
+        containerRef,
+        editSessionInProgress,
+        onToggleGroup,
+        headerCount,
+        columnCount,
+        maxRowIndex,
+        setActiveCell,
+        setHighlightedIndex
+    ]);
+    const scrollRowIntoViewIfNecessary = useCallback((rowIndex)=>{
+        requestScroll?.({
+            type: "scroll-row",
+            rowIndex
+        });
+    }, [
+        requestScroll
+    ]);
+    const moveHighlightedRow = useCallback(async (key)=>{
+        const { current: highlighted } = highlightedIndexRef;
+        const [nextRowIdx] = isPagingKey(key) ? await nextPageItemIdx(key, [
+            highlighted ?? -1,
+            0
+        ]) : getNextCellPos(key, [
+            highlighted ?? -1,
+            0
+        ], columnCount, maxRowIndex);
+        if (nextRowIdx !== highlighted) {
+            setHighlightedIndex(nextRowIdx);
+            scrollRowIntoViewIfNecessary(nextRowIdx);
+        }
+    }, [
+        columnCount,
+        maxRowIndex,
+        nextPageItemIdx,
+        scrollRowIntoViewIfNecessary,
+        setHighlightedIndex
+    ]);
+    useEffect(()=>{
+        if (void 0 !== highlightedIndexProp && -1 !== highlightedIndexProp) requestAnimationFrame(()=>{
+            scrollRowIntoViewIfNecessary(highlightedIndexProp);
+        });
+    }, [
+        highlightedIndexProp,
+        scrollRowIntoViewIfNecessary
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        const cell = queryClosest(e.target, `${CellLocator},${CellControlLocator}`);
+        if (cellDropdownShowing(cell)) return;
+        if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {
+            e.preventDefault();
+            e.stopPropagation();
+            if ("row" === navigationStyle) moveHighlightedRow(e.key);
+            else if ("none" !== navigationStyle) {
+                if (!focusControlWithinCell(e, cell)) navigateChildItems(navigationStyle, e.key, e.shiftKey);
+            }
+        }
+    }, [
+        rowCount,
+        navigationStyle,
+        moveHighlightedRow,
+        navigateChildItems
+    ]);
+    const handleClick = useCallback((evt)=>{
+        const target = queryClosest(evt.target, CellLocator);
+        const focusedCell = getFocusedCell(target);
+        if (focusedCell) {
+            const [rowIdx, colIdx] = getAriaCellPos(focusedCell);
+            setActiveCell(rowIdx, colIdx);
+        }
+    }, [
+        setActiveCell
+    ]);
+    const handleMouseLeave = useCallback(()=>{
+        setHighlightedIndex(-1);
+    }, [
+        setHighlightedIndex
+    ]);
+    const handleMouseMove = useCallback((evt)=>{
+        const rowIdx = closestRowIndex(evt.target);
+        if (-1 !== rowIdx && rowIdx !== highlightedIndexRef.current) setHighlightedIndex(rowIdx);
+    }, [
+        setHighlightedIndex
+    ]);
+    const navigateCell = useCallback(()=>{
+        navigateChildItems("cell", "ArrowDown");
+    }, [
+        navigateChildItems
+    ]);
+    return {
+        highlightedIndexRef,
+        navigateCell,
+        onClick: handleClick,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onMouseLeave: "row" === navigationStyle ? handleMouseLeave : void 0,
+        onMouseMove: "row" === navigationStyle ? handleMouseMove : void 0
+    };
+};
+export { isNavigationKey, isPagingKey, useKeyboardNavigation };

package/src/useMeasuredHeight.mjs

@@ -0,0 +1,44 @@
+import { isValidNumber } from "@vuu-ui/vuu-utils";
+import { useCallback, useMemo, useRef, useState } from "react";
+const useMeasuredHeight = ({ onHeightMeasured, height: heightProp = 0 })=>{
+    const [measuredHeight, setMeasuredHeight] = useState(heightProp);
+    const lastMeasuredHeight = useRef(-1);
+    useMemo(()=>{
+        if (0 !== heightProp) setMeasuredHeight(heightProp);
+    }, [
+        heightProp
+    ]);
+    const resizeObserver = useMemo(()=>new ResizeObserver((entries)=>{
+            for (const entry of entries){
+                const [{ blockSize: measuredSize }] = entry.borderBoxSize;
+                const newHeight = Math.round(measuredSize);
+                if (lastMeasuredHeight.current !== newHeight) {
+                    if (isValidNumber(newHeight)) {
+                        lastMeasuredHeight.current = newHeight;
+                        setMeasuredHeight(newHeight);
+                        onHeightMeasured?.(newHeight);
+                    }
+                }
+            }
+        }), [
+        onHeightMeasured
+    ]);
+    const measuredRef = useCallback((el)=>{
+        if (el) {
+            if (0 === heightProp) {
+                const { height } = el.getBoundingClientRect();
+                resizeObserver.observe(el);
+                const measuredHeight = Math.round(height);
+                setMeasuredHeight(measuredHeight);
+            }
+        } else resizeObserver.disconnect();
+    }, [
+        resizeObserver,
+        heightProp
+    ]);
+    return {
+        measuredHeight,
+        measuredRef
+    };
+};
+export { useMeasuredHeight };

package/src/useResizeObserver.mjs

@@ -0,0 +1,118 @@
+import { useCallback, useEffect, useRef } from "react";
+const WidthHeight = [
+    "height",
+    "width"
+];
+const WidthOnly = [
+    "width"
+];
+const observedMap = new Map();
+const getTargetSize = (element, size, dimension)=>{
+    switch(dimension){
+        case "height":
+            return size.height;
+        case "clientHeight":
+            return element.clientHeight;
+        case "clientWidth":
+            return element.clientWidth;
+        case "contentHeight":
+            return size.contentHeight;
+        case "contentWidth":
+            return size.contentWidth;
+        case "scrollHeight":
+            return Math.ceil(element.scrollHeight);
+        case "scrollWidth":
+            return Math.ceil(element.scrollWidth);
+        case "width":
+            return size.width;
+        default:
+            return 0;
+    }
+};
+const resizeObserver = new ResizeObserver((entries)=>{
+    for (const entry of entries){
+        const { target, borderBoxSize, contentBoxSize } = entry;
+        const observedTarget = observedMap.get(target);
+        if (observedTarget) {
+            const [{ blockSize: height, inlineSize: width }] = borderBoxSize;
+            const [{ blockSize: contentHeight, inlineSize: contentWidth }] = contentBoxSize;
+            const { onResize, measurements } = observedTarget;
+            let sizeChanged = false;
+            for (const [dimension, size] of Object.entries(measurements)){
+                const newSize = getTargetSize(target, {
+                    height,
+                    width,
+                    contentHeight,
+                    contentWidth
+                }, dimension);
+                if (newSize !== size) {
+                    sizeChanged = true;
+                    measurements[dimension] = newSize;
+                }
+            }
+            if (sizeChanged) onResize && onResize(measurements);
+        }
+    }
+});
+function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
+    const dimensionsRef = useRef(dimensions);
+    const measure = useCallback((target)=>{
+        const { width, height } = target.getBoundingClientRect();
+        const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
+        return dimensionsRef.current.reduce((map, dim)=>{
+            map[dim] = getTargetSize(target, {
+                width,
+                height,
+                contentHeight,
+                contentWidth
+            }, dim);
+            return map;
+        }, {});
+    }, []);
+    useEffect(()=>{
+        const target = ref.current;
+        async function registerObserver() {
+            observedMap.set(target, {
+                measurements: {}
+            });
+            const observedTarget = observedMap.get(target);
+            if (observedTarget) {
+                const measurements = measure(target);
+                observedTarget.measurements = measurements;
+                resizeObserver.observe(target);
+                if (reportInitialSize) onResize(measurements);
+            } else console.log("%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation", "font-weight:bold; color:red;");
+        }
+        if (target) {
+            if (observedMap.has(target)) throw Error("useResizeObserver attemping to observe same element twice");
+            registerObserver();
+        }
+        return ()=>{
+            if (target && observedMap.has(target)) {
+                resizeObserver.unobserve(target);
+                observedMap.delete(target);
+            }
+        };
+    }, [
+        measure,
+        ref
+    ]);
+    useEffect(()=>{
+        const target = ref.current;
+        const record = observedMap.get(target);
+        if (record) {
+            if (dimensionsRef.current !== dimensions) {
+                dimensionsRef.current = dimensions;
+                const measurements = measure(target);
+                record.measurements = measurements;
+            }
+            record.onResize = onResize;
+        }
+    }, [
+        dimensions,
+        measure,
+        ref,
+        onResize
+    ]);
+}
+export { WidthHeight, WidthOnly, useResizeObserver };

package/src/useRowClassNameGenerators.mjs

@@ -0,0 +1,21 @@
+import { getRowClassNameGenerator } from "@vuu-ui/vuu-utils";
+import { useMemo } from "react";
+const createClassNameGenerator = (ids)=>{
+    const functions = [];
+    ids?.forEach((id)=>{
+        const fn = getRowClassNameGenerator(id);
+        if (fn) functions.push(fn.fn);
+    });
+    return (dataRow)=>{
+        const classNames = [];
+        functions?.forEach((fn)=>{
+            const className = fn(dataRow);
+            if (className) classNames.push(className);
+        });
+        return classNames.join(" ");
+    };
+};
+const useRowClassNameGenerators = ({ rowClassNameGenerators })=>useMemo(()=>createClassNameGenerator(rowClassNameGenerators), [
+        rowClassNameGenerators
+    ]);
+export { useRowClassNameGenerators };