@navikt/ds-react 8.10.3 → 8.10.5

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

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

@@ -14,7 +14,7 @@ function useGridCache(tableRef: HTMLTableElement | null, enabled: boolean) {
   });
 
   const [activeCell, setActiveCell] = useState<Element | null>(null);
-  const activeCellRef = useValueAsRef(activeCell).current;
+  const activeCellRef = useValueAsRef(activeCell);
   const observerRef = useRef<MutationObserver | null>(null);
 
   useEffect(() => {
@@ -24,7 +24,8 @@ function useGridCache(tableRef: HTMLTableElement | null, enabled: boolean) {
 
     observerRef.current = new MutationObserver(() => {
       gridCacheRef.current.dirty = true;
-      if (activeCellRef && !activeCellRef.isConnected) {
+
+      if (activeCellRef.current && !activeCellRef.current.isConnected) {
         setActiveCell(null);
       }
     });

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

@@ -0,0 +1,185 @@
+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<
+      string | number,
+      { rowData: T; id: string | number; level: number }
+    >(),
+  };
+
+  const expandableIds = React.useMemo(() => {
+    if (!getContent) {
+      return new Set<string | number>();
+    }
+
+    const ids = new Set<string | number>();
+
+    for (const { rowData, id, level } of itemDetails.values()) {
+      /* 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 };