@navikt/ds-react 8.3.0 → 8.4.0

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,9 +20,22 @@ 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<
@@ -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,
 };

package/src/data/table/root/useTableKeyboardNav.ts

@@ -0,0 +1,197 @@
+import { useEffect, useRef, useState } from "react";
+import { useEventCallback } from "../../../utils/hooks";
+import { getActiveCell, getFirstCell } from "../helpers/table-cell";
+import { focusCell, focusCellAndUpdateTabIndex } from "../helpers/table-focus";
+import {
+  type GridCache,
+  ensureTableGrid,
+  findNextCell,
+} from "../helpers/table-grid-nav";
+import {
+  getDeltaFromKey,
+  shouldBlockArrowKeyNavigation,
+} from "../helpers/table-keyboard";
+
+function useTableKeyboardNav(
+  tableRef: HTMLTableElement | null,
+  { enabled }: { enabled: boolean },
+) {
+  const [activeCell, setActiveCell] = useState<Element | null>(null);
+  const activeCellRef = useRef<Element | null>(null);
+  activeCellRef.current = activeCell;
+
+  const observerRef = useRef<MutationObserver | null>(null);
+
+  const gridCacheRef = useRef<GridCache>({
+    grid: null,
+    dirty: true,
+  });
+
+  /**
+   * TODO:
+   * - Save original tabIndex of cells and restore when navigating away?
+   */
+  const navigateByArrowKey = useEventCallback(
+    (delta: { x: number; y: number }) => {
+      const currentCell = getActiveCell(tableRef, activeCell);
+      if (!currentCell || !tableRef) {
+        return null;
+      }
+
+      const { grid, positions, maxCols } = ensureTableGrid(
+        tableRef,
+        gridCacheRef.current,
+      );
+      const currentPos = positions.get(currentCell);
+
+      if (!currentPos) {
+        return null;
+      }
+
+      const nextCell = findNextCell(
+        grid,
+        currentPos,
+        delta,
+        currentCell,
+        maxCols,
+      );
+      return nextCell
+        ? focusCellAndUpdateTabIndex(nextCell, currentCell)
+        : null;
+    },
+  );
+
+  /**
+   * Handles keyboard navigation with arrow keys.
+   * We check if the key is an arrow key, and if so, we calculate the next cell to focus based on the current active cell and the grid structure.
+   *
+   * TODO:
+   * - Check for other "blocking" scenarios, like actionmenus, dropdown etc
+   * - Consider having acallback user can hook into to determine if navigation should be blocked
+   * - Consider adding Home, End, PageUp, PageDown navigation
+   *
+   */
+  const onKeyDown = useEventCallback((event: KeyboardEvent): void => {
+    /* Stops keydown from moving if we can assume that you are currently editing input, select etc */
+    if (shouldBlockArrowKeyNavigation(event)) {
+      return;
+    }
+
+    let newCell: Element | null = null;
+
+    const delta = getDeltaFromKey(event.key);
+    if (delta) {
+      event.preventDefault();
+      newCell = navigateByArrowKey(delta);
+    }
+
+    newCell && setActiveCell(newCell);
+  });
+
+  /**
+   * 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.
+   */
+  const onFocusIn = useEventCallback((event: FocusEvent): void => {
+    const target = event.target as Element | null;
+    const newCell = target?.closest("td, th") ?? null;
+    if (!newCell || newCell === activeCell) {
+      return;
+    }
+
+    const updatedCell = focusCellAndUpdateTabIndex(newCell, activeCell, {
+      shouldFocus: false,
+    });
+    if (updatedCell) {
+      setActiveCell(updatedCell);
+    }
+  });
+
+  /**
+   * Observes changes is table structure and updates the grid cache accordingly.
+   * - We want to check if elements are removed/added, like when filtering table, pagination etc
+   * - Changes in colspan/rowspan that can affect the grid structure
+   * - Hidden attribute or styles that can affect focusability of cells
+   *
+   * We also check if the active cell is removed from the DOM, and clear it if so.
+   */
+  useEffect(() => {
+    if (!tableRef || !enabled) {
+      return;
+    }
+
+    observerRef.current = new MutationObserver(() => {
+      gridCacheRef.current.dirty = true;
+      if (activeCellRef.current && !activeCellRef.current.isConnected) {
+        setActiveCell(null);
+      }
+    });
+
+    observerRef.current.observe(tableRef, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["colspan", "rowspan", "hidden", "style"],
+    });
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, [tableRef, enabled]);
+
+  useEffect(() => {
+    if (!tableRef || !enabled) {
+      return;
+    }
+
+    tableRef.addEventListener("keydown", onKeyDown);
+    tableRef.addEventListener("focusin", onFocusIn);
+
+    return () => {
+      tableRef.removeEventListener("keydown", onKeyDown);
+      tableRef.removeEventListener("focusin", onFocusIn);
+    };
+  }, [tableRef, onKeyDown, onFocusIn, enabled]);
+
+  /*
+   * If keyboard-nav is re-enabled, we need to make sure to update the grid cache,
+   * since the table might have changed while it was disabled.
+   */
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    gridCacheRef.current.dirty = true;
+  }, [enabled]);
+
+  return {
+    /* Table should only have tabIndex until the focus is moved inside and is enabled */
+    tableTabIndex: enabled ? (activeCell ? undefined : 0) : undefined,
+    /*
+     * Allows us to capture focus on the table when navigating with Tab from outside, and move it to the first cell.
+     * We only want to do this if no cell is already focused.
+     */
+    onFocus: () => {
+      if (!tableRef) {
+        return;
+      }
+
+      const focusedElement = document.activeElement;
+      const cellInTable = focusedElement?.closest("td, th");
+
+      /* Assume onFocusIn handler has updates cell */
+      if (cellInTable && tableRef.contains(cellInTable)) {
+        return;
+      }
+
+      const firstCell = getFirstCell(tableRef);
+      return firstCell ? focusCell(firstCell) : null;
+    },
+  };
+}
+
+export { useTableKeyboardNav };

package/src/data/table/td/DataTableTd.tsx

@@ -1,7 +1,13 @@
 import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
 
-type DataTableTdProps = React.HTMLAttributes<HTMLTableCellElement>;
+interface DataTableTdProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  /**
+   * TODO: Shouldnt be needed to declare these here... But getting type-errors if not
+   */
+  colSpan?: number;
+  rowSpan?: number;
+}
 
 const DataTableTd = forwardRef<HTMLTableCellElement, DataTableTdProps>(
   ({ className, children, ...rest }, forwardedRef) => {