@navikt/ds-react 8.10.2 → 8.10.3

package/src/data/table/helpers/selection/getMultipleSelectProps.ts

@@ -1,11 +1,13 @@
 import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
+import { SelectionSubtreeHelper } from "./SelectionSubtreeHelper";
 
 type GetMultipleSelectPropsArgs = {
   selectedKeysSet: Set<string | number>;
   selectedKeys: (string | number)[];
   setSelectedKeys: (keys: (string | number)[]) => void;
   disabledKeysSet: Set<string | number>;
-  allRowKeys: (string | number)[];
+  visibleRowIds: (string | number)[];
+  childRowIdsById?: Map<string | number, (string | number)[]>;
 };
 
 function getMultipleSelectProps({
@@ -13,34 +15,56 @@ function getMultipleSelectProps({
   selectedKeys,
   setSelectedKeys,
   disabledKeysSet,
-  allRowKeys,
+  visibleRowIds,
+  childRowIdsById,
 }: GetMultipleSelectPropsArgs) {
-  const allRowKeysSet = new Set(allRowKeys);
-  const selectableKeys = allRowKeys.filter((k) => !disabledKeysSet.has(k));
+  const subtreeHelper = new SelectionSubtreeHelper({
+    childRowIdsById,
+    disabledKeysSet,
+    selectedKeysSet,
+  });
 
-  const selectedSelectableCount = selectableKeys.filter((k) =>
+  // Header selection traverses the visible roots and skips already visited
+  // descendants, so expanded trees stay linear in the number of rows.
+  const headerSelectableKeys = subtreeHelper.getSelectableKeys(visibleRowIds);
+  const headerSelectableKeysSet = new Set(headerSelectableKeys);
+
+  const selectedSelectableCount = headerSelectableKeys.filter((k) =>
     selectedKeysSet.has(k),
   ).length;
 
   const allSelectableSelected =
-    selectableKeys.length > 0 &&
-    selectedSelectableCount === selectableKeys.length;
+    headerSelectableKeys.length > 0 &&
+    selectedSelectableCount === headerSelectableKeys.length;
 
   const indeterminate =
     selectedSelectableCount > 0 &&
-    selectedSelectableCount < selectableKeys.length;
+    selectedSelectableCount < headerSelectableKeys.length;
 
   const selectedKeysNotInView = selectedKeys.filter(
-    (k) => !allRowKeysSet.has(k),
+    (k) => !headerSelectableKeysSet.has(k),
   );
   const disabledSelected = selectedKeys.filter((k) => disabledKeysSet.has(k));
-  const preservedKeys = [...selectedKeysNotInView, ...disabledSelected];
+  const preservedKeys = [
+    ...new Set([...selectedKeysNotInView, ...disabledSelected]),
+  ];
+
+  const isGroupFullySelected = (key: string | number) => {
+    const groupStats = subtreeHelper.getSelectionStats(key);
+
+    return (
+      groupStats.selectableCount > 0 &&
+      groupStats.selectedCount === groupStats.selectableCount
+    );
+  };
 
   const handleToggleAll = () => {
     if (allSelectableSelected) {
       setSelectedKeys(preservedKeys);
     } else {
-      setSelectedKeys([...new Set([...preservedKeys, ...selectableKeys])]);
+      setSelectedKeys([
+        ...new Set([...preservedKeys, ...headerSelectableKeys]),
+      ]);
     }
   };
 
@@ -48,10 +72,16 @@ function getMultipleSelectProps({
     if (disabledKeysSet.has(key)) {
       return;
     }
-    if (selectedKeysSet.has(key)) {
-      setSelectedKeys(selectedKeys.filter((k) => k !== key));
+
+    const groupKeys = subtreeHelper.getSelectableKeys([key]);
+
+    if (isGroupFullySelected(key)) {
+      const groupKeysSet = new Set(groupKeys);
+      setSelectedKeys(
+        selectedKeys.filter((selectedKey) => !groupKeysSet.has(selectedKey)),
+      );
     } else {
-      setSelectedKeys([...selectedKeys, key]);
+      setSelectedKeys([...new Set([...selectedKeys, ...groupKeys])]);
     }
   };
 
@@ -60,13 +90,20 @@ function getMultipleSelectProps({
       onChange: handleToggleAll,
       checked: allSelectableSelected,
       indeterminate,
-      disabled: selectableKeys.length === 0,
-    }),
-    getRowCheckboxProps: (key: string | number): CheckboxInputProps => ({
-      onChange: () => handleToggleRow(key),
-      checked: selectedKeysSet.has(key),
-      disabled: disabledKeysSet.has(key),
+      disabled: headerSelectableKeys.length === 0,
     }),
+    getRowCheckboxProps: (key: string | number): CheckboxInputProps => {
+      const groupStats = subtreeHelper.getSelectionStats(key);
+
+      return {
+        onChange: () => handleToggleRow(key),
+        checked: isGroupFullySelected(key),
+        indeterminate:
+          groupStats.selectedCount > 0 &&
+          groupStats.selectedCount < groupStats.selectableCount,
+        disabled: disabledKeysSet.has(key),
+      };
+    },
     toggleSelection: handleToggleRow,
   };
 }

package/src/data/table/helpers/selection/selection.types.ts

@@ -10,6 +10,7 @@ type SelectionProps = {
    * When set to "single", only one row can be selected at a time (renders radio buttons).
    *
    * When set to "multiple", multiple rows can be selected (renders checkboxes).
+   * Nested rows use cascading selection, so selecting a parent toggles its descendants too.
    *
    * @default "none"
    */

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

@@ -16,8 +16,7 @@ type NavigationAction =
 
 /**
  * Maps keyboard events to navigation actions.
- * Supports arrow keys, Home/End (row navigation), Ctrl/Cmd+Home/End (table navigation),
- * and PageUp/PageDown (multi-row navigation).
+ * Supports arrow keys, Home/End (row navigation), Ctrl/Cmd+Home/End (table navigation).
  */
 function getNavigationAction(event: KeyboardEvent): NavigationAction | null {
   const key = event.key;

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

@@ -86,6 +86,20 @@ describe("useTableItems", () => {
     expect(getVisibleIds(result.current.items)).toEqual(["a", "a1", "a2", "b"]);
   });
 
+  test("collects direct child row ids even when nested rows are collapsed", () => {
+    const { result } = renderHook(() =>
+      useTableItems({
+        items: nestedRows,
+        getRowId: (row) => row.id,
+        getSubRows,
+      }),
+    );
+
+    expect(result.current.childRowIdsById.get("a")).toEqual(["a1", "a2"]);
+    expect(result.current.childRowIdsById.get("a2")).toEqual(["a2a"]);
+    expect(result.current.childRowIdsById.get("b")).toEqual(["b1"]);
+  });
+
   test("uses the same fallback root id to reveal child rows when getRowId is omitted", () => {
     const { result } = renderHook(() =>
       useTableItems({

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

@@ -17,7 +17,13 @@ const items: Item[] = [
   { id: "c", name: "Charlie" },
 ];
 
-const allRowKeys = items.map((item) => item.id);
+const visibleRowIds = items.map((item) => item.id);
+const childRowIdsById = new Map<string | number, (string | number)[]>([
+  ["a", ["a1", "a2"]],
+  ["a1", []],
+  ["a2", ["a2a"]],
+  ["a2a", []],
+]);
 
 function asSingle(result: {
   current: UseTableSelectionReturn;
@@ -37,7 +43,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "none",
-          allRowKeys,
+          visibleRowIds,
         }),
       );
 
@@ -51,7 +57,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "single",
-          allRowKeys,
+          visibleRowIds,
         }),
       );
 
@@ -64,7 +70,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "single",
-          allRowKeys,
+          visibleRowIds,
           onSelectionChange: onChange,
         }),
       );
@@ -83,7 +89,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "single",
-          allRowKeys,
+          visibleRowIds,
           defaultSelectedKeys: ["a"],
         }),
       );
@@ -101,7 +107,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "single",
-          allRowKeys,
+          visibleRowIds,
           defaultSelectedKeys: ["a"],
         }),
       );
@@ -119,7 +125,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "single",
-          allRowKeys,
+          visibleRowIds,
           disabledSelectionKeys: ["b"],
         }),
       );
@@ -133,7 +139,7 @@ describe("useTableSelection", () => {
         ({ selectedKeys }) =>
           useTableSelection({
             selectionMode: "single",
-            allRowKeys,
+            visibleRowIds,
             selectedKeys,
           }),
         { initialProps: { selectedKeys: ["a"] as (string | number)[] } },
@@ -151,7 +157,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          allRowKeys,
+          visibleRowIds,
         }),
       );
 
@@ -164,7 +170,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          allRowKeys,
+          visibleRowIds,
         }),
       );
 
@@ -189,7 +195,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          allRowKeys,
+          visibleRowIds,
           defaultSelectedKeys: ["a", "b"],
         }),
       );
@@ -207,7 +213,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          allRowKeys,
+          visibleRowIds,
         }),
       );
 
@@ -220,11 +226,29 @@ describe("useTableSelection", () => {
       expect(asMultiple(result).selectedKeys).toEqual(["a", "b", "c"]);
     });
 
+    test("select all via thead includes hidden descendants for visible parents", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          visibleRowIds: ["a"],
+          childRowIdsById,
+        }),
+      );
+
+      act(() => {
+        asMultiple(result)
+          .getTheadCheckboxProps()
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual(["a", "a1", "a2", "a2a"]);
+    });
+
     test("deselect all when all are selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          allRowKeys,
+          visibleRowIds,
           defaultSelectedKeys: ["a", "b", "c"],
         }),
       );
@@ -238,11 +262,30 @@ describe("useTableSelection", () => {
       expect(asMultiple(result).selectedKeys).toEqual([]);
     });
 
+    test("deselect all clears hidden descendants for visible parents but preserves unrelated keys", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          visibleRowIds: ["a"],
+          childRowIdsById,
+          defaultSelectedKeys: ["a", "a1", "a2", "a2a", "external"],
+        }),
+      );
+
+      act(() => {
+        asMultiple(result)
+          .getTheadCheckboxProps()
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual(["external"]);
+    });
+
     test("select all skips disabled keys", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          allRowKeys,
+          visibleRowIds,
           disabledSelectionKeys: ["b"],
         }),
       );
@@ -260,7 +303,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          allRowKeys,
+          visibleRowIds,
           defaultSelectedKeys: ["a", "b", "c"],
           disabledSelectionKeys: ["b"],
         }),
@@ -279,7 +322,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          allRowKeys,
+          visibleRowIds,
           defaultSelectedKeys: ["a"],
         }),
       );
@@ -293,7 +336,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          allRowKeys,
+          visibleRowIds,
           defaultSelectedKeys: ["a", "b", "c"],
         }),
       );
@@ -307,7 +350,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          allRowKeys,
+          visibleRowIds,
           defaultSelectedKeys: ["a", "c"],
           disabledSelectionKeys: ["b"],
         }),
@@ -322,7 +365,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          allRowKeys,
+          visibleRowIds,
           defaultSelectedKeys: ["a", "b", "c"],
         }),
       );
@@ -340,7 +383,7 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          allRowKeys,
+          visibleRowIds,
           disabledSelectionKeys: ["b"],
         }),
       );
@@ -353,12 +396,80 @@ describe("useTableSelection", () => {
       const { result } = renderHook(() =>
         useTableSelection({
           selectionMode: "multiple",
-          allRowKeys,
+          visibleRowIds,
           disabledSelectionKeys: ["a", "b", "c"],
         }),
       );
 
       expect(asMultiple(result).getTheadCheckboxProps().disabled).toBe(true);
     });
+
+    test("parent rows show indeterminate when visible descendants are partially selected", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          visibleRowIds: ["a", "a1", "a2"],
+          childRowIdsById,
+          defaultSelectedKeys: ["a1"],
+        }),
+      );
+
+      const parentProps = asMultiple(result).getRowCheckboxProps("a");
+
+      expect(parentProps.checked).toBe(false);
+      expect(parentProps.indeterminate).toBe(true);
+    });
+
+    test("toggling a parent row selects and deselects its descendants", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          visibleRowIds: ["a", "a1", "a2"],
+          childRowIdsById,
+        }),
+      );
+
+      act(() => {
+        asMultiple(result)
+          .getRowCheckboxProps("a")
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual(["a", "a1", "a2", "a2a"]);
+
+      act(() => {
+        asMultiple(result)
+          .getRowCheckboxProps("a")
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual([]);
+    });
+
+    test("toggling a collapsed parent selects and deselects hidden descendants", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          visibleRowIds: ["a"],
+          childRowIdsById,
+        }),
+      );
+
+      act(() => {
+        asMultiple(result)
+          .getRowCheckboxProps("a")
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual(["a", "a1", "a2", "a2a"]);
+
+      act(() => {
+        asMultiple(result)
+          .getRowCheckboxProps("a")
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual([]);
+    });
   });
 });

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

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { createStrictContext } from "../../../utils/helpers";
 import { useControllableState } from "../../../utils/hooks";
-import type { ItemDetail } from "./useTableItems";
+import { useTableItemsContext } from "./useTableItems";
 
 type DataTableExpansionContextT = {
   isExpanded: (id: string | number) => boolean;
@@ -28,7 +28,6 @@ type TableExpansionOptions<T> = {
   detailsPanelRowIds?: (string | number)[];
   defaultDetailsPanelRowIds?: (string | number)[];
   onDetailsPanelChange?: (ids: (string | number)[]) => void;
-  itemDetails: Map<T, ItemDetail<T>>;
   getDetailsPanelContent?: (row: T) => React.ReactNode;
   isDetailsPanelExpandable?: (rowData: T) => boolean;
   getDetailsPanelHeight?: (row: T) => number | "auto";
@@ -44,7 +43,6 @@ function DataTableExpansionProvider<T>({
   detailsPanelRowIds,
   defaultDetailsPanelRowIds = [],
   onDetailsPanelChange,
-  itemDetails,
   getDetailsPanelContent,
   isDetailsPanelExpandable,
   getDetailsPanelHeight,
@@ -56,6 +54,13 @@ function DataTableExpansionProvider<T>({
     onChange: onDetailsPanelChange,
   });
 
+  /* TODO: False is just fallback until auto and root is merged */
+  const tableItemsContext = useTableItemsContext(false);
+
+  const { itemDetails } = tableItemsContext ?? {
+    itemDetails: new Map(),
+  };
+
   const expandableIds = React.useMemo(() => {
     if (!getDetailsPanelContent) {
       return new Set<string | number>();

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

@@ -3,6 +3,7 @@ import { createStrictContext } from "../../../utils/helpers";
 import { useControllableState } from "../../../utils/hooks";
 import {
   type ItemDetail,
+  type TableRowEntryId,
   collectTableRowEntries,
 } from "../helpers/collectTableRowEntries";
 
@@ -32,6 +33,10 @@ type UseTableItemsArgs<T> = {
 type useTableItemsReturn<T> = {
   items: T[];
   itemDetails: Map<T, ItemDetail<T>>;
+  /** Row ids for the rows currently rendered in the table body. */
+  visibleRowIds: TableRowEntryId[];
+  /** Direct child ids for each row, used to traverse selection groups lazily. */
+  childRowIdsById: Map<TableRowEntryId, TableRowEntryId[]>;
   onExpandedSubRowIdsChange: (id: string | number) => void;
   isSubRowExpanded: (id: string | number) => boolean;
 };
@@ -59,38 +64,52 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
     [nestedSubRowsExpandedIds],
   );
 
-  const { itemDetails, visibleItems } = useMemo(() => {
-    const rowEntriesMap = collectTableRowEntries({
-      items,
-      getRowId,
-      getSubRows,
-      isSubRowExpandable,
-    });
+  const { itemDetails, visibleItems, visibleRowIds, childRowIdsById } =
+    useMemo(() => {
+      const { itemDetails: rowEntriesMap, childRowIdsById: _childRowIdsById } =
+        collectTableRowEntries({
+          items,
+          getRowId,
+          getSubRows,
+          isSubRowExpandable,
+        });
 
-    const localVisibleItems: T[] = [];
-    const addVisibleRows = (rowData: T) => {
-      localVisibleItems.push(rowData);
+      const localVisibleItems: T[] = [];
+      const localVisibleRowIds: TableRowEntryId[] = [];
 
-      const details = rowEntriesMap.get(rowData);
+      const addVisibleRows = (rowData: T): TableRowEntryId[] => {
+        const details = rowEntriesMap.get(rowData);
 
-      if (!details || !expandedIdsSet.has(details.id)) {
-        return;
-      }
+        if (!details) {
+          return [];
+        }
 
-      for (const childRow of details.children) {
-        addVisibleRows(childRow);
-      }
-    };
+        localVisibleItems.push(rowData);
+        localVisibleRowIds.push(details.id);
+
+        const visibleDescendantRowIds: TableRowEntryId[] = [];
 
-    for (const rowData of items) {
-      addVisibleRows(rowData);
-    }
+        if (expandedIdsSet.has(details.id)) {
+          for (const childRow of details.children) {
+            const childVisibleRowIds = addVisibleRows(childRow);
+            visibleDescendantRowIds.push(...childVisibleRowIds);
+          }
+        }
+
+        return [details.id, ...visibleDescendantRowIds];
+      };
+
+      for (const rowData of items) {
+        addVisibleRows(rowData);
+      }
 
-    return {
-      visibleItems: localVisibleItems,
-      itemDetails: rowEntriesMap,
-    };
-  }, [getSubRows, items, getRowId, isSubRowExpandable, expandedIdsSet]);
+      return {
+        visibleItems: localVisibleItems,
+        visibleRowIds: localVisibleRowIds,
+        childRowIdsById: _childRowIdsById,
+        itemDetails: rowEntriesMap,
+      };
+    }, [getSubRows, items, getRowId, isSubRowExpandable, expandedIdsSet]);
 
   const handleExpandedSubRowIdChange = useCallback(
     (id: string | number) => {
@@ -106,6 +125,8 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
   return {
     items: visibleItems,
     itemDetails,
+    visibleRowIds,
+    childRowIdsById,
     onExpandedSubRowIdsChange: handleExpandedSubRowIdChange,
     isSubRowExpanded: (id: string | number) => expandedIdsSet.has(id),
   };
@@ -113,7 +134,9 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
 
 const { Provider: TableItemsProvider, useContext: useTableItemsContext } =
   /* TODO: Can we type this better? */
-  createStrictContext<useTableItemsReturn<any>>({
+  createStrictContext<
+    Omit<useTableItemsReturn<any>, "visibleRowIds" | "childRowIdsById">
+  >({
     name: "TableItemsContext",
     errorMessage:
       "useTableItemsContext must be used within a TableItemsProvider",

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

@@ -10,8 +10,10 @@ import type {
 } from "../helpers/selection/selection.types";
 
 type UseTableSelectionArgs = SelectionProps & {
-  /* This is needed for multiple selection to know which keys to select when "select all" is used */
-  allRowKeys: (string | number)[];
+  /* Visible rows manage the header checkbox state and render selection cells. */
+  visibleRowIds: (string | number)[];
+  /* Direct child ids let selection walk nested rows lazily. */
+  childRowIdsById?: Map<string | number, (string | number)[]>;
 };
 
 type UseTableSelectionReturn = {
@@ -25,7 +27,8 @@ function useTableSelection({
   selectedKeys: selectedKeysProp,
   onSelectionChange,
   disabledSelectionKeys = [],
-  allRowKeys,
+  visibleRowIds = [],
+  childRowIdsById,
 }: UseTableSelectionArgs): UseTableSelectionReturn {
   const radioGroupName = useId();
 
@@ -72,7 +75,7 @@ function useTableSelection({
           name: radioGroupName,
         }),
       },
-      renderSelection: allRowKeys.length !== 0,
+      renderSelection: visibleRowIds.length !== 0,
     };
   }
 
@@ -85,10 +88,11 @@ function useTableSelection({
         selectedKeys,
         setSelectedKeys,
         disabledKeysSet,
-        allRowKeys,
+        visibleRowIds,
+        childRowIdsById,
       }),
     },
-    renderSelection: allRowKeys.length !== 0,
+    renderSelection: visibleRowIds.length !== 0,
   };
 }