@navikt/ds-react 8.2.2 → 8.4.0

package/src/data/stories/dummy-data.tsx

@@ -1,6 +1,5 @@
 import { createColumnHelper } from "@tanstack/react-table";
 import React from "react";
-import { HStack } from "../../layout/stack";
 import { Tag } from "../../tag";
 
 // Helper function to get random integer between min and max (inclusive)
@@ -18,7 +17,7 @@ const getRandomItems = <T,>(arr: T[], min = 1, max = 5): T[] => {
   return shuffled.slice(0, count);
 };
 
-interface PersonInfo {
+export interface PersonInfo {
   // id: number;
   name: string;
   nationalId: string;
@@ -66,26 +65,49 @@ export const columns = [
   {
     header: "Age",
     accessorKey: "age",
+    footer: ({ table }) => {
+      const ages: number[] = [];
+      table.getFilteredRowModel().rows.forEach((row) => {
+        const value = row.getValue("age");
+        value && ages.push(value);
+      });
+      return `Avg: ${(ages.reduce((a, b) => a + b, 0) / ages.length).toFixed(2)}`;
+    },
   },
-  {
-    header: "Force sensitive",
-    accessorKey: "forceSensitive",
-  },
+
+  columnHelper.accessor("forceSensitive", {
+    cell: (info) => {
+      const value = info.getValue();
+      return (
+        <Tag
+          size="small"
+          variant="moderate"
+          data-color={value ? "accent" : "warning"}
+        >{`${value ? "Yes" : "No"}`}</Tag>
+      );
+    },
+    footer: ({ table }) => {
+      const totals = new Map();
+      totals.set("Yes", 0);
+      totals.set("No", 0);
+      table.getFilteredRowModel().rows.forEach((row) => {
+        const value = row.getValue("forceSensitive");
+        totals.set(
+          value ? "Yes" : "No",
+          (totals.get(value ? "Yes" : "No") ?? 0) + 1,
+        );
+      });
+      return `Yes: ${totals.get("Yes")}, No: ${totals.get("No")}`;
+    },
+  }),
   {
     header: "Home system",
     accessorKey: "homeSystem",
   },
-  columnHelper.accessor("skills", {
-    cell: (info) => (
-      <HStack gap="space-8">
-        {info.getValue().map((skill) => (
-          <Tag key={skill} size="small">
-            {skill}
-          </Tag>
-        ))}
-      </HStack>
-    ),
-  }),
+  {
+    header: "Skills",
+    accessorKey: "skills",
+  },
 ];
 
 export const homeSystemOptions = [

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

@@ -0,0 +1,23 @@
+import { focusCell } from "./table-focus";
+
+function getFirstCell(tableRef: HTMLTableElement): Element | null {
+  return tableRef.querySelector("td, th");
+}
+
+function getActiveCell(
+  tableRef: HTMLTableElement | null,
+  activeCell: Element | null,
+): Element | null {
+  if (!tableRef) {
+    return null;
+  }
+
+  if (activeCell) {
+    return activeCell;
+  }
+
+  const firstCell = getFirstCell(tableRef);
+  return firstCell ? focusCell(firstCell) : null;
+}
+
+export { getActiveCell, getFirstCell };

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

@@ -0,0 +1,105 @@
+/**
+ * Makes sure only focusable and non-disabled elements are targeted when navigating through the table using keyboard interactions.
+ * Tries to find the most logical focus target inside a cell, by looking for commonly used interactive elements,
+ * falling back to the cell itself if no focusable targets are found.
+ *
+ * If the assumed focus target is not the cell itself, we check if that element is hidden or disabled, and fall back to the cell if so,
+ * since we want to avoid/can't focus hidden/disabled elements.
+ */
+function getFocusableTarget(cell: Element): HTMLElement | null {
+  const el = cell as HTMLElement | null;
+  if (!el || isHiddenElement(el)) {
+    return null;
+  }
+
+  const focusables = el.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable="true"]',
+  );
+
+  if (focusables.length === 0) {
+    return el;
+  }
+
+  for (let i = 0; i < focusables.length; i += 1) {
+    const focusable = focusables[i] as HTMLElement;
+    if (!isHiddenElement(focusable) && !isDisabledElement(focusable)) {
+      return focusable;
+    }
+  }
+
+  return el;
+}
+
+/**
+ * TODO:
+ * - validate this implementation against SR-only elements
+ */
+function isHiddenElement(el: HTMLElement): boolean {
+  if (el.hidden) {
+    return true;
+  }
+
+  const style = window.getComputedStyle(el);
+  return style.display === "none" || style.visibility === "hidden";
+}
+
+function isDisabledElement(el: HTMLElement): boolean {
+  if (el.getAttribute("aria-disabled") === "true") {
+    return true;
+  }
+
+  if (el.closest("fieldset[disabled]")) {
+    return true;
+  }
+
+  if (
+    el instanceof HTMLButtonElement ||
+    el instanceof HTMLInputElement ||
+    el instanceof HTMLSelectElement ||
+    el instanceof HTMLTextAreaElement
+  ) {
+    return el.disabled;
+  }
+
+  return false;
+}
+
+function focusCell(cell: Element): Element | null {
+  const focusTarget = getFocusableTarget(cell);
+  if (!focusTarget) {
+    return null;
+  }
+
+  if (focusTarget === cell) {
+    (cell as HTMLElement).tabIndex = 0;
+  }
+
+  focusTarget.focus({
+    preventScroll: true,
+  });
+
+  focusTarget.scrollIntoView({
+    behavior: "smooth",
+    block: "nearest",
+    inline: "nearest",
+  });
+  return cell;
+}
+
+function focusCellAndUpdateTabIndex(
+  nextCell: Element,
+  previousCell?: Element | null,
+  { shouldFocus = true }: { shouldFocus?: boolean } = {},
+): Element | null {
+  if (previousCell && previousCell !== nextCell) {
+    (previousCell as HTMLElement).tabIndex = -1;
+  }
+
+  if (!shouldFocus) {
+    return nextCell;
+  }
+
+  return focusCell(nextCell);
+}
+
+export { focusCell, focusCellAndUpdateTabIndex, getFocusableTarget };

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 };