@navikt/ds-react 8.10.2 → 8.10.4

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;
@@ -36,8 +42,8 @@ describe("useTableSelection", () => {
     test("returns empty selectedKeys and no prop getters", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "none",
-          allRowKeys,
+          selection: { selectionMode: "none" },
+          visibleRowIds,
         }),
       );
 
@@ -50,8 +56,8 @@ describe("useTableSelection", () => {
     test("returns getRowRadioProps", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "single",
-          allRowKeys,
+          selection: { selectionMode: "single" },
+          visibleRowIds,
         }),
       );
 
@@ -63,9 +69,8 @@ describe("useTableSelection", () => {
       const onChange = vi.fn();
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "single",
-          allRowKeys,
-          onSelectionChange: onChange,
+          selection: { selectionMode: "single", onSelectionChange: onChange },
+          visibleRowIds,
         }),
       );
 
@@ -82,9 +87,8 @@ describe("useTableSelection", () => {
     test("toggling the same row keeps it selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "single",
-          allRowKeys,
-          defaultSelectedKeys: ["a"],
+          selection: { selectionMode: "single", defaultSelectedKeys: ["a"] },
+          visibleRowIds,
         }),
       );
 
@@ -100,9 +104,8 @@ describe("useTableSelection", () => {
     test("selecting a new row replaces the previous", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "single",
-          allRowKeys,
-          defaultSelectedKeys: ["a"],
+          selection: { selectionMode: "single", defaultSelectedKeys: ["a"] },
+          visibleRowIds,
         }),
       );
 
@@ -118,9 +121,8 @@ describe("useTableSelection", () => {
     test("disabled rows have disabled prop", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "single",
-          allRowKeys,
-          disabledSelectionKeys: ["b"],
+          selection: { selectionMode: "single", disabledSelectionKeys: ["b"] },
+          visibleRowIds,
         }),
       );
 
@@ -132,9 +134,8 @@ describe("useTableSelection", () => {
       const { result, rerender } = renderHook(
         ({ selectedKeys }) =>
           useTableSelection({
-            selectionMode: "single",
-            allRowKeys,
-            selectedKeys,
+            selection: { selectionMode: "single", selectedKeys },
+            visibleRowIds,
           }),
         { initialProps: { selectedKeys: ["a"] as (string | number)[] } },
       );
@@ -150,8 +151,8 @@ describe("useTableSelection", () => {
     test("returns getTheadCheckboxProps and getRowCheckboxProps", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
-          allRowKeys,
+          selection: { selectionMode: "multiple" },
+          visibleRowIds,
         }),
       );
 
@@ -163,8 +164,8 @@ describe("useTableSelection", () => {
     test("selecting individual rows", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
-          allRowKeys,
+          selection: { selectionMode: "multiple" },
+          visibleRowIds,
         }),
       );
 
@@ -188,9 +189,11 @@ describe("useTableSelection", () => {
     test("deselecting a row", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
-          allRowKeys,
-          defaultSelectedKeys: ["a", "b"],
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "b"],
+          },
+          visibleRowIds,
         }),
       );
 
@@ -206,8 +209,8 @@ describe("useTableSelection", () => {
     test("select all via thead checkbox", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
-          allRowKeys,
+          selection: { selectionMode: "multiple" },
+          visibleRowIds,
         }),
       );
 
@@ -220,12 +223,32 @@ 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({
+          selection: { 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,
-          defaultSelectedKeys: ["a", "b", "c"],
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "b", "c"],
+          },
+          visibleRowIds,
         }),
       );
 
@@ -238,12 +261,35 @@ describe("useTableSelection", () => {
       expect(asMultiple(result).selectedKeys).toEqual([]);
     });
 
+    test("deselect all clears hidden descendants for visible parents but preserves unrelated keys", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "a1", "a2", "a2a", "external"],
+          },
+          visibleRowIds: ["a"],
+          childRowIdsById,
+        }),
+      );
+
+      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,
-          disabledSelectionKeys: ["b"],
+          selection: {
+            selectionMode: "multiple",
+            disabledSelectionKeys: ["b"],
+          },
+          visibleRowIds,
         }),
       );
 
@@ -259,10 +305,12 @@ describe("useTableSelection", () => {
     test("deselect all preserves disabled-but-selected rows", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
-          allRowKeys,
-          defaultSelectedKeys: ["a", "b", "c"],
-          disabledSelectionKeys: ["b"],
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "b", "c"],
+            disabledSelectionKeys: ["b"],
+          },
+          visibleRowIds,
         }),
       );
 
@@ -278,9 +326,8 @@ describe("useTableSelection", () => {
     test("thead checkbox shows indeterminate when partially selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
-          allRowKeys,
-          defaultSelectedKeys: ["a"],
+          selection: { selectionMode: "multiple", defaultSelectedKeys: ["a"] },
+          visibleRowIds,
         }),
       );
 
@@ -292,9 +339,11 @@ describe("useTableSelection", () => {
     test("thead checkbox shows checked when all selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
-          allRowKeys,
-          defaultSelectedKeys: ["a", "b", "c"],
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "b", "c"],
+          },
+          visibleRowIds,
         }),
       );
 
@@ -306,10 +355,12 @@ describe("useTableSelection", () => {
     test("thead checkbox shows checked when all selectable rows are selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
-          allRowKeys,
-          defaultSelectedKeys: ["a", "c"],
-          disabledSelectionKeys: ["b"],
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "c"],
+            disabledSelectionKeys: ["b"],
+          },
+          visibleRowIds,
         }),
       );
 
@@ -321,9 +372,11 @@ describe("useTableSelection", () => {
     test("deselecting one row when all rows are selected", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
-          allRowKeys,
-          defaultSelectedKeys: ["a", "b", "c"],
+          selection: {
+            selectionMode: "multiple",
+            defaultSelectedKeys: ["a", "b", "c"],
+          },
+          visibleRowIds,
         }),
       );
 
@@ -339,9 +392,11 @@ describe("useTableSelection", () => {
     test("disabled rows have disabled prop", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
-          allRowKeys,
-          disabledSelectionKeys: ["b"],
+          selection: {
+            selectionMode: "multiple",
+            disabledSelectionKeys: ["b"],
+          },
+          visibleRowIds,
         }),
       );
 
@@ -352,13 +407,82 @@ describe("useTableSelection", () => {
     test("thead checkbox disabled when all rows disabled", () => {
       const { result } = renderHook(() =>
         useTableSelection({
-          selectionMode: "multiple",
-          allRowKeys,
-          disabledSelectionKeys: ["a", "b", "c"],
+          selection: {
+            selectionMode: "multiple",
+            disabledSelectionKeys: ["a", "b", "c"],
+          },
+          visibleRowIds,
         }),
       );
 
       expect(asMultiple(result).getTheadCheckboxProps().disabled).toBe(true);
     });
+
+    test("parent rows show indeterminate when visible descendants are partially selected", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selection: { selectionMode: "multiple", defaultSelectedKeys: ["a1"] },
+          visibleRowIds: ["a", "a1", "a2"],
+          childRowIdsById,
+        }),
+      );
+
+      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({
+          selection: { 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({
+          selection: { 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/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,
   };
 }
 

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

@@ -0,0 +1,182 @@
+import React, { useCallback } from "react";
+import { createStrictContext } from "../../../utils/helpers";
+import { useControllableState } from "../../../utils/hooks";
+import { useTableItemsContext } from "./useTableItems";
+
+type DetailsPanelProps<T> = {
+  /**
+   * Renders a details panel below the row when expanded.
+   * When provided, an expand toggle column is added automatically.
+   */
+  getContent?: (rowData: T) => React.ReactNode;
+  /**
+   * Determines whether a row can be expanded to show details panel content.
+   * @default () => true
+   */
+  isRowExpandable?: (rowData: T) => boolean;
+  /**
+   * Controlled list of expanded row IDs.
+   * Use with `onDetailsPanelChange` for controlled usage, or `defaultDetailsPanelRowIds` for uncontrolled.
+   */
+  expandedRowIds?: (string | number)[];
+  /**
+   * Initial list of expanded row IDs for uncontrolled usage.
+   * @default []
+   */
+  defaultExpandedRowIds?: (string | number)[];
+  /**
+   * Called when the list of expanded row IDs changes.
+   *
+   *
+   * TODO:
+   * - Docs: This pattern is called "Master / Detail" in general terms
+   */
+  onExpandedRowIdsChange?: (ids: (string | number)[]) => void;
+  /**
+   * Returns the height (in px) or `"auto"` for a row's details panel.
+   * When a number is returned, the panel scrolls within that fixed height.
+   * @default "auto"
+   */
+  getHeight?: (rowData: T) => number | "auto";
+  /**
+   * Shows an expand-all toggle button in the expand column header.
+   * @default false
+   */
+  showExpandAll?: boolean;
+};
+
+type DataTableDetailsPanelContextT = {
+  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;
+  enableDetailsPanel: boolean;
+};
+
+const {
+  Provider: DataTableDetailsPanelContextProvider,
+  useContext: useDataTableDetailsPanel,
+} = createStrictContext<DataTableDetailsPanelContextT>({
+  name: "DataTableDetailsPanelContext",
+  errorMessage:
+    "useDataTableDetailsPanel must be used within a DataTableDetailsPanelProvider.",
+});
+
+function DataTableDetailsPanelProvider<T>({
+  children,
+  detailsPanel = {},
+}: { detailsPanel?: DetailsPanelProps<T> } & { children: React.ReactNode }) {
+  const {
+    expandedRowIds,
+    defaultExpandedRowIds = [],
+    onExpandedRowIdsChange,
+    getContent,
+    isRowExpandable,
+    getHeight,
+    showExpandAll = false,
+  } = detailsPanel;
+
+  const [expandedIds, setExpandedIds] = useControllableState({
+    value: expandedRowIds,
+    defaultValue: defaultExpandedRowIds,
+    onChange: onExpandedRowIdsChange,
+  });
+
+  /* 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 (!getContent) {
+      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 (!isRowExpandable || isRowExpandable(rowData)) {
+        ids.add(id);
+      }
+    }
+
+    return ids;
+  }, [getContent, isRowExpandable, itemDetails]);
+
+  const isDetailsPanelExpandableById = useCallback(
+    (id: string | number) => expandableIds.has(id),
+    [expandableIds],
+  );
+
+  const isExpanded = useCallback(
+    (id: string | number) =>
+      isDetailsPanelExpandableById(id) && expandedIds.includes(id),
+    [expandedIds, isDetailsPanelExpandableById],
+  );
+
+  const toggleExpansion = useCallback(
+    (id: string | number) => {
+      if (!isDetailsPanelExpandableById(id)) {
+        return;
+      }
+
+      setExpandedIds((currentExpandedIds) =>
+        currentExpandedIds.includes(id)
+          ? currentExpandedIds.filter((expandedId) => expandedId !== id)
+          : [...currentExpandedIds, id],
+      );
+    },
+    [isDetailsPanelExpandableById, setExpandedIds],
+  );
+
+  const isAllExpanded =
+    expandableIds.size > 0 &&
+    Array.from(expandableIds).every((key) => expandedIds.includes(key));
+
+  const toggleAll = useCallback(() => {
+    setExpandedIds(isAllExpanded ? [] : Array.from(expandableIds));
+  }, [expandableIds, isAllExpanded, setExpandedIds]);
+
+  return (
+    <DataTableDetailsPanelContextProvider
+      isExpanded={isExpanded}
+      isDetailsPanelExpandable={isDetailsPanelExpandableById}
+      toggleExpansion={toggleExpansion}
+      toggleAll={toggleAll}
+      isAllExpanded={isAllExpanded}
+      getDetailsPanelContent={
+        getContent as ((row: unknown) => React.ReactNode) | undefined
+      }
+      getDetailsPanelHeight={
+        getHeight as ((row: unknown) => number | "auto") | undefined
+      }
+      showExpandAll={showExpandAll}
+      enableDetailsPanel={!!getContent}
+    >
+      {children}
+    </DataTableDetailsPanelContextProvider>
+  );
+}
+
+function getDataTableDetailsPanelId(tableId: string, rowId: string | number) {
+  return `${tableId}-expansion-${rowId}`;
+}
+
+export {
+  DataTableDetailsPanelProvider,
+  getDataTableDetailsPanelId,
+  useDataTableDetailsPanel,
+};
+
+export type { DetailsPanelProps };