@navikt/ds-react 7.36.0 → 7.38.0

package/src/inline-message/root/InlineMessage.tsx

@@ -54,7 +54,7 @@ export const InlineMessage: OverridableComponent<
     forwardedRef,
   ) => {
     const { cn } = useRenameCSS();
-    const themeContext = useThemeInternal(false);
+    const themeContext = useThemeInternal();
 
     const translate = useI18n("global");
     const statusId = useId();
@@ -76,6 +76,7 @@ export const InlineMessage: OverridableComponent<
             {`${translate(status)}: `}
           </BodyShort>
         )}
+        {/** biome-ignore lint/a11y/useAriaPropsSupportedByRole: Testing shows that this works. */}
         <span
           data-color={themeContext?.color}
           id={contentId}

package/src/internal-header/InternalHeader.tsx

@@ -78,7 +78,7 @@ interface InternalHeaderComponent
  * ```
  */
 export const InternalHeader = forwardRef(({ className, ...rest }, ref) => {
-  const themeContext = useThemeInternal(false);
+  const themeContext = useThemeInternal();
   const { cn } = useRenameCSS();
 
   /*

package/src/layout/base/BasePrimitive.tsx

@@ -251,7 +251,7 @@ export const BasePrimitive = ({
   flexShrink,
   gridColumn,
 }: BasePrimitiveProps) => {
-  const themeContext = useThemeInternal(false);
+  const themeContext = useThemeInternal();
   const { cn } = useRenameCSS();
   const prefix = themeContext?.isDarkside ? "ax" : "a";
 

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/bleed/Bleed.tsx

@@ -80,7 +80,7 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     },
     ref,
   ) => {
-    const themeContext = useThemeInternal(false);
+    const themeContext = useThemeInternal();
     const { cn } = useRenameCSS();
     const prefix = themeContext?.isDarkside ? "ax" : "a";
 

package/src/layout/box/Box.tsx

@@ -108,7 +108,7 @@ export const BoxComponent: OverridableComponent<BoxProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal(false);
+      const themeContext = useThemeInternal();
       const { cn } = useRenameCSS();
 
       if (

package/src/layout/grid/HGrid.tsx

@@ -77,7 +77,7 @@ export const HGrid: OverridableComponent<HGridProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal(false);
+      const themeContext = useThemeInternal();
       const prefix = themeContext?.isDarkside ? "ax" : "a";
       const { cn } = useRenameCSS();
 

package/src/layout/page/Page.tsx

@@ -53,7 +53,7 @@ export const PageComponent: OverridableComponent<PageProps, HTMLElement> =
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal(false);
+      const themeContext = useThemeInternal();
       const { cn } = useRenameCSS();
 
       if (

package/src/layout/stack/Stack.tsx

@@ -83,7 +83,7 @@ export const Stack: OverridableComponent<StackProps, HTMLDivElement> =
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal(false);
+      const themeContext = useThemeInternal();
       const prefix = themeContext?.isDarkside ? "ax" : "a";
       const { cn } = useRenameCSS();
 

package/src/link/Link.tsx

@@ -64,7 +64,7 @@ export const Link: OverridableComponent<LinkProps, HTMLAnchorElement> =
       },
       ref,
     ) => {
-      const themeContext = useThemeInternal(false);
+      const themeContext = useThemeInternal();
       const { cn } = useRenameCSS();
 
       /*

package/src/link-card/LinkCard.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import { useRenameCSS } from "../theme/Theme";
 import { BodyLong, Heading } from "../typography";
-import { createContext } from "../util/create-context";
+import { createStrictContext } from "../util/create-strict-context";
 import {
   LinkAnchor,
   LinkAnchorArrow,
@@ -31,8 +31,8 @@ type LinkCardContextProps = {
   size: LinkCardProps["size"];
 };
 
-const [LinkCardContextProvider, useLinkCardContext] =
-  createContext<LinkCardContextProps>({
+const { Provider: LinkCardContextProvider, useContext: useLinkCardContext } =
+  createStrictContext<LinkCardContextProps>({
     name: "LinkCardContextProvider",
   });
 

package/src/list/List.tsx

@@ -59,7 +59,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
     const { size: contextSize } = useContext(ListContext);
 
     const { cn } = useRenameCSS();
-    const themeContext = useThemeInternal(false);
+    const themeContext = useThemeInternal();
 
     const listSize = size ?? contextSize;
 

package/src/modal/Modal.context.ts

@@ -1,13 +1,13 @@
 import React from "react";
-import { createContext } from "../util/create-context";
+import { createStrictContext } from "../util/create-strict-context";
 
 interface ModalContextProps {
   closeHandler?: React.MouseEventHandler<HTMLButtonElement>;
-  ref: React.RefObject<HTMLDialogElement>;
+  modalRef: React.RefObject<HTMLDialogElement>;
 }
 
-export const [ModalContextProvider, useModalContext] =
-  createContext<ModalContextProps>({
+export const { Provider: ModalContextProvider, useContext: useModalContext } =
+  createStrictContext<ModalContextProps>({
     name: "ModalContext",
     errorMessage: "<Modal.Header> must be used within a <Modal>",
   });

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,10 +248,18 @@ 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)}
-          ref={modalRef}
+          modalRef={modalRef}
         >
           {header && (
             <ModalHeader>

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

@@ -5,7 +5,7 @@ import { Slot } from "../../slot/Slot";
 import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
 import { OverridableComponent, useId } from "../../util";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
-import { createContext } from "../../util/create-context";
+import { createStrictContext } from "../../util/create-strict-context";
 import { useMergeRefs } from "../../util/hooks";
 import { useControllableState } from "../../util/hooks/useControllableState";
 import { requireReactElement } from "../../util/requireReactElement";
@@ -24,8 +24,8 @@ type ActionMenuContextValue = {
   rootElement: MenuPortalProps["rootElement"];
 };
 
-const [ActionMenuProvider, useActionMenuContext] =
-  createContext<ActionMenuContextValue>({
+const { Provider: ActionMenuProvider, useContext: useActionMenuContext } =
+  createStrictContext<ActionMenuContextValue>({
     name: "ActionMenuContext",
     errorMessage:
       "ActionMenu sub-components cannot be rendered outside the ActionMenu component.",
@@ -251,7 +251,9 @@ const ActionMenuRoot = ({
   const triggerRef = useRef<HTMLButtonElement>(null);
 
   const modalContext = useModalContext(false);
-  const rootElement = modalContext ? modalContext.ref.current : rootElementProp;
+  const rootElement = modalContext
+    ? modalContext.modalRef.current
+    : rootElementProp;
 
   const [open = false, setOpen] = useControllableState({
     value: openProp,
@@ -315,7 +317,6 @@ export const ActionMenuTrigger = forwardRef<
     ref,
   ) => {
     const context = useActionMenuContext();
-
     const mergedRefs = useMergeRefs(ref, context.triggerRef);
 
     return (
@@ -384,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,
             ...{
@@ -773,7 +776,7 @@ export const ActionMenuRadioItem = forwardRef<
     ref,
   ) => {
     const { cn } = useRenameCSS();
-    const themeContext = useThemeInternal(false);
+    const themeContext = useThemeInternal();
 
     return (
       <Menu.RadioItem

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";
@@ -6,12 +12,13 @@ import { ownerDocument } from "../../util/owner";
 import { AsChild } from "../../util/types/AsChild";
 import {
   CustomFocusEvent,
-  CustomPointerDownEvent,
+  CustomPointerEvent,
 } from "./util/dispatchCustomEvent";
 import { getSortedLayers } from "./util/sort-layers";
 import { useEscapeKeydown } from "./util/useEscapeKeydown";
 import { useFocusOutside } from "./util/useFocusOutside";
 import { usePointerDownOutside } from "./util/usePointerDownOutside";
+import { usePointerUpOutside } from "./util/usePointerUpOutside";
 
 interface DismissableLayerBaseProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -30,7 +37,19 @@ interface DismissableLayerBaseProps
    * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.
    * Can be prevented.
    */
-  onPointerDownOutside?: (event: CustomPointerDownEvent) => void;
+  onPointerDownOutside?: (event: CustomPointerEvent) => void;
+  /**
+   * Event handler called when the a `pointerup` event happens outside of the `DismissableLayer`.
+   * Can be prevented.
+   */
+  onPointerUpOutside?: (event: CustomPointerEvent) => void;
+  /**
+   * Enables listening for `pointerup` outside the `DismissableLayer`.
+   * In most cases `pointerdown` is sufficient, but in some cases (like modal, drawer)
+   * we want to mimic native OS behaviour and only close on `pointerup`.
+   * @default false
+   */
+  enablePointerUpOutside?: boolean;
   /**
    * Event handler called when the focus moves outside of the `DismissableLayer`.
    * Can be prevented.
@@ -41,15 +60,14 @@ interface DismissableLayerBaseProps
    * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.
    * Can be prevented.
    */
-  onInteractOutside?: (
-    event: CustomPointerDownEvent | CustomFocusEvent,
-  ) => void;
+  onInteractOutside?: (event: CustomPointerEvent | CustomFocusEvent) => void;
   /**
    * Handler called when the `DismissableLayer` should be dismissed
    */
-  onDismiss?: () => void;
+  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;
@@ -90,6 +108,8 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
       onEscapeKeyDown,
       onFocusOutside,
       onPointerDownOutside,
+      onPointerUpOutside,
+      enablePointerUpOutside = false,
       safeZone,
       asChild,
       enabled = true,
@@ -99,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,
@@ -124,20 +146,15 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
      * We want to prevent the Layer from closing when the trigger/anchor element or its child elements are interacted with.
      * To achieve this, we check if the event target is the trigger/anchor or a child. If it is, we prevent default event behavior.
      */
-    function handleOutsideEvent(
-      event: CustomFocusEvent | CustomPointerDownEvent,
-    ) {
+    function handleOutsideEvent(event: CustomFocusEvent | CustomPointerEvent) {
       if (!safeZone?.anchor) {
         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;
 
@@ -149,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(
@@ -182,7 +197,36 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
         safeZone && handleOutsideEvent(event);
 
         if (!event.defaultPrevented && onDismiss) {
-          onDismiss();
+          onDismiss(event);
+        }
+      },
+      ownerDoc,
+      enabled,
+    );
+
+    const pointerUpOutside = usePointerUpOutside(
+      (event) => {
+        if (!shouldEnablePointerEvents || !enablePointerUpOutside) {
+          return;
+        }
+
+        /**
+         * We call these before letting `handleOutsideEvent` do its checks to give consumer a chance to preventDefault based certain cases.
+         */
+        onPointerUpOutside?.(event);
+        onInteractOutside?.(event);
+
+        /**
+         * Add safeZone to prevent closing when interacting with trigger/anchor or its children.
+         */
+        safeZone && handleOutsideEvent(event);
+
+        /**
+         * Both `onPointerUpOutside`, `onInteractOutside` and `handleOutsideEvent`
+         * are able to preventDefault the event, thus stopping call for `onDismiss`.
+         */
+        if (!event.defaultPrevented && onDismiss) {
+          onDismiss(event);
         }
       },
       ownerDoc,
@@ -203,7 +247,7 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
         safeZone && handleOutsideEvent(event);
 
         if (!event.defaultPrevented && onDismiss) {
-          onDismiss();
+          onDismiss(event);
         }
       },
       ownerDoc,
@@ -230,14 +274,51 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
          * We want to `preventDefault` the escape-event to avoid sideeffect from other elements on screen
          */
         if (!event.defaultPrevented && onDismiss) {
+          onDismiss(event);
+
+          /**
+           * Preventing after dismiss allows us to check if user prevents default on the escape event
+           * to avoid side effects on other elements after this layer has been dismissed.
+           */
           event.preventDefault();
-          onDismiss();
         }
       },
       ownerDoc,
       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`.
      */
@@ -364,7 +445,14 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
           )}
           onPointerDownCapture={composeEventHandlers(
             restProps.onPointerDownCapture,
-            pointerDownOutside.onPointerDownCapture,
+            () => {
+              pointerDownOutside.onPointerDownCapture();
+              pointerUpOutside.onPointerDownCapture();
+            },
+          )}
+          onPointerUpCapture={composeEventHandlers(
+            restProps.onPointerUpCapture,
+            pointerUpOutside.onPointerUpCapture,
           )}
         >
           {children}

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

@@ -1,15 +1,16 @@
 import ReactDOM from "react-dom";
 
 type CustomFocusEvent = CustomEvent<{ originalEvent: FocusEvent }>;
-type CustomPointerDownEvent = CustomEvent<{
+type CustomPointerEvent = CustomEvent<{
   originalEvent: PointerEvent;
 }>;
 
-export type { CustomFocusEvent, CustomPointerDownEvent };
+export type { CustomFocusEvent, CustomPointerEvent };
 
 export const CUSTOM_EVENTS = {
   FOCUS_OUTSIDE: "AKSEL_FOCUS_OUTSIDE",
   POINTER_DOWN_OUTSIDE: "AKSEL_POINTER_DOWN_OUTSIDE",
+  POINTER_UP_OUTSIDE: "AKSEL_POINTER_UP_OUTSIDE",
 };
 
 /**

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

@@ -1,12 +1,12 @@
 import { useEffect } from "react";
-import { useCallbackRef } from "../../../util/hooks";
+import { useEventCallback } from "../../../util/hooks/useEventCallback";
 
 export function useEscapeKeydown(
   callback?: (event: KeyboardEvent) => void,
   ownerDocument: Document = globalThis?.document,
   enabled: boolean = true,
 ) {
-  const onEscapeKeyDown = useCallbackRef(callback);
+  const onEscapeKeyDown = useEventCallback(callback);
 
   useEffect(() => {
     if (!enabled) {
@@ -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/overlays/dismissablelayer/util/useFocusOutside.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useCallbackRef } from "../../../util/hooks";
+import { useEventCallback } from "../../../util/hooks/useEventCallback";
 import {
   CUSTOM_EVENTS,
   CustomFocusEvent,
@@ -14,7 +14,7 @@ export function useFocusOutside(
   ownerDocument: Document = globalThis?.document,
   enabled: boolean = true,
 ) {
-  const handleFocusOutside = useCallbackRef(callback) as EventListener;
+  const handleFocusOutside = useEventCallback(callback) as EventListener;
   const isFocusInsideReactTreeRef = useRef(false);
 
   useEffect(() => {

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

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from "react";
-import { useCallbackRef } from "../../../util/hooks";
+import { useEventCallback } from "../../../util/hooks/useEventCallback";
 import { useTimeout } from "../../../util/hooks/useTimeout";
 import {
   CUSTOM_EVENTS,
-  CustomPointerDownEvent,
+  CustomPointerEvent,
   dispatchCustomEvent,
 } from "./dispatchCustomEvent";
 
@@ -14,11 +14,11 @@ import {
  * By checking `isPointerInsideReactTreeRef` we can determine if the event happened outside the subtree of the node, saving some element-comparisons.
  */
 export function usePointerDownOutside(
-  callback?: (event: CustomPointerDownEvent) => void,
+  callback?: (event: CustomPointerEvent) => void,
   ownerDocument: Document = globalThis?.document,
   enabled: boolean = true,
 ) {
-  const handlePointerDownOutside = useCallbackRef(callback) as EventListener;
+  const handlePointerDownOutside = useEventCallback(callback) as EventListener;
   const isPointerInsideReactTreeRef = useRef(false);
   const handleClickRef = useRef<typeof handlePointerDownOutside>(() => {});
   const timeout = useTimeout();