@navikt/ds-react 8.7.0 → 8.9.0

package/cjs/data/table/loading-state/DataTableLoadingState.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableLoadingState = void 0;
+const react_1 = __importStar(require("react"));
+const helpers_1 = require("../../../utils/helpers");
+const DataTableLoadingState = (0, react_1.forwardRef)((_a, forwardedRef) => {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    return (react_1.default.createElement("tr", null,
+        react_1.default.createElement("td", { colSpan: 999 },
+            react_1.default.createElement("div", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__loading-state", className) }), children))));
+});
+exports.DataTableLoadingState = DataTableLoadingState;
+//# sourceMappingURL=DataTableLoadingState.js.map

package/cjs/data/table/loading-state/DataTableLoadingState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableLoadingState.js","sourceRoot":"","sources":["../../../../src/data/table/loading-state/DataTableLoadingState.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,oDAA4C;AAI5C,MAAM,qBAAqB,GAAG,IAAA,kBAAU,EAGtC,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;QAAlD,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC/B,OAAO,CACL;QACE,sCAAI,OAAO,EAAE,GAAG;YACd,uDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,iCAAiC,EAAE,SAAS,CAAC,KAE1D,QAAQ,CACL,CACH,CACF,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEM,sDAAqB"}

package/cjs/data/table/root/DataTable.types.d.ts

@@ -0,0 +1,13 @@
+type ColumnDefinition<T> = {
+    id?: string;
+    header: React.ReactNode;
+    width?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    /**
+     * TODO: Could add table/row/cell context into callback
+     */
+    cell: (item: T) => React.ReactNode;
+};
+type ColumnDefinitions<T> = ColumnDefinition<T>[];
+export type { ColumnDefinition, ColumnDefinitions };

package/cjs/data/table/root/DataTable.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=DataTable.types.js.map

package/cjs/data/table/root/DataTable.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.types.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTable.types.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,60 @@
+/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
+import React from "react";
+import { type SelectionProps } from "../hooks/useTableSelection";
+import type { ColumnDefinitions } from "./DataTable.types";
+interface DataTableProps<T> extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
+    children?: never;
+    /**
+     * Controls vertical cell padding.
+     * @default "normal"
+     */
+    rowDensity?: "condensed" | "normal" | "spacious";
+    /**
+     * Zebra striped table
+     * @default false
+     */
+    zebraStripes?: boolean;
+    /**
+     * Truncate content in cells and show ellipsis for overflowed text.
+     *
+     * **NB:** When using `layout="auto"`, you have to manually set a `maxWidth` on columns that should be truncated.
+     * @default true
+     */
+    truncateContent?: boolean;
+    /**
+     * Enables keyboard navigation for table rows and cells.
+     * @default false
+     */
+    withKeyboardNav?: boolean;
+    /**
+     * Custom callback to determine if navigation should be blocked.
+     * Called before default blocking logic.
+     * Requires `withKeyboardNav` to be `true`.
+     */
+    shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
+    /**
+     * Controls table layout.
+     *
+     * ### fixed
+     * Gives you full control of column widths. This is required for resizable columns.
+     *
+     * ### auto
+     * Makes the columns resize automatically based on the content.
+     * The table will take up at least 100% of available width.
+     *
+     * **NB:** When using this with `truncateContent`, you have to manually
+     * set a `contentMaxWidth` on cells that should be truncated.
+     * @default "fixed"
+     */
+    layout?: "fixed" | "auto";
+    /**
+     *
+     */
+    columnDefinitions: ColumnDefinitions<T>;
+    data: T[];
+    getRowId?: (rowData: T, index: number) => string | number;
+}
+declare const DataTableAuto: <T>(props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>) => React.ReactElement | null;
+export { DataTableAuto };
+export type { DataTableProps };
+export default DataTableAuto;

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

@@ -0,0 +1,113 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 checkbox_1 = require("../../../form/checkbox");
+const helpers_1 = require("../../../utils/helpers");
+const hooks_1 = require("../../../utils/hooks");
+const useTableKeyboardNav_1 = require("../hooks/useTableKeyboardNav");
+const useTableSelection_1 = require("../hooks/useTableSelection");
+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, {
+        enabled: withKeyboardNav,
+        shouldBlockNavigation,
+    });
+    const resolvedGetRowId = getRowId !== null && getRowId !== void 0 ? getRowId : ((_row, index) => index);
+    const selection = (0, useTableSelection_1.useTableSelection)({
+        selectionMode: selectionModeProp,
+        selectedKeys,
+        defaultSelectedKeys,
+        onSelectionChange,
+        disabledKeys,
+        data,
+        getRowId: resolvedGetRowId,
+    });
+    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" && (
+                            /* TODO: Overflow/focus is clipped. Alignment is off */
+                            /* TODO: Should not be resizable */
+                            react_1.default.createElement(DataTableTh_1.DataTableTh, { textAlign: "center", width: "60px" },
+                                react_1.default.createElement(checkbox_1.Checkbox, Object.assign({}, selection.getTheadCheckboxProps())))),
+                            selection.selectionMode === "single" && (react_1.default.createElement(DataTableTd_1.DataTableTd, { align: "center", width: "60px" })),
+                            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));
+                            }))),
+                    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" },
+                                react_1.default.createElement(checkbox_1.Checkbox, Object.assign({}, selection.getRowCheckboxProps(rowId))))),
+                            selection.selectionMode === "single" && (react_1.default.createElement(DataTableTd_1.DataTableTd, { align: "center", width: "60px" },
+                                react_1.default.createElement(checkbox_1.Checkbox, 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)));
+                            })));
+                    })))))));
+}
+const DataTableAuto = (0, react_1.forwardRef)(DataTableAutoInner);
+exports.DataTableAuto = DataTableAuto;
+exports.default = DataTableAuto;
+//# sourceMappingURL=DataTableAuto.js.map

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

@@ -0,0 +1 @@
+{"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,6 +1,7 @@
-interface DataTableContextProps {
+type DataTableContextProps = {
     layout: "fixed" | "auto";
-}
+    withKeyboardNav: boolean;
+};
 declare const DataTableContextProvider: import("react").FC<DataTableContextProps & {
     children: React.ReactNode;
     ref?: never;

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;AAM7D,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;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"}

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

@@ -1,12 +1,15 @@
 import React from "react";
 import { DataTableCaption, type DataTableCaptionProps } from "../caption/DataTableCaption";
+import { DataTableEmptyState, type DataTableEmptyStateProps } from "../empty-state/DataTableEmptyState";
+import { type SelectionProps } from "../hooks/useTableSelection";
+import { DataTableLoadingState, type DataTableLoadingStateProps } from "../loading-state/DataTableLoadingState";
 import { DataTableTbody, type DataTableTbodyProps } from "../tbody/DataTableTbody";
 import { DataTableTd, type DataTableTdProps } from "../td/DataTableTd";
 import { DataTableTfoot, type DataTableTfootProps } from "../tfoot/DataTableTfoot";
 import { DataTableTh, type DataTableThProps } from "../th/DataTableTh";
 import { DataTableThead, type DataTableTheadProps } from "../thead/DataTableThead";
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
-interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
+interface DataTableProps extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
     children: React.ReactNode;
     /**
      * Controls vertical cell padding.
@@ -143,6 +146,30 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTab
      * ```
      */
     Tfoot: typeof DataTableTfoot;
+    /**
+     * @see 🏷️ {@link DataTableEmptyStateProps}
+     * @example
+     * ```jsx
+     * <DataTable>
+     *   <DataTable.TBody>
+     *     <DataTable.EmptyState />
+     *   </DataTable.TBody>
+     * </DataTable>
+     * ```
+     */
+    EmptyState: typeof DataTableEmptyState;
+    /**
+     * @see 🏷️ {@link DataTableEmptyStateProps}
+     * @example
+     * ```jsx
+     * <DataTable>
+     *   <DataTable.TBody>
+     *     <DataTable.LoadingState />
+     *   </DataTable.TBody>
+     * </DataTable>
+     * ```
+     */
+    LoadingState: typeof DataTableLoadingState;
 }
 /**
  * TODO Component description etc.
@@ -151,6 +178,6 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<DataTab
  * TODO example
  */
 declare const DataTable: DataTableRootComponent;
-export { DataTable, DataTableCaption, DataTableTbody, DataTableTd, DataTableTfoot, DataTableTh, DataTableThead, DataTableTr, };
+export { DataTable, DataTableCaption, DataTableEmptyState, DataTableLoadingState, DataTableTbody, DataTableTd, DataTableTfoot, DataTableTh, DataTableThead, DataTableTr, };
 export default DataTable;
-export type { DataTableCaptionProps, DataTableProps, DataTableTbodyProps, DataTableTdProps, DataTableTfootProps, DataTableTheadProps, DataTableThProps, DataTableTrProps, };
+export type { DataTableCaptionProps, DataTableEmptyStateProps, DataTableLoadingStateProps, DataTableProps, DataTableTbodyProps, DataTableTdProps, DataTableTfootProps, DataTableTheadProps, DataTableThProps, DataTableTrProps, };

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

@@ -44,12 +44,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataTableTr = exports.DataTableThead = exports.DataTableTh = exports.DataTableTfoot = exports.DataTableTd = exports.DataTableTbody = exports.DataTableCaption = exports.DataTable = void 0;
+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 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 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 DataTableLoadingState_1 = require("../loading-state/DataTableLoadingState");
+Object.defineProperty(exports, "DataTableLoadingState", { enumerable: true, get: function () { return DataTableLoadingState_1.DataTableLoadingState; } });
 const DataTableTbody_1 = require("../tbody/DataTableTbody");
 Object.defineProperty(exports, "DataTableTbody", { enumerable: true, get: function () { return DataTableTbody_1.DataTableTbody; } });
 const DataTableTd_1 = require("../td/DataTableTd");
@@ -63,7 +68,6 @@ Object.defineProperty(exports, "DataTableThead", { enumerable: true, get: functi
 const DataTableTr_1 = require("../tr/DataTableTr");
 Object.defineProperty(exports, "DataTableTr", { enumerable: true, get: function () { return DataTableTr_1.DataTableTr; } });
 const DataTableRoot_context_1 = require("./DataTableRoot.context");
-const useTableKeyboardNav_1 = require("./useTableKeyboardNav");
 /**
  * TODO Component description etc.
  *
@@ -78,7 +82,7 @@ const DataTable = (0, react_1.forwardRef)((_a, forwardedRef) => {
         enabled: withKeyboardNav,
         shouldBlockNavigation,
     });
-    return (react_1.default.createElement(DataTableRoot_context_1.DataTableContextProvider, { layout: layout },
+    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 }))))));
@@ -91,5 +95,7 @@ DataTable.Th = DataTableTh_1.DataTableTh;
 DataTable.Tr = DataTableTr_1.DataTableTr;
 DataTable.Td = DataTableTd_1.DataTableTd;
 DataTable.Tfoot = DataTableTfoot_1.DataTableTfoot;
+DataTable.EmptyState = DataTableEmptyState_1.DataTableEmptyState;
+DataTable.LoadingState = DataTableLoadingState_1.DataTableLoadingState;
 exports.default = DataTable;
 //# sourceMappingURL=DataTableRoot.js.map

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;AA4NnC,iGA9NA,mCAAgB,OA8NA;AA3NlB,4DAGiC;AAyN/B,+FA3NA,+BAAc,OA2NA;AAxNhB,mDAAuE;AAyNrE,4FAzNO,yBAAW,OAyNP;AAxNb,4DAGiC;AAsN/B,+FAxNA,+BAAc,OAwNA;AArNhB,mDAAuE;AAsNrE,4FAtNO,yBAAW,OAsNP;AArNb,4DAGiC;AAmN/B,+FArNA,+BAAc,OAqNA;AAlNhB,mDAAuE;AAmNrE,4FAnNO,yBAAW,OAmNP;AAlNb,mEAAmE;AACnE,+DAA4D;AAgJ5D;;;;;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,IAAC,MAAM,EAAE,MAAM;QACtC,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;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;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"}

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

@@ -6,6 +6,16 @@ interface DataTableTdProps extends React.TdHTMLAttributes<HTMLTableCellElement>
      * `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>>;
 export { DataTableTd };

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

@@ -47,9 +47,11 @@ 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 DataTableTd = (0, react_1.forwardRef)((_a, forwardedRef) => {
-    var { className, children, contentMaxWidth } = _a, rest = __rest(_a, ["className", "children", "contentMaxWidth"]);
-    return (react_1.default.createElement("td", Object.assign({}, rest, { ref: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__td", className) }),
+    var { className, children, contentMaxWidth, textAlign = "left" } = _a, rest = __rest(_a, ["className", "children", "contentMaxWidth", "textAlign"]);
+    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), tabIndex: withKeyboardNav ? -1 : undefined, "data-align": textAlign }),
         react_1.default.createElement("div", { style: { maxWidth: contentMaxWidth } }, children)));
 });
 exports.DataTableTd = DataTableTd;

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;AAiB5C,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,CAAC,EAAiD,EAAE,YAAY,EAAE,EAAE;QAAnE,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,OAAW,EAAN,IAAI,cAA/C,4CAAiD,CAAF;IAC9C,OAAO,CACL,sDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,CAAC;QAEhD,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,yEAAoE;AAsBpE,MAAM,WAAW,GAAG,IAAA,kBAAU,EAC5B,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,IAAA,2CAAmB,GAAE,CAAC;IAElD,OAAO,CACL,sDACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAA,YAAE,EAAC,sBAAsB,EAAE,SAAS,CAAC,EAChD,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"}

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

@@ -1,8 +1,13 @@
 import React from "react";
+import { type ResizeProps } from "./useTableColumnResize";
 type SortDirection = "asc" | "desc" | "none";
-interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement>, ResizeProps {
     resizeHandler?: (event: React.MouseEvent<HTMLButtonElement> | React.TouchEvent<HTMLButtonElement>) => void;
-    size?: number;
+    /**
+     * 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.
@@ -30,12 +35,13 @@ interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
      */
     colSpan?: number;
     rowSpan?: number;
-    keyboardResizingHandler?: (size: number) => void;
 }
 /**
  * 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<DataTableThProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const DataTableTh: React.ForwardRefExoticComponent<Omit<DataTableThProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
 export { DataTableTh };
 export type { DataTableThProps };

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

@@ -48,6 +48,9 @@ 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,
@@ -56,37 +59,36 @@ const SORT_ICON = {
 /**
  * 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 DataTableTh = (0, react_1.forwardRef)((_a, forwardedRef) => {
-    var { className, children, resizeHandler, size, sortable = false, sortDirection = "none", onSortClick, style, keyboardResizingHandler } = _a, rest = __rest(_a, ["className", "children", "resizeHandler", "size", "sortable", "sortDirection", "onSortClick", "style", "keyboardResizingHandler"]);
-    const [resizeHandlerActive, setResizeHandlerActive] = react_1.default.useState(false);
+    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 } = (0, DataTableRoot_context_1.useDataTableContext)();
     const [isOverflowing, setIsOverflowing] = react_1.default.useState(false);
     const contentRef = react_1.default.useRef(null);
-    const keyDownHandler = (event) => {
-        if (keyboardResizingHandler) {
-            if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                setResizeHandlerActive((active) => !active);
-            }
-            else if (resizeHandlerActive &&
-                (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
-                event.preventDefault();
-                keyboardResizingHandler(event.key === "ArrowRight" ? 10 : -10);
-            }
-        }
-    };
+    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: forwardedRef, className: (0, helpers_1.cl)("aksel-data-table__th", className), "data-sortable": sortable, style: Object.assign({ width: size }, style), "aria-sort": sortable ? getAriaSort(sortDirection) : undefined, onPointerEnter: () => {
+    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) }),
+        }, 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 },
-            SortIcon && (react_1.default.createElement(SortIcon, { "aria-hidden": true, "data-sort-direction": sortDirection, className: "aksel-data-table__th-sort-icon" })),
-            react_1.default.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children))) : (react_1.default.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children)),
-        resizeHandler && (react_1.default.createElement("button", { 
-            // TODO: Should probably not be a button since it doesn't have onClick
-            onMouseDown: resizeHandler, onTouchStart: resizeHandler, onBlur: () => setResizeHandlerActive(false), className: "aksel-data-table__th-resize-handle", "data-active": resizeHandlerActive, "data-block-keyboard-nav": true, onKeyDown: keyDownHandler }, resizeHandlerActive && (react_1.default.createElement(react_1.default.Fragment, null,
+            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: "aksel-data-table__th-content" }, children)),
+        resizeResult.enabled && (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" },

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":"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"}