@navikt/ds-react 7.32.0 → 7.32.2

package/src/overlays/dismissablelayer/DismissableLayer.tsx

@@ -8,6 +8,7 @@ import React, {
 import { Slot } from "../../slot/Slot";
 import { useMergeRefs } from "../../util/hooks";
 import { createDescendantContext } from "../../util/hooks/descendants/useDescendant";
+import { ownerDocument } from "../../util/owner";
 import { AsChild } from "../../util/types/AsChild";
 import {
   CustomFocusEvent,
@@ -158,11 +159,7 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
 
     const mergedRefs = useMergeRefs(setNode, register, ref);
 
-    /**
-     * In some cases the `node.ownerDocument` can differ from global document.
-     * This can happend when portaling elements or using web-components
-     */
-    const ownerDocument = node?.ownerDocument ?? globalThis?.document;
+    const ownerDoc = ownerDocument(node);
 
     const hasInteractedOutsideRef = useRef(false);
     const hasPointerDownOutsideRef = useRef(false);
@@ -278,7 +275,7 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
       if (!event.defaultPrevented && onDismiss) {
         onDismiss();
       }
-    }, ownerDocument);
+    }, ownerDoc);
 
     const focusOutside = useFocusOutside((event) => {
       if (!enabled) {
@@ -302,7 +299,7 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
       if (!event.defaultPrevented && onDismiss) {
         onDismiss();
       }
-    }, ownerDocument);
+    }, ownerDoc);
 
     useEscapeKeydown((event) => {
       if (!enabled) {
@@ -331,7 +328,7 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
         event.preventDefault();
         onDismiss();
       }
-    }, ownerDocument);
+    }, ownerDoc);
 
     /**
      * If `disableOutsidePointerEvents` is true,
@@ -343,23 +340,17 @@ const DismissableLayerNode = forwardRef<HTMLDivElement, DismissableLayerProps>(
       if (!node || !enabled || !disableOutsidePointerEvents) return;
 
       if (bodyLockCount === 0) {
-        originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
-        ownerDocument.body.style.pointerEvents = "none";
+        originalBodyPointerEvents = ownerDoc.body.style.pointerEvents;
+        ownerDoc.body.style.pointerEvents = "none";
       }
       bodyLockCount++;
       return () => {
         if (bodyLockCount === 1) {
-          ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
+          ownerDoc.body.style.pointerEvents = originalBodyPointerEvents;
         }
         bodyLockCount--;
       };
-    }, [
-      node,
-      ownerDocument,
-      disableOutsidePointerEvents,
-      descendants,
-      enabled,
-    ]);
+    }, [node, ownerDoc, disableOutsidePointerEvents, descendants, enabled]);
 
     /**
      * To make sure pointerEvents are enabled for all parents and siblings when the layer is removed from the DOM

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

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 import { useCallbackRef } from "../../../util/hooks";
+import { useTimeout } from "../../../util/hooks/useTimeout";
 import {
   CUSTOM_EVENTS,
   CustomPointerDownEvent,
@@ -19,6 +20,7 @@ export function usePointerDownOutside(
   const handlePointerDownOutside = useCallbackRef(callback) as EventListener;
   const isPointerInsideReactTreeRef = useRef(false);
   const handleClickRef = useRef<typeof handlePointerDownOutside>(() => {});
+  const timeout = useTimeout();
 
   useEffect(() => {
     const handlePointerDown = (event: PointerEvent) => {
@@ -77,16 +79,15 @@ export function usePointerDownOutside(
      *   })
      * });
      */
-    const timerId = window.setTimeout(() => {
+    timeout.start(0, () => {
       ownerDocument.addEventListener("pointerdown", handlePointerDown);
-    }, 0);
+    });
 
     return () => {
-      window.clearTimeout(timerId);
       ownerDocument.removeEventListener("pointerdown", handlePointerDown);
       ownerDocument.removeEventListener("click", handleClickRef.current);
     };
-  }, [ownerDocument, handlePointerDownOutside]);
+  }, [ownerDocument, handlePointerDownOutside, timeout]);
 
   return {
     // ensures we check React component tree (not just DOM tree)

package/src/overlays/floating-menu/Menu.tsx

@@ -3,11 +3,11 @@ import ReactDOM from "react-dom";
 import { Portal } from "../../portal";
 import { composeEventHandlers } from "../../util/composeEventHandlers";
 import { createContext } from "../../util/create-context";
+import { FocusBoundary } from "../../util/focus-boundary/FocusBoundary";
 import { useCallbackRef, useId, useMergeRefs } from "../../util/hooks";
 import { createDescendantContext } from "../../util/hooks/descendants/useDescendant";
 import { DismissableLayer } from "../dismissablelayer/DismissableLayer";
 import { Floating } from "../floating/Floating";
-import { FocusScope } from "./parts/FocusScope";
 import { RovingFocus, RovingFocusProps } from "./parts/RovingFocus";
 import {
   SlottedDivElement,
@@ -237,13 +237,13 @@ const MenuRootContentModal = forwardRef<
 
 /* -------------------------- Menu content internals ------------------------- */
 type MenuContentInternalElement = React.ElementRef<typeof Floating.Content>;
-type FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;
+type FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusBoundary>;
 type DismissableLayerProps = React.ComponentPropsWithoutRef<
   typeof DismissableLayer
 >;
 
 type MenuContentInternalPrivateProps = {
-  onOpenAutoFocus?: FocusScopeProps["onMountHandler"];
+  onOpenAutoFocus?: FocusScopeProps["onMountAutoFocus"];
   onDismiss?: DismissableLayerProps["onDismiss"];
   disableOutsidePointerEvents?: DismissableLayerProps["disableOutsidePointerEvents"];
 };
@@ -258,7 +258,7 @@ interface MenuContentInternalProps
    * Event handler called when auto-focusing after close.
    * Can be prevented.
    */
-  onCloseAutoFocus?: FocusScopeProps["onUnmountHandler"];
+  onCloseAutoFocus?: FocusScopeProps["onUnmountAutoFocus"];
   onEntryFocus?: RovingFocusProps["onEntryFocus"];
   onEscapeKeyDown?: DismissableLayerProps["onEscapeKeyDown"];
   onPointerDownOutside?: DismissableLayerProps["onPointerDownOutside"];
@@ -300,14 +300,17 @@ const MenuContentInternal = forwardRef<
     );
 
     return (
-      <FocusScope
-        onMountHandler={composeEventHandlers(onOpenAutoFocus, (event) => {
+      <FocusBoundary
+        onMountAutoFocus={composeEventHandlers(onOpenAutoFocus, (event) => {
           // when opening, explicitly focus the content area only and leave
           // `onEntryFocus` in  control of focusing first item
           event.preventDefault();
           contentRef.current?.focus({ preventScroll: true });
         })}
-        onUnmountHandler={onCloseAutoFocus}
+        onUnmountAutoFocus={onCloseAutoFocus}
+        /* Focus trapping is handled in `Floating.Content: onKeyDown */
+        trapped={false}
+        loop={false}
       >
         <DismissableLayer
           asChild
@@ -324,8 +327,9 @@ const MenuContentInternal = forwardRef<
             descendants={descendants}
             onEntryFocus={composeEventHandlers(onEntryFocus, (event) => {
               // only focus first item when using keyboard
-              if (!rootContext.isUsingKeyboardRef.current)
+              if (!rootContext.isUsingKeyboardRef.current) {
                 event.preventDefault();
+              }
             })}
           >
             <Floating.Content
@@ -363,7 +367,7 @@ const MenuContentInternal = forwardRef<
             />
           </RovingFocus>
         </DismissableLayer>
-      </FocusScope>
+      </FocusBoundary>
     );
   },
 );

package/src/overlays/floating-menu/parts/RovingFocus.tsx

@@ -3,6 +3,7 @@ import { Slot } from "../../../slot/Slot";
 import { composeEventHandlers } from "../../../util/composeEventHandlers";
 import { useCallbackRef, useMergeRefs } from "../../../util/hooks";
 import { DescendantsManager } from "../../../util/hooks/descendants/descendant";
+import { ownerDocument } from "../../../util/owner";
 
 interface RovingFocusProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, "tabIndex"> {
@@ -46,12 +47,11 @@ const RovingFocus = forwardRef<HTMLDivElement, RovingFocusProps>(
       (event: React.KeyboardEvent) => {
         const loop = false;
 
-        const ownerDocument =
-          _ref?.current?.ownerDocument ?? globalThis?.document;
+        const ownerDoc = ownerDocument(_ref?.current);
 
         const idx = descendants
           .values()
-          .findIndex((x) => x.node.isSameNode(ownerDocument.activeElement));
+          .findIndex((x) => x.node.isSameNode(ownerDoc.activeElement));
 
         const nextItem = () => {
           const next = descendants.nextEnabled(idx, loop);

package/src/overlays/overlay/hooks/useAnimationsFinished.ts

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect } from "react";
 import ReactDOM from "react-dom";
-import { useEventCallback } from "./useEventCallback";
+import { useEventCallback } from "../../../util/hooks/useEventCallback";
 
 /**
  * Returns a stable function that, when invoked, waits for all current CSS/Web Animations

package/src/overlays/overlay/hooks/useOpenChangeAnimationComplete.ts

@@ -1,9 +1,9 @@
 "use client";
 
 import React, { useEffect } from "react";
+import { useEventCallback } from "../../../util/hooks/useEventCallback";
+import { useLatestRef } from "../../../util/hooks/useLatestRef";
 import { useAnimationsFinished } from "./useAnimationsFinished";
-import { useEventCallback } from "./useEventCallback";
-import { useLatestRef } from "./useLatestRef";
 
 interface useOpenChangeAnimationCompleteParameters {
   /**

package/src/progress-bar/ProgressBar.tsx

@@ -1,5 +1,7 @@
-import React, { HTMLAttributes, forwardRef, useEffect, useRef } from "react";
+import React, { HTMLAttributes, forwardRef, useEffect } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import { useLatestRef } from "../util/hooks/useLatestRef";
+import { useTimeout } from "../util/hooks/useTimeout";
 import { useI18n } from "../util/i18n/i18n.hooks";
 
 interface ProgressBarPropsBase
@@ -95,19 +97,19 @@ export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
   ) => {
     const { cn } = useRenameCSS();
     const translateX = 100 - (Math.round(value) / valueMax) * 100;
-    const onTimeoutRef = useRef<() => void>(undefined);
-    onTimeoutRef.current = simulated?.onTimeout;
+    const onTimeoutRef = useLatestRef(simulated?.onTimeout);
+
     const translate = useI18n("ProgressBar");
+    const timeout = useTimeout();
 
     useEffect(() => {
-      if (simulated?.seconds && onTimeoutRef.current) {
-        const timeout = setTimeout(
-          onTimeoutRef.current,
-          simulated.seconds * 1000,
-        );
-        return () => clearTimeout(timeout);
+      if (!simulated?.seconds || !onTimeoutRef.current) {
+        return;
       }
-    }, [simulated?.seconds]);
+
+      timeout.start(simulated.seconds * 1000, onTimeoutRef.current);
+      return timeout.clear;
+    }, [onTimeoutRef, simulated?.seconds, timeout]);
 
     return (
       /* biome-ignore lint/a11y/useFocusableInteractive: Progressbar is not interactive. */

package/src/table/AnimateHeight.tsx

@@ -1,11 +1,11 @@
 /* https://github.com/Stanko/react-animate-height/blob/v3/src/index.tsx */
 import React, { CSSProperties, useEffect, useRef, useState } from "react";
 import { useRenameCSS } from "../theme/Theme";
+import { useTimeout } from "../util/hooks/useTimeout";
 
 // ------------------ Types
 
 export type Height = "auto" | number | `${number}%`;
-type Timeout = ReturnType<typeof setTimeout>;
 type Overflow = "auto" | "visible" | "hidden" | undefined;
 
 // ------------------ Helpers
@@ -73,8 +73,8 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
   const prevHeight = useRef<Height>(height);
   const contentElement = useRef<HTMLDivElement>(null);
 
-  const animationClassesTimeoutID = useRef<Timeout>(undefined);
-  const timeoutID = useRef<Timeout>(undefined);
+  const animationClassTimeout = useTimeout();
+  const animationTimeout = useTimeout();
 
   const initialHeight = useRef<Height>(height);
   const initialOverflow = useRef<Overflow>("visible");
@@ -157,33 +157,29 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
       setOverflow("hidden");
       setUseTransitions(!isCurrentHeightAuto);
 
-      // Clear timeouts
-      clearTimeout(timeoutID.current as Timeout);
-      clearTimeout(animationClassesTimeoutID.current as Timeout);
-
       if (isCurrentHeightAuto) {
         // When animating from 'auto' we use a short timeout to start animation
         // after setting fixed height above
         timeoutUseTransitions = true;
 
         // Short timeout to allow rendering of the initial animation state first
-        timeoutID.current = setTimeout(() => {
+        animationTimeout.start(50, () => {
           setCurrentHeight(timeoutHeight);
           setOverflow(timeoutOverflow);
           setUseTransitions(timeoutUseTransitions);
-        }, 50);
+        });
 
         // Set static classes and remove transitions when animation ends
-        animationClassesTimeoutID.current = setTimeout(() => {
+        animationClassTimeout.start(totalDuration, () => {
           setUseTransitions(false);
 
           // ANIMATION ENDS
           // Hide content if height is 0 (to prevent tabbing into it)
           hideContent(contentElement.current, timeoutHeight);
-        }, totalDuration);
+        });
       } else {
         // Set end height, classes and remove transitions when animation is complete
-        timeoutID.current = setTimeout(() => {
+        animationTimeout.start(totalDuration, () => {
           setCurrentHeight(timeoutHeight);
           setOverflow(timeoutOverflow);
           setUseTransitions(false);
@@ -195,15 +191,16 @@ const AnimateHeight: React.FC<AnimateHeightProps> = ({
             // Hide content if height is 0 (to prevent tabbing into it)
             hideContent(contentElement.current, newHeight); // TODO solve newHeight = 0
           }
-        }, totalDuration);
+        });
       }
     }
 
     prevHeight.current = height;
 
+    /* We need to manually clear here since we cant guarantee the `.start()` getting called after `height` changes */
     return () => {
-      clearTimeout(timeoutID.current as Timeout);
-      clearTimeout(animationClassesTimeoutID.current as Timeout);
+      animationTimeout.clear();
+      animationClassTimeout.clear();
     };
 
     // This should be explicitly run only on height change

package/src/tabs/parts/tablist/useScrollButtons.ts

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { debounce } from "../../../util";
+import { ownerDocument } from "../../../util/owner";
 
 export function useScrollButtons(
   listRef: React.RefObject<HTMLDivElement | null>,
@@ -31,8 +32,8 @@ export function useScrollButtons(
 
   useEffect(() => {
     const handleResize = () => updateScrollButtonState();
-    const win = listRef.current?.ownerDocument ?? document ?? window;
-    win.addEventListener("resize", handleResize);
+    const ownerDoc = ownerDocument(listRef.current);
+    ownerDoc.addEventListener("resize", handleResize);
 
     let resizeObserver: ResizeObserver;
 
@@ -42,7 +43,7 @@ export function useScrollButtons(
     }
 
     return () => {
-      win.removeEventListener("resize", handleResize);
+      ownerDoc.removeEventListener("resize", handleResize);
       resizeObserver?.disconnect();
       updateScrollButtonState.clear();
     };

package/src/util/TextareaAutoSize.tsx

@@ -4,6 +4,7 @@ import ReactDOM from "react-dom";
 import { useClientLayoutEffect } from "../util/hooks";
 import debounce from "./debounce";
 import { useMergeRefs } from "./hooks/useMergeRefs";
+import { ownerWindow } from "./owner";
 
 type State = {
   outerHeightStyle: number;
@@ -35,15 +36,6 @@ const checkState = (
   return prevState;
 };
 
-/**
- * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerDocument/ownerDocument.ts
- * https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/ownerWindow/ownerWindow.ts
- */
-const ownerWindow = (node: Node | undefined): Window => {
-  const doc = node?.ownerDocument || document;
-  return doc.defaultView || window;
-};
-
 function getStyleValue(value: string) {
   return parseInt(value, 10) || 0;
 }

package/src/util/create-context.tsx

@@ -16,7 +16,6 @@ export interface CreateContextOptions<T> {
   errorMessage?: string;
   name?: string;
   defaultValue?: T;
-  strict?: boolean;
 }
 
 type ProviderProps<T> = T & { children: React.ReactNode };

package/src/util/debounce.ts

@@ -1,26 +1,25 @@
 "use client";
+
+import { Timeout } from "./hooks/useTimeout";
+
 // https://github.com/mui/material-ui/blob/master/packages/mui-utils/src/debounce.js
 export default function debounce<T extends unknown[]>(
   func: (...args: T) => void,
   wait = 166,
   leading = false,
 ) {
-  let timeout: ReturnType<typeof setTimeout> | undefined;
+  const timeout = new Timeout();
   function debounced(this: any, ...args: T) {
     const later = () => {
-      timeout = undefined;
       func.apply(this, args);
     };
-    if (!timeout && leading) {
+    if (!timeout.isStarted() && leading) {
       later();
     }
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
+    timeout.start(wait, later);
   }
 
-  debounced.clear = () => {
-    clearTimeout(timeout);
-  };
+  debounced.clear = timeout.clear;
 
   return debounced;
 }

package/src/util/detectBrowser.ts

@@ -0,0 +1,5 @@
+const hasNavigator = typeof navigator !== "undefined";
+
+const isSafari = hasNavigator && /apple/i.test(navigator.vendor);
+
+export { isSafari };