@navikt/ds-react 8.3.0 → 8.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.3.0",
+  "version": "8.4.1",
   "description": "React components from the Norwegian Labour and Welfare Administration.",
   "author": "Aksel, a team part of the Norwegian Labour and Welfare Administration.",
   "license": "MIT",
@@ -71,12 +71,12 @@
     },
     "./ActionMenu": {
       "import": {
-        "types": "./esm/overlays/action-menu/index.d.ts",
-        "default": "./esm/overlays/action-menu/index.js"
+        "types": "./esm/action-menu/index.d.ts",
+        "default": "./esm/action-menu/index.js"
       },
       "require": {
-        "types": "./cjs/overlays/action-menu/index.d.ts",
-        "default": "./cjs/overlays/action-menu/index.js"
+        "types": "./cjs/action-menu/index.d.ts",
+        "default": "./cjs/action-menu/index.js"
       }
     },
     "./Alert": {
@@ -201,62 +201,62 @@
     },
     "./Bleed": {
       "import": {
-        "types": "./esm/layout/bleed/index.d.ts",
-        "default": "./esm/layout/bleed/index.js"
+        "types": "./esm/primitives/bleed/index.d.ts",
+        "default": "./esm/primitives/bleed/index.js"
       },
       "require": {
-        "types": "./cjs/layout/bleed/index.d.ts",
-        "default": "./cjs/layout/bleed/index.js"
+        "types": "./cjs/primitives/bleed/index.d.ts",
+        "default": "./cjs/primitives/bleed/index.js"
       }
     },
     "./Box": {
       "import": {
-        "types": "./esm/layout/box/index.d.ts",
-        "default": "./esm/layout/box/index.js"
+        "types": "./esm/primitives/box/index.d.ts",
+        "default": "./esm/primitives/box/index.js"
       },
       "require": {
-        "types": "./cjs/layout/box/index.d.ts",
-        "default": "./cjs/layout/box/index.js"
+        "types": "./cjs/primitives/box/index.d.ts",
+        "default": "./cjs/primitives/box/index.js"
       }
     },
     "./HGrid": {
       "import": {
-        "types": "./esm/layout/grid/index.d.ts",
-        "default": "./esm/layout/grid/index.js"
+        "types": "./esm/primitives/grid/index.d.ts",
+        "default": "./esm/primitives/grid/index.js"
       },
       "require": {
-        "types": "./cjs/layout/grid/index.d.ts",
-        "default": "./cjs/layout/grid/index.js"
+        "types": "./cjs/primitives/grid/index.d.ts",
+        "default": "./cjs/primitives/grid/index.js"
       }
     },
     "./Page": {
       "import": {
-        "types": "./esm/layout/page/index.d.ts",
-        "default": "./esm/layout/page/index.js"
+        "types": "./esm/primitives/page/index.d.ts",
+        "default": "./esm/primitives/page/index.js"
       },
       "require": {
-        "types": "./cjs/layout/page/index.d.ts",
-        "default": "./cjs/layout/page/index.js"
+        "types": "./cjs/primitives/page/index.d.ts",
+        "default": "./cjs/primitives/page/index.js"
       }
     },
     "./Responsive": {
       "import": {
-        "types": "./esm/layout/responsive/index.d.ts",
-        "default": "./esm/layout/responsive/index.js"
+        "types": "./esm/primitives/responsive/index.d.ts",
+        "default": "./esm/primitives/responsive/index.js"
       },
       "require": {
-        "types": "./cjs/layout/responsive/index.d.ts",
-        "default": "./cjs/layout/responsive/index.js"
+        "types": "./cjs/primitives/responsive/index.d.ts",
+        "default": "./cjs/primitives/responsive/index.js"
       }
     },
     "./Stack": {
       "import": {
-        "types": "./esm/layout/stack/index.d.ts",
-        "default": "./esm/layout/stack/index.js"
+        "types": "./esm/primitives/stack/index.d.ts",
+        "default": "./esm/primitives/stack/index.js"
       },
       "require": {
-        "types": "./cjs/layout/stack/index.d.ts",
-        "default": "./cjs/layout/stack/index.js"
+        "types": "./cjs/primitives/stack/index.d.ts",
+        "default": "./cjs/primitives/stack/index.js"
       }
     },
     "./Link": {
@@ -705,8 +705,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.1.6",
-    "@navikt/aksel-icons": "^8.3.0",
-    "@navikt/ds-tokens": "^8.3.0",
+    "@navikt/aksel-icons": "^8.4.1",
+    "@navikt/ds-tokens": "^8.4.1",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"
   },
@@ -726,7 +726,7 @@
     "jsdom": "27.1.0",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "react-router": "^7.12.0",
+    "react-router": "^7.13.0",
     "rimraf": "6.1.2",
     "swr": "^2.3.6",
     "tsc-alias": "1.8.16",

package/src/accordion/AccordionContent.tsx

@@ -4,8 +4,7 @@ import { BodyLong } from "../typography";
 import { cl } from "../utils/helpers";
 import { AccordionItemContext } from "./AccordionItem";
 
-export interface AccordionContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Content inside Accordion.Content
    */

package/src/accordion/AccordionHeader.tsx

@@ -5,8 +5,7 @@ import { cl, composeEventHandlers } from "../utils/helpers";
 import { AccordionContext } from "./AccordionContext";
 import { AccordionItemContext } from "./AccordionItem";
 
-export interface AccordionHeaderProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface AccordionHeaderProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * Text inside Accordion.Header
    */

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