@navikt/ds-react 8.7.0 → 8.9.0

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

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

package/esm/data/table/hooks/useTableSelection.d.ts

@@ -0,0 +1,8 @@
+import type { SelectionProps, SelectionT, TableSelection } from "../helpers/selection/selection.types.js";
+type UseTableSelectionArgs<T> = SelectionProps & {
+    data: T[];
+    getRowId: (rowData: T, index: number) => string | number;
+};
+declare function useTableSelection<T>({ selectionMode, defaultSelectedKeys, selectedKeys: selectedKeysProp, onSelectionChange, disabledKeys, data, getRowId, }: UseTableSelectionArgs<T>): TableSelection;
+export { useTableSelection };
+export type { SelectionProps, SelectionT };

package/esm/data/table/hooks/useTableSelection.js

@@ -0,0 +1,47 @@
+import { useMemo } from "react";
+import { useControllableState } from "../../../utils/hooks/index.js";
+import { getMultipleSelectProps } from "../helpers/selection/getMultipleSelectProps.js";
+import { getSingleSelectProps } from "../helpers/selection/getSingleSelectProps.js";
+function useTableSelection({ selectionMode = "none", defaultSelectedKeys, selectedKeys: selectedKeysProp, onSelectionChange, disabledKeys = [], data, getRowId, }) {
+    const allKeys = useMemo(() => data.map((item, index) => getRowId(item, index)), [data, getRowId]);
+    const [selectedKeys, setSelectedKeys] = useControllableState({
+        value: selectionMode !== "none" ? selectedKeysProp : undefined,
+        defaultValue: defaultSelectedKeys !== null && defaultSelectedKeys !== void 0 ? defaultSelectedKeys : [],
+        onChange: onSelectionChange,
+    });
+    if (selectionMode === "none") {
+        return { selectionMode, allKeys, selectedKeys: [], disabledKeys };
+    }
+    if (selectionMode === "single") {
+        const arrayKeys = Array.isArray(selectedKeys) ? selectedKeys : [];
+        const { getRowRadioProps } = getSingleSelectProps({
+            selectedKeys: arrayKeys,
+            setSelectedKeys,
+            disabledKeys,
+        });
+        return {
+            selectionMode,
+            allKeys,
+            selectedKeys: arrayKeys,
+            disabledKeys,
+            getRowRadioProps,
+        };
+    }
+    const { getTheadCheckboxProps, getRowCheckboxProps } = getMultipleSelectProps({
+        selectedKeys,
+        setSelectedKeys,
+        disabledKeys,
+        allKeys,
+        totalCount: data.length,
+    });
+    return {
+        selectionMode,
+        allKeys,
+        selectedKeys,
+        disabledKeys,
+        getTheadCheckboxProps,
+        getRowCheckboxProps,
+    };
+}
+export { useTableSelection };
+//# sourceMappingURL=useTableSelection.js.map

package/esm/data/table/hooks/useTableSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableSelection.js","sourceRoot":"","sources":["../../../../src/data/table/hooks/useTableSelection.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,6CAA6C,CAAC;AACrF,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AAYjF,SAAS,iBAAiB,CAAI,EAC5B,aAAa,GAAG,MAAM,EACtB,mBAAmB,EACnB,YAAY,EAAE,gBAAgB,EAC9B,iBAAiB,EACjB,YAAY,GAAG,EAAE,EACjB,IAAI,EACJ,QAAQ,GACiB;IACzB,MAAM,OAAO,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EACtD,CAAC,IAAI,EAAE,QAAQ,CAAC,CACjB,CAAC;IAEF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,oBAAoB,CAAa;QACvE,KAAK,EAAE,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;QAC9D,YAAY,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,EAAE;QACvC,QAAQ,EAAE,iBAAiB;KAC5B,CAAC,CAAC;IAEH,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;QAC7B,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,EAAE,YAAY,EAAE,CAAC;IACpE,CAAC;IAED,IAAI,aAAa,KAAK,QAAQ,EAAE,CAAC;QAC/B,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;QAClE,MAAM,EAAE,gBAAgB,EAAE,GAAG,oBAAoB,CAAC;YAChD,YAAY,EAAE,SAAS;YACvB,eAAe;YACf,YAAY;SACb,CAAC,CAAC;QAEH,OAAO;YACL,aAAa;YACb,OAAO;YACP,YAAY,EAAE,SAAS;YACvB,YAAY;YACZ,gBAAgB;SACjB,CAAC;IACJ,CAAC;IAED,MAAM,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,GAAG,sBAAsB,CAC3E;QACE,YAAY;QACZ,eAAe;QACf,YAAY;QACZ,OAAO;QACP,UAAU,EAAE,IAAI,CAAC,MAAM;KACxB,CACF,CAAC;IAEF,OAAO;QACL,aAAa;QACb,OAAO;QACP,YAAY;QACZ,YAAY;QACZ,qBAAqB;QACrB,mBAAmB;KACpB,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/esm/data/table/loading-state/DataTableLoadingState.d.ts

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

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

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers/index.js";
+const DataTableLoadingState = forwardRef((_a, forwardedRef) => {
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    return (React.createElement("tr", null,
+        React.createElement("td", { colSpan: 999 },
+            React.createElement("div", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__loading-state", className) }), children))));
+});
+export { DataTableLoadingState };
+//# sourceMappingURL=DataTableLoadingState.js.map

package/esm/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,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAI5C,MAAM,qBAAqB,GAAG,UAAU,CAGtC,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;QAAlD,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC/B,OAAO,CACL;QACE,4BAAI,OAAO,EAAE,GAAG;YACd,6CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,iCAAiC,EAAE,SAAS,CAAC,KAE1D,QAAQ,CACL,CACH,CACF,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/esm/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/esm/data/table/root/DataTable.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=DataTable.types.js.map

package/esm/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/esm/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.js";
+import type { ColumnDefinitions } from "./DataTable.types.js";
+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/esm/data/table/root/DataTableAuto.js

@@ -0,0 +1,77 @@
+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;
+};
+/** 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 { cl } from "../../../utils/helpers/index.js";
+import { useMergeRefs } from "../../../utils/hooks/index.js";
+import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav.js";
+import { useTableSelection, } from "../hooks/useTableSelection.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";
+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, {
+        enabled: withKeyboardNav,
+        shouldBlockNavigation,
+    });
+    const resolvedGetRowId = getRowId !== null && getRowId !== void 0 ? getRowId : ((_row, index) => index);
+    const selection = useTableSelection({
+        selectionMode: selectionModeProp,
+        selectedKeys,
+        defaultSelectedKeys,
+        onSelectionChange,
+        disabledKeys,
+        data,
+        getRowId: resolvedGetRowId,
+    });
+    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));
+                            }))),
+                    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)));
+                            })));
+                    })))))));
+}
+const DataTableAuto = forwardRef(DataTableAutoInner);
+export { DataTableAuto };
+export default DataTableAuto;
+//# sourceMappingURL=DataTableAuto.js.map

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

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

@@ -1,12 +1,15 @@
 import React from "react";
 import { DataTableCaption, type DataTableCaptionProps } from "../caption/DataTableCaption.js";
+import { DataTableEmptyState, type DataTableEmptyStateProps } from "../empty-state/DataTableEmptyState.js";
+import { type SelectionProps } from "../hooks/useTableSelection.js";
+import { DataTableLoadingState, type DataTableLoadingStateProps } from "../loading-state/DataTableLoadingState.js";
 import { DataTableTbody, type DataTableTbodyProps } from "../tbody/DataTableTbody.js";
 import { DataTableTd, type DataTableTdProps } from "../td/DataTableTd.js";
 import { DataTableTfoot, type DataTableTfootProps } from "../tfoot/DataTableTfoot.js";
 import { DataTableTh, type DataTableThProps } from "../th/DataTableTh.js";
 import { DataTableThead, type DataTableTheadProps } from "../thead/DataTableThead.js";
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr.js";
-interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
+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/esm/data/table/root/DataTableRoot.js

@@ -13,6 +13,9 @@ import React, { forwardRef, useState } from "react";
 import { cl } from "../../../utils/helpers/index.js";
 import { useMergeRefs } from "../../../utils/hooks/index.js";
 import { DataTableCaption, } from "../caption/DataTableCaption.js";
+import { DataTableEmptyState, } from "../empty-state/DataTableEmptyState.js";
+import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav.js";
+import { DataTableLoadingState, } from "../loading-state/DataTableLoadingState.js";
 import { DataTableTbody, } from "../tbody/DataTableTbody.js";
 import { DataTableTd } from "../td/DataTableTd.js";
 import { DataTableTfoot, } from "../tfoot/DataTableTfoot.js";
@@ -20,7 +23,6 @@ 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 { useTableKeyboardNav } from "./useTableKeyboardNav.js";
 /**
  * TODO Component description etc.
  *
@@ -35,7 +37,7 @@ const DataTable = forwardRef((_a, forwardedRef) => {
         enabled: withKeyboardNav,
         shouldBlockNavigation,
     });
-    return (React.createElement(DataTableContextProvider, { layout: layout },
+    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 }))))));
@@ -47,6 +49,8 @@ DataTable.Th = DataTableTh;
 DataTable.Tr = DataTableTr;
 DataTable.Td = DataTableTd;
 DataTable.Tfoot = DataTableTfoot;
-export { DataTable, DataTableCaption, DataTableTbody, DataTableTd, DataTableTfoot, DataTableTh, DataTableThead, DataTableTr, };
+DataTable.EmptyState = DataTableEmptyState;
+DataTable.LoadingState = DataTableLoadingState;
+export { DataTable, DataTableCaption, DataTableEmptyState, DataTableLoadingState, DataTableTbody, DataTableTd, DataTableTfoot, DataTableTh, DataTableThead, DataTableTr, };
 export default DataTable;
 //# sourceMappingURL=DataTableRoot.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACL,gBAAgB,GAEjB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAgJ5D;;;;;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,IAAC,MAAM,EAAE,MAAM;QACtC,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;AAEjC,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,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":";;;;;;;;;;;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"}

package/esm/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/esm/data/table/td/DataTableTd.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 { useDataTableContext } from "../root/DataTableRoot.context.js";
 const DataTableTd = forwardRef((_a, forwardedRef) => {
-    var { className, children, contentMaxWidth } = _a, rest = __rest(_a, ["className", "children", "contentMaxWidth"]);
-    return (React.createElement("td", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__td", className) }),
+    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)));
 });
 export { DataTableTd };

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;AAiB5C,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAiD,EAAE,YAAY,EAAE,EAAE;QAAnE,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,OAAW,EAAN,IAAI,cAA/C,4CAAiD,CAAF;IAC9C,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,CAAC;QAEhD,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,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"}

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

@@ -1,8 +1,13 @@
 import React from "react";
+import { type ResizeProps } from "./useTableColumnResize.js";
 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/esm/data/table/th/DataTableTh.js

@@ -9,9 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 import { ArrowsUpDownIcon, CaretLeftCircleFillIcon, CaretRightCircleFillIcon, SortDownIcon, SortUpIcon, } from "@navikt/aksel-icons";
 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,
@@ -20,37 +23,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 = 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.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 } = useDataTableContext();
     const [isOverflowing, setIsOverflowing] = React.useState(false);
     const contentRef = React.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] = 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: forwardedRef, className: cl("aksel-data-table__th", className), "data-sortable": sortable, style: Object.assign({ width: size }, style), "aria-sort": sortable ? getAriaSort(sortDirection) : undefined, onPointerEnter: () => {
+    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) }),
+        }, 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 },
-            SortIcon && (React.createElement(SortIcon, { "aria-hidden": true, "data-sort-direction": sortDirection, className: "aksel-data-table__th-sort-icon" })),
-            React.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children))) : (React.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children)),
-        resizeHandler && (React.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.createElement(React.Fragment, null,
+            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" },

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