@base-ui/react 1.3.0 → 1.4.0

package/esm/utils/popups/useTriggerFocusGuards.js

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { contains, getNextTabbable, getTabbableAfterElement, getTabbableBeforeElement, isOutsideEvent } from "../../floating-ui-react/utils.js";
+import { createChangeEventDetails } from "../createBaseUIEventDetails.js";
+import { REASONS } from "../reasons.js";
+
+/**
+ * Minimal store interface required by the focus guard hook.
+ * Both PopoverStore and MenuStore satisfy this interface.
+ */
+
+/**
+ * Provides focus guard handlers for popup triggers (Popover, Menu).
+ *
+ * When the popup is open, invisible focus guard elements are placed before and after
+ * the trigger. These handlers close the popup and move focus to the appropriate
+ * tabbable element when the guards receive focus (i.e. when the user tabs out).
+ */
+export function useTriggerFocusGuards(store, triggerElementRef) {
+  const preFocusGuardRef = React.useRef(null);
+  const handlePreFocusGuardFocus = useStableCallback(event => {
+    ReactDOM.flushSync(() => {
+      store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent, event.currentTarget));
+    });
+    const previousTabbable = getTabbableBeforeElement(preFocusGuardRef.current);
+    previousTabbable?.focus();
+  });
+  const handleFocusTargetFocus = useStableCallback(event => {
+    const positionerElement = store.select('positionerElement');
+    if (positionerElement && isOutsideEvent(event, positionerElement)) {
+      store.context.beforeContentFocusGuardRef.current?.focus();
+    } else {
+      ReactDOM.flushSync(() => {
+        store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent, event.currentTarget));
+      });
+      let nextTabbable = getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
+      while (nextTabbable !== null && contains(positionerElement, nextTabbable)) {
+        const prevTabbable = nextTabbable;
+        nextTabbable = getNextTabbable(nextTabbable);
+        if (nextTabbable === prevTabbable) {
+          break;
+        }
+      }
+      nextTabbable?.focus();
+    }
+  });
+  return {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  };
+}

package/esm/utils/reason-parts.d.ts

@@ -30,4 +30,7 @@ export declare const siblingOpen: "sibling-open";
 export declare const disabled: "disabled";
 export declare const imperativeAction: "imperative-action";
 export declare const swipe: "swipe";
-export declare const windowResize: "window-resize";
+export declare const windowResize: "window-resize";
+export declare const dayPress: "day-press";
+export declare const monthChange: "month-change";
+export declare const valuePropChange: "value-prop-change";

package/esm/utils/reason-parts.js

@@ -30,4 +30,7 @@ export const siblingOpen = 'sibling-open';
 export const disabled = 'disabled';
 export const imperativeAction = 'imperative-action';
 export const swipe = 'swipe';
-export const windowResize = 'window-resize';
+export const windowResize = 'window-resize';
+export const dayPress = 'day-press';
+export const monthChange = 'month-change';
+export const valuePropChange = 'value-prop-change';

package/esm/{scroll-area/utils → utils}/scrollEdges.d.ts

@@ -1,2 +1,3 @@
 export declare const SCROLL_EDGE_TOLERANCE_PX = 1;
+export declare function getMaxScrollOffset(scrollSize: number, clientSize: number): number;
 export declare function normalizeScrollOffset(value: number, max: number): number;

package/esm/{scroll-area/utils → utils}/scrollEdges.js

@@ -1,5 +1,8 @@
-import { clamp } from "../../utils/clamp.js";
+import { clamp } from "./clamp.js";
 export const SCROLL_EDGE_TOLERANCE_PX = 1;
+export function getMaxScrollOffset(scrollSize, clientSize) {
+  return Math.max(0, scrollSize - clientSize);
+}
 export function normalizeScrollOffset(value, max) {
   if (max <= 0) {
     return 0;

package/esm/utils/temporal/date-helpers.d.ts

@@ -0,0 +1,15 @@
+import { TemporalAdapter, TemporalSupportedObject } from "../../types/temporal/index.js";
+export declare function mergeDateAndTime(adapter: TemporalAdapter, dateParam: TemporalSupportedObject, timeParam: TemporalSupportedObject): TemporalSupportedObject;
+export declare function areDatesEqual(adapter: TemporalAdapter, a: TemporalSupportedObject | null, b: TemporalSupportedObject | null): boolean;
+export declare function replaceInvalidDateByNull(adapter: TemporalAdapter, value: TemporalSupportedObject | null): TemporalSupportedObject | null;
+/**
+ * Check if the day of the date A is after the day of the date B.
+ * Uses timezone of the date A.
+ */
+export declare function isAfterDay(adapter: TemporalAdapter, dateA: TemporalSupportedObject, dateB: TemporalSupportedObject): boolean;
+/**
+ * Check if the day of the date A is before the day of the date B.
+ * Uses timezone of the date A.
+ */
+export declare function isBeforeDay(adapter: TemporalAdapter, dateA: TemporalSupportedObject, dateB: TemporalSupportedObject): boolean;
+export declare function formatMonthFullLetterAndYear(adapter: TemporalAdapter, date: TemporalSupportedObject): string;

package/esm/utils/temporal/date-helpers.js

@@ -0,0 +1,43 @@
+export function mergeDateAndTime(adapter, dateParam, timeParam) {
+  let mergedDate = dateParam;
+  mergedDate = adapter.setHours(mergedDate, adapter.getHours(timeParam));
+  mergedDate = adapter.setMinutes(mergedDate, adapter.getMinutes(timeParam));
+  mergedDate = adapter.setSeconds(mergedDate, adapter.getSeconds(timeParam));
+  mergedDate = adapter.setMilliseconds(mergedDate, adapter.getMilliseconds(timeParam));
+  return mergedDate;
+}
+export function areDatesEqual(adapter, a, b) {
+  if (!adapter.isValid(a) && a != null && !adapter.isValid(b) && b != null) {
+    return true;
+  }
+  return adapter.isEqual(a, b);
+}
+export function replaceInvalidDateByNull(adapter, value) {
+  if (adapter.isValid(value)) {
+    return value;
+  }
+  return null;
+}
+
+/**
+ * Check if the day of the date A is after the day of the date B.
+ * Uses timezone of the date A.
+ */
+export function isAfterDay(adapter, dateA, dateB) {
+  const dateBWithCorrectTimezone = adapter.setTimezone(dateB, adapter.getTimezone(dateA));
+  return adapter.isAfter(dateA, adapter.endOfDay(dateBWithCorrectTimezone));
+}
+
+/**
+ * Check if the day of the date A is before the day of the date B.
+ * Uses timezone of the date A.
+ */
+export function isBeforeDay(adapter, dateA, dateB) {
+  const dateBWithCorrectTimezone = adapter.setTimezone(dateB, adapter.getTimezone(dateA));
+  return adapter.isBefore(dateA, adapter.startOfDay(dateBWithCorrectTimezone));
+}
+export function formatMonthFullLetterAndYear(adapter, date) {
+  const f = adapter.formats;
+  const dateFormat = `${f.monthFullLetter} ${f.yearPadded}`;
+  return adapter.formatByString(date, dateFormat);
+}

package/esm/utils/temporal/getDateManager.d.ts

@@ -0,0 +1,5 @@
+import { ValidateDateReturnValue, ValidateDateValidationProps } from "./validateDate.js";
+import { TemporalManager } from "./types.js";
+import { TemporalValue, TemporalAdapter } from "../../types/temporal/index.js";
+export declare function getDateManager(adapter: TemporalAdapter): GetDateManagerReturnValue;
+export type GetDateManagerReturnValue = TemporalManager<TemporalValue, ValidateDateReturnValue, ValidateDateValidationProps>;

package/esm/utils/temporal/getDateManager.js

@@ -0,0 +1,19 @@
+import { areDatesEqual } from "./date-helpers.js";
+import { validateDate } from "./validateDate.js";
+export function getDateManager(adapter) {
+  return {
+    emptyValue: null,
+    emptyValidationError: null,
+    areValuesEqual: (valueA, valueB) => areDatesEqual(adapter, valueA, valueB),
+    getValidationError: (value, validationProps) => validateDate({
+      adapter,
+      value,
+      validationProps
+    }),
+    areValidationErrorEquals: (errorA, errorB) => errorA === errorB,
+    isValidationErrorEmpty: error => error == null,
+    getTimezone: value => adapter.isValid(value) ? adapter.getTimezone(value) : null,
+    setTimezone: (value, timezone) => value == null ? null : adapter.setTimezone(value, timezone),
+    getDatesFromValue: value => value == null ? [] : [value]
+  };
+}

package/esm/utils/temporal/getInitialReferenceDate.d.ts

@@ -0,0 +1,27 @@
+import { TemporalAdapter, TemporalTimezone, TemporalSupportedObject } from "../../types/temporal/index.js";
+import { ValidateDateValidationProps } from "./validateDate.js";
+export declare function getInitialReferenceDate(parameters: GetInitialReferenceDateParameters): TemporalSupportedObject;
+export interface GetInitialReferenceDateParameters {
+  /**
+   * The adapter used to manipulate the date.
+   */
+  adapter: TemporalAdapter;
+  /**
+   * The date provided by the user, if any.
+   * If the component is a range component, this will be the start date if defined or the end date otherwise.
+   */
+  externalDate: TemporalSupportedObject | null;
+  /**
+   * The reference date provided by the user, if any.
+   */
+  externalReferenceDate: TemporalSupportedObject | null;
+  /**
+   * The timezone the reference date should be in.
+   */
+  timezone: TemporalTimezone;
+  /**
+   * The props used to validate the date, time or date-time object.
+   */
+  validationProps: GetInitialReferenceDateValidationProps;
+}
+export interface GetInitialReferenceDateValidationProps extends ValidateDateValidationProps {}

package/esm/utils/temporal/getInitialReferenceDate.js

@@ -0,0 +1,28 @@
+import { isAfterDay, isBeforeDay } from "./date-helpers.js";
+export function getInitialReferenceDate(parameters) {
+  const {
+    adapter,
+    timezone,
+    externalDate,
+    externalReferenceDate,
+    validationProps: {
+      minDate,
+      maxDate
+    }
+  } = parameters;
+  let referenceDate = null;
+  if (adapter.isValid(externalDate)) {
+    referenceDate = externalDate;
+  } else if (adapter.isValid(externalReferenceDate)) {
+    referenceDate = externalReferenceDate;
+  } else {
+    referenceDate = adapter.startOfDay(adapter.now(timezone));
+    if (minDate != null && isBeforeDay(adapter, referenceDate, minDate)) {
+      referenceDate = minDate;
+    }
+    if (maxDate != null && isAfterDay(adapter, referenceDate, maxDate)) {
+      referenceDate = maxDate;
+    }
+  }
+  return adapter.setTimezone(referenceDate, timezone);
+}

package/esm/utils/temporal/types.d.ts

@@ -0,0 +1,65 @@
+import { TemporalTimezone, TemporalSupportedValue, TemporalSupportedObject } from "../../types/temporal/index.js";
+export interface TemporalTimezoneProps {
+  /**
+   * Choose which timezone to use for the value.
+   * Example: "default", "system", "UTC", "America/New_York".
+   * If you pass values from other timezones to some props, they will be converted to this timezone before being used.
+   * @default 'The timezone of the "value" or "defaultValue" prop if defined, "default" otherwise.'
+   */
+  timezone?: TemporalTimezone | undefined;
+}
+export interface TemporalOnErrorProps<TValue extends TemporalSupportedValue, TError> {
+  /**
+   * Callback fired when the error associated with the current value changes.
+   * When a validation error is detected, the `error` parameter contains a non-null value.
+   * This can be used to render an appropriate form error.
+   * @template TError The validation error type. It will be either `string` or a `null`. It can be in `[start, end]` format in case of range value.
+   * @template TValue The value type. It will be the same type as `value` or `null`. It can be in `[start, end]` format in case of range value.
+   * @param {TError} error The reason why the current value is not valid.
+   * @param {TValue} value The value associated with the error.
+   */
+  onError?: ((error: TError, value: TValue) => void) | undefined;
+}
+/**
+ * Object that contains all the necessary methods and properties to adapt a temporal component or utilities for a given value type.
+ */
+export interface TemporalManager<TValue extends TemporalSupportedValue, TError, TValidationProps extends {}> {
+  /**
+   * Value to set when emptying the component.
+   */
+  emptyValue: TValue;
+  /**
+   * Error when the value is valid.
+   * It is used to initialize the error state.
+   */
+  emptyValidationError: TError;
+  /**
+   * Checks whether two values are equal.
+   */
+  areValuesEqual: (valueA: TValue, valueB: TValue) => boolean;
+  /**
+   * Returns the error associated with a value for the current set of validation props.
+   */
+  getValidationError: (value: TValue, validationProps: TValidationProps) => TError;
+  /**
+   * Checks whether two validation errors are equal.
+   */
+  areValidationErrorEquals: (errorA: TError, errorB: TError | null) => boolean;
+  /**
+   * Checks whether the current validation error is empty.
+   */
+  isValidationErrorEmpty: (error: TError) => boolean;
+  /**
+   * Returns the timezone of the date inside a value.
+   * When used on a range component, throw an error if both values don't have the same timezone.
+   */
+  getTimezone: (value: TValue) => string | null;
+  /**
+   * Changes the timezone of the dates inside a value.
+   */
+  setTimezone: (value: TValue, timezone: TemporalTimezone) => TValue;
+  /**
+   * Returns the list of dates contained in the value.
+   */
+  getDatesFromValue: (value: TValue) => TemporalSupportedObject[];
+}

package/esm/utils/temporal/types.js

@@ -0,0 +1 @@
+export {};

package/esm/utils/temporal/validateDate.d.ts

@@ -0,0 +1,27 @@
+import { TemporalAdapter, TemporalValue, TemporalSupportedObject } from "../../types/temporal/index.js";
+export declare function validateDate(parameters: ValidateDateParameters): ValidateDateReturnValue;
+export interface ValidateDateParameters {
+  /**
+   * The adapter used to manipulate the date.
+   */
+  adapter: TemporalAdapter;
+  /**
+   * The value to validate.
+   */
+  value: TemporalValue;
+  /**
+   * The props used to validate a date.
+   */
+  validationProps: ValidateDateValidationProps;
+}
+export interface ValidateDateValidationProps {
+  /**
+   * Minimal selectable date.
+   */
+  minDate?: TemporalSupportedObject | undefined;
+  /**
+   * Maximal selectable date.
+   */
+  maxDate?: TemporalSupportedObject | undefined;
+}
+export type ValidateDateReturnValue = 'invalid' | 'before-min-date' | 'after-max-date' | null;

package/esm/utils/temporal/validateDate.js

@@ -0,0 +1,25 @@
+import { isAfterDay, isBeforeDay } from "./date-helpers.js";
+export function validateDate(parameters) {
+  const {
+    adapter,
+    value,
+    validationProps
+  } = parameters;
+  if (value === null) {
+    return null;
+  }
+  const {
+    minDate,
+    maxDate
+  } = validationProps;
+  if (!adapter.isValid(value)) {
+    return 'invalid';
+  }
+  if (minDate != null && isBeforeDay(adapter, value, minDate)) {
+    return 'before-min-date';
+  }
+  if (maxDate != null && isAfterDay(adapter, value, maxDate)) {
+    return 'after-max-date';
+  }
+  return null;
+}

package/esm/utils/types.d.ts

@@ -17,14 +17,14 @@ export type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]
  * Props shared by all Base UI components.
  * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
  */
-export type BaseUIComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked'> & {
+export type BaseUIComponentProps<ElementType extends React.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked' | 'style'> & {
   /**
    * CSS class applied to the element, or a function that
-   * returns a class based on the component’s state.
+   * returns a class based on the component's state.
    */
   className?: string | ((state: State) => string | undefined) | undefined;
   /**
-   * Allows you to replace the component’s HTML element
+   * Allows you to replace the component's HTML element
    * with a different tag, or compose it with another component.
    *
    * Accepts a `ReactElement` or a function that returns the element to render.
@@ -32,7 +32,7 @@ export type BaseUIComponentProps<ElementType extends React.ElementType, State, R
   render?: React.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
   /**
    * Style applied to the element, or a function that
-   * returns a style object based on the component’s state.
+   * returns a style object based on the component's state.
    */
   style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined;
 };
@@ -40,7 +40,7 @@ export interface NativeButtonProps {
   /**
    * Whether the component renders a native `<button>` element when replacing it
    * via the `render` prop.
-   * Set to `false` if the rendered element is not a button (e.g. `<div>`).
+   * Set to `false` if the rendered element is not a button (for example, `<div>`).
    * @default true
    */
   nativeButton?: boolean | undefined;
@@ -59,5 +59,11 @@ export interface NonNativeButtonProps {
  * Taken from https://effectivetypescript.com/2022/02/25/gentips-4-display/
  */
 export type Simplify<T> = T extends Function ? T : { [K in keyof T]: T[K] };
+/**
+ * Makes specified keys in a type required.
+ *
+ * @template T - The original type.
+ * @template K - The keys to make required.
+ */
 export type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;
 export type Orientation = 'horizontal' | 'vertical';

package/esm/utils/useAnchorPositioning.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { getSide, getAlignment, getSideAxis } from '@floating-ui/utils';
-import { ownerDocument } from '@base-ui/utils/owner';
+import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
@@ -81,6 +81,7 @@ export function useAnchorPositioning(params) {
   const anchorFnCallback = useStableCallback(anchorFn);
   const anchorDep = anchorFn ? anchorFnCallback : anchor;
   const anchorValueRef = useValueAsRef(anchor);
+  const mountedRef = useValueAsRef(mounted);
   const direction = useDirection();
   const isRtl = direction === 'rtl';
   const side = mountSide || {
@@ -206,12 +207,15 @@ export function useAnchorPositioning(params) {
       availableHeight,
       rects
     }) {
+      if (!mountedRef.current) {
+        return;
+      }
       const floatingStyle = floating.style;
       floatingStyle.setProperty('--available-width', `${availableWidth}px`);
       floatingStyle.setProperty('--available-height', `${availableHeight}px`);
 
       // Snap anchor dimensions to device pixels to ensure the popup's visual width matches the anchor's one.
-      const dpr = window.devicePixelRatio || 1;
+      const dpr = ownerWindow(floating).devicePixelRatio || 1;
       const {
         x,
         y,
@@ -226,7 +230,7 @@ export function useAnchorPositioning(params) {
   }), arrow(() => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
     // we'll create a fake element.
-    element: arrowRef.current || document.createElement('div'),
+    element: arrowRef.current || ownerDocument(arrowRef.current).createElement('div'),
     padding: arrowPadding,
     offsetParent: 'floating'
   }), [arrowPadding]), {
@@ -270,7 +274,8 @@ export function useAnchorPositioning(params) {
       floatingRootContext.update({
         referenceElement: null,
         floatingElement: null,
-        domReferenceElement: null
+        domReferenceElement: null,
+        positionReference: null
       });
     }
   }, [mounted, floatingRootContext]);
@@ -291,6 +296,7 @@ export function useAnchorPositioning(params) {
     floatingStyles: originalFloatingStyles
   } = useFloating({
     rootContext: floatingRootContext,
+    open: keepMounted ? mounted : undefined,
     placement,
     middleware,
     strategy: positionMethod,

package/esm/utils/useAnchoredPopupScrollLock.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Manages scroll lock for anchored popups. For non-touch opens, scroll lock is applied when
+ * enabled. For touch opens, scroll lock is applied only when the positioner width is effectively
+ * viewport-sized.
+ */
+export declare function useAnchoredPopupScrollLock(enabled: boolean, touchOpen: boolean, positionerElement: HTMLElement | null, referenceElement: Element | null): void;

package/esm/utils/useAnchoredPopupScrollLock.js

@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import { ownerDocument } from '@base-ui/utils/owner';
+import { useScrollLock } from '@base-ui/utils/useScrollLock';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+
+// Touch-opened popups normally avoid scroll locking so users can still swipe outside to dismiss.
+// This hook re-enables scroll lock only when the popup is effectively full-width.
+// Treat popups with up to 20px of total horizontal gutter as full-width so common ~10px side
+// padding still locks scroll, since that leaves too little outside space for a reliable swipe.
+const VIEWPORT_WIDTH_TOLERANCE_PX = 20;
+
+/**
+ * Manages scroll lock for anchored popups. For non-touch opens, scroll lock is applied when
+ * enabled. For touch opens, scroll lock is applied only when the positioner width is effectively
+ * viewport-sized.
+ */
+export function useAnchoredPopupScrollLock(enabled, touchOpen, positionerElement, referenceElement) {
+  const [touchOpenShouldLockScroll, setTouchOpenShouldLockScroll] = React.useState(false);
+  useIsoLayoutEffect(() => {
+    if (!enabled || !touchOpen || positionerElement == null) {
+      setTouchOpenShouldLockScroll(false);
+      return;
+    }
+    const viewportWidth = ownerDocument(positionerElement).documentElement.clientWidth;
+    const popupWidth = positionerElement.offsetWidth;
+    setTouchOpenShouldLockScroll(viewportWidth > 0 && popupWidth > 0 && popupWidth >= viewportWidth - VIEWPORT_WIDTH_TOLERANCE_PX);
+  }, [enabled, touchOpen, positionerElement]);
+  useScrollLock(enabled && (!touchOpen || touchOpenShouldLockScroll), referenceElement);
+}

package/esm/utils/useAnimationsFinished.js

@@ -24,69 +24,66 @@ export function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved
    */
   signal = null) => {
     frame.cancel();
-    function done() {
-      // Synchronously flush the unmounting of the component so that the browser doesn't
-      // paint: https://github.com/mui/base-ui/issues/979
-      ReactDOM.flushSync(fnToExecute);
-    }
     const element = resolveRef(elementOrRef);
     if (element == null) {
       return;
     }
     const resolvedElement = element;
+    const done = () => {
+      // Synchronously flush the unmounting of the component so that the browser doesn't
+      // paint: https://github.com/mui/base-ui/issues/979
+      ReactDOM.flushSync(fnToExecute);
+    };
     if (typeof resolvedElement.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
       fnToExecute();
-    } else {
-      function execWaitForStartingStyleRemoved() {
-        const startingStyleAttribute = TransitionStatusDataAttributes.startingStyle;
-
-        // If `[data-starting-style]` isn't present, fall back to waiting one more frame
-        // to give "open" animations a chance to be registered.
-        if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
-          frame.request(exec);
-          return;
-        }
-
-        // Wait for `[data-starting-style]` to have been removed.
-        const attributeObserver = new MutationObserver(() => {
-          if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
-            attributeObserver.disconnect();
-            exec();
-          }
-        });
-        attributeObserver.observe(resolvedElement, {
-          attributes: true,
-          attributeFilter: [startingStyleAttribute]
-        });
-        signal?.addEventListener('abort', () => attributeObserver.disconnect(), {
-          once: true
-        });
-      }
-      function exec() {
-        Promise.all(resolvedElement.getAnimations().map(anim => anim.finished)).then(() => {
-          if (signal?.aborted) {
-            return;
-          }
+      return;
+    }
+    function exec() {
+      Promise.all(resolvedElement.getAnimations().map(animation => animation.finished)).then(() => {
+        if (!signal?.aborted) {
           done();
-        }).catch(() => {
-          const currentAnimations = resolvedElement.getAnimations();
-          if (treatAbortedAsFinished) {
-            if (signal?.aborted) {
-              return;
-            }
+        }
+      }).catch(() => {
+        if (treatAbortedAsFinished) {
+          if (!signal?.aborted) {
             done();
-          } else if (currentAnimations.length > 0 && currentAnimations.some(anim => anim.pending || anim.playState !== 'finished')) {
-            // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
-            // In such cases, we need to re-check if any new animations have started.
-            exec();
           }
-        });
-      }
-      if (waitForStartingStyleRemoved) {
-        execWaitForStartingStyleRemoved();
+          return;
+        }
+        const currentAnimations = resolvedElement.getAnimations();
+        if (!signal?.aborted && currentAnimations.length > 0 && currentAnimations.some(animation => animation.pending || animation.playState !== 'finished')) {
+          // Sometimes animations can be aborted because a property they depend on changes while the animation plays.
+          // In such cases, we need to re-check if any new animations have started.
+          exec();
+        }
+      });
+    }
+    if (waitForStartingStyleRemoved) {
+      const startingStyleAttribute = TransitionStatusDataAttributes.startingStyle;
+
+      // If `[data-starting-style]` isn't present, fall back to waiting one more frame
+      // to give "open" animations a chance to be registered.
+      if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+        frame.request(exec);
         return;
       }
-      frame.request(exec);
+
+      // Wait for `[data-starting-style]` to have been removed.
+      const attributeObserver = new MutationObserver(() => {
+        if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+          attributeObserver.disconnect();
+          exec();
+        }
+      });
+      attributeObserver.observe(resolvedElement, {
+        attributes: true,
+        attributeFilter: [startingStyleAttribute]
+      });
+      signal?.addEventListener('abort', () => attributeObserver.disconnect(), {
+        once: true
+      });
+      return;
     }
+    frame.request(exec);
   });
 }

package/esm/utils/useIsHydrating.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Returns `true` while React is hydrating server-rendered markup and `false`
+ * for fresh client-only mounts.
+ */
+export declare function useIsHydrating(): boolean;

package/esm/utils/useIsHydrating.js

@@ -0,0 +1,19 @@
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+import { NOOP } from "./noop.js";
+function subscribe() {
+  return NOOP;
+}
+function getSnapshot() {
+  return false;
+}
+function getServerSnapshot() {
+  return true;
+}
+
+/**
+ * Returns `true` while React is hydrating server-rendered markup and `false`
+ * for fresh client-only mounts.
+ */
+export function useIsHydrating() {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}