@navikt/ds-react 8.3.0 → 8.4.1

package/cjs/data/table/helpers/table-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-focus.js","sourceRoot":"","sources":["../../../../src/data/table/helpers/table-focus.ts"],"names":[],"mappings":";;AAwGS,8BAAS;AAAE,gEAA0B;AAAE,gDAAkB;AAxGlE;;;;;;;GAOG;AACH,SAAS,kBAAkB,CAAC,IAAa;IACvC,MAAM,EAAE,GAAG,IAA0B,CAAC;IACtC,IAAI,CAAC,EAAE,IAAI,eAAe,CAAC,EAAE,CAAC,EAAE,CAAC;QAC/B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,UAAU,GAAG,EAAE,CAAC,gBAAgB,CACpC,oGAAoG,CACrG,CAAC;IAEF,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC5B,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;QAC9C,MAAM,SAAS,GAAG,UAAU,CAAC,CAAC,CAAgB,CAAC;QAC/C,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAE,CAAC;YACjE,OAAO,SAAS,CAAC;QACnB,CAAC;IACH,CAAC;IAED,OAAO,EAAE,CAAC;AACZ,CAAC;AAED;;;GAGG;AACH,SAAS,eAAe,CAAC,EAAe;IACtC,IAAI,EAAE,CAAC,MAAM,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC;IAC1C,OAAO,KAAK,CAAC,OAAO,KAAK,MAAM,IAAI,KAAK,CAAC,UAAU,KAAK,QAAQ,CAAC;AACnE,CAAC;AAED,SAAS,iBAAiB,CAAC,EAAe;IACxC,IAAI,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,EAAE,CAAC;QAChD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,EAAE,CAAC,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAC;QACrC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IACE,EAAE,YAAY,iBAAiB;QAC/B,EAAE,YAAY,gBAAgB;QAC9B,EAAE,YAAY,iBAAiB;QAC/B,EAAE,YAAY,mBAAmB,EACjC,CAAC;QACD,OAAO,EAAE,CAAC,QAAQ,CAAC;IACrB,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,SAAS,CAAC,IAAa;IAC9B,MAAM,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7C,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAI,WAAW,KAAK,IAAI,EAAE,CAAC;QACxB,IAAoB,CAAC,QAAQ,GAAG,CAAC,CAAC;IACrC,CAAC;IAED,WAAW,CAAC,KAAK,CAAC;QAChB,aAAa,EAAE,IAAI;KACpB,CAAC,CAAC;IAEH,WAAW,CAAC,cAAc,CAAC;QACzB,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,SAAS;KAClB,CAAC,CAAC;IACH,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,0BAA0B,CACjC,QAAiB,EACjB,YAA6B,EAC7B,EAAE,WAAW,GAAG,IAAI,KAAgC,EAAE;IAEtD,IAAI,YAAY,IAAI,YAAY,KAAK,QAAQ,EAAE,CAAC;QAC7C,YAA4B,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,OAAO,SAAS,CAAC,QAAQ,CAAC,CAAC;AAC7B,CAAC"}

package/cjs/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/cjs/data/table/helpers/table-grid-nav.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildTableGrid = buildTableGrid;
+exports.ensureTableGrid = ensureTableGrid;
+exports.findNextCell = findNextCell;
+const table_focus_1 = require("./table-focus");
+/**
+ * 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 && !!(0, table_focus_1.getFocusableTarget)(cell)) {
+            return cell;
+        }
+        x += delta.x;
+        y += delta.y;
+    }
+    return null;
+}
+//# sourceMappingURL=table-grid-nav.js.map

package/cjs/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/cjs/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/cjs/data/table/helpers/table-keyboard.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDeltaFromKey = getDeltaFromKey;
+exports.shouldBlockArrowKeyNavigation = shouldBlockArrowKeyNavigation;
+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;
+    }
+}
+//# sourceMappingURL=table-keyboard.js.map

package/cjs/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":"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"}

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

@@ -8,8 +8,20 @@ import { DataTableThead, type DataTableTheadProps } from "../thead/DataTableThea
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
 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>> {
+interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>> {
     /**
      * @see 🏷️ {@link DataTableCaptionProps}
      * @example
@@ -102,6 +114,6 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTab
     Tfoot: typeof DataTableTfoot;
 }
 declare const DataTable: DataTableRootComponent;
-export { DataTable, DataTableCaption, DataTableTbody, DataTableTd, DataTableTh, DataTableThead, DataTableTr, DataTableTfoot, };
+export { DataTable, DataTableCaption, DataTableTbody, DataTableTd, DataTableTfoot, DataTableTh, DataTableThead, DataTableTr, };
 export default DataTable;
-export type { DataTableProps, DataTableCaptionProps, DataTableTbodyProps, DataTableTdProps, DataTableThProps, DataTableTheadProps, DataTableTrProps, DataTableTfootProps, };
+export type { DataTableCaptionProps, DataTableProps, DataTableTbodyProps, DataTableTdProps, DataTableTfootProps, DataTableTheadProps, DataTableThProps, DataTableTrProps, };

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

@@ -44,9 +44,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataTableTfoot = exports.DataTableTr = exports.DataTableThead = exports.DataTableTh = exports.DataTableTd = exports.DataTableTbody = exports.DataTableCaption = exports.DataTable = void 0;
+exports.DataTableTr = exports.DataTableThead = exports.DataTableTh = exports.DataTableTfoot = exports.DataTableTd = exports.DataTableTbody = exports.DataTableCaption = exports.DataTable = void 0;
 const react_1 = __importStar(require("react"));
 const helpers_1 = require("../../../utils/helpers");
+const hooks_1 = require("../../../utils/hooks");
 const DataTableCaption_1 = require("../caption/DataTableCaption");
 Object.defineProperty(exports, "DataTableCaption", { enumerable: true, get: function () { return DataTableCaption_1.DataTableCaption; } });
 const DataTableTbody_1 = require("../tbody/DataTableTbody");
@@ -61,10 +62,20 @@ const DataTableThead_1 = require("../thead/DataTableThead");
 Object.defineProperty(exports, "DataTableThead", { enumerable: true, get: function () { return DataTableThead_1.DataTableThead; } });
 const DataTableTr_1 = require("../tr/DataTableTr");
 Object.defineProperty(exports, "DataTableTr", { enumerable: true, get: function () { return DataTableTr_1.DataTableTr; } });
+const useTableKeyboardNav_1 = require("./useTableKeyboardNav");
 const DataTable = (0, react_1.forwardRef)((_a, forwardedRef) => {
-    var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement("div", { className: "aksel-data-table__wrapper" },
-        react_1.default.createElement("table", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.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] = (0, react_1.useState)(null);
+    const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, setTableRef);
+    const { onFocus, tableTabIndex } = (0, useTableKeyboardNav_1.useTableKeyboardNav)(tableRef, {
+        enabled: withKeyboardNav,
+    });
+    return (react_1.default.createElement("div", { className: "aksel-data-table__border-wrapper" },
+        react_1.default.createElement("div", { className: "aksel-data-table__scroll-wrapper" },
+            react_1.default.createElement("table", Object.assign({}, rest, { ref: mergedRef, className: (0, helpers_1.cl)("aksel-data-table", className, {
+                    "aksel-data-table--zebra-stripes": zebraStripes,
+                    "aksel-data-table--truncate-content": truncateContent,
+                }), "data-density": rowDensity, tabIndex: tableTabIndex, onFocus: onFocus })))));
 });
 exports.DataTable = DataTable;
 DataTable.Caption = DataTableCaption_1.DataTableCaption;

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAC5C,kEAGqC;AA4InC,iGA9IA,mCAAgB,OA8IA;AA3IlB,4DAGiC;AAyI/B,+FA3IA,+BAAc,OA2IA;AAxIhB,mDAAuE;AAyIrE,4FAzIO,yBAAW,OAyIP;AAxIb,4DAGiC;AAyI/B,+FA3IA,+BAAc,OA2IA;AAxIhB,mDAAuE;AAqIrE,4FArIO,yBAAW,OAqIP;AApIb,4DAGiC;AAkI/B,+FApIA,+BAAc,OAoIA;AAjIhB,mDAAuE;AAkIrE,4FAlIO,yBAAW,OAkIP;AA7Bb,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,uCAAK,SAAS,EAAC,2BAA2B;QACxC,yDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,kBAAkB,EAAE,SAAS,CAAC,IAC5C,CACE,CACP,CAAC;AACJ,CAAC,CACwB,CAAC;AAW1B,8BAAS;AATX,SAAS,CAAC,OAAO,GAAG,mCAAgB,CAAC;AACrC,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AACjC,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AACjC,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AAYjC,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AACpD,oDAA4C;AAC5C,gDAAoD;AACpD,kEAGqC;AAkLnC,iGApLA,mCAAgB,OAoLA;AAjLlB,4DAGiC;AA+K/B,+FAjLA,+BAAc,OAiLA;AA9KhB,mDAAuE;AA+KrE,4FA/KO,yBAAW,OA+KP;AA9Kb,4DAGiC;AA4K/B,+FA9KA,+BAAc,OA8KA;AA3KhB,mDAAuE;AA4KrE,4FA5KO,yBAAW,OA4KP;AA3Kb,4DAGiC;AAyK/B,+FA3KA,+BAAc,OA2KA;AAxKhB,mDAAuE;AAyKrE,4FAzKO,yBAAW,OAyKP;AAxKb,+DAA4D;AAiH5D,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,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,IAAA,gBAAQ,EAA0B,IAAI,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE1D,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,GAAG,IAAA,yCAAmB,EAAC,QAAQ,EAAE;QAC/D,OAAO,EAAE,eAAe;KACzB,CAAC,CAAC;IAEH,OAAO,CACL,uCAAK,SAAS,EAAC,kCAAkC;QAC/C,uCAAK,SAAS,EAAC,kCAAkC;YAC/C,yDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAA,YAAE,EAAC,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;AAW1B,8BAAS;AATX,SAAS,CAAC,OAAO,GAAG,mCAAgB,CAAC;AACrC,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AACjC,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AACjC,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,yBAAW,CAAC;AAC3B,SAAS,CAAC,KAAK,GAAG,+BAAc,CAAC;AAYjC,kBAAe,SAAS,CAAC"}

package/cjs/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/cjs/data/table/root/useTableKeyboardNav.js

@@ -0,0 +1,153 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTableKeyboardNav = useTableKeyboardNav;
+const react_1 = require("react");
+const hooks_1 = require("../../../utils/hooks");
+const table_cell_1 = require("../helpers/table-cell");
+const table_focus_1 = require("../helpers/table-focus");
+const table_grid_nav_1 = require("../helpers/table-grid-nav");
+const table_keyboard_1 = require("../helpers/table-keyboard");
+function useTableKeyboardNav(tableRef, { enabled }) {
+    const [activeCell, setActiveCell] = (0, react_1.useState)(null);
+    const activeCellRef = (0, react_1.useRef)(null);
+    activeCellRef.current = activeCell;
+    const observerRef = (0, react_1.useRef)(null);
+    const gridCacheRef = (0, react_1.useRef)({
+        grid: null,
+        dirty: true,
+    });
+    /**
+     * TODO:
+     * - Save original tabIndex of cells and restore when navigating away?
+     */
+    const navigateByArrowKey = (0, hooks_1.useEventCallback)((delta) => {
+        const currentCell = (0, table_cell_1.getActiveCell)(tableRef, activeCell);
+        if (!currentCell || !tableRef) {
+            return null;
+        }
+        const { grid, positions, maxCols } = (0, table_grid_nav_1.ensureTableGrid)(tableRef, gridCacheRef.current);
+        const currentPos = positions.get(currentCell);
+        if (!currentPos) {
+            return null;
+        }
+        const nextCell = (0, table_grid_nav_1.findNextCell)(grid, currentPos, delta, currentCell, maxCols);
+        return nextCell
+            ? (0, table_focus_1.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 = (0, hooks_1.useEventCallback)((event) => {
+        /* Stops keydown from moving if we can assume that you are currently editing input, select etc */
+        if ((0, table_keyboard_1.shouldBlockArrowKeyNavigation)(event)) {
+            return;
+        }
+        let newCell = null;
+        const delta = (0, table_keyboard_1.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 = (0, hooks_1.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 = (0, table_focus_1.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.
+     */
+    (0, react_1.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]);
+    (0, react_1.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.
+     */
+    (0, react_1.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 = (0, table_cell_1.getFirstCell)(tableRef);
+            return firstCell ? (0, table_focus_1.focusCell)(firstCell) : null;
+        },
+    };
+}
+//# sourceMappingURL=useTableKeyboardNav.js.map

package/cjs/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/cjs/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/cjs/data/table/td/DataTableTd.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTd.js","sourceRoot":"","sources":["../../../../src/data/table/td/DataTableTd.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAI5C,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;QAAlD,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,OAAO,CACL,sDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,CAAC;QAEhD,2CAAM,QAAQ,CAAO,CAClB,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,kCAAW"}
+{"version":3,"file":"DataTableTd.js","sourceRoot":"","sources":["../../../../src/data/table/td/DataTableTd.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAU5C,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;QAAlD,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,OAAO,CACL,sDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,CAAC;QAEhD,2CAAM,QAAQ,CAAO,CAClB,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,kCAAW"}

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

@@ -1,6 +1,6 @@
 import React from "react";
-type DataTableThProps = React.HTMLAttributes<HTMLTableCellElement> & {
-    resizeHandler?: React.MouseEventHandler<HTMLButtonElement>;
+interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
+    resizeHandler?: (event: React.MouseEvent<HTMLButtonElement> | React.TouchEvent<HTMLButtonElement>) => void;
     size?: number;
     sortDirection?: "asc" | "desc" | "none" | false;
     onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
@@ -10,22 +10,16 @@ type DataTableThProps = React.HTMLAttributes<HTMLTableCellElement> & {
             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<React.HTMLAttributes<HTMLTableCellElement> & {
-    resizeHandler?: React.MouseEventHandler<HTMLButtonElement>;
-    size?: number;
-    sortDirection?: "asc" | "desc" | "none" | false;
-    onSortChange?: (direction: "asc" | "desc" | "none", event: Event) => void;
-    render?: {
-        filterMenu?: {
-            title: string;
-            content: React.ReactNode;
-        };
-    };
-} & React.RefAttributes<HTMLTableCellElement>>;
+declare const DataTableTh: React.ForwardRefExoticComponent<DataTableThProps & React.RefAttributes<HTMLTableCellElement>>;
 export { DataTableTh };
 export type { DataTableThProps };

package/cjs/data/table/th/DataTableTh.js

@@ -47,8 +47,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableTh = void 0;
 const react_1 = __importStar(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
-const stack_1 = require("../../../layout/stack");
-const action_menu_1 = require("../../../overlays/action-menu");
+const action_menu_1 = require("../../../action-menu");
+const stack_1 = require("../../../primitives/stack");
 const helpers_1 = require("../../../utils/helpers");
 const DataTableThActions_1 = require("./DataTableThActions");
 const DataTableThSortHandle_1 = require("./DataTableThSortHandle");
@@ -72,7 +72,9 @@ const DataTableTh = (0, react_1.forwardRef)((_a, forwardedRef) => {
                     react_1.default.createElement(action_menu_1.ActionMenu.Sub, null,
                         react_1.default.createElement(action_menu_1.ActionMenu.SubTrigger, { icon: react_1.default.createElement(aksel_icons_1.FunnelIcon, { "aria-hidden": true }) }, filterMenu.title),
                         react_1.default.createElement(action_menu_1.ActionMenu.SubContent, null, filterMenu.content)))))),
-        resizeHandler && (react_1.default.createElement("button", { onMouseDown: resizeHandler, onMouseUp: resizeHandler, className: (0, helpers_1.cl)("aksel-data-table__th-resize-handle"), "data-color": "neutral" }))));
+        resizeHandler && (react_1.default.createElement("button", { 
+            // TODO: Should probably not be a button since it doesn't have onClick
+            onMouseDown: resizeHandler, onTouchStart: resizeHandler, className: "aksel-data-table__th-resize-handle" }))));
 });
 exports.DataTableTh = DataTableTh;
 //# sourceMappingURL=DataTableTh.js.map

package/cjs/data/table/th/DataTableTh.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTh.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableTh.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,qDAA2E;AAC3E,iDAAuD;AACvD,+DAA2D;AAC3D,oDAA4C;AAC5C,6DAA0D;AAC1D,mEAAgE;AAehE;;;GAGG;AACH,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CACE,EAUC,EACD,YAAY,EACZ,EAAE;QAZF,EACE,SAAS,EACT,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,KAAK,EACL,MAAM,OAEP,EADI,IAAI,cATT,sGAUC,CADQ;IAIT,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IAEpC,OAAO,CACL,sDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,CAAC,EAChD,KAAK,kBAAI,KAAK,EAAE,IAAI,IAAK,KAAK;QAE9B,8BAAC,cAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAC,IAAI,EAAE,KAAK;YAC9C,uCAAK,SAAS,EAAC,8BAA8B,IAAE,QAAQ,CAAO;YAC9D,8BAAC,6CAAqB,IACpB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,GAC1B;YACF,8BAAC,cAAM,OAAG;YAEV,8BAAC,uCAAkB;gBAGhB,aAAa,IAAI,CAChB,8BAAC,wBAAU,CAAC,KAAK,IAAC,KAAK,EAAC,WAAW;oBACjC,8BAAC,wBAAU,CAAC,IAAI,IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,MAAM,EAAE,KAAK,CAAC,EAClD,IAAI,EAAE,8BAAC,wBAAU,0BAAe,IAE/B,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CACrC;oBAClB,8BAAC,wBAAU,CAAC,IAAI,IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,KAAK,EAAE,KAAK,CAAC,EACjD,IAAI,EAAE,8BAAC,0BAAY,0BAAe,IAEjC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CACpC,CACD,CACpB;gBACA,UAAU,IAAI,CACb,8BAAC,wBAAU,CAAC,KAAK,IAAC,KAAK,EAAC,QAAQ;oBAC9B,8BAAC,wBAAU,CAAC,GAAG;wBACb,8BAAC,wBAAU,CAAC,UAAU,IAAC,IAAI,EAAE,8BAAC,wBAAU,0BAAe,IACpD,UAAU,CAAC,KAAK,CACK;wBACxB,8BAAC,wBAAU,CAAC,UAAU,QAEnB,UAAU,CAAC,OAAO,CACG,CACT,CACA,CACpB,CACkB,CACd;QAER,aAAa,IAAI,CAChB,0CACE,WAAW,EAAE,aAAa,EAC1B,SAAS,EAAE,aAAa,EACxB,SAAS,EAAE,IAAA,YAAE,EAAC,oCAAoC,CAAC,gBACxC,SAAS,GACpB,CACH,CACE,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,kCAAW"}
+{"version":3,"file":"DataTableTh.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableTh.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,qDAA2E;AAC3E,sDAAkD;AAClD,qDAA2D;AAC3D,oDAA4C;AAC5C,6DAA0D;AAC1D,mEAAgE;AAwBhE;;;GAGG;AACH,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CACE,EAUC,EACD,YAAY,EACZ,EAAE;QAZF,EACE,SAAS,EACT,QAAQ,EACR,aAAa,EACb,IAAI,EACJ,aAAa,EACb,YAAY,EACZ,KAAK,EACL,MAAM,OAEP,EADI,IAAI,cATT,sGAUC,CADQ;IAIT,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,IAAI,EAAE,CAAC;IAEpC,OAAO,CACL,sDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,CAAC,EAChD,KAAK,kBAAI,KAAK,EAAE,IAAI,IAAK,KAAK;QAE9B,8BAAC,cAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,SAAS,EAAC,IAAI,EAAE,KAAK;YAC9C,uCAAK,SAAS,EAAC,8BAA8B,IAAE,QAAQ,CAAO;YAE9D,8BAAC,6CAAqB,IACpB,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,GAC1B;YACF,8BAAC,cAAM,OAAG;YAEV,8BAAC,uCAAkB;gBAGhB,aAAa,IAAI,CAChB,8BAAC,wBAAU,CAAC,KAAK,IAAC,KAAK,EAAC,WAAW;oBACjC,8BAAC,wBAAU,CAAC,IAAI,IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,MAAM,EAAE,KAAK,CAAC,EAClD,IAAI,EAAE,8BAAC,wBAAU,0BAAe,IAE/B,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CACrC;oBAClB,8BAAC,wBAAU,CAAC,IAAI,IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAG,KAAK,EAAE,KAAK,CAAC,EACjD,IAAI,EAAE,8BAAC,0BAAY,0BAAe,IAEjC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CACpC,CACD,CACpB;gBACA,UAAU,IAAI,CACb,8BAAC,wBAAU,CAAC,KAAK,IAAC,KAAK,EAAC,QAAQ;oBAC9B,8BAAC,wBAAU,CAAC,GAAG;wBACb,8BAAC,wBAAU,CAAC,UAAU,IAAC,IAAI,EAAE,8BAAC,wBAAU,0BAAe,IACpD,UAAU,CAAC,KAAK,CACK;wBACxB,8BAAC,wBAAU,CAAC,UAAU,QAEnB,UAAU,CAAC,OAAO,CACG,CACT,CACA,CACpB,CACkB,CACd;QAER,aAAa,IAAI,CAChB;YACE,sEAAsE;YACtE,WAAW,EAAE,aAAa,EAC1B,YAAY,EAAE,aAAa,EAC3B,SAAS,EAAC,oCAAoC,GAC9C,CACH,CACE,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,kCAAW"}

package/cjs/data/table/th/DataTableThActions.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableThActions = DataTableThActions;
 const react_1 = __importDefault(require("react"));
 const aksel_icons_1 = require("@navikt/aksel-icons");
+const action_menu_1 = require("../../../action-menu");
 const button_1 = require("../../../button");
-const action_menu_1 = require("../../../overlays/action-menu");
 function DataTableThActions({ children }) {
     const [open, setOpen] = react_1.default.useState(false);
     /* TODO: Fix this */

package/cjs/data/table/th/DataTableThActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableThActions.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableThActions.tsx"],"names":[],"mappings":";;;;;AA+BS,gDAAkB;AA/B3B,kDAA0B;AAC1B,qDAA8D;AAC9D,4CAAyC;AACzC,+DAA2D;AAE3D,SAAS,kBAAkB,CAAC,EAAE,QAAQ,EAAkC;IACtE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,oBAAoB;IACpB,8DAA8D;IAC9D,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,8BAAC,wBAAU,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO;QAC3C,8BAAC,wBAAU,CAAC,OAAO;YACjB,8BAAC,eAAM,kBACM,SAAS,EACpB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,8BAAC,qCAAuB,IAAC,KAAK,EAAC,uBAAkB,GAAG,EAC1D,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,mBACd,IAAI,EACnB,SAAS,EAAC,oCAAoC,GAC9C,CACiB;QACrB,8BAAC,wBAAU,CAAC,OAAO,QAAE,QAAQ,CAAsB,CACxC,CACd,CAAC;AACJ,CAAC"}
+{"version":3,"file":"DataTableThActions.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableThActions.tsx"],"names":[],"mappings":";;;;;AA+BS,gDAAkB;AA/B3B,kDAA0B;AAC1B,qDAA8D;AAC9D,sDAAkD;AAClD,4CAAyC;AAEzC,SAAS,kBAAkB,CAAC,EAAE,QAAQ,EAAkC;IACtE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,oBAAoB;IACpB,8DAA8D;IAC9D,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC;QAClD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,8BAAC,wBAAU,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO;QAC3C,8BAAC,wBAAU,CAAC,OAAO;YACjB,8BAAC,eAAM,kBACM,SAAS,EACpB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,8BAAC,qCAAuB,IAAC,KAAK,EAAC,uBAAkB,GAAG,EAC1D,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,mBACd,IAAI,EACnB,SAAS,EAAC,oCAAoC,GAC9C,CACiB;QACrB,8BAAC,wBAAU,CAAC,OAAO,QAAE,QAAQ,CAAsB,CACxC,CACd,CAAC;AACJ,CAAC"}

package/cjs/data/table/tr/DataTableTr.d.ts

@@ -1,5 +1,9 @@
 import React from "react";
-type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement>;
-declare const DataTableTr: React.ForwardRefExoticComponent<DataTableTrProps & React.RefAttributes<HTMLTableRowElement>>;
+type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+};
+declare const DataTableTr: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+} & React.RefAttributes<HTMLTableRowElement>>;
 export { DataTableTr };
 export type { DataTableTrProps };