@navikt/ds-react 8.10.1 → 8.10.3

package/cjs/data/table/column-header/DataTableColumnHeader.d.ts

@@ -26,6 +26,6 @@ interface DataTableColumnHeaderProps extends ResizeProps, DataTableBaseCellProps
  * - Plan for pinning: Move it into "settings" dialog like here: https://cloudscape.design/examples/react/table.html
  * Toggling `data-block-keyboard-nav` does not work since the created "grid" does not update when toggling this attribute.
  */
-declare const DataTableColumnHeader: React.ForwardRefExoticComponent<Omit<DataTableColumnHeaderProps, "ref"> & React.RefAttributes<HTMLTableCellElement>>;
+declare const DataTableColumnHeader: React.ForwardRefExoticComponent<DataTableColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
 export { DataTableColumnHeader };
 export type { DataTableColumnHeaderProps };

package/cjs/data/table/column-header/DataTableColumnHeader.js

@@ -62,15 +62,16 @@ const SORT_ICON = {
  * Toggling `data-block-keyboard-nav` does not work since the created "grid" does not update when toggling this attribute.
  */
 const DataTableColumnHeader = (0, react_1.forwardRef)((_a, forwardedRef) => {
-    var { className, children, sortable = false, sortDirection = "none", onSortClick, style, width, minWidth, maxWidth, onWidthChange, defaultWidth, colSpan, rowSpan, UNSAFE_isSelection } = _a, rest = __rest(_a, ["className", "children", "sortable", "sortDirection", "onSortClick", "style", "width", "minWidth", "maxWidth", "onWidthChange", "defaultWidth", "colSpan", "rowSpan", "UNSAFE_isSelection"]);
-    const [isOverflowing, setIsOverflowing] = react_1.default.useState(false);
+    var { className, children, sortable = false, sortDirection = "none", onSortClick, resizable = true, style, width, defaultWidth, autoWidth, minWidth, maxWidth, onWidthChange, colSpan, rowSpan, UNSAFE_isSelection } = _a, rest = __rest(_a, ["className", "children", "sortable", "sortDirection", "onSortClick", "resizable", "style", "width", "defaultWidth", "autoWidth", "minWidth", "maxWidth", "onWidthChange", "colSpan", "rowSpan", "UNSAFE_isSelection"]);
     const contentRef = react_1.default.useRef(null);
-    const [thRefState, setThRefState] = (0, react_1.useState)(null);
-    const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, setThRefState);
+    const thRef = (0, react_1.useRef)(null);
+    const mergedRef = (0, hooks_1.useMergeRefs)(forwardedRef, thRef);
     const resizeResult = (0, useTableColumnResize_1.useTableColumnResize)({
-        ref: thRefState,
+        resizable,
+        thRef,
         width,
         defaultWidth,
+        autoWidth,
         minWidth,
         maxWidth,
         onWidthChange,
@@ -78,17 +79,21 @@ const DataTableColumnHeader = (0, react_1.forwardRef)((_a, forwardedRef) => {
         colSpan,
     });
     const SortIcon = sortable ? SORT_ICON[sortDirection] : null;
-    return (react_1.default.createElement(DataTableBaseCell_1.DataTableBaseCell, Object.assign({ as: "th" }, rest, { ref: mergedRef, className: (0, helpers_1.cl)("aksel-data-table__column-header", 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), UNSAFE_isSelection: UNSAFE_isSelection, colSpan: colSpan, rowSpan: rowSpan }),
+    return (react_1.default.createElement(DataTableBaseCell_1.DataTableBaseCell, Object.assign({ as: "th" }, rest, { ref: mergedRef, className: (0, helpers_1.cl)("aksel-data-table__column-header", className), "data-sortable": sortable, style: resizeResult.style, "aria-sort": sortable ? getAriaSort(sortDirection) : undefined, UNSAFE_isSelection: UNSAFE_isSelection, colSpan: colSpan, rowSpan: rowSpan }),
         sortable ? (react_1.default.createElement("button", { className: "aksel-data-table__th-sort-button", onClick: onSortClick },
             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,
             }) }, 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-disable-keyboard-nav": resizeResult.isResizingWithKeyboard, "data-block-keyboard-nav": true }), resizeResult.isResizingWithKeyboard && (react_1.default.createElement(react_1.default.Fragment, null,
+        resizeResult.enabled && !UNSAFE_isSelection && (react_1.default.createElement("button", Object.assign({}, resizeResult.resizeHandlerProps, { className: "aksel-data-table__th-resize-handle", "aria-label": resizeResult.isResizingWithKeyboard
+                ? "Bruk pil venstre/høyre"
+                : "Endre bredde", "data-active": resizeResult.isResizingWithKeyboard, "data-disable-keyboard-nav": resizeResult.isResizingWithKeyboard, "data-block-keyboard-nav": true, role: "slider", "aria-valuenow": typeof resizeResult.style.width === "number"
+                ? resizeResult.style.width
+                : 0, "aria-valuetext": typeof resizeResult.style.width === "number" &&
+                resizeResult.isResizingWithKeyboard
+                ? resizeResult.style.width.toString()
+                : "" // Needs to be blank when not in keyboard resizing mode to avoid NVDA announcing the value as part of the column heading
+         }), 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/column-header/DataTableColumnHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableColumnHeader.js","sourceRoot":"","sources":["../../../../src/data/table/column-header/DataTableColumnHeader.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTableColumnHeader.js","sourceRoot":"","sources":["../../../../src/data/table/column-header/DataTableColumnHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAkD;AAClD,qDAM6B;AAC7B,oDAA4C;AAC5C,gDAAoD;AACpD,sEAGwC;AAExC,iEAAgF;AA2BhF,MAAM,SAAS,GAAoD;IACjE,GAAG,EAAE,wBAAU;IACf,IAAI,EAAE,0BAAY;IAClB,IAAI,EAAE,8BAAgB;CACvB,CAAC;AAEF;;;;GAIG;AACH,MAAM,qBAAqB,GAAG,IAAA,kBAAU,EAItC,CACE,EAkBC,EACD,YAAY,EACZ,EAAE;QApBF,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,MAAM,EACtB,WAAW,EACX,SAAS,GAAG,IAAI,EAChB,KAAK,EACL,KAAK,EACL,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,OAAO,EACP,OAAO,EACP,kBAAkB,OAEnB,EADI,IAAI,cAjBT,sNAkBC,CADQ;IAIT,MAAM,UAAU,GAAG,eAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IACtD,MAAM,KAAK,GAAG,IAAA,cAAM,EAAuB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,IAAA,oBAAY,EAAC,YAAY,EAAE,KAAK,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAG,IAAA,2CAAoB,EAAC;QACxC,SAAS;QACT,KAAK;QACL,KAAK;QACL,YAAY;QACZ,SAAS;QACT,QAAQ;QACR,QAAQ;QACR,aAAa;QACb,KAAK;QACL,OAAO;KACR,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IAE5D,OAAO,CACL,8BAAC,qCAAiB,kBAChB,EAAE,EAAC,IAAI,IACH,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,IAAA,YAAE,EAAC,iCAAiC,EAAE,SAAS,CAAC,mBAC5C,QAAQ,EACvB,KAAK,EAAE,YAAY,CAAC,KAAK,eACd,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,EAC5D,kBAAkB,EAAE,kBAAkB,EACtC,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO;QAEf,QAAQ,CAAC,CAAC,CAAC,CACV,0CACE,SAAS,EAAC,kCAAkC,EAC5C,OAAO,EAAE,WAAW;YAEpB,uCAAK,GAAG,EAAE,UAAU,EAAE,SAAS,EAAC,8BAA8B,IAC3D,QAAQ,CACL;YACL,QAAQ,IAAI,CACX,8BAAC,QAAQ,gDAEc,aAAa,EAClC,SAAS,EAAC,gCAAgC,EAC1C,QAAQ,EAAC,SAAS,GAClB,CACH,CACM,CACV,CAAC,CAAC,CAAC,CACF,uCACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,IAAA,YAAE,EAAC;gBACZ,8BAA8B,EAAE,CAAC,kBAAkB;aACpD,CAAC,IAED,QAAQ,CACL,CACP;QAEA,YAAY,CAAC,OAAO,IAAI,CAAC,kBAAkB,IAAI,CAC9C,0DACM,YAAY,CAAC,kBAAkB,IACnC,SAAS,EAAC,oCAAoC,gBAE5C,YAAY,CAAC,sBAAsB;gBACjC,CAAC,CAAC,wBAAwB;gBAC1B,CAAC,CAAC,cAAc,iBAEP,YAAY,CAAC,sBAAsB,+BACrB,YAAY,CAAC,sBAAsB,mCAE9D,IAAI,EAAC,QAAQ,mBAEX,OAAO,YAAY,CAAC,KAAK,CAAC,KAAK,KAAK,QAAQ;gBAC1C,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK;gBAC1B,CAAC,CAAC,CAAC,oBAGL,OAAO,YAAY,CAAC,KAAK,CAAC,KAAK,KAAK,QAAQ;gBAC5C,YAAY,CAAC,sBAAsB;gBACjC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE;gBACrC,CAAC,CAAC,EAAE,CAAC,wHAAwH;aAGhI,YAAY,CAAC,sBAAsB,IAAI,CACtC;YACE,wCAAM,SAAS,EAAC,kGAAkG;gBAChH,8BAAC,qCAAuB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CACpD;YACP,wCAAM,SAAS,EAAC,gGAAgG;gBAC9G,8BAAC,sCAAwB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CACrD,CACN,CACJ,CACM,CACV,CACiB,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAWO,sDAAqB;AAT9B,SAAS,WAAW,CAClB,aAAwC;IAExC,IAAI,aAAa,KAAK,KAAK;QAAE,OAAO,WAAW,CAAC;IAChD,IAAI,aAAa,KAAK,MAAM;QAAE,OAAO,YAAY,CAAC;IAClD,IAAI,aAAa,KAAK,MAAM;QAAE,OAAO,MAAM,CAAC;IAC5C,OAAO,SAAS,CAAC;AACnB,CAAC"}

package/cjs/data/table/column-header/useTableColumnResize.d.ts

@@ -1,7 +1,13 @@
 import { type DOMAttributes } from "react";
 type ColumnWidth = number | string;
 type ResizeProps = {
-    ref: HTMLTableCellElement | null;
+    /**
+     * Whether the column should be resizable by the user.
+     *
+     * **NB:** This is always disabled when `layout="auto"` on the root component.
+     * @default true
+     */
+    resizable?: boolean;
     /**
      * Controlled width of the column.
      *
@@ -9,9 +15,20 @@ type ResizeProps = {
      */
     width?: ColumnWidth;
     /**
-     * Initial width of the column. Only used when `width` is not set.
+     * Initial width of the column. Only used when `width` is not set and `resizable` is true.
      */
     defaultWidth?: ColumnWidth;
+    /**
+     * Whether the column should automatically resize to fit its content. **Runs only once.**
+     *
+     * `onWidthChange` will be called with the new size. `minWidth` and `maxWidth` will be respected.
+     *
+     * If you don't need manual resizing support and want most of the columns to resize automatically,
+     * consider using `layout="auto"` on the root instead for better performance.
+     *
+     * **NB:** This can cause a layout shift. Set a good initial width with `width` or `defaultWidth` to mitigate this.
+     */
+    autoWidth?: boolean;
     /**
      * Minimum width of the column.
      *
@@ -37,15 +54,22 @@ type ResizeProps = {
      */
     colSpan?: number;
 };
-type TableColumnResizeArgs = ResizeProps & {};
+type WithUndefined<T> = {
+    [K in keyof T]: T[K] | undefined;
+};
+type Unomittable<T> = WithUndefined<Required<T>>;
+type TableColumnResizeArgs = Unomittable<ResizeProps> & {
+    thRef: React.RefObject<HTMLTableCellElement | null>;
+};
 type TableColumnResizeResult = {
-    style?: React.CSSProperties;
+    style: React.CSSProperties;
     resizeHandlerProps: {
         onMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"];
         onTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"];
         onKeyDown: DOMAttributes<HTMLButtonElement>["onKeyDown"];
         onBlur: DOMAttributes<HTMLButtonElement>["onBlur"];
         onDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"];
+        onClick: DOMAttributes<HTMLButtonElement>["onClick"];
     };
     isResizingWithKeyboard: boolean;
     enabled: true;

package/cjs/data/table/column-header/useTableColumnResize.js

@@ -11,9 +11,11 @@ const DataTableRoot_context_1 = require("../root/DataTableRoot.context");
  * be able to set "1fr" or similar and have it fill remaining space.
  */
 function useTableColumnResize(args) {
-    const { ref, width: userWidth, defaultWidth, onWidthChange, maxWidth = Infinity, minWidth = 40, style, colSpan, } = args;
+    const { resizable, thRef, width: userWidth, defaultWidth, autoWidth, onWidthChange, maxWidth = Infinity, minWidth = 40, style, colSpan, } = args;
     const tableContext = (0, DataTableRoot_context_1.useDataTableContext)();
-    const [width, _setWidth] = (0, hooks_1.useControllableState)({
+    const [isResizingWithKeyboard, setIsResizingWithKeyboard] = (0, react_1.useState)(false);
+    const ignoreNextOnClick = (0, react_1.useRef)(false);
+    const [width, setWidth] = (0, hooks_1.useControllableState)({
         value: userWidth,
         defaultValue: defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : (colSpan !== null && colSpan !== void 0 ? colSpan : 1) * 140,
         /**
@@ -23,48 +25,80 @@ function useTableColumnResize(args) {
          */
         onChange: onWidthChange,
     });
-    const [isResizingWithKeyboard, setIsResizingWithKeyboard] = (0, react_1.useState)(false);
-    const [, setIsResizingWithMouse] = (0, react_1.useState)(false);
-    const setWidth = (0, react_1.useCallback)((newWidth) => {
+    const setClampedWidth = (0, react_1.useCallback)((newWidth) => {
         var _a, _b;
-        const currentWidth = ref === null || ref === void 0 ? void 0 : ref.offsetWidth;
-        if (!currentWidth) {
-            return;
-        }
         const min = (_a = parseWidth(minWidth)) !== null && _a !== void 0 ? _a : 0;
         const max = (_b = parseWidth(maxWidth)) !== null && _b !== void 0 ? _b : Infinity;
         const clamped = Math.min(Math.max(newWidth, min), max);
-        if (newWidth <= currentWidth && newWidth > max) {
-            _setWidth(newWidth);
+        setWidth(clamped);
+    }, [minWidth, maxWidth, setWidth]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to run this on mount and when autoWidth changes
+    (0, react_1.useEffect)(function autoResizeColumn() {
+        if (!autoWidth) {
             return;
         }
-        if (newWidth >= currentWidth && newWidth > max) {
-            _setWidth(currentWidth);
-            return;
+        const newColumnWidth = getAutoColumnWidth(thRef);
+        if (newColumnWidth) {
+            setClampedWidth(newColumnWidth);
         }
-        _setWidth(clamped);
-    }, [minWidth, maxWidth, _setWidth, ref]);
-    const handleKeyDown = (0, react_1.useCallback)((event) => {
-        if (event.key === "Enter" || event.key === " ") {
-            setIsResizingWithKeyboard((prev) => !prev);
+    }, [autoWidth]);
+    const handleOnClick = (0, react_1.useCallback)(() => {
+        // We need to use the onClick event in order to support screen readers properly,
+        // since some of them only send a mouse click when pressing enter/space.
+        // We detect a "screen reader click" by checking if we had a mouseUp event right before.
+        if (ignoreNextOnClick.current) {
+            ignoreNextOnClick.current = false;
             return;
         }
+        setIsResizingWithKeyboard((prev) => !prev);
+    }, []);
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        var _a, _b;
         if (!isResizingWithKeyboard) {
             return;
         }
+        const currentWidth = (_b = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
         if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
             event.preventDefault();
-            const th = event.target.closest("th");
-            const startWidth = th.offsetWidth;
             const delta = event.key === "ArrowRight" ? 20 : -20;
-            setWidth(startWidth + delta);
+            setClampedWidth(currentWidth + delta);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            setClampedWidth(0); // will fall back to minWidth
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            const newWidth = getAutoColumnWidth(thRef);
+            if (newWidth && newWidth > currentWidth) {
+                setClampedWidth(newWidth);
+            }
+            return;
         }
-    }, [isResizingWithKeyboard, setWidth]);
-    const startResize = (0, react_1.useCallback)((th, startX) => {
-        setIsResizingWithMouse(true);
-        const startWidth = th.offsetWidth;
+        if (event.key === "Escape") {
+            setIsResizingWithKeyboard(false);
+        }
+    }, [isResizingWithKeyboard, setClampedWidth, thRef]);
+    const startResize = (0, react_1.useCallback)((startX) => {
+        var _a, _b;
+        const startWidth = (_b = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
         function onPointerMove(clientX) {
-            setWidth(startWidth + (clientX - startX));
+            var _a, _b, _c, _d;
+            const currentWidth = (_b = (_a = thRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0;
+            const newWidth = startWidth + (clientX - startX);
+            const min = (_c = parseWidth(minWidth)) !== null && _c !== void 0 ? _c : 0;
+            const max = (_d = parseWidth(maxWidth)) !== null && _d !== void 0 ? _d : Infinity;
+            if (newWidth > max) {
+                setWidth(newWidth < currentWidth ? newWidth : currentWidth);
+                return;
+            }
+            if (newWidth < min) {
+                setWidth(newWidth > currentWidth ? newWidth : currentWidth);
+                return;
+            }
+            setClampedWidth(newWidth);
         }
         function onMouseMove(e) {
             onPointerMove(e.clientX);
@@ -76,45 +110,42 @@ function useTableColumnResize(args) {
         function cleanup() {
             document.removeEventListener("mousemove", onMouseMove);
             document.removeEventListener("touchmove", onTouchMove);
-            document.removeEventListener("mouseup", cleanup);
-            document.removeEventListener("touchend", cleanup);
-            document.removeEventListener("touchcancel", cleanup);
-            setIsResizingWithMouse(false);
+            setIsResizingWithKeyboard(false);
+            // We only want onClick to trigger when using the keyboard
+            // (we use onClick b.c. keyDown doesn't fire when using a screen reader)
+            ignoreNextOnClick.current = true;
         }
         document.addEventListener("mousemove", onMouseMove);
         document.addEventListener("touchmove", onTouchMove, { passive: false });
-        document.addEventListener("mouseup", cleanup);
-        document.addEventListener("touchend", cleanup);
-        document.addEventListener("touchcancel", cleanup);
-    }, [setWidth]);
+        document.addEventListener("mouseup", cleanup, { once: true });
+        document.addEventListener("touchend", cleanup, { once: true });
+        document.addEventListener("touchcancel", cleanup, { once: true });
+    }, [maxWidth, minWidth, setWidth, setClampedWidth, thRef]);
     const handleMouseDown = (0, react_1.useCallback)((event) => {
-        const th = event.target.closest("th");
-        startResize(th, event.clientX);
+        startResize(event.clientX);
     }, [startResize]);
     const handleTouchStart = (0, react_1.useCallback)((event) => {
-        const th = event.target.closest("th");
-        startResize(th, event.touches[0].clientX);
+        startResize(event.touches[0].clientX);
     }, [startResize]);
-    /**
-     * TODO: Do we even want this?
-     * - + 32px padding is hardcoded now, fix this
-     * - Need to find widest element in column, not the header itself.
-     * - Should doubleclick just reset to defaultWidth? Or add a autoWidth prop.
-     */
-    const handleDoubleClick = (0, react_1.useCallback)((event) => {
-        const th = event.target.closest("th");
-        const contentEl = th.getElementsByClassName("aksel-data-table__th-content")[0];
-        const range = document.createRange();
-        range.selectNodeContents(contentEl);
-        const contentWidth = range.getBoundingClientRect().width;
-        setWidth(contentWidth + 32);
-    }, [setWidth]);
+    // Auto-size column to fit content on double click. NB: Doesn't work with block content!
+    const handleDoubleClick = (0, react_1.useCallback)(() => {
+        const newColumnWidth = getAutoColumnWidth(thRef);
+        if (newColumnWidth) {
+            setClampedWidth(newColumnWidth);
+        }
+    }, [setClampedWidth, thRef]);
     if (tableContext.layout !== "fixed") {
         return {
             style,
             enabled: false,
         };
     }
+    if (!resizable) {
+        return {
+            style: Object.assign(Object.assign({}, style), { width }),
+            enabled: false,
+        };
+    }
     return {
         style: Object.assign(Object.assign({}, style), { width }),
         resizeHandlerProps: {
@@ -123,6 +154,7 @@ function useTableColumnResize(args) {
             onKeyDown: handleKeyDown,
             onBlur: () => setIsResizingWithKeyboard(false),
             onDoubleClick: handleDoubleClick,
+            onClick: handleOnClick,
         },
         isResizingWithKeyboard,
         enabled: true,
@@ -141,4 +173,63 @@ function parseWidth(width) {
     }
     return undefined;
 }
+function getAutoColumnWidth(thRef) {
+    var _a;
+    const th = thRef.current;
+    const thContent = th.querySelector(".aksel-data-table__th-content");
+    const thPaddingEl = th.querySelector("div");
+    const rows = (_a = th.closest("table")) === null || _a === void 0 ? void 0 : _a.querySelectorAll("tbody tr, tfoot tr");
+    if (!thContent || !thPaddingEl || !rows) {
+        return;
+    }
+    // Find needed width for header cell
+    const contentWidth = thContent.scrollWidth;
+    const paddingElStyle = window.getComputedStyle(thPaddingEl);
+    const thInlinePadding = parseInt(paddingElStyle.paddingLeft, 10) +
+        parseInt(paddingElStyle.paddingRight, 10);
+    let newColumnWidth = contentWidth + thInlinePadding;
+    // Find column position
+    let columnPosition = 1;
+    let prevSibling = th.previousElementSibling;
+    while (prevSibling) {
+        columnPosition += prevSibling.colSpan;
+        prevSibling = prevSibling.previousElementSibling;
+    }
+    // Find needed width for each cell in column in tbody and tfoot
+    const range = document.createRange();
+    let skipRows = 0;
+    for (const row of rows) {
+        // Skip rows where the cell in this column is covered by a rowspan from a previous row
+        if (skipRows > 0) {
+            skipRows--;
+            continue;
+        }
+        // Find cell
+        let cell = row.firstChild;
+        let currentPosition = cell.colSpan;
+        while (columnPosition > currentPosition && cell.nextElementSibling) {
+            cell = cell.nextElementSibling;
+            currentPosition += cell.colSpan;
+        }
+        skipRows = cell.rowSpan - 1;
+        // Find needed width
+        const cellContent = cell.firstChild;
+        range.selectNodeContents(cellContent);
+        const cellContentWidth = range.getBoundingClientRect().width;
+        const contentElStyle = window.getComputedStyle(cellContent);
+        const inlinePadding = parseInt(contentElStyle.paddingLeft, 10) +
+            parseInt(contentElStyle.paddingRight, 10);
+        const widthNeededForThisCell = (cellContentWidth + inlinePadding) / cell.colSpan;
+        if (widthNeededForThisCell > newColumnWidth) {
+            newColumnWidth = widthNeededForThisCell;
+        }
+    }
+    // Make sure new width is not wider than the table container since that would be impractical
+    const container = th.closest("div");
+    const maxColWidth = ((container === null || container === void 0 ? void 0 : container.offsetWidth) || document.documentElement.clientWidth * 0.9) *
+        0.95;
+    return newColumnWidth > maxColWidth
+        ? Math.floor(maxColWidth)
+        : Math.ceil(newColumnWidth);
+}
 //# sourceMappingURL=useTableColumnResize.js.map

package/cjs/data/table/column-header/useTableColumnResize.js.map

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

package/cjs/data/table/helpers/collectTableRowEntries.d.ts

@@ -0,0 +1,24 @@
+type TableRowEntryId = string | number;
+type CollectTableRowEntriesArgs<T> = {
+    items: T[];
+    getRowId?: (rowData: T, index: number) => TableRowEntryId;
+    getSubRows?: (rowData: T) => T[];
+    isSubRowExpandable?: (rowData: T) => boolean;
+};
+interface ItemDetail<T> {
+    id: string | number;
+    level: number;
+    parent: null | T;
+    children: readonly T[];
+}
+type CollectTableRowEntriesReturn<T> = {
+    itemDetails: Map<T, ItemDetail<T>>;
+    /**
+     * Direct child ids for each row, used to traverse nested selection groups
+     * without storing every descendant list on each ancestor.
+     */
+    childRowIdsById: Map<TableRowEntryId, TableRowEntryId[]>;
+};
+declare function collectTableRowEntries<T>({ items, getRowId, getSubRows, isSubRowExpandable, }: CollectTableRowEntriesArgs<T>): CollectTableRowEntriesReturn<T>;
+export { collectTableRowEntries };
+export type { CollectTableRowEntriesArgs, CollectTableRowEntriesReturn, TableRowEntryId, ItemDetail, };

package/cjs/data/table/helpers/collectTableRowEntries.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.collectTableRowEntries = collectTableRowEntries;
+function collectTableRowEntries({ items, getRowId, getSubRows, isSubRowExpandable, }) {
+    const itemDetailsMap = new Map();
+    const childRowIdsById = new Map();
+    const traverseRow = (rowData, rowIndex, level, parent, parentId) => {
+        var _a, _b, _c;
+        const rowId = (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(rowData, rowIndex)) !== null && _a !== void 0 ? _a : (parentId == null ? rowIndex : `${parentId}-${rowIndex}`);
+        const isRowExpandable = (_b = isSubRowExpandable === null || isSubRowExpandable === void 0 ? void 0 : isSubRowExpandable(rowData)) !== null && _b !== void 0 ? _b : true;
+        const children = (_c = (isRowExpandable ? getSubRows === null || getSubRows === void 0 ? void 0 : getSubRows(rowData) : [])) !== null && _c !== void 0 ? _c : [];
+        itemDetailsMap.set(rowData, {
+            id: rowId,
+            level,
+            parent,
+            children,
+        });
+        const childRowIds = [];
+        for (let childIndex = 0; childIndex < children.length; childIndex++) {
+            const childRow = children[childIndex];
+            const childRowId = traverseRow(childRow, childIndex, level + 1, rowData, rowId);
+            childRowIds.push(childRowId);
+        }
+        childRowIdsById.set(rowId, childRowIds);
+        return rowId;
+    };
+    for (let rowIndex = 0; rowIndex < items.length; rowIndex++) {
+        traverseRow(items[rowIndex], rowIndex, 0, null);
+    }
+    return {
+        itemDetails: itemDetailsMap,
+        childRowIdsById,
+    };
+}
+//# sourceMappingURL=collectTableRowEntries.js.map

package/cjs/data/table/helpers/collectTableRowEntries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collectTableRowEntries.js","sourceRoot":"","sources":["../../../../src/data/table/helpers/collectTableRowEntries.ts"],"names":[],"mappings":";;AAmFS,wDAAsB;AA1D/B,SAAS,sBAAsB,CAAI,EACjC,KAAK,EACL,QAAQ,EACR,UAAU,EACV,kBAAkB,GACY;IAC9B,MAAM,cAAc,GAAG,IAAI,GAAG,EAAoB,CAAC;IACnD,MAAM,eAAe,GAAG,IAAI,GAAG,EAAsC,CAAC;IAEtE,MAAM,WAAW,GAAG,CAClB,OAAU,EACV,QAAgB,EAChB,KAAa,EACb,MAAgB,EAChB,QAA0B,EACT,EAAE;;QACnB,MAAM,KAAK,GACT,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,OAAO,EAAE,QAAQ,CAAC,mCAC7B,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,QAAQ,EAAE,CAAC,CAAC;QAC5D,MAAM,eAAe,GAAG,MAAA,kBAAkB,aAAlB,kBAAkB,uBAAlB,kBAAkB,CAAG,OAAO,CAAC,mCAAI,IAAI,CAAC;QAC9D,MAAM,QAAQ,GAAG,MAAA,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAG,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,mCAAI,EAAE,CAAC;QAEtE,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE;YAC1B,EAAE,EAAE,KAAK;YACT,KAAK;YACL,MAAM;YACN,QAAQ;SACT,CAAC,CAAC;QAEH,MAAM,WAAW,GAAsB,EAAE,CAAC;QAE1C,KAAK,IAAI,UAAU,GAAG,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC;YACpE,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;YACtC,MAAM,UAAU,GAAG,WAAW,CAC5B,QAAQ,EACR,UAAU,EACV,KAAK,GAAG,CAAC,EACT,OAAO,EACP,KAAK,CACN,CAAC;YACF,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC/B,CAAC;QAED,eAAe,CAAC,GAAG,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;QAExC,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,KAAK,IAAI,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC;QAC3D,WAAW,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;IAClD,CAAC;IAED,OAAO;QACL,WAAW,EAAE,cAAc;QAC3B,eAAe;KAChB,CAAC;AACJ,CAAC"}

package/cjs/data/table/helpers/selection/SelectionSubtreeHelper.d.ts

@@ -0,0 +1,46 @@
+type SelectionKey = string | number;
+type SelectionStats = {
+    selectableCount: number;
+    selectedCount: number;
+};
+type SelectionSubtreeHelperArgs = {
+    childRowIdsById?: Map<SelectionKey, SelectionKey[]>;
+    disabledKeysSet: Set<SelectionKey>;
+    selectedKeysSet: Set<SelectionKey>;
+};
+/**
+ * Helper class for managing selection state in a tree structure.
+ * - It provides methods to get selectable keys in a subtree
+ * - Compute selection statistics for a subtree
+ * - Determine if a subtree is fully selected.
+ *
+ * Results of selection statistics are cached to optimize performance for repeated calls on the same subtree.
+ */
+declare class SelectionSubtreeHelper {
+    private childRowIdsById;
+    private disabledKeysSet;
+    private selectedKeysSet;
+    private selectionStatsCache;
+    constructor({ childRowIdsById, disabledKeysSet, selectedKeysSet, }: SelectionSubtreeHelperArgs);
+    getSelectableKeys(rootIds: SelectionKey[]): SelectionKey[];
+    /**
+     * Returns the number of selectable and selected rows in the subtree of the given root ID.
+     * Results are cached after the first computation to optimize repeated calls for the same root ID.
+     *
+     * The selectable count excludes disabled rows, and the selected count excludes disabled rows that are selected.
+     * The method is implemented iteratively to handle deep trees without hitting call stack limits.
+     *
+     * How it works:
+     * - Manually add root ID to stack to get processing going. Note that the ready-flag is `false`.
+     * - Pop stack until empty. For each entry:
+     * - - If entry is already cached, skip it.
+     * - - If entry is not ready, push it back as ready and push all its children as not ready.
+     * - - If entry is ready, compute its stats based on its own state and the stats of its children, then cache the result.
+     * - Since we add all the children to the stack after pushing element with ready: true, while "popping" the stack we will always encounter the children before their parent is ready, ensuring that the stats for all children are computed and cached before computing the stats for their parent.
+     * - Finally, return the cached stats for the root ID.
+     */
+    getSelectionStats(rootId: SelectionKey): SelectionStats;
+    isFullySelected(rootId: SelectionKey): boolean;
+}
+export { SelectionSubtreeHelper };
+export type { SelectionKey, SelectionStats, SelectionSubtreeHelperArgs };