@navikt/ds-react 8.4.1 → 8.5.1

package/esm/data/table/hooks/useGridCache.js

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useValueAsRef } from "../../../utils/hooks/index.js";
+import { buildTableGridMap } from "../helpers/table-grid-nav.js";
+/**
+ * Manages the table grid cache and observes DOM changes that require grid rebuilding.
+ * Watches for structural changes (rows/cells added/removed) and attribute changes
+ * (colspan, rowspan, hidden, style) that affect grid layout and focusability.
+ */
+function useGridCache(tableRef, enabled) {
+    const gridCacheRef = useRef({
+        grid: null,
+        dirty: true,
+    });
+    const [activeCell, setActiveCell] = useState(null);
+    const activeCellRef = useValueAsRef(activeCell).current;
+    const observerRef = useRef(null);
+    useEffect(() => {
+        if (!tableRef || !enabled) {
+            return;
+        }
+        observerRef.current = new MutationObserver(() => {
+            gridCacheRef.current.dirty = true;
+            if (activeCellRef && !activeCellRef.isConnected) {
+                setActiveCell(null);
+            }
+        });
+        observerRef.current.observe(tableRef, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ["colspan", "rowspan", "hidden", "style"],
+        });
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+                observerRef.current = null;
+            }
+        };
+    }, [tableRef, enabled, activeCellRef]);
+    /**
+     * If keyboard-nav is re-enabled, mark grid as dirty since
+     * the table might have changed while it was disabled.
+     */
+    useEffect(() => {
+        if (enabled) {
+            gridCacheRef.current.dirty = true;
+        }
+    }, [enabled]);
+    const getTableGrid = useCallback((_tableRef) => {
+        if (gridCacheRef.current.dirty || !gridCacheRef.current.grid) {
+            gridCacheRef.current.grid = buildTableGridMap(_tableRef);
+            gridCacheRef.current.dirty = false;
+        }
+        return gridCacheRef.current.grid;
+    }, []);
+    return {
+        getTableGrid,
+        activeCell,
+        setActiveCell,
+    };
+}
+export { useGridCache };
+//# sourceMappingURL=useGridCache.js.map

package/esm/data/table/hooks/useGridCache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGridCache.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useGridCache.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAkB,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9E;;;;GAIG;AACH,SAAS,YAAY,CAAC,QAAiC,EAAE,OAAgB;IACvE,MAAM,YAAY,GAAG,MAAM,CAAY;QACrC,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,IAAI;KACZ,CAAC,CAAC;IAEH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IACnE,MAAM,aAAa,GAAG,aAAa,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC;IACxD,MAAM,WAAW,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QAED,WAAW,CAAC,OAAO,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YAC9C,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;YAClC,IAAI,aAAa,IAAI,CAAC,aAAa,CAAC,WAAW,EAAE,CAAC;gBAChD,aAAa,CAAC,IAAI,CAAC,CAAC;YACtB,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,EAAE;YACpC,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;YACf,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC;SAC3D,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;gBACxB,WAAW,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;gBACjC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;IAEvC;;;OAGG;IACH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC;QACpC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,SAA2B,EAAE,EAAE;QAC/D,IAAI,YAAY,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YAC7D,YAAY,CAAC,OAAO,CAAC,IAAI,GAAG,iBAAiB,CAAC,SAAS,CAAC,CAAC;YACzD,YAAY,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;QACrC,CAAC;QAED,OAAO,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC;IACnC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,YAAY;QACZ,UAAU;QACV,aAAa;KACd,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/esm/data/table/root/DataTableRoot.d.ts

@@ -9,17 +9,27 @@ import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr.js";
 interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
     children: React.ReactNode;
     rowDensity?: "condensed" | "normal" | "spacious";
+    /**
+     * Zebra striped table
+     * @default false
+     */
+    zebraStripes?: boolean;
+    /**
+     * Truncate content in cells and show ellipsis for overflowed text.
+     * @default true
+     */
+    truncateContent?: boolean;
     /**
      * Enables keyboard navigation for table rows and cells.
      * @default false
      */
     withKeyboardNav?: boolean;
     /**
-     * Zebra striped table
-     * @default false
+     * Custom callback to determine if navigation should be blocked.
+     * Called before default blocking logic.
+     * Requires `withKeyboardNav` to be `true`.
      */
-    zebraStripes?: boolean;
-    truncateContent?: boolean;
+    shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
 }
 interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> {
     /**

package/esm/data/table/root/DataTableRoot.js

@@ -21,18 +21,16 @@ import { DataTableThead, } from "../thead/DataTableThead.js";
 import { DataTableTr } from "../tr/DataTableTr.js";
 import { useTableKeyboardNav } from "./useTableKeyboardNav.js";
 const DataTable = forwardRef((_a, forwardedRef) => {
-    var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent"]);
+    var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true, shouldBlockNavigation } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent", "shouldBlockNavigation"]);
     const [tableRef, setTableRef] = useState(null);
     const mergedRef = useMergeRefs(forwardedRef, setTableRef);
-    const { onFocus, tableTabIndex } = useTableKeyboardNav(tableRef, {
+    const { tabIndex } = useTableKeyboardNav(tableRef, {
         enabled: withKeyboardNav,
+        shouldBlockNavigation,
     });
     return (React.createElement("div", { className: "aksel-data-table__border-wrapper" },
         React.createElement("div", { className: "aksel-data-table__scroll-wrapper" },
-            React.createElement("table", Object.assign({}, rest, { ref: mergedRef, className: cl("aksel-data-table", className, {
-                    "aksel-data-table--zebra-stripes": zebraStripes,
-                    "aksel-data-table--truncate-content": truncateContent,
-                }), "data-density": rowDensity, tabIndex: tableTabIndex, onFocus: onFocus })))));
+            React.createElement("table", Object.assign({}, rest, { ref: mergedRef, className: cl("aksel-data-table", className), "data-zebra-stripes": zebraStripes, "data-truncate-content": truncateContent, "data-density": rowDensity, tabIndex: tabIndex })))));
 });
 DataTable.Caption = DataTableCaption;
 DataTable.Thead = DataTableThead;

package/esm/data/table/root/DataTableRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACL,gBAAgB,GAEjB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAiH5D,MAAM,SAAS,GAAG,UAAU,CAC1B,CACE,EAOC,EACD,YAAY,EACZ,EAAE;QATF,EACE,SAAS,EACT,UAAU,GAAG,QAAQ,EACrB,eAAe,GAAG,KAAK,EACvB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,IAAI,OAEvB,EADI,IAAI,cANT,iFAOC,CADQ;IAIT,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE1D,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,mBAAmB,CAAC,QAAQ,EAAE;QAC/D,OAAO,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAC,kCAAkC;QAC/C,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,+CACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;oBAC3C,iCAAiC,EAAE,YAAY;oBAC/C,oCAAoC,EAAE,eAAe;iBACtD,CAAC,kBACY,UAAU,EACxB,QAAQ,EAAE,aAAa,EACvB,OAAO,EAAE,OAAO,IAChB,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACwB,CAAC;AAE5B,SAAS,CAAC,OAAO,GAAG,gBAAgB,CAAC;AACrC,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AACjC,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AACjC,SAAS,CAAC,EAAE,GAAG,WAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,WAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,WAAW,CAAC;AAC3B,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AAEjC,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,GACZ,CAAC;AACF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACL,gBAAgB,GAEjB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AA2H5D,MAAM,SAAS,GAAG,UAAU,CAC1B,CACE,EAQC,EACD,YAAY,EACZ,EAAE;QAVF,EACE,SAAS,EACT,UAAU,GAAG,QAAQ,EACrB,eAAe,GAAG,KAAK,EACvB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,IAAI,EACtB,qBAAqB,OAEtB,EADI,IAAI,cAPT,0GAQC,CADQ;IAIT,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE1D,MAAM,EAAE,QAAQ,EAAE,GAAG,mBAAmB,CAAC,QAAQ,EAAE;QACjD,OAAO,EAAE,eAAe;QACxB,qBAAqB;KACtB,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAC,kCAAkC;QAC/C,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,+CACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,wBACxB,YAAY,2BACT,eAAe,kBACxB,UAAU,EACxB,QAAQ,EAAE,QAAQ,IAClB,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACwB,CAAC;AAE5B,SAAS,CAAC,OAAO,GAAG,gBAAgB,CAAC;AACrC,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AACjC,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AACjC,SAAS,CAAC,EAAE,GAAG,WAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,WAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,WAAW,CAAC;AAC3B,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AAEjC,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,GACZ,CAAC;AACF,eAAe,SAAS,CAAC"}

package/esm/data/table/root/useTableKeyboardNav.d.ts

@@ -1,7 +1,13 @@
-declare function useTableKeyboardNav(tableRef: HTMLTableElement | null, { enabled }: {
+type UseTableKeyboardNavOptions = {
     enabled: boolean;
-}): {
-    tableTabIndex: number | undefined;
-    onFocus: () => Element | null | undefined;
+    /**
+     * Custom callback to determine if navigation should be blocked.
+     * Called before default blocking logic.
+     */
+    shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
+};
+declare function useTableKeyboardNav(tableRef: HTMLTableElement | null, { enabled, shouldBlockNavigation: customBlockFn }: UseTableKeyboardNavOptions): {
+    tabIndex: number | undefined;
 };
 export { useTableKeyboardNav };
+export type { UseTableKeyboardNavOptions };

package/esm/data/table/root/useTableKeyboardNav.js

@@ -1,67 +1,93 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect } from "react";
 import { useEventCallback } from "../../../utils/hooks/index.js";
-import { getActiveCell, getFirstCell } from "../helpers/table-cell.js";
-import { focusCell, focusCellAndUpdateTabIndex } from "../helpers/table-focus.js";
-import { ensureTableGrid, findNextCell, } from "../helpers/table-grid-nav.js";
-import { getDeltaFromKey, shouldBlockArrowKeyNavigation, } from "../helpers/table-keyboard.js";
-function useTableKeyboardNav(tableRef, { enabled }) {
-    const [activeCell, setActiveCell] = useState(null);
-    const activeCellRef = useRef(null);
-    activeCellRef.current = activeCell;
-    const observerRef = useRef(null);
-    const gridCacheRef = useRef({
-        grid: null,
-        dirty: true,
-    });
+import { focusInitialTableTarget } from "../helpers/table-cell.js";
+import { focusCellAndUpdateTabIndex } from "../helpers/table-focus.js";
+import { findFirstCell, findFirstCellInRow, findLastCell, findLastCellInRow, findNextFocusableCell, } from "../helpers/table-grid-nav.js";
+import { getNavigationAction, shouldBlockNavigation, } from "../helpers/table-keyboard.js";
+import { useGridCache } from "../hooks/useGridCache.js";
+function useTableKeyboardNav(tableRef, { enabled, shouldBlockNavigation: customBlockFn }) {
+    const { getTableGrid, activeCell, setActiveCell } = useGridCache(tableRef, enabled);
     /**
-     * TODO:
-     * - Save original tabIndex of cells and restore when navigating away?
+     * Executes a navigation action and returns the target cell.
      */
-    const navigateByArrowKey = useEventCallback((delta) => {
-        const currentCell = getActiveCell(tableRef, activeCell);
-        if (!currentCell || !tableRef) {
+    const executeNavigationAction = useEventCallback((action) => {
+        if (!tableRef) {
+            return null;
+        }
+        let currentCell = activeCell;
+        currentCell !== null && currentCell !== void 0 ? currentCell : (currentCell = focusInitialTableTarget(tableRef));
+        if (!currentCell) {
             return null;
         }
-        const { grid, positions, maxCols } = ensureTableGrid(tableRef, gridCacheRef.current);
+        const { grid, positions } = getTableGrid(tableRef);
         const currentPos = positions.get(currentCell);
-        if (!currentPos) {
+        let nextCell = null;
+        switch (action.type) {
+            case "delta": {
+                if (!currentPos) {
+                    return null;
+                }
+                nextCell = findNextFocusableCell(grid, currentPos, action.delta, currentCell);
+                break;
+            }
+            case "home": {
+                if (!currentPos) {
+                    return null;
+                }
+                nextCell = findFirstCellInRow(grid, currentPos.y);
+                break;
+            }
+            case "end": {
+                if (!currentPos) {
+                    return null;
+                }
+                nextCell = findLastCellInRow(grid, currentPos.y);
+                break;
+            }
+            case "tableStart": {
+                nextCell = findFirstCell(grid);
+                break;
+            }
+            case "tableEnd": {
+                nextCell = findLastCell(grid);
+                break;
+            }
+        }
+        if (!nextCell || nextCell === currentCell) {
             return null;
         }
-        const nextCell = findNextCell(grid, currentPos, delta, currentCell, maxCols);
-        return nextCell
-            ? focusCellAndUpdateTabIndex(nextCell, currentCell)
-            : null;
+        return focusCellAndUpdateTabIndex(nextCell, currentCell);
     });
     /**
-     * Handles keyboard navigation with arrow keys.
-     * We check if the key is an arrow key, and if so, we calculate the next cell to focus based on the current active cell and the grid structure.
-     *
-     * TODO:
-     * - Check for other "blocking" scenarios, like actionmenus, dropdown etc
-     * - Consider having acallback user can hook into to determine if navigation should be blocked
-     * - Consider adding Home, End, PageUp, PageDown navigation
-     *
+     * Handles keyboard navigation with arrow keys, Home/End, and PageUp/PageDown.
+     * Checks if navigation should be blocked based on current focus context.
      */
-    const onKeyDown = useEventCallback((event) => {
-        /* Stops keydown from moving if we can assume that you are currently editing input, select etc */
-        if (shouldBlockArrowKeyNavigation(event)) {
+    const handleTableKeyDown = useEventCallback((event) => {
+        if (customBlockFn === null || customBlockFn === void 0 ? void 0 : customBlockFn(event)) {
+            return;
+        }
+        if (shouldBlockNavigation(event)) {
             return;
         }
-        let newCell = null;
-        const delta = getDeltaFromKey(event.key);
-        if (delta) {
-            event.preventDefault();
-            newCell = navigateByArrowKey(delta);
+        const action = getNavigationAction(event);
+        if (!action) {
+            return;
         }
+        event.preventDefault();
+        const newCell = executeNavigationAction(action);
         newCell && setActiveCell(newCell);
     });
     /**
      * When focus is moved to elements inside a cell like inputs, checkbox etc
      * we want to update the active cell to the parent td/th, so that keyboard navigation continues to work as expected from there.
      */
-    const onFocusIn = useEventCallback((event) => {
+    const handleTableFocusIn = useEventCallback((event) => {
         var _a;
         const target = event.target;
+        if (tableRef && target === tableRef) {
+            focusInitialTableTarget(tableRef);
+            return;
+        }
         const newCell = (_a = target === null || target === void 0 ? void 0 : target.closest("td, th")) !== null && _a !== void 0 ? _a : null;
         if (!newCell || newCell === activeCell) {
             return;
@@ -74,77 +100,22 @@ function useTableKeyboardNav(tableRef, { enabled }) {
         }
     });
     /**
-     * Observes changes is table structure and updates the grid cache accordingly.
-     * - We want to check if elements are removed/added, like when filtering table, pagination etc
-     * - Changes in colspan/rowspan that can affect the grid structure
-     * - Hidden attribute or styles that can affect focusability of cells
-     *
-     * We also check if the active cell is removed from the DOM, and clear it if so.
+     * Attach event listeners for keyboard navigation and focus management.
      */
     useEffect(() => {
         if (!tableRef || !enabled) {
             return;
         }
-        observerRef.current = new MutationObserver(() => {
-            gridCacheRef.current.dirty = true;
-            if (activeCellRef.current && !activeCellRef.current.isConnected) {
-                setActiveCell(null);
-            }
-        });
-        observerRef.current.observe(tableRef, {
-            subtree: true,
-            childList: true,
-            attributes: true,
-            attributeFilter: ["colspan", "rowspan", "hidden", "style"],
-        });
-        return () => {
-            if (observerRef.current) {
-                observerRef.current.disconnect();
-                observerRef.current = null;
-            }
-        };
-    }, [tableRef, enabled]);
-    useEffect(() => {
-        if (!tableRef || !enabled) {
-            return;
-        }
-        tableRef.addEventListener("keydown", onKeyDown);
-        tableRef.addEventListener("focusin", onFocusIn);
+        tableRef.addEventListener("keydown", handleTableKeyDown);
+        tableRef.addEventListener("focusin", handleTableFocusIn);
         return () => {
-            tableRef.removeEventListener("keydown", onKeyDown);
-            tableRef.removeEventListener("focusin", onFocusIn);
+            tableRef.removeEventListener("keydown", handleTableKeyDown);
+            tableRef.removeEventListener("focusin", handleTableFocusIn);
         };
-    }, [tableRef, onKeyDown, onFocusIn, enabled]);
-    /*
-     * If keyboard-nav is re-enabled, we need to make sure to update the grid cache,
-     * since the table might have changed while it was disabled.
-     */
-    useEffect(() => {
-        if (!enabled) {
-            return;
-        }
-        gridCacheRef.current.dirty = true;
-    }, [enabled]);
+    }, [tableRef, handleTableKeyDown, handleTableFocusIn, enabled]);
     return {
         /* Table should only have tabIndex until the focus is moved inside and is enabled */
-        tableTabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
-        /*
-         * Allows us to capture focus on the table when navigating with Tab from outside, and move it to the first cell.
-         * We only want to do this if no cell is already focused.
-         */
-        onFocus: () => {
-            if (!tableRef) {
-                return;
-            }
-            const focusedElement = document.activeElement;
-            const cellInTable = focusedElement === null || focusedElement === void 0 ? void 0 : focusedElement.closest("td, th");
-            /* Assume onFocusIn handler has updates cell */
-            if (cellInTable && tableRef.contains(cellInTable)) {
-                return;
-            }
-            const firstCell = getFirstCell(tableRef);
-            return firstCell ? focusCell(firstCell) : null;
-        },
+        tabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
     };
 }
 export { useTableKeyboardNav };

package/esm/data/table/root/useTableKeyboardNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/root/useTableKeyboardNav.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTableKeyboardNav.js","sourceRoot":"","sources":["../../../../src/data/table/root/useTableKeyboardNav.ts"],"names":[],"mappings":"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"}

package/esm/data/token-filter/AutoSuggest.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+interface AutoSuggestOption {
+    value: string;
+    label: string;
+    tags?: string[];
+    filteringTags?: string[];
+    description?: string;
+}
+interface AutoSuggestGroup {
+    label: string;
+    options: AutoSuggestOption[];
+}
+interface AutoSuggestProps {
+    options: AutoSuggestGroup[];
+    value: string;
+    filterText: string;
+    onSelect: (value: string) => void;
+    className?: string;
+}
+declare const AutoSuggest: React.ForwardRefExoticComponent<AutoSuggestProps & React.RefAttributes<HTMLDivElement>>;
+export { AutoSuggest };

package/esm/data/token-filter/AutoSuggest.js

@@ -0,0 +1,93 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef, useMemo } from "react";
+import { cl } from "../../utils/helpers/index.js";
+const AutoSuggest = forwardRef(({ options, value, filterText, onSelect, className }, ref) => {
+    console.info({ options, value, filterText });
+    /* const highlightedText = filterText === undefined ? value : filterText; */
+    /* const filterValue = (value || "").toLowerCase();
+
+    const filteredGroups = options
+      .map((group) => ({
+        ...group,
+        options: group.options.filter((option) => {
+          const searchableText = [
+            option.label,
+            option.description,
+            ...(option.filteringTags ?? []),
+            ...(option.tags ?? []),
+          ]
+            .filter(Boolean)
+            .join(" ")
+            .toLowerCase();
+          return searchableText.includes(filterValue);
+        }),
+      }))
+      .filter((group) => group.options.length > 0); */
+    const { items } = useAutosuggestItems({ options, filterValue: filterText });
+    console.info({ items });
+    return (React.createElement("div", { ref: ref, className: cl("aksel-auto-suggest", className) }, options.map((group) => (React.createElement("div", { key: group.label, className: "aksel-auto-suggest__group" },
+        React.createElement("div", { className: "aksel-auto-suggest__group-label" }, group.label),
+        React.createElement("ul", { className: "aksel-auto-suggest__list" }, group.options.map((option) => (React.createElement("li", { key: option.value, className: "aksel-auto-suggest__item" },
+            React.createElement("button", { type: "button", className: "aksel-auto-suggest__button", onClick: () => onSelect(option.value) },
+                React.createElement("span", { className: "aksel-auto-suggest__label" }, option.label),
+                option.description && (React.createElement("span", { className: "aksel-auto-suggest__description" }, option.description)),
+                option.tags && option.tags.length > 0 && (React.createElement("div", { className: "aksel-auto-suggest__tags" }, option.tags.map((tag) => (React.createElement("span", { key: tag, className: "aksel-auto-suggest__tag" }, tag)))))))))))))));
+});
+function useAutosuggestItems({ options, filterValue }) {
+    const { items } = useMemo(() => createItems(options), [options]);
+    const filteredItems = useMemo(() => {
+        const localFilteredItems = items;
+        if (filterValue) {
+            localFilteredItems.unshift({
+                value: filterValue,
+                type: "use-entered",
+                label: `Use "${filterValue}"`,
+                option: { value: filterValue },
+            });
+        }
+        return localFilteredItems;
+    }, [items, filterValue]);
+    return { items: filteredItems };
+}
+function createItems(options) {
+    const items = [];
+    const itemToGroup = new WeakMap();
+    for (const option of options) {
+        if (isGroup(option)) {
+            for (const item of flattenGroup(option, itemToGroup)) {
+                items.push(item);
+            }
+        }
+        else {
+            items.push(Object.assign(Object.assign({}, option), { option }));
+        }
+    }
+    return { items };
+}
+function flattenGroup(group, map) {
+    var _a;
+    const { options } = group, rest = __rest(group, ["options"]);
+    const groupItem = Object.assign(Object.assign({}, rest), { type: "parent", option: group });
+    const items = [groupItem];
+    for (const option of options) {
+        const childOption = Object.assign(Object.assign({}, option), { type: "child", disabled: (_a = option.disabled) !== null && _a !== void 0 ? _a : false, option, parent: group });
+        items.push(childOption);
+        map.set(childOption, groupItem);
+    }
+    return items;
+}
+function isGroup(optionOrGroup) {
+    return "options" in optionOrGroup;
+}
+export { AutoSuggest };
+//# sourceMappingURL=AutoSuggest.js.map

package/esm/data/token-filter/AutoSuggest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoSuggest.js","sourceRoot":"","sources":["../../../src/data/token-filter/AutoSuggest.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,qBAAqB,CAAC;AA2BzC,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3D,OAAO,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC;IAC7C,4EAA4E;IAC5E;;;;;;;;;;;;;;;;;;sDAkBkD;IAElD,MAAM,EAAE,KAAK,EAAE,GAAG,mBAAmB,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC,CAAC;IAE5E,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAExB,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE,SAAS,CAAC,IAC1D,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACtB,6BAAK,GAAG,EAAE,KAAK,CAAC,KAAK,EAAE,SAAS,EAAC,2BAA2B;QAC1D,6BAAK,SAAS,EAAC,iCAAiC,IAAE,KAAK,CAAC,KAAK,CAAO;QACpE,4BAAI,SAAS,EAAC,0BAA0B,IACrC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC7B,4BAAI,GAAG,EAAE,MAAM,CAAC,KAAK,EAAE,SAAS,EAAC,0BAA0B;YACzD,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,4BAA4B,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC;gBAErC,8BAAM,SAAS,EAAC,2BAA2B,IACxC,MAAM,CAAC,KAAK,CACR;gBACN,MAAM,CAAC,WAAW,IAAI,CACrB,8BAAM,SAAS,EAAC,iCAAiC,IAC9C,MAAM,CAAC,WAAW,CACd,CACR;gBACA,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CACxC,6BAAK,SAAS,EAAC,0BAA0B,IACtC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACxB,8BAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,yBAAyB,IAChD,GAAG,CACC,CACR,CAAC,CACE,CACP,CACM,CACN,CACN,CAAC,CACC,CACD,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,mBAAmB,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE;IACnD,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEjE,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,kBAAkB,GAAG,KAAK,CAAC;QACjC,IAAI,WAAW,EAAE,CAAC;YAChB,kBAAkB,CAAC,OAAO,CAAC;gBACzB,KAAK,EAAE,WAAW;gBAClB,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,QAAQ,WAAW,GAAG;gBAC7B,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE;aAC/B,CAAC,CAAC;QACL,CAAC;QACD,OAAO,kBAAkB,CAAC;IAC5B,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAEzB,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC;AAClC,CAAC;AAYD,SAAS,WAAW,CAClB,OAA6D;IAE7D,MAAM,KAAK,GAAsB,EAAE,CAAC;IACpC,MAAM,WAAW,GAAG,IAAI,OAAO,EAAoC,CAAC;IAEpE,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC;YACpB,KAAK,MAAM,IAAI,IAAI,YAAY,CAAC,MAAM,EAAE,WAAW,CAAC,EAAE,CAAC;gBACrD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC;QACH,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,IAAI,iCAAM,MAAM,KAAE,MAAM,IAAG,CAAC;QACpC,CAAC;IACH,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,CAAC;AACnB,CAAC;AAED,SAAS,YAAY,CACnB,KAAgC,EAChC,GAA8C;;IAE9C,MAAM,EAAE,OAAO,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAA5B,WAAoB,CAAQ,CAAC;IAEnC,MAAM,SAAS,mCAAyB,IAAI,KAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,GAAE,CAAC;IAE9E,MAAM,KAAK,GAAsB,CAAC,SAAS,CAAC,CAAC;IAE7C,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,MAAM,WAAW,mCACZ,MAAM,KACT,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,MAAA,MAAM,CAAC,QAAQ,mCAAI,KAAK,EAClC,MAAM,EACN,MAAM,EAAE,KAAK,GACd,CAAC;QAEF,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAExB,GAAG,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAClC,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,OAAO,CACd,aAA+D;IAE/D,OAAO,SAAS,IAAI,aAAa,CAAC;AACpC,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/esm/data/token-filter/TokenFilter.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type { QueryFilterQuery, QueryFilteringOptions, QueryFilteringProperties } from "./TokenFilter.types.js";
+type TokenFilterProps = {
+    query: QueryFilterQuery;
+    onChange: (newQuery: QueryFilterQuery) => void;
+    className?: string;
+    filteringOptions: QueryFilteringOptions;
+    filteringProperties: QueryFilteringProperties;
+};
+export declare const TokenFilter: React.ForwardRefExoticComponent<TokenFilterProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/esm/data/token-filter/TokenFilter.js

@@ -0,0 +1,55 @@
+import React, { forwardRef, useState } from "react";
+import { Popover } from "../../popover/index.js";
+import { cl } from "../../utils/helpers/index.js";
+import { generateAutoCompleteOptions } from "./helpers/generate-autocomplete-options.js";
+import { parseQueryText } from "./helpers/parse-query-text.js";
+export const TokenFilter = forwardRef(({ query, className, filteringProperties, filteringOptions }, ref) => {
+    const [inputAnchor, setInputAnchor] = useState(null);
+    const [filterText, setFilterText] = useState("");
+    const { properties, options } = derrivedFilterState(filteringProperties, filteringOptions);
+    const queryState = parseQueryText(filterText, properties);
+    const autoCompleteOptions = generateAutoCompleteOptions(queryState, properties, options);
+    /* const handleSelectOption = (value: string) => {
+      setFilterText(value);
+    }; */
+    return (React.createElement("div", { ref: ref, className: cl("aksel-property-filter", className), role: "search" },
+        React.createElement("input", { type: "text", className: "aksel-property-filter__input", placeholder: "Type to filter...", ref: setInputAnchor, value: filterText, onChange: (e) => setFilterText(e.target.value) }),
+        React.createElement(Popover, { anchorEl: inputAnchor, open: filterText.length > 0, onClose: () => setFilterText("") }, "a"),
+        query.tokens.map((token, index) => {
+            return (React.createElement("div", { key: index, className: "aksel-property-filter__token" },
+                React.createElement("strong", null, token.propertyKey),
+                " ",
+                token.operator,
+                " "));
+        }),
+        React.createElement("ul", null, filteringProperties.map((prop) => (React.createElement("li", { key: prop.key }, prop.propertyLabel)))),
+        React.createElement("pre", null, JSON.stringify(queryState, null, 2)),
+        React.createElement("pre", null, JSON.stringify(autoCompleteOptions, null, 2))));
+});
+function derrivedFilterState(filteringProperties, filteringOptions) {
+    var _a, _b;
+    const propertyMap = new Map();
+    for (const property of filteringProperties) {
+        propertyMap.set(property.key, {
+            propertyKey: property.key,
+            propertyLabel: (_a = property === null || property === void 0 ? void 0 : property.propertyLabel) !== null && _a !== void 0 ? _a : "",
+            groupValuesLabel: (_b = property === null || property === void 0 ? void 0 : property.groupValuesLabel) !== null && _b !== void 0 ? _b : "",
+            propertyGroup: property === null || property === void 0 ? void 0 : property.group,
+            /* operators: (property?.operators ?? []).map(op => (typeof op === 'string' ? op : op.operator)), */
+            /* defaultOperator: property?.defaultOperator ?? '=', */
+            externalProperty: property,
+        });
+    }
+    const internalOptions = filteringOptions.map((option) => {
+        var _a, _b, _c, _d, _e;
+        return ({
+            property: (_a = propertyMap.get(option.propertyKey)) !== null && _a !== void 0 ? _a : null,
+            value: option.value,
+            label: (_c = (_b = option.label) !== null && _b !== void 0 ? _b : option.value) !== null && _c !== void 0 ? _c : "",
+            tags: (_d = option.tags) !== null && _d !== void 0 ? _d : [],
+            filteringTags: (_e = option.filteringTags) !== null && _e !== void 0 ? _e : [],
+        });
+    });
+    return { properties: [...propertyMap.values()], options: internalOptions };
+}
+//# sourceMappingURL=TokenFilter.js.map

package/esm/data/token-filter/TokenFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenFilter.js","sourceRoot":"","sources":["../../../src/data/token-filter/TokenFilter.tsx"],"names":[],"mappings":"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"}