@navikt/ds-react 8.10.4 → 8.10.6

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

@@ -1,107 +1,87 @@
+import type { ChangeEventHandler, SetStateAction } from "react";
 import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
-import { SelectionSubtreeHelper } from "./SelectionSubtreeHelper";
-
-type GetMultipleSelectPropsArgs = {
-  selectedKeysSet: Set<string | number>;
-  selectedKeys: (string | number)[];
-  setSelectedKeys: (keys: (string | number)[]) => void;
-  disabledKeysSet: Set<string | number>;
-  visibleRowIds: (string | number)[];
-  childRowIdsById?: Map<string | number, (string | number)[]>;
-};
-
-function getMultipleSelectProps({
+import { consoleWarning } from "../../../../utils/helpers/consoleWarning";
+import type { UseTableItemsReturn } from "../../hooks/useTableItems";
+import type { TableRowEntryId } from "../../root/DataTable.types";
+import type { SelectedKeysT, SelectionProps } from "./selection.types";
+import { canSelectTableRow, mutateRowSelection } from "./selection.utils";
+
+type GetMultipleSelectPropsArgs<T> = {
+  selectedKeysSet: Set<TableRowEntryId>;
+  selectedKeys: SelectedKeysT;
+  setSelectedKeys: (next: SetStateAction<SelectedKeysT>) => void;
+  tableItems: UseTableItemsReturn<T>;
+} & Pick<SelectionProps<T>, "enableRowSelection">;
+
+function getMultipleSelectProps<T>({
   selectedKeysSet,
   selectedKeys,
   setSelectedKeys,
-  disabledKeysSet,
-  visibleRowIds,
-  childRowIdsById,
-}: GetMultipleSelectPropsArgs) {
-  const subtreeHelper = new SelectionSubtreeHelper({
-    childRowIdsById,
-    disabledKeysSet,
-    selectedKeysSet,
-  });
-
-  // Header selection traverses the visible roots and skips already visited
-  // descendants, so expanded trees stay linear in the number of rows.
-  const headerSelectableKeys = subtreeHelper.getSelectableKeys(visibleRowIds);
-  const headerSelectableKeysSet = new Set(headerSelectableKeys);
-
-  const selectedSelectableCount = headerSelectableKeys.filter((k) =>
-    selectedKeysSet.has(k),
-  ).length;
-
-  const allSelectableSelected =
-    headerSelectableKeys.length > 0 &&
-    selectedSelectableCount === headerSelectableKeys.length;
-
-  const indeterminate =
-    selectedSelectableCount > 0 &&
-    selectedSelectableCount < headerSelectableKeys.length;
-
-  const selectedKeysNotInView = selectedKeys.filter(
-    (k) => !headerSelectableKeysSet.has(k),
-  );
-  const disabledSelected = selectedKeys.filter((k) => disabledKeysSet.has(k));
-  const preservedKeys = [
-    ...new Set([...selectedKeysNotInView, ...disabledSelected]),
-  ];
+  enableRowSelection,
+  tableItems,
+}: GetMultipleSelectPropsArgs<T>) {
+  const selectableIdsSet: Set<TableRowEntryId> = new Set();
+
+  for (const [id, { rowData }] of tableItems.itemDetails) {
+    if (canSelectTableRow(enableRowSelection, { row: rowData, id })) {
+      selectableIdsSet.add(id);
+    }
+  }
 
-  const isGroupFullySelected = (key: string | number) => {
-    const groupStats = subtreeHelper.getSelectionStats(key);
+  let selectedOnPageCount = 0;
+  for (const id of selectableIdsSet) {
+    selectedKeysSet.has(id) && selectedOnPageCount++;
+  }
 
-    return (
-      groupStats.selectableCount > 0 &&
-      groupStats.selectedCount === groupStats.selectableCount
-    );
-  };
+  const isAllSelected =
+    selectableIdsSet.size > 0 && selectedOnPageCount === selectableIdsSet.size;
+  const someSelected = selectedOnPageCount > 0;
 
-  const handleToggleAll = () => {
-    if (allSelectableSelected) {
-      setSelectedKeys(preservedKeys);
-    } else {
-      setSelectedKeys([
-        ...new Set([...preservedKeys, ...headerSelectableKeys]),
-      ]);
+  const handleToggleRow = (key: TableRowEntryId, row: T) => {
+    if (!row) {
+      consoleWarning(
+        `Row data is undefined for key ${key}. This may cause issues with selection if enableRowSelection is used.`,
+      );
     }
-  };
 
-  const handleToggleRow = (key: string | number) => {
-    if (disabledKeysSet.has(key)) {
-      return;
+    const checked = !selectedKeysSet.has(key);
+    const nextSet = new Set(selectedKeysSet);
+    const changed = mutateRowSelection({
+      selectedRowIds: nextSet,
+      rowId: key,
+      checked,
+      childRowIdsById: tableItems.childRowIdsById,
+      itemDetails: tableItems.itemDetails,
+      enableRowSelection,
+    });
+    if (changed) {
+      setSelectedKeys([...nextSet]);
     }
+  };
 
-    const groupKeys = subtreeHelper.getSelectableKeys([key]);
-
-    if (isGroupFullySelected(key)) {
-      const groupKeysSet = new Set(groupKeys);
-      setSelectedKeys(
-        selectedKeys.filter((selectedKey) => !groupKeysSet.has(selectedKey)),
-      );
+  const toggleAllRowSelected: ChangeEventHandler<HTMLInputElement> = (
+    event,
+  ) => {
+    if (event.target.checked) {
+      const preserved = selectedKeys.filter((k) => !selectableIdsSet.has(k));
+      setSelectedKeys([...preserved, ...selectableIdsSet]);
     } else {
-      setSelectedKeys([...new Set([...selectedKeys, ...groupKeys])]);
+      setSelectedKeys(selectedKeys.filter((k) => !selectableIdsSet.has(k)));
     }
   };
 
   return {
     getTheadCheckboxProps: (): CheckboxInputProps => ({
-      onChange: handleToggleAll,
-      checked: allSelectableSelected,
-      indeterminate,
-      disabled: headerSelectableKeys.length === 0,
+      checked: isAllSelected,
+      indeterminate: !isAllSelected && someSelected,
+      onChange: toggleAllRowSelected,
     }),
-    getRowCheckboxProps: (key: string | number): CheckboxInputProps => {
-      const groupStats = subtreeHelper.getSelectionStats(key);
-
+    getRowCheckboxProps: (key: TableRowEntryId, row: T): CheckboxInputProps => {
       return {
-        onChange: () => handleToggleRow(key),
-        checked: isGroupFullySelected(key),
-        indeterminate:
-          groupStats.selectedCount > 0 &&
-          groupStats.selectedCount < groupStats.selectableCount,
-        disabled: disabledKeysSet.has(key),
+        onChange: () => handleToggleRow(key, row),
+        checked: selectedKeysSet.has(key),
+        indeterminate: false,
+        disabled: !canSelectTableRow(enableRowSelection, { row, id: key }),
       };
     },
     toggleSelection: handleToggleRow,

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

@@ -1,33 +1,51 @@
 import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
+import { consoleWarning } from "../../../../utils/helpers/consoleWarning";
+import type { TableRowEntryId } from "../../root/DataTable.types";
+import type { SelectedKeysT, SelectionProps } from "./selection.types";
+import { canSelectTableRow } from "./selection.utils";
 
-type GetSingleSelectPropsArgs = {
-  selectedKeysSet: Set<string | number>;
-  setSelectedKeys: (keys: (string | number)[]) => void;
-  disabledKeysSet: Set<string | number>;
+type GetSingleSelectPropsArgs<T> = {
+  selectedKeysSet: Set<TableRowEntryId>;
+  setSelectedKeys: (keys: SelectedKeysT) => void;
   name: string;
-};
+} & Pick<SelectionProps<T>, "enableRowSelection">;
 
-function getSingleSelectProps({
+function getSingleSelectProps<T>({
   selectedKeysSet,
   setSelectedKeys,
-  disabledKeysSet,
   name,
-}: GetSingleSelectPropsArgs) {
-  const handleSelectionChange = (key: string | number) => {
-    if (disabledKeysSet.has(key)) {
+  enableRowSelection,
+}: GetSingleSelectPropsArgs<T>) {
+  const handleSelectionChange = (key: TableRowEntryId, row: T) => {
+    if (!row) {
+      consoleWarning(
+        `Row data is undefined for key ${key}. This may cause issues with selection if enableRowSelection is used.`,
+      );
+    }
+    if (!canSelectTableRow(enableRowSelection, { row, id: key })) {
       return;
     }
+
     setSelectedKeys([key]);
   };
 
   return {
-    getRowRadioProps: (key: string | number): RadioInputProps => ({
-      checked: selectedKeysSet.has(key),
-      onChange: () => handleSelectionChange(key),
-      disabled: disabledKeysSet.has(key),
-      value: key,
-      name,
-    }),
+    getRowRadioProps: (key: TableRowEntryId, row: T): RadioInputProps => {
+      const isSelectionDisabled = !canSelectTableRow(enableRowSelection, {
+        row,
+        id: key,
+      });
+
+      return {
+        checked: selectedKeysSet.has(key),
+        onChange: isSelectionDisabled
+          ? () => null
+          : () => handleSelectionChange(key, row),
+        disabled: isSelectionDisabled,
+        value: key,
+        name,
+      };
+    },
     toggleSelection: handleSelectionChange,
   };
 }

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

@@ -1,9 +1,11 @@
 import type { CheckboxInputProps } from "../../../../form/checkbox/checkbox-input/CheckboxInput";
 import type { RadioInputProps } from "../../../../form/radio/radio-input/RadioInput";
+import type { TableRowEntryId } from "../../root/DataTable.types";
 
-type SelectedKeysT = (string | number)[];
+type SelectedKeysT = TableRowEntryId[];
 
-type SelectionProps = {
+// TODO: Remove `any` if possible
+type SelectionProps<T = any> = {
   /**
    * Enables selection of rows.
    *
@@ -14,7 +16,7 @@ type SelectionProps = {
    *
    * @default "none"
    */
-  selectionMode?: "none" | "single" | "multiple";
+  selectionMode: "none" | "single" | "multiple";
   /**
    * Controlled selected keys. Should be used in conjunction with `onSelectionChange`.
    */
@@ -28,45 +30,43 @@ type SelectionProps = {
    */
   onSelectionChange?: (keys: SelectedKeysT) => void;
   /**
-   * Keys that should be disabled for selection. These keys will not be selectable and will be styled as disabled.
+   * Callback to determine if a row should be enabled for selection.
    *
    *
-   * TODO: Consider making this optionally a callback with (rowData:T) => boolean, to allow for more dynamic disabling of selection based on row data.
+   * If set to a boolean, it will enable selection for all rows when true, and disable selection for all rows when false.
    */
-  disabledSelectionKeys?: SelectedKeysT;
+  enableRowSelection?:
+    | (({ row, id }: { row: T; id: TableRowEntryId }) => boolean)
+    | boolean;
   /**
-   * If true, stops clicking a row from toggling its selection state. This can be used if you want to only allow selection through the checkboxes/radios, and not have the entire row be clickable for selection.
-   *
-   * @default false
+   * Determines if selection is triggered by clicking the row or the selection control (checkbox/radio).
+   * @default "row"
    */
-  disableRowSelectionOnClick?: boolean;
+  selectionTrigger?: "row" | "control";
 };
 
 type NoneSelection = {
   selectionMode: "none";
   selectedKeys: SelectedKeysT;
-  disabledSelectionKeys: SelectedKeysT;
 };
 
 type SingleSelection = {
   selectionMode: "single";
   selectedKeys: SelectedKeysT;
-  disabledSelectionKeys: SelectedKeysT;
-  getRowRadioProps: (key: string | number) => RadioInputProps;
-  toggleSelection: (key: string | number) => void;
+  getRowRadioProps: (key: TableRowEntryId, row: any) => RadioInputProps;
+  toggleSelection: (key: TableRowEntryId, row: any) => void;
 };
 
 type MultipleSelection = {
   selectionMode: "multiple";
   selectedKeys: SelectedKeysT;
-  disabledSelectionKeys: SelectedKeysT;
   getTheadCheckboxProps: () => CheckboxInputProps;
-  getRowCheckboxProps: (key: string | number) => CheckboxInputProps;
-  toggleSelection: (key: string | number) => void;
+  getRowCheckboxProps: (key: TableRowEntryId, row: any) => CheckboxInputProps;
+  toggleSelection: (key: TableRowEntryId, row: any) => void;
 };
 
 type TableSelectionBase = {
-  isRowSelected: (rowId: string | number) => boolean;
+  isRowSelected: (rowId: TableRowEntryId) => boolean;
 };
 
 type TableSelection = TableSelectionBase &
@@ -75,8 +75,8 @@ type TableSelection = TableSelectionBase &
 export type {
   MultipleSelection,
   NoneSelection,
+  SelectedKeysT,
   SelectionProps,
   SingleSelection,
   TableSelection,
-  SelectedKeysT,
 };

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/helpers/table-focus.ts

@@ -121,16 +121,70 @@ function prepareCellFocus(cell: Element): HTMLElement | null {
 /**
  * Applies focus and scroll to an element.
  */
+function getStickyOffsets(element: HTMLElement): {
+  stickyOffsetStart: number;
+  stickyOffsetEnd: number;
+  stickyHeaderHeight: number;
+} {
+  const table = element.closest(".aksel-data-table");
+
+  if (!table) {
+    return {
+      stickyOffsetStart: 0,
+      stickyOffsetEnd: 0,
+      stickyHeaderHeight: 0,
+    };
+  }
+
+  const stickyHeader = table.querySelector<HTMLElement>(
+    `.aksel-data-table__tr[data-sticky="true"]`,
+  );
+
+  const stickyNodesStart = table.querySelectorAll<HTMLElement>(
+    `.aksel-data-table__column-header[data-sticky="start"]`,
+  );
+
+  const stickyNodesEnd = table.querySelectorAll<HTMLElement>(
+    `.aksel-data-table__column-header[data-sticky="end"]`,
+  );
+
+  return {
+    stickyOffsetStart: Array.from(stickyNodesStart).reduce(
+      (offset, node) => offset + node.getBoundingClientRect().width,
+      0,
+    ),
+    stickyOffsetEnd: Array.from(stickyNodesEnd).reduce(
+      (offset, node) => offset + node.getBoundingClientRect().width,
+      0,
+    ),
+    stickyHeaderHeight: stickyHeader?.getBoundingClientRect().height ?? 0,
+  };
+}
+
 function applyFocusAndScroll(element: HTMLElement): void {
-  element.focus({
-    preventScroll: true,
-  });
-
-  element.scrollIntoView({
-    behavior: "smooth",
-    block: "nearest",
-    inline: "nearest",
-  });
+  const { stickyOffsetStart, stickyOffsetEnd, stickyHeaderHeight } =
+    getStickyOffsets(element);
+
+  const originalScrollMarginInline = element.style.scrollMarginInline;
+  const originalScrollMarginBlockStart = element.style.scrollMarginBlockStart;
+
+  element.style.scrollMarginInline = `${stickyOffsetStart}px ${stickyOffsetEnd}px`;
+  element.style.scrollMarginBlockStart = `${stickyHeaderHeight}px`;
+
+  try {
+    element.focus({
+      preventScroll: true,
+    });
+
+    element.scrollIntoView({
+      behavior: "auto",
+      block: "nearest",
+      inline: "nearest",
+    });
+  } finally {
+    element.style.scrollMarginBlockStart = originalScrollMarginBlockStart;
+    element.style.scrollMarginInline = originalScrollMarginInline;
+  }
 }
 
 /**