@navikt/ds-react 7.35.3 → 7.37.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/internal-header/InternalHeaderUser.tsx

@@ -7,11 +7,11 @@ export interface InternalHeaderUserProps
   /**
    * User name
    */
-  name: string;
+  name: React.ReactNode;
   /**
    * User description
    */
-  description?: string;
+  description?: React.ReactNode;
 }
 
 export const InternalHeaderUser = forwardRef<
@@ -26,12 +26,12 @@ export const InternalHeaderUser = forwardRef<
       ref={ref}
       className={cn("navds-internalheader__user", className)}
     >
-      <span>
+      <div>
         <BodyShort size="small" as="div">
           {name}
         </BodyShort>
         {description && <Detail as="div">{description}</Detail>}
-      </span>
+      </div>
     </div>
   );
 });

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/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

@@ -251,7 +251,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       >
         <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,
@@ -773,7 +775,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

@@ -6,12 +6,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 +31,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,13 +54,11 @@ 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.
    */
@@ -90,6 +101,8 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
       onEscapeKeyDown,
       onFocusOutside,
       onPointerDownOutside,
+      onPointerUpOutside,
+      enablePointerUpOutside = false,
       safeZone,
       asChild,
       enabled = true,
@@ -124,9 +137,7 @@ 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;
       }
@@ -182,7 +193,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 +243,7 @@ const DismissableLayer = forwardRef<HTMLDivElement, DismissableLayerProps>(
         safeZone && handleOutsideEvent(event);
 
         if (!event.defaultPrevented && onDismiss) {
-          onDismiss();
+          onDismiss(event);
         }
       },
       ownerDoc,
@@ -230,8 +270,13 @@ 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,
@@ -364,7 +409,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) {

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();

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

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from "react";
+import { useEventCallback } from "../../../util/hooks/useEventCallback";
+import {
+  CUSTOM_EVENTS,
+  CustomPointerEvent,
+  dispatchCustomEvent,
+} from "./dispatchCustomEvent";
+
+/**
+ * Listens for `pointerup` outside a react subtree.
+ * Returns props to pass to the node we want to check for outside events.
+ * By checking `isPointerInsideReactTreeRef` we can determine if the event happened outside the subtree of the node, saving some element-comparisons.
+ */
+export function usePointerUpOutside(
+  callback?: (event: CustomPointerEvent) => void,
+  ownerDocument: Document = globalThis?.document,
+  enabled: boolean = true,
+) {
+  // Keep callback ref stable
+  const handlePointerUpOutside = useEventCallback(callback) as EventListener;
+  // Tracks if the pointer interaction started inside the React subtree.
+  const isPointerInsideReactTreeRef = useRef(false);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const handlePointerUp = (event: PointerEvent) => {
+      /**
+       * The `DismisableLayer`-API is based on the ability to stop events from propagating and in the end calling `onDismiss`
+       * if `usePointerUpOutside`-callback does not run `event.preventDefault()`.
+       *
+       * Although `pointerup` is already a cancelable event, we still dispatch a custom event (discrete)
+       * to keep parity with focus outside handling and ensure ordering.
+       *
+       * Since pointer events are `discrete` in React we rely on the same custom dispatch strategy.
+       */
+      if (event.target && !isPointerInsideReactTreeRef.current) {
+        dispatchCustomEvent(
+          CUSTOM_EVENTS.POINTER_UP_OUTSIDE,
+          handlePointerUpOutside,
+          { originalEvent: event },
+          { discrete: true },
+        );
+      }
+      /* Reset for next interaction. */
+      isPointerInsideReactTreeRef.current = false;
+    };
+
+    /* Mostly relevant if user moved touch after touch-start */
+    const handlePointerCancel = () => {
+      /* Reset state if interaction is cancelled */
+      isPointerInsideReactTreeRef.current = false;
+    };
+
+    /**
+     * If this hook executes in a component that mounts via a `pointerup` event, the event
+     * would bubble up to the document and trigger a `pointerUpOutside` event. We avoid
+     * this by delaying the event listener registration on the document.
+     * This is not React specific, but rather how the DOM works, ie:
+     * ```
+     * button.addEventListener('pointerup', () => {
+     *   console.log('I will log');
+     *   document.addEventListener('pointerup', () => {
+     *     console.log('I will also log');
+     *   })
+     * });
+     */
+    const timerId = window.setTimeout(() => {
+      ownerDocument.addEventListener("pointerup", handlePointerUp);
+      ownerDocument.addEventListener("pointercancel", handlePointerCancel);
+    }, 0);
+
+    return () => {
+      window.clearTimeout(timerId);
+      ownerDocument.removeEventListener("pointerup", handlePointerUp);
+      ownerDocument.removeEventListener("pointercancel", handlePointerCancel);
+    };
+  }, [ownerDocument, handlePointerUpOutside, enabled]);
+
+  /**
+   * Ensures we check React component tree (not just DOM tree).
+   * This makes sure that if you start or end a pointer interaction inside the
+   * React tree (e.g. Modal), we don't trigger the outside event on pointer up.
+   */
+  return {
+    onPointerDownCapture: () => {
+      isPointerInsideReactTreeRef.current = true;
+    },
+    onPointerUpCapture: () => {
+      isPointerInsideReactTreeRef.current = true;
+    },
+  };
+}

package/src/overlays/floating/Floating.tsx

@@ -20,14 +20,11 @@ import React, {
 } from "react";
 import { useModalContext } from "../../modal/Modal.context";
 import { Slot } from "../../slot/Slot";
-import { createContext } from "../../util/create-context";
-import {
-  useCallbackRef,
-  useClientLayoutEffect,
-  useMergeRefs,
-} from "../../util/hooks";
+import { createStrictContext } from "../../util/create-strict-context";
+import { useClientLayoutEffect, useMergeRefs } from "../../util/hooks";
+import { useEventCallback } from "../../util/hooks/useEventCallback";
+import { useOpenChangeAnimationComplete } from "../../util/hooks/useOpenChangeAnimationComplete";
 import { AsChildProps } from "../../util/types";
-import { useOpenChangeAnimationComplete } from "../overlay/hooks/useOpenChangeAnimationComplete";
 import {
   type Align,
   type Measurable,
@@ -44,11 +41,9 @@ type FloatingContextValue = {
   onAnchorChange: (anchor: Measurable | null) => void;
 };
 
-export const [FloatingProvider, useFloatingContext] =
-  createContext<FloatingContextValue>({
+export const { Provider: FloatingProvider, useContext: useFloatingContext } =
+  createStrictContext<FloatingContextValue>({
     name: "FloatingContext",
-    hookName: "useFloating",
-    providerName: "FloatingProvider",
   });
 
 interface FloatingProps {
@@ -171,12 +166,12 @@ type FloatingContentContextValue = {
   hideArrow: boolean;
 };
 
-const [FloatingContentProvider, useFloatingContentContext] =
-  createContext<FloatingContentContextValue>({
-    name: "FloatingContentContext",
-    hookName: "useFloatingContentContext",
-    providerName: "FloatingContentProvider",
-  });
+const {
+  Provider: FloatingContentProvider,
+  useContext: useFloatingContentContext,
+} = createStrictContext<FloatingContentContextValue>({
+  name: "FloatingContentContext",
+});
 
 type Boundary = Element | null;
 
@@ -364,15 +359,15 @@ const FloatingContent = forwardRef<HTMLDivElement, FloatingContentProps>(
     }, [autoUpdateWhileMounted, enabled, floatingElements, update]);
 
     useOpenChangeAnimationComplete({
-      enabled: !!modalContext?.ref,
+      enabled: !!modalContext?.modalRef,
       open: enabled,
-      ref: modalContext?.ref,
+      ref: modalContext?.modalRef,
       onComplete: update,
     });
 
     const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
 
-    const handlePlaced = useCallbackRef(onPlaced);
+    const handlePlaced = useEventCallback(onPlaced);
 
     useClientLayoutEffect(() => {
       isPositioned && handlePlaced?.();