@navikt/ds-react 8.10.1 → 8.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.10.1",
+  "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.1",
-    "@navikt/ds-tokens": "^8.10.1",
+    "@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,
@@ -75,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,
@@ -104,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}
@@ -146,9 +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 };

package/src/data/table/helpers/collectTableRowEntries.ts

@@ -0,0 +1,58 @@
+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[];
+}
+
+function collectTableRowEntries<T>({
+  items,
+  getRowId,
+  getSubRows,
+  isSubRowExpandable,
+}: CollectTableRowEntriesArgs<T>): Map<T, ItemDetail<T>> {
+  const itemDetailsMap = new Map<T, ItemDetail<T>>();
+
+  const traverseRows = (
+    rows: T[],
+    level: number,
+    parent: T | null,
+    parentId?: TableRowEntryId,
+  ) => {
+    for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+      const rowData = rows[rowIndex];
+      const rowId =
+        getRowId?.(rowData, rowIndex) ??
+        (parentId == null ? rowIndex : `${parentId}-${rowIndex}`);
+      const isRowExpandable = isSubRowExpandable?.(rowData) ?? true;
+      const children = (isRowExpandable ? getSubRows?.(rowData) : []) ?? [];
+
+      itemDetailsMap.set(rowData, {
+        id: rowId,
+        level,
+        parent,
+        children,
+      });
+
+      if (children.length > 0) {
+        traverseRows(children, level + 1, rowData, rowId);
+      }
+    }
+  };
+
+  traverseRows(items, 0, null);
+
+  return itemDetailsMap;
+}
+
+export { collectTableRowEntries };
+export type { CollectTableRowEntriesArgs, TableRowEntryId, ItemDetail };

package/src/data/table/helpers/table-keyboard.ts

@@ -55,10 +55,6 @@ function getNavigationAction(event: KeyboardEvent): NavigationAction | null {
  */
 function shouldBlockNavigation(event: KeyboardEvent): boolean {
   const key = event.key;
-  if (!(key in keyToCoord)) {
-    return false;
-  }
-
   const el = event.target as HTMLElement | null;
   if (!el) {
     return false;

package/src/data/table/hooks/__tests__/useTableExpansion.test.tsx

@@ -0,0 +1,115 @@
+import { act, renderHook } from "@testing-library/react";
+import React from "react";
+import { describe, expect, test, vi } from "vitest";
+import {
+  DataTableExpansionProvider,
+  useDataTableExpansion,
+} from "../useTableExpansion";
+import { useTableItems } from "../useTableItems";
+
+type TestRow = {
+  id: number;
+  subRows?: TestRow[];
+};
+
+function createWrapper(
+  options: {
+    onDetailsPanelChange?: (ids: (string | number)[]) => void;
+    isDetailsPanelExpandable?: (row: TestRow) => boolean;
+  } = {},
+) {
+  const rows: TestRow[] = [{ id: 1, subRows: [{ id: 10 }] }, { id: 2 }];
+
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    const tableItems = useTableItems({
+      items: rows,
+      getRowId: (row) => row.id,
+      getSubRows: (row) => row.subRows ?? [],
+    });
+
+    return (
+      <DataTableExpansionProvider<TestRow>
+        itemDetails={tableItems.itemDetails}
+        getDetailsPanelContent={(row) => row.id}
+        isDetailsPanelExpandable={options.isDetailsPanelExpandable}
+        onDetailsPanelChange={options.onDetailsPanelChange}
+      >
+        {children}
+      </DataTableExpansionProvider>
+    );
+  };
+}
+
+describe("useTableExpansion", () => {
+  test("does not allow toggling rows that are not expandable", () => {
+    const onDetailsPanelChange = vi.fn();
+
+    const { result } = renderHook(() => useDataTableExpansion(), {
+      wrapper: createWrapper({
+        onDetailsPanelChange,
+        isDetailsPanelExpandable: (row) => row.id === 1,
+      }),
+    });
+
+    expect(result.current.isDetailsPanelExpandable(1)).toBe(true);
+    expect(result.current.isDetailsPanelExpandable(2)).toBe(false);
+    expect(result.current.isDetailsPanelExpandable(10)).toBe(false);
+
+    act(() => {
+      result.current.toggleExpansion(2);
+    });
+
+    expect(result.current.isExpanded(2)).toBe(false);
+    expect(onDetailsPanelChange).not.toHaveBeenCalled();
+
+    act(() => {
+      result.current.toggleExpansion(1);
+    });
+
+    expect(result.current.isExpanded(1)).toBe(true);
+    expect(onDetailsPanelChange).toHaveBeenCalledWith([1]);
+  });
+
+  test("expand all only expands expandable rows", () => {
+    const onDetailsPanelChange = vi.fn();
+
+    const { result } = renderHook(() => useDataTableExpansion(), {
+      wrapper: createWrapper({
+        onDetailsPanelChange,
+        isDetailsPanelExpandable: (row) => row.id === 1,
+      }),
+    });
+
+    act(() => {
+      result.current.toggleAll();
+    });
+
+    expect(result.current.isExpanded(1)).toBe(true);
+    expect(result.current.isExpanded(2)).toBe(false);
+    expect(result.current.isAllExpanded).toBe(true);
+    expect(onDetailsPanelChange).toHaveBeenCalledWith([1]);
+  });
+
+  test("expand all only targets top-level table items", () => {
+    const onDetailsPanelChange = vi.fn();
+
+    const { result } = renderHook(() => useDataTableExpansion(), {
+      wrapper: createWrapper({
+        onDetailsPanelChange,
+      }),
+    });
+
+    expect(result.current.isDetailsPanelExpandable(1)).toBe(true);
+    expect(result.current.isDetailsPanelExpandable(2)).toBe(true);
+    expect(result.current.isDetailsPanelExpandable(10)).toBe(false);
+
+    act(() => {
+      result.current.toggleAll();
+    });
+
+    expect(result.current.isExpanded(1)).toBe(true);
+    expect(result.current.isExpanded(2)).toBe(true);
+    expect(result.current.isExpanded(10)).toBe(false);
+    expect(onDetailsPanelChange).toHaveBeenCalledWith([1, 2]);
+  });
+});