@navikt/ds-react 8.4.1 → 8.5.1

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

@@ -1,17 +1,15 @@
-import { getFocusableTarget } from "./table-focus";
+import { findFocusableElementInCell } from "./table-focus";
 
 /**
  * Builds a utility grid allowing for easier keyboard-navigation between cells on columns and rows
  */
-function buildTableGrid(tableRef: HTMLTableElement): {
+function buildTableGridMap(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) {
@@ -51,62 +49,160 @@ function buildTableGrid(tableRef: HTMLTableElement): {
       }
 
       colIndex += colSpan;
-      if (colIndex > maxCols) {
-        maxCols = colIndex;
-      }
     }
   }
 
-  return { grid, positions, maxCols };
+  return { grid, positions };
 }
 
-type TableGrid = ReturnType<typeof buildTableGrid>;
-
-type GridCache = { grid: TableGrid | null; dirty: boolean };
+type GridCache = {
+  grid: ReturnType<typeof buildTableGridMap> | 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)
+ * Pure function that calculates the next grid position given a current position and delta.
+ * Returns the position if valid, or null if out of bounds.
  */
-function ensureTableGrid(
-  tableRef: HTMLTableElement,
-  tableGridCache: GridCache,
-): TableGrid {
-  if (tableGridCache.dirty || !tableGridCache.grid) {
-    tableGridCache.grid = buildTableGrid(tableRef);
-    tableGridCache.dirty = false;
+function getNextGridPosition(
+  grid: (Element | undefined)[][],
+  currentPos: { x: number; y: number },
+  delta: { x: number; y: number },
+): { x: number; y: number } | null {
+  const x = currentPos.x + delta.x;
+  const y = currentPos.y + delta.y;
+
+  if (y < 0 || y >= grid.length) {
+    return null;
+  }
+
+  const row = grid[y] ?? [];
+  if (x < 0 || x >= row.length) {
+    return null;
   }
 
-  return tableGridCache.grid;
+  return { x, y };
+}
+
+/**
+ * Checks if a cell is focusable (contains focusable elements).
+ * Type guard that narrows Element | undefined to Element.
+ */
+function isCellFocusable(cell: Element | undefined): cell is Element {
+  if (!cell) {
+    return false;
+  }
+  return !!findFocusableElementInCell(cell);
 }
 
 /**
  * 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.
+ * Skips over cells that are not focusable.
  * Returns null if no next cell is found in the given direction.
  */
-function findNextCell(
+function findNextFocusableCell(
   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;
+  let position = currentPos;
 
-  const maxRows = grid.length;
+  while (true) {
+    const nextPos = getNextGridPosition(grid, position, delta);
+    if (!nextPos) {
+      return null;
+    }
 
-  while (y >= 0 && y < maxRows && x >= 0 && x < maxCols) {
-    const row = grid[y] ?? [];
+    const cell = grid[nextPos.y][nextPos.x];
+
+    /* We check against current cell to avoid returning the same cell in cases of rowspan/colspan. */
+    if (cell !== currentCell && isCellFocusable(cell)) {
+      return cell;
+    }
+
+    position = nextPos;
+  }
+}
+
+/**
+ * Finds the first focusable cell in the given row.
+ */
+function findFirstCellInRow(
+  grid: (Element | undefined)[][],
+  rowIndex: number,
+): Element | null {
+  const row = grid[rowIndex] ?? [];
+  for (let x = 0; x < row.length; x += 1) {
+    const cell = row[x];
+    if (isCellFocusable(cell)) {
+      return cell;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Finds the last focusable cell in the given row.
+ */
+function findLastCellInRow(
+  grid: (Element | undefined)[][],
+  rowIndex: number,
+): Element | null {
+  const row = grid[rowIndex] ?? [];
+  for (let x = row.length - 1; x >= 0; x -= 1) {
     const cell = row[x];
-    if (cell && cell !== currentCell && !!getFocusableTarget(cell)) {
+    if (isCellFocusable(cell)) {
       return cell;
     }
-    x += delta.x;
-    y += delta.y;
   }
 
   return null;
 }
 
-export { buildTableGrid, ensureTableGrid, findNextCell, type GridCache };
+/**
+ * Finds the first focusable cell in the entire table.
+ */
+function findFirstCell(grid: (Element | undefined)[][]): Element | null {
+  for (let y = 0; y < grid.length; y += 1) {
+    const row = grid[y] ?? [];
+    for (let x = 0; x < row.length; x += 1) {
+      const cell = row[x];
+      if (isCellFocusable(cell)) {
+        return cell;
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Finds the last focusable cell in the entire table.
+ */
+function findLastCell(grid: (Element | undefined)[][]): Element | null {
+  for (let y = grid.length - 1; y >= 0; y -= 1) {
+    const row = grid[y] ?? [];
+    for (let x = row.length - 1; x >= 0; x -= 1) {
+      const cell = row[x];
+      if (isCellFocusable(cell)) {
+        return cell;
+      }
+    }
+  }
+
+  return null;
+}
+
+export {
+  buildTableGridMap,
+  findFirstCell,
+  findFirstCellInRow,
+  findLastCell,
+  findLastCellInRow,
+  findNextFocusableCell,
+  getNextGridPosition,
+  isCellFocusable,
+};
+export type { GridCache };

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

@@ -1,26 +1,26 @@
 import { describe, expect, test } from "vitest";
-import { shouldBlockArrowKeyNavigation } from "./table-keyboard";
+import { shouldBlockNavigation } from "./table-keyboard";
 
-describe("shouldBlockArrowKeyNavigation", () => {
+describe("shouldBlockNavigation", () => {
   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);
+    expect(shouldBlockNavigation(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);
+    expect(shouldBlockNavigation(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);
+    expect(shouldBlockNavigation(event)).toBe(false);
   });
 
   test("should return true when target is contentEditable", () => {
@@ -30,7 +30,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
 
     const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
     Object.defineProperty(event, "target", { value: div });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+    expect(shouldBlockNavigation(event)).toBe(true);
 
     document.body.removeChild(div);
   });
@@ -44,7 +44,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
 
     const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
     Object.defineProperty(event, "target", { value: child });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+    expect(shouldBlockNavigation(event)).toBe(true);
 
     document.body.removeChild(parent);
   });
@@ -54,7 +54,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
     input.type = "checkbox";
     const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
     Object.defineProperty(event, "target", { value: input });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+    expect(shouldBlockNavigation(event)).toBe(false);
   });
 
   test("should return false for radio input", () => {
@@ -62,7 +62,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
     input.type = "radio";
     const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
     Object.defineProperty(event, "target", { value: input });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+    expect(shouldBlockNavigation(event)).toBe(false);
   });
 
   test("should return false for non-text input types", () => {
@@ -70,7 +70,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
     input.type = "button";
     const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
     Object.defineProperty(event, "target", { value: input });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+    expect(shouldBlockNavigation(event)).toBe(false);
   });
 
   test("should return true for text input when selectionStart is null", () => {
@@ -86,7 +86,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
     });
     const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
     Object.defineProperty(event, "target", { value: input });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+    expect(shouldBlockNavigation(event)).toBe(true);
   });
 
   test("should block ArrowLeft when cursor is not at start of text input", () => {
@@ -96,7 +96,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
     input.setSelectionRange(2, 2);
     const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
     Object.defineProperty(event, "target", { value: input });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+    expect(shouldBlockNavigation(event)).toBe(true);
   });
 
   test("should not block ArrowLeft when cursor is at start of text input", () => {
@@ -106,7 +106,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
     input.setSelectionRange(0, 0);
     const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
     Object.defineProperty(event, "target", { value: input });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+    expect(shouldBlockNavigation(event)).toBe(false);
   });
 
   test("should block ArrowRight when cursor is not at end of text input", () => {
@@ -116,7 +116,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
     input.setSelectionRange(2, 2);
     const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
     Object.defineProperty(event, "target", { value: input });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+    expect(shouldBlockNavigation(event)).toBe(true);
   });
 
   test("should not block ArrowRight when cursor is at end of text input", () => {
@@ -126,7 +126,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
     input.setSelectionRange(4, 4);
     const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
     Object.defineProperty(event, "target", { value: input });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+    expect(shouldBlockNavigation(event)).toBe(false);
   });
 
   test("should block ArrowLeft when text is selected in input", () => {
@@ -136,7 +136,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
     input.setSelectionRange(0, 2);
     const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
     Object.defineProperty(event, "target", { value: input });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+    expect(shouldBlockNavigation(event)).toBe(true);
   });
 
   test("should block ArrowRight when text is selected in input", () => {
@@ -146,7 +146,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
     input.setSelectionRange(1, 3);
     const event = new KeyboardEvent("keydown", { key: "ArrowRight" });
     Object.defineProperty(event, "target", { value: input });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+    expect(shouldBlockNavigation(event)).toBe(true);
   });
 
   test("should handle various text input types", () => {
@@ -161,7 +161,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
       input.setSelectionRange(2, 2);
       const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
       Object.defineProperty(event, "target", { value: input });
-      expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+      expect(shouldBlockNavigation(event)).toBe(true);
     });
   });
 
@@ -171,7 +171,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
     textarea.setSelectionRange(5, 5);
     const event = new KeyboardEvent("keydown", { key: "ArrowUp" });
     Object.defineProperty(event, "target", { value: textarea });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+    expect(shouldBlockNavigation(event)).toBe(true);
   });
 
   test("should not block ArrowUp when cursor is at start of textarea", () => {
@@ -180,7 +180,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
     textarea.setSelectionRange(0, 0);
     const event = new KeyboardEvent("keydown", { key: "ArrowUp" });
     Object.defineProperty(event, "target", { value: textarea });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+    expect(shouldBlockNavigation(event)).toBe(false);
   });
 
   test("should block ArrowDown when cursor is not at end of textarea", () => {
@@ -189,7 +189,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
     textarea.setSelectionRange(5, 5);
     const event = new KeyboardEvent("keydown", { key: "ArrowDown" });
     Object.defineProperty(event, "target", { value: textarea });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+    expect(shouldBlockNavigation(event)).toBe(true);
   });
 
   test("should not block ArrowDown when cursor is at end of textarea", () => {
@@ -198,35 +198,35 @@ describe("shouldBlockArrowKeyNavigation", () => {
     textarea.setSelectionRange(11, 11);
     const event = new KeyboardEvent("keydown", { key: "ArrowDown" });
     Object.defineProperty(event, "target", { value: textarea });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(false);
+    expect(shouldBlockNavigation(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);
+    expect(shouldBlockNavigation(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);
+    expect(shouldBlockNavigation(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);
+    expect(shouldBlockNavigation(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);
+    expect(shouldBlockNavigation(event)).toBe(false);
   });
 
   test("should handle element inside editable parent", () => {
@@ -240,7 +240,7 @@ describe("shouldBlockArrowKeyNavigation", () => {
 
     const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
     Object.defineProperty(event, "target", { value: input });
-    expect(shouldBlockArrowKeyNavigation(event)).toBe(true);
+    expect(shouldBlockNavigation(event)).toBe(true);
 
     document.body.removeChild(wrapper);
   });

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

@@ -7,16 +7,45 @@ const keyToCoord = {
 
 type DirectionsT = keyof typeof keyToCoord;
 type Delta = { x: number; y: number };
+type NavigationAction =
+  | { type: "delta"; delta: Delta }
+  | { type: "home" }
+  | { type: "end" }
+  | { type: "tableStart" }
+  | { type: "tableEnd" };
 
-function getDeltaFromKey(key: string): Delta | null {
+/**
+ * Maps keyboard events to navigation actions.
+ * Supports arrow keys, Home/End (row navigation), Ctrl/Cmd+Home/End (table navigation),
+ * and PageUp/PageDown (multi-row navigation).
+ */
+function getNavigationAction(event: KeyboardEvent): NavigationAction | null {
+  const key = event.key;
+
+  /* Arrow keys -> directional navigation */
   if (key in keyToCoord) {
-    return keyToCoord[key as DirectionsT];
+    return { type: "delta", delta: keyToCoord[key as DirectionsT] };
+  }
+
+  if (key === "Home") {
+    return event.ctrlKey || event.metaKey
+      ? { type: "tableStart" }
+      : { type: "home" };
+  }
+
+  if (key === "End") {
+    return event.ctrlKey || event.metaKey
+      ? { type: "tableEnd" }
+      : { type: "end" };
   }
 
   return null;
 }
 
 /**
+ * Determines if keyboard navigation should be blocked based on the current focus context.
+ * Allows for custom blocking logic via an optional callback.
+ *
  * 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
@@ -24,7 +53,7 @@ function getDeltaFromKey(key: string): Delta | null {
  * - User is navigating inside multiline textarea
  * - contenteditable attrb is in use
  */
-function shouldBlockArrowKeyNavigation(event: KeyboardEvent): boolean {
+function shouldBlockNavigation(event: KeyboardEvent): boolean {
   const key = event.key;
   if (!(key in keyToCoord)) {
     return false;
@@ -123,4 +152,5 @@ function isTextInputType(type: string): boolean {
   }
 }
 
-export { getDeltaFromKey, shouldBlockArrowKeyNavigation };
+export { getNavigationAction, shouldBlockNavigation };
+export type { Delta, NavigationAction };

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

@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useValueAsRef } from "../../../utils/hooks";
+import { type GridCache, buildTableGridMap } from "../helpers/table-grid-nav";
+
+/**
+ * Manages the table grid cache and observes DOM changes that require grid rebuilding.
+ * Watches for structural changes (rows/cells added/removed) and attribute changes
+ * (colspan, rowspan, hidden, style) that affect grid layout and focusability.
+ */
+function useGridCache(tableRef: HTMLTableElement | null, enabled: boolean) {
+  const gridCacheRef = useRef<GridCache>({
+    grid: null,
+    dirty: true,
+  });
+
+  const [activeCell, setActiveCell] = useState<Element | null>(null);
+  const activeCellRef = useValueAsRef(activeCell).current;
+  const observerRef = useRef<MutationObserver | null>(null);
+
+  useEffect(() => {
+    if (!tableRef || !enabled) {
+      return;
+    }
+
+    observerRef.current = new MutationObserver(() => {
+      gridCacheRef.current.dirty = true;
+      if (activeCellRef && !activeCellRef.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, activeCellRef]);
+
+  /**
+   * If keyboard-nav is re-enabled, mark grid as dirty since
+   * the table might have changed while it was disabled.
+   */
+  useEffect(() => {
+    if (enabled) {
+      gridCacheRef.current.dirty = true;
+    }
+  }, [enabled]);
+
+  const getTableGrid = useCallback((_tableRef: HTMLTableElement) => {
+    if (gridCacheRef.current.dirty || !gridCacheRef.current.grid) {
+      gridCacheRef.current.grid = buildTableGridMap(_tableRef);
+      gridCacheRef.current.dirty = false;
+    }
+
+    return gridCacheRef.current.grid;
+  }, []);
+
+  return {
+    getTableGrid,
+    activeCell,
+    setActiveCell,
+  };
+}
+
+export { useGridCache };

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

@@ -25,17 +25,27 @@ import { useTableKeyboardNav } from "./useTableKeyboardNav";
 interface DataTableProps extends React.HTMLAttributes<HTMLTableElement> {
   children: React.ReactNode;
   rowDensity?: "condensed" | "normal" | "spacious";
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
+  /**
+   * Truncate content in cells and show ellipsis for overflowed text.
+   * @default true
+   */
+  truncateContent?: boolean;
   /**
    * Enables keyboard navigation for table rows and cells.
    * @default false
    */
   withKeyboardNav?: boolean;
   /**
-   * Zebra striped table
-   * @default false
+   * Custom callback to determine if navigation should be blocked.
+   * Called before default blocking logic.
+   * Requires `withKeyboardNav` to be `true`.
    */
-  zebraStripes?: boolean;
-  truncateContent?: boolean;
+  shouldBlockNavigation?: (event: KeyboardEvent) => boolean;
 }
 
 interface DataTableRootComponent extends React.ForwardRefExoticComponent<
@@ -141,6 +151,7 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
       withKeyboardNav = false,
       zebraStripes = false,
       truncateContent = true,
+      shouldBlockNavigation,
       ...rest
     },
     forwardedRef,
@@ -148,8 +159,9 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
     const [tableRef, setTableRef] = useState<HTMLTableElement | null>(null);
     const mergedRef = useMergeRefs(forwardedRef, setTableRef);
 
-    const { onFocus, tableTabIndex } = useTableKeyboardNav(tableRef, {
+    const { tabIndex } = useTableKeyboardNav(tableRef, {
       enabled: withKeyboardNav,
+      shouldBlockNavigation,
     });
 
     return (
@@ -158,13 +170,11 @@ const DataTable = forwardRef<HTMLTableElement, DataTableProps>(
           <table
             {...rest}
             ref={mergedRef}
-            className={cl("aksel-data-table", className, {
-              "aksel-data-table--zebra-stripes": zebraStripes,
-              "aksel-data-table--truncate-content": truncateContent,
-            })}
+            className={cl("aksel-data-table", className)}
+            data-zebra-stripes={zebraStripes}
+            data-truncate-content={truncateContent}
             data-density={rowDensity}
-            tabIndex={tableTabIndex}
-            onFocus={onFocus}
+            tabIndex={tabIndex}
           />
         </div>
       </div>