@navikt/ds-react 8.10.3 → 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,6 +58,7 @@ const DataTableColumnHeader = forwardRef<
     {
       className,
       children,
+      label,
       sortable = false,
       sortDirection = "none",
       onSortClick,
@@ -144,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

@@ -8,9 +8,8 @@ import {
 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.
   /**
    * Whether the column should be resizable by the user.
    *
@@ -18,16 +17,6 @@ type ResizeProps = {
    * @default true
    */
   resizable?: boolean;
-  /**
-   * Controlled width of the column.
-   *
-   * Should only be used to fully control column width state. Otherwise, use `defaultWidth` and let the component handle resizing.
-   */
-  width?: ColumnWidth;
-  /**
-   * 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.**
    *
@@ -40,21 +29,36 @@ type ResizeProps = {
    */
   autoWidth?: boolean;
   /**
-   * Minimum width of the column.
+   * Minimum width of the column when resizing. Only used when `resizable` or `autoWidth` is enabled.
+   * @default 40
+   */
+  minWidth?: number;
+  /**
+   * Maximum width of the column when resizing. Only used when `resizable` or `autoWidth` is enabled.
+   */
+  maxWidth?: number;
+  // TODO: Consider "allowing" %-width on last column, if we find a solution to the overflow issue (width becomes 0px).
+  /**
+   * 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
    */
@@ -133,10 +137,7 @@ function useTableColumnResize(
 
   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],
   );
@@ -212,14 +213,11 @@ 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;
         }
@@ -315,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>,
 ) {
@@ -341,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) +
@@ -357,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> {
@@ -26,8 +26,8 @@ type CollectTableRowEntriesReturn<T> = {
 function collectTableRowEntries<T>({
   items,
   getRowId,
-  getSubRows,
-  isSubRowExpandable,
+  getRows,
+  isRowExpandable,
 }: CollectTableRowEntriesArgs<T>): CollectTableRowEntriesReturn<T> {
   const itemDetailsMap = new Map<T, ItemDetail<T>>();
   const childRowIdsById = new Map<TableRowEntryId, TableRowEntryId[]>();
@@ -37,13 +37,11 @@ function collectTableRowEntries<T>({
     rowIndex: number,
     level: number,
     parent: T | null,
-    parentId?: TableRowEntryId,
   ): TableRowEntryId => {
-    const rowId =
-      getRowId?.(rowData, rowIndex) ??
-      (parentId == null ? rowIndex : `${parentId}-${rowIndex}`);
-    const isRowExpandable = isSubRowExpandable?.(rowData) ?? true;
-    const children = (isRowExpandable ? getSubRows?.(rowData) : []) ?? [];
+    const rowId = getRowId(rowData, rowIndex);
+
+    const children =
+      ((isRowExpandable?.(rowData) ?? true) ? getRows?.(rowData) : []) ?? [];
 
     itemDetailsMap.set(rowData, {
       id: rowId,
@@ -56,13 +54,7 @@ function collectTableRowEntries<T>({
 
     for (let childIndex = 0; childIndex < children.length; childIndex++) {
       const childRow = children[childIndex];
-      const childRowId = traverseRow(
-        childRow,
-        childIndex,
-        level + 1,
-        rowData,
-        rowId,
-      );
+      const childRowId = traverseRow(childRow, childIndex, level + 1, rowData);
       childRowIds.push(childRowId);
     }
 

package/src/data/table/hooks/__tests__/useTableItems.test.ts

@@ -78,8 +78,10 @@ describe("useTableItems", () => {
       useTableItems({
         items: nestedRows,
         getRowId: (row) => row.id,
-        getSubRows,
-        defaultExpandedSubRowIds: ["a"],
+        subRows: {
+          getRows: getSubRows,
+          defaultExpandedRowIds: ["a"],
+        },
       }),
     );
 
@@ -91,7 +93,7 @@ describe("useTableItems", () => {
       useTableItems({
         items: nestedRows,
         getRowId: (row) => row.id,
-        getSubRows,
+        subRows: { getRows: getSubRows },
       }),
     );
 
@@ -104,8 +106,11 @@ describe("useTableItems", () => {
     const { result } = renderHook(() =>
       useTableItems({
         items: fallbackRows,
-        getSubRows: (row) => row.subRows ?? [],
-        defaultExpandedSubRowIds: [0],
+        getRowId: (_, index) => index,
+        subRows: {
+          getRows: (row: any) => row.subRows ?? [],
+          defaultExpandedRowIds: [0],
+        },
       }),
     );
 
@@ -121,8 +126,10 @@ describe("useTableItems", () => {
         useTableItems({
           items: nestedRows,
           getRowId: (row) => row.id,
-          getSubRows,
-          expandedSubRowIds: expandedIds,
+          subRows: {
+            getRows: getSubRows,
+            expandedRowIds: expandedIds,
+          },
         }),
       {
         initialProps: { expandedIds: [] as (string | number)[] },

package/src/data/table/hooks/__tests__/useTableSelection.test.ts

@@ -42,7 +42,7 @@ describe("useTableSelection", () => {
     test("returns empty selectedKeys and no prop getters", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "none",
+          selection: { selectionMode: "none" },
           visibleRowIds,
         }),
       );
@@ -56,7 +56,7 @@ describe("useTableSelection", () => {
     test("returns getRowRadioProps", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "single",
+          selection: { selectionMode: "single" },
           visibleRowIds,
         }),
       );
@@ -69,9 +69,8 @@ describe("useTableSelection", () => {
       const onChange = vi.fn();
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "single",
+          selection: { selectionMode: "single", onSelectionChange: onChange },
           visibleRowIds,
-          onSelectionChange: onChange,
         }),
       );
 
@@ -88,9 +87,8 @@ describe("useTableSelection", () => {
     test("toggling the same row keeps it selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "single",
+          selection: { selectionMode: "single", defaultSelectedKeys: ["a"] },
           visibleRowIds,
-          defaultSelectedKeys: ["a"],
         }),
       );
 
@@ -106,9 +104,8 @@ describe("useTableSelection", () => {
     test("selecting a new row replaces the previous", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "single",
+          selection: { selectionMode: "single", defaultSelectedKeys: ["a"] },
           visibleRowIds,
-          defaultSelectedKeys: ["a"],
         }),
       );
 
@@ -124,9 +121,8 @@ describe("useTableSelection", () => {
     test("disabled rows have disabled prop", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "single",
+          selection: { selectionMode: "single", disabledSelectionKeys: ["b"] },
           visibleRowIds,
-          disabledSelectionKeys: ["b"],
         }),
       );
 
@@ -138,9 +134,8 @@ describe("useTableSelection", () => {
       const { result, rerender } = renderHook(
         ({ selectedKeys }) =>
           useTableSelection({
-            selectionMode: "single",
+            selection: { selectionMode: "single", selectedKeys },
             visibleRowIds,
-            selectedKeys,
           }),
         { initialProps: { selectedKeys: ["a"] as (string | number)[] } },
       );
@@ -156,7 +151,7 @@ describe("useTableSelection", () => {
     test("returns getTheadCheckboxProps and getRowCheckboxProps", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: { selectionMode: "multiple" },
           visibleRowIds,
         }),
       );
@@ -169,7 +164,7 @@ describe("useTableSelection", () => {
     test("selecting individual rows", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: { selectionMode: "multiple" },
           visibleRowIds,
         }),
       );
@@ -194,9 +189,11 @@ describe("useTableSelection", () => {
     test("deselecting a row", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "b"],
+          },
           visibleRowIds,
-          defaultSelectedKeys: ["a", "b"],
         }),
       );
 
@@ -212,7 +209,7 @@ describe("useTableSelection", () => {
     test("select all via thead checkbox", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: { selectionMode: "multiple" },
           visibleRowIds,
         }),
       );
@@ -229,7 +226,7 @@ describe("useTableSelection", () => {
     test("select all via thead includes hidden descendants for visible parents", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: { selectionMode: "multiple" },
           visibleRowIds: ["a"],
           childRowIdsById,
         }),
@@ -247,9 +244,11 @@ describe("useTableSelection", () => {
     test("deselect all when all are selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "b", "c"],
+          },
           visibleRowIds,
-          defaultSelectedKeys: ["a", "b", "c"],
         }),
       );
 
@@ -265,10 +264,12 @@ describe("useTableSelection", () => {
     test("deselect all clears hidden descendants for visible parents but preserves unrelated keys", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "a1", "a2", "a2a", "external"],
+          },
           visibleRowIds: ["a"],
           childRowIdsById,
-          defaultSelectedKeys: ["a", "a1", "a2", "a2a", "external"],
         }),
       );
 
@@ -284,9 +285,11 @@ describe("useTableSelection", () => {
     test("select all skips disabled keys", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: {
+            selectionMode: "multiple",
+            disabledSelectionKeys: ["b"],
+          },
           visibleRowIds,
-          disabledSelectionKeys: ["b"],
         }),
       );
 
@@ -302,10 +305,12 @@ describe("useTableSelection", () => {
     test("deselect all preserves disabled-but-selected rows", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "b", "c"],
+            disabledSelectionKeys: ["b"],
+          },
           visibleRowIds,
-          defaultSelectedKeys: ["a", "b", "c"],
-          disabledSelectionKeys: ["b"],
         }),
       );
 
@@ -321,9 +326,8 @@ describe("useTableSelection", () => {
     test("thead checkbox shows indeterminate when partially selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: { selectionMode: "multiple", defaultSelectedKeys: ["a"] },
           visibleRowIds,
-          defaultSelectedKeys: ["a"],
         }),
       );
 
@@ -335,9 +339,11 @@ describe("useTableSelection", () => {
     test("thead checkbox shows checked when all selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "b", "c"],
+          },
           visibleRowIds,
-          defaultSelectedKeys: ["a", "b", "c"],
         }),
       );
 
@@ -349,10 +355,12 @@ describe("useTableSelection", () => {
     test("thead checkbox shows checked when all selectable rows are selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "c"],
+            disabledSelectionKeys: ["b"],
+          },
           visibleRowIds,
-          defaultSelectedKeys: ["a", "c"],
-          disabledSelectionKeys: ["b"],
         }),
       );
 
@@ -364,9 +372,11 @@ describe("useTableSelection", () => {
     test("deselecting one row when all rows are selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "b", "c"],
+          },
           visibleRowIds,
-          defaultSelectedKeys: ["a", "b", "c"],
         }),
       );
 
@@ -382,9 +392,11 @@ describe("useTableSelection", () => {
     test("disabled rows have disabled prop", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: {
+            selectionMode: "multiple",
+            disabledSelectionKeys: ["b"],
+          },
           visibleRowIds,
-          disabledSelectionKeys: ["b"],
         }),
       );
 
@@ -395,9 +407,11 @@ describe("useTableSelection", () => {
     test("thead checkbox disabled when all rows disabled", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: {
+            selectionMode: "multiple",
+            disabledSelectionKeys: ["a", "b", "c"],
+          },
           visibleRowIds,
-          disabledSelectionKeys: ["a", "b", "c"],
         }),
       );
 
@@ -407,10 +421,9 @@ describe("useTableSelection", () => {
     test("parent rows show indeterminate when visible descendants are partially selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: { selectionMode: "multiple", defaultSelectedKeys: ["a1"] },
           visibleRowIds: ["a", "a1", "a2"],
           childRowIdsById,
-          defaultSelectedKeys: ["a1"],
         }),
       );
 
@@ -423,7 +436,7 @@ describe("useTableSelection", () => {
     test("toggling a parent row selects and deselects its descendants", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: { selectionMode: "multiple" },
           visibleRowIds: ["a", "a1", "a2"],
           childRowIdsById,
         }),
@@ -449,7 +462,7 @@ describe("useTableSelection", () => {
     test("toggling a collapsed parent selects and deselects hidden descendants", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
+          selection: { selectionMode: "multiple" },
           visibleRowIds: ["a"],
           childRowIdsById,
         }),

package/src/data/table/hooks/useColumnOptions.ts

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import type {
   ColumnDefinition,
   ColumnDefinitions,
@@ -28,19 +29,32 @@ function useColumnOptions<T>(
 
   const hasSelection = selectionMode !== "none";
 
-  return {
-    stickySelection: selectionMode !== "none" && stickyColumns?.first === "1",
-    columns: columnDefinitions.map((colDef, index) => {
+  const columns = useMemo(() => {
+    return columnDefinitions.map((colDef, index) => {
       const isFirstSticky =
         stickyColumns?.first === "1" && index === 0 && !hasSelection;
       const isLastSticky =
         stickyColumns?.last === "1" && index === columnDefinitions.length - 1;
 
       return {
-        isSticky: isFirstSticky ? "start" : isLastSticky ? "end" : false,
+        isSticky: isFirstSticky
+          ? ("start" as const)
+          : isLastSticky
+            ? ("end" as const)
+            : (false as const),
         colDef,
       };
-    }),
+    });
+  }, [
+    columnDefinitions,
+    hasSelection,
+    stickyColumns?.first,
+    stickyColumns?.last,
+  ]);
+
+  return {
+    stickySelection: selectionMode !== "none" && stickyColumns?.first === "1",
+    columns,
   };
 }