@navikt/ds-react 8.10.4 → 8.10.6

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

@@ -1,5 +1,6 @@
 import { renderHook } from "@testing-library/react";
 import { describe, expect, test } from "vitest";
+import type { TableRowEntryId } from "../../root/DataTable.types";
 import { useTableItems } from "../useTableItems";
 
 type TestRow = {
@@ -45,6 +46,12 @@ const fallbackRows: FallbackTestRow[] = [
   },
 ];
 
+const duplicatedRowObject: TestRow = {
+  id: "shared",
+  name: "Shared",
+  subRows: [{ id: "shared-child", name: "Child" }],
+};
+
 const getSubRows = (row: TestRow) => row.subRows ?? [];
 
 const getVisibleIds = (rows: TestRow[]) => rows.map((row) => row.id);
@@ -59,16 +66,18 @@ describe("useTableItems", () => {
     );
 
     expect(getVisibleIds(result.current.items)).toEqual(["a", "b"]);
-    expect(result.current.itemDetails.get(plainRows[0])).toMatchObject({
+    expect(result.current.itemDetails.get("a")).toMatchObject({
       id: "a",
+      rowData: plainRows[0],
       level: 0,
-      parent: null,
+      parentId: null,
       children: [],
     });
-    expect(result.current.itemDetails.get(plainRows[1])).toMatchObject({
+    expect(result.current.itemDetails.get("b")).toMatchObject({
       id: "b",
+      rowData: plainRows[1],
       level: 0,
-      parent: null,
+      parentId: null,
       children: [],
     });
   });
@@ -102,14 +111,13 @@ describe("useTableItems", () => {
     expect(result.current.childRowIdsById.get("b")).toEqual(["b1"]);
   });
 
-  test("uses the same fallback root id to reveal child rows when getRowId is omitted", () => {
+  test("uses unique fallback ids to reveal child rows when getRowId is omitted", () => {
     const { result } = renderHook(() =>
       useTableItems({
         items: fallbackRows,
-        getRowId: (_, index) => index,
         subRows: {
           getRows: (row: any) => row.subRows ?? [],
-          defaultExpandedRowIds: [0],
+          defaultExpandedRowIds: ["0"],
         },
       }),
     );
@@ -118,6 +126,7 @@ describe("useTableItems", () => {
       "Parent",
       "Child",
     ]);
+    expect(result.current.childRowIdsById.get("0")).toEqual(["0.0"]);
   });
 
   test("updates visible rows in depth-first order for controlled expanded ids", () => {
@@ -132,7 +141,7 @@ describe("useTableItems", () => {
           },
         }),
       {
-        initialProps: { expandedIds: [] as (string | number)[] },
+        initialProps: { expandedIds: [] as TableRowEntryId[] },
       },
     );
 
@@ -149,4 +158,35 @@ describe("useTableItems", () => {
       "b1",
     ]);
   });
+
+  test("tracks duplicated row objects by row id instead of object identity", () => {
+    const { result } = renderHook(() =>
+      useTableItems({
+        items: [duplicatedRowObject, duplicatedRowObject],
+        subRows: {
+          getRows: getSubRows,
+          defaultExpandedRowIds: ["0"],
+        },
+      }),
+    );
+
+    expect(result.current.visibleRowIds).toEqual(["0", "0.0", "1"]);
+    expect(getVisibleIds(result.current.items)).toEqual([
+      "shared",
+      "shared-child",
+      "shared",
+    ]);
+    expect(result.current.itemDetails.get("0")).toMatchObject({
+      id: "0",
+      rowData: duplicatedRowObject,
+      parentId: null,
+      children: ["0.0"],
+    });
+    expect(result.current.itemDetails.get("1")).toMatchObject({
+      id: "1",
+      rowData: duplicatedRowObject,
+      parentId: null,
+      children: ["1.0"],
+    });
+  });
 });

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

@@ -3,38 +3,57 @@ import type {
   ColumnDefinition,
   ColumnDefinitions,
 } from "../root/DataTable.types";
-import type { SelectionProps } from "./useTableSelection";
+import { ACTION_CELL_WIDTH } from "../tr/DataTableTr";
 
 type UseColumnOptions = {
   stickyColumns?: {
-    first?: "1";
-    last?: "1";
+    start?: "1";
+    end?: "1";
   };
-  selectionMode: SelectionProps["selectionMode"];
+  hasSelection: boolean;
+  hasDetailsPanel: boolean;
+  layout: "fixed" | "auto";
+};
+
+type StickyStartState = {
+  selection: boolean;
+  expansion: boolean;
+  selectionOffset: number;
+  firstColumnOffset: number;
 };
 
 type UseColumnOptionsResult<T> = {
   columns: {
     isSticky: "start" | "end" | false;
+    isStickyLast?: boolean;
+    stickyLeftOffset?: number;
     colDef: ColumnDefinition<T>;
   }[];
-  stickySelection: boolean;
+  stickyStart: StickyStartState;
+  totalColSpan: number;
 };
 
 function useColumnOptions<T>(
   columnDefinitions: ColumnDefinitions<T>,
   options: UseColumnOptions,
 ): UseColumnOptionsResult<T> {
-  const { stickyColumns, selectionMode } = options;
+  const { stickyColumns, hasSelection, hasDetailsPanel, layout } = options;
+
+  const hasStickyStart = stickyColumns?.start === "1";
 
-  const hasSelection = selectionMode !== "none";
+  const stickyExpansion = hasStickyStart && hasDetailsPanel;
+  const stickySelection = hasStickyStart && hasSelection;
+
+  const stickySelectionOffset = stickyExpansion ? ACTION_CELL_WIDTH : 0;
+  const stickyFirstColumnOffset =
+    (stickyExpansion ? ACTION_CELL_WIDTH : 0) +
+    (stickySelection ? ACTION_CELL_WIDTH : 0);
 
   const columns = useMemo(() => {
     return columnDefinitions.map((colDef, index) => {
-      const isFirstSticky =
-        stickyColumns?.first === "1" && index === 0 && !hasSelection;
+      const isFirstSticky = hasStickyStart && index === 0;
       const isLastSticky =
-        stickyColumns?.last === "1" && index === columnDefinitions.length - 1;
+        stickyColumns?.end === "1" && index === columnDefinitions.length - 1;
 
       return {
         isSticky: isFirstSticky
@@ -42,21 +61,36 @@ function useColumnOptions<T>(
           : isLastSticky
             ? ("end" as const)
             : (false as const),
+        isStickyLast: isFirstSticky && !isLastSticky,
+        stickyLeftOffset: isFirstSticky ? stickyFirstColumnOffset : undefined,
         colDef,
       };
     });
   }, [
     columnDefinitions,
-    hasSelection,
-    stickyColumns?.first,
-    stickyColumns?.last,
+    hasStickyStart,
+    stickyColumns,
+    stickyFirstColumnOffset,
   ]);
 
+  const totalColSpan =
+    columns.length +
+    (layout === "fixed" ? 1 : 0) +
+    (hasSelection ? 1 : 0) +
+    (hasDetailsPanel ? 1 : 0);
+
   return {
-    stickySelection: selectionMode !== "none" && stickyColumns?.first === "1",
+    stickyStart: {
+      selection: stickySelection,
+      expansion: stickyExpansion,
+      selectionOffset: stickySelectionOffset,
+      firstColumnOffset: stickyFirstColumnOffset,
+    },
     columns,
+    totalColSpan,
   };
 }
 
 export { useColumnOptions };
+export type { StickyStartState };
 export type { UseColumnOptionsResult };

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

@@ -1,14 +1,15 @@
 import React, { useCallback } from "react";
 import { createStrictContext } from "../../../utils/helpers";
 import { useControllableState } from "../../../utils/hooks";
-import { useTableItemsContext } from "./useTableItems";
+import type { TableRowEntryId } from "../root/DataTable.types";
+import { useDataTableContext } from "../root/DataTableRoot.context";
 
 type DetailsPanelProps<T> = {
   /**
-   * Renders a details panel below the row when expanded.
+   * Function to get the content to show in the details panel for a given row.
    * When provided, an expand toggle column is added automatically.
    */
-  getContent?: (rowData: T) => React.ReactNode;
+  getContent: (rowData: T) => React.ReactNode;
   /**
    * Determines whether a row can be expanded to show details panel content.
    * @default () => true
@@ -18,20 +19,16 @@ type DetailsPanelProps<T> = {
    * Controlled list of expanded row IDs.
    * Use with `onDetailsPanelChange` for controlled usage, or `defaultDetailsPanelRowIds` for uncontrolled.
    */
-  expandedRowIds?: (string | number)[];
+  expandedRowIds?: TableRowEntryId[];
   /**
    * Initial list of expanded row IDs for uncontrolled usage.
    * @default []
    */
-  defaultExpandedRowIds?: (string | number)[];
+  defaultExpandedRowIds?: TableRowEntryId[];
   /**
    * 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;
+  onExpandedRowIdsChange?: (ids: TableRowEntryId[]) => void; // TODO: Docs: This pattern is called "Master / Detail" in general terms
   /**
    * 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.
@@ -46,9 +43,9 @@ type DetailsPanelProps<T> = {
 };
 
 type DataTableDetailsPanelContextT = {
-  isExpanded: (id: string | number) => boolean;
-  isDetailsPanelExpandable: (id: string | number) => boolean;
-  toggleExpansion: (id: string | number) => void;
+  isExpanded: (id: TableRowEntryId) => boolean;
+  isDetailsPanelExpandable: (id: TableRowEntryId) => boolean;
+  toggleExpansion: (id: TableRowEntryId) => void;
   toggleAll: () => void;
   isAllExpanded: boolean;
   getDetailsPanelContent?: (row: unknown) => React.ReactNode;
@@ -68,7 +65,7 @@ const {
 
 function DataTableDetailsPanelProvider<T>({
   children,
-  detailsPanel = {},
+  detailsPanel,
 }: { detailsPanel?: DetailsPanelProps<T> } & { children: React.ReactNode }) {
   const {
     expandedRowIds,
@@ -78,7 +75,7 @@ function DataTableDetailsPanelProvider<T>({
     isRowExpandable,
     getHeight,
     showExpandAll = false,
-  } = detailsPanel;
+  } = detailsPanel || {};
 
   const [expandedIds, setExpandedIds] = useControllableState({
     value: expandedRowIds,
@@ -87,20 +84,23 @@ function DataTableDetailsPanelProvider<T>({
   });
 
   /* TODO: False is just fallback until auto and root is merged */
-  const tableItemsContext = useTableItemsContext(false);
+  const tableContext = useDataTableContext(false);
 
-  const { itemDetails } = tableItemsContext ?? {
-    itemDetails: new Map(),
+  const { itemDetails } = tableContext?.tableItems ?? {
+    itemDetails: new Map<
+      TableRowEntryId,
+      { rowData: T; id: TableRowEntryId; level: number }
+    >(),
   };
 
   const expandableIds = React.useMemo(() => {
     if (!getContent) {
-      return new Set<string | number>();
+      return new Set<TableRowEntryId>();
     }
 
-    const ids = new Set<string | number>();
+    const ids = new Set<TableRowEntryId>();
 
-    for (const [rowData, { id, level }] of itemDetails.entries()) {
+    for (const { rowData, id, level } of itemDetails.values()) {
       /* We only allow Master - Details pattern on top level rows */
       if (level > 0) {
         continue;
@@ -115,18 +115,18 @@ function DataTableDetailsPanelProvider<T>({
   }, [getContent, isRowExpandable, itemDetails]);
 
   const isDetailsPanelExpandableById = useCallback(
-    (id: string | number) => expandableIds.has(id),
+    (id: TableRowEntryId) => expandableIds.has(id),
     [expandableIds],
   );
 
   const isExpanded = useCallback(
-    (id: string | number) =>
+    (id: TableRowEntryId) =>
       isDetailsPanelExpandableById(id) && expandedIds.includes(id),
     [expandedIds, isDetailsPanelExpandableById],
   );
 
   const toggleExpansion = useCallback(
-    (id: string | number) => {
+    (id: TableRowEntryId) => {
       if (!isDetailsPanelExpandableById(id)) {
         return;
       }
@@ -169,7 +169,7 @@ function DataTableDetailsPanelProvider<T>({
   );
 }
 
-function getDataTableDetailsPanelId(tableId: string, rowId: string | number) {
+function getDataTableDetailsPanelId(tableId: string, rowId: TableRowEntryId) {
   return `${tableId}-expansion-${rowId}`;
 }
 

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

@@ -1,39 +1,55 @@
 import { useCallback, useMemo } from "react";
-import { createStrictContext } from "../../../utils/helpers";
 import { useControllableState } from "../../../utils/hooks";
 import {
   type ItemDetail,
-  type TableRowEntryId,
   collectTableRowEntries,
 } from "../helpers/collectTableRowEntries";
+import type { TableRowEntryId } from "../root/DataTable.types";
 
 type SubRowsProps<T> = {
-  getRows?: (rowData: T) => T[];
-  expandedRowIds?: (string | number)[];
-  defaultExpandedRowIds?: (string | number)[];
+  /**
+   * Function to get sub-rows for a given row.
+   */
+  getRows: (rowData: T) => T[];
+  /**
+   * Controlled list of IDs of rows that should be expanded.
+   */
+  expandedRowIds?: TableRowEntryId[];
+  /**
+   * IDs of rows that should be initially expanded.
+   * Only used when `expandedRowIds` is not provided, i.e. when the expanded state is uncontrolled.
+   */
+  defaultExpandedRowIds?: TableRowEntryId[];
+  /**
+   * Called when the list of expanded row IDs changes.
+   */
+  onExpandedRowIdsChange?: (ids: TableRowEntryId[]) => void;
+  /**
+   * Function to get whether a row should be expandable.
+   * By default, all rows are expandable when `getRows` is provided.
+   */
   isRowExpandable?: (rowData: T) => boolean;
-  onExpandedRowIdsChange?: (ids: (string | number)[]) => void;
 };
 
 type UseTableItemsArgs<T> = {
   items: T[];
-  getRowId: (rowData: T, index: number) => TableRowEntryId;
+  getRowId?: (rowData: T) => TableRowEntryId;
   subRows?: SubRowsProps<T>;
 };
 
-type useTableItemsReturn<T> = {
+type UseTableItemsReturn<T> = {
   items: T[];
-  itemDetails: Map<T, ItemDetail<T>>;
+  itemDetails: Map<TableRowEntryId, 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[]>;
-  onExpandedRowIdsChange: (id: string | number) => void;
-  isSubRowExpanded: (id: string | number) => boolean;
+  onExpandedRowIdsChange: (id: TableRowEntryId) => void;
+  isSubRowExpanded: (id: TableRowEntryId) => boolean;
 };
 
-function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
-  const { items, subRows = {}, getRowId } = args;
+function useTableItems<T>(args: UseTableItemsArgs<T>): UseTableItemsReturn<T> {
+  const { items, subRows, getRowId } = args;
 
   const {
     expandedRowIds,
@@ -41,7 +57,7 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
     getRows,
     onExpandedRowIdsChange,
     isRowExpandable,
-  } = subRows;
+  } = subRows || {};
 
   const [nestedSubRowsExpandedIds, setNestedSubRowsExpandedIds] =
     useControllableState({
@@ -57,32 +73,35 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
 
   const { itemDetails, visibleItems, visibleRowIds, childRowIdsById } =
     useMemo(() => {
-      const { itemDetails: rowEntriesMap, childRowIdsById: _childRowIdsById } =
-        collectTableRowEntries({
-          items,
-          getRowId,
-          getRows,
-          isRowExpandable,
-        });
+      const {
+        itemDetails: rowEntriesMap,
+        rootRowIds,
+        childRowIdsById: _childRowIdsById,
+      } = collectTableRowEntries({
+        items,
+        getRowId,
+        getRows,
+        isRowExpandable,
+      });
 
       const localVisibleItems: T[] = [];
       const localVisibleRowIds: TableRowEntryId[] = [];
 
-      const addVisibleRows = (rowData: T): TableRowEntryId[] => {
-        const details = rowEntriesMap.get(rowData);
+      const addVisibleRows = (rowId: TableRowEntryId): TableRowEntryId[] => {
+        const details = rowEntriesMap.get(rowId);
 
         if (!details) {
           return [];
         }
 
-        localVisibleItems.push(rowData);
+        localVisibleItems.push(details.rowData);
         localVisibleRowIds.push(details.id);
 
         const visibleDescendantRowIds: TableRowEntryId[] = [];
 
         if (expandedIdsSet.has(details.id)) {
-          for (const childRow of details.children) {
-            const childVisibleRowIds = addVisibleRows(childRow);
+          for (const childRowId of details.children) {
+            const childVisibleRowIds = addVisibleRows(childRowId);
             visibleDescendantRowIds.push(...childVisibleRowIds);
           }
         }
@@ -90,8 +109,8 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
         return [details.id, ...visibleDescendantRowIds];
       };
 
-      for (const rowData of items) {
-        addVisibleRows(rowData);
+      for (const rowId of rootRowIds) {
+        addVisibleRows(rowId);
       }
 
       return {
@@ -103,7 +122,7 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
     }, [getRows, items, getRowId, isRowExpandable, expandedIdsSet]);
 
   const handleExpandedSubRowIdChange = useCallback(
-    (id: string | number) => {
+    (id: TableRowEntryId) => {
       setNestedSubRowsExpandedIds((prev) =>
         prev.includes(id)
           ? prev.filter((expandedId) => expandedId !== id)
@@ -119,19 +138,9 @@ function useTableItems<T>(args: UseTableItemsArgs<T>): useTableItemsReturn<T> {
     visibleRowIds,
     childRowIdsById,
     onExpandedRowIdsChange: handleExpandedSubRowIdChange,
-    isSubRowExpanded: (id: string | number) => expandedIdsSet.has(id),
+    isSubRowExpanded: (id: TableRowEntryId) => 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, SubRowsProps };
+export { useTableItems };
+export type { ItemDetail, SubRowsProps, UseTableItemsReturn };

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useEventCallback } from "../../../utils/hooks";
 import { focusInitialTableTarget } from "../helpers/table-cell";
-import { focusCellAndUpdateTabIndex } from "../helpers/table-focus";
+import { focusCell, focusCellAndUpdateTabIndex } from "../helpers/table-focus";
 import {
   findFirstCell,
   findFirstCellInRow,
@@ -18,17 +18,9 @@ import { useGridCache } from "./useGridCache";
 
 type UseTableKeyboardNavOptions = {
   enabled: boolean;
-  /**
-   * Custom callback to determine if navigation should be blocked.
-   * Called before default blocking logic.
-   */
-  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
 };
 
-function useTableKeyboardNav({
-  enabled,
-  shouldBlockNavigation: customBlockFn,
-}: UseTableKeyboardNavOptions) {
+function useTableKeyboardNav({ enabled }: UseTableKeyboardNavOptions) {
   const [tableRef, setTableRef] = useState<HTMLTableElement | null>(null);
   const { getTableGrid, activeCell, setActiveCell } = useGridCache(
     tableRef,
@@ -110,10 +102,6 @@ function useTableKeyboardNav({
    * Checks if navigation should be blocked based on current focus context.
    */
   const handleTableKeyDown = useEventCallback((event: KeyboardEvent): void => {
-    if (customBlockFn?.(event)) {
-      return;
-    }
-
     const action = getNavigationAction(event);
     if (!action) {
       return;
@@ -137,6 +125,10 @@ function useTableKeyboardNav({
     const target = event.target as Element | null;
 
     if (tableRef && target === tableRef) {
+      if (activeCell) {
+        focusCell(activeCell);
+        return;
+      }
       focusInitialTableTarget(tableRef);
       return;
     }
@@ -173,7 +165,7 @@ function useTableKeyboardNav({
 
   return {
     /* Table should only have tabIndex until the focus is moved inside and is enabled */
-    tabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
+    tabIndex: enabled ? 0 : undefined,
     setTableRef,
   };
 }