@navikt/ds-react 8.10.0 → 8.10.2

package/src/data/table/helpers/collectTableRowEntries.ts

@@ -0,0 +1,58 @@
+type TableRowEntryId = string | number;
+
+type CollectTableRowEntriesArgs<T> = {
+  items: T[];
+  getRowId?: (rowData: T, index: number) => TableRowEntryId;
+  getSubRows?: (rowData: T) => T[];
+  isSubRowExpandable?: (rowData: T) => boolean;
+};
+
+interface ItemDetail<T> {
+  id: string | number;
+  level: number;
+  parent: null | T;
+  children: readonly T[];
+}
+
+function collectTableRowEntries<T>({
+  items,
+  getRowId,
+  getSubRows,
+  isSubRowExpandable,
+}: CollectTableRowEntriesArgs<T>): Map<T, ItemDetail<T>> {
+  const itemDetailsMap = new Map<T, ItemDetail<T>>();
+
+  const traverseRows = (
+    rows: T[],
+    level: number,
+    parent: T | null,
+    parentId?: TableRowEntryId,
+  ) => {
+    for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+      const rowData = rows[rowIndex];
+      const rowId =
+        getRowId?.(rowData, rowIndex) ??
+        (parentId == null ? rowIndex : `${parentId}-${rowIndex}`);
+      const isRowExpandable = isSubRowExpandable?.(rowData) ?? true;
+      const children = (isRowExpandable ? getSubRows?.(rowData) : []) ?? [];
+
+      itemDetailsMap.set(rowData, {
+        id: rowId,
+        level,
+        parent,
+        children,
+      });
+
+      if (children.length > 0) {
+        traverseRows(children, level + 1, rowData, rowId);
+      }
+    }
+  };
+
+  traverseRows(items, 0, null);
+
+  return itemDetailsMap;
+}
+
+export { collectTableRowEntries };
+export type { CollectTableRowEntriesArgs, TableRowEntryId, ItemDetail };

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

@@ -55,15 +55,15 @@ function getNavigationAction(event: KeyboardEvent): NavigationAction | null {
  */
 function shouldBlockNavigation(event: KeyboardEvent): boolean {
   const key = event.key;
-  if (!(key in keyToCoord)) {
-    return false;
-  }
-
   const el = event.target as HTMLElement | null;
   if (!el) {
     return false;
   }
 
+  if (el.dataset.disableKeyboardNav === "true") {
+    return true;
+  }
+
   if (el.isContentEditable) {
     return true;
   }

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

@@ -0,0 +1,115 @@
+import { act, renderHook } from "@testing-library/react";
+import React from "react";
+import { describe, expect, test, vi } from "vitest";
+import {
+  DataTableExpansionProvider,
+  useDataTableExpansion,
+} from "../useTableExpansion";
+import { useTableItems } from "../useTableItems";
+
+type TestRow = {
+  id: number;
+  subRows?: TestRow[];
+};
+
+function createWrapper(
+  options: {
+    onDetailsPanelChange?: (ids: (string | number)[]) => void;
+    isDetailsPanelExpandable?: (row: TestRow) => boolean;
+  } = {},
+) {
+  const rows: TestRow[] = [{ id: 1, subRows: [{ id: 10 }] }, { id: 2 }];
+
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    const tableItems = useTableItems({
+      items: rows,
+      getRowId: (row) => row.id,
+      getSubRows: (row) => row.subRows ?? [],
+    });
+
+    return (
+      <DataTableExpansionProvider<TestRow>
+        itemDetails={tableItems.itemDetails}
+        getDetailsPanelContent={(row) => row.id}
+        isDetailsPanelExpandable={options.isDetailsPanelExpandable}
+        onDetailsPanelChange={options.onDetailsPanelChange}
+      >
+        {children}
+      </DataTableExpansionProvider>
+    );
+  };
+}
+
+describe("useTableExpansion", () => {
+  test("does not allow toggling rows that are not expandable", () => {
+    const onDetailsPanelChange = vi.fn();
+
+    const { result } = renderHook(() => useDataTableExpansion(), {
+      wrapper: createWrapper({
+        onDetailsPanelChange,
+        isDetailsPanelExpandable: (row) => row.id === 1,
+      }),
+    });
+
+    expect(result.current.isDetailsPanelExpandable(1)).toBe(true);
+    expect(result.current.isDetailsPanelExpandable(2)).toBe(false);
+    expect(result.current.isDetailsPanelExpandable(10)).toBe(false);
+
+    act(() => {
+      result.current.toggleExpansion(2);
+    });
+
+    expect(result.current.isExpanded(2)).toBe(false);
+    expect(onDetailsPanelChange).not.toHaveBeenCalled();
+
+    act(() => {
+      result.current.toggleExpansion(1);
+    });
+
+    expect(result.current.isExpanded(1)).toBe(true);
+    expect(onDetailsPanelChange).toHaveBeenCalledWith([1]);
+  });
+
+  test("expand all only expands expandable rows", () => {
+    const onDetailsPanelChange = vi.fn();
+
+    const { result } = renderHook(() => useDataTableExpansion(), {
+      wrapper: createWrapper({
+        onDetailsPanelChange,
+        isDetailsPanelExpandable: (row) => row.id === 1,
+      }),
+    });
+
+    act(() => {
+      result.current.toggleAll();
+    });
+
+    expect(result.current.isExpanded(1)).toBe(true);
+    expect(result.current.isExpanded(2)).toBe(false);
+    expect(result.current.isAllExpanded).toBe(true);
+    expect(onDetailsPanelChange).toHaveBeenCalledWith([1]);
+  });
+
+  test("expand all only targets top-level table items", () => {
+    const onDetailsPanelChange = vi.fn();
+
+    const { result } = renderHook(() => useDataTableExpansion(), {
+      wrapper: createWrapper({
+        onDetailsPanelChange,
+      }),
+    });
+
+    expect(result.current.isDetailsPanelExpandable(1)).toBe(true);
+    expect(result.current.isDetailsPanelExpandable(2)).toBe(true);
+    expect(result.current.isDetailsPanelExpandable(10)).toBe(false);
+
+    act(() => {
+      result.current.toggleAll();
+    });
+
+    expect(result.current.isExpanded(1)).toBe(true);
+    expect(result.current.isExpanded(2)).toBe(true);
+    expect(result.current.isExpanded(10)).toBe(false);
+    expect(onDetailsPanelChange).toHaveBeenCalledWith([1, 2]);
+  });
+});

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

@@ -0,0 +1,131 @@
+import { renderHook } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { useTableItems } from "../useTableItems";
+
+type TestRow = {
+  id: string;
+  name: string;
+  subRows?: TestRow[];
+};
+
+type FallbackTestRow = {
+  label: string;
+  subRows?: FallbackTestRow[];
+};
+
+const plainRows: TestRow[] = [
+  { id: "a", name: "Alpha" },
+  { id: "b", name: "Beta" },
+];
+
+const nestedRows: TestRow[] = [
+  {
+    id: "a",
+    name: "Alpha",
+    subRows: [
+      { id: "a1", name: "Alpha child 1" },
+      {
+        id: "a2",
+        name: "Alpha child 2",
+        subRows: [{ id: "a2a", name: "Alpha grandchild" }],
+      },
+    ],
+  },
+  {
+    id: "b",
+    name: "Beta",
+    subRows: [{ id: "b1", name: "Beta child 1" }],
+  },
+];
+
+const fallbackRows: FallbackTestRow[] = [
+  {
+    label: "Parent",
+    subRows: [{ label: "Child" }],
+  },
+];
+
+const getSubRows = (row: TestRow) => row.subRows ?? [];
+
+const getVisibleIds = (rows: TestRow[]) => rows.map((row) => row.id);
+
+describe("useTableItems", () => {
+  test("builds row details for plain rows without nesting", () => {
+    const { result } = renderHook(() =>
+      useTableItems({
+        items: plainRows,
+        getRowId: (row) => row.id,
+      }),
+    );
+
+    expect(getVisibleIds(result.current.items)).toEqual(["a", "b"]);
+    expect(result.current.itemDetails.get(plainRows[0])).toMatchObject({
+      id: "a",
+      level: 0,
+      parent: null,
+      children: [],
+    });
+    expect(result.current.itemDetails.get(plainRows[1])).toMatchObject({
+      id: "b",
+      level: 0,
+      parent: null,
+      children: [],
+    });
+  });
+
+  test("shows direct child rows when a parent row is expanded", () => {
+    const { result } = renderHook(() =>
+      useTableItems({
+        items: nestedRows,
+        getRowId: (row) => row.id,
+        getSubRows,
+        defaultExpandedSubRowIds: ["a"],
+      }),
+    );
+
+    expect(getVisibleIds(result.current.items)).toEqual(["a", "a1", "a2", "b"]);
+  });
+
+  test("uses the same fallback root id to reveal child rows when getRowId is omitted", () => {
+    const { result } = renderHook(() =>
+      useTableItems({
+        items: fallbackRows,
+        getSubRows: (row) => row.subRows ?? [],
+        defaultExpandedSubRowIds: [0],
+      }),
+    );
+
+    expect(result.current.items.map((row) => row.label)).toEqual([
+      "Parent",
+      "Child",
+    ]);
+  });
+
+  test("updates visible rows in depth-first order for controlled expanded ids", () => {
+    const { result, rerender } = renderHook(
+      ({ expandedIds }) =>
+        useTableItems({
+          items: nestedRows,
+          getRowId: (row) => row.id,
+          getSubRows,
+          expandedSubRowIds: expandedIds,
+        }),
+      {
+        initialProps: { expandedIds: [] as (string | number)[] },
+      },
+    );
+
+    expect(getVisibleIds(result.current.items)).toEqual(["a", "b"]);
+
+    rerender({ expandedIds: ["a", "a2", "b"] });
+
+    expect(getVisibleIds(result.current.items)).toEqual([
+      "a",
+      "a1",
+      "a2",
+      "a2a",
+      "b",
+      "b1",
+    ]);
+  });
+});

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 type { ItemDetail } 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,93 @@ type TableExpansionOptions<T> = {
   detailsPanelRowIds?: (string | number)[];
   defaultDetailsPanelRowIds?: (string | number)[];
   onDetailsPanelChange?: (ids: (string | number)[]) => void;
-  allRowKeys: (string | number)[];
+  itemDetails: Map<T, ItemDetail<T>>;
   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,
+  itemDetails,
   getDetailsPanelContent,
+  isDetailsPanelExpandable,
   getDetailsPanelHeight,
   showExpandAll = false,
 }: TableExpansionOptions<T> & { children: React.ReactNode }) {
   const [expandedIds, setExpandedIds] = useControllableState({
     value: detailsPanelRowIds,
     defaultValue: defaultDetailsPanelRowIds,
+    onChange: onDetailsPanelChange,
   });
 
+  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 +127,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,123 @@
+import { useCallback, useMemo } from "react";
+import { createStrictContext } from "../../../utils/helpers";
+import { useControllableState } from "../../../utils/hooks";
+import {
+  type ItemDetail,
+  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>>;
+  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 } = useMemo(() => {
+    const rowEntriesMap = collectTableRowEntries({
+      items,
+      getRowId,
+      getSubRows,
+      isSubRowExpandable,
+    });
+
+    const localVisibleItems: T[] = [];
+    const addVisibleRows = (rowData: T) => {
+      localVisibleItems.push(rowData);
+
+      const details = rowEntriesMap.get(rowData);
+
+      if (!details || !expandedIdsSet.has(details.id)) {
+        return;
+      }
+
+      for (const childRow of details.children) {
+        addVisibleRows(childRow);
+      }
+    };
+
+    for (const rowData of items) {
+      addVisibleRows(rowData);
+    }
+
+    return {
+      visibleItems: localVisibleItems,
+      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,
+    onExpandedSubRowIdsChange: handleExpandedSubRowIdChange,
+    isSubRowExpanded: (id: string | number) => expandedIdsSet.has(id),
+  };
+}
+
+const { Provider: TableItemsProvider, useContext: useTableItemsContext } =
+  /* TODO: Can we type this better? */
+  createStrictContext<useTableItemsReturn<any>>({
+    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;
     }