@navikt/ds-react 7.30.1 → 7.32.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 { useOpenChangeAnimationComplete } from "../overlay/hooks/useOpenChangeAnimationComplete";
 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]);
+
+    useOpenChangeAnimationComplete({
+      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/useOpenChangeAnimationComplete.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 useOpenChangeAnimationCompleteParameters {
+  /**
+   * 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 useOpenChangeAnimationComplete(
+  parameters: useOpenChangeAnimationCompleteParameters,
+) {
+  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/overlays/overlay/hooks/useTransitionStatus.ts

@@ -0,0 +1,145 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import ReactDOM from "react-dom";
+import { useClientLayoutEffect } from "../../../util";
+
+type TransitionStatus = "entering" | "exiting" | "idle" | undefined;
+
+/**
+ * Transition status state machine for components that animate between an
+ * `open` boolean and actual mount/unmount. Keeps the element mounted while
+ * exit animations run and introduces an optional stable `idle` phase.
+ *
+ * Adapted from MUI Base + Floating UI examples:
+ *  - Source: https://github.com/mui/base-ui/blob/6fd69008d83561dbe75ff89acf270f0fac3e0049/packages/react/src/utils/useTransitionStatus.ts
+ *  - Originally based on https://github.com/floating-ui/floating-ui/blob/7c33a3d0198a9b523d54ae2c37cedb315a309452/packages/react/src/hooks/useTransition.ts
+ *
+ * States (transitionStatus):
+ *  - "entering"  : just entered (initial frame of enter) OR re-entering to reach "idle".
+ *  - "idle"      : stable open (only when `enableIdleState === true`).
+ *  - "exiting"   : exit animation is running; element still mounted.
+ *  - undefined   : closed (unmounted) OR stable open when idle state is disabled.
+ *                   When `enableIdleState` is false we clear the label after
+ *                   the first frame so styling can rely purely on `mounted`.
+ *
+ * Distinction:
+ *  - `mounted` tells you whether to render DOM.
+ *  - `transitionStatus` tells you which phase-specific classes to apply.
+ *
+ * Frame separation: state changes that must trigger CSS transitions are
+ * scheduled with `requestAnimationFrame` so the browser sees distinct style
+ * mutations across frames (avoids missed transitions due to batching).
+ *
+ * @param open              Controls visibility lifecycle.
+ * @param enableIdleState   Insert a persistent "idle" phase after entering.
+ * @param deferExitingState  Delay entering the exit phase by one frame to allow
+ *                          measurement / layout work before applying exit styles.
+ */
+function useTransitionStatus(
+  open: boolean,
+  enableIdleState: boolean = false,
+  deferExitingState: boolean = false,
+) {
+  const [mounted, setMounted] = useState(open);
+  const [transitionStatus, setTransitionStatus] = useState<TransitionStatus>(
+    open && enableIdleState ? "idle" : undefined,
+  );
+
+  /* Opening: mount immediately and label as "entering" for the first frame. */
+  if (open && !mounted) {
+    setMounted(true);
+    setTransitionStatus("entering");
+  }
+
+  /* Closing (no defer): begin exit animation right away. */
+  if (
+    !open &&
+    mounted &&
+    transitionStatus !== "exiting" &&
+    !deferExitingState
+  ) {
+    setTransitionStatus("exiting");
+  }
+
+  /* Cleanup: after unmount post-exit ensure status returns to undefined. */
+  if (!open && !mounted && transitionStatus === "exiting") {
+    setTransitionStatus(undefined);
+  }
+
+  /* Deferred closing: provide one frame to measure / flush layout before exit styles. */
+  useClientLayoutEffect(() => {
+    if (
+      !open &&
+      mounted &&
+      transitionStatus !== "exiting" &&
+      deferExitingState
+    ) {
+      const frame = requestAnimationFrame(() => {
+        setTransitionStatus("exiting");
+      });
+
+      return () => {
+        cancelAnimationFrame(frame);
+      };
+    }
+
+    return undefined;
+  }, [open, mounted, transitionStatus, deferExitingState]);
+
+  /* Enter (no idle): hold "entering" for one frame, then clear label (stable open). */
+  useClientLayoutEffect(() => {
+    if (!open || enableIdleState) {
+      return undefined;
+    }
+
+    const frame = requestAnimationFrame(() => {
+      ReactDOM.flushSync(() => {
+        setTransitionStatus(undefined);
+      });
+    });
+
+    return () => {
+      cancelAnimationFrame(frame);
+    };
+  }, [enableIdleState, open]);
+
+  useClientLayoutEffect(() => {
+    if (!open || !enableIdleState) {
+      return undefined;
+    }
+
+    /*
+     * We can enter this state by re-opening before exiting-state was finished
+     * (open → close → open in quick succession).
+     */
+    if (open && mounted && transitionStatus !== "idle") {
+      setTransitionStatus("entering");
+    }
+
+    /**
+     * Next frame, after "entering", switch to persistent "idle" state.
+     * By delaying to the next frame we ensure any "entering" styles are
+     * applied and the transition can run.
+     */
+    const frame = requestAnimationFrame(() => {
+      setTransitionStatus("idle");
+    });
+
+    return () => {
+      cancelAnimationFrame(frame);
+    };
+  }, [enableIdleState, open, mounted, setTransitionStatus, transitionStatus]);
+
+  return useMemo(
+    () => ({
+      mounted,
+      setMounted,
+      transitionStatus,
+    }),
+    [mounted, transitionStatus],
+  );
+}
+
+export { useTransitionStatus };
+export type { TransitionStatus };

package/src/progress-bar/ProgressBar.tsx

@@ -95,7 +95,7 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
   ) => {
     const { cn } = useRenameCSS();
     const translateX = 100 - (Math.round(value) / valueMax) * 100;
-    const onTimeoutRef = useRef<() => void>();
+    const onTimeoutRef = useRef<() => void>(undefined);
     onTimeoutRef.current = simulated?.onTimeout;
     const translate = useI18n("ProgressBar");