@navikt/ds-react 8.2.2 → 8.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "8.2.2",
+  "version": "8.4.0",
   "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.2.2",
-    "@navikt/ds-tokens": "^8.2.2",
+    "@navikt/aksel-icons": "^8.4.0",
+    "@navikt/ds-tokens": "^8.4.0",
     "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

@@ -0,0 +1,215 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Button } from "../../button";
+import { Box } from "../../primitives/box";
+import { VStack } from "../../primitives/stack";
+import { Heading } from "../../typography";
+
+type DataTableProfilerProps = {
+  children: React.ReactNode;
+};
+
+type ProfilerEntry = {
+  duration: string;
+  timestamp: number;
+};
+
+type ProfilerState = {
+  actualDuration: ProfilerEntry[];
+};
+
+function DataTableProfiler({ children }: DataTableProfilerProps) {
+  const lastProfilerStateRef = useRef<Record<string, ProfilerState>>({});
+
+  return (
+    <div>
+      <ProfilerDisplay getLatestData={() => lastProfilerStateRef.current} />
+      <React.Profiler
+        id="DataTable"
+        onRender={(_, phase, actualDuration) => {
+          lastProfilerStateRef.current = {
+            ...lastProfilerStateRef.current,
+            [phase]: {
+              actualDuration: rollingLatestValues(
+                lastProfilerStateRef.current[phase]?.actualDuration || [],
+                { duration: actualDuration.toFixed(2), timestamp: Date.now() },
+                10,
+              ),
+            },
+          };
+        }}
+      >
+        <div id="dataTable-profiler-content">{children}</div>
+      </React.Profiler>
+    </div>
+  );
+}
+
+function rollingLatestValues(
+  arr: ProfilerEntry[],
+  newValue: ProfilerEntry,
+  maxLength: number,
+): ProfilerEntry[] {
+  let newArr = [newValue, ...arr];
+  if (newArr.length > maxLength) {
+    newArr = newArr.slice(0, -1);
+  }
+  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,
+}: {
+  getLatestData: () => Record<string, ProfilerState>;
+}) {
+  const [open, setOpen] = useState(false);
+  const [domStats, setDomStats] = useState<{
+    elements: number;
+    nodes: number;
+  } | null>(null);
+  const [, setTick] = useState(0);
+
+  const lastProfilerState = getLatestData();
+
+  useEffect(() => {
+    if (!open) return;
+    const interval = setInterval(() => {
+      const dataTableElement = document.getElementById(
+        "dataTable-profiler-content",
+      );
+      if (dataTableElement) {
+        const walker = document.createTreeWalker(
+          dataTableElement,
+          NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
+          null,
+        );
+        let elements = 0;
+        let nodes = 0;
+        while (walker.nextNode()) {
+          nodes++;
+          if (walker.currentNode.nodeType === Node.ELEMENT_NODE) {
+            elements++;
+          }
+        }
+        setDomStats({ elements, nodes });
+      }
+      setTick((t) => t + 1);
+    }, 500);
+    return () => clearInterval(interval);
+  }, [open]);
+
+  return (
+    <VStack asChild>
+      <Box
+        position="fixed"
+        top="space-4"
+        right="space-4"
+        padding="space-6"
+        background="raised"
+        borderRadius="8"
+        borderWidth="1"
+        borderColor="neutral-subtleA"
+        style={{ zIndex: 1000 }}
+      >
+        <Button
+          data-color="neutral"
+          variant="tertiary"
+          size="small"
+          onClick={() => setOpen(!open)}
+        >
+          {open ? "Hide Profiler" : "Show Profiler"}
+        </Button>
+        {open && (
+          <>
+            {!domStats && <div>Loading stats...</div>}
+            {domStats && (
+              <div>
+                <Heading level="2" size="xsmall">
+                  DOM Stats:
+                </Heading>
+                <ul style={{ margin: 0, paddingLeft: "1rem" }}>
+                  <li
+                    style={{ listStyle: "none" }}
+                  >{`${domStats.elements} elements`}</li>
+                  <li
+                    style={{ listStyle: "none" }}
+                  >{`${domStats.nodes} nodes`}</li>
+                </ul>
+              </div>
+            )}
+            {lastProfilerState.mount && (
+              <div>
+                <Heading level="2" size="xsmall">
+                  Mount:
+                </Heading>
+                <ul style={{ margin: 0, paddingLeft: "1rem" }}>
+                  {lastProfilerState.mount.actualDuration.map(
+                    (entry, index) => (
+                      <li
+                        style={{
+                          listStyle: "none",
+                          opacity: getOpacity(entry.timestamp),
+                          transition: "opacity 0.5s",
+                        }}
+                        key={index}
+                      >{`${entry.duration} ms`}</li>
+                    ),
+                  )}
+                </ul>
+              </div>
+            )}
+            {lastProfilerState.update && (
+              <div>
+                <Heading level="2" size="xsmall">
+                  Update:
+                </Heading>
+                <ul style={{ margin: 0, paddingLeft: "1rem" }}>
+                  {lastProfilerState.update.actualDuration.map(
+                    (entry, index) => (
+                      <li
+                        style={{
+                          listStyle: "none",
+                          opacity: getOpacity(entry.timestamp),
+                          transition: "opacity 0.5s",
+                        }}
+                        key={index}
+                      >{`${entry.duration} ms`}</li>
+                    ),
+                  )}
+                </ul>
+              </div>
+            )}
+            {lastProfilerState["nested-update"] && (
+              <div>
+                <Heading level="2" size="xsmall">
+                  Nested-update
+                </Heading>
+                <ul style={{ margin: 0, paddingLeft: "1rem" }}>
+                  {lastProfilerState["nested-update"].actualDuration.map(
+                    (entry, index) => (
+                      <li
+                        style={{
+                          listStyle: "none",
+                          opacity: getOpacity(entry.timestamp),
+                          transition: "opacity 0.5s",
+                        }}
+                        key={index}
+                      >{`${entry.duration} ms`}</li>
+                    ),
+                  )}
+                </ul>
+              </div>
+            )}
+          </>
+        )}
+      </Box>
+    </VStack>
+  );
+}
+
+export { DataTableProfiler };