@base-ui/react 1.2.0 → 1.4.0

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

@@ -1,7 +1,6 @@
-import * as React from 'react';
-export type HTMLProps<T = any> = React.HTMLAttributes<T> & {
-  ref?: React.Ref<T> | undefined;
-};
+import type * as React from 'react';
+import type { BaseUIEvent, ComponentRenderFn, HTMLProps } from "../types/index.js";
+export type { HTMLProps, BaseUIEvent, ComponentRenderFn };
 export interface FloatingUIOpenChangeDetails {
   open: boolean;
   reason: string;
@@ -9,50 +8,39 @@ export interface FloatingUIOpenChangeDetails {
   nested: boolean;
   triggerElement?: Element | undefined;
 }
-export type BaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
-  preventBaseUIHandler: () => void;
-  readonly baseUIHandlerPrevented?: boolean | undefined;
-};
 type WithPreventBaseUIHandler<T> = T extends ((event: infer E) => any) ? E extends React.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
 /**
  * Adds a `preventBaseUIHandler` method to all event handlers.
  */
 export type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]> };
-/**
- * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
- *
- * @template Props Props to be spread on the rendered element.
- * @template State Component's internal state.
- */
-export type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement<unknown>;
 /**
  * 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;
+  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.
    */
-  render?: (React.ReactElement | ComponentRenderFn<RenderFunctionProps, State>) | undefined;
+  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;
+  style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined;
 };
 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;
@@ -71,6 +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';
-export {};
+export type Orientation = 'horizontal' | 'vertical';

package/esm/utils/useAnchorPositioning.d.ts

@@ -19,50 +19,65 @@ export type OffsetFunction = (data: {
 interface SideFlipMode {
   /**
    * How to avoid collisions on the side axis.
+   * - `'flip'`: If there is not enough space, place the popup on the opposite side.
+   * - `'none'`: Keep the preferred side even if it overflows.
    */
-  side?: ('flip' | 'none') | undefined;
+  side?: 'flip' | 'none' | undefined;
   /**
    * How to avoid collisions on the align axis.
+   * - `'flip'`: If there is not enough space, swap `'start'` and `'end'` alignment.
+   * - `'shift'`: Keep the alignment and shift the popup to fit within the boundary.
+   * - `'none'`: Keep the preferred alignment even if it overflows.
    */
-  align?: ('flip' | 'shift' | 'none') | undefined;
+  align?: 'flip' | 'shift' | 'none' | undefined;
   /**
    * If both sides on the preferred axis do not fit, determines whether to fallback
    * to a side on the perpendicular axis and which logical side to prefer.
+   * - `'start'`: Prefer the logical start side on the perpendicular axis.
+   * - `'end'`: Prefer the logical end side on the perpendicular axis.
+   * - `'none'`: Do not fallback to the perpendicular axis.
    */
-  fallbackAxisSide?: ('start' | 'end' | 'none') | undefined;
+  fallbackAxisSide?: 'start' | 'end' | 'none' | undefined;
 }
 interface SideShiftMode {
   /**
    * How to avoid collisions on the side axis.
+   * - `'shift'`: Keep the preferred side and shift the popup to fit within the boundary.
+   * - `'none'`: Keep the preferred side even if it overflows.
    */
-  side?: ('shift' | 'none') | undefined;
+  side?: 'shift' | 'none' | undefined;
   /**
    * How to avoid collisions on the align axis.
+   * - `'shift'`: Keep the alignment and shift the popup to fit within the boundary.
+   * - `'none'`: Keep the preferred alignment even if it overflows.
    */
-  align?: ('shift' | 'none') | undefined;
+  align?: 'shift' | 'none' | undefined;
   /**
    * If both sides on the preferred axis do not fit, determines whether to fallback
    * to a side on the perpendicular axis and which logical side to prefer.
+   * - `'start'`: Prefer the logical start side on the perpendicular axis.
+   * - `'end'`: Prefer the logical end side on the perpendicular axis.
+   * - `'none'`: Do not fallback to the perpendicular axis.
    */
-  fallbackAxisSide?: ('start' | 'end' | 'none') | undefined;
+  fallbackAxisSide?: 'start' | 'end' | 'none' | undefined;
 }
 export type CollisionAvoidance = SideFlipMode | SideShiftMode;
 /**
  * Provides standardized anchor positioning behavior for floating elements. Wraps Floating UI's
  * `useFloating` hook.
  */
-export declare function useAnchorPositioning(params: useAnchorPositioning.Parameters): useAnchorPositioning.ReturnValue;
+export declare function useAnchorPositioning(params: UseAnchorPositioningParameters): UseAnchorPositioningReturnValue;
 export interface UseAnchorPositioningSharedParameters {
   /**
    * An element to position the popup against.
    * By default, the popup will be positioned against the trigger.
    */
-  anchor?: (Element | null | VirtualElement | React.RefObject<Element | null> | (() => Element | VirtualElement | null)) | undefined;
+  anchor?: Element | null | VirtualElement | React.RefObject<Element | null> | (() => Element | VirtualElement | null) | undefined;
   /**
    * Determines which CSS `position` property to use.
    * @default 'absolute'
    */
-  positionMethod?: ('absolute' | 'fixed') | undefined;
+  positionMethod?: 'absolute' | 'fixed' | undefined;
   /**
    * Which side of the anchor element to align the popup against.
    * May automatically change to avoid collisions.
@@ -93,7 +108,7 @@ export interface UseAnchorPositioningSharedParameters {
    *
    * @default 0
    */
-  sideOffset?: (number | OffsetFunction) | undefined;
+  sideOffset?: number | OffsetFunction | undefined;
   /**
    * How to align the popup relative to the specified side.
    * @default 'center'
@@ -123,7 +138,7 @@ export interface UseAnchorPositioningSharedParameters {
    *
    * @default 0
    */
-  alignOffset?: (number | OffsetFunction) | undefined;
+  alignOffset?: number | OffsetFunction | undefined;
   /**
    * An element or a rectangle that delimits the area that the popup is confined to.
    * @default 'clipping-ancestors'
@@ -155,6 +170,30 @@ export interface UseAnchorPositioningSharedParameters {
   /**
    * Determines how to handle collisions when positioning the popup.
    *
+   * `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
+   * - `'flip'`: keep the requested side when it fits; otherwise try the opposite side
+   *   (`top` and `bottom`, or `left` and `right`).
+   * - `'shift'`: never change side; keep the requested side and move the popup within
+   *   the clipping boundary so it stays visible.
+   * - `'none'`: do not correct side-axis overflow.
+   *
+   * `align` controls overflow on the alignment axis (`start`/`center`/`end`):
+   * - `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
+   * - `'shift'`: keep side and requested alignment, then nudge the popup along the
+   *   alignment axis to fit.
+   * - `'none'`: do not correct alignment-axis overflow.
+   *
+   * `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
+   * preferred axis cannot fit:
+   * - `'start'`: allow perpendicular fallback and try the logical start side first
+   *   (`top` before `bottom`, or `left` before `right` in LTR).
+   * - `'end'`: allow perpendicular fallback and try the logical end side first
+   *   (`bottom` before `top`, or `right` before `left` in LTR).
+   * - `'none'`: do not fallback to the perpendicular axis.
+   *
+   * When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
+   * If `align` is omitted, it defaults to `'flip'`.
+   *
    * @example
    * ```jsx
    * <Positioner
@@ -169,9 +208,9 @@ export interface UseAnchorPositioningSharedParameters {
    */
   collisionAvoidance?: CollisionAvoidance | undefined;
 }
-export interface UseAnchorPositioningParameters extends useAnchorPositioning.SharedParameters {
+export interface UseAnchorPositioningParameters extends UseAnchorPositioningSharedParameters {
   keepMounted?: boolean | undefined;
-  trackCursorAxis?: ('none' | 'x' | 'y' | 'both') | undefined;
+  trackCursorAxis?: 'none' | 'x' | 'y' | 'both' | undefined;
   floatingRootContext?: FloatingRootContext | undefined;
   mounted: boolean;
   disableAnchorTracking: boolean;
@@ -196,9 +235,5 @@ export interface UseAnchorPositioningReturnValue {
   isPositioned: boolean;
   update: () => void;
 }
-export declare namespace useAnchorPositioning {
-  type SharedParameters = UseAnchorPositioningSharedParameters;
-  type Parameters = UseAnchorPositioningParameters;
-  type ReturnValue = UseAnchorPositioningReturnValue;
-}
+export interface UseAnchorPositioningState {}
 export {};

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 || {
@@ -202,22 +203,34 @@ export function useAnchorPositioning(params) {
       elements: {
         floating
       },
-      rects: {
-        reference
-      },
       availableWidth,
-      availableHeight
+      availableHeight,
+      rects
     }) {
+      if (!mountedRef.current) {
+        return;
+      }
       const floatingStyle = floating.style;
       floatingStyle.setProperty('--available-width', `${availableWidth}px`);
       floatingStyle.setProperty('--available-height', `${availableHeight}px`);
-      floatingStyle.setProperty('--anchor-width', `${reference.width}px`);
-      floatingStyle.setProperty('--anchor-height', `${reference.height}px`);
+
+      // Snap anchor dimensions to device pixels to ensure the popup's visual width matches the anchor's one.
+      const dpr = ownerWindow(floating).devicePixelRatio || 1;
+      const {
+        x,
+        y,
+        width,
+        height
+      } = rects.reference;
+      const anchorWidth = (Math.round((x + width) * dpr) - Math.round(x * dpr)) / dpr;
+      const anchorHeight = (Math.round((y + height) * dpr) - Math.round(y * dpr)) / dpr;
+      floatingStyle.setProperty('--anchor-width', `${anchorWidth}px`);
+      floatingStyle.setProperty('--anchor-height', `${anchorHeight}px`);
     }
   }), 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]), {
@@ -261,7 +274,8 @@ export function useAnchorPositioning(params) {
       floatingRootContext.update({
         referenceElement: null,
         floatingElement: null,
-        domReferenceElement: null
+        domReferenceElement: null,
+        positionReference: null
       });
     }
   }, [mounted, floatingRootContext]);
@@ -282,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);
   });
 }