@navikt/ds-react 7.30.0 → 7.31.0

package/src/overlays/floating/Floating.tsx

@@ -18,6 +18,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { useModalContext } from "../../modal/Modal.context";
 import { Slot } from "../../slot/Slot";
 import { createContext } from "../../util/create-context";
 import {
@@ -26,6 +27,7 @@ import {
   useMergeRefs,
 } from "../../util/hooks";
 import { AsChildProps } from "../../util/types";
+import { useOpenChangeComplete } from "../overlay/hooks/useOpenChangeComplete";
 import {
   type Align,
   type Measurable,
@@ -188,7 +190,17 @@ interface FloatingContentProps extends HTMLAttributes<HTMLDivElement> {
   collisionPadding?: number | Partial<Record<Side, number>>;
   hideWhenDetached?: boolean;
   updatePositionStrategy?: "optimized" | "always";
+  fallbackPlacements?: FlipOptions["fallbackPlacements"];
   onPlaced?: () => void;
+  /**
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Only use this option if your floating element is conditionally rendered, not hidden with CSS.
+   * @default true
+   */
+  autoUpdateWhileMounted?: boolean;
   arrow?: {
     className?: string;
     padding?: number;
@@ -212,11 +224,15 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
       updatePositionStrategy = "optimized",
       onPlaced,
       arrow: _arrow,
+      fallbackPlacements,
+      enabled = true,
+      autoUpdateWhileMounted = true,
       ...contentProps
     }: FloatingContentProps,
     forwardedRef,
   ) => {
     const context = useFloatingContext();
+    const modalContext = useModalContext(false);
 
     const arrowDefaults = {
       padding: 5,
@@ -256,68 +272,103 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
       altBoundary: hasExplicitBoundaries,
       /* https://floating-ui.com/docs/flip#fallbackaxissidedirection */
       fallbackAxisSideDirection: "end",
+      fallbackPlacements,
     };
 
-    const { refs, floatingStyles, placement, isPositioned, middlewareData } =
-      useFloating({
-        // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
-        strategy: "fixed",
-        placement: desiredPlacement,
-        whileElementsMounted: (...args) => {
-          const cleanup = autoUpdate(...args, {
-            animationFrame: updatePositionStrategy === "always",
-          });
-          return cleanup;
-        },
-        elements: {
-          reference: context.anchor,
-        },
-        middleware: [
-          offset({
-            mainAxis: sideOffset + arrowHeight,
-            alignmentAxis: alignOffset,
+    const {
+      refs,
+      floatingStyles,
+      placement,
+      isPositioned,
+      middlewareData,
+      elements: floatingElements,
+      update,
+    } = useFloating({
+      open: enabled,
+      // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
+      strategy: "fixed",
+      placement: desiredPlacement,
+      whileElementsMounted: autoUpdateWhileMounted
+        ? (...args) => {
+            const cleanup = autoUpdate(...args, {
+              animationFrame: updatePositionStrategy === "always",
+            });
+            return cleanup;
+          }
+        : undefined,
+      elements: {
+        reference: context.anchor,
+      },
+      middleware: [
+        offset({
+          mainAxis: sideOffset + arrowHeight,
+          alignmentAxis: alignOffset,
+        }),
+        avoidCollisions &&
+          shift({
+            mainAxis: true,
+            crossAxis: false,
+            limiter: limitShift(),
           }),
-          avoidCollisions &&
-            shift({
-              mainAxis: true,
-              crossAxis: false,
-              limiter: limitShift(),
-            }),
-          avoidCollisions && flip({ ...detectOverflowOptions }),
-          size({
-            ...detectOverflowOptions,
-            apply: ({ elements, rects, availableWidth, availableHeight }) => {
-              const { width: anchorWidth, height: anchorHeight } =
-                rects.reference;
-              const contentStyle = elements.floating.style;
-              /**
-               * Allows styling and animations based on the available space.
-               */
-              contentStyle.setProperty(
-                "--ac-floating-available-width",
-                `${availableWidth}px`,
-              );
-              contentStyle.setProperty(
-                "--ac-floating-available-height",
-                `${availableHeight}px`,
-              );
-              contentStyle.setProperty(
-                "--ac-floating-anchor-width",
-                `${anchorWidth}px`,
-              );
-              contentStyle.setProperty(
-                "--ac-floating-anchor-height",
-                `${anchorHeight}px`,
-              );
-            },
-          }),
-          arrow &&
-            floatingArrow({ element: arrow, padding: arrowDefaults.padding }),
-          transformOrigin({ arrowWidth, arrowHeight }),
-          hideWhenDetached &&
-            hide({ strategy: "referenceHidden", ...detectOverflowOptions }),
-        ],
-      });
+        avoidCollisions && flip({ ...detectOverflowOptions }),
+        size({
+          ...detectOverflowOptions,
+          apply: ({ elements, rects, availableWidth, availableHeight }) => {
+            const { width: anchorWidth, height: anchorHeight } =
+              rects.reference;
+            const contentStyle = elements.floating.style;
+            /**
+             * Allows styling and animations based on the available space.
+             */
+            contentStyle.setProperty(
+              "--ac-floating-available-width",
+              `${availableWidth}px`,
+            );
+            contentStyle.setProperty(
+              "--ac-floating-available-height",
+              `${availableHeight}px`,
+            );
+            contentStyle.setProperty(
+              "--ac-floating-anchor-width",
+              `${anchorWidth}px`,
+            );
+            contentStyle.setProperty(
+              "--ac-floating-anchor-height",
+              `${anchorHeight}px`,
+            );
+          },
+        }),
+        arrow &&
+          floatingArrow({ element: arrow, padding: arrowDefaults.padding }),
+        transformOrigin({ arrowWidth, arrowHeight }),
+        hideWhenDetached &&
+          hide({ strategy: "referenceHidden", ...detectOverflowOptions }),
+      ],
+    });
+
+    useEffect(() => {
+      if (autoUpdateWhileMounted || !enabled) {
+        return;
+      }
+      if (floatingElements.reference && floatingElements.floating) {
+        const cleanup = autoUpdate(
+          floatingElements.reference,
+          floatingElements.floating,
+          update,
+        );
+
+        return () => {
+          cleanup();
+        };
+      }
+    }, [autoUpdateWhileMounted, enabled, floatingElements, update]);
+
+    useOpenChangeComplete({
+      enabled: !!modalContext?.ref,
+      open: enabled,
+      ref: modalContext?.ref,
+      onComplete: update,
+    });
 
     const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
 

package/src/overlays/overlay/hooks/useAnimationsFinished.ts

@@ -0,0 +1,117 @@
+"use client";
+
+import React, { useCallback, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { useEventCallback } from "./useEventCallback";
+
+/**
+ * Returns a stable function that, when invoked, waits for all current CSS/Web Animations
+ * on a target element (and its subtree) to finish before executing a callback.
+ *
+ * Why:
+ *  - Coordinate logic (unmount, focus restore, measuring) after exit / enter animations.
+ *  - Avoid `animationend` event bookkeeping across multiple animations / nested elements.
+ *  - Batch detection using `requestAnimationFrame` so freshly-applied animations are discoverable.
+ *
+ * Mechanics:
+ *  1. Resolves the concrete `HTMLElement` (direct element or from ref) – early no-op if missing.
+ *  2. If `getAnimations` is unsupported or animations are globally disabled (`AKSEL_ANIMATIONS_DISABLED`),
+ *     runs the callback immediately.
+ *  3. Schedules a frame so style/animation changes applied this render are committed.
+ *  4. Optionally schedules an additional frame (`waitForNextTick=true`) to catch animations that
+ *     start only after layout (e.g. when an `open` class triggers the animation).
+ *  5. Captures all current animations, waits on their `.finished` promises (using `Promise.allSettled`
+ *     so rejections don't block), then `flushSync` executes the callback (ensures React state updates
+ *     inside run before the browser paints the next frame).
+ *  6. If an `AbortSignal` aborts while waiting, it silently cancels execution.
+ *
+ * @param elementOrRef HTMLElement or ref to observe.
+ * @param waitForNextTick If true, waits an extra frame to ensure enter animations are detectable.
+ * @returns Stable function (identity preserved) accepting (fn, abortSignal?).
+ */
+export function useAnimationsFinished(
+  elementOrRef: React.RefObject<HTMLElement | null> | HTMLElement | null,
+  waitForNextTick = false,
+) {
+  const rootFrameRef = React.useRef<number | null>(null);
+  const nestedFrameRef = React.useRef<number | null>(null);
+
+  const cancelScheduled = useCallback(() => {
+    for (const ref of [rootFrameRef, nestedFrameRef]) {
+      if (ref.current !== null) {
+        cancelAnimationFrame(ref.current);
+        ref.current = null;
+      }
+    }
+  }, []);
+
+  /* Unmount cleanup */
+  useEffect(() => {
+    return () => cancelScheduled();
+  }, [cancelScheduled]);
+
+  return useEventCallback(
+    (
+      /**
+       * A function to execute once all animations have finished.
+       */
+      fnToExecute: () => void,
+      /**
+       * An optional [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that
+       * can be used to abort `fnToExecute` before all the animations have finished.
+       * @default null
+       */
+      signal: AbortSignal | null = null,
+    ) => {
+      // Cancel any in-flight scheduling from a previous invocation (next-frame debounce semantics)
+      cancelScheduled();
+
+      if (elementOrRef == null) {
+        return;
+      }
+
+      const element =
+        "current" in elementOrRef ? elementOrRef.current : elementOrRef;
+      if (element == null) {
+        return;
+      }
+
+      // Fast path: no Web Animations API support OR animations globally disabled.
+      if (
+        typeof element.getAnimations !== "function" ||
+        // Flag hook for test envs.
+        (globalThis as any).AKSEL_ANIMATIONS_DISABLED
+      ) {
+        fnToExecute();
+        return;
+      }
+
+      rootFrameRef.current = requestAnimationFrame(() => {
+        function exec() {
+          if (!element) {
+            return;
+          }
+          // Collect animations present at this moment; we don't continuously observe
+          // if new animations start after these settle, caller should invoke again.
+          Promise.allSettled(
+            element.getAnimations().map((anim) => anim.finished),
+          ).then(() => {
+            if (signal?.aborted) return;
+            // Ensure any state updates inside the callback are flushed synchronously,
+            // guaranteeing that dependent logic observes the current
+            // tree rather than a stale in-progress update.
+            ReactDOM.flushSync(fnToExecute);
+          });
+        }
+
+        // Some animations (e.g. triggered by a class applied this same frame) only
+        // become observable after an extra frame; opt-in via flag.
+        if (waitForNextTick) {
+          nestedFrameRef.current = requestAnimationFrame(exec);
+        } else {
+          exec();
+        }
+      });
+    },
+  );
+}

package/src/overlays/overlay/hooks/useEventCallback.ts

@@ -0,0 +1,73 @@
+"use client";
+
+/**
+ * Stable event callback: returns a function whose identity never changes but always
+ * invokes the latest `callback`. Avoids stale closures without re‑creating handlers.
+ *
+ * Why not `useCallback`? Its identity depends on a deps array:
+ * - omit deps -> stale; include deps -> new function each render.
+ * - This hook decouples identity from freshness.
+ *
+ * How it works: a single stable "trampoline" function delegates to a mutable ref. The current
+ * `callback` is promoted from `next` in an insertion/layout phase effect so abandoned concurrent
+ * renders cannot leak outdated handlers.
+ *
+ * Guarantees: stable identity; latest logic executed; no calls from uncommitted renders; dev
+ * error if invoked during render; safe when `callback` is undefined (no-op).
+ */
+import React, { useLayoutEffect } from "react";
+import { useRefWithInit } from "./useRefWithInit";
+
+/* https://github.com/mui/material-ui/issues/41190#issuecomment-2040873379 */
+const useInsertionEffect = (React as any)[
+  `useInsertionEffect${Math.random().toFixed(1)}`.slice(0, -3)
+];
+
+const useSafeInsertionEffect =
+  // React 17 doesn't have useInsertionEffect.
+  useInsertionEffect &&
+  // Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
+  useInsertionEffect !== useLayoutEffect
+    ? useInsertionEffect
+    : (fn: any) => fn();
+
+type Callback = (...args: any[]) => any;
+
+type Stable<T extends Callback> = {
+  /** The next value for callback */
+  next: T | undefined;
+  /** The function to be called by trampoline. This must fail during the initial render phase. */
+  callback: T | undefined;
+  trampoline: T;
+  effect: () => void;
+};
+
+/**
+ * TODO: Long term, replace `useCallbackRef` with this hook.
+ */
+export function useEventCallback<T extends Callback>(
+  callback: T | undefined,
+): T {
+  const stable = useRefWithInit(createStableCallback).current as Stable<T>;
+  stable.next = callback;
+  useSafeInsertionEffect(stable.effect);
+  return stable.trampoline;
+}
+
+function createStableCallback() {
+  const stable: Stable<Callback> = {
+    next: undefined,
+    callback: assertNotCalled,
+    trampoline: (...args: any[]) => stable.callback?.(...args),
+    effect: () => {
+      stable.callback = stable.next;
+    },
+  };
+  return stable;
+}
+
+function assertNotCalled() {
+  if (process.env.NODE_ENV !== "production") {
+    throw new Error("Aksel: Cannot call an event handler while rendering.");
+  }
+}

package/src/overlays/overlay/hooks/useLatestRef.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import { useClientLayoutEffect } from "../../../util";
+import { useRefWithInit } from "./useRefWithInit";
+
+export function useLatestRef<T>(value: T) {
+  const latest = useRefWithInit(createLatestRef, value).current!;
+
+  latest.next = value;
+
+  useClientLayoutEffect(latest.effect);
+
+  return latest;
+}
+
+function createLatestRef<T>(value: T) {
+  const latest = {
+    current: value,
+    next: value,
+    effect: () => {
+      latest.current = latest.next;
+    },
+  };
+  return latest;
+}

package/src/overlays/overlay/hooks/useOpenChangeComplete.ts

@@ -0,0 +1,66 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { useAnimationsFinished } from "./useAnimationsFinished";
+import { useEventCallback } from "./useEventCallback";
+import { useLatestRef } from "./useLatestRef";
+
+interface useOpenChangeCompleteParameters {
+  /**
+   * Enable / disable the effect. Disabled => no animation tracking / callback.
+   * @default true
+   */
+  enabled?: boolean;
+  /**
+   * Current open state (e.g. popover open). When this flips we wait for any
+   * associated CSS/Web animations on `ref` to finish before firing `onComplete`.
+   */
+  open?: boolean;
+  /**
+   * Element whose animations/transition we observe. Should be stable while the
+   * open/close animation runs (typically the root animated node).
+   */
+  ref?: React.RefObject<HTMLElement | null>;
+  /**
+   * Called exactly once per open-change cycle after animations finish OR
+   * immediately if animations are disabled / unsupported.
+   */
+  onComplete: () => void;
+}
+
+/**
+ * Waits for the element's current Web Animations / CSS transitions to finish after an
+ * `open` state change, then invokes `onComplete`. Guards against race conditions by
+ * comparing the `open` value captured at scheduling time with the latest `open` via ref;
+ * if they differ (state flipped again mid‑animation) the callback is skipped.
+ */
+export function useOpenChangeComplete(
+  parameters: useOpenChangeCompleteParameters,
+) {
+  const {
+    enabled = true,
+    open,
+    ref = null,
+    onComplete: onCompleteParam,
+  } = parameters;
+
+  const openRef = useLatestRef(open);
+  const onComplete = useEventCallback(onCompleteParam);
+  const runOnceAnimationsFinish = useAnimationsFinished(ref, open);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    /*
+     * Schedule completion once the *current* set of animations settle. If during
+     * that wait `open` toggles again, skip to avoid firing for an outdated cycle.
+     */
+    runOnceAnimationsFinish(() => {
+      if (open === openRef.current) {
+        onComplete();
+      }
+    });
+  }, [enabled, open, onComplete, runOnceAnimationsFinish, openRef]);
+}

package/src/overlays/overlay/hooks/useRefWithInit.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import React, { useRef } from "react";
+
+const UNINITIALIZED = {};
+
+/**
+ * useRef initialized with a function on mount.
+ */
+function useRefWithInit<T>(init: () => T): React.RefObject<T>;
+function useRefWithInit<T, U>(
+  init: (arg: U) => T,
+  initArg: U,
+): React.RefObject<T>;
+function useRefWithInit(init: (arg?: unknown) => unknown, initArg?: unknown) {
+  const ref = useRef(UNINITIALIZED as any);
+
+  if (ref.current === UNINITIALIZED) {
+    ref.current = init(initArg);
+  }
+
+  return ref;
+}
+
+export { useRefWithInit };

package/src/pagination/PaginationItem.tsx

@@ -46,7 +46,7 @@ export const Item: PaginationItemType = forwardRef(
     return (
       <Button
         as={Component}
-        variant={themeContext ? "tertiary-neutral" : "tertiary"}
+        variant={themeContext?.isDarkside ? "tertiary-neutral" : "tertiary"}
         data-color={color}
         aria-current={selected}
         data-pressed={selected}

package/src/popover/Popover.tsx

@@ -138,7 +138,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
       placement,
       open,
       middleware: [
-        flOffset(offset ?? (themeContext ? 8 : arrow ? 16 : 4)),
+        flOffset(offset ?? (themeContext?.isDarkside ? 8 : arrow ? 16 : 4)),
         chosenFlip &&
           flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
         shift({ padding: 12 }),
@@ -191,7 +191,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
         >
           {children}
           {/* Hide arrow in new design, prop will be removed in breaking change update */}
-          {arrow && !themeContext && (
+          {arrow && !themeContext?.isDarkside && (
             <div
               ref={(node) => {
                 arrowRef.current = node;

package/src/portal/Portal.tsx

@@ -26,7 +26,7 @@ export const Portal = forwardRef<HTMLDivElement, PortalProps>(
      * Portal can be mounted outside of theme-classNames.
      * If a theme is present, we want to make sure that theme cascades to portaled element.
      */
-    if (themeContext) {
+    if (themeContext?.isDarkside) {
       return root
         ? ReactDOM.createPortal(
             <Theme

package/src/table/ExpandableRow.tsx

@@ -8,8 +8,10 @@ import { useI18n } from "../util/i18n/i18n.hooks";
 import AnimateHeight from "./AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
+import { isElementInteractiveTarget } from "./Table.utils";
 
-export interface ExpandableRowProps extends Omit<RowProps, "content"> {
+export interface ExpandableRowProps
+  extends Omit<RowProps, "content" | "onRowClick"> {
   /**
    * Content of the expanded row
    */
@@ -96,7 +98,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
     const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
       expandOnRowClick &&
         !expansionDisabled &&
-        !isInteractiveTarget(event.target as HTMLElement) &&
+        !isElementInteractiveTarget(event.target as HTMLElement) &&
         expansionHandler(event);
     };
 
@@ -167,19 +169,4 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
   },
 );
 
-function isInteractiveTarget(elm: HTMLElement) {
-  if (elm.nodeName === "TD" || elm.nodeName === "TH" || !elm.parentElement) {
-    return false;
-  }
-  if (
-    ["BUTTON", "DETAILS", "LABEL", "SELECT", "TEXTAREA", "INPUT", "A"].includes(
-      elm.nodeName,
-    )
-  ) {
-    return true;
-  }
-
-  return isInteractiveTarget(elm.parentElement);
-}
-
 export default ExpandableRow;

package/src/table/Row.tsx

@@ -1,5 +1,7 @@
 import React, { forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { isElementInteractiveTarget } from "./Table.utils";
 
 export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   /**
@@ -12,6 +14,13 @@ export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
    * @default true
    */
   shadeOnHover?: boolean;
+  /**
+   * Click handler for row. This differs from onClick by not being called
+   * when clicking on interactive elements within the row (buttons, links, inputs etc).
+   *
+   * **Warning:** This will not be accessible by keyboard! Provide an alternative way to select the row, e.g. a checkbox or a button.
+   */
+  onRowClick?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
 }
 
 export type RowType = React.ForwardRefExoticComponent<
@@ -19,8 +28,29 @@ export type RowType = React.ForwardRefExoticComponent<
 >;
 
 export const Row: RowType = forwardRef(
-  ({ className, selected = false, shadeOnHover = true, ...rest }, ref) => {
+  (
+    {
+      className,
+      selected = false,
+      shadeOnHover = true,
+      onClick,
+      onRowClick,
+      ...rest
+    },
+    ref,
+  ) => {
     const { cn } = useRenameCSS();
+
+    const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
+      if (!onRowClick) {
+        return;
+      }
+      if (isElementInteractiveTarget(event.target as HTMLElement)) {
+        return;
+      }
+      onRowClick(event);
+    };
+
     return (
       <tr
         {...rest}
@@ -29,6 +59,8 @@ export const Row: RowType = forwardRef(
           "navds-table__row--selected": selected,
           "navds-table__row--shade-on-hover": shadeOnHover,
         })}
+        onClick={composeEventHandlers(onClick, handleRowClick)}
+        data-interactive={!!onRowClick}
       />
     );
   },