@navikt/ds-react 8.10.1 → 8.10.3

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,17 +1,18 @@
 import React, { useCallback } from "react";
 import { createStrictContext } from "../../../utils/helpers";
 import { useControllableState } from "../../../utils/hooks";
+import { useTableItemsContext } from "./useTableItems";
 
 type DataTableExpansionContextT = {
-  expandedIds: (string | number)[];
   isExpanded: (id: string | number) => boolean;
+  isDetailsPanelExpandable: (id: string | number) => boolean;
   toggleExpansion: (id: string | number) => void;
   toggleAll: () => void;
   isAllExpanded: boolean;
   getDetailsPanelContent?: (row: unknown) => React.ReactNode;
   getDetailsPanelHeight?: (row: unknown) => number | "auto";
-  showExpandAll?: boolean;
-  enableExpansion: boolean;
+  showExpandAll: boolean;
+  enableDetailsPanel: boolean;
 };
 
 const {
@@ -27,57 +28,98 @@ type TableExpansionOptions<T> = {
   detailsPanelRowIds?: (string | number)[];
   defaultDetailsPanelRowIds?: (string | number)[];
   onDetailsPanelChange?: (ids: (string | number)[]) => void;
-  allRowKeys: (string | number)[];
   getDetailsPanelContent?: (row: T) => React.ReactNode;
+  isDetailsPanelExpandable?: (rowData: T) => boolean;
   getDetailsPanelHeight?: (row: T) => number | "auto";
   showExpandAll?: boolean;
 };
 
+function getDataTableExpansionId(tableId: string, rowId: string | number) {
+  return `${tableId}-expansion-${rowId}`;
+}
+
 function DataTableExpansionProvider<T>({
   children,
   detailsPanelRowIds,
   defaultDetailsPanelRowIds = [],
   onDetailsPanelChange,
-  allRowKeys,
   getDetailsPanelContent,
+  isDetailsPanelExpandable,
   getDetailsPanelHeight,
   showExpandAll = false,
 }: TableExpansionOptions<T> & { children: React.ReactNode }) {
   const [expandedIds, setExpandedIds] = useControllableState({
     value: detailsPanelRowIds,
     defaultValue: defaultDetailsPanelRowIds,
+    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>();
+    }
+
+    const ids = new Set<string | number>();
+
+    for (const [rowData, { id, level }] of itemDetails.entries()) {
+      /* We only allow Master - Details pattern on top level rows */
+      if (level > 0) {
+        continue;
+      }
+
+      if (!isDetailsPanelExpandable || isDetailsPanelExpandable(rowData)) {
+        ids.add(id);
+      }
+    }
+
+    return ids;
+  }, [getDetailsPanelContent, isDetailsPanelExpandable, itemDetails]);
+
+  const isDetailsPanelExpandableById = useCallback(
+    (id: string | number) => expandableIds.has(id),
+    [expandableIds],
+  );
+
   const isExpanded = useCallback(
-    (id: string | number) => expandedIds.includes(id),
-    [expandedIds],
+    (id: string | number) =>
+      isDetailsPanelExpandableById(id) && expandedIds.includes(id),
+    [expandedIds, isDetailsPanelExpandableById],
   );
 
   const toggleExpansion = useCallback(
     (id: string | number) => {
-      const next = expandedIds.includes(id)
-        ? expandedIds.filter((eid) => eid !== id)
-        : [...expandedIds, id];
-      setExpandedIds(next);
-      onDetailsPanelChange?.(next);
+      if (!isDetailsPanelExpandableById(id)) {
+        return;
+      }
+
+      setExpandedIds((currentExpandedIds) =>
+        currentExpandedIds.includes(id)
+          ? currentExpandedIds.filter((expandedId) => expandedId !== id)
+          : [...currentExpandedIds, id],
+      );
     },
-    [expandedIds, setExpandedIds, onDetailsPanelChange],
+    [isDetailsPanelExpandableById, setExpandedIds],
   );
 
   const isAllExpanded =
-    allRowKeys.length > 0 &&
-    allRowKeys.every((key) => expandedIds.includes(key));
+    expandableIds.size > 0 &&
+    Array.from(expandableIds).every((key) => expandedIds.includes(key));
 
   const toggleAll = useCallback(() => {
-    const next = isAllExpanded ? [] : [...allRowKeys];
-    setExpandedIds(next);
-    onDetailsPanelChange?.(next);
-  }, [isAllExpanded, allRowKeys, setExpandedIds, onDetailsPanelChange]);
+    setExpandedIds(isAllExpanded ? [] : Array.from(expandableIds));
+  }, [expandableIds, isAllExpanded, setExpandedIds]);
 
   return (
     <DataTableExpansionContextProvider
-      expandedIds={expandedIds}
       isExpanded={isExpanded}
+      isDetailsPanelExpandable={isDetailsPanelExpandableById}
       toggleExpansion={toggleExpansion}
       toggleAll={toggleAll}
       isAllExpanded={isAllExpanded}
@@ -90,11 +132,15 @@ function DataTableExpansionProvider<T>({
         getDetailsPanelHeight as ((row: unknown) => number | "auto") | undefined
       }
       showExpandAll={showExpandAll}
-      enableExpansion={!!getDetailsPanelContent}
+      enableDetailsPanel={!!getDetailsPanelContent}
     >
       {children}
     </DataTableExpansionContextProvider>
   );
 }
 
-export { DataTableExpansionProvider, useDataTableExpansion };
+export {
+  DataTableExpansionProvider,
+  getDataTableExpansionId,
+  useDataTableExpansion,
+};

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

@@ -0,0 +1,146 @@
+import { useCallback, useMemo } from "react";
+import { createStrictContext } from "../../../utils/helpers";
+import { useControllableState } from "../../../utils/hooks";
+import {
+  type ItemDetail,
+  type TableRowEntryId,
+  collectTableRowEntries,
+} from "../helpers/collectTableRowEntries";
+
+type UseTableItemsArgs<T> = {
+  items: T[];
+  getRowId?: (rowData: T, index: number) => string | number;
+  /**
+   * Master - Detail pattern props
+   */
+  /* expandedDetailsPanelIds?: (string | number)[];
+  defaultExpandedDetailsPanelIds?: (string | number)[];
+  isDetailsPanelExpandable?: (rowData: T) => boolean;
+  onDetailsPanelChange?: (ids: (string | number)[]) => void;
+
+  getDetailsPanelHeight?: (row: T) => number | "auto";
+  getDetailsPanelContent?: (row: T) => React.ReactNode; */
+  /**
+   * Expanded/Nested rows pattern props
+   */
+  getSubRows?: (rowData: T) => T[];
+  expandedSubRowIds?: (string | number)[];
+  defaultExpandedSubRowIds?: (string | number)[];
+  isSubRowExpandable?: (rowData: T) => boolean;
+  onExpandedSubRowIdsChange?: (ids: (string | number)[]) => void;
+};
+
+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;
+};
+
+function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
+  const {
+    items,
+    expandedSubRowIds,
+    defaultExpandedSubRowIds,
+    getSubRows,
+    getRowId,
+    onExpandedSubRowIdsChange,
+    isSubRowExpandable,
+  } = args;
+
+  const [nestedSubRowsExpandedIds, setNestedSubRowsExpandedIds] =
+    useControllableState({
+      value: expandedSubRowIds,
+      defaultValue: defaultExpandedSubRowIds ?? [],
+      onChange: onExpandedSubRowIdsChange,
+    });
+
+  const expandedIdsSet = useMemo(
+    () => new Set(nestedSubRowsExpandedIds),
+    [nestedSubRowsExpandedIds],
+  );
+
+  const { itemDetails, visibleItems, visibleRowIds, childRowIdsById } =
+    useMemo(() => {
+      const { itemDetails: rowEntriesMap, childRowIdsById: _childRowIdsById } =
+        collectTableRowEntries({
+          items,
+          getRowId,
+          getSubRows,
+          isSubRowExpandable,
+        });
+
+      const localVisibleItems: T[] = [];
+      const localVisibleRowIds: TableRowEntryId[] = [];
+
+      const addVisibleRows = (rowData: T): TableRowEntryId[] => {
+        const details = rowEntriesMap.get(rowData);
+
+        if (!details) {
+          return [];
+        }
+
+        localVisibleItems.push(rowData);
+        localVisibleRowIds.push(details.id);
+
+        const visibleDescendantRowIds: TableRowEntryId[] = [];
+
+        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,
+        visibleRowIds: localVisibleRowIds,
+        childRowIdsById: _childRowIdsById,
+        itemDetails: rowEntriesMap,
+      };
+    }, [getSubRows, items, getRowId, isSubRowExpandable, expandedIdsSet]);
+
+  const handleExpandedSubRowIdChange = useCallback(
+    (id: string | number) => {
+      setNestedSubRowsExpandedIds((prev) =>
+        prev.includes(id)
+          ? prev.filter((expandedId) => expandedId !== id)
+          : [...prev, id],
+      );
+    },
+    [setNestedSubRowsExpandedIds],
+  );
+
+  return {
+    items: visibleItems,
+    itemDetails,
+    visibleRowIds,
+    childRowIdsById,
+    onExpandedSubRowIdsChange: handleExpandedSubRowIdChange,
+    isSubRowExpanded: (id: string | number) => expandedIdsSet.has(id),
+  };
+}
+
+const { Provider: TableItemsProvider, useContext: useTableItemsContext } =
+  /* TODO: Can we type this better? */
+  createStrictContext<
+    Omit<useTableItemsReturn<any>, "visibleRowIds" | "childRowIdsById">
+  >({
+    name: "TableItemsContext",
+    errorMessage:
+      "useTableItemsContext must be used within a TableItemsProvider",
+  });
+
+export { useTableItems, TableItemsProvider, useTableItemsContext };
+export type { ItemDetail };

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

@@ -114,12 +114,12 @@ function useTableKeyboardNav({
       return;
     }
 
-    if (shouldBlockNavigation(event)) {
+    const action = getNavigationAction(event);
+    if (!action) {
       return;
     }
 
-    const action = getNavigationAction(event);
-    if (!action) {
+    if (shouldBlockNavigation(event)) {
       return;
     }
 

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,
   };
 }
 

package/src/data/table/root/DataTable.types.ts

@@ -12,11 +12,12 @@ type ColumnDefinition<T> = {
   minWidth?: number | string;
   maxWidth?: number | string;
   /**
-   * Currently only handles cell alignment.
-   * TODO: Should this include centering?
-   * type "icon" or something to avoid ellipsis on actions, tags etc
+   * Text alignment for cells in this column.
+   *
+   *
+   * @default "left"
    */
-  type?: "string" | "number";
+  align?: "left" | "right" | "center";
   /**
    * Assigned to the cell's `th` element instead of `td` if true.
    *