@navikt/ds-react 8.10.0 → 8.10.2

package/esm/data/table/tr/DataTableTr.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef, useCallback } from "react";
+import React, { forwardRef } from "react";
 import { ChevronDownUpIcon, ChevronUpDownIcon, MinusIcon, PlusIcon, } from "@navikt/aksel-icons";
 import { Button } from "../../../button/index.js";
 import { CheckboxInput } from "../../../form/checkbox/checkbox-input/CheckboxInput.js";
@@ -20,7 +20,7 @@ import { useId } from "../../../utils-external/index.js";
 import { cl, composeEventHandlers } from "../../../utils/helpers/index.js";
 import { DataTableBaseCell } from "../base-cell/DataTableBaseCell.js";
 import { DataTableColumnHeader } from "../column-header/DataTableColumnHeader.js";
-import { useDataTableExpansion } from "../hooks/useTableExpansion.js";
+import { getDataTableExpansionId, useDataTableExpansion, } from "../hooks/useTableExpansion.js";
 import { useDataTableContext, useDataTableLocation, } from "../root/DataTableRoot.context.js";
 import { DataTableTd } from "../td/DataTableTd.js";
 const SELECTION_CELL_WIDTH = "50px";
@@ -32,31 +32,28 @@ const DataTableTr = forwardRef((_a, forwardedRef) => {
     const renderFillerCell = layout === "fixed" && children;
     const selected = (_b = selectionState.selection.isRowSelected(rowId !== null && rowId !== void 0 ? rowId : "")) !== null && _b !== void 0 ? _b : selectedProp;
     const isSticky = location === "thead" && stickyHeader;
-    const handleClick = useCallback((event) => {
-        var _a;
-        if (location !== "tbody" ||
-            rowId === undefined ||
-            isInteractiveTarget(event.target) ||
-            ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest("[data-prevent-row-click]"))) {
-            return;
+    const handleClick = location === "tbody" && rowId !== undefined
+        ? (event) => {
+            var _a;
+            if (rowId === undefined ||
+                isInteractiveTarget(event.target) ||
+                ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest("[data-prevent-row-click]"))) {
+                return;
+            }
+            const selection = window.getSelection();
+            if (selection && selection.toString().length > 0) {
+                return;
+            }
+            if (!disableRowSelectionOnClick &&
+                selectionState.selection.selectionMode !== "none") {
+                selectionState.selection.toggleSelection(rowId);
+            }
+            onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(rowId, event);
         }
-        const selection = window.getSelection();
-        if (selection && selection.toString().length > 0) {
-            return;
-        }
-        if (!disableRowSelectionOnClick &&
-            selectionState.selection.selectionMode !== "none") {
-            selectionState.selection.toggleSelection(rowId);
-        }
-        onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(rowId, event);
-    }, [
-        disableRowSelectionOnClick,
-        location,
-        onRowClick,
-        rowId,
-        selectionState.selection,
-    ]);
-    return (React.createElement("tr", Object.assign({}, rest, { onClick: composeEventHandlers(onClick, handleClick), ref: forwardedRef, className: cl("aksel-data-table__tr", className), "data-selected": selected, "data-sticky": isSticky || undefined }),
+        : undefined;
+    return (React.createElement("tr", Object.assign({}, rest, { 
+        // Avoid setting onClick if not needed, since this causes NVDA to announce the row as clickable.
+        onClick: (onClick || handleClick) && composeEventHandlers(onClick, handleClick), ref: forwardedRef, className: cl("aksel-data-table__tr", className), "data-selected": selected, "data-sticky": isSticky || undefined }),
         React.createElement(RowExpansionCell, { rowId: rowId }),
         React.createElement(RowSelectionCell, { rowId: rowId }),
         children,
@@ -65,12 +62,8 @@ const DataTableTr = forwardRef((_a, forwardedRef) => {
 function RowExpansionCell({ rowId }) {
     const { tableId, showLoadingSkeletons } = useDataTableContext();
     const { location } = useDataTableLocation();
-    const expansionContext = useDataTableExpansion(false);
-    if (!expansionContext) {
-        return null;
-    }
-    const { isExpanded, toggleExpansion, enableExpansion, isAllExpanded, toggleAll, showExpandAll, } = expansionContext;
-    if (!enableExpansion) {
+    const { isExpanded, isDetailsPanelExpandable, toggleExpansion, enableDetailsPanel, isAllExpanded, toggleAll, showExpandAll, } = useDataTableExpansion();
+    if (!enableDetailsPanel) {
         return null;
     }
     if (showLoadingSkeletons) {
@@ -91,14 +84,19 @@ function RowExpansionCell({ rowId }) {
         return null;
     }
     const isRowExpanded = isExpanded(rowId);
+    const canExpandRow = isDetailsPanelExpandable(rowId);
+    const expansionId = getDataTableExpansionId(tableId, rowId);
+    if (!canExpandRow) {
+        return React.createElement(DataTableTd, { UNSAFE_isSelection: true, preventRowClick: true });
+    }
     return (React.createElement(DataTableTd, { UNSAFE_isSelection: true, preventRowClick: true },
         React.createElement(Button, { variant: "tertiary", "data-color": "neutral", size: "xsmall", onClick: (e) => {
                 e.stopPropagation();
                 toggleExpansion(rowId);
-            }, "aria-expanded": isRowExpanded, "aria-controls": `${tableId}-expansion-${rowId}`, "aria-label": isRowExpanded ? "Skjul detaljer" : "Vis detaljer", icon: isRowExpanded ? React.createElement(MinusIcon, { "aria-hidden": true }) : React.createElement(PlusIcon, { "aria-hidden": true }) })));
+            }, "aria-expanded": isRowExpanded, "aria-controls": expansionId, "aria-label": isRowExpanded ? "Skjul detaljer" : "Vis detaljer", icon: isRowExpanded ? React.createElement(MinusIcon, { "aria-hidden": true }) : React.createElement(PlusIcon, { "aria-hidden": true }) })));
 }
 /**
- * TODO: How do these cells handle multiple thead rows, or col/rowspans?
+ * TODO: How do these cells handle multiple thead rows, or col/row-spans?
  * TODO: a11y for labels
  */
 function RowSelectionCell({ rowId }) {

package/esm/data/table/tr/DataTableTr.js.map

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

package/esm/modal/Modal.js

@@ -73,7 +73,7 @@ const polyfillClassName = "aksel-modal--polyfilled";
  */
 export const Modal = forwardRef((_a, ref) => {
     var _b, _c;
-    var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, placement, portal, className, "aria-labelledby": ariaLabelledby, style, onClick, onMouseDown } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "placement", "portal", "className", "aria-labelledby", "style", "onClick", "onMouseDown"]);
+    var { header, children, open, onBeforeClose, onCancel, closeOnBackdropClick, width, placement, portal, className, "aria-labelledby": ariaLabelledby, style, onClick, onMouseDown, size = "medium" } = _a, rest = __rest(_a, ["header", "children", "open", "onBeforeClose", "onCancel", "closeOnBackdropClick", "width", "placement", "portal", "className", "aria-labelledby", "style", "onClick", "onMouseDown", "size"]);
     const modalRef = useRef(null);
     const mergedRef = useMergeRefs(modalRef, ref);
     const ariaLabelId = useId();
@@ -121,10 +121,10 @@ export const Modal = forwardRef((_a, ref) => {
         referenceElement: modalRef.current,
     });
     const isWidthPreset = typeof width === "string" && ["small", "medium"].includes(width);
-    const mergedClassName = cl("aksel-modal", className, {
+    const mergedClassName = cl("aksel-modal", className, `aksel-modal--${size}`, {
         [polyfillClassName]: needPolyfill,
         "aksel-modal--autowidth": !width,
-        [`aksel-modal--${width}`]: isWidthPreset,
+        [`aksel-modal--width-${width}`]: isWidthPreset,
         "aksel-modal--top": placement === "top" && !needPolyfill,
     });
     const mergedStyle = Object.assign(Object.assign({}, style), (!isWidthPreset ? { width } : {}));

package/esm/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC7D,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,SAAS,MAAM,aAAa,CAAC;AACpC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAEL,eAAe,EACf,eAAe,EACf,cAAc,GACf,MAAM,cAAc,CAAC;AACtB,OAAO,cAAc,EAAE,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjE,MAAM,iBAAiB,GAAG,yBAAyB,CAAC;AAUpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EAiBa,EACb,GAAG,EACH,EAAE;;QAnBF,EACE,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,aAAa,EACb,QAAQ,EACR,oBAAoB,EACpB,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,EACT,iBAAiB,EAAE,cAAc,EACjC,KAAK,EACL,OAAO,EACP,WAAW,EACX,IAAI,GAAG,QAAQ,OAEJ,EADR,IAAI,cAhBT,8LAiBC,CADQ;IAIT,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,YAAY,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,WAAW,GAAG,MAAA,WAAW,EAAE,0CAAE,WAAW,CAAC;IAC/C,MAAM,UAAU,GAAG,qBAAqB,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC;IAEhE,MAAM,WAAW,GAAG,mBAAmB,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC,KAAK,SAAS,CAAC;IAEtD,MAAM,WAAW,GAAG,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAErD,IAAI,QAAQ,IAAI,CAAC,WAAW,EAAE,CAAC;QAC7B,OAAO,CAAC,KAAK,CAAC,6BAA6B,CAAC,CAAC;IAC/C,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,8EAA8E;QAC9E,4DAA4D;QAC5D,0EAA0E;QAC1E,IAAI,YAAY,IAAI,QAAQ,CAAC,OAAO,IAAI,UAAU,EAAE,CAAC;YACnD,cAAc,CAAC,cAAc,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAEhD,oGAAoG;YACpG,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QACpD,CAAC;QACD,wIAAwI;QACxI,2IAA2I;QAC3I,+EAA+E;QAC/E,iEAAiE;QACjE,IAAI,QAAQ,CAAC,OAAO,IAAI,UAAU;YAAE,QAAQ,CAAC,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC;IACxE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,SAAS,CAAC,GAAG,EAAE;QACb,iGAAiG;QACjG,wCAAwC;QACxC,sGAAsG;QACtG,IAAI,QAAQ,CAAC,OAAO,IAAI,UAAU,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACzD,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;gBACnC,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;YAC/B,CAAC;iBAAM,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;gBAC1C,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;IAEvB,aAAa,CAAC;QACZ,OAAO,EAAE,WAAW;QACpB,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,WAAW;QACjB,gBAAgB,EAAE,QAAQ,CAAC,OAAO;KACnC,CAAC,CAAC;IAEH,MAAM,aAAa,GACjB,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEnE,MAAM,eAAe,GAAG,EAAE,CACxB,aAAa,EACb,SAAS,EACT,gBAAgB,IAAI,EAAE,EACtB;QACE,CAAC,iBAAiB,CAAC,EAAE,YAAY;QACjC,wBAAwB,EAAE,CAAC,KAAK;QAChC,CAAC,sBAAsB,KAAK,EAAE,CAAC,EAAE,aAAa;QAC9C,kBAAkB,EAAE,SAAS,KAAK,KAAK,IAAI,CAAC,YAAY;KACzD,CACF,CAAC;IAEF,MAAM,WAAW,mCACZ,KAAK,GACL,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CACrC,CAAC;IAEF,MAAM,eAAe,GAAG,MAAM,CAAmB;QAC/C,OAAO,EAAE,CAAC;QACV,OAAO,EAAE,CAAC;KACX,CAAC,CAAC;IACH,MAAM,oBAAoB,GAA+C,CACvE,KAAK,EACL,EAAE;QACF,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;IAClC,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,oBAAoB,IAAI,CAAC,YAAY,CAAC;IAErE;;OAEG;IACH,MAAM,gBAAgB,GAAG,CACvB,QAA6C,EAC7C,EAAE;QACF,IAAI,QAAQ,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;YACzC,OAAO;QACT,CAAC;QAED,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QAE3D,IACE,eAAe,CAAC,eAAe,CAAC,OAAO,EAAE,SAAS,CAAC;YACnD,eAAe,CAAC,QAAQ,EAAE,SAAS,CAAC,EACpC,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,aAAa,KAAK,SAAS,IAAI,aAAa,EAAE,KAAK,KAAK,EAAE,CAAC;YAC7D,OAAO;QACT,CAAC;QAED,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEF;;OAEG;IACH,MAAM,iBAAiB,GAAG,CACxB,KAAqD,EACrD,EAAE;QACF,aAAa,IAAI,aAAa,EAAE,KAAK,KAAK,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;IACvE,CAAC,CAAC;IAEF,MAAM,oBAAoB,GACxB,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM;QAC9C,CAAC,CAAC,WAAW;QACb,CAAC,CAAC,cAAc,CAAC;IAErB,MAAM,SAAS,GAAG,CAEhB,gDACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EAC3D,OAAO,EACL,sBAAsB;YACpB,CAAC,CAAC,oBAAoB,CAAC,OAAO,EAAE,gBAAgB,CAAC;YACjD,CAAC,CAAC,OAAO,EAEb,WAAW,EACT,sBAAsB;YACpB,CAAC,CAAC,oBAAoB,CAAC,WAAW,EAAE,oBAAoB,CAAC;YACzD,CAAC,CAAC,WAAW,qBAEA,oBAAoB,EACrC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf;;eAEG;YACH,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,CAAC,CAAC,eAAe,EAAE,CAAC;YACtB,CAAC;QACH,CAAC;QAED,oBAAC,oBAAoB,IACnB,YAAY,EAAE,eAAe,CAAC,QAAQ,EAAE,MAAM,EAAE,aAAa,CAAC,EAC9D,QAAQ,EAAE,QAAQ;YAEjB,MAAM,IAAI,CACT,oBAAC,WAAW;gBACT,MAAM,CAAC,KAAK,IAAI,CACf,oBAAC,MAAM,IAAC,SAAS,EAAC,oBAAoB,IAAE,MAAM,CAAC,KAAK,CAAU,CAC/D;gBACD,oBAAC,OAAO,IACN,IAAI,EAAE,MAAA,MAAM,CAAC,IAAI,mCAAI,QAAQ,EAC7B,KAAK,EAAC,GAAG,EACT,EAAE,EAAE,WAAW;oBAEd,MAAM,CAAC,IAAI,IAAI,CACd,8BAAM,SAAS,EAAC,0BAA0B,IACvC,MAAM,CAAC,IAAI,CACP,CACR;oBACA,MAAM,CAAC,OAAO,CACP,CACE,CACf;YAEA,QAAQ,CACY,CAChB,CACV,CAAC;IAEF,IAAI,MAAM,EAAE,CAAC;QACX,IAAI,UAAU;YAAE,OAAO,YAAY,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;QAC3D,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC,CACgB,CAAC;AAEpB,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;AACvB,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAE3B,eAAe,KAAK,CAAC"}

package/esm/modal/types.d.ts

@@ -1,6 +1,7 @@
 interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
     /**
      * Affects internal padding
+     * @default "medium"
      */
     size?: "small" | "medium";
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.10.0",
+  "version": "8.10.2",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -706,8 +706,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.1.8",
-    "@navikt/aksel-icons": "^8.10.0",
-    "@navikt/ds-tokens": "^8.10.0",
+    "@navikt/aksel-icons": "^8.10.2",
+    "@navikt/ds-tokens": "^8.10.2",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.14.0"
   },
@@ -726,15 +726,15 @@
     "fast-glob": "3.3.3",
     "jscodeshift": "17.3.0",
     "jsdom": "27.1.0",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
     "react-router": "^7.13.1",
     "rimraf": "6.1.3",
-    "swr": "^2.3.6",
+    "swr": "^2.4.1",
     "tsc-alias": "1.8.16",
     "tsx": "^4.20.6",
     "typescript": "6.0.2",
-    "vitest": "4.1.0"
+    "vitest": "4.1.4"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30 || ^18 || ^19",

package/src/data/table/column-header/DataTableColumnHeader.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from "react";
+import React, { forwardRef, useRef } from "react";
 import {
   ArrowsUpDownIcon,
   CaretLeftCircleFillIcon,
@@ -49,7 +49,6 @@ const SORT_ICON: Record<SortDirection, React.ElementType | null> = {
 /**
  * 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 DataTableColumnHeader = forwardRef<
@@ -76,15 +75,12 @@ const DataTableColumnHeader = forwardRef<
     },
     forwardedRef,
   ) => {
-    const [isOverflowing, setIsOverflowing] = React.useState(false);
     const contentRef = React.useRef<HTMLDivElement>(null);
-    const [thRefState, setThRefState] = useState<HTMLTableCellElement | null>(
-      null,
-    );
-    const mergedRef = useMergeRefs(forwardedRef, setThRefState);
+    const thRef = useRef<HTMLTableCellElement>(null);
+    const mergedRef = useMergeRefs(forwardedRef, thRef);
 
     const resizeResult = useTableColumnResize({
-      ref: thRefState,
+      thRef,
       width,
       defaultWidth,
       minWidth,
@@ -105,12 +101,6 @@ const DataTableColumnHeader = forwardRef<
         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}
@@ -147,8 +137,26 @@ const DataTableColumnHeader = forwardRef<
           <button
             {...resizeResult.resizeHandlerProps}
             className="aksel-data-table__th-resize-handle"
+            aria-label={
+              resizeResult.isResizingWithKeyboard
+                ? "Bruk pil venstre/høyre"
+                : "Endre bredde"
+            } // TODO Translate
             data-active={resizeResult.isResizingWithKeyboard}
+            data-disable-keyboard-nav={resizeResult.isResizingWithKeyboard}
             data-block-keyboard-nav
+            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
+            } // Need either this or aria-valuemax to get SR (at least NVDA) to announce the value
           >
             {resizeResult.isResizingWithKeyboard && (
               <>

package/src/data/table/column-header/useTableColumnResize.ts

@@ -1,11 +1,10 @@
-import { type DOMAttributes, useCallback, useState } from "react";
+import { type DOMAttributes, useCallback, useRef, useState } from "react";
 import { useControllableState } from "../../../utils/hooks";
 import { useDataTableContext } from "../root/DataTableRoot.context";
 
 type ColumnWidth = number | string;
 
 type ResizeProps = {
-  ref: HTMLTableCellElement | null;
   /**
    * Controlled width of the column.
    *
@@ -42,17 +41,20 @@ type ResizeProps = {
   colSpan?: number;
 };
 
-type TableColumnResizeArgs = ResizeProps & {};
+type TableColumnResizeArgs = 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;
@@ -72,7 +74,7 @@ function useTableColumnResize(
   args: TableColumnResizeArgs,
 ): TableColumnResizeResult {
   const {
-    ref,
+    thRef,
     width: userWidth,
     defaultWidth,
     onWidthChange,
@@ -84,6 +86,9 @@ function useTableColumnResize(
 
   const tableContext = useDataTableContext();
 
+  const [isResizingWithKeyboard, setIsResizingWithKeyboard] = useState(false);
+  const ignoreNextOnClick = useRef(false);
+
   const [width, _setWidth] = useControllableState({
     value: userWidth,
     defaultValue: defaultWidth ?? (colSpan ?? 1) * 140,
@@ -95,69 +100,85 @@ function useTableColumnResize(
     onChange: onWidthChange,
   });
 
-  const [isResizingWithKeyboard, setIsResizingWithKeyboard] = useState(false);
-  const [, setIsResizingWithMouse] = useState(false);
-
   const setWidth = useCallback(
     (newWidth: number) => {
-      const currentWidth = ref?.offsetWidth;
-      if (!currentWidth) {
-        return;
-      }
-
       const min = parseWidth(minWidth) ?? 0;
       const max = parseWidth(maxWidth) ?? Infinity;
       const clamped = Math.min(Math.max(newWidth, min), max);
+      _setWidth(clamped);
+    },
+    [minWidth, maxWidth, _setWidth],
+  );
 
-      if (newWidth <= currentWidth && newWidth > max) {
-        _setWidth(newWidth);
-        return;
-      }
+  const handleOnClick: DOMAttributes<HTMLButtonElement>["onClick"] =
+    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 (newWidth >= currentWidth && newWidth > max) {
-        _setWidth(currentWidth);
+      if (ignoreNextOnClick.current) {
+        ignoreNextOnClick.current = false;
         return;
       }
 
-      _setWidth(clamped);
-    },
-    [minWidth, maxWidth, _setWidth, ref],
-  );
+      setIsResizingWithKeyboard((prev) => !prev);
+    }, []);
 
   const handleKeyDown: DOMAttributes<HTMLButtonElement>["onKeyDown"] =
     useCallback(
       (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          setIsResizingWithKeyboard((prev) => !prev);
-          return;
-        }
-
         if (!isResizingWithKeyboard) {
           return;
         }
+        const currentWidth = thRef.current?.offsetWidth ?? 0;
 
         if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
           event.preventDefault();
-
-          const th = (event.target as HTMLElement).closest(
-            "th",
-          ) as HTMLTableCellElement;
-          const startWidth = th.offsetWidth;
-
           const delta = event.key === "ArrowRight" ? 20 : -20;
-          setWidth(startWidth + delta);
+          setWidth(currentWidth + delta);
+          return;
+        }
+        if (event.key === "Home") {
+          event.preventDefault();
+          setWidth(0); // will fall back to minWidth
+          return;
+        }
+        if (event.key === "End") {
+          event.preventDefault();
+          const autoWidth = getAutoColumnWidth(thRef);
+          if (autoWidth && autoWidth > currentWidth) {
+            setWidth(autoWidth);
+          }
+          return;
+        }
+        if (event.key === "Escape") {
+          setIsResizingWithKeyboard(false);
         }
       },
-      [isResizingWithKeyboard, setWidth],
+      [isResizingWithKeyboard, setWidth, thRef],
     );
 
   const startResize = useCallback(
-    (th: HTMLTableCellElement, startX: number) => {
-      setIsResizingWithMouse(true);
-      const startWidth = th.offsetWidth;
+    (startX: number) => {
+      const startWidth = thRef.current?.offsetWidth ?? 0;
 
       function onPointerMove(clientX: number) {
-        setWidth(startWidth + (clientX - startX));
+        const currentWidth = thRef.current?.offsetWidth ?? 0;
+        const newWidth = startWidth + (clientX - startX);
+
+        const min = parseWidth(minWidth) ?? 0;
+        const max = parseWidth(maxWidth) ?? Infinity;
+
+        if (newWidth > max) {
+          setWidth(newWidth < currentWidth ? newWidth : currentWidth);
+          return;
+        }
+        if (newWidth < min) {
+          setWidth(newWidth > currentWidth ? newWidth : currentWidth);
+          return;
+        }
+
+        setWidth(newWidth);
       }
 
       function onMouseMove(e: MouseEvent) {
@@ -172,28 +193,26 @@ function useTableColumnResize(
       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);
+      document.addEventListener("mouseup", cleanup, { once: true });
+      document.addEventListener("touchend", cleanup, { once: true });
+      document.addEventListener("touchcancel", cleanup, { once: true });
     },
-    [setWidth],
+    [maxWidth, minWidth, setWidth, thRef],
   );
 
   const handleMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"] =
     useCallback(
       (event) => {
-        const th = (event.target as HTMLElement).closest(
-          "th",
-        ) as HTMLTableCellElement;
-        startResize(th, event.clientX);
+        startResize(event.clientX);
       },
       [startResize],
     );
@@ -201,38 +220,19 @@ function useTableColumnResize(
   const handleTouchStart: DOMAttributes<HTMLButtonElement>["onTouchStart"] =
     useCallback(
       (event) => {
-        const th = (event.target as HTMLElement).closest(
-          "th",
-        ) as HTMLTableCellElement;
-        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.
-   */
+  // Auto-size column to fit content on double click. NB: Doesn't work with block content!
   const handleDoubleClick: DOMAttributes<HTMLButtonElement>["onDoubleClick"] =
-    useCallback(
-      (event) => {
-        const th = (event.target as HTMLElement).closest(
-          "th",
-        ) as HTMLTableCellElement;
-
-        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],
-    );
+    useCallback(() => {
+      const newColumnWidth = getAutoColumnWidth(thRef);
+      if (newColumnWidth) {
+        setWidth(newColumnWidth);
+      }
+    }, [setWidth, thRef]);
 
   if (tableContext.layout !== "fixed") {
     return {
@@ -252,6 +252,7 @@ function useTableColumnResize(
       onKeyDown: handleKeyDown,
       onBlur: () => setIsResizingWithKeyboard(false),
       onDoubleClick: handleDoubleClick,
+      onClick: handleOnClick,
     },
     isResizingWithKeyboard,
     enabled: true,
@@ -272,5 +273,77 @@ function parseWidth(width: ColumnWidth | undefined): number | undefined {
   return undefined;
 }
 
+function getAutoColumnWidth(
+  thRef: React.RefObject<HTMLTableCellElement | null>,
+) {
+  const th = thRef.current!;
+  const thContent = th.querySelector(".aksel-data-table__th-content");
+  const thPaddingEl = th.querySelector("div");
+  const rows = th.closest("table")?.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 as HTMLTableCellElement).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 as HTMLTableCellElement;
+    let currentPosition = cell.colSpan;
+    while (columnPosition > currentPosition && cell.nextElementSibling) {
+      cell = cell.nextElementSibling as HTMLTableCellElement;
+      currentPosition += cell.colSpan;
+    }
+    skipRows = cell.rowSpan - 1;
+
+    // Find needed width
+    const cellContent = cell.firstChild as HTMLElement;
+    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?.offsetWidth || document.documentElement.clientWidth * 0.9) *
+    0.95;
+
+  return newColumnWidth > maxColWidth
+    ? Math.floor(maxColWidth)
+    : Math.ceil(newColumnWidth);
+}
+
 export { useTableColumnResize };
 export type { ResizeProps };