@navikt/ds-react 8.3.0 → 8.4.0

package/src/{overlays/action-menu → action-menu}/ActionMenu.tsx

@@ -1,16 +1,16 @@
 import React, { forwardRef, useRef } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
-import { useModalContext } from "../../modal/Modal.context";
-import { type OverridableComponent, useId } from "../../utils-external";
-import { Slot } from "../../utils/components/slot/Slot";
+import { useModalContext } from "../modal/Modal.context";
+import { type OverridableComponent, useId } from "../utils-external";
+import { Menu, MenuPortalProps } from "../utils/components/floating-menu/Menu";
+import { Slot } from "../utils/components/slot/Slot";
 import {
   cl,
   composeEventHandlers,
   createStrictContext,
   requireReactElement,
-} from "../../utils/helpers";
-import { useControllableState, useMergeRefs } from "../../utils/hooks";
-import { Menu, MenuPortalProps } from "../floating-menu/Menu";
+} from "../utils/helpers";
+import { useControllableState, useMergeRefs } from "../utils/hooks";
 
 /* -------------------------------------------------------------------------- */
 /*                                 ActionMenu                                 */
@@ -939,9 +939,9 @@ export const ActionMenuSubTrigger = forwardRef<
             {icon}
           </Marker>
         )}
-        <Marker placement="right" className="aksel-action-menu__marker-icon">
+        <div className="aksel-action-menu__sub-icon">
           <ChevronRightIcon aria-hidden />
-        </Marker>
+        </div>
       </Menu.SubTrigger>
     );
   },
@@ -959,7 +959,7 @@ interface ActionMenuSubContentProps extends React.HTMLAttributes<HTMLDivElement>
 export const ActionMenuSubContent = forwardRef<
   ActionMenuSubContentElement,
   ActionMenuSubContentProps
->(({ children, className, ...rest }: ActionMenuSubContentProps, ref) => {
+>(({ children, className, style, ...rest }: ActionMenuSubContentProps, ref) => {
   const context = useActionMenuContext();
 
   return (
@@ -974,6 +974,15 @@ export const ActionMenuSubContent = forwardRef<
           "aksel-action-menu__content aksel-action-menu__sub-content",
           className,
         )}
+        style={{
+          ...style,
+          ...{
+            "--__axc-action-menu-content-transform-origin":
+              "var(--__axc-floating-transform-origin)",
+            "--__axc-action-menu-content-available-height":
+              "var(--__axc-floating-available-height)",
+          },
+        }}
       >
         <div className="aksel-action-menu__content-inner">{children}</div>
       </Menu.SubContent>

package/src/alert/global-alert/root/GlobalAlertRoot.tsx

@@ -17,8 +17,10 @@ import {
   type GlobalAlertTitleProps,
 } from "../title/GlobalAlertTitle";
 
-interface GlobalAlertProps
-  extends Omit<BaseAlert.RootProps, "type" | "global" | "data-color"> {
+interface GlobalAlertProps extends Omit<
+  BaseAlert.RootProps,
+  "type" | "global" | "data-color"
+> {
   status: Exclude<BaseAlert.RootProps["status"], undefined>;
   /**
    * data-color has no effect on GlobalAlert.
@@ -31,10 +33,9 @@ interface GlobalAlertProps
   centered?: boolean;
 }
 
-interface GlobalAlertComponent
-  extends React.ForwardRefExoticComponent<
-    GlobalAlertProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface GlobalAlertComponent extends React.ForwardRefExoticComponent<
+  GlobalAlertProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link GlobalAlertHeaderProps}
    * @example

package/src/alert/info-card/root/InfoCardRoot.tsx

@@ -26,10 +26,9 @@ type InfoCardProps = Omit<
   as?: "div" | "section";
 };
 
-interface InfoCardComponent
-  extends React.ForwardRefExoticComponent<
-    InfoCardProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface InfoCardComponent extends React.ForwardRefExoticComponent<
+  InfoCardProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link InfoCardHeaderProps}
    * @example

package/src/alert/local-alert/root/LocalAlertRoot.tsx

@@ -17,8 +17,10 @@ import {
   type LocalAlertTitleProps,
 } from "../title/LocalAlertTitle";
 
-interface LocalAlertProps
-  extends Omit<BaseAlert.RootProps, "type" | "global" | "data-color"> {
+interface LocalAlertProps extends Omit<
+  BaseAlert.RootProps,
+  "type" | "global" | "data-color"
+> {
   status: Exclude<BaseAlert.RootProps["status"], undefined>;
   /**
    * data-color has no effect on LocalAlert.
@@ -26,10 +28,9 @@ interface LocalAlertProps
   "data-color"?: never;
 }
 
-interface LocalAlertComponent
-  extends React.ForwardRefExoticComponent<
-    LocalAlertProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface LocalAlertComponent extends React.ForwardRefExoticComponent<
+  LocalAlertProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * @see 🏷️ {@link LocalAlertHeaderProps}
    * @example

package/src/button/Button.tsx

@@ -14,8 +14,7 @@ type legacyVariants =
 
 type HiddenVariant = legacyVariants & { __brand?: never };
 
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Button content.
    */

package/src/chips/Removable.tsx

@@ -4,8 +4,7 @@ import { AkselColor } from "../types";
 import { cl, composeEventHandlers } from "../utils/helpers";
 import { useI18n } from "../utils/i18n/i18n.hooks";
 
-export interface ChipsRemovableProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ChipsRemovableProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: string;
   /**
    * @deprecated Use `data-color` prop instead.

package/src/chips/Toggle.tsx

@@ -3,8 +3,7 @@ import { AkselColor } from "../types";
 import type { OverridableComponent } from "../utils-external";
 import { cl } from "../utils/helpers";
 
-export interface ChipsToggleProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ChipsToggleProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: string;
   /**
    * Toggles aria-pressed and visual changes

package/src/collapsible/{parts/Collapsible.Content.tsx → content/CollapsibleContent.tsx}

@@ -1,12 +1,11 @@
 import React, { forwardRef } from "react";
 import { Slot } from "../../utils/components/slot/Slot";
-import { useCollapsibleContext } from "../Collapsible.context";
+import { useCollapsibleContext } from "../root/CollapsibleRoot.context";
 
-export interface CollapsibleContentProps
-  extends Omit<
-    React.HTMLAttributes<HTMLDivElement>,
-    "hidden" | "aria-controls" | "id"
-  > {
+export interface CollapsibleContentProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  "hidden" | "aria-controls" | "id"
+> {
   /**
    * When true, will render element as its child. This merges classes, styles and event handlers.
    * @default false

package/src/collapsible/index.ts

@@ -3,9 +3,9 @@ export {
   default as Collapsible,
   CollapsibleTrigger,
   CollapsibleContent,
-} from "./Collapsible";
+} from "./root/CollapsibleRoot";
 export type {
   CollapsibleProps,
   CollapsibleTriggerProps,
   CollapsibleContentProps,
-} from "./Collapsible";
+} from "./root/CollapsibleRoot";

package/src/collapsible/{Collapsible.context.tsx → root/CollapsibleRoot.context.tsx}

@@ -1,7 +1,10 @@
-import { createStrictContext } from "../utils/helpers";
-import { CollapsibleBaseProps } from "./Collapsible.types";
+import { createStrictContext } from "../../utils/helpers";
 
-export type CollapsibleContextProps = Pick<CollapsibleBaseProps, "open"> & {
+export type CollapsibleContextProps = {
+  /**
+   * The open state of the collapsible.
+   */
+  open: boolean;
   /**
    * Allows connecting trigger to content
    */

package/src/collapsible/{Collapsible.tsx → root/CollapsibleRoot.tsx}

@@ -1,17 +1,33 @@
 import React, { forwardRef, useCallback } from "react";
-import { useId } from "../utils-external";
-import { useControllableState } from "../utils/hooks";
-import { CollapsibleContextProvider } from "./Collapsible.context";
-import { CollapsibleBaseProps } from "./Collapsible.types";
+import { useId } from "../../utils-external";
+import { useControllableState } from "../../utils/hooks";
 import CollapsibleContent, {
   CollapsibleContentProps,
-} from "./parts/Collapsible.Content";
+} from "../content/CollapsibleContent";
 import CollapsibleTrigger, {
   CollapsibleTriggerProps,
-} from "./parts/Collapsible.Trigger";
+} from "../trigger/CollapsibleTrigger";
+import { CollapsibleContextProvider } from "./CollapsibleRoot.context";
 
-interface CollapsibleProps
-  extends CollapsibleBaseProps, React.HTMLAttributes<HTMLDivElement> {}
+interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
+   */
+  defaultOpen?: boolean;
+  /**
+   * The controlled open state of the collapsible. Must be used in conjunction with onOpenChange.
+   */
+  open?: boolean;
+  /**
+   * Event handler called when the open state of the collapsible changes.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Render the collapsible content lazily. This means that the content will not be rendered until the collapsible is open.
+   * @default false
+   */
+  lazy?: boolean;
+}
 
 interface CollapsibleComponent extends React.ForwardRefExoticComponent<
   CollapsibleProps & React.RefAttributes<HTMLDivElement>

package/src/collapsible/{parts/Collapsible.Trigger.tsx → trigger/CollapsibleTrigger.tsx}

@@ -1,13 +1,12 @@
 import React, { forwardRef } from "react";
 import { Slot } from "../../utils/components/slot/Slot";
 import { composeEventHandlers } from "../../utils/helpers";
-import { useCollapsibleContext } from "../Collapsible.context";
+import { useCollapsibleContext } from "../root/CollapsibleRoot.context";
 
-export interface CollapsibleTriggerProps
-  extends Omit<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    "id" | "aria-controls" | "aria-expanded"
-  > {
+export interface CollapsibleTriggerProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  "id" | "aria-controls" | "aria-expanded"
+> {
   /**
    * When true, will render element as its child. This merges classes, styles and event handlers.
    * @default false

package/src/copybutton/CopyButton.tsx

@@ -8,7 +8,8 @@ import { useTimeout } from "../utils/hooks";
 import { useI18n } from "../utils/i18n/i18n.hooks";
 
 export interface CopyButtonProps
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">,
+  extends
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">,
     Pick<ButtonProps, "iconPosition" | "size"> {
   /**
    * @deprecated Use `data-color` attribute instead.

package/src/data/action-bar/root/DataActionBarRoot.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Button } from "../../../button";
-import { Box } from "../../../layout/box";
-import { HStack, Spacer } from "../../../layout/stack";
+import { Box } from "../../../primitives/box";
+import { HStack, Spacer } from "../../../primitives/stack";
 import { BodyShort } from "../../../typography";
 
 interface DataActionBarProps extends React.HTMLAttributes<HTMLDivElement> {

package/src/data/stories/DataTableProfiler.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Button } from "../../button";
-import { Box } from "../../layout/box";
-import { VStack } from "../../layout/stack";
+import { Box } from "../../primitives/box";
+import { VStack } from "../../primitives/stack";
 import { Heading } from "../../typography";
 
 type DataTableProfilerProps = {
@@ -56,6 +56,12 @@ function rollingLatestValues(
   return newArr;
 }
 
+const getOpacity = (timestamp: number) => {
+  const age = Date.now() - timestamp;
+  const maxAge = 10000;
+  return Math.max(0.4, 1 - age / maxAge);
+};
+
 function ProfilerDisplay({
   getLatestData,
 }: {
@@ -97,12 +103,6 @@ function ProfilerDisplay({
     return () => clearInterval(interval);
   }, [open]);
 
-  const getOpacity = (timestamp: number) => {
-    const age = Date.now() - timestamp;
-    const maxAge = 10000;
-    return Math.max(0.4, 1 - age / maxAge);
-  };
-
   return (
     <VStack asChild>
       <Box

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