@navikt/ds-react 8.10.5 → 8.11.0

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

@@ -1,488 +0,0 @@
-import { act, renderHook } from "@testing-library/react";
-import { describe, expect, test, vi } from "vitest";
-import type {
-  MultipleSelection,
-  SingleSelection,
-} from "../../helpers/selection/selection.types";
-import {
-  type UseTableSelectionReturn,
-  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 visibleRowIds = items.map((item) => item.id);
-const childRowIdsById = new Map<string | number, (string | number)[]>([
-  ["a", ["a1", "a2"]],
-  ["a1", []],
-  ["a2", ["a2a"]],
-  ["a2a", []],
-]);
-
-function asSingle(result: {
-  current: UseTableSelectionReturn;
-}): SingleSelection {
-  return result.current.selection as SingleSelection;
-}
-
-function asMultiple(result: {
-  current: UseTableSelectionReturn;
-}): MultipleSelection {
-  return result.current.selection as MultipleSelection;
-}
-
-describe("useTableSelection", () => {
-  describe('selectionMode="none"', () => {
-    test("returns empty selectedKeys and no prop getters", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: { selectionMode: "none" },
-          visibleRowIds,
-        }),
-      );
-
-      expect(result.current.selection.selectionMode).toBe("none");
-      expect(result.current.selection.selectedKeys).toEqual([]);
-    });
-  });
-
-  describe('selectionMode="single"', () => {
-    test("returns getRowRadioProps", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: { selectionMode: "single" },
-          visibleRowIds,
-        }),
-      );
-
-      expect(result.current.selection.selectionMode).toBe("single");
-      expect(asSingle(result).getRowRadioProps).toBeDefined();
-    });
-
-    test("selecting a row via radio onChange", () => {
-      const onChange = vi.fn();
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: { selectionMode: "single", onSelectionChange: onChange },
-          visibleRowIds,
-        }),
-      );
-
-      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 keeps it selected", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: { selectionMode: "single", defaultSelectedKeys: ["a"] },
-          visibleRowIds,
-        }),
-      );
-
-      act(() => {
-        asSingle(result)
-          .getRowRadioProps("a")
-          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
-      });
-
-      expect(asSingle(result).selectedKeys).toEqual(["a"]);
-    });
-
-    test("selecting a new row replaces the previous", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: { selectionMode: "single", defaultSelectedKeys: ["a"] },
-          visibleRowIds,
-        }),
-      );
-
-      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({
-          selection: { selectionMode: "single", disabledSelectionKeys: ["b"] },
-          visibleRowIds,
-        }),
-      );
-
-      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({
-            selection: { selectionMode: "single", selectedKeys },
-            visibleRowIds,
-          }),
-        { 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({
-          selection: { selectionMode: "multiple" },
-          visibleRowIds,
-        }),
-      );
-
-      expect(result.current.selection.selectionMode).toBe("multiple");
-      expect(asMultiple(result).getTheadCheckboxProps).toBeDefined();
-      expect(asMultiple(result).getRowCheckboxProps).toBeDefined();
-    });
-
-    test("selecting individual rows", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: { selectionMode: "multiple" },
-          visibleRowIds,
-        }),
-      );
-
-      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({
-          selection: {
-            selectionMode: "multiple",
-            defaultSelectedKeys: ["a", "b"],
-          },
-          visibleRowIds,
-        }),
-      );
-
-      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({
-          selection: { selectionMode: "multiple" },
-          visibleRowIds,
-        }),
-      );
-
-      act(() => {
-        asMultiple(result)
-          .getTheadCheckboxProps()
-          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
-      });
-
-      expect(asMultiple(result).selectedKeys).toEqual(["a", "b", "c"]);
-    });
-
-    test("select all via thead includes hidden descendants for visible parents", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: { selectionMode: "multiple" },
-          visibleRowIds: ["a"],
-          childRowIdsById,
-        }),
-      );
-
-      act(() => {
-        asMultiple(result)
-          .getTheadCheckboxProps()
-          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
-      });
-
-      expect(asMultiple(result).selectedKeys).toEqual(["a", "a1", "a2", "a2a"]);
-    });
-
-    test("deselect all when all are selected", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: {
-            selectionMode: "multiple",
-            defaultSelectedKeys: ["a", "b", "c"],
-          },
-          visibleRowIds,
-        }),
-      );
-
-      act(() => {
-        asMultiple(result)
-          .getTheadCheckboxProps()
-          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
-      });
-
-      expect(asMultiple(result).selectedKeys).toEqual([]);
-    });
-
-    test("deselect all clears hidden descendants for visible parents but preserves unrelated keys", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: {
-            selectionMode: "multiple",
-            defaultSelectedKeys: ["a", "a1", "a2", "a2a", "external"],
-          },
-          visibleRowIds: ["a"],
-          childRowIdsById,
-        }),
-      );
-
-      act(() => {
-        asMultiple(result)
-          .getTheadCheckboxProps()
-          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
-      });
-
-      expect(asMultiple(result).selectedKeys).toEqual(["external"]);
-    });
-
-    test("select all skips disabled keys", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: {
-            selectionMode: "multiple",
-            disabledSelectionKeys: ["b"],
-          },
-          visibleRowIds,
-        }),
-      );
-
-      act(() => {
-        asMultiple(result)
-          .getTheadCheckboxProps()
-          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
-      });
-
-      expect(asMultiple(result).selectedKeys).toEqual(["a", "c"]);
-    });
-
-    test("deselect all preserves disabled-but-selected rows", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: {
-            selectionMode: "multiple",
-            defaultSelectedKeys: ["a", "b", "c"],
-            disabledSelectionKeys: ["b"],
-          },
-          visibleRowIds,
-        }),
-      );
-
-      act(() => {
-        asMultiple(result)
-          .getTheadCheckboxProps()
-          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
-      });
-
-      expect(asMultiple(result).selectedKeys).toEqual(["b"]);
-    });
-
-    test("thead checkbox shows indeterminate when partially selected", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: { selectionMode: "multiple", defaultSelectedKeys: ["a"] },
-          visibleRowIds,
-        }),
-      );
-
-      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({
-          selection: {
-            selectionMode: "multiple",
-            defaultSelectedKeys: ["a", "b", "c"],
-          },
-          visibleRowIds,
-        }),
-      );
-
-      const theadProps = asMultiple(result).getTheadCheckboxProps();
-      expect(theadProps.indeterminate).toBe(false);
-      expect(theadProps.checked).toBe(true);
-    });
-
-    test("thead checkbox shows checked when all selectable rows are selected", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: {
-            selectionMode: "multiple",
-            defaultSelectedKeys: ["a", "c"],
-            disabledSelectionKeys: ["b"],
-          },
-          visibleRowIds,
-        }),
-      );
-
-      const theadProps = asMultiple(result).getTheadCheckboxProps();
-      expect(theadProps.indeterminate).toBe(false);
-      expect(theadProps.checked).toBe(true);
-    });
-
-    test("deselecting one row when all rows are selected", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: {
-            selectionMode: "multiple",
-            defaultSelectedKeys: ["a", "b", "c"],
-          },
-          visibleRowIds,
-        }),
-      );
-
-      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({
-          selection: {
-            selectionMode: "multiple",
-            disabledSelectionKeys: ["b"],
-          },
-          visibleRowIds,
-        }),
-      );
-
-      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({
-          selection: {
-            selectionMode: "multiple",
-            disabledSelectionKeys: ["a", "b", "c"],
-          },
-          visibleRowIds,
-        }),
-      );
-
-      expect(asMultiple(result).getTheadCheckboxProps().disabled).toBe(true);
-    });
-
-    test("parent rows show indeterminate when visible descendants are partially selected", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: { selectionMode: "multiple", defaultSelectedKeys: ["a1"] },
-          visibleRowIds: ["a", "a1", "a2"],
-          childRowIdsById,
-        }),
-      );
-
-      const parentProps = asMultiple(result).getRowCheckboxProps("a");
-
-      expect(parentProps.checked).toBe(false);
-      expect(parentProps.indeterminate).toBe(true);
-    });
-
-    test("toggling a parent row selects and deselects its descendants", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: { selectionMode: "multiple" },
-          visibleRowIds: ["a", "a1", "a2"],
-          childRowIdsById,
-        }),
-      );
-
-      act(() => {
-        asMultiple(result)
-          .getRowCheckboxProps("a")
-          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
-      });
-
-      expect(asMultiple(result).selectedKeys).toEqual(["a", "a1", "a2", "a2a"]);
-
-      act(() => {
-        asMultiple(result)
-          .getRowCheckboxProps("a")
-          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
-      });
-
-      expect(asMultiple(result).selectedKeys).toEqual([]);
-    });
-
-    test("toggling a collapsed parent selects and deselects hidden descendants", () => {
-      const { result } = renderHook(() =>
-        useTableSelection({
-          selection: { selectionMode: "multiple" },
-          visibleRowIds: ["a"],
-          childRowIdsById,
-        }),
-      );
-
-      act(() => {
-        asMultiple(result)
-          .getRowCheckboxProps("a")
-          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
-      });
-
-      expect(asMultiple(result).selectedKeys).toEqual(["a", "a1", "a2", "a2a"]);
-
-      act(() => {
-        asMultiple(result)
-          .getRowCheckboxProps("a")
-          .onChange?.({} as React.ChangeEvent<HTMLInputElement>);
-      });
-
-      expect(asMultiple(result).selectedKeys).toEqual([]);
-    });
-  });
-});

package/src/data/table/root/DataTable.types.ts

@@ -1,87 +0,0 @@
-import type { ResizeProps } from "../column-header/useTableColumnResize";
-
-type SortDirection = "asc" | "desc" | "none";
-
-/**
- * TODO:
- * - Consider "accessorKey" or similar to allow simple column definitions without a cell function.
- * - Add "align" property for better control over text alignment in cells.
- */
-type ColumnDefinition<T, DetailsT = Record<string, any>> = Pick<
-  ResizeProps,
-  | "resizable"
-  | "width"
-  | "defaultWidth"
-  | "autoWidth"
-  | "minWidth"
-  | "maxWidth"
-  | "onWidthChange"
-> & {
-  id: string;
-  /**
-   * Text alignment for cells in this column.
-   *
-   *
-   * @default "left"
-   */
-  align?: "left" | "right" | "center";
-  /**
-   * Assigned to the cell's `th` element instead of `td` if true.
-   *
-   * Should be used for cells that act as row headers. Each row should have one rowheader, and only have one cell with `isRowHeader: true`,
-   */
-  isRowHeader?: boolean;
-  /**
-   * Renders table header-cell
-   */
-  header?: React.ReactNode;
-  /**
-   * Renders table-cell
-   */
-  cell: (item: T) => React.ReactNode;
-  /**
-   * Label of header. Renders if header is not provided.
-   */
-  label: string;
-  /**
-   * Makes the column sortable. Renders the header as a sort button.
-   * Use `sort` and `onSortChange` on the root component to control sort state.
-   */
-  sortable?: boolean;
-  /**
-   * Additional metadata that can be used for filtering or other purposes. Not used by the table itself.
-   */
-  details?: DetailsT;
-};
-
-type ColumnDefinitions<T, DetailsT = Record<string, any>> = ColumnDefinition<
-  T,
-  DetailsT
->[];
-
-/**
- * A single sort entry representing a column's current sort state.
- * Absent from the `sort` array means the column is unsorted.
- */
-type SortEntry = {
-  columnId: string;
-  direction: "asc" | "desc";
-};
-
-/**
- * The column that changed in a sort operation, passed as the second argument
- * to `onSortChange`. Useful for triggering targeted server-side sort requests.
- */
-type SortChangeDetail = {
-  columnId: string;
-  /** The new direction for this column. `"none"` means the column was removed from the sort. */
-  direction: "asc" | "desc" | "none";
-};
-
-export type {
-  ColumnDefinition,
-  ColumnDefinitions,
-  SortDirection,
-  SortEntry,
-  SortChangeDetail,
-};