@navikt/ds-react 7.37.0 → 7.39.0

package/src/layout/base/BasePrimitive.tsx

@@ -5,10 +5,6 @@ import { getResponsiveProps, getResponsiveValue } from "../utilities/css";
 import { ResponsiveProp, SpacingScale } from "../utilities/types";
 
 export type PrimitiveProps = {
-  /**
-   * @private Hides prop from documentation
-   */
-  className?: string;
   /**
    * Padding around children.
    * Accepts a [spacing token](https://aksel.nav.no/grunnleggende/styling/design-tokens#0cc9fb32f213)
@@ -190,7 +186,6 @@ export type PrimitiveProps = {
 };
 
 export const PRIMITIVE_PROPS: (keyof PrimitiveProps)[] = [
-  "className",
   "padding",
   "paddingInline",
   "paddingBlock",
@@ -220,6 +215,10 @@ export const PRIMITIVE_PROPS: (keyof PrimitiveProps)[] = [
 
 interface BasePrimitiveProps extends PrimitiveProps {
   children: React.ReactElement;
+  /**
+   * @private Hides prop from documentation
+   */
+  className?: string;
 }
 
 export const BasePrimitive = ({

package/src/layout/base/PrimitiveAsChildProps.ts

@@ -4,15 +4,14 @@ export type PrimitiveAsChildProps =
       /**
        * Renders the component and its child as a single element,
        * merging the props of the component with the props of the child.
+       *
        * @example
-       * ```tsx
        * <Component asChild data-prop>
        *   <ChildComponent data-child />
        * </Component>
        *
        * // Renders
        * <div data-prop data-child />
-       * ```
        */
       asChild: true;
       /**
@@ -29,14 +28,12 @@ export type PrimitiveAsChildProps =
        * merging the props of the component with the props of the child.
        *
        * @example
-       * ```tsx
        * <Component asChild data-prop>
        *   <ChildComponent data-child />
        * </Component>
        *
        * // Renders
        * <div data-prop data-child />
-       * ```
        */
       asChild?: false;
     };

package/src/layout/box/Box.darkside.tsx

@@ -109,7 +109,7 @@ export const BoxNew: OverridableComponent<BoxNewProps, HTMLDivElement> =
         style: _style,
         asChild,
         ...rest
-      },
+      }: BoxNewProps & { as?: React.ElementType },
       ref,
     ) => {
       const { cn } = useRenameCSS();

package/src/layout/box/Box.tsx

@@ -105,7 +105,7 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
         style: _style,
         asChild,
         ...rest
-      },
+      }: BoxProps & { as?: React.ElementType },
       ref,
     ) => {
       const themeContext = useThemeInternal();

package/src/modal/Modal.tsx

@@ -230,7 +230,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         : ariaLabelledby;
 
     const component = (
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
       <dialog
         {...rest}
         ref={mergedRef}
@@ -248,6 +248,14 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
             : onMouseDown
         }
         aria-labelledby={mergedAriaLabelledBy}
+        onKeyDown={(e) => {
+          /**
+           * Stops propagation of Escape key to prevent closing parent modals/dialogs
+           */
+          if (e.key === "Escape") {
+            e.stopPropagation();
+          }
+        }}
       >
         <ModalContextProvider
           closeHandler={getCloseHandler(modalRef, header, onBeforeClose)}

package/src/overlays/action-menu/ActionMenu.tsx

@@ -317,7 +317,6 @@ export const ActionMenuTrigger = forwardRef<
     ref,
   ) => {
     const context = useActionMenuContext();
-
     const mergedRefs = useMergeRefs(ref, context.triggerRef);
 
     return (
@@ -386,7 +385,9 @@ export const ActionMenuContent = forwardRef<
           sideOffset={4}
           collisionPadding={10}
           returnFocus={context.triggerRef}
-          safeZone={{ anchor: context.triggerRef.current }}
+          safeZone={{
+            anchor: context.triggerRef.current,
+          }}
           style={{
             ...style,
             ...{

package/src/overlays/dismissablelayer/DismissableLayer.tsx

@@ -1,4 +1,10 @@
-import React, { forwardRef, useContext, useEffect, useState } from "react";
+import React, {
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { Slot } from "../../slot/Slot";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { useMergeRefs } from "../../util/hooks";
@@ -61,6 +67,7 @@ interface DismissableLayerBaseProps
   onDismiss?: (event: Event) => void;
   /**
    * Stops `onDismiss` from beeing called when interacting with the `safeZone` elements.
+   * - anchor: The element that should be considered safe to interact with.
    */
   safeZone?: {
     anchor?: Element | null;
@@ -112,6 +119,8 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
   ) => {
     const context = useContext(DismissableLayerContext);
 
+    const triggerPointerDownRef = useRef<boolean>(false);
+
     const [, forceRerender] = useState({});
     const [node, setNode] = React.useState<DismissableLayerElement | null>(
       null,
@@ -142,13 +151,10 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
         return;
       }
 
-      let hasPointerDownOutside = false;
-
-      if (!event.defaultPrevented) {
-        if (event.detail.originalEvent.type === "pointerdown") {
-          hasPointerDownOutside = true;
-        }
-      }
+      const eventType = event.detail.originalEvent.type as
+        | "pointerup"
+        | "pointerdown"
+        | "focusin";
 
       const target = event.target as HTMLElement;
 
@@ -160,19 +166,17 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
       }
 
       /**
-       * In Safari, if the trigger element is inside a container with tabIndex={0}, a click on the trigger
-       * will first fire a 'pointerdownoutside' event on the trigger itself. However, it will then fire a
-       * 'focusoutside' event on the container.
-       *
-       * To handle this, we ignore any 'focusoutside' events if a 'pointerdownoutside' event has already occurred.
-       * 'pointerdownoutside' event is sufficient to indicate interaction outside the DismissableLayer.
+       * If the target is inside a custom element, event.target will be that element on pointerdown.
+       * Therefore, checking anchor.contains(target) etc. won't work in that case.
        */
       if (
-        event.detail.originalEvent.type === "focusin" &&
-        hasPointerDownOutside
+        eventType === "pointerdown" &&
+        triggerPointerDownRef.current === true
       ) {
         event.preventDefault();
       }
+
+      triggerPointerDownRef.current = false;
     }
 
     const pointerDownOutside = usePointerDownOutside(
@@ -283,6 +287,38 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
       enabled,
     );
 
+    useEffect(() => {
+      if (!safeZone?.anchor) {
+        return;
+      }
+
+      const handlePointerDown = () => {
+        triggerPointerDownRef.current = true;
+      };
+
+      const handlePointerEnd = () => {
+        triggerPointerDownRef.current = false;
+      };
+
+      const anchor = safeZone.anchor;
+
+      anchor.addEventListener("pointerdown", handlePointerDown, {
+        capture: true,
+      });
+      anchor.addEventListener("pointerup", handlePointerEnd);
+      anchor.addEventListener("pointerleave", handlePointerEnd);
+      anchor.addEventListener("pointercancel", handlePointerEnd);
+
+      return () => {
+        anchor.removeEventListener("pointerdown", handlePointerDown, {
+          capture: true,
+        });
+        anchor.removeEventListener("pointerup", handlePointerEnd);
+        anchor.removeEventListener("pointerleave", handlePointerEnd);
+        anchor.removeEventListener("pointercancel", handlePointerEnd);
+      };
+    }, [safeZone?.anchor]);
+
     /**
      * Handles registering `layers` and `layersWithOutsidePointerEventsDisabled`.
      */

package/src/overlays/dismissablelayer/util/useEscapeKeydown.ts

@@ -19,10 +19,15 @@ export function useEscapeKeydown(
       }
     };
 
-    ownerDocument.addEventListener("keydown", handleKeyDown, true);
+    /**
+     * We use the bubbling phase (not capture) so that elements inside the layer
+     * can handle Escape themselves and call stopPropagation() if needed.
+     * Layer ordering is handled programmatically via the DismissableLayerContext.
+     */
+    ownerDocument.addEventListener("keydown", handleKeyDown);
 
     return () => {
-      ownerDocument.removeEventListener("keydown", handleKeyDown, true);
+      ownerDocument.removeEventListener("keydown", handleKeyDown);
     };
   }, [onEscapeKeyDown, ownerDocument, enabled]);
 }

package/src/provider/Provider.tsx

@@ -24,12 +24,10 @@ export type ProviderProps = {
        * Aksel locale
        * @default nb
        * @example
-       * ```jsx
        * import { en } from "@navikt/ds-react/locales";
        * <Provider locale={en}>
-       *  {app}
+       *   {app}
        * </Provider>
-       * ```
        */
       locale: Translations;
       /**
@@ -54,11 +52,9 @@ export const useProvider = () => useContext(ProviderContext);
  * @see 🏷️ {@link ProviderProps}
  *
  * @example
- * ```jsx
  * <Provider rootElement={rootElement}>
  *   {app}
  * </Provider>
- * ```
  */
 export const Provider = ({
   children,

package/src/read-more/ReadMore.tsx

@@ -100,7 +100,6 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
 
         <BodyLong
           as="div"
-          tabIndex={0}
           className={cn("navds-read-more__content", {
             "navds-read-more__content--closed": !_open,
           })}

package/src/slot/Slot.tsx

@@ -1,25 +1,30 @@
 import React from "react";
-import { mergeRefs } from "../util/hooks/useMergeRefs";
+import { useMergeRefs } from "../util/hooks";
 import { mergeProps } from "./merge-props";
 
 interface SlotProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;
 }
 
+function getChildRef(children: React.ReactNode): React.Ref<HTMLElement> | null {
+  if (!React.isValidElement(children)) {
+    return null;
+  }
+  return Object.prototype.propertyIsEnumerable.call(children.props, "ref")
+    ? (children.props as any).ref // React 19 (children.ref still works, but gives a warning)
+    : (children as any).ref; // React <19
+}
+
 const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
   const { children, ...slotProps } = props;
 
-  if (React.isValidElement(children)) {
-    const childRef = Object.prototype.propertyIsEnumerable.call(
-      children.props,
-      "ref",
-    )
-      ? (children.props as any).ref // React 19 (children.ref still works, but gives a warning)
-      : (children as any).ref; // React <19
+  const childRef = getChildRef(children);
+  const mergedRef = useMergeRefs(forwardedRef, childRef);
 
+  if (React.isValidElement(children)) {
     return React.cloneElement<any>(children, {
       ...mergeProps(slotProps, children.props as any),
-      ref: forwardedRef ? mergeRefs([forwardedRef, childRef]) : childRef,
+      ref: mergedRef,
     });
   }
 

package/src/tabs/parts/tab/useTab.ts

@@ -1,5 +1,5 @@
 import { composeEventHandlers } from "../../../util/composeEventHandlers";
-import { mergeRefs } from "../../../util/hooks/useMergeRefs";
+import { useMergeRefs } from "../../../util/hooks/useMergeRefs";
 import { useTabsContext, useTabsDescendant } from "../../Tabs.context";
 
 export interface UseTabProps {
@@ -40,8 +40,10 @@ export function useTab<P extends UseTabProps>(
     selectionFollowsFocus && setSelectedValue(value);
   };
 
+  const refs = useMergeRefs(register, ref);
+
   return {
-    ref: mergeRefs([register, ref]),
+    ref: refs,
     isSelected,
     isFocused: focusedValue === value,
     id: makeTabId(id, value),

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/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/hooks/descendants/useDescendant.tsx

@@ -4,7 +4,7 @@
 import React, { useRef, useState } from "react";
 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";
 
@@ -66,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/useMergeRefs.ts

@@ -1,34 +1,157 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-
-/* https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/composeRefs.tsx */
+/* https://github.com/mui/base-ui/blob/f2d7a90e3a20dee84955beb5be0d59e50f45ae7e/packages/utils/src/useMergedRefs.ts */
 import React from "react";
+import { useRefWithInit } from "./useRefWithInit";
+
+type Empty = null | undefined;
+type InputRef<I> = React.Ref<I> | Empty;
+type Result<I> = React.RefCallback<I> | null;
+type Cleanup = () => void;
 
-type PossibleRef<T> = React.Ref<T> | undefined;
+type ForkRef<I> = {
+  callback: React.RefCallback<I> | null;
+  cleanup: Cleanup | null;
+  refs: InputRef<I>[];
+};
 
-// https://github.com/gregberge/react-merge-refs
 /**
- * Use `useMergeRefs`
- * @internal
+ * Merges refs into a single memoized callback ref or `null`.
+ * This makes sure multiple refs are updated together and have the same value.
+ *
+ * This function accepts up to four refs. If you need to merge more, or have an unspecified number of refs to merge,
+ * use `useMergeRefsN` instead.
  */
-export function mergeRefs<T>(refs: PossibleRef<T>[]) {
-  return (instance: T | null) => {
-    refs.forEach((ref) => {
-      if (typeof ref === "function") {
-        ref(instance);
-      } else if (ref !== null && ref !== undefined) {
-        (ref as React.MutableRefObject<T | null>).current = instance;
-      }
-    });
-  };
+export function useMergeRefs<I>(a: InputRef<I>, b: InputRef<I>): Result<I>;
+export function useMergeRefs<I>(
+  a: InputRef<I>,
+  b: InputRef<I>,
+  c: InputRef<I>,
+): Result<I>;
+export function useMergeRefs<I>(
+  a: InputRef<I>,
+  b: InputRef<I>,
+  c: InputRef<I>,
+  d: InputRef<I>,
+): Result<I>;
+export function useMergeRefs<I>(
+  a: InputRef<I>,
+  b: InputRef<I>,
+  c?: InputRef<I>,
+  d?: InputRef<I>,
+): Result<I> {
+  const forkRef = useRefWithInit(createForkRef<I>).current!;
+  if (didChange(forkRef, a, b, c, d)) {
+    update(forkRef, [a, b, c, d]);
+  }
+  return forkRef.callback;
 }
 
 /**
- * Merges refs within useCallback
- * @internal
- * @param ...refs: React.Ref<T> | undefined
- * @returns React.useCallback(mergeRefs(refs), refs)
+ * Merges an array of refs into a single memoized callback ref or `null`.
+ *
+ * If you need to merge a fixed number (up to four) of refs, use `useMergeRefs` instead for better performance.
  */
-export function useMergeRefs<T>(...refs: PossibleRef<T>[]) {
-  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to only update if refs change
-  return React.useCallback(mergeRefs(refs), refs);
+export function useMergeRefsN<I>(refs: InputRef<I>[]): Result<I> {
+  const forkRef = useRefWithInit(createForkRef<I>).current!;
+  if (didChangeN(forkRef, refs)) {
+    update(forkRef, refs);
+  }
+  return forkRef.callback;
+}
+
+function createForkRef<I>(): ForkRef<I> {
+  return {
+    callback: null,
+    cleanup: null as Cleanup | null,
+    refs: [],
+  };
+}
+
+function didChange<I>(
+  forkRef: ForkRef<I>,
+  a: InputRef<I>,
+  b: InputRef<I>,
+  c: InputRef<I>,
+  d: InputRef<I>,
+) {
+  return (
+    forkRef.refs[0] !== a ||
+    forkRef.refs[1] !== b ||
+    forkRef.refs[2] !== c ||
+    forkRef.refs[3] !== d
+  );
+}
+
+function didChangeN<I>(forkRef: ForkRef<I>, newRefs: InputRef<I>[]) {
+  return (
+    forkRef.refs.length !== newRefs.length ||
+    forkRef.refs.some((ref, index) => ref !== newRefs[index])
+  );
+}
+
+function update<I>(forkRef: ForkRef<I>, refs: InputRef<I>[]) {
+  forkRef.refs = refs;
+
+  if (refs.every((ref) => ref == null)) {
+    forkRef.callback = null;
+    return;
+  }
+
+  forkRef.callback = (instance: I) => {
+    if (forkRef.cleanup) {
+      forkRef.cleanup();
+      forkRef.cleanup = null;
+    }
+
+    if (instance != null) {
+      const cleanupCallbacks = Array(refs.length).fill(
+        null,
+      ) as (Cleanup | null)[];
+
+      for (let i = 0; i < refs.length; i += 1) {
+        const ref = refs[i];
+        if (ref == null) {
+          continue;
+        }
+        switch (typeof ref) {
+          case "function": {
+            const refCleanup = ref(instance);
+            if (typeof refCleanup === "function") {
+              cleanupCallbacks[i] = refCleanup;
+            }
+            break;
+          }
+          case "object": {
+            (ref as React.MutableRefObject<I | null>).current = instance;
+            break;
+          }
+          default:
+        }
+      }
+
+      forkRef.cleanup = () => {
+        for (let i = 0; i < refs.length; i += 1) {
+          const ref = refs[i];
+          if (ref == null) {
+            continue;
+          }
+          switch (typeof ref) {
+            case "function": {
+              const cleanupCallback = cleanupCallbacks[i];
+              if (typeof cleanupCallback === "function") {
+                cleanupCallback();
+              } else {
+                ref(null);
+              }
+              break;
+            }
+            case "object": {
+              (ref as React.MutableRefObject<I | null>).current = null;
+              break;
+            }
+            default:
+          }
+        }
+      };
+    }
+  };
 }