@navikt/ds-react 7.32.1 → 7.32.3

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/popover/Popover.tsx

@@ -148,7 +148,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
 
     useClientLayoutEffect(() => {
       refs.setReference(anchorEl);
-    }, [anchorEl]);
+    }, [anchorEl, refs]);
 
     const floatingRef = useMergeRefs(refs.setFloating, ref);
 

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