@navikt/ds-react 7.36.0 → 7.38.0

package/src/toggle-group/parts/useToggleItem.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { mergeRefs } from "../../util/hooks/useMergeRefs";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import {
   useToggleGroupContext,
   useToggleGroupDescendant,
@@ -96,8 +96,10 @@ export function useToggleItem<P extends UseToggleItemProps>(
     [descendants, focusedValue, selectedValue, setFocusedValue],
   );
 
+  const refs = useMergeRefs(register, ref);
+
   return {
-    ref: mergeRefs([register, ref]),
+    ref: refs,
     isSelected,
     isFocused: focusedValue === value,
     onClick: composeEventHandlers(

package/src/tooltip/Tooltip.tsx

@@ -133,7 +133,9 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     const arrowRef = useRef<HTMLDivElement | null>(null);
     const modalContext = useModalContext(false);
-    const rootElement = modalContext ? modalContext.ref.current : undefined;
+    const rootElement = modalContext
+      ? modalContext.modalRef.current
+      : undefined;
 
     const {
       x,

package/src/util/__tests__/useMergeRefs.test.ts

@@ -0,0 +1,92 @@
+import { renderHook } from "@testing-library/react";
+import { useRef } from "react";
+import { describe, expect, test, vi } from "vitest";
+import { useMergeRefs } from "../hooks/useMergeRefs";
+
+describe("useMergeRefs", () => {
+  test("returns null when all refs are null or undefined", () => {
+    const { result } = renderHook(() => useMergeRefs(null, undefined));
+    expect(result.current).toBeNull();
+  });
+
+  test("assigns instance to object ref", () => {
+    const { result } = renderHook(() => {
+      const ref = useRef<HTMLDivElement | null>(null);
+      return { merged: useMergeRefs(ref, null), ref };
+    });
+
+    const div = document.createElement("div");
+    result.current.merged?.(div);
+
+    expect(result.current.ref.current).toBe(div);
+  });
+
+  test("calls function ref with instance", () => {
+    const fnRef = vi.fn();
+    const { result } = renderHook(() => useMergeRefs(fnRef, null));
+
+    const div = document.createElement("div");
+    result.current?.(div);
+
+    expect(fnRef).toHaveBeenCalledWith(div);
+  });
+
+  test("handles mixed ref types", () => {
+    const fnRef = vi.fn();
+    const { result } = renderHook(() => {
+      const objRef = useRef<HTMLDivElement | null>(null);
+      return { merged: useMergeRefs(objRef, fnRef, null), objRef };
+    });
+
+    const div = document.createElement("div");
+    result.current.merged?.(div);
+
+    expect(result.current.objRef.current).toBe(div);
+    expect(fnRef).toHaveBeenCalledWith(div);
+  });
+
+  test("cleanup resets object ref to null", () => {
+    const { result } = renderHook(() => {
+      const ref = useRef<HTMLDivElement | null>(null);
+      return { merged: useMergeRefs(ref, null), ref };
+    });
+
+    const div = document.createElement("div");
+    result.current.merged?.(div);
+    expect(result.current.ref.current).toBe(div);
+
+    result.current.merged?.(null);
+    expect(result.current.ref.current).toBeNull();
+  });
+
+  test("cleanup calls returned cleanup function from callback ref", () => {
+    const cleanup = vi.fn();
+    const fnRef = vi.fn().mockReturnValue(cleanup);
+    const { result } = renderHook(() => useMergeRefs(fnRef, null));
+
+    const div1 = document.createElement("div");
+    result.current?.(div1);
+
+    const div2 = document.createElement("div");
+    result.current?.(div2);
+
+    expect(cleanup).toHaveBeenCalledTimes(1);
+    expect(fnRef).not.toHaveBeenCalledWith(null);
+  });
+
+  test("runs previous cleanup before assigning new instance", () => {
+    const callOrder: string[] = [];
+    const cleanup = vi.fn(() => callOrder.push("cleanup"));
+    const fnRef = vi.fn(() => {
+      callOrder.push("ref");
+      return cleanup;
+    });
+
+    const { result } = renderHook(() => useMergeRefs(fnRef, null));
+
+    result.current?.(document.createElement("div"));
+    result.current?.(document.createElement("div"));
+
+    expect(callOrder).toEqual(["ref", "cleanup", "ref"]);
+  });
+});

package/src/util/composition-warning/CompositionWarning.tsx

@@ -13,7 +13,7 @@
  */
 import React, { useEffect, useRef } from "react";
 import { Slot } from "../../slot/Slot";
-import { createContext } from "../create-context";
+import { createStrictContext } from "../create-strict-context";
 
 type CompositionName = string;
 
@@ -26,8 +26,9 @@ type CompositionWarningContextType = {
   name: CompositionName;
 };
 
-const [CompositionWarning, useCompositionWarning] =
-  createContext<CompositionWarningContextType>({
+const { Provider: CompositionWarning, useContext: useCompositionWarning } =
+  createStrictContext<CompositionWarningContextType>({
+    name: "CompositionWarningContext",
     errorMessage:
       "useCompositionWarning() must be used within <CompositionWarning />",
   });

package/src/util/create-strict-context.tsx

@@ -0,0 +1,91 @@
+/**
+ * Custom createStrictContext to consolidate context-implementation across the system.
+ * Unlike React's createContext, this throws an error by default when used outside a provider.
+ *
+ * Inspired by:
+ * - https://github.com/radix-ui/primitives/blob/main/packages/react/context/src/createContext.tsx
+ * - https://github.com/chakra-ui/chakra-ui/blob/5ec0be610b5a69afba01a9c22365155c1b519136/packages/hooks/context/src/index.ts
+ */
+import React, {
+  createContext as createReactContext,
+  useContext as useReactContext,
+} from "react";
+
+type ProviderProps<T> = T & { children: React.ReactNode; ref?: never };
+
+function getErrorMessage(name: string) {
+  return `Aksel: use${name}Context returned \`undefined\`. Seems you forgot to wrap component within ${name}Provider`;
+}
+
+/* -----------------------------------------------------------------------------
+ * Overload signatures
+ * -------------------------------------------------------------------------- */
+
+/**
+ * When defaultValue is provided, context is always defined.
+ * The hook will always return T (no strict parameter needed).
+ */
+function createStrictContext<T>(options: {
+  name: string;
+  errorMessage?: string;
+  defaultValue: T;
+}): { Provider: React.FC<ProviderProps<T>>; useContext: () => T };
+
+/**
+ * When no defaultValue is provided, context may be undefined.
+ * The hook accepts an optional `strict` parameter (default: true).
+ * - strict=true (default): throws if undefined, returns T
+ * - strict=false: returns T | undefined
+ */
+function createStrictContext<T>(options: {
+  name: string;
+  errorMessage?: string;
+  defaultValue?: undefined;
+}): {
+  Provider: React.FC<ProviderProps<T>>;
+  useContext: <S extends boolean = true>(
+    strict?: S,
+  ) => S extends true ? T : T | undefined;
+};
+
+/* -----------------------------------------------------------------------------
+ * Implementation
+ * -------------------------------------------------------------------------- */
+
+function createStrictContext<T>(options: {
+  name: string;
+  errorMessage?: string;
+  defaultValue?: T;
+}) {
+  const { name, defaultValue, errorMessage } = options;
+  const hasDefault = "defaultValue" in options;
+
+  const Context = createReactContext<T | undefined>(defaultValue);
+  Context.displayName = name;
+
+  function Provider({ children, ...context }: ProviderProps<T>) {
+    // biome-ignore lint/correctness/useExhaustiveDependencies: Object.values(context) includes all dependencies.
+    const value = React.useMemo(() => context, Object.values(context)) as T; // eslint-disable-line react-hooks/exhaustive-deps
+
+    return <Context.Provider value={value}>{children}</Context.Provider>;
+  }
+
+  Provider.displayName = `${name}Provider`;
+
+  function useContext(strict = true) {
+    const context = useReactContext(Context);
+
+    if (!hasDefault && !context && strict) {
+      const error = new Error(errorMessage ?? getErrorMessage(name));
+      error.name = "ContextError";
+      Error.captureStackTrace?.(error, useContext);
+      throw error;
+    }
+
+    return context;
+  }
+
+  return { Provider, useContext } as const;
+}
+
+export { createStrictContext };

package/src/util/focus-boundary/FocusBoundary.tsx

@@ -8,8 +8,9 @@ import React, {
 import { Slot } from "../../slot/Slot";
 import { useClientLayoutEffect, useMergeRefs } from "../../util/hooks";
 import { hideNonTargetElements } from "../hideNonTargetElements";
-import { useLatestRef } from "../hooks/useLatestRef";
+import { useValueAsRef } from "../hooks/useValueAsRef";
 import { ownerDocument } from "../owner";
+import { resolveRef } from "../resolveRef";
 
 /* -------------------------------------------------------------------------- */
 /*                                 FocusBoundary                                 */
@@ -59,7 +60,10 @@ interface FocusBoundaryProps extends React.HTMLAttributes<HTMLDivElement> {
    *
    * Set to `false` to not focus anything.
    */
-  returnFocus?: boolean | React.MutableRefObject<HTMLElement | null>;
+  returnFocus?:
+    | boolean
+    | React.MutableRefObject<HTMLElement | null>
+    | (() => boolean | HTMLElement | null | undefined);
   /**
    * Hides all outside content from screen readers when true.
    * @default false
@@ -79,8 +83,8 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
     }: FocusBoundaryProps,
     forwardedRef,
   ) => {
-    const initialFocusRef = useLatestRef(initialFocus);
-    const returnFocusRef = useLatestRef(returnFocus);
+    const initialFocusRef = useValueAsRef(initialFocus);
+    const returnFocusRef = useValueAsRef(returnFocus);
 
     const lastFocusedElementRef = useRef<HTMLElement | null>(null);
     const [container, setContainer] = useState<HTMLElement | null>(null);
@@ -121,7 +125,6 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
         }
 
         const relatedTarget = event.relatedTarget as HTMLElement | null;
-
         /*
          * `focusout` event with a `null` `relatedTarget` will happen in a few known cases:
          * 1. When the user switches app/tabs/windows/the browser itself loses focus.
@@ -181,6 +184,11 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
         return;
       }
 
+      const ownerDoc = ownerDocument(container);
+      const activeElement = ownerDoc.activeElement;
+      const closestContainer = activeElement?.closest("[data-focus-boundary]");
+
+      addPreviouslyFocusedElement(ownerDoc.activeElement, closestContainer);
       focusBoundarysStack.add(focusBoundary);
 
       return () => {
@@ -190,6 +198,17 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
       };
     }, [container, focusBoundary]);
 
+    /**
+     * On unmount, we need to clean up previously focused elements associated with this container
+     * This makes sure we don't accidentally try to focus elements that are no longer relevant
+     * or will be removed from the DOM.
+     */
+    useEffect(() => {
+      return () => {
+        container && deleteContainerAndPreviouslyFocusedElements(container);
+      };
+    }, [container]);
+
     useEffect(() => {
       if (!container || !modal) {
         return;
@@ -253,10 +272,14 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
         return;
       }
       const ownerDoc = ownerDocument(container);
-      const previouslyFocusedElement = ownerDoc.activeElement;
 
       function getReturnElement() {
-        let resolvedReturnFocusValue = returnFocusRef.current;
+        const resolvedReturnFocusValueOrFn = returnFocusRef.current;
+
+        let resolvedReturnFocusValue =
+          typeof resolvedReturnFocusValueOrFn === "function"
+            ? resolvedReturnFocusValueOrFn()
+            : resolvedReturnFocusValueOrFn;
 
         if (
           resolvedReturnFocusValue === undefined ||
@@ -271,11 +294,11 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
         }
 
         if (typeof resolvedReturnFocusValue === "boolean") {
-          const el = previouslyFocusedElement;
+          const el = getPreviouslyFocusedElement();
           return el?.isConnected ? el : ownerDoc.body;
         }
 
-        const fallback = previouslyFocusedElement || ownerDoc.body;
+        const fallback = getPreviouslyFocusedElement() || ownerDoc.body;
 
         return resolveRef(resolvedReturnFocusValue) || fallback;
       }
@@ -354,6 +377,7 @@ const FocusBoundary = forwardRef<HTMLDivElement, FocusBoundaryProps>(
         {...restProps}
         ref={mergedRefs}
         onKeyDown={handleKeyDown}
+        data-focus-boundary
       />
     );
   },
@@ -508,16 +532,51 @@ function removeLinks(items: HTMLElement[]) {
   return items.filter((item) => item.tagName !== "A");
 }
 
+const LIST_LIMIT = 10;
+let previouslyFocusedElements: Element[] = [];
+const focusedElementsByContainer = new WeakMap<Element, Element[]>();
+
+function clearDisconnectedPreviouslyFocusedElements() {
+  previouslyFocusedElements = previouslyFocusedElements.filter(
+    (el) => el.isConnected,
+  );
+}
+
 /**
- * If the provided argument is a ref object, returns its `current` value.
- * Otherwise, returns the argument itself.
- *
- * Non-generic to safely handle refs whose `.current` may be `null`.
+ * Removes "will be" unmounted elements from previouslyFocusedElements,
+ * and deletes the container from focusedElementsByContainer.
  */
-function resolveRef(
-  maybeRef: HTMLElement | React.RefObject<HTMLElement | null | undefined>,
-): HTMLElement | null | undefined {
-  return "current" in maybeRef ? maybeRef.current : maybeRef;
+function deleteContainerAndPreviouslyFocusedElements(container: HTMLElement) {
+  const nestedElements = focusedElementsByContainer.get(container) || [];
+  previouslyFocusedElements = previouslyFocusedElements.filter((el) => {
+    return !nestedElements.includes(el);
+  });
+  focusedElementsByContainer.delete(container);
+}
+
+function addPreviouslyFocusedElement(
+  element: Element | null,
+  container: Element | null | undefined,
+) {
+  clearDisconnectedPreviouslyFocusedElements();
+  if (element && element?.nodeName !== "BODY") {
+    previouslyFocusedElements.push(element);
+
+    if (container) {
+      const nestedElements = focusedElementsByContainer.get(container) || [];
+      nestedElements.push(element);
+      focusedElementsByContainer.set(container, nestedElements);
+    }
+
+    if (previouslyFocusedElements.length > LIST_LIMIT) {
+      previouslyFocusedElements = previouslyFocusedElements.slice(-LIST_LIMIT);
+    }
+  }
+}
+
+function getPreviouslyFocusedElement() {
+  clearDisconnectedPreviouslyFocusedElements();
+  return previouslyFocusedElements[previouslyFocusedElements.length - 1];
 }
 
 export { FocusBoundary };

package/src/util/hideNonTargetElements.ts

@@ -169,11 +169,11 @@ function hideNonTargetElements(avoidElements: Element[]): UndoFn {
    * Assume that elements with `aria-live` or `script` tags should not be hidden.
    * This ensures that live regions and scripts continue to function properly.
    */
-  const ingoredElements = Array.from(
+  const ignoredElements = Array.from(
     body.querySelectorAll("[aria-live], script"),
   );
 
-  return applyAttributeToOthers(avoidElements.concat(ingoredElements), body);
+  return applyAttributeToOthers(avoidElements.concat(ignoredElements), body);
 }
 
 export { hideNonTargetElements };

package/src/util/hooks/descendants/useDescendant.tsx

@@ -2,9 +2,9 @@
  * https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/components/descendant
  */
 import React, { useRef, useState } from "react";
-import { createContext } from "../../create-context";
+import { createStrictContext } from "../../create-strict-context";
 import { useClientLayoutEffect } from "../useClientLayoutEffect";
-import { mergeRefs } from "../useMergeRefs";
+import { useMergeRefs } from "../useMergeRefs";
 import { DescendantOptions, DescendantsManager } from "./descendant";
 import { cast } from "./utils";
 
@@ -15,9 +15,10 @@ export function createDescendantContext<
   T extends HTMLElement = HTMLElement,
   K extends Record<string, any> = object,
 >() {
-  const [DescendantsContextProvider, useDescendantsContext] = createContext<
-    ReturnType<typeof useDescendants>
-  >({
+  const {
+    Provider: DescendantsContextProvider,
+    useContext: useDescendantsContext,
+  } = createStrictContext<ReturnType<typeof useDescendants>>({
     name: "DescendantsProvider",
     errorMessage:
       "useDescendantsContext must be used within DescendantsProvider",
@@ -65,11 +66,13 @@ export function createDescendantContext<
       ? cast<React.RefCallback<T>>(descendants.register(options))
       : cast<React.RefCallback<T>>(descendants.register);
 
+    const refs = useMergeRefs(refCallback, ref);
+
     return {
       descendants,
       index,
       enabledIndex: descendants.enabledIndexOf(ref.current),
-      register: mergeRefs([refCallback, ref]),
+      register: refs,
     };
   }
 

package/src/util/hooks/index.ts

@@ -1,4 +1,3 @@
-export { useCallbackRef } from "./useCallbackRef";
 export { useClientLayoutEffect } from "./useClientLayoutEffect";
 export { useControllableState } from "./useControllableState";
 export { useMergeRefs } from "./useMergeRefs";

package/src/{overlays/overlay → util}/hooks/useAnimationsFinished.ts

@@ -2,7 +2,8 @@
 
 import React, { useCallback, useEffect } from "react";
 import ReactDOM from "react-dom";
-import { useEventCallback } from "../../../util/hooks/useEventCallback";
+import { resolveRef } from "../resolveRef";
+import { useEventCallback } from "./useEventCallback";
 
 /**
  * Returns a stable function that, when invoked, waits for all current CSS/Web Animations
@@ -15,7 +16,7 @@ import { useEventCallback } from "../../../util/hooks/useEventCallback";
  *
  * 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`),
+ *  2. If `getAnimations` is unsupported or animations are globally disabled (`AKSEL_NO_EXIT_ANIMATIONS`),
  *     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
@@ -66,12 +67,8 @@ export function useAnimationsFinished(
       // Cancel any in-flight scheduling from a previous invocation (next-frame debounce semantics)
       cancelScheduled();
 
-      if (elementOrRef == null) {
-        return;
-      }
+      const element = resolveRef(elementOrRef);
 
-      const element =
-        "current" in elementOrRef ? elementOrRef.current : elementOrRef;
       if (element == null) {
         return;
       }
@@ -80,7 +77,7 @@ export function useAnimationsFinished(
       if (
         typeof element.getAnimations !== "function" ||
         // Flag hook for test envs.
-        (globalThis as any).AKSEL_ANIMATIONS_DISABLED
+        (globalThis as any).AKSEL_NO_EXIT_ANIMATIONS
       ) {
         fnToExecute();
         return;
@@ -96,7 +93,9 @@ export function useAnimationsFinished(
           Promise.allSettled(
             element.getAnimations().map((anim) => anim.finished),
           ).then(() => {
-            if (signal?.aborted) return;
+            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.

package/src/util/hooks/useControllableState.ts

@@ -1,6 +1,6 @@
 // https://github.com/chakra-ui/chakra-ui/tree/5ec0be610b5a69afba01a9c22365155c1b519136/packages/hooks/use-controllable-state
 import { useState } from "react";
-import { useCallbackRef } from "./useCallbackRef";
+import { useEventCallback } from "./useEventCallback";
 
 export interface UseControllableStateProps<T> {
   value?: T;
@@ -16,25 +16,22 @@ export function useControllableState<T>({
   defaultValue,
   onChange,
 }: UseControllableStateProps<T>) {
-  const onChangeProp = useCallbackRef(onChange);
+  const onChangeProp = useEventCallback(onChange);
 
   const [uncontrolledState, setUncontrolledState] = useState(defaultValue);
   const controlled = valueProp !== undefined;
   const value = controlled ? valueProp : uncontrolledState;
 
-  const setValue = useCallbackRef(
-    (next: React.SetStateAction<T>) => {
-      const setter = next as (prevState?: T) => T;
-      const nextValue = typeof next === "function" ? setter(value) : next;
+  const setValue = useEventCallback((next: React.SetStateAction<T>) => {
+    const setter = next as (prevState?: T) => T;
+    const nextValue = typeof next === "function" ? setter(value) : next;
 
-      if (!controlled) {
-        setUncontrolledState(nextValue);
-      }
+    if (!controlled) {
+      setUncontrolledState(nextValue);
+    }
 
-      onChangeProp(nextValue);
-    },
-    [controlled, onChangeProp, value],
-  );
+    onChangeProp(nextValue);
+  });
 
   return [value, setValue] as const;
 }

package/src/util/hooks/useEventCallback.ts

@@ -14,6 +14,8 @@
  *
  * Guarantees: stable identity; latest logic executed; no calls from uncommitted renders; dev
  * error if invoked during render; safe when `callback` is undefined (no-op).
+ *
+ * This hook is a more permissive version of React 19.2's `React.useEffectEvent` in that it can be passed through contexts and called in event handler props, not just effects.
  */
 import React, { useLayoutEffect } from "react";
 import { useRefWithInit } from "./useRefWithInit";
@@ -42,12 +44,7 @@ type Stable<T extends Callback> = {
   effect: () => void;
 };
 
-/**
- * TODO: Long term, replace `useCallbackRef` with this hook.
- */
-export function useEventCallback<T extends Callback>(
-  callback: T | undefined,
-): T {
+function useEventCallback<T extends Callback>(callback: T | undefined): T {
   const stable = useRefWithInit(createStableCallback).current as Stable<T>;
   stable.next = callback;
   useSafeInsertionEffect(stable.effect);
@@ -71,3 +68,5 @@ function assertNotCalled() {
     throw new Error("Aksel: Cannot call an event handler while rendering.");
   }
 }
+
+export { useEventCallback };

package/src/util/hooks/useId.ts

@@ -3,10 +3,15 @@
 //https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/useId.ts
 import React, { useEffect, useState } from "react";
 
+/* eslint-disable react-hooks/rules-of-hooks */
+
 let globalId = 0;
 function useGlobalId(idOverride?: string): string | undefined {
+  // biome-ignore lint/correctness/useHookAtTopLevel: At runtime, `useGlobalId` is invariant.
   const [defaultId, setDefaultId] = useState(idOverride);
   const id = idOverride || defaultId;
+
+  // biome-ignore lint/correctness/useHookAtTopLevel: At runtime, `useGlobalId` is invariant.
   useEffect(() => {
     if (defaultId == null) {
       // Fallback to this default id when possible.
@@ -34,6 +39,6 @@ export function useId(idOverride?: string): string {
     const reactId = maybeReactUseId();
     return idOverride ?? reactId.replace(/(:)/g, "");
   }
-  // eslint-disable-next-line react-hooks/rules-of-hooks -- `useId` is invariant at runtime.
+  // biome-ignore lint/correctness/useHookAtTopLevel: `useId` is invariant at runtime.
   return useGlobalId(idOverride) ?? "";
 }