@navikt/ds-react 8.9.1 → 8.10.1

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

@@ -47,63 +47,116 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableAuto = void 0;
 /** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
 const react_1 = __importStar(require("react"));
-const CheckboxInput_1 = require("../../../form/checkbox/checkbox-input/CheckboxInput");
-const RadioInput_1 = require("../../../form/radio/radio-input/RadioInput");
+const skeleton_1 = require("../../../skeleton");
+const utils_external_1 = require("../../../utils-external");
 const helpers_1 = require("../../../utils/helpers");
 const hooks_1 = require("../../../utils/hooks");
+const DataTableBaseCell_1 = require("../base-cell/DataTableBaseCell");
+const DataTableColumnHeader_1 = require("../column-header/DataTableColumnHeader");
+const DataTableEmptyState_1 = require("../empty-state/DataTableEmptyState");
+const useColumnOptions_1 = require("../hooks/useColumnOptions");
+const useTableExpansion_1 = require("../hooks/useTableExpansion");
 const useTableKeyboardNav_1 = require("../hooks/useTableKeyboardNav");
 const useTableSelection_1 = require("../hooks/useTableSelection");
+const useTableSort_1 = require("../hooks/useTableSort");
+const DataTableLoadingState_1 = require("../loading-state/DataTableLoadingState");
 const DataTableTbody_1 = require("../tbody/DataTableTbody");
-const DataTableTd_1 = require("../td/DataTableTd");
-const DataTableTh_1 = require("../th/DataTableTh");
 const DataTableThead_1 = require("../thead/DataTableThead");
 const DataTableTr_1 = require("../tr/DataTableTr");
 const DataTableRoot_context_1 = require("./DataTableRoot.context");
 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] = (0, react_1.useState)(null);
-    const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, setTableRef);
-    const { tabIndex } = (0, useTableKeyboardNav_1.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 } = (0, useTableKeyboardNav_1.useTableKeyboardNav)({
         enabled: withKeyboardNav,
         shouldBlockNavigation,
     });
-    const resolvedGetRowId = getRowId !== null && getRowId !== void 0 ? getRowId : ((_row, index) => index);
-    const selection = (0, useTableSelection_1.useTableSelection)({
+    const { sortState, onSortClick } = (0, useTableSort_1.useTableSort)({
+        defaultSort,
+        onSortChange,
+        sort: sortProp,
+    });
+    const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, setTableRef);
+    const allRowKeys = (0, react_1.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 = (0, useTableSelection_1.useTableSelection)({
         selectionMode: selectionModeProp,
         selectedKeys,
         defaultSelectedKeys,
         onSelectionChange,
-        disabledKeys,
-        data,
-        getRowId: resolvedGetRowId,
+        disabledSelectionKeys,
+        allRowKeys,
+    });
+    const { columns, stickySelection } = (0, useColumnOptions_1.useColumnOptions)(columnDefinitions, {
+        stickyColumns,
+        selectionMode: tableSelectionState.selection.selectionMode,
     });
-    return (react_1.default.createElement(DataTableRoot_context_1.DataTableContextProvider, { layout: layout, withKeyboardNav: withKeyboardNav },
-        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), "data-zebra-stripes": zebraStripes, "data-truncate-content": truncateContent, "data-density": rowDensity, "data-layout": layout, tabIndex: tabIndex }),
-                    react_1.default.createElement(DataTableThead_1.DataTableThead, null,
-                        react_1.default.createElement(DataTableTr_1.DataTableTr, null,
-                            selection.selectionMode === "multiple" && (react_1.default.createElement(DataTableTh_1.DataTableTh, { textAlign: "center", width: "60px", UNSAFE_isSelection: true },
-                                react_1.default.createElement(CheckboxInput_1.CheckboxInput, Object.assign({}, selection.getTheadCheckboxProps(), { compact: true })))),
-                            selection.selectionMode === "single" && (react_1.default.createElement(DataTableTh_1.DataTableTh, { width: "64px", UNSAFE_isSelection: true })),
-                            columnDefinitions.map((colDef, colDefIndex) => {
-                                return (react_1.default.createElement(DataTableTh_1.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 = (0, utils_external_1.useId)(id);
+    return (react_1.default.createElement(DataTableRoot_context_1.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_1.default.createElement(useTableExpansion_1.DataTableExpansionProvider, { detailsPanelRowIds: detailsPanelRowIds, defaultDetailsPanelRowIds: defaultDetailsPanelRowIds, onDetailsPanelChange: onDetailsPanelChange, allRowKeys: allRowKeys, getDetailsPanelContent: getDetailsPanelContent, getDetailsPanelHeight: getDetailsPanelHeight, showExpandAll: showExpandAll },
+            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), "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_1.default.createElement(DataTableThead_1.DataTableThead, null,
+                            react_1.default.createElement(DataTableTr_1.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_1.default.createElement(DataTableColumnHeader_1.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_1.default.createElement(DataTableTbody_1.DataTableTbody, null, data.map((rowData, rowIndex) => {
-                        const rowId = selection.allKeys[rowIndex];
-                        return (react_1.default.createElement(DataTableTr_1.DataTableTr, { key: rowId },
-                            selection.selectionMode === "multiple" && (react_1.default.createElement(DataTableTd_1.DataTableTd, { align: "center", width: "60px", UNSAFE_isSelection: true },
-                                react_1.default.createElement(CheckboxInput_1.CheckboxInput, Object.assign({}, selection.getRowCheckboxProps(rowId), { compact: true })))),
-                            selection.selectionMode === "single" && (react_1.default.createElement(DataTableTd_1.DataTableTd, { width: "64px", UNSAFE_isSelection: true },
-                                react_1.default.createElement(RadioInput_1.RadioInput, Object.assign({}, selection.getRowRadioProps(rowId))))),
-                            columnDefinitions.map((colDef, colDefIndex) => {
-                                return (react_1.default.createElement(DataTableTd_1.DataTableTd, { textAlign: "left", key: colDef.id || colDefIndex }, colDef.cell(rowData)));
-                            })));
-                    })))))));
+                        react_1.default.createElement(DataTableTbody_1.DataTableTbody, null,
+                            react_1.default.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 } = (0, DataTableRoot_context_1.useDataTableContext)();
+    if (isLoading && loadingState != null) {
+        return (react_1.default.createElement(DataTableLoadingState_1.DataTableLoadingState, { colSpan: columns.length }, loadingState));
+    }
+    if (isLoading && loadingRows) {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("tr", null,
+                react_1.default.createElement("td", { colSpan: columns.length, className: "aksel-sr-only" }, loadingLabel)),
+            Array.from({ length: loadingRows }, (_, rowIndex) => (react_1.default.createElement(DataTableTr_1.DataTableTr, { key: `skeleton-row-${rowIndex}`, "aria-hidden": true }, columns.map(({ isSticky, colDef }, colDefIndex) => (react_1.default.createElement(DataTableBaseCell_1.DataTableBaseCell, { textAlign: colDef.type === "number" ? "right" : "left", key: colDef.id || colDefIndex, as: colDef.isRowHeader ? "th" : "td", isSticky: isSticky },
+                react_1.default.createElement(skeleton_1.Skeleton, { variant: "text" })))))))));
+    }
+    if (data.length === 0 && emptyState !== undefined) {
+        return (react_1.default.createElement(DataTableEmptyState_1.DataTableEmptyState, { colSpan: columns.length }, emptyState));
+    }
+    const renderLoadingAnnoucement = isLoading && !loadingState && !loadingRows;
+    return data.map((rowData, rowIndex) => {
+        const rowId = allRowKeys[rowIndex];
+        return (react_1.default.createElement(react_1.default.Fragment, { key: rowId },
+            renderLoadingAnnoucement && (react_1.default.createElement("tr", null,
+                react_1.default.createElement("td", { colSpan: columns.length, className: "aksel-sr-only" }, loadingLabel))),
+            react_1.default.createElement(DataTableTr_1.DataTableTr, { rowId: rowId }, columns.map(({ isSticky, colDef }, colDefIndex) => {
+                return (react_1.default.createElement(DataTableBaseCell_1.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_1.default.createElement(DataTableExpandedRow, { rowId: rowId, rowData: rowData, columnCount: columns.length })));
+    });
+}
+function DataTableExpandedRow({ rowId, rowData, columnCount, }) {
+    const { tableId } = (0, DataTableRoot_context_1.useDataTableContext)();
+    const expansionContext = (0, useTableExpansion_1.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_1.default.createElement("tr", null,
+        react_1.default.createElement("td", { id: `${tableId}-expansion-${rowId}`, colSpan: columnCount },
+            react_1.default.createElement("div", { style: { height: getDetailsPanelHeight === null || getDetailsPanelHeight === void 0 ? void 0 : getDetailsPanelHeight(rowData) } }, content))));
 }
 const DataTableAuto = (0, react_1.forwardRef)(DataTableAutoInner);
 exports.DataTableAuto = DataTableAuto;

package/cjs/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/cjs/data/table/root/DataTableRoot.context.d.ts

@@ -1,9 +1,30 @@
+import type { UseTableSelectionReturn } from "../hooks/useTableSelection";
 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/cjs/data/table/root/DataTableRoot.context.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDataTableContext = exports.DataTableContextProvider = void 0;
+exports.useDataTableLocation = exports.useDataTableContext = exports.DataTableLocationProvider = exports.DataTableContextProvider = void 0;
 const helpers_1 = require("../../../utils/helpers");
 const { Provider: DataTableContextProvider, useContext: useDataTableContext } = (0, helpers_1.createStrictContext)({
     name: "DataTableContext",
@@ -8,4 +8,10 @@ const { Provider: DataTableContextProvider, useContext: useDataTableContext } =
 });
 exports.DataTableContextProvider = DataTableContextProvider;
 exports.useDataTableContext = useDataTableContext;
+const { Provider: DataTableLocationProvider, useContext: useDataTableLocation, } = (0, helpers_1.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.",
+});
+exports.DataTableLocationProvider = DataTableLocationProvider;
+exports.useDataTableLocation = useDataTableLocation;
 //# sourceMappingURL=DataTableRoot.context.js.map

package/cjs/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,oDAA6D;AAO7D,MAAM,EAAE,QAAQ,EAAE,wBAAwB,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAC3E,IAAA,6BAAmB,EAAwB;IACzC,IAAI,EAAE,kBAAkB;IACxB,YAAY,EAAE,mDAAmD;CAClE,CAAC,CAAC;AAEI,4DAAwB;AAAE,kDAAmB"}
+{"version":3,"file":"DataTableRoot.context.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.context.ts"],"names":[],"mappings":";;;AAAA,oDAA6D;AAoB7D,MAAM,EAAE,QAAQ,EAAE,wBAAwB,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAC3E,IAAA,6BAAmB,EAAwB;IACzC,IAAI,EAAE,kBAAkB;IACxB,YAAY,EAAE,mDAAmD;CAClE,CAAC,CAAC;AAcH,4DAAwB;AAExB,kDAAmB;AAZrB,MAAM,EACJ,QAAQ,EAAE,yBAAyB,EACnC,UAAU,EAAE,oBAAoB,GACjC,GAAG,IAAA,6BAAmB,EAAkC;IACvD,IAAI,EAAE,mBAAmB;IACzB,YAAY,EACV,mIAAmI;CACtI,CAAC,CAAC;AAID,8DAAyB;AAEzB,oDAAoB"}

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

@@ -46,6 +46,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableTr = exports.DataTableThead = exports.DataTableTh = exports.DataTableTfoot = exports.DataTableTd = exports.DataTableTbody = exports.DataTableLoadingState = exports.DataTableEmptyState = exports.DataTableCaption = exports.DataTable = void 0;
 const react_1 = __importStar(require("react"));
+const utils_external_1 = require("../../../utils-external");
 const helpers_1 = require("../../../utils/helpers");
 const hooks_1 = require("../../../utils/hooks");
 const DataTableCaption_1 = require("../caption/DataTableCaption");
@@ -53,6 +54,7 @@ Object.defineProperty(exports, "DataTableCaption", { enumerable: true, get: func
 const DataTableEmptyState_1 = require("../empty-state/DataTableEmptyState");
 Object.defineProperty(exports, "DataTableEmptyState", { enumerable: true, get: function () { return DataTableEmptyState_1.DataTableEmptyState; } });
 const useTableKeyboardNav_1 = require("../hooks/useTableKeyboardNav");
+const useTableSelection_1 = require("../hooks/useTableSelection");
 const DataTableLoadingState_1 = require("../loading-state/DataTableLoadingState");
 Object.defineProperty(exports, "DataTableLoadingState", { enumerable: true, get: function () { return DataTableLoadingState_1.DataTableLoadingState; } });
 const DataTableTbody_1 = require("../tbody/DataTableTbody");
@@ -76,13 +78,12 @@ const DataTableRoot_context_1 = require("./DataTableRoot.context");
  */
 const DataTable = (0, react_1.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] = (0, react_1.useState)(null);
-    const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, setTableRef);
-    const { tabIndex } = (0, useTableKeyboardNav_1.useTableKeyboardNav)(tableRef, {
+    const { tabIndex, setTableRef } = (0, useTableKeyboardNav_1.useTableKeyboardNav)({
         enabled: withKeyboardNav,
         shouldBlockNavigation,
     });
-    return (react_1.default.createElement(DataTableRoot_context_1.DataTableContextProvider, { layout: layout, withKeyboardNav: withKeyboardNav },
+    const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, setTableRef);
+    return (react_1.default.createElement(DataTableRoot_context_1.DataTableContextProvider, { layout: layout, withKeyboardNav: withKeyboardNav, selectionState: useTableSelection_1.noSelectionState, stickySelection: false, stickyHeader: false, tableId: (0, utils_external_1.useId)(), showLoadingSkeletons: false, onRowClick: undefined, disableRowSelectionOnClick: false, showLoadingOverlay: false },
         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), "data-zebra-stripes": zebraStripes, "data-truncate-content": truncateContent, "data-density": rowDensity, "data-layout": layout, tabIndex: tabIndex }))))));

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,+CAAoD;AACpD,oDAA4C;AAC5C,gDAAoD;AACpD,kEAGqC;AAmQnC,iGArQA,mCAAgB,OAqQA;AAlQlB,4EAG4C;AAgQ1C,oGAlQA,yCAAmB,OAkQA;AA/PrB,sEAAmE;AAEnE,kFAGgD;AA2P9C,sGA7PA,6CAAqB,OA6PA;AA1PvB,4DAGiC;AAwP/B,+FA1PA,+BAAc,OA0PA;AAvPhB,mDAAuE;AAwPrE,4FAxPO,yBAAW,OAwPP;AAvPb,4DAGiC;AAqP/B,+FAvPA,+BAAc,OAuPA;AApPhB,mDAAuE;AAqPrE,4FArPO,yBAAW,OAqPP;AApPb,4DAGiC;AAkP/B,+FApPA,+BAAc,OAoPA;AAjPhB,mDAAuE;AAkPrE,4FAlPO,yBAAW,OAkPP;AAjPb,mEAAmE;AAyKnE;;;;;GAKG;AACH,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,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,IAAA,gBAAQ,EAA0B,IAAI,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE1D,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,yCAAmB,EAAC,QAAQ,EAAE;QACjD,OAAO,EAAE,eAAe;QACxB,qBAAqB;KACtB,CAAC,CAAC;IAEH,OAAO,CACL,8BAAC,gDAAwB,IACvB,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,eAAe;QAEhC,uCAAK,SAAS,EAAC,kCAAkC;YAC/C,uCAAK,SAAS,EAAC,kCAAkC;gBAC/C,yDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAA,YAAE,EAAC,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;AAa1B,8BAAS;AAXX,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;AACjC,SAAS,CAAC,UAAU,GAAG,yCAAmB,CAAC;AAC3C,SAAS,CAAC,YAAY,GAAG,6CAAqB,CAAC;AAc/C,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,4DAAgD;AAChD,oDAA4C;AAC5C,gDAAoD;AACpD,kEAGqC;AAqQnC,iGAvQA,mCAAgB,OAuQA;AApQlB,4EAG4C;AAkQ1C,oGApQA,yCAAmB,OAoQA;AAjQrB,sEAAmE;AAEnE,kEAA8D;AAC9D,kFAGgD;AA4P9C,sGA9PA,6CAAqB,OA8PA;AA3PvB,4DAGiC;AAyP/B,+FA3PA,+BAAc,OA2PA;AAxPhB,mDAAuE;AAyPrE,4FAzPO,yBAAW,OAyPP;AAxPb,4DAGiC;AAsP/B,+FAxPA,+BAAc,OAwPA;AArPhB,mDAAuE;AAsPrE,4FAtPO,yBAAW,OAsPP;AArPb,4DAGiC;AAmP/B,+FArPA,+BAAc,OAqPA;AAlPhB,mDAAuE;AAmPrE,4FAnPO,yBAAW,OAmPP;AAlPb,mEAAmE;AAmKnE;;;;;GAKG;AACH,MAAM,SAAS,GAAG,IAAA,kBAAU,EAC1B,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,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,IAAA,yCAAmB,EAAC;QACpD,OAAO,EAAE,eAAe;QACxB,qBAAqB;KACtB,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE1D,OAAO,CACL,8BAAC,gDAAwB,IACvB,MAAM,EAAE,MAAM,EACd,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,oCAAgB,EAChC,eAAe,EAAE,KAAK,EACtB,YAAY,EAAE,KAAK,EACnB,OAAO,EAAE,IAAA,sBAAK,GAAE,EAChB,oBAAoB,EAAE,KAAK,EAC3B,UAAU,EAAE,SAAS,EACrB,0BAA0B,EAAE,KAAK,EACjC,kBAAkB,EAAE,KAAK;QAEzB,uCAAK,SAAS,EAAC,kCAAkC;YAC/C,uCAAK,SAAS,EAAC,kCAAkC;gBAC/C,yDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAA,YAAE,EAAC,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;AAa1B,8BAAS;AAXX,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;AACjC,SAAS,CAAC,UAAU,GAAG,yCAAmB,CAAC;AAC3C,SAAS,CAAC,YAAY,GAAG,6CAAqB,CAAC;AAc/C,kBAAe,SAAS,CAAC"}

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

@@ -47,9 +47,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableTbody = void 0;
 const react_1 = __importStar(require("react"));
 const helpers_1 = require("../../../utils/helpers");
+const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
+const inertValue = parseInt(react_1.version.split(".")[0], 10) > 18 ? true : ""; // Support for inert was added in React 19
 const DataTableTbody = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement("tbody", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__tbody", className) })));
+    const { showLoadingOverlay } = (0, DataTableRoot_context_1.useDataTableContext)();
+    return (react_1.default.createElement(DataTableRoot_context_1.DataTableLocationProvider, { location: "tbody" },
+        react_1.default.createElement("tbody", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.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 }))));
 });
 exports.DataTableTbody = DataTableTbody;
 //# sourceMappingURL=DataTableTbody.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTbody.js","sourceRoot":"","sources":["../../../../src/data/table/tbody/DataTableTbody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAI5C,MAAM,cAAc,GAAG,IAAA,kBAAU,EAC/B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,yDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,yBAAyB,EAAE,SAAS,CAAC,IACnD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,wCAAc"}
+{"version":3,"file":"DataTableTbody.js","sourceRoot":"","sources":["../../../../src/data/table/tbody/DataTableTbody.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,oDAA4C;AAC5C,yEAGuC;AAIvC,MAAM,UAAU,GAAG,QAAQ,CAAC,eAAO,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,IAAA,kBAAU,EAC/B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,MAAM,EAAE,kBAAkB,EAAE,GAAG,IAAA,2CAAmB,GAAE,CAAC;IACrD,OAAO,CACL,8BAAC,iDAAyB,IAAC,QAAQ,EAAC,OAAO;QACzC,yDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,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;AAEO,wCAAc"}

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

@@ -1,26 +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";
-    /**
-     * Temp hack to solve overflow and alignment
-     */
-    UNSAFE_isSelection?: boolean;
-}
-declare const DataTableTd: React.ForwardRefExoticComponent<DataTableTdProps & React.RefAttributes<HTMLTableCellElement>>;
+import { type DataTableBaseCellProps } from "../base-cell/DataTableBaseCell";
+type DataTableTdProps = DataTableBaseCellProps;
+declare const DataTableTd: React.ForwardRefExoticComponent<DataTableBaseCellProps & React.RefAttributes<HTMLTableCellElement>>;
 export { DataTableTd };
 export type { DataTableTdProps };

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

@@ -47,14 +47,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableTd = void 0;
 const react_1 = __importStar(require("react"));
 const helpers_1 = require("../../../utils/helpers");
-const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
+const DataTableBaseCell_1 = require("../base-cell/DataTableBaseCell");
 const DataTableTd = (0, react_1.forwardRef)((_a, forwardedRef) => {
-    var { className, children, contentMaxWidth, textAlign = "left", UNSAFE_isSelection } = _a, rest = __rest(_a, ["className", "children", "contentMaxWidth", "textAlign", "UNSAFE_isSelection"]);
-    const { withKeyboardNav } = (0, DataTableRoot_context_1.useDataTableContext)();
-    return (react_1.default.createElement("td", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__td", className, {
-            "aksel-data-table--UNSAFE_isSelection": UNSAFE_isSelection,
-        }), tabIndex: withKeyboardNav ? -1 : undefined, "data-align": textAlign }),
-        react_1.default.createElement("div", { style: { maxWidth: contentMaxWidth } }, children)));
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (react_1.default.createElement(DataTableBaseCell_1.DataTableBaseCell, Object.assign({ ref: forwardedRef }, rest, { as: "td", className: (0, helpers_1.cl)("aksel-data-table__td", className) })));
 });
 exports.DataTableTd = DataTableTd;
 //# sourceMappingURL=DataTableTd.js.map

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;AAC5C,yEAAoE;AA0BpE,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CACE,EAOC,EACD,YAAY,EACZ,EAAE;QATF,EACE,SAAS,EACT,QAAQ,EACR,eAAe,EACf,SAAS,GAAG,MAAM,EAClB,kBAAkB,OAEnB,EADI,IAAI,cANT,+EAOC,CADQ;IAIT,MAAM,EAAE,eAAe,EAAE,GAAG,IAAA,2CAAmB,GAAE,CAAC;IAElD,OAAO,CACL,sDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,EAAE;YAC/C,sCAAsC,EAAE,kBAAkB;SAC3D,CAAC,EACF,QAAQ,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,gBAC9B,SAAS;QAErB,uCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,eAAe,EAAE,IAAG,QAAQ,CAAO,CACxD,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;AAC5C,sEAGwC;AAIxC,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,8BAAC,qCAAiB,kBAChB,GAAG,EAAE,YAAY,IACb,IAAI,IACR,EAAE,EAAC,IAAI,EACP,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,CAAC,IAChD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,kCAAW"}

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

@@ -47,9 +47,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableTfoot = void 0;
 const react_1 = __importStar(require("react"));
 const helpers_1 = require("../../../utils/helpers");
+const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
 const DataTableTfoot = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
-    return (react_1.default.createElement("tfoot", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__tfoot", className) }), children));
+    return (react_1.default.createElement(DataTableRoot_context_1.DataTableLocationProvider, { location: "tfoot" },
+        react_1.default.createElement("tfoot", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__tfoot", className) }), children)));
 });
 exports.DataTableTfoot = DataTableTfoot;
 //# sourceMappingURL=DataTableTfoot.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTfoot.js","sourceRoot":"","sources":["../../../../src/data/table/tfoot/DataTableTfoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAI5C,MAAM,cAAc,GAAG,IAAA,kBAAU,EAC/B,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;QAAlD,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,OAAO,CACL,yDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,yBAAyB,EAAE,SAAS,CAAC,KAElD,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,wCAAc"}
+{"version":3,"file":"DataTableTfoot.js","sourceRoot":"","sources":["../../../../src/data/table/tfoot/DataTableTfoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAC5C,yEAA0E;AAI1E,MAAM,cAAc,GAAG,IAAA,kBAAU,EAC/B,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;QAAlD,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,OAAO,CACL,8BAAC,iDAAyB,IAAC,QAAQ,EAAC,OAAO;QACzC,yDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,yBAAyB,EAAE,SAAS,CAAC,KAElD,QAAQ,CACH,CACkB,CAC7B,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,wCAAc"}

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

@@ -1,51 +1,6 @@
 import React from "react";
-import { type ResizeProps } from "./useTableColumnResize";
-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;
-    /**
-     * Temp hack to solve overflow and alignment
-     */
-    UNSAFE_isSelection?: boolean;
-}
-/**
- * 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";
+type DataTableThProps = DataTableBaseCellProps;
+declare const DataTableTh: React.ForwardRefExoticComponent<DataTableBaseCellProps & React.RefAttributes<HTMLTableCellElement>>;
 export { DataTableTh };
 export type { DataTableThProps };

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

@@ -46,65 +46,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 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 helpers_1 = require("../../../utils/helpers");
-const hooks_1 = require("../../../utils/hooks");
-const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
-const useTableColumnResize_1 = require("./useTableColumnResize");
-const SORT_ICON = {
-    asc: aksel_icons_1.SortUpIcon,
-    desc: aksel_icons_1.SortDownIcon,
-    none: aksel_icons_1.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.
- */
+const DataTableBaseCell_1 = require("../base-cell/DataTableBaseCell");
 const DataTableTh = (0, react_1.forwardRef)((_a, forwardedRef) => {
-    var { className, children, sortable = false, sortDirection = "none", onSortClick, style, textAlign = "left", width, minWidth, maxWidth, onWidthChange, defaultWidth, colSpan, UNSAFE_isSelection } = _a, rest = __rest(_a, ["className", "children", "sortable", "sortDirection", "onSortClick", "style", "textAlign", "width", "minWidth", "maxWidth", "onWidthChange", "defaultWidth", "colSpan", "UNSAFE_isSelection"]);
-    const { withKeyboardNav } = (0, DataTableRoot_context_1.useDataTableContext)();
-    const [isOverflowing, setIsOverflowing] = react_1.default.useState(false);
-    const contentRef = react_1.default.useRef(null);
-    const [thRefState, setThRefState] = (0, react_1.useState)(null);
-    const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, setThRefState);
-    const resizeResult = (0, useTableColumnResize_1.useTableColumnResize)({
-        ref: thRefState,
-        width,
-        defaultWidth,
-        minWidth,
-        maxWidth,
-        onWidthChange,
-        style,
-        colSpan,
-    });
-    const SortIcon = sortable ? SORT_ICON[sortDirection] : null;
-    return (react_1.default.createElement("th", Object.assign({}, rest, { ref: mergedRef, className: (0, helpers_1.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_1.default.createElement("button", { className: "aksel-data-table__th-sort-button", onClick: sortable ? onSortClick : undefined },
-            react_1.default.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children),
-            SortIcon && (react_1.default.createElement(SortIcon, { "aria-hidden": true, "data-sort-direction": sortDirection, className: "aksel-data-table__th-sort-icon", fontSize: "1.25rem" })))) : (react_1.default.createElement("div", { ref: contentRef, className: (0, helpers_1.cl)({
-                "aksel-data-table__th-content": !UNSAFE_isSelection,
-                "aksel-data-table--UNSAFE_isSelection": UNSAFE_isSelection,
-            }) }, children)),
-        resizeResult.enabled && !UNSAFE_isSelection && (react_1.default.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_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--start" },
-                react_1.default.createElement(aksel_icons_1.CaretLeftCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" })),
-            react_1.default.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--end" },
-                react_1.default.createElement(aksel_icons_1.CaretRightCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" }))))))));
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    return (react_1.default.createElement(DataTableBaseCell_1.DataTableBaseCell, Object.assign({ ref: forwardedRef }, rest, { as: "th", className: (0, helpers_1.cl)("aksel-data-table__th", className) })));
 });
 exports.DataTableTh = DataTableTh;
-function getAriaSort(sortDirection) {
-    if (sortDirection === "asc")
-        return "ascending";
-    if (sortDirection === "desc")
-        return "descending";
-    if (sortDirection === "none")
-        return "none";
-    return undefined;
-}
 //# 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":"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"}
+{"version":3,"file":"DataTableTh.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableTh.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAC5C,sEAGwC;AAIxC,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,8BAAC,qCAAiB,kBAChB,GAAG,EAAE,YAAY,IACb,IAAI,IACR,EAAE,EAAC,IAAI,EACP,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,CAAC,IAChD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,kCAAW"}

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

@@ -47,10 +47,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataTableThead = void 0;
 const react_1 = __importStar(require("react"));
 const helpers_1 = require("../../../utils/helpers");
-const DataTableThead_context_1 = require("./DataTableThead.context");
+const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
 const DataTableThead = (0, react_1.forwardRef)((_a, forwardedRef) => {
     var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement(DataTableThead_context_1.DataTableTheadContext.Provider, { value: true },
+    return (react_1.default.createElement(DataTableRoot_context_1.DataTableLocationProvider, { location: "thead" },
         react_1.default.createElement("thead", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__thead", className) }))));
 });
 exports.DataTableThead = DataTableThead;

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableThead.js","sourceRoot":"","sources":["../../../../src/data/table/thead/DataTableThead.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAC5C,qEAAiE;AAIjE,MAAM,cAAc,GAAG,IAAA,kBAAU,EAC/B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,8BAAC,8CAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI;QACzC,yDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,yBAAyB,EAAE,SAAS,CAAC,IACnD,CAC6B,CAClC,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,wCAAc"}
+{"version":3,"file":"DataTableThead.js","sourceRoot":"","sources":["../../../../src/data/table/thead/DataTableThead.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAC5C,yEAA0E;AAI1E,MAAM,cAAc,GAAG,IAAA,kBAAU,EAC/B,CAAC,EAAsB,EAAE,YAAY,EAAE,EAAE;QAAxC,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,OAAO,CACL,8BAAC,iDAAyB,IAAC,QAAQ,EAAC,OAAO;QACzC,yDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,yBAAyB,EAAE,SAAS,CAAC,IACnD,CACwB,CAC7B,CAAC;AACJ,CAAC,CACF,CAAC;AAEO,wCAAc"}