@navikt/ds-react 8.8.0 → 8.9.0

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

@@ -0,0 +1,70 @@
+import type { CheckboxProps } from "../../../../form/checkbox/types";
+import type { SelectionT } from "./selection.types";
+
+type GetMultipleSelectPropsArgs = {
+  selectedKeys: SelectionT;
+  setSelectedKeys: (keys: SelectionT) => void;
+  disabledKeys: (string | number)[];
+  allKeys: (string | number)[];
+  totalCount: number;
+};
+
+function getMultipleSelectProps({
+  selectedKeys,
+  setSelectedKeys,
+  disabledKeys,
+  allKeys,
+  totalCount,
+}: GetMultipleSelectPropsArgs) {
+  const handleToggleAll = () => {
+    const allSelected =
+      selectedKeys === "all" ||
+      (Array.isArray(selectedKeys) && selectedKeys.length === totalCount);
+
+    setSelectedKeys(allSelected ? [] : allKeys);
+  };
+
+  const handleToggleRow = (key: string | number) => {
+    if (selectedKeys === "all") {
+      setSelectedKeys(allKeys.filter((id) => id !== key));
+    } else if (selectedKeys.includes(key)) {
+      setSelectedKeys(selectedKeys.filter((k) => k !== key));
+    } else {
+      setSelectedKeys([...selectedKeys, key]);
+    }
+  };
+
+  const isChecked = (key: string | number) =>
+    selectedKeys === "all" ||
+    (Array.isArray(selectedKeys) && selectedKeys.includes(key));
+
+  return {
+    getTheadCheckboxProps: (): CheckboxProps => {
+      const indeterminate =
+        Array.isArray(selectedKeys) &&
+        selectedKeys.length > 0 &&
+        selectedKeys.length < totalCount;
+
+      return {
+        children: "Select all rows",
+        onChange: handleToggleAll,
+        checked:
+          (selectedKeys === "all" ||
+            (Array.isArray(selectedKeys) && selectedKeys.length > 0)) &&
+          !indeterminate,
+        indeterminate,
+        disabled: disabledKeys.length === totalCount,
+        hideLabel: true,
+      };
+    },
+    getRowCheckboxProps: (key: string | number): CheckboxProps => ({
+      children: `Select row with id ${key}`,
+      onChange: () => handleToggleRow(key),
+      checked: isChecked(key),
+      disabled: disabledKeys.includes(key),
+      hideLabel: true,
+    }),
+  };
+}
+
+export { getMultipleSelectProps };

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

@@ -0,0 +1,33 @@
+import type { RadioProps } from "../../../../form/radio/types";
+
+type GetSingleSelectPropsArgs = {
+  selectedKeys: (string | number)[];
+  setSelectedKeys: (keys: (string | number)[]) => void;
+  disabledKeys: (string | number)[];
+};
+
+function getSingleSelectProps({
+  selectedKeys,
+  setSelectedKeys,
+  disabledKeys,
+}: GetSingleSelectPropsArgs) {
+  const handleSelectionChange = (key: string | number) => {
+    if (selectedKeys.includes(key)) {
+      setSelectedKeys([]);
+    } else {
+      setSelectedKeys([key]);
+    }
+  };
+
+  return {
+    getRowRadioProps: (key: string | number): RadioProps => ({
+      children: `Select row with id ${key}`,
+      checked: selectedKeys.includes(key),
+      onChange: () => handleSelectionChange(key),
+      disabled: disabledKeys.includes(key),
+      value: key,
+    }),
+  };
+}
+
+export { getSingleSelectProps };

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

@@ -0,0 +1,56 @@
+import type { CheckboxProps } from "../../../../form/checkbox/types";
+import type { RadioProps } from "../../../../form/radio/types";
+
+type SelectionT = (string | number)[] | "all";
+
+type SelectionProps = {
+  /**
+   * Enables selection of rows.
+   *
+   * When set to "single", only one row can be selected at a time (renders radio buttons).
+   *
+   * When set to "multiple", multiple rows can be selected (renders checkboxes).
+   *
+   * @default "none"
+   */
+  selectionMode?: "none" | "single" | "multiple";
+  selectedKeys?: SelectionT;
+  defaultSelectedKeys?: SelectionT;
+  onSelectionChange?: (keys: SelectionT) => void;
+  disabledKeys?: (string | number)[];
+};
+
+type NoneSelection = {
+  selectionMode: "none";
+  allKeys: (string | number)[];
+  selectedKeys: (string | number)[];
+  disabledKeys: (string | number)[];
+};
+
+type SingleSelection = {
+  selectionMode: "single";
+  allKeys: (string | number)[];
+  selectedKeys: (string | number)[];
+  disabledKeys: (string | number)[];
+  getRowRadioProps: (key: string | number) => RadioProps;
+};
+
+type MultipleSelection = {
+  selectionMode: "multiple";
+  allKeys: (string | number)[];
+  selectedKeys: SelectionT;
+  disabledKeys: (string | number)[];
+  getTheadCheckboxProps: () => CheckboxProps;
+  getRowCheckboxProps: (key: string | number) => CheckboxProps;
+};
+
+type TableSelection = NoneSelection | SingleSelection | MultipleSelection;
+
+export type {
+  MultipleSelection,
+  NoneSelection,
+  SelectionProps,
+  SelectionT,
+  SingleSelection,
+  TableSelection,
+};

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

@@ -0,0 +1,327 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import type {
+  MultipleSelection,
+  SingleSelection,
+} from "../../helpers/selection/selection.types";
+import { useTableSelection } from "../useTableSelection";
+
+type Item = { id: string; name: string };
+
+const items: Item[] = [
+  { id: "a", name: "Alpha" },
+  { id: "b", name: "Beta" },
+  { id: "c", name: "Charlie" },
+];
+
+const getRowId = (item: Item) => item.id;
+
+function asSingle(
+  result: ReturnType<typeof renderHook>["result"],
+): SingleSelection {
+  return result.current as SingleSelection;
+}
+
+function asMultiple(
+  result: ReturnType<typeof renderHook>["result"],
+): MultipleSelection {
+  return result.current as MultipleSelection;
+}
+
+describe("useTableSelection", () => {
+  describe('selectionMode="none"', () => {
+    test("returns empty selectedKeys and no prop getters", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "none",
+          data: items,
+          getRowId,
+        }),
+      );
+
+      expect(result.current.selectionMode).toBe("none");
+      expect(result.current.selectedKeys).toEqual([]);
+      expect(result.current.allKeys).toEqual(["a", "b", "c"]);
+    });
+  });
+
+  describe('selectionMode="single"', () => {
+    test("returns getRowRadioProps", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "single",
+          data: items,
+          getRowId,
+        }),
+      );
+
+      expect(result.current.selectionMode).toBe("single");
+      expect(asSingle(result).getRowRadioProps).toBeDefined();
+    });
+
+    test("selecting a row via radio onChange", () => {
+      const onChange = vi.fn();
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "single",
+          data: items,
+          getRowId,
+          onSelectionChange: onChange,
+        }),
+      );
+
+      const radioProps = asSingle(result).getRowRadioProps("a");
+      expect(radioProps.checked).toBe(false);
+
+      act(() => {
+        radioProps.onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asSingle(result).selectedKeys).toEqual(["a"]);
+    });
+
+    test("toggling the same row deselects it", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "single",
+          data: items,
+          getRowId,
+          defaultSelectedKeys: ["a"],
+        }),
+      );
+
+      act(() => {
+        asSingle(result)
+          .getRowRadioProps("a")
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asSingle(result).selectedKeys).toEqual([]);
+    });
+
+    test("selecting a new row replaces the previous", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "single",
+          data: items,
+          getRowId,
+          defaultSelectedKeys: ["a"],
+        }),
+      );
+
+      act(() => {
+        asSingle(result)
+          .getRowRadioProps("b")
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asSingle(result).selectedKeys).toEqual(["b"]);
+    });
+
+    test("disabled rows have disabled prop", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "single",
+          data: items,
+          getRowId,
+          disabledKeys: ["b"],
+        }),
+      );
+
+      expect(asSingle(result).getRowRadioProps("a").disabled).toBe(false);
+      expect(asSingle(result).getRowRadioProps("b").disabled).toBe(true);
+    });
+
+    test("controlled selectedKeys", () => {
+      const { result, rerender } = renderHook(
+        ({ selectedKeys }) =>
+          useTableSelection({
+            selectionMode: "single",
+            data: items,
+            getRowId,
+            selectedKeys,
+          }),
+        { initialProps: { selectedKeys: ["a"] as (string | number)[] } },
+      );
+
+      expect(asSingle(result).selectedKeys).toEqual(["a"]);
+
+      rerender({ selectedKeys: ["b"] });
+      expect(asSingle(result).selectedKeys).toEqual(["b"]);
+    });
+  });
+
+  describe('selectionMode="multiple"', () => {
+    test("returns getTheadCheckboxProps and getRowCheckboxProps", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          data: items,
+          getRowId,
+        }),
+      );
+
+      expect(result.current.selectionMode).toBe("multiple");
+      expect(asMultiple(result).getTheadCheckboxProps).toBeDefined();
+      expect(asMultiple(result).getRowCheckboxProps).toBeDefined();
+    });
+
+    test("selecting individual rows", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          data: items,
+          getRowId,
+        }),
+      );
+
+      act(() => {
+        asMultiple(result)
+          .getRowCheckboxProps("a")
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual(["a"]);
+
+      act(() => {
+        asMultiple(result)
+          .getRowCheckboxProps("c")
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual(["a", "c"]);
+    });
+
+    test("deselecting a row", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          data: items,
+          getRowId,
+          defaultSelectedKeys: ["a", "b"],
+        }),
+      );
+
+      act(() => {
+        asMultiple(result)
+          .getRowCheckboxProps("a")
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual(["b"]);
+    });
+
+    test("select all via thead checkbox", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          data: items,
+          getRowId,
+        }),
+      );
+
+      act(() => {
+        asMultiple(result)
+          .getTheadCheckboxProps()
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual(["a", "b", "c"]);
+    });
+
+    test("deselect all when all are selected", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          data: items,
+          getRowId,
+          defaultSelectedKeys: ["a", "b", "c"],
+        }),
+      );
+
+      act(() => {
+        asMultiple(result)
+          .getTheadCheckboxProps()
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual([]);
+    });
+
+    test("thead checkbox shows indeterminate when partially selected", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          data: items,
+          getRowId,
+          defaultSelectedKeys: ["a"],
+        }),
+      );
+
+      const theadProps = asMultiple(result).getTheadCheckboxProps();
+      expect(theadProps.indeterminate).toBe(true);
+      expect(theadProps.checked).toBe(false);
+    });
+
+    test("thead checkbox shows checked when all selected", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          data: items,
+          getRowId,
+          defaultSelectedKeys: ["a", "b", "c"],
+        }),
+      );
+
+      const theadProps = asMultiple(result).getTheadCheckboxProps();
+      expect(theadProps.indeterminate).toBe(false);
+      expect(theadProps.checked).toBe(true);
+    });
+
+    test("deselecting one row when selectedKeys is 'all'", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          data: items,
+          getRowId,
+          defaultSelectedKeys: "all",
+        }),
+      );
+
+      act(() => {
+        asMultiple(result)
+          .getRowCheckboxProps("b")
+          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
+      });
+
+      expect(asMultiple(result).selectedKeys).toEqual(["a", "c"]);
+    });
+
+    test("disabled rows have disabled prop", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          data: items,
+          getRowId,
+          disabledKeys: ["b"],
+        }),
+      );
+
+      expect(asMultiple(result).getRowCheckboxProps("a").disabled).toBe(false);
+      expect(asMultiple(result).getRowCheckboxProps("b").disabled).toBe(true);
+    });
+
+    test("thead checkbox disabled when all rows disabled", () => {
+      const { result } = renderHook(() =>
+        useTableSelection({
+          selectionMode: "multiple",
+          data: items,
+          getRowId,
+          disabledKeys: ["a", "b", "c"],
+        }),
+      );
+
+      expect(asMultiple(result).getTheadCheckboxProps().disabled).toBe(true);
+    });
+  });
+});

package/src/data/table/{root → hooks}/useTableKeyboardNav.ts

@@ -14,7 +14,7 @@ import {
   getNavigationAction,
   shouldBlockNavigation,
 } from "../helpers/table-keyboard";
-import { useGridCache } from "../hooks/useGridCache";
+import { useGridCache } from "./useGridCache";
 
 type UseTableKeyboardNavOptions = {
   enabled: boolean;

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

@@ -0,0 +1,78 @@
+import { useMemo } from "react";
+import { useControllableState } from "../../../utils/hooks";
+import { getMultipleSelectProps } from "../helpers/selection/getMultipleSelectProps";
+import { getSingleSelectProps } from "../helpers/selection/getSingleSelectProps";
+import type {
+  SelectionProps,
+  SelectionT,
+  TableSelection,
+} from "../helpers/selection/selection.types";
+
+type UseTableSelectionArgs<T> = SelectionProps & {
+  data: T[];
+  getRowId: (rowData: T, index: number) => string | number;
+};
+
+function useTableSelection<T>({
+  selectionMode = "none",
+  defaultSelectedKeys,
+  selectedKeys: selectedKeysProp,
+  onSelectionChange,
+  disabledKeys = [],
+  data,
+  getRowId,
+}: UseTableSelectionArgs<T>): TableSelection {
+  const allKeys = useMemo(
+    () => data.map((item, index) => getRowId(item, index)),
+    [data, getRowId],
+  );
+
+  const [selectedKeys, setSelectedKeys] = useControllableState<SelectionT>({
+    value: selectionMode !== "none" ? selectedKeysProp : undefined,
+    defaultValue: defaultSelectedKeys ?? [],
+    onChange: onSelectionChange,
+  });
+
+  if (selectionMode === "none") {
+    return { selectionMode, allKeys, selectedKeys: [], disabledKeys };
+  }
+
+  if (selectionMode === "single") {
+    const arrayKeys = Array.isArray(selectedKeys) ? selectedKeys : [];
+    const { getRowRadioProps } = getSingleSelectProps({
+      selectedKeys: arrayKeys,
+      setSelectedKeys,
+      disabledKeys,
+    });
+
+    return {
+      selectionMode,
+      allKeys,
+      selectedKeys: arrayKeys,
+      disabledKeys,
+      getRowRadioProps,
+    };
+  }
+
+  const { getTheadCheckboxProps, getRowCheckboxProps } = getMultipleSelectProps(
+    {
+      selectedKeys,
+      setSelectedKeys,
+      disabledKeys,
+      allKeys,
+      totalCount: data.length,
+    },
+  );
+
+  return {
+    selectionMode,
+    allKeys,
+    selectedKeys,
+    disabledKeys,
+    getTheadCheckboxProps,
+    getRowCheckboxProps,
+  };
+}
+
+export { useTableSelection };
+export type { SelectionProps, SelectionT };

package/src/data/table/root/DataTableAuto.tsx

@@ -1,7 +1,13 @@
+/** biome-ignore-all lint/correctness/useHookAtTopLevel: False positive because of the way forwardRef() is added */
 import React, { forwardRef, useState } from "react";
 import { Checkbox } from "../../../form/checkbox";
 import { cl } from "../../../utils/helpers";
 import { useMergeRefs } from "../../../utils/hooks";
+import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
+import {
+  type SelectionProps,
+  useTableSelection,
+} from "../hooks/useTableSelection";
 import { DataTableTbody } from "../tbody/DataTableTbody";
 import { DataTableTd } from "../td/DataTableTd";
 import { DataTableTh } from "../th/DataTableTh";
@@ -9,8 +15,6 @@ import { DataTableThead } from "../thead/DataTableThead";
 import { DataTableTr } from "../tr/DataTableTr";
 import type { ColumnDefinitions } from "./DataTable.types";
 import { DataTableContextProvider } from "./DataTableRoot.context";
-import { useTableKeyboardNav } from "./useTableKeyboardNav";
-import { type SelectionProps, useTableSelection } from "./useTableSelection";
 
 interface DataTableProps<T>
   extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
@@ -62,7 +66,8 @@ interface DataTableProps<T>
    *
    */
   columnDefinitions: ColumnDefinitions<T>;
-  data: (T & { id: string | number })[];
+  data: T[];
+  getRowId?: (rowData: T, index: number) => string | number;
 }
 
 function DataTableAutoInner<T>(
@@ -81,6 +86,7 @@ function DataTableAutoInner<T>(
     disabledKeys = [],
     data,
     columnDefinitions,
+    getRowId,
     ...rest
   }: DataTableProps<T>,
   forwardedRef: React.ForwardedRef<HTMLTableElement>,
@@ -93,15 +99,19 @@ function DataTableAutoInner<T>(
     shouldBlockNavigation,
   });
 
-  const { getTheadCheckboxProps, selectionMode, getRowCheckboxProps } =
-    useTableSelection({
-      selectionMode: selectionModeProp,
-      selectedKeys,
-      defaultSelectedKeys,
-      onSelectionChange,
-      disabledKeys,
-      data,
-    });
+  const resolvedGetRowId =
+    getRowId ??
+    (((_row: T, index: number) => index) as (rowData: T) => string | number);
+
+  const selection = useTableSelection({
+    selectionMode: selectionModeProp,
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+    disabledKeys,
+    data,
+    getRowId: resolvedGetRowId,
+  });
 
   return (
     <DataTableContextProvider layout={layout} withKeyboardNav={withKeyboardNav}>
@@ -119,14 +129,20 @@ function DataTableAutoInner<T>(
           >
             <DataTableThead>
               <DataTableTr>
-                {getTheadCheckboxProps && (
-                  <DataTableTd align="center" width="60px">
-                    <Checkbox {...getTheadCheckboxProps()} />
-                  </DataTableTd>
+                {selection.selectionMode === "multiple" && (
+                  /* TODO: Overflow/focus is clipped. Alignment is off */
+                  /* TODO: Should not be resizable */
+                  <DataTableTh textAlign="center" width="60px">
+                    <Checkbox {...selection.getTheadCheckboxProps()} />
+                  </DataTableTh>
+                )}
+                {selection.selectionMode === "single" && (
+                  <DataTableTd align="center" width="60px" />
                 )}
                 {columnDefinitions.map((colDef, colDefIndex) => {
                   return (
                     <DataTableTh
+                      /* TODO: Make these user-changable */
                       maxWidth="400px"
                       minWidth="100px"
                       defaultWidth="100%"
@@ -141,15 +157,22 @@ function DataTableAutoInner<T>(
             </DataTableThead>
             <DataTableTbody>
               {data.map((rowData, rowIndex) => {
+                const rowId = selection.allKeys[rowIndex];
                 return (
-                  <DataTableTr
-                    key={
-                      rowIndex /* TODO: Should be more flexible to allow user to define the key? */
-                    }
-                  >
-                    {selectionMode !== "none" && getRowCheckboxProps && (
+                  <DataTableTr key={rowId}>
+                    {selection.selectionMode === "multiple" && (
+                      <DataTableTd align="center" width="60px">
+                        <Checkbox {...selection.getRowCheckboxProps(rowId)} />
+                      </DataTableTd>
+                    )}
+                    {selection.selectionMode === "single" && (
                       <DataTableTd align="center" width="60px">
-                        <Checkbox {...getRowCheckboxProps(rowData.id)} />
+                        {/**
+                         * TODO: This should be a radio, but our current Radio implementation has some issues:
+                         * - Checked cant be controlled outside of radiogroup
+                         * - Cant hide label
+                         * */}
+                        <Checkbox {...selection.getRowRadioProps(rowId)} />
                       </DataTableTd>
                     )}
                     {columnDefinitions.map((colDef, colDefIndex) => {