@navikt/ds-react 8.7.0 → 8.9.0

package/src/data/table/helpers/table-keyboard.ts

@@ -52,7 +52,6 @@ function getNavigationAction(event: KeyboardEvent): NavigationAction | null {
  * - Select arrow down/up for opening popup
  * - User is navigating inside multiline textarea
  * - contenteditable attrb is in use
- * - element has attribute data-block-keyboard-nav="true"
  */
 function shouldBlockNavigation(event: KeyboardEvent): boolean {
   const key = event.key;
@@ -71,7 +70,7 @@ function shouldBlockNavigation(event: KeyboardEvent): boolean {
 
   /* If not any of these elements, assume "safe" to navigate */
   const editable = el.closest(
-    'input, textarea, select, [contenteditable="true"], [data-block-keyboard-nav="true"]',
+    'input, textarea, select, [contenteditable="true"]',
   );
 
   if (!editable) {
@@ -93,10 +92,7 @@ function shouldBlockNavigation(event: KeyboardEvent): boolean {
     return false;
   }
 
-  return (
-    editable.hasAttribute("contenteditable") ||
-    editable.hasAttribute("data-block-keyboard-nav")
-  );
+  return editable.hasAttribute("contenteditable");
 }
 
 function shouldBlockInputArrow(input: HTMLInputElement, key: string): boolean {

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;
@@ -130,6 +130,7 @@ function useTableKeyboardNav(
   /**
    * When focus is moved to elements inside a cell like inputs, checkbox etc
    * we want to update the active cell to the parent td/th, so that keyboard navigation continues to work as expected from there.
+   * Make sure td/th elements have tabIndex={-1} so they can receive focus on click
    */
   const handleTableFocusIn = useEventCallback((event: FocusEvent): void => {
     const target = event.target as Element | null;

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/loading-state/DataTableLoadingState.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type DataTableLoadingStateProps = React.HTMLAttributes<HTMLDivElement>;
+
+const DataTableLoadingState = forwardRef<
+  HTMLDivElement,
+  DataTableLoadingStateProps
+>(({ className, children, ...rest }, forwardedRef) => {
+  return (
+    <tr>
+      <td colSpan={999}>
+        <div
+          {...rest}
+          ref={forwardedRef}
+          className={cl("aksel-data-table__loading-state", className)}
+        >
+          {children}
+        </div>
+      </td>
+    </tr>
+  );
+});
+
+export { DataTableLoadingState };
+export type { DataTableLoadingStateProps };

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

@@ -0,0 +1,16 @@
+type ColumnDefinition<T> = {
+  id?: string;
+  header: React.ReactNode;
+  width?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+  /* isRowHeader?: boolean; */
+  /**
+   * TODO: Could add table/row/cell context into callback
+   */
+  cell: (item: T) => React.ReactNode;
+};
+
+type ColumnDefinitions<T> = ColumnDefinition<T>[];
+
+export type { ColumnDefinition, ColumnDefinitions };

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

@@ -0,0 +1,205 @@
+/** 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";
+import { DataTableThead } from "../thead/DataTableThead";
+import { DataTableTr } from "../tr/DataTableTr";
+import type { ColumnDefinitions } from "./DataTable.types";
+import { DataTableContextProvider } from "./DataTableRoot.context";
+
+interface DataTableProps<T>
+  extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {
+  children?: never;
+  /**
+   * Controls vertical cell padding.
+   * @default "normal"
+   */
+  rowDensity?: "condensed" | "normal" | "spacious";
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
+  /**
+   * Truncate content in cells and show ellipsis for overflowed text.
+   *
+   * **NB:** When using `layout="auto"`, you have to manually set a `maxWidth` on columns that should be truncated.
+   * @default true
+   */
+  truncateContent?: boolean; // TODO: Consider making this default false when layout=auto, and maybe disallow it but add a wrap prop on the td-comp.
+  /**
+   * Enables keyboard navigation for table rows and cells.
+   * @default false
+   */
+  withKeyboardNav?: boolean;
+  /**
+   * Custom callback to determine if navigation should be blocked.
+   * Called before default blocking logic.
+   * Requires `withKeyboardNav` to be `true`.
+   */
+  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
+  /**
+   * Controls table layout.
+   *
+   * ### fixed
+   * Gives you full control of column widths. This is required for resizable columns.
+   *
+   * ### auto
+   * Makes the columns resize automatically based on the content.
+   * The table will take up at least 100% of available width.
+   *
+   * **NB:** When using this with `truncateContent`, you have to manually
+   * set a `contentMaxWidth` on cells that should be truncated.
+   * @default "fixed"
+   */
+  layout?: "fixed" | "auto";
+  /**
+   *
+   */
+  columnDefinitions: ColumnDefinitions<T>;
+  data: T[];
+  getRowId?: (rowData: T, index: number) => string | number;
+}
+
+function DataTableAutoInner<T>(
+  {
+    className,
+    rowDensity = "normal",
+    withKeyboardNav = false,
+    zebraStripes = false,
+    truncateContent = true,
+    shouldBlockNavigation,
+    layout = "fixed",
+    selectionMode: selectionModeProp = "none",
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+    disabledKeys = [],
+    data,
+    columnDefinitions,
+    getRowId,
+    ...rest
+  }: DataTableProps<T>,
+  forwardedRef: React.ForwardedRef<HTMLTableElement>,
+) {
+  const [tableRef, setTableRef] = useState<HTMLTableElement | null>(null);
+  const mergedRef = useMergeRefs(forwardedRef, setTableRef);
+
+  const { tabIndex } = useTableKeyboardNav(tableRef, {
+    enabled: withKeyboardNav,
+    shouldBlockNavigation,
+  });
+
+  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}>
+      <div className="aksel-data-table__border-wrapper">
+        <div className="aksel-data-table__scroll-wrapper">
+          <table
+            {...rest}
+            ref={mergedRef}
+            className={cl("aksel-data-table", className)}
+            data-zebra-stripes={zebraStripes}
+            data-truncate-content={truncateContent}
+            data-density={rowDensity}
+            data-layout={layout}
+            tabIndex={tabIndex}
+          >
+            <DataTableThead>
+              <DataTableTr>
+                {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%"
+                      textAlign="left"
+                      key={colDef.id || colDefIndex}
+                    >
+                      {colDef.header}
+                    </DataTableTh>
+                  );
+                })}
+              </DataTableTr>
+            </DataTableThead>
+            <DataTableTbody>
+              {data.map((rowData, rowIndex) => {
+                const rowId = selection.allKeys[rowIndex];
+                return (
+                  <DataTableTr key={rowId}>
+                    {selection.selectionMode === "multiple" && (
+                      <DataTableTd align="center" width="60px">
+                        <Checkbox {...selection.getRowCheckboxProps(rowId)} />
+                      </DataTableTd>
+                    )}
+                    {selection.selectionMode === "single" && (
+                      <DataTableTd align="center" width="60px">
+                        {/**
+                         * 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) => {
+                      return (
+                        <DataTableTd
+                          textAlign="left"
+                          key={colDef.id || colDefIndex}
+                        >
+                          {colDef.cell(rowData)}
+                        </DataTableTd>
+                      );
+                    })}
+                  </DataTableTr>
+                );
+              })}
+            </DataTableTbody>
+          </table>
+        </div>
+      </div>
+    </DataTableContextProvider>
+  );
+}
+
+const DataTableAuto = forwardRef(DataTableAutoInner) as <T>(
+  props: DataTableProps<T> & React.RefAttributes<HTMLTableElement>,
+) => React.ReactElement | null;
+
+export { DataTableAuto };
+export type { DataTableProps };
+export default DataTableAuto;