@navikt/ds-react 8.3.0 → 8.4.1

package/src/data/table/helpers/table-grid-nav.ts

@@ -0,0 +1,112 @@
+import { getFocusableTarget } from "./table-focus";
+
+/**
+ * Builds a utility grid allowing for easier keyboard-navigation between cells on columns and rows
+ */
+function buildTableGrid(tableRef: HTMLTableElement): {
+  grid: (Element | undefined)[][];
+  positions: Map<Element, { x: number; y: number }>;
+  maxCols: number;
+} {
+  const rows = tableRef.rows;
+  const grid: (Element | undefined)[][] = [];
+  const positions = new Map<Element, { x: number; y: number }>();
+  let maxCols = 0;
+
+  /* Walk trough each row in order */
+  for (let rowIndex = 0; rowIndex < rows.length; rowIndex += 1) {
+    const row = rows[rowIndex];
+    const cells = row.cells;
+    if (!grid[rowIndex]) {
+      grid[rowIndex] = [];
+    }
+
+    let colIndex = 0;
+
+    /* Walk trough each cell in row */
+    for (let cellIndex = 0; cellIndex < cells.length; cellIndex += 1) {
+      const cell = cells[cellIndex];
+
+      /* Skip over slots already occupied by previous row/col spans. */
+      while (grid[rowIndex][colIndex]) {
+        colIndex += 1;
+      }
+
+      const colSpan = Math.max(cell.colSpan || 1, 1);
+      const rowSpan = Math.max(cell.rowSpan || 1, 1);
+
+      /* Fill the grid with references to this cell for its row/col span. */
+      for (let y = rowIndex; y < rowIndex + rowSpan; y += 1) {
+        if (!grid[y]) {
+          grid[y] = [];
+        }
+        for (let x = colIndex; x < colIndex + colSpan; x += 1) {
+          grid[y][x] = cell;
+        }
+      }
+
+      /* Track the top-left coordinate for each unique cell. */
+      if (!positions.has(cell)) {
+        positions.set(cell, { x: colIndex, y: rowIndex });
+      }
+
+      colIndex += colSpan;
+      if (colIndex > maxCols) {
+        maxCols = colIndex;
+      }
+    }
+  }
+
+  return { grid, positions, maxCols };
+}
+
+type TableGrid = ReturnType<typeof buildTableGrid>;
+
+type GridCache = { grid: TableGrid | null; dirty: boolean };
+
+/**
+ * Makes sure to keep a cached version of the table grid, and only rebuild it when necessary (when "dirty" flag is set)
+ */
+function ensureTableGrid(
+  tableRef: HTMLTableElement,
+  tableGridCache: GridCache,
+): TableGrid {
+  if (tableGridCache.dirty || !tableGridCache.grid) {
+    tableGridCache.grid = buildTableGrid(tableRef);
+    tableGridCache.dirty = false;
+  }
+
+  return tableGridCache.grid;
+}
+
+/**
+ * Finds the next cell in the given direction, starting from the current position.
+ * Skips over cells that are not focusable or are the same as the current cell.
+ * Returns null if no next cell is found in the given direction.
+ */
+function findNextCell(
+  grid: (Element | undefined)[][],
+  currentPos: { x: number; y: number },
+  delta: { x: number; y: number },
+  currentCell: Element,
+  maxCols: number,
+): Element | null {
+  let x = currentPos.x + delta.x;
+  let y = currentPos.y + delta.y;
+
+  const maxRows = grid.length;
+
+  while (y >= 0 && y < maxRows && x >= 0 && x < maxCols) {
+    const row = grid[y] ?? [];
+    const cell = row[x];
+    if (cell && cell !== currentCell && !!getFocusableTarget(cell)) {
+      return cell;
+    }
+    x += delta.x;
+    y += delta.y;
+  }
+
+  return null;
+}
+
+export { buildTableGrid, ensureTableGrid, findNextCell, type GridCache };

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

@@ -0,0 +1,247 @@
+import { describe, expect, test } from "vitest";
+import { shouldBlockArrowKeyNavigation } from "./table-keyboard";
+
+describe("shouldBlockArrowKeyNavigation", () => {
+  test("should return false for non-arrow keys", () => {
+    const event = new KeyboardEvent("keydown", { key: "Enter" });
+    Object.defineProperty(event, "target", {
+      value: document.createElement("div"),
+    });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+  });
+
+  test("should return false when target is null", () => {
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    Object.defineProperty(event, "target", { value: null });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+  });
+
+  test("should return false for non-editable elements", () => {
+    const div = document.createElement("div");
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    Object.defineProperty(event, "target", { value: div });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+  });
+
+  test("should return true when target is contentEditable", () => {
+    const div = document.createElement("div");
+    div.setAttribute("contenteditable", "true");
+    document.body.appendChild(div);
+
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    Object.defineProperty(event, "target", { value: div });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+
+    document.body.removeChild(div);
+  });
+
+  test("should return true when target is inside contentEditable", () => {
+    const parent = document.createElement("div");
+    parent.setAttribute("contenteditable", "true");
+    const child = document.createElement("span");
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+
+    const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
+    Object.defineProperty(event, "target", { value: child });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+
+    document.body.removeChild(parent);
+  });
+
+  test("should return false for checkbox input", () => {
+    const input = document.createElement("input");
+    input.type = "checkbox";
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    Object.defineProperty(event, "target", { value: input });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+  });
+
+  test("should return false for radio input", () => {
+    const input = document.createElement("input");
+    input.type = "radio";
+    const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
+    Object.defineProperty(event, "target", { value: input });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+  });
+
+  test("should return false for non-text input types", () => {
+    const input = document.createElement("input");
+    input.type = "button";
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    Object.defineProperty(event, "target", { value: input });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+  });
+
+  test("should return true for text input when selectionStart is null", () => {
+    const input = document.createElement("input");
+    input.type = "text";
+    Object.defineProperty(input, "selectionStart", {
+      value: null,
+      configurable: true,
+    });
+    Object.defineProperty(input, "selectionEnd", {
+      value: null,
+      configurable: true,
+    });
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    Object.defineProperty(event, "target", { value: input });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+  });
+
+  test("should block ArrowLeft when cursor is not at start of text input", () => {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.value = "test";
+    input.setSelectionRange(2, 2);
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    Object.defineProperty(event, "target", { value: input });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+  });
+
+  test("should not block ArrowLeft when cursor is at start of text input", () => {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.value = "test";
+    input.setSelectionRange(0, 0);
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    Object.defineProperty(event, "target", { value: input });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+  });
+
+  test("should block ArrowRight when cursor is not at end of text input", () => {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.value = "test";
+    input.setSelectionRange(2, 2);
+    const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
+    Object.defineProperty(event, "target", { value: input });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+  });
+
+  test("should not block ArrowRight when cursor is at end of text input", () => {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.value = "test";
+    input.setSelectionRange(4, 4);
+    const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
+    Object.defineProperty(event, "target", { value: input });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+  });
+
+  test("should block ArrowLeft when text is selected in input", () => {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.value = "test";
+    input.setSelectionRange(0, 2);
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    Object.defineProperty(event, "target", { value: input });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+  });
+
+  test("should block ArrowRight when text is selected in input", () => {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.value = "test";
+    input.setSelectionRange(1, 3);
+    const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
+    Object.defineProperty(event, "target", { value: input });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+  });
+
+  test("should handle various text input types", () => {
+    /**
+     * Email and number types are excluded since "setSelectionRange" does not work.
+     */
+    const types = ["text", "search", "url", "tel", "password"];
+    types.forEach((type) => {
+      const input = document.createElement("input");
+      input.type = type;
+      input.value = "test";
+      input.setSelectionRange(2, 2);
+      const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+      Object.defineProperty(event, "target", { value: input });
+      expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+    });
+  });
+
+  test("should block ArrowUp when cursor is not at start of textarea", () => {
+    const textarea = document.createElement("textarea");
+    textarea.value = "line1\nline2";
+    textarea.setSelectionRange(5, 5);
+    const event = new KeyboardEvent("keydown", { key: "ArrowUp" });
+    Object.defineProperty(event, "target", { value: textarea });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+  });
+
+  test("should not block ArrowUp when cursor is at start of textarea", () => {
+    const textarea = document.createElement("textarea");
+    textarea.value = "line1\nline2";
+    textarea.setSelectionRange(0, 0);
+    const event = new KeyboardEvent("keydown", { key: "ArrowUp" });
+    Object.defineProperty(event, "target", { value: textarea });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+  });
+
+  test("should block ArrowDown when cursor is not at end of textarea", () => {
+    const textarea = document.createElement("textarea");
+    textarea.value = "line1\nline2";
+    textarea.setSelectionRange(5, 5);
+    const event = new KeyboardEvent("keydown", { key: "ArrowDown" });
+    Object.defineProperty(event, "target", { value: textarea });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+  });
+
+  test("should not block ArrowDown when cursor is at end of textarea", () => {
+    const textarea = document.createElement("textarea");
+    textarea.value = "line1\nline2";
+    textarea.setSelectionRange(11, 11);
+    const event = new KeyboardEvent("keydown", { key: "ArrowDown" });
+    Object.defineProperty(event, "target", { value: textarea });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+  });
+
+  test("should return true for select with ArrowDown", () => {
+    const select = document.createElement("select");
+    const event = new KeyboardEvent("keydown", { key: "ArrowDown" });
+    Object.defineProperty(event, "target", { value: select });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+  });
+
+  test("should return true for select with ArrowUp", () => {
+    const select = document.createElement("select");
+    const event = new KeyboardEvent("keydown", { key: "ArrowUp" });
+    Object.defineProperty(event, "target", { value: select });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+  });
+
+  test("should return false for select with ArrowLeft", () => {
+    const select = document.createElement("select");
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    Object.defineProperty(event, "target", { value: select });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+  });
+
+  test("should return false for select with ArrowRight", () => {
+    const select = document.createElement("select");
+    const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
+    Object.defineProperty(event, "target", { value: select });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+  });
+
+  test("should handle element inside editable parent", () => {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.value = "test";
+    input.setSelectionRange(2, 2);
+    const wrapper = document.createElement("div");
+    wrapper.appendChild(input);
+    document.body.appendChild(wrapper);
+
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    Object.defineProperty(event, "target", { value: input });
+    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+
+    document.body.removeChild(wrapper);
+  });
+});

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

@@ -0,0 +1,126 @@
+const keyToCoord = {
+  ArrowUp: { x: 0, y: -1 },
+  ArrowDown: { x: 0, y: 1 },
+  ArrowLeft: { x: -1, y: 0 },
+  ArrowRight: { x: 1, y: 0 },
+} as const;
+
+type DirectionsT = keyof typeof keyToCoord;
+type Delta = { x: number; y: number };
+
+function getDeltaFromKey(key: string): Delta | null {
+  if (key in keyToCoord) {
+    return keyToCoord[key as DirectionsT];
+  }
+
+  return null;
+}
+
+/**
+ * Tries to make assumptions of what the user is currently doing inside a table cell
+ * Should block navigation if:
+ * - Input has selection, caret is not at start/end
+ * - Select arrow down/up for opening popup
+ * - User is navigating inside multiline textarea
+ * - contenteditable attrb is in use
+ */
+function shouldBlockArrowKeyNavigation(event: KeyboardEvent): boolean {
+  const key = event.key;
+  if (!(key in keyToCoord)) {
+    return false;
+  }
+
+  const el = event.target as HTMLElement | null;
+  if (!el) {
+    return false;
+  }
+
+  if (el.isContentEditable) {
+    return true;
+  }
+
+  /* If not any of these elements, assueme "safe" to navigate */
+  const editable = el.closest(
+    'input, textarea, select, [contenteditable="true"]',
+  );
+
+  if (!editable) {
+    return false;
+  }
+
+  if (editable instanceof HTMLInputElement) {
+    return shouldBlockInputArrow(editable, key);
+  }
+
+  if (editable instanceof HTMLTextAreaElement) {
+    return shouldBlockTextAreaArrow(editable, key);
+  }
+
+  if (editable instanceof HTMLSelectElement) {
+    if (key === "ArrowDown" || key === "ArrowUp") {
+      return true;
+    }
+    return false;
+  }
+
+  return editable.hasAttribute("contenteditable");
+}
+
+function shouldBlockInputArrow(input: HTMLInputElement, key: string): boolean {
+  if (input.type === "checkbox" || input.type === "radio") {
+    return false;
+  }
+
+  if (!isTextInputType(input.type)) {
+    return false;
+  }
+
+  const start = input.selectionStart;
+  const end = input.selectionEnd;
+  if (start === null || end === null) {
+    return true;
+  }
+
+  return shouldBlockBySelection(key, start, end, input.value.length);
+}
+
+function shouldBlockTextAreaArrow(
+  textarea: HTMLTextAreaElement,
+  key: string,
+): boolean {
+  const start = textarea.selectionStart;
+  const end = textarea.selectionEnd;
+  return shouldBlockBySelection(key, start, end, textarea.value.length);
+}
+
+function shouldBlockBySelection(
+  key: string,
+  start: number,
+  end: number,
+  valueLength: number,
+): boolean {
+  if (key === "ArrowLeft" || key === "ArrowUp") {
+    return start > 0 || end > 0;
+  }
+  if (key === "ArrowRight" || key === "ArrowDown") {
+    return end < valueLength;
+  }
+  return false;
+}
+
+function isTextInputType(type: string): boolean {
+  switch (type) {
+    case "text":
+    case "search":
+    case "url":
+    case "tel":
+    case "password":
+    case "email":
+    case "number":
+      return true;
+    default:
+      return false;
+  }
+}
+
+export { getDeltaFromKey, shouldBlockArrowKeyNavigation };

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

@@ -1,5 +1,6 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
 import {
   DataTableCaption,
   type DataTableCaptionProps,
@@ -19,13 +20,26 @@ import {
   type DataTableTheadProps,
 } from "../thead/DataTableThead";
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
+import { useTableKeyboardNav } from "./useTableKeyboardNav";
 
 interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
   children: React.ReactNode;
+  rowDensity?: "condensed" | "normal" | "spacious";
+  /**
+   * Enables keyboard navigation for table rows and cells.
+   * @default false
+   */
+  withKeyboardNav?: boolean;
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
+  truncateContent?: boolean;
 }
 
 interface DataTableRootComponent extends React.ForwardRefExoticComponent<
-  DataTableProps & React.RefAttributes<HTMLDialogElement>
+  DataTableProps & React.RefAttributes<HTMLTableElement>
 > {
   /**
    * @see 🏷️ {@link DataTableCaptionProps}
@@ -120,14 +134,39 @@ interface DataTableRootComponent extends React.ForwardRefExoticComponent<
 }
 
 const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
-  ({ className, ...rest }, forwardedRef) => {
+  (
+    {
+      className,
+      rowDensity = "normal",
+      withKeyboardNav = false,
+      zebraStripes = false,
+      truncateContent = true,
+      ...rest
+    },
+    forwardedRef,
+  ) => {
+    const [tableRef, setTableRef] = useState<HTMLTableElement | null>(null);
+    const mergedRef = useMergeRefs(forwardedRef, setTableRef);
+
+    const { onFocus, tableTabIndex } = useTableKeyboardNav(tableRef, {
+      enabled: withKeyboardNav,
+    });
+
     return (
-      <div className="aksel-data-table__wrapper">
-        <table
-          {...rest}
-          ref={forwardedRef}
-          className={cl("aksel-data-table", className)}
-        />
+      <div className="aksel-data-table__border-wrapper">
+        <div className="aksel-data-table__scroll-wrapper">
+          <table
+            {...rest}
+            ref={mergedRef}
+            className={cl("aksel-data-table", className, {
+              "aksel-data-table--zebra-stripes": zebraStripes,
+              "aksel-data-table--truncate-content": truncateContent,
+            })}
+            data-density={rowDensity}
+            tabIndex={tableTabIndex}
+            onFocus={onFocus}
+          />
+        </div>
       </div>
     );
   },
@@ -146,19 +185,19 @@ export {
   DataTableCaption,
   DataTableTbody,
   DataTableTd,
+  DataTableTfoot,
   DataTableTh,
   DataTableThead,
   DataTableTr,
-  DataTableTfoot,
 };
 export default DataTable;
 export type {
-  DataTableProps,
   DataTableCaptionProps,
+  DataTableProps,
   DataTableTbodyProps,
   DataTableTdProps,
-  DataTableThProps,
+  DataTableTfootProps,
   DataTableTheadProps,
+  DataTableThProps,
   DataTableTrProps,
-  DataTableTfootProps,
 };