@navikt/ds-react 8.10.5 → 8.10.6

package/src/data/table/helpers/selection/selection.utils.test.ts

@@ -0,0 +1,161 @@
+import { describe, expect, test } from "vitest";
+import type { TableRowEntryId } from "../../root/DataTable.types";
+import type { ItemDetail } from "../collectTableRowEntries";
+import { mutateRowSelection } from "./selection.utils";
+
+function makeItemDetails<T>(
+  entries: { id: TableRowEntryId; rowData: T }[],
+): Map<TableRowEntryId, ItemDetail<T>> {
+  return new Map(
+    entries.map(({ id, rowData }) => [
+      id,
+      { id, rowData, level: 0, parentId: null, children: [] },
+    ]),
+  );
+}
+
+describe("mutateRowSelection", () => {
+  test("adds rowId to set when checked", () => {
+    const set = new Set<TableRowEntryId>();
+    const itemDetails = makeItemDetails([{ id: "a", rowData: {} }]);
+    const changed = mutateRowSelection({
+      selectedRowIds: set,
+      rowId: "a",
+      checked: true,
+      childRowIdsById: new Map(),
+      itemDetails,
+    });
+    expect(set.has("a")).toBe(true);
+    expect(changed).toBe(true);
+  });
+
+  test("removes rowId from set when unchecked", () => {
+    const set = new Set<TableRowEntryId>(["a"]);
+    const itemDetails = makeItemDetails([{ id: "a", rowData: {} }]);
+    const changed = mutateRowSelection({
+      selectedRowIds: set,
+      rowId: "a",
+      checked: false,
+      childRowIdsById: new Map(),
+      itemDetails,
+    });
+    expect(set.has("a")).toBe(false);
+    expect(changed).toBe(true);
+  });
+
+  test("returns false and does not mutate when row is already in desired state", () => {
+    const set = new Set<TableRowEntryId>(["a"]);
+    const itemDetails = makeItemDetails([{ id: "a", rowData: {} }]);
+    const changed = mutateRowSelection({
+      selectedRowIds: set,
+      rowId: "a",
+      checked: true,
+      childRowIdsById: new Map(),
+      itemDetails,
+    });
+    expect(set.size).toBe(1);
+    expect(changed).toBe(false);
+  });
+
+  test("recursively selects all children", () => {
+    const set = new Set<TableRowEntryId>();
+    const itemDetails = makeItemDetails([
+      { id: "parent", rowData: {} },
+      { id: "child1", rowData: {} },
+      { id: "child2", rowData: {} },
+    ]);
+    const childRowIdsById = new Map<TableRowEntryId, TableRowEntryId[]>([
+      ["parent", ["child1", "child2"]],
+    ]);
+    mutateRowSelection({
+      selectedRowIds: set,
+      rowId: "parent",
+      checked: true,
+      childRowIdsById,
+      itemDetails,
+    });
+    expect(set).toEqual(new Set(["parent", "child1", "child2"]));
+  });
+
+  test("recursively deselects all children", () => {
+    const set = new Set<TableRowEntryId>(["parent", "child1", "child2"]);
+    const itemDetails = makeItemDetails([
+      { id: "parent", rowData: {} },
+      { id: "child1", rowData: {} },
+      { id: "child2", rowData: {} },
+    ]);
+    const childRowIdsById = new Map<TableRowEntryId, TableRowEntryId[]>([
+      ["parent", ["child1", "child2"]],
+    ]);
+    mutateRowSelection({
+      selectedRowIds: set,
+      rowId: "parent",
+      checked: false,
+      childRowIdsById,
+      itemDetails,
+    });
+    expect(set.size).toBe(0);
+  });
+
+  test("handles deeply nested children", () => {
+    const set = new Set<TableRowEntryId>();
+    const itemDetails = makeItemDetails([
+      { id: "a", rowData: {} },
+      { id: "a1", rowData: {} },
+      { id: "a1a", rowData: {} },
+    ]);
+    const childRowIdsById = new Map<TableRowEntryId, TableRowEntryId[]>([
+      ["a", ["a1"]],
+      ["a1", ["a1a"]],
+    ]);
+    mutateRowSelection({
+      selectedRowIds: set,
+      rowId: "a",
+      checked: true,
+      childRowIdsById,
+      itemDetails,
+    });
+    expect(set).toEqual(new Set(["a", "a1", "a1a"]));
+  });
+
+  test("skips disabled rows and their children", () => {
+    const set = new Set<TableRowEntryId>();
+    const itemDetails = makeItemDetails([
+      { id: "parent", rowData: { disabled: false } },
+      { id: "child1", rowData: { disabled: true } },
+      { id: "child1a", rowData: { disabled: false } },
+      { id: "child2", rowData: { disabled: false } },
+    ]);
+    const childRowIdsById = new Map<TableRowEntryId, TableRowEntryId[]>([
+      ["parent", ["child1", "child2"]],
+      ["child1", ["child1a"]],
+    ]);
+    mutateRowSelection({
+      selectedRowIds: set,
+      rowId: "parent",
+      checked: true,
+      childRowIdsById,
+      itemDetails,
+      enableRowSelection: ({ row }) => !row.disabled,
+    });
+    expect(set.has("parent")).toBe(true);
+    expect(set.has("child1")).toBe(false);
+    expect(set.has("child1a")).toBe(true);
+    expect(set.has("child2")).toBe(true);
+  });
+
+  test("returns false when all matching rows were already disabled", () => {
+    const set = new Set<TableRowEntryId>();
+    const itemDetails = makeItemDetails([{ id: "a", rowData: {} }]);
+    const changed = mutateRowSelection({
+      selectedRowIds: set,
+      rowId: "a",
+      checked: true,
+      childRowIdsById: new Map(),
+      itemDetails,
+      enableRowSelection: false,
+    });
+    expect(set.size).toBe(0);
+    expect(changed).toBe(false);
+  });
+});

package/src/data/table/helpers/selection/selection.utils.ts

@@ -0,0 +1,73 @@
+import type { TableRowEntryId } from "../../root/DataTable.types";
+import type { ItemDetail } from "../collectTableRowEntries";
+import type { SelectionProps } from "./selection.types";
+
+function canSelectTableRow<T>(
+  enableRowSelection: SelectionProps<T>["enableRowSelection"],
+  args: { row: T; id: TableRowEntryId },
+): boolean {
+  if (typeof enableRowSelection === "function") {
+    return enableRowSelection(args);
+  }
+  return enableRowSelection ?? true;
+}
+
+type MutateRowSelectionArgs<T> = {
+  selectedRowIds: Set<TableRowEntryId>;
+  rowId: TableRowEntryId;
+  checked: boolean;
+  childRowIdsById: Map<TableRowEntryId, TableRowEntryId[]>;
+  itemDetails: Map<TableRowEntryId, ItemDetail<T>>;
+  enableRowSelection?: SelectionProps<T>["enableRowSelection"];
+};
+
+/**
+ * Traverses the row and its children and updates selected-state directly on given selectedRowIds set.
+ * Returns true if any changes were made to the set, false otherwise.
+ */
+function mutateRowSelection<T>({
+  selectedRowIds,
+  rowId,
+  checked,
+  childRowIdsById,
+  itemDetails,
+  enableRowSelection,
+}: MutateRowSelectionArgs<T>): boolean {
+  let changed = false;
+  const item = itemDetails.get(rowId);
+
+  if (
+    item &&
+    canSelectTableRow(enableRowSelection, { row: item.rowData, id: rowId })
+  ) {
+    if (checked && !selectedRowIds.has(rowId)) {
+      selectedRowIds.add(rowId);
+      changed = true;
+    } else if (!checked && selectedRowIds.has(rowId)) {
+      selectedRowIds.delete(rowId);
+      changed = true;
+    }
+  }
+
+  const children = childRowIdsById.get(rowId);
+  if (children) {
+    for (const childId of children) {
+      if (
+        mutateRowSelection({
+          selectedRowIds,
+          rowId: childId,
+          checked,
+          childRowIdsById,
+          itemDetails,
+          enableRowSelection,
+        })
+      ) {
+        changed = true;
+      }
+    }
+  }
+
+  return changed;
+}
+
+export { canSelectTableRow, mutateRowSelection };

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 = {
@@ -140,7 +141,7 @@ describe("useTableItems", () => {
           },
         }),
       {
-        initialProps: { expandedIds: [] as (string | number)[] },
+        initialProps: { expandedIds: [] as TableRowEntryId[] },
       },
     );
 

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/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,21 +84,21 @@ 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 ?? {
+  const { itemDetails } = tableContext?.tableItems ?? {
     itemDetails: new Map<
-      string | number,
-      { rowData: T; id: string | number; level: number }
+      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.values()) {
       /* We only allow Master - Details pattern on top level rows */
@@ -118,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;
       }
@@ -172,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,18 +1,34 @@
 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> = {
@@ -21,19 +37,19 @@ type UseTableItemsArgs<T> = {
   subRows?: SubRowsProps<T>;
 };
 
-type useTableItemsReturn<T> = {
+type UseTableItemsReturn<T> = {
   items: 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({
@@ -106,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)
@@ -122,17 +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>, "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

@@ -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;