@navikt/ds-react 8.9.0 → 8.10.0

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

@@ -10,66 +10,117 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 /** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
-import React, { forwardRef, useState } from "react";
-import { Checkbox } from "../../../form/checkbox/index.js";
+import React, { forwardRef, useMemo } from "react";
+import { Skeleton } from "../../../skeleton/index.js";
+import { useId } from "../../../utils-external/index.js";
 import { cl } from "../../../utils/helpers/index.js";
 import { useMergeRefs } from "../../../utils/hooks/index.js";
+import { DataTableBaseCell } from "../base-cell/DataTableBaseCell.js";
+import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader.js";
+import { DataTableEmptyState } from "../empty-state/DataTableEmptyState.js";
+import { useColumnOptions } from "../hooks/useColumnOptions.js";
+import { DataTableExpansionProvider, useDataTableExpansion, } from "../hooks/useTableExpansion.js";
 import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav.js";
 import { useTableSelection, } from "../hooks/useTableSelection.js";
+import { useTableSort } from "../hooks/useTableSort.js";
+import { DataTableLoadingState } from "../loading-state/DataTableLoadingState.js";
 import { DataTableTbody } from "../tbody/DataTableTbody.js";
-import { DataTableTd } from "../td/DataTableTd.js";
-import { DataTableTh } from "../th/DataTableTh.js";
 import { DataTableThead } from "../thead/DataTableThead.js";
 import { DataTableTr } from "../tr/DataTableTr.js";
-import { DataTableContextProvider } from "./DataTableRoot.context.js";
+import { DataTableContextProvider, useDataTableContext, } from "./DataTableRoot.context.js";
 function DataTableAutoInner(_a, forwardedRef) {
-    var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true, shouldBlockNavigation, layout = "fixed", selectionMode: selectionModeProp = "none", selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys = [], data, columnDefinitions, getRowId } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent", "shouldBlockNavigation", "layout", "selectionMode", "selectedKeys", "defaultSelectedKeys", "onSelectionChange", "disabledKeys", "data", "columnDefinitions", "getRowId"]);
-    const [tableRef, setTableRef] = useState(null);
-    const mergedRef = useMergeRefs(forwardedRef, setTableRef);
-    const { tabIndex } = useTableKeyboardNav(tableRef, {
+    var { className, id, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true, shouldBlockNavigation, layout = "fixed", selectionMode: selectionModeProp = "none", selectedKeys, defaultSelectedKeys, onSelectionChange, disabledSelectionKeys = [], data, columnDefinitions, getRowId, stickyColumns, stickyHeader = false, sort: sortProp, defaultSort = [], onSortChange, onRowClick, emptyState, isLoading = false, loadingState, loadingRows, loadingLabel = "Laster innhold", disableRowSelectionOnClick = false, getDetailsPanelContent, getDetailsPanelHeight, showExpandAll = false, detailsPanelRowIds, defaultDetailsPanelRowIds, onDetailsPanelChange } = _a, rest = __rest(_a, ["className", "id", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent", "shouldBlockNavigation", "layout", "selectionMode", "selectedKeys", "defaultSelectedKeys", "onSelectionChange", "disabledSelectionKeys", "data", "columnDefinitions", "getRowId", "stickyColumns", "stickyHeader", "sort", "defaultSort", "onSortChange", "onRowClick", "emptyState", "isLoading", "loadingState", "loadingRows", "loadingLabel", "disableRowSelectionOnClick", "getDetailsPanelContent", "getDetailsPanelHeight", "showExpandAll", "detailsPanelRowIds", "defaultDetailsPanelRowIds", "onDetailsPanelChange"]);
+    const { tabIndex, setTableRef } = useTableKeyboardNav({
         enabled: withKeyboardNav,
         shouldBlockNavigation,
     });
-    const resolvedGetRowId = getRowId !== null && getRowId !== void 0 ? getRowId : ((_row, index) => index);
-    const selection = useTableSelection({
+    const { sortState, onSortClick } = useTableSort({
+        defaultSort,
+        onSortChange,
+        sort: sortProp,
+    });
+    const mergedRef = useMergeRefs(forwardedRef, setTableRef);
+    const allRowKeys = useMemo(() => {
+        const resolvedGetRowId = (item, index) => { var _a; return (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item, index)) !== null && _a !== void 0 ? _a : index; };
+        return data.map((item, index) => resolvedGetRowId(item, index));
+    }, [data, getRowId]);
+    const tableSelectionState = useTableSelection({
         selectionMode: selectionModeProp,
         selectedKeys,
         defaultSelectedKeys,
         onSelectionChange,
-        disabledKeys,
-        data,
-        getRowId: resolvedGetRowId,
+        disabledSelectionKeys,
+        allRowKeys,
+    });
+    const { columns, stickySelection } = useColumnOptions(columnDefinitions, {
+        stickyColumns,
+        selectionMode: tableSelectionState.selection.selectionMode,
     });
-    return (React.createElement(DataTableContextProvider, { layout: layout, withKeyboardNav: withKeyboardNav },
-        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), "data-zebra-stripes": zebraStripes, "data-truncate-content": truncateContent, "data-density": rowDensity, "data-layout": layout, tabIndex: tabIndex }),
-                    React.createElement(DataTableThead, null,
-                        React.createElement(DataTableTr, null,
-                            selection.selectionMode === "multiple" && (
-                            /* TODO: Overflow/focus is clipped. Alignment is off */
-                            /* TODO: Should not be resizable */
-                            React.createElement(DataTableTh, { textAlign: "center", width: "60px" },
-                                React.createElement(Checkbox, Object.assign({}, selection.getTheadCheckboxProps())))),
-                            selection.selectionMode === "single" && (React.createElement(DataTableTd, { align: "center", width: "60px" })),
-                            columnDefinitions.map((colDef, colDefIndex) => {
-                                return (React.createElement(DataTableTh
-                                /* TODO: Make these user-changable */
-                                , { 
-                                    /* TODO: Make these user-changable */
-                                    maxWidth: "400px", minWidth: "100px", defaultWidth: "100%", textAlign: "left", key: colDef.id || colDefIndex }, colDef.header));
+    const tableId = useId(id);
+    return (React.createElement(DataTableContextProvider, { layout: layout, withKeyboardNav: withKeyboardNav, selectionState: tableSelectionState, stickySelection: stickySelection, stickyHeader: stickyHeader, tableId: tableId, showLoadingSkeletons: isLoading && loadingState == null, onRowClick: onRowClick, disableRowSelectionOnClick: disableRowSelectionOnClick, isLoading: isLoading, showLoadingOverlay: isLoading && !loadingState && !loadingRows },
+        React.createElement(DataTableExpansionProvider, { detailsPanelRowIds: detailsPanelRowIds, defaultDetailsPanelRowIds: defaultDetailsPanelRowIds, onDetailsPanelChange: onDetailsPanelChange, allRowKeys: allRowKeys, getDetailsPanelContent: getDetailsPanelContent, getDetailsPanelHeight: getDetailsPanelHeight, showExpandAll: showExpandAll },
+            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), "data-zebra-stripes": zebraStripes, "data-truncate-content": truncateContent, "data-density": rowDensity, "data-layout": layout, "data-loading": isLoading || undefined, tabIndex: tabIndex, "aria-busy": isLoading || undefined }),
+                        React.createElement(DataTableThead, null,
+                            React.createElement(DataTableTr, null, columns.map(({ isSticky, colDef }) => {
+                                var _a, _b;
+                                const sortEntry = sortState.find((s) => s.columnId === colDef.id);
+                                const sortDirection = (_a = sortEntry === null || sortEntry === void 0 ? void 0 : sortEntry.direction) !== null && _a !== void 0 ? _a : "none";
+                                return (React.createElement(DataTableColumnHeader, { maxWidth: colDef.maxWidth, minWidth: colDef.minWidth, width: colDef.width, defaultWidth: (_b = colDef.defaultWidth) !== null && _b !== void 0 ? _b : "100%", textAlign: colDef.type === "number" ? "right" : "left", key: colDef.id, isSticky: isSticky, sortable: colDef.sortable, sortDirection: sortDirection, onSortClick: (event) => onSortClick(colDef.id, event) }, colDef.header));
                             }))),
-                    React.createElement(DataTableTbody, null, data.map((rowData, rowIndex) => {
-                        const rowId = selection.allKeys[rowIndex];
-                        return (React.createElement(DataTableTr, { key: rowId },
-                            selection.selectionMode === "multiple" && (React.createElement(DataTableTd, { align: "center", width: "60px" },
-                                React.createElement(Checkbox, Object.assign({}, selection.getRowCheckboxProps(rowId))))),
-                            selection.selectionMode === "single" && (React.createElement(DataTableTd, { align: "center", width: "60px" },
-                                React.createElement(Checkbox, Object.assign({}, selection.getRowRadioProps(rowId))))),
-                            columnDefinitions.map((colDef, colDefIndex) => {
-                                return (React.createElement(DataTableTd, { textAlign: "left", key: colDef.id || colDefIndex }, colDef.cell(rowData)));
-                            })));
-                    })))))));
+                        React.createElement(DataTableTbody, null,
+                            React.createElement(DataTableAutoTBodyContent, { columns: columns, data: data, allRowKeys: allRowKeys, loadingState: loadingState, loadingRows: loadingRows, loadingLabel: loadingLabel, emptyState: emptyState }))))))));
+}
+function DataTableAutoTBodyContent({ columns, data, allRowKeys, loadingState, loadingRows, loadingLabel, emptyState, }) {
+    const { isLoading } = useDataTableContext();
+    if (isLoading && loadingState != null) {
+        return (React.createElement(DataTableLoadingState, { colSpan: columns.length }, loadingState));
+    }
+    if (isLoading && loadingRows) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("tr", null,
+                React.createElement("td", { colSpan: columns.length, className: "aksel-sr-only" }, loadingLabel)),
+            Array.from({ length: loadingRows }, (_, rowIndex) => (React.createElement(DataTableTr, { key: `skeleton-row-${rowIndex}`, "aria-hidden": true }, columns.map(({ isSticky, colDef }, colDefIndex) => (React.createElement(DataTableBaseCell, { textAlign: colDef.type === "number" ? "right" : "left", key: colDef.id || colDefIndex, as: colDef.isRowHeader ? "th" : "td", isSticky: isSticky },
+                React.createElement(Skeleton, { variant: "text" })))))))));
+    }
+    if (data.length === 0 && emptyState !== undefined) {
+        return (React.createElement(DataTableEmptyState, { colSpan: columns.length }, emptyState));
+    }
+    const renderLoadingAnnoucement = isLoading && !loadingState && !loadingRows;
+    return data.map((rowData, rowIndex) => {
+        const rowId = allRowKeys[rowIndex];
+        return (React.createElement(React.Fragment, { key: rowId },
+            renderLoadingAnnoucement && (React.createElement("tr", null,
+                React.createElement("td", { colSpan: columns.length, className: "aksel-sr-only" }, loadingLabel))),
+            React.createElement(DataTableTr, { rowId: rowId }, columns.map(({ isSticky, colDef }, colDefIndex) => {
+                return (React.createElement(DataTableBaseCell
+                /* TODO: Make this configurable */
+                , { 
+                    /* TODO: Make this configurable */
+                    textAlign: colDef.type === "number" ? "right" : "left", key: colDef.id || colDefIndex, as: colDef.isRowHeader ? "th" : "td", isSticky: isSticky }, colDef.cell(rowData)));
+            })),
+            React.createElement(DataTableExpandedRow, { rowId: rowId, rowData: rowData, columnCount: columns.length })));
+    });
+}
+function DataTableExpandedRow({ rowId, rowData, columnCount, }) {
+    const { tableId } = useDataTableContext();
+    const expansionContext = useDataTableExpansion(false);
+    /* TODO: Is this the way we want to opt out? Might just be temp until auto and root is merged so they use same context */
+    if (!expansionContext) {
+        return null;
+    }
+    const { isExpanded, getDetailsPanelContent, getDetailsPanelHeight } = expansionContext;
+    if (!isExpanded(rowId)) {
+        return null;
+    }
+    const content = getDetailsPanelContent === null || getDetailsPanelContent === void 0 ? void 0 : getDetailsPanelContent(rowData);
+    if (!content) {
+        return null;
+    }
+    return (React.createElement("tr", null,
+        React.createElement("td", { id: `${tableId}-expansion-${rowId}`, colSpan: columnCount },
+            React.createElement("div", { style: { height: getDetailsPanelHeight === null || getDetailsPanelHeight === void 0 ? void 0 : getDetailsPanelHeight(rowData) } }, content))));
 }
 const DataTableAuto = forwardRef(DataTableAutoInner);
 export { DataTableAuto };

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

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

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

@@ -1,9 +1,30 @@
+import type { UseTableSelectionReturn } from "../hooks/useTableSelection.js";
 type DataTableContextProps = {
     layout: "fixed" | "auto";
     withKeyboardNav: boolean;
+    selectionState: UseTableSelectionReturn;
+    stickySelection: boolean;
+    stickyHeader: boolean;
+    tableId: string;
+    showLoadingSkeletons: boolean;
+    onRowClick?: (rowId: string | number, event: React.MouseEvent<HTMLTableRowElement>) => void;
+    disableRowSelectionOnClick: boolean;
+    isLoading?: boolean;
+    showLoadingOverlay: boolean;
 };
 declare const DataTableContextProvider: import("react").FC<DataTableContextProps & {
     children: React.ReactNode;
     ref?: never;
 }>, useDataTableContext: <S extends boolean = true>(strict?: S | undefined) => S extends true ? DataTableContextProps : DataTableContextProps | undefined;
-export { DataTableContextProvider, useDataTableContext };
+type DataTableLocation = "thead" | "tbody" | "tfoot";
+declare const DataTableLocationProvider: import("react").FC<{
+    location: DataTableLocation;
+} & {
+    children: React.ReactNode;
+    ref?: never;
+}>, useDataTableLocation: <S extends boolean = true>(strict?: S | undefined) => S extends true ? {
+    location: DataTableLocation;
+} : {
+    location: DataTableLocation;
+} | undefined;
+export { DataTableContextProvider, DataTableLocationProvider, useDataTableContext, useDataTableLocation, };

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

@@ -3,5 +3,9 @@ const { Provider: DataTableContextProvider, useContext: useDataTableContext } =
     name: "DataTableContext",
     errorMessage: "useDataTableContext must be used within DataTable",
 });
-export { DataTableContextProvider, useDataTableContext };
+const { Provider: DataTableLocationProvider, useContext: useDataTableLocation, } = createStrictContext({
+    name: "DataTableLocation",
+    errorMessage: "Some component is using table context outside of Thead, Tbody or Tfoot. Please make sure to wrap it in the appropriate component.",
+});
+export { DataTableContextProvider, DataTableLocationProvider, useDataTableContext, useDataTableLocation, };
 //# sourceMappingURL=DataTableRoot.context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRoot.context.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAO7D,MAAM,EAAE,QAAQ,EAAE,wBAAwB,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAC3E,mBAAmB,CAAwB;IACzC,IAAI,EAAE,kBAAkB;IACxB,YAAY,EAAE,mDAAmD;CAClE,CAAC,CAAC;AAEL,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"DataTableRoot.context.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAoB7D,MAAM,EAAE,QAAQ,EAAE,wBAAwB,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAC3E,mBAAmB,CAAwB;IACzC,IAAI,EAAE,kBAAkB;IACxB,YAAY,EAAE,mDAAmD;CAClE,CAAC,CAAC;AAIL,MAAM,EACJ,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,oBAAoB,GACjC,GAAG,mBAAmB,CAAkC;IACvD,IAAI,EAAE,mBAAmB;IACzB,YAAY,EACV,mIAAmI;CACtI,CAAC,CAAC;AAEH,OAAO,EACL,wBAAwB,EACxB,yBAAyB,EACzB,mBAAmB,EACnB,oBAAoB,GACrB,CAAC"}

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

@@ -108,12 +108,6 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTab
      * @see 🏷️ {@link DataTableThProps}
      * @example
      * ```jsx
-     * <DataTable>
-     *   <DataTable.Thead>
-     *     <DataTable.Th>Header 1</DataTable.Th>
-     *     <DataTable.Th>Header 2</DataTable.Th>
-     *   </DataTable.Thead>
-     * </DataTable>
      * ```
      */
     Th: typeof DataTableTh;

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

@@ -9,12 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useState } from "react";
+import React, { forwardRef } from "react";
+import { useId } from "../../../utils-external/index.js";
 import { cl } from "../../../utils/helpers/index.js";
 import { useMergeRefs } from "../../../utils/hooks/index.js";
 import { DataTableCaption, } from "../caption/DataTableCaption.js";
 import { DataTableEmptyState, } from "../empty-state/DataTableEmptyState.js";
 import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav.js";
+import { noSelectionState } from "../hooks/useTableSelection.js";
 import { DataTableLoadingState, } from "../loading-state/DataTableLoadingState.js";
 import { DataTableTbody, } from "../tbody/DataTableTbody.js";
 import { DataTableTd } from "../td/DataTableTd.js";
@@ -31,13 +33,12 @@ import { DataTableContextProvider } from "./DataTableRoot.context.js";
  */
 const DataTable = forwardRef((_a, forwardedRef) => {
     var { className, rowDensity = "normal", withKeyboardNav = false, zebraStripes = false, truncateContent = true, shouldBlockNavigation, layout = "fixed" } = _a, rest = __rest(_a, ["className", "rowDensity", "withKeyboardNav", "zebraStripes", "truncateContent", "shouldBlockNavigation", "layout"]);
-    const [tableRef, setTableRef] = useState(null);
-    const mergedRef = useMergeRefs(forwardedRef, setTableRef);
-    const { tabIndex } = useTableKeyboardNav(tableRef, {
+    const { tabIndex, setTableRef } = useTableKeyboardNav({
         enabled: withKeyboardNav,
         shouldBlockNavigation,
     });
-    return (React.createElement(DataTableContextProvider, { layout: layout, withKeyboardNav: withKeyboardNav },
+    const mergedRef = useMergeRefs(forwardedRef, setTableRef);
+    return (React.createElement(DataTableContextProvider, { layout: layout, withKeyboardNav: withKeyboardNav, selectionState: noSelectionState, stickySelection: false, stickyHeader: false, tableId: useId(), showLoadingSkeletons: false, onRowClick: undefined, disableRowSelectionOnClick: false, showLoadingOverlay: false },
         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), "data-zebra-stripes": zebraStripes, "data-truncate-content": truncateContent, "data-density": rowDensity, "data-layout": layout, tabIndex: tabIndex }))))));

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,mBAAmB,GAEpB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE,OAAO,EACL,qBAAqB,GAEtB,MAAM,wCAAwC,CAAC;AAChD,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,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAyKnE;;;;;GAKG;AACH,MAAM,SAAS,GAAG,UAAU,CAC1B,CACE,EASC,EACD,YAAY,EACZ,EAAE;QAXF,EACE,SAAS,EACT,UAAU,GAAG,QAAQ,EACrB,eAAe,GAAG,KAAK,EACvB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,IAAI,EACtB,qBAAqB,EACrB,MAAM,GAAG,OAAO,OAEjB,EADI,IAAI,cART,oHASC,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,oBAAC,wBAAwB,IACvB,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,eAAe;QAEhC,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,6BAAK,SAAS,EAAC,kCAAkC;gBAC/C,+CACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,wBACxB,YAAY,2BACT,eAAe,kBACxB,UAAU,iBACX,MAAM,EACnB,QAAQ,EAAE,QAAQ,IAClB,CACE,CACF,CACmB,CAC5B,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;AACjC,SAAS,CAAC,UAAU,GAAG,mBAAmB,CAAC;AAC3C,SAAS,CAAC,YAAY,GAAG,qBAAqB,CAAC;AAE/C,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,mBAAmB,EACnB,qBAAqB,EACrB,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":"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"}

package/esm/data/table/tbody/DataTableTbody.js

@@ -9,11 +9,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from "react";
+import React, { forwardRef, version } from "react";
 import { cl } from "../../../utils/helpers/index.js";
+import { DataTableLocationProvider, useDataTableContext, } from "../root/DataTableRoot.context.js";
+const inertValue = parseInt(version.split(".")[0], 10) > 18 ? true : ""; // Support for inert was added in React 19
 const DataTableTbody = forwardRef((_a, forwardedRef) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement("tbody", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__tbody", className) })));
+    const { showLoadingOverlay } = useDataTableContext();
+    return (React.createElement(DataTableLocationProvider, { location: "tbody" },
+        React.createElement("tbody", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__tbody", className), 
+            // @ts-expect-error - inert is not yet recognized by React's type definitions, but we want to use it for better accessibility when showing the loading overlay.
+            inert: showLoadingOverlay ? inertValue : false }))));
 });
 export { DataTableTbody };
 //# sourceMappingURL=DataTableTbody.js.map

package/esm/data/table/tbody/DataTableTbody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTbody.js","sourceRoot":"","sources":["../../../../src/data/table/tbody/DataTableTbody.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,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,+CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,IACnD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"DataTableTbody.js","sourceRoot":"","sources":["../../../../src/data/table/tbody/DataTableTbody.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EACL,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,+BAA+B,CAAC;AAIvC,MAAM,UAAU,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,0CAA0C;AAEnH,MAAM,cAAc,GAAG,UAAU,CAC/B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,MAAM,EAAE,kBAAkB,EAAE,GAAG,mBAAmB,EAAE,CAAC;IACrD,OAAO,CACL,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,OAAO;QACzC,+CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC;YACnD,+JAA+J;YAC/J,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,IAC9C,CACwB,CAC7B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -1,22 +1,6 @@
 import React from "react";
-interface DataTableTdProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
-    /**
-     * Sets a max-width on the content wrapper div inside the cell.
-     * This is only needed when using `layout="auto"` together with
-     * `truncateContent` on `<DataTable>` and you want the cell to be truncated.
-     */
-    contentMaxWidth?: number | `${number}${string}`;
-    /**
-     * TODO: Consider a prop like this instead of contentMaxWidth to use together with layout=auto.
-     * Maybe even with layout=auto as a way to override truncateContent on single cells?
-     * Need to work on the name though. Or maybe have two separate props?
-     */
-    /**
-     * Content alignment inside cell
-     * @default "left"
-     */
-    textAlign?: "left" | "center" | "right";
-}
-declare const DataTableTd: React.ForwardRefExoticComponent<DataTableTdProps & React.RefAttributes<HTMLTableCellElement>>;
+import { type DataTableBaseCellProps } from "../base-cell/DataTableBaseCell.js";
+type DataTableTdProps = DataTableBaseCellProps;
+declare const DataTableTd: React.ForwardRefExoticComponent<DataTableBaseCellProps & React.RefAttributes<HTMLTableCellElement>>;
 export { DataTableTd };
 export type { DataTableTdProps };

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

@@ -11,12 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers/index.js";
-import { useDataTableContext } from "../root/DataTableRoot.context.js";
+import { DataTableBaseCell, } from "../base-cell/DataTableBaseCell.js";
 const DataTableTd = forwardRef((_a, forwardedRef) => {
-    var { className, children, contentMaxWidth, textAlign = "left" } = _a, rest = __rest(_a, ["className", "children", "contentMaxWidth", "textAlign"]);
-    const { withKeyboardNav } = useDataTableContext();
-    return (React.createElement("td", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__td", className), tabIndex: withKeyboardNav ? -1 : undefined, "data-align": textAlign }),
-        React.createElement("div", { style: { maxWidth: contentMaxWidth } }, children)));
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(DataTableBaseCell, Object.assign({ ref: forwardedRef }, rest, { as: "td", className: cl("aksel-data-table__td", className) })));
 });
 export { DataTableTd };
 //# sourceMappingURL=DataTableTd.js.map

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;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAsBpE,MAAM,WAAW,GAAG,UAAU,CAC5B,CACE,EAAqE,EACrE,YAAY,EACZ,EAAE;QAFF,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,GAAG,MAAM,OAAW,EAAN,IAAI,cAAnE,yDAAqE,CAAF;IAGnE,MAAM,EAAE,eAAe,EAAE,GAAG,mBAAmB,EAAE,CAAC;IAElD,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,EAChD,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,gBAC9B,SAAS;QAErB,6BAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,IAAG,QAAQ,CAAO,CACxD,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;AAC5C,OAAO,EACL,iBAAiB,GAElB,MAAM,gCAAgC,CAAC;AAIxC,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,oBAAC,iBAAiB,kBAChB,GAAG,EAAE,YAAY,IACb,IAAI,IACR,EAAE,EAAC,IAAI,EACP,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAChD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -11,9 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers/index.js";
+import { DataTableLocationProvider } from "../root/DataTableRoot.context.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));
+    return (React.createElement(DataTableLocationProvider, { location: "tfoot" },
+        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

@@ -1 +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"}
+{"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;AAC5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AAI1E,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,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,OAAO;QACzC,+CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,KAElD,QAAQ,CACH,CACkB,CAC7B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -1,47 +1,6 @@
 import React from "react";
-import { type ResizeProps } from "./useTableColumnResize.js";
-type SortDirection = "asc" | "desc" | "none";
-interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement>, ResizeProps {
-    resizeHandler?: (event: React.MouseEvent<HTMLButtonElement> | React.TouchEvent<HTMLButtonElement>) => void;
-    /**
-     * Content alignment inside cell
-     * @default "left"
-     */
-    textAlign?: "left" | "center" | "right";
-    /**
-     * Makes the column header sortable. The entire header cell content becomes
-     * a clickable button when true.
-     */
-    sortable?: boolean;
-    /**
-     * Current sort direction. Only relevant when `sortable` is true.
-     * Uses values matching the `aria-sort` attribute directly.
-     * @default "none"
-     */
-    sortDirection?: SortDirection;
-    /**
-     * Called when the user clicks the sortable header.
-     * The consumer is responsible for determining and setting the next sort state.
-     */
-    onSortClick?: (event: React.MouseEvent<HTMLElement>) => 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
- * - Keyboard-nav breaks in headers now because of the resize-handles.
- * Toggling `data-block-keyboard-nav` does not work since the created "grid" does not update when toggling this attribute.
- */
-declare const DataTableTh: React.ForwardRefExoticComponent<Omit<DataTableThProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+import { type DataTableBaseCellProps } from "../base-cell/DataTableBaseCell.js";
+type DataTableThProps = DataTableBaseCellProps;
+declare const DataTableTh: React.ForwardRefExoticComponent<DataTableBaseCellProps & React.RefAttributes<HTMLTableCellElement>>;
 export { DataTableTh };
 export type { DataTableThProps };

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

@@ -9,63 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useState } from "react";
-import { ArrowsUpDownIcon, CaretLeftCircleFillIcon, CaretRightCircleFillIcon, SortDownIcon, SortUpIcon, } from "@navikt/aksel-icons";
+import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers/index.js";
-import { useMergeRefs } from "../../../utils/hooks/index.js";
-import { useDataTableContext } from "../root/DataTableRoot.context.js";
-import { useTableColumnResize } from "./useTableColumnResize.js";
-const SORT_ICON = {
-    asc: SortUpIcon,
-    desc: SortDownIcon,
-    none: ArrowsUpDownIcon,
-};
-/**
- * TODO:
- * - Plan for pinning: Move it into "settings" dialog like here: https://cloudscape.design/examples/react/table.html
- * - Keyboard-nav breaks in headers now because of the resize-handles.
- * Toggling `data-block-keyboard-nav` does not work since the created "grid" does not update when toggling this attribute.
- */
+import { DataTableBaseCell, } from "../base-cell/DataTableBaseCell.js";
 const DataTableTh = forwardRef((_a, forwardedRef) => {
-    var { className, children, sortable = false, sortDirection = "none", onSortClick, style, textAlign = "left", width, minWidth, maxWidth, onWidthChange, defaultWidth, colSpan } = _a, rest = __rest(_a, ["className", "children", "sortable", "sortDirection", "onSortClick", "style", "textAlign", "width", "minWidth", "maxWidth", "onWidthChange", "defaultWidth", "colSpan"]);
-    const { withKeyboardNav } = useDataTableContext();
-    const [isOverflowing, setIsOverflowing] = React.useState(false);
-    const contentRef = React.useRef(null);
-    const [thRefState, setThRefState] = useState(null);
-    const mergedRef = useMergeRefs(forwardedRef, setThRefState);
-    const resizeResult = useTableColumnResize({
-        ref: thRefState,
-        width,
-        defaultWidth,
-        minWidth,
-        maxWidth,
-        onWidthChange,
-        style,
-        colSpan,
-    });
-    const SortIcon = sortable ? SORT_ICON[sortDirection] : null;
-    return (React.createElement("th", Object.assign({}, rest, { ref: mergedRef, className: cl("aksel-data-table__th", className), "data-sortable": sortable, style: resizeResult.style, "aria-sort": sortable ? getAriaSort(sortDirection) : undefined, onPointerEnter: () => {
-            const el = contentRef.current;
-            setIsOverflowing(el ? el.scrollWidth > el.offsetWidth : false);
-            console.info("is overflowing", isOverflowing);
-        }, onPointerLeave: () => setIsOverflowing(false), tabIndex: withKeyboardNav ? -1 : undefined, "data-align": textAlign, colSpan: colSpan }),
-        sortable ? (React.createElement("button", { className: "aksel-data-table__th-sort-button", onClick: sortable ? onSortClick : undefined },
-            React.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children),
-            SortIcon && (React.createElement(SortIcon, { "aria-hidden": true, "data-sort-direction": sortDirection, className: "aksel-data-table__th-sort-icon", fontSize: "1.25rem" })))) : (React.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children)),
-        resizeResult.enabled && (React.createElement("button", Object.assign({}, resizeResult.resizeHandlerProps, { className: "aksel-data-table__th-resize-handle", "data-active": resizeResult.isResizingWithKeyboard, "data-block-keyboard-nav": true }), resizeResult.isResizingWithKeyboard && (React.createElement(React.Fragment, null,
-            React.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--start" },
-                React.createElement(CaretLeftCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" })),
-            React.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--end" },
-                React.createElement(CaretRightCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" }))))))));
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (React.createElement(DataTableBaseCell, Object.assign({ ref: forwardedRef }, rest, { as: "th", className: cl("aksel-data-table__th", className) })));
 });
-function getAriaSort(sortDirection) {
-    if (sortDirection === "asc")
-        return "ascending";
-    if (sortDirection === "desc")
-        return "descending";
-    if (sortDirection === "none")
-        return "none";
-    return undefined;
-}
 export { DataTableTh };
 //# sourceMappingURL=DataTableTh.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTh.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableTh.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTableTh.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableTh.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EACL,iBAAiB,GAElB,MAAM,gCAAgC,CAAC;AAIxC,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,oBAAC,iBAAiB,kBAChB,GAAG,EAAE,YAAY,IACb,IAAI,IACR,EAAE,EAAC,IAAI,EACP,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC,IAChD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/esm/data/table/thead/DataTableThead.js

@@ -11,10 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers/index.js";
-import { DataTableTheadContext } from "./DataTableThead.context.js";
+import { DataTableLocationProvider } from "../root/DataTableRoot.context.js";
 const DataTableThead = forwardRef((_a, forwardedRef) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement(DataTableTheadContext.Provider, { value: true },
+    return (React.createElement(DataTableLocationProvider, { location: "thead" },
         React.createElement("thead", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__thead", className) }))));
 });
 export { DataTableThead };

package/esm/data/table/thead/DataTableThead.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableThead.js","sourceRoot":"","sources":["../../../../src/data/table/thead/DataTableThead.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAIjE,MAAM,cAAc,GAAG,UAAU,CAC/B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,oBAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI;QACzC,+CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,IACnD,CAC6B,CAClC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"DataTableThead.js","sourceRoot":"","sources":["../../../../src/data/table/thead/DataTableThead.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,+BAA+B,CAAC;AAI1E,MAAM,cAAc,GAAG,UAAU,CAC/B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,oBAAC,yBAAyB,IAAC,QAAQ,EAAC,OAAO;QACzC,+CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,IACnD,CACwB,CAC7B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,CAAC"}

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

@@ -1,9 +1,17 @@
 import React from "react";
 type DataTableTrProps = React.HTMLAttributes<HTMLTableRowElement> & {
     selected?: boolean;
+    /**
+     * Unique identifier for the row, used for selection..
+     */
+    rowId?: string | number;
 };
 declare const DataTableTr: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & {
     selected?: boolean;
+    /**
+     * Unique identifier for the row, used for selection..
+     */
+    rowId?: string | number;
 } & React.RefAttributes<HTMLTableRowElement>>;
 export { DataTableTr };
 export type { DataTableTrProps };