@navikt/ds-react 8.10.2 → 8.10.4

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

@@ -17,11 +17,10 @@ import { type ResizeProps, useTableColumnResize } from "./useTableColumnResize";
 
 interface DataTableColumnHeaderProps
   extends ResizeProps, DataTableBaseCellProps {
-  resizeHandler?: (
-    event:
-      | React.MouseEvent<HTMLButtonElement>
-      | React.TouchEvent<HTMLButtonElement>,
-  ) => void;
+  /**
+   * Accessible name of the column.
+   */
+  label: string;
   /**
    * Makes the column header sortable. The entire header cell content becomes
    * a clickable button when true.
@@ -59,15 +58,18 @@ const DataTableColumnHeader = forwardRef<
     {
       className,
       children,
+      label,
       sortable = false,
       sortDirection = "none",
       onSortClick,
+      resizable = true,
       style,
       width,
+      defaultWidth,
+      autoWidth,
       minWidth,
       maxWidth,
       onWidthChange,
-      defaultWidth,
       colSpan,
       rowSpan,
       UNSAFE_isSelection,
@@ -80,9 +82,11 @@ const DataTableColumnHeader = forwardRef<
     const mergedRef = useMergeRefs(forwardedRef, thRef);
 
     const resizeResult = useTableColumnResize({
+      resizable,
       thRef,
       width,
       defaultWidth,
+      autoWidth,
       minWidth,
       maxWidth,
       onWidthChange,
@@ -140,7 +144,7 @@ const DataTableColumnHeader = forwardRef<
             aria-label={
               resizeResult.isResizingWithKeyboard
                 ? "Bruk pil venstre/høyre"
-                : "Endre bredde"
+                : `Endre bredde ${label}`
             } // TODO Translate
             data-active={resizeResult.isResizingWithKeyboard}
             data-disable-keyboard-nav={resizeResult.isResizingWithKeyboard}

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

@@ -1,36 +1,64 @@
-import { type DOMAttributes, useCallback, useRef, useState } from "react";
+import {
+  type DOMAttributes,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { useControllableState } from "../../../utils/hooks";
 import { useDataTableContext } from "../root/DataTableRoot.context";
 
-type ColumnWidth = number | string;
-
 type ResizeProps = {
+  // If/when we add support for composition, consider mentioning that resizing only works on first row in thead.
   /**
-   * Controlled width of the column.
+   * Whether the column should be resizable by the user.
    *
-   * Should only be used to fully control column width state. Otherwise, use `defaultWidth` and let the component handle resizing.
+   * **NB:** This is always disabled when `layout="auto"` on the root component.
+   * @default true
+   */
+  resizable?: boolean;
+  /**
+   * 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 when resizing. Only used when `resizable` or `autoWidth` is enabled.
+   * @default 40
    */
-  width?: ColumnWidth;
+  minWidth?: number;
   /**
-   * Initial width of the column. Only used when `width` is not set.
+   * Maximum width of the column when resizing. Only used when `resizable` or `autoWidth` is enabled.
    */
-  defaultWidth?: ColumnWidth;
+  maxWidth?: number;
+  // TODO: Consider "allowing" %-width on last column, if we find a solution to the overflow issue (width becomes 0px).
   /**
-   * Minimum width of the column.
+   * Controlled width of the column. Does not respect `minWidth` and `maxWidth`.
    *
-   * Should be used in conjunction with `width` or `defaultWidth` to set limits when resizing.
+   * Should only be used to fully control column width state. Otherwise, use `defaultWidth` and let the component handle resizing.
+   *
+   * **NB:** Percentage as initial width does not work well with resizing.
    */
-  minWidth?: ColumnWidth;
+  width?: number | string;
   /**
-   * Maximum width of the column.
+   * Initial width of the column. Only used when `width` is not set and `resizable` is true.
+   * Does not respect `minWidth` and `maxWidth`.
    *
-   * Should be used in conjunction with `width` or `defaultWidth` to set limits when resizing.
+   * **NB:** Percentage as initial width does not work well with resizing.
+   * @default 140px
    */
-  maxWidth?: ColumnWidth;
+  defaultWidth?: number | string;
   /**
    * Called when the column width changes.
+   * @param width New width in pixels.
    */
-  onWidthChange?: (width: ColumnWidth) => void;
+  onWidthChange?: (width: number) => void;
   /**
    * Forwarded styles
    */
@@ -41,7 +69,12 @@ 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>;
 };
 
@@ -74,9 +107,11 @@ function useTableColumnResize(
   args: TableColumnResizeArgs,
 ): TableColumnResizeResult {
   const {
+    resizable,
     thRef,
     width: userWidth,
     defaultWidth,
+    autoWidth,
     onWidthChange,
     maxWidth = Infinity,
     minWidth = 40,
@@ -89,7 +124,7 @@ function useTableColumnResize(
   const [isResizingWithKeyboard, setIsResizingWithKeyboard] = useState(false);
   const ignoreNextOnClick = useRef(false);
 
-  const [width, _setWidth] = useControllableState({
+  const [width, setWidth] = useControllableState({
     value: userWidth,
     defaultValue: defaultWidth ?? (colSpan ?? 1) * 140,
     /**
@@ -100,14 +135,26 @@ function useTableColumnResize(
     onChange: onWidthChange,
   });
 
-  const setWidth = useCallback(
+  const setClampedWidth = useCallback(
     (newWidth: number) => {
-      const min = parseWidth(minWidth) ?? 0;
-      const max = parseWidth(maxWidth) ?? Infinity;
-      const clamped = Math.min(Math.max(newWidth, min), max);
-      _setWidth(clamped);
+      setWidth(Math.min(Math.max(newWidth, minWidth), maxWidth));
+    },
+    [minWidth, maxWidth, setWidth],
+  );
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want to run this on mount and when autoWidth changes
+  useEffect(
+    function autoResizeColumn() {
+      if (!autoWidth) {
+        return;
+      }
+
+      const newColumnWidth = getAutoColumnWidth(thRef);
+      if (newColumnWidth) {
+        setClampedWidth(newColumnWidth);
+      }
     },
-    [minWidth, maxWidth, _setWidth],
+    [autoWidth], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   const handleOnClick: DOMAttributes<HTMLButtonElement>["onClick"] =
@@ -135,19 +182,19 @@ function useTableColumnResize(
         if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
           event.preventDefault();
           const delta = event.key === "ArrowRight" ? 20 : -20;
-          setWidth(currentWidth + delta);
+          setClampedWidth(currentWidth + delta);
           return;
         }
         if (event.key === "Home") {
           event.preventDefault();
-          setWidth(0); // will fall back to minWidth
+          setClampedWidth(0); // will fall back to minWidth
           return;
         }
         if (event.key === "End") {
           event.preventDefault();
-          const autoWidth = getAutoColumnWidth(thRef);
-          if (autoWidth && autoWidth > currentWidth) {
-            setWidth(autoWidth);
+          const newWidth = getAutoColumnWidth(thRef);
+          if (newWidth && newWidth > currentWidth) {
+            setClampedWidth(newWidth);
           }
           return;
         }
@@ -155,7 +202,7 @@ function useTableColumnResize(
           setIsResizingWithKeyboard(false);
         }
       },
-      [isResizingWithKeyboard, setWidth, thRef],
+      [isResizingWithKeyboard, setClampedWidth, thRef],
     );
 
   const startResize = useCallback(
@@ -166,19 +213,16 @@ function useTableColumnResize(
         const currentWidth = thRef.current?.offsetWidth ?? 0;
         const newWidth = startWidth + (clientX - startX);
 
-        const min = parseWidth(minWidth) ?? 0;
-        const max = parseWidth(maxWidth) ?? Infinity;
-
-        if (newWidth > max) {
+        if (newWidth > maxWidth) {
           setWidth(newWidth < currentWidth ? newWidth : currentWidth);
           return;
         }
-        if (newWidth < min) {
+        if (newWidth < minWidth) {
           setWidth(newWidth > currentWidth ? newWidth : currentWidth);
           return;
         }
 
-        setWidth(newWidth);
+        setClampedWidth(newWidth);
       }
 
       function onMouseMove(e: MouseEvent) {
@@ -206,7 +250,7 @@ function useTableColumnResize(
       document.addEventListener("touchend", cleanup, { once: true });
       document.addEventListener("touchcancel", cleanup, { once: true });
     },
-    [maxWidth, minWidth, setWidth, thRef],
+    [maxWidth, minWidth, setWidth, setClampedWidth, thRef],
   );
 
   const handleMouseDown: DOMAttributes<HTMLButtonElement>["onMouseDown"] =
@@ -230,9 +274,9 @@ function useTableColumnResize(
     useCallback(() => {
       const newColumnWidth = getAutoColumnWidth(thRef);
       if (newColumnWidth) {
-        setWidth(newColumnWidth);
+        setClampedWidth(newColumnWidth);
       }
-    }, [setWidth, thRef]);
+    }, [setClampedWidth, thRef]);
 
   if (tableContext.layout !== "fixed") {
     return {
@@ -241,6 +285,16 @@ function useTableColumnResize(
     };
   }
 
+  if (!resizable) {
+    return {
+      style: {
+        ...style,
+        width,
+      },
+      enabled: false,
+    };
+  }
+
   return {
     style: {
       ...style,
@@ -259,20 +313,6 @@ function useTableColumnResize(
   };
 }
 
-function parseWidth(width: ColumnWidth | undefined): number | undefined {
-  if (width == null) {
-    return undefined;
-  }
-  if (typeof width === "number") {
-    return width;
-  }
-  if (typeof width === "string") {
-    const parsed = parseInt(width, 10);
-    return Number.isNaN(parsed) ? undefined : parsed;
-  }
-  return undefined;
-}
-
 function getAutoColumnWidth(
   thRef: React.RefObject<HTMLTableCellElement | null>,
 ) {
@@ -285,7 +325,9 @@ function getAutoColumnWidth(
   }
 
   // Find needed width for header cell
-  const contentWidth = thContent.scrollWidth;
+  const range = document.createRange();
+  range.selectNodeContents(thContent);
+  const contentWidth = range.getBoundingClientRect().width;
   const paddingElStyle = window.getComputedStyle(thPaddingEl);
   const thInlinePadding =
     parseInt(paddingElStyle.paddingLeft, 10) +
@@ -301,7 +343,6 @@ function getAutoColumnWidth(
   }
 
   // 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

package/src/data/table/details-panel-row/DataTableDetailsPanelRow.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import {
+  getDataTableDetailsPanelId,
+  useDataTableDetailsPanel,
+} from "../hooks/useTableDetailsPanel";
+import { useDataTableContext } from "../root/DataTableRoot.context";
+
+function DataTableDetailsPanelRow<T>({
+  rowId,
+  rowData,
+}: {
+  rowId: string | number;
+  rowData: T;
+}) {
+  const { tableId, fullWidthColSpan } = useDataTableContext();
+  const {
+    enableDetailsPanel,
+    isExpanded,
+    getDetailsPanelContent,
+    getDetailsPanelHeight,
+  } = useDataTableDetailsPanel();
+
+  if (!enableDetailsPanel) {
+    return null;
+  }
+
+  if (!isExpanded(rowId)) {
+    return null;
+  }
+
+  const content = getDetailsPanelContent?.(rowData);
+  const expansionId = getDataTableDetailsPanelId(tableId, rowId);
+
+  if (!content) {
+    return null;
+  }
+
+  const panelHeight = getDetailsPanelHeight?.(rowData);
+
+  const style: React.CSSProperties = panelHeight
+    ? { height: panelHeight, overflow: "auto" }
+    : { height: "auto" };
+
+  return (
+    <tr className="aksel-data-table__details-panel-row">
+      <td id={expansionId} colSpan={fullWidthColSpan}>
+        <div style={style}>{content}</div>
+      </td>
+    </tr>
+  );
+}
+
+export { DataTableDetailsPanelRow };

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

@@ -2,9 +2,9 @@ type TableRowEntryId = string | number;
 
 type CollectTableRowEntriesArgs<T> = {
   items: T[];
-  getRowId?: (rowData: T, index: number) => TableRowEntryId;
-  getSubRows?: (rowData: T) => T[];
-  isSubRowExpandable?: (rowData: T) => boolean;
+  getRowId: (rowData: T, index: number) => TableRowEntryId;
+  getRows?: (rowData: T) => T[];
+  isRowExpandable?: (rowData: T) => boolean;
 };
 
 interface ItemDetail<T> {
@@ -14,45 +14,69 @@ interface ItemDetail<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[]>;
+};
+
 function collectTableRowEntries<T>({
   items,
   getRowId,
-  getSubRows,
-  isSubRowExpandable,
-}: CollectTableRowEntriesArgs<T>): Map<T, ItemDetail<T>> {
+  getRows,
+  isRowExpandable,
+}: CollectTableRowEntriesArgs<T>): CollectTableRowEntriesReturn<T> {
   const itemDetailsMap = new Map<T, ItemDetail<T>>();
+  const childRowIdsById = new Map<TableRowEntryId, TableRowEntryId[]>();
 
-  const traverseRows = (
-    rows: T[],
+  const traverseRow = (
+    rowData: T,
+    rowIndex: number,
     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);
-      }
+  ): TableRowEntryId => {
+    const rowId = getRowId(rowData, rowIndex);
+
+    const children =
+      ((isRowExpandable?.(rowData) ?? true) ? getRows?.(rowData) : []) ?? [];
+
+    itemDetailsMap.set(rowData, {
+      id: rowId,
+      level,
+      parent,
+      children,
+    });
+
+    const childRowIds: TableRowEntryId[] = [];
+
+    for (let childIndex = 0; childIndex < children.length; childIndex++) {
+      const childRow = children[childIndex];
+      const childRowId = traverseRow(childRow, childIndex, level + 1, rowData);
+      childRowIds.push(childRowId);
     }
+
+    childRowIdsById.set(rowId, childRowIds);
+
+    return rowId;
   };
 
-  traverseRows(items, 0, null);
+  for (let rowIndex = 0; rowIndex < items.length; rowIndex++) {
+    traverseRow(items[rowIndex], rowIndex, 0, null);
+  }
 
-  return itemDetailsMap;
+  return {
+    itemDetails: itemDetailsMap,
+    childRowIdsById,
+  };
 }
 
 export { collectTableRowEntries };
-export type { CollectTableRowEntriesArgs, TableRowEntryId, ItemDetail };
+export type {
+  CollectTableRowEntriesArgs,
+  CollectTableRowEntriesReturn,
+  TableRowEntryId,
+  ItemDetail,
+};

package/src/data/table/helpers/selection/SelectionSubtreeHelper.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, test } from "vitest";
+import { SelectionSubtreeHelper } from "./SelectionSubtreeHelper";
+
+const childRowIdsById = new Map<string | number, (string | number)[]>([
+  ["a", ["a1", "a2"]],
+  ["a1", []],
+  ["a2", ["a2a"]],
+  ["a2a", []],
+  ["b", []],
+]);
+
+describe("SelectionSubtreeHelper", () => {
+  test("returns selectable subtree keys without duplicates", () => {
+    const helper = new SelectionSubtreeHelper({
+      childRowIdsById,
+      disabledKeysSet: new Set(["a2"]),
+      selectedKeysSet: new Set(),
+    });
+
+    expect(helper.getSelectableKeys(["a", "a1"])).toEqual(["a", "a1", "a2a"]);
+  });
+
+  test("returns cached subtree selection stats", () => {
+    const helper = new SelectionSubtreeHelper({
+      childRowIdsById,
+      disabledKeysSet: new Set(["a2"]),
+      selectedKeysSet: new Set(["a", "a1", "a2a"]),
+    });
+
+    const firstStats = helper.getSelectionStats("a");
+    const secondStats = helper.getSelectionStats("a");
+
+    expect(firstStats).toEqual({ selectableCount: 3, selectedCount: 3 });
+    expect(secondStats).toBe(firstStats);
+    expect(helper.isFullySelected("a")).toBe(true);
+  });
+
+  test("handles deep trees iteratively", () => {
+    const depth = 12000;
+    const deepChildRowIdsById = new Map<string | number, (string | number)[]>();
+    const selectedKeysSet = new Set<string | number>();
+
+    for (let index = 0; index < depth; index++) {
+      const key = `node-${index}`;
+      const childKey = `node-${index + 1}`;
+
+      deepChildRowIdsById.set(key, index === depth - 1 ? [] : [childKey]);
+
+      if (index % 2 === 0) {
+        selectedKeysSet.add(key);
+      }
+    }
+
+    const helper = new SelectionSubtreeHelper({
+      childRowIdsById: deepChildRowIdsById,
+      disabledKeysSet: new Set(),
+      selectedKeysSet,
+    });
+
+    expect(helper.getSelectableKeys(["node-0"])).toHaveLength(depth);
+    expect(helper.getSelectionStats("node-0")).toEqual({
+      selectableCount: depth,
+      selectedCount: Math.ceil(depth / 2),
+    });
+  });
+});