@navikt/ds-react 7.37.0 → 7.38.0

package/esm/util/hooks/useMergeRefs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMergeRefs.js","sourceRoot":"","sources":["../../../src/util/hooks/useMergeRefs.ts"],"names":[],"mappings":"AAAA,gDAAgD;AAEhD,sGAAsG;AACtG,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,gDAAgD;AAChD;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAI,IAAsB;IACjD,OAAO,CAAC,QAAkB,EAAE,EAAE;QAC5B,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACnB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,QAAQ,CAAC,CAAC;YAChB,CAAC;iBAAM,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBAC5C,GAAwC,CAAC,OAAO,GAAG,QAAQ,CAAC;YAC/D,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,YAAY,CAAI,GAAG,IAAsB;IACvD,iGAAiG;IACjG,OAAO,KAAK,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;AAClD,CAAC"}
+{"version":3,"file":"useMergeRefs.js","sourceRoot":"","sources":["../../../src/util/hooks/useMergeRefs.ts"],"names":[],"mappings":"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"}

package/esm/util/types/AsChildProps.d.ts

@@ -5,14 +5,12 @@ export type AsChildProps = {
      * merging the props of the component with the props of the child.
      *
      * @example
-     * ```
      * <Component asChild data-prop>
      *   <ChildComponent data-child />
      * </Component>
      *
      * Out:
      * <MergedComponent data-prop data-child />
-     * ```
      */
     asChild: true;
     as?: never;
@@ -23,14 +21,12 @@ export type AsChildProps = {
      * merging the props of the component with the props of the child.
      *
      * @example
-     * ```
      * <Component asChild data-prop>
      *   <ChildComponent data-child />
      * </Component>
      *
      * Out:
      * <MergedComponent data-prop data-child />
-     * ```
      */
     asChild?: false;
 };

package/esm/util/virtualfocus/Context.d.ts

@@ -21,7 +21,7 @@ export declare const VirtualFocusDescendantsProvider: import("react").Provider<i
     }>;
     index: number;
     enabledIndex: number;
-    register: (instance: HTMLDivElement | null) => void;
+    register: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null;
 };
 export declare const VirtualFocusInternalContextProvider: import("react").FC<{
     virtualFocusIdx: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "7.37.0",
+  "version": "7.38.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",
@@ -705,8 +705,8 @@
   "dependencies": {
     "@floating-ui/react": "0.27.8",
     "@floating-ui/react-dom": "^2.1.6",
-    "@navikt/aksel-icons": "^7.37.0",
-    "@navikt/ds-tokens": "^7.37.0",
+    "@navikt/aksel-icons": "^7.38.0",
+    "@navikt/ds-tokens": "^7.38.0",
     "clsx": "^2.1.0",
     "date-fns": "^4.0.0",
     "react-day-picker": "9.7.0"

package/src/date/Date.Dialog.tsx

@@ -1,5 +1,6 @@
 import React, { useRef } from "react";
 import { Button } from "../button";
+import { useDialogContext } from "../dialog/root/DialogRoot.context";
 import { Modal } from "../modal";
 import { useModalContext } from "../modal/Modal.context";
 import { Popover } from "../popover";
@@ -45,9 +46,13 @@ const DateDialog = ({
   const { cn } = useRenameCSS();
 
   const modalRef = useRef<HTMLDialogElement>(null);
+
   const isInModal = useModalContext(false) !== undefined;
+  const isInDialog = useDialogContext(false) !== undefined;
   const hideModal =
-    useMedia("screen and (min-width: 768px)", true) && !isInModal;
+    useMedia("screen and (min-width: 768px)", true) &&
+    !isInModal &&
+    !isInDialog;
 
   if (!open) {
     return null;

package/src/dialog/index.ts

@@ -1,5 +1,5 @@
 "use client";
-export { Dialog } from "./root/DialogRoot";
+export { default as Dialog } from "./root/DialogRoot";
 export type { DialogProps } from "./root/DialogRoot";
 export { DialogTrigger } from "./trigger/DialogTrigger";
 export type { DialogTriggerProps } from "./trigger/DialogTrigger";

package/src/dialog/popup/DialogPopup.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from "react";
+import { useModalContext } from "../../modal/Modal.context";
 import { Portal, type PortalProps } from "../../portal";
 import { DialogBackdropInternal } from "../backdrop/DialogBackdropInternal";
 import { useDialogContext } from "../root/DialogRoot.context";
@@ -28,7 +29,7 @@ const DialogPopup = forwardRef<HTMLDivElement, DialogPopupProps>(
     {
       modal = true,
       withBackdrop = modal === true,
-      rootElement,
+      rootElement: rootElementProp,
       position,
       ...restProps
     },
@@ -36,6 +37,11 @@ const DialogPopup = forwardRef<HTMLDivElement, DialogPopupProps>(
   ) => {
     const { mounted, nested } = useDialogContext();
 
+    const modalContext = useModalContext(false);
+    const rootElement = modalContext
+      ? modalContext.modalRef.current
+      : rootElementProp;
+
     if (!mounted) {
       return null;
     }

package/src/dialog/root/DialogRoot.tsx

@@ -179,15 +179,15 @@ interface DialogComponent extends React.FC<DialogProps> {
  *        Dialog body content
  *      </Dialog.Body>
  *      <Dialog.Footer>
- *.       <Dialog.CloseTrigger>
- *.         <Button>Close dialog</Button>
- *.       </Dialog.CloseTrigger>
+ *        <Dialog.CloseTrigger>
+ *          <Button>Close dialog</Button>
+ *        </Dialog.CloseTrigger>
  *      </Dialog.Footer>
  *    </Dialog.Popup>
  *  </Dialog>
  * ```
  */
-const Dialog: DialogComponent = (props: DialogProps) => {
+export const Dialog: DialogComponent = (props: DialogProps) => {
   const {
     children,
     defaultOpen = false,
@@ -292,5 +292,5 @@ Dialog.Body = DialogBody;
 Dialog.Footer = DialogFooter;
 Dialog.Popup = DialogPopup;
 
-export { Dialog };
+export default Dialog;
 export type { DialogProps };

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/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/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,
     };
   }