@navikt/ds-react 8.2.2 → 8.4.0

package/esm/data/table/helpers/table-grid-nav.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Builds a utility grid allowing for easier keyboard-navigation between cells on columns and rows
+ */
+declare function buildTableGrid(tableRef: HTMLTableElement): {
+    grid: (Element | undefined)[][];
+    positions: Map<Element, {
+        x: number;
+        y: number;
+    }>;
+    maxCols: number;
+};
+type TableGrid = ReturnType<typeof buildTableGrid>;
+type GridCache = {
+    grid: TableGrid | null;
+    dirty: boolean;
+};
+/**
+ * Makes sure to keep a cached version of the table grid, and only rebuild it when necessary (when "dirty" flag is set)
+ */
+declare function ensureTableGrid(tableRef: HTMLTableElement, tableGridCache: GridCache): TableGrid;
+/**
+ * Finds the next cell in the given direction, starting from the current position.
+ * Skips over cells that are not focusable or are the same as the current cell.
+ * Returns null if no next cell is found in the given direction.
+ */
+declare function findNextCell(grid: (Element | undefined)[][], currentPos: {
+    x: number;
+    y: number;
+}, delta: {
+    x: number;
+    y: number;
+}, currentCell: Element, maxCols: number): Element | null;
+export { buildTableGrid, ensureTableGrid, findNextCell, type GridCache };

package/esm/data/table/helpers/table-grid-nav.js

@@ -0,0 +1,80 @@
+import { getFocusableTarget } from "./table-focus.js";
+/**
+ * Builds a utility grid allowing for easier keyboard-navigation between cells on columns and rows
+ */
+function buildTableGrid(tableRef) {
+    const rows = tableRef.rows;
+    const grid = [];
+    const positions = new Map();
+    let maxCols = 0;
+    /* Walk trough each row in order */
+    for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
+        const row = rows[rowIndex];
+        const cells = row.cells;
+        if (!grid[rowIndex]) {
+            grid[rowIndex] = [];
+        }
+        let colIndex = 0;
+        /* Walk trough each cell in row */
+        for (let cellIndex = 0; cellIndex < cells.length; cellIndex += 1) {
+            const cell = cells[cellIndex];
+            /* Skip over slots already occupied by previous row/col spans. */
+            while (grid[rowIndex][colIndex]) {
+                colIndex += 1;
+            }
+            const colSpan = Math.max(cell.colSpan || 1, 1);
+            const rowSpan = Math.max(cell.rowSpan || 1, 1);
+            /* Fill the grid with references to this cell for its row/col span. */
+            for (let y = rowIndex; y < rowIndex + rowSpan; y += 1) {
+                if (!grid[y]) {
+                    grid[y] = [];
+                }
+                for (let x = colIndex; x < colIndex + colSpan; x += 1) {
+                    grid[y][x] = cell;
+                }
+            }
+            /* Track the top-left coordinate for each unique cell. */
+            if (!positions.has(cell)) {
+                positions.set(cell, { x: colIndex, y: rowIndex });
+            }
+            colIndex += colSpan;
+            if (colIndex > maxCols) {
+                maxCols = colIndex;
+            }
+        }
+    }
+    return { grid, positions, maxCols };
+}
+/**
+ * Makes sure to keep a cached version of the table grid, and only rebuild it when necessary (when "dirty" flag is set)
+ */
+function ensureTableGrid(tableRef, tableGridCache) {
+    if (tableGridCache.dirty || !tableGridCache.grid) {
+        tableGridCache.grid = buildTableGrid(tableRef);
+        tableGridCache.dirty = false;
+    }
+    return tableGridCache.grid;
+}
+/**
+ * Finds the next cell in the given direction, starting from the current position.
+ * Skips over cells that are not focusable or are the same as the current cell.
+ * Returns null if no next cell is found in the given direction.
+ */
+function findNextCell(grid, currentPos, delta, currentCell, maxCols) {
+    var _a;
+    let x = currentPos.x + delta.x;
+    let y = currentPos.y + delta.y;
+    const maxRows = grid.length;
+    while (y >= 0 && y < maxRows && x >= 0 && x < maxCols) {
+        const row = (_a = grid[y]) !== null && _a !== void 0 ? _a : [];
+        const cell = row[x];
+        if (cell && cell !== currentCell && !!getFocusableTarget(cell)) {
+            return cell;
+        }
+        x += delta.x;
+        y += delta.y;
+    }
+    return null;
+}
+export { buildTableGrid, ensureTableGrid, findNextCell };
+//# sourceMappingURL=table-grid-nav.js.map

package/esm/data/table/helpers/table-grid-nav.js.map

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

package/esm/data/table/helpers/table-keyboard.d.ts

@@ -0,0 +1,15 @@
+type Delta = {
+    x: number;
+    y: number;
+};
+declare function getDeltaFromKey(key: string): Delta | null;
+/**
+ * Tries to make assumptions of what the user is currently doing inside a table cell
+ * Should block navigation if:
+ * - Input has selection, caret is not at start/end
+ * - Select arrow down/up for opening popup
+ * - User is navigating inside multiline textarea
+ * - contenteditable attrb is in use
+ */
+declare function shouldBlockArrowKeyNavigation(event: KeyboardEvent): boolean;
+export { getDeltaFromKey, shouldBlockArrowKeyNavigation };

package/esm/data/table/helpers/table-keyboard.js

@@ -0,0 +1,95 @@
+const keyToCoord = {
+    ArrowUp: { x: 0, y: -1 },
+    ArrowDown: { x: 0, y: 1 },
+    ArrowLeft: { x: -1, y: 0 },
+    ArrowRight: { x: 1, y: 0 },
+};
+function getDeltaFromKey(key) {
+    if (key in keyToCoord) {
+        return keyToCoord[key];
+    }
+    return null;
+}
+/**
+ * Tries to make assumptions of what the user is currently doing inside a table cell
+ * Should block navigation if:
+ * - Input has selection, caret is not at start/end
+ * - Select arrow down/up for opening popup
+ * - User is navigating inside multiline textarea
+ * - contenteditable attrb is in use
+ */
+function shouldBlockArrowKeyNavigation(event) {
+    const key = event.key;
+    if (!(key in keyToCoord)) {
+        return false;
+    }
+    const el = event.target;
+    if (!el) {
+        return false;
+    }
+    if (el.isContentEditable) {
+        return true;
+    }
+    /* If not any of these elements, assueme "safe" to navigate */
+    const editable = el.closest('input, textarea, select, [contenteditable="true"]');
+    if (!editable) {
+        return false;
+    }
+    if (editable instanceof HTMLInputElement) {
+        return shouldBlockInputArrow(editable, key);
+    }
+    if (editable instanceof HTMLTextAreaElement) {
+        return shouldBlockTextAreaArrow(editable, key);
+    }
+    if (editable instanceof HTMLSelectElement) {
+        if (key === "ArrowDown" || key === "ArrowUp") {
+            return true;
+        }
+        return false;
+    }
+    return editable.hasAttribute("contenteditable");
+}
+function shouldBlockInputArrow(input, key) {
+    if (input.type === "checkbox" || input.type === "radio") {
+        return false;
+    }
+    if (!isTextInputType(input.type)) {
+        return false;
+    }
+    const start = input.selectionStart;
+    const end = input.selectionEnd;
+    if (start === null || end === null) {
+        return true;
+    }
+    return shouldBlockBySelection(key, start, end, input.value.length);
+}
+function shouldBlockTextAreaArrow(textarea, key) {
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    return shouldBlockBySelection(key, start, end, textarea.value.length);
+}
+function shouldBlockBySelection(key, start, end, valueLength) {
+    if (key === "ArrowLeft" || key === "ArrowUp") {
+        return start > 0 || end > 0;
+    }
+    if (key === "ArrowRight" || key === "ArrowDown") {
+        return end < valueLength;
+    }
+    return false;
+}
+function isTextInputType(type) {
+    switch (type) {
+        case "text":
+        case "search":
+        case "url":
+        case "tel":
+        case "password":
+        case "email":
+        case "number":
+            return true;
+        default:
+            return false;
+    }
+}
+export { getDeltaFromKey, shouldBlockArrowKeyNavigation };
+//# sourceMappingURL=table-keyboard.js.map

package/esm/data/table/helpers/table-keyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-keyboard.js","sourceRoot":"","sources":["../../../../src/data/table/helpers/table-keyboard.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,GAAG;IACjB,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;IACxB,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IACzB,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1B,UAAU,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;CAClB,CAAC;AAKX,SAAS,eAAe,CAAC,GAAW;IAClC,IAAI,GAAG,IAAI,UAAU,EAAE,CAAC;QACtB,OAAO,UAAU,CAAC,GAAkB,CAAC,CAAC;IACxC,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;;;;;;GAOG;AACH,SAAS,6BAA6B,CAAC,KAAoB;IACzD,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;IACtB,IAAI,CAAC,CAAC,GAAG,IAAI,UAAU,CAAC,EAAE,CAAC;QACzB,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,EAAE,GAAG,KAAK,CAAC,MAA4B,CAAC;IAC9C,IAAI,CAAC,EAAE,EAAE,CAAC;QACR,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,EAAE,CAAC,iBAAiB,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,8DAA8D;IAC9D,MAAM,QAAQ,GAAG,EAAE,CAAC,OAAO,CACzB,mDAAmD,CACpD,CAAC;IAEF,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,QAAQ,YAAY,gBAAgB,EAAE,CAAC;QACzC,OAAO,qBAAqB,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI,QAAQ,YAAY,mBAAmB,EAAE,CAAC;QAC5C,OAAO,wBAAwB,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IACjD,CAAC;IAED,IAAI,QAAQ,YAAY,iBAAiB,EAAE,CAAC;QAC1C,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAO,QAAQ,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AAClD,CAAC;AAED,SAAS,qBAAqB,CAAC,KAAuB,EAAE,GAAW;IACjE,IAAI,KAAK,CAAC,IAAI,KAAK,UAAU,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QACxD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;QACjC,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC;IACnC,MAAM,GAAG,GAAG,KAAK,CAAC,YAAY,CAAC;IAC/B,IAAI,KAAK,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;QACnC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,sBAAsB,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;AACrE,CAAC;AAED,SAAS,wBAAwB,CAC/B,QAA6B,EAC7B,GAAW;IAEX,MAAM,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC;IACtC,MAAM,GAAG,GAAG,QAAQ,CAAC,YAAY,CAAC;IAClC,OAAO,sBAAsB,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;AACxE,CAAC;AAED,SAAS,sBAAsB,CAC7B,GAAW,EACX,KAAa,EACb,GAAW,EACX,WAAmB;IAEnB,IAAI,GAAG,KAAK,WAAW,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;QAC7C,OAAO,KAAK,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC;IAC9B,CAAC;IACD,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,WAAW,EAAE,CAAC;QAChD,OAAO,GAAG,GAAG,WAAW,CAAC;IAC3B,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,eAAe,CAAC,IAAY;IACnC,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,MAAM,CAAC;QACZ,KAAK,QAAQ,CAAC;QACd,KAAK,KAAK,CAAC;QACX,KAAK,KAAK,CAAC;QACX,KAAK,UAAU,CAAC;QAChB,KAAK,OAAO,CAAC;QACb,KAAK,QAAQ;YACX,OAAO,IAAI,CAAC;QACd;YACE,OAAO,KAAK,CAAC;IACjB,CAAC;AACH,CAAC;AAED,OAAO,EAAE,eAAe,EAAE,6BAA6B,EAAE,CAAC"}

package/esm/data/table/index.d.ts

@@ -1,2 +1,2 @@
-export { default as DataTable, DataTableCaption, DataTableThead, DataTableTbody, DataTableTr, DataTableTh, DataTableTd, } from "./root/DataTableRoot.js";
-export type { DataTableProps, DataTableCaptionProps, DataTableTheadProps, DataTableTbodyProps, DataTableTrProps, DataTableThProps, DataTableTdProps, } from "./root/DataTableRoot.js";
+export { default as DataTable, DataTableCaption, DataTableThead, DataTableTbody, DataTableTr, DataTableTh, DataTableTd, DataTableTfoot, } from "./root/DataTableRoot.js";
+export type { DataTableProps, DataTableCaptionProps, DataTableTheadProps, DataTableTbodyProps, DataTableTrProps, DataTableThProps, DataTableTdProps, DataTableTfootProps, } from "./root/DataTableRoot.js";

package/esm/data/table/index.js

@@ -1,3 +1,3 @@
 "use client";
-export { default as DataTable, DataTableCaption, DataTableThead, DataTableTbody, DataTableTr, DataTableTh, DataTableTd, } from "./root/DataTableRoot.js";
+export { default as DataTable, DataTableCaption, DataTableThead, DataTableTbody, DataTableTr, DataTableTh, DataTableTd, DataTableTfoot, } from "./root/DataTableRoot.js";
 //# sourceMappingURL=index.js.map

package/esm/data/table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/data/table/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,WAAW,EACX,WAAW,EACX,WAAW,GACZ,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/data/table/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,gBAAgB,EAChB,cAAc,EACd,cAAc,EACd,WAAW,EACX,WAAW,EACX,WAAW,EACX,cAAc,GACf,MAAM,sBAAsB,CAAC"}

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

@@ -2,11 +2,24 @@ import React from "react";
 import { DataTableCaption, type DataTableCaptionProps } from "../caption/DataTableCaption.js";
 import { DataTableTbody, type DataTableTbodyProps } from "../tbody/DataTableTbody.js";
 import { DataTableTd, type DataTableTdProps } from "../td/DataTableTd.js";
+import { DataTableTfoot, type DataTableTfootProps } from "../tfoot/DataTableTfoot.js";
 import { DataTableTh, type DataTableThProps } from "../th/DataTableTh.js";
 import { DataTableThead, type DataTableTheadProps } from "../thead/DataTableThead.js";
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr.js";
 interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
     children: React.ReactNode;
+    rowDensity?: "condensed" | "normal" | "spacious";
+    /**
+     * Enables keyboard navigation for table rows and cells.
+     * @default false
+     */
+    withKeyboardNav?: boolean;
+    /**
+     * Zebra striped table
+     * @default false
+     */
+    zebraStripes?: boolean;
+    truncateContent?: boolean;
 }
 interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLDialogElement>> {
     /**
@@ -87,8 +100,20 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTab
      * ```
      */
     Td: typeof DataTableTd;
+    /**
+     * @see 🏷️ {@link DataTableTfootProps}
+     * @example
+     * ```jsx
+     * <DataTable>
+     *   <DataTable.Tfoot>
+     *     ...
+     *   </DataTable.Tfoot>
+     * </DataTable>
+     * ```
+     */
+    Tfoot: typeof DataTableTfoot;
 }
 declare const DataTable: DataTableRootComponent;
-export { DataTable, DataTableCaption, DataTableTbody, DataTableTd, DataTableTh, DataTableThead, DataTableTr, };
+export { DataTable, DataTableCaption, DataTableTbody, DataTableTd, DataTableTfoot, DataTableTh, DataTableThead, DataTableTr, };
 export default DataTable;
-export type { DataTableProps, DataTableCaptionProps, DataTableTbodyProps, DataTableTdProps, DataTableThProps, DataTableTheadProps, DataTableTrProps, };
+export type { DataTableCaptionProps, DataTableProps, DataTableTbodyProps, DataTableTdProps, DataTableTfootProps, DataTableTheadProps, DataTableThProps, DataTableTrProps, };

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

@@ -9,18 +9,30 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 import { cl } from "../../../utils/helpers/index.js";
+import { useMergeRefs } from "../../../utils/hooks/index.js";
 import { DataTableCaption, } from "../caption/DataTableCaption.js";
 import { DataTableTbody, } from "../tbody/DataTableTbody.js";
 import { DataTableTd } from "../td/DataTableTd.js";
+import { DataTableTfoot, } from "../tfoot/DataTableTfoot.js";
 import { DataTableTh } from "../th/DataTableTh.js";
 import { DataTableThead, } from "../thead/DataTableThead.js";
 import { DataTableTr } from "../tr/DataTableTr.js";
+import { useTableKeyboardNav } from "./useTableKeyboardNav.js";
 const DataTable = forwardRef((_a, forwardedRef) => {
-    var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement("div", { className: "aksel-data-table__wrapper" },
-        React.createElement("table", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table", className) }))));
+    var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent"]);
+    const [tableRef, setTableRef] = useState(null);
+    const mergedRef = useMergeRefs(forwardedRef, setTableRef);
+    const { onFocus, tableTabIndex } = useTableKeyboardNav(tableRef, {
+        enabled: withKeyboardNav,
+    });
+    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 })))));
 });
 DataTable.Caption = DataTableCaption;
 DataTable.Thead = DataTableThead;
@@ -28,6 +40,7 @@ DataTable.Tbody = DataTableTbody;
 DataTable.Th = DataTableTh;
 DataTable.Tr = DataTableTr;
 DataTable.Td = DataTableTd;
-export { DataTable, DataTableCaption, DataTableTbody, DataTableTd, DataTableTh, DataTableThead, DataTableTr, };
+DataTable.Tfoot = DataTableTfoot;
+export { DataTable, DataTableCaption, DataTableTbody, DataTableTd, DataTableTfoot, DataTableTh, DataTableThead, DataTableTr, };
 export default DataTable;
 //# sourceMappingURL=DataTableRoot.js.map

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,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,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,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AAyFvE,MAAM,SAAS,GAAG,UAAU,CAC1B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,6BAAK,SAAS,EAAC,2BAA2B;QACxC,+CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,IAC5C,CACE,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;AAE3B,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,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;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"}

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

@@ -0,0 +1,7 @@
+declare function useTableKeyboardNav(tableRef: HTMLTableElement | null, { enabled }: {
+    enabled: boolean;
+}): {
+    tableTabIndex: number | undefined;
+    onFocus: () => Element | null | undefined;
+};
+export { useTableKeyboardNav };

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

@@ -0,0 +1,151 @@
+import { useEffect, useRef, useState } 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,
+    });
+    /**
+     * TODO:
+     * - Save original tabIndex of cells and restore when navigating away?
+     */
+    const navigateByArrowKey = useEventCallback((delta) => {
+        const currentCell = getActiveCell(tableRef, activeCell);
+        if (!currentCell || !tableRef) {
+            return null;
+        }
+        const { grid, positions, maxCols } = ensureTableGrid(tableRef, gridCacheRef.current);
+        const currentPos = positions.get(currentCell);
+        if (!currentPos) {
+            return null;
+        }
+        const nextCell = findNextCell(grid, currentPos, delta, currentCell, maxCols);
+        return nextCell
+            ? focusCellAndUpdateTabIndex(nextCell, currentCell)
+            : null;
+    });
+    /**
+     * 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
+     *
+     */
+    const onKeyDown = useEventCallback((event) => {
+        /* Stops keydown from moving if we can assume that you are currently editing input, select etc */
+        if (shouldBlockArrowKeyNavigation(event)) {
+            return;
+        }
+        let newCell = null;
+        const delta = getDeltaFromKey(event.key);
+        if (delta) {
+            event.preventDefault();
+            newCell = navigateByArrowKey(delta);
+        }
+        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) => {
+        var _a;
+        const target = event.target;
+        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;
+        }
+        const updatedCell = focusCellAndUpdateTabIndex(newCell, activeCell, {
+            shouldFocus: false,
+        });
+        if (updatedCell) {
+            setActiveCell(updatedCell);
+        }
+    });
+    /**
+     * 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.
+     */
+    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);
+        return () => {
+            tableRef.removeEventListener("keydown", onKeyDown);
+            tableRef.removeEventListener("focusin", onFocusIn);
+        };
+    }, [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]);
+    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;
+        },
+    };
+}
+export { useTableKeyboardNav };
+//# sourceMappingURL=useTableKeyboardNav.js.map

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

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

package/esm/data/table/td/DataTableTd.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
-type DataTableTdProps = React.HTMLAttributes<HTMLTableCellElement>;
+interface DataTableTdProps extends React.HTMLAttributes<HTMLTableCellElement> {
+    /**
+     * TODO: Shouldnt be needed to declare these here... But getting type-errors if not
+     */
+    colSpan?: number;
+    rowSpan?: number;
+}
 declare const DataTableTd: React.ForwardRefExoticComponent<DataTableTdProps & React.RefAttributes<HTMLTableCellElement>>;
 export { DataTableTd };
 export type { DataTableTdProps };

package/esm/data/table/td/DataTableTd.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTd.js","sourceRoot":"","sources":["../../../../src/data/table/td/DataTableTd.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAI5C,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;QAAlD,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC;QAEhD,iCAAM,QAAQ,CAAO,CAClB,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"DataTableTd.js","sourceRoot":"","sources":["../../../../src/data/table/td/DataTableTd.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAU5C,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;QAAlD,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC;QAEhD,iCAAM,QAAQ,CAAO,CAClB,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/esm/data/table/tfoot/DataTableTfoot.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+type DataTableTfootProps = React.HTMLAttributes<HTMLTableSectionElement>;
+declare const DataTableTfoot: React.ForwardRefExoticComponent<DataTableTfootProps & React.RefAttributes<HTMLTableSectionElement>>;
+export { DataTableTfoot };
+export type { DataTableTfootProps };

package/esm/data/table/tfoot/DataTableTfoot.js

@@ -0,0 +1,19 @@
+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 } from "react";
+import { cl } from "../../../utils/helpers/index.js";
+const DataTableTfoot = forwardRef((_a, forwardedRef) => {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    return (React.createElement("tfoot", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__tfoot", className) }), children));
+});
+export { DataTableTfoot };
+//# sourceMappingURL=DataTableTfoot.js.map

package/esm/data/table/tfoot/DataTableTfoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableTfoot.js","sourceRoot":"","sources":["../../../../src/data/table/tfoot/DataTableTfoot.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAI5C,MAAM,cAAc,GAAG,UAAU,CAC/B,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;QAAlD,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,OAAO,CACL,+CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,KAElD,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/esm/data/table/th/DataTableTh.d.ts

@@ -1,15 +1,25 @@
 import React from "react";
-type DataTableThProps = React.HTMLAttributes<HTMLTableCellElement> & {
+interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
     resizeHandler?: React.MouseEventHandler<HTMLButtonElement>;
-    isPinned?: boolean;
-    pinningHandler?: React.MouseEventHandler<HTMLButtonElement>;
     size?: number;
-};
-declare const DataTableTh: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCellElement> & {
-    resizeHandler?: React.MouseEventHandler<HTMLButtonElement>;
-    isPinned?: boolean;
-    pinningHandler?: React.MouseEventHandler<HTMLButtonElement>;
-    size?: number;
-} & React.RefAttributes<HTMLTableCellElement>>;
+    sortDirection?: "asc" | "desc" | "none" | false;
+    onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
+    render?: {
+        filterMenu?: {
+            title: string;
+            content: React.ReactNode;
+        };
+    };
+    /**
+     * TODO: Shouldnt be needed to declare these here... But getting type-errors if not
+     */
+    colSpan?: number;
+    rowSpan?: number;
+}
+/**
+ * TODO:
+ * - Plan for pinning: Move it into "settings" dialog like here: https://cloudscape.design/examples/react/table.html
+ */
+declare const DataTableTh: React.ForwardRefExoticComponent<DataTableThProps & React.RefAttributes<HTMLTableCellElement>>;
 export { DataTableTh };
 export type { DataTableThProps };