@base-ui/react 1.0.0 → 1.2.0

package/utils/useAnchorPositioning.d.ts

@@ -20,31 +20,31 @@ interface SideFlipMode {
   /**
    * How to avoid collisions on the side axis.
    */
-  side?: 'flip' | 'none';
+  side?: ('flip' | 'none') | undefined;
   /**
    * How to avoid collisions on the align axis.
    */
-  align?: 'flip' | 'shift' | 'none';
+  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.
    */
-  fallbackAxisSide?: 'start' | 'end' | 'none';
+  fallbackAxisSide?: ('start' | 'end' | 'none') | undefined;
 }
 interface SideShiftMode {
   /**
    * How to avoid collisions on the side axis.
    */
-  side?: 'shift' | 'none';
+  side?: ('shift' | 'none') | undefined;
   /**
    * How to avoid collisions on the align axis.
    */
-  align?: 'shift' | 'none';
+  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.
    */
-  fallbackAxisSide?: 'start' | 'end' | 'none';
+  fallbackAxisSide?: ('start' | 'end' | 'none') | undefined;
 }
 export type CollisionAvoidance = SideFlipMode | SideShiftMode;
 /**
@@ -57,18 +57,18 @@ 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);
+  anchor?: (Element | null | VirtualElement | React.RefObject<Element | null> | (() => Element | VirtualElement | null)) | undefined;
   /**
    * Determines which CSS `position` property to use.
    * @default 'absolute'
    */
-  positionMethod?: 'absolute' | 'fixed';
+  positionMethod?: ('absolute' | 'fixed') | undefined;
   /**
    * Which side of the anchor element to align the popup against.
    * May automatically change to avoid collisions.
    * @default 'bottom'
    */
-  side?: Side;
+  side?: Side | undefined;
   /**
    * Distance between the anchor and the popup in pixels.
    * Also accepts a function that returns the distance to read the dimensions of the anchor
@@ -93,12 +93,12 @@ export interface UseAnchorPositioningSharedParameters {
    *
    * @default 0
    */
-  sideOffset?: number | OffsetFunction;
+  sideOffset?: (number | OffsetFunction) | undefined;
   /**
    * How to align the popup relative to the specified side.
    * @default 'center'
    */
-  align?: Align;
+  align?: Align | undefined;
   /**
    * Additional offset along the alignment axis in pixels.
    * Also accepts a function that returns the offset to read the dimensions of the anchor
@@ -123,35 +123,35 @@ export interface UseAnchorPositioningSharedParameters {
    *
    * @default 0
    */
-  alignOffset?: number | OffsetFunction;
+  alignOffset?: (number | OffsetFunction) | undefined;
   /**
    * An element or a rectangle that delimits the area that the popup is confined to.
    * @default 'clipping-ancestors'
    */
-  collisionBoundary?: Boundary;
+  collisionBoundary?: Boundary | undefined;
   /**
    * Additional space to maintain from the edge of the collision boundary.
    * @default 5
    */
-  collisionPadding?: Padding;
+  collisionPadding?: Padding | undefined;
   /**
    * Whether to maintain the popup in the viewport after
    * the anchor element was scrolled out of view.
    * @default false
    */
-  sticky?: boolean;
+  sticky?: boolean | undefined;
   /**
    * Minimum distance to maintain between the arrow and the edges of the popup.
    *
    * Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
    * @default 5
    */
-  arrowPadding?: number;
+  arrowPadding?: number | undefined;
   /**
    * Whether to disable the popup from tracking any layout shift of its positioning anchor.
    * @default false
    */
-  disableAnchorTracking?: boolean;
+  disableAnchorTracking?: boolean | undefined;
   /**
    * Determines how to handle collisions when positioning the popup.
    *
@@ -167,20 +167,20 @@ export interface UseAnchorPositioningSharedParameters {
    * ```
    *
    */
-  collisionAvoidance?: CollisionAvoidance;
+  collisionAvoidance?: CollisionAvoidance | undefined;
 }
 export interface UseAnchorPositioningParameters extends useAnchorPositioning.SharedParameters {
-  keepMounted?: boolean;
-  trackCursorAxis?: 'none' | 'x' | 'y' | 'both';
-  floatingRootContext?: FloatingRootContext;
+  keepMounted?: boolean | undefined;
+  trackCursorAxis?: ('none' | 'x' | 'y' | 'both') | undefined;
+  floatingRootContext?: FloatingRootContext | undefined;
   mounted: boolean;
   disableAnchorTracking: boolean;
-  nodeId?: string;
-  adaptiveOrigin?: Middleware;
+  nodeId?: string | undefined;
+  adaptiveOrigin?: Middleware | undefined;
   collisionAvoidance: CollisionAvoidance;
-  shiftCrossAxis?: boolean;
-  lazyFlip?: boolean;
-  externalTree?: FloatingTreeStore;
+  shiftCrossAxis?: boolean | undefined;
+  lazyFlip?: boolean | undefined;
+  externalTree?: FloatingTreeStore | undefined;
 }
 export interface UseAnchorPositioningReturnValue {
   positionerStyles: React.CSSProperties;

package/utils/useAnchorPositioning.js

@@ -214,14 +214,11 @@ function useAnchorPositioning(params) {
       availableWidth,
       availableHeight
     }) {
-      Object.entries({
-        '--available-width': `${availableWidth}px`,
-        '--available-height': `${availableHeight}px`,
-        '--anchor-width': `${reference.width}px`,
-        '--anchor-height': `${reference.height}px`
-      }).forEach(([key, value]) => {
-        floating.style.setProperty(key, value);
-      });
+      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`);
     }
   }), (0, _arrow.arrow)(() => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
@@ -306,14 +303,20 @@ function useAnchorPositioning(params) {
   // Default to `fixed` when not positioned to prevent `autoFocus` scroll jumps.
   // This ensures the popup is inside the viewport initially before it gets positioned.
   const resolvedPosition = isPositioned ? positionMethod : 'fixed';
-  const floatingStyles = React.useMemo(() => adaptiveOrigin ? {
-    position: resolvedPosition,
-    [sideX]: x,
-    [sideY]: y
-  } : {
-    position: resolvedPosition,
-    ...originalFloatingStyles
-  }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles]);
+  const floatingStyles = React.useMemo(() => {
+    const base = adaptiveOrigin ? {
+      position: resolvedPosition,
+      [sideX]: x,
+      [sideY]: y
+    } : {
+      position: resolvedPosition,
+      ...originalFloatingStyles
+    };
+    if (!isPositioned) {
+      base.opacity = 0;
+    }
+    return base;
+  }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles, isPositioned]);
   const registeredPositionReferenceRef = React.useRef(null);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!mounted) {

package/utils/useAnimationsFinished.d.ts

@@ -2,9 +2,9 @@ import * as React from 'react';
 /**
  * Executes a function once all animations have finished on the provided element.
  * @param elementOrRef - The element to watch for animations.
- * @param waitForNextTick - Whether to wait for the next tick before checking for animations.
+ * @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.
  * @param treatAbortedAsFinished - Whether to treat aborted animations as finished. If `false`, and there are aborted animations,
  *   the function will check again if any new animations have started and wait for them to finish.
  * @returns A function that takes a callback to execute once all animations have finished, and an optional AbortSignal to abort the callback
  */
-export declare function useAnimationsFinished(elementOrRef: React.RefObject<HTMLElement | null> | HTMLElement | null, waitForNextTick?: boolean, treatAbortedAsFinished?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;
+export declare function useAnimationsFinished(elementOrRef: React.RefObject<HTMLElement | null> | HTMLElement | null, waitForStartingStyleRemoved?: boolean, treatAbortedAsFinished?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;

package/utils/useAnimationsFinished.js

@@ -10,15 +10,16 @@ var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _resolveRef = require("./resolveRef");
+var _stateAttributesMapping = require("./stateAttributesMapping");
 /**
  * Executes a function once all animations have finished on the provided element.
  * @param elementOrRef - The element to watch for animations.
- * @param waitForNextTick - Whether to wait for the next tick before checking for animations.
+ * @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.
  * @param treatAbortedAsFinished - Whether to treat aborted animations as finished. If `false`, and there are aborted animations,
  *   the function will check again if any new animations have started and wait for them to finish.
  * @returns A function that takes a callback to execute once all animations have finished, and an optional AbortSignal to abort the callback
  */
-function useAnimationsFinished(elementOrRef, waitForNextTick = false, treatAbortedAsFinished = true) {
+function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true) {
   const frame = (0, _useAnimationFrame.useAnimationFrame)();
   return (0, _useStableCallback.useStableCallback)((fnToExecute,
   /**
@@ -28,47 +29,69 @@ function useAnimationsFinished(elementOrRef, waitForNextTick = false, treatAbort
    */
   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 = (0, _resolveRef.resolveRef)(elementOrRef);
     if (element == null) {
       return;
     }
-    if (typeof element.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
+    const resolvedElement = element;
+    if (typeof resolvedElement.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
       fnToExecute();
     } else {
-      frame.request(() => {
-        function exec() {
-          if (!element) {
+      function execWaitForStartingStyleRemoved() {
+        const startingStyleAttribute = _stateAttributesMapping.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;
           }
-          Promise.all(element.getAnimations().map(anim => anim.finished)).then(() => {
-            if (signal != null && signal.aborted) {
+          done();
+        }).catch(() => {
+          const currentAnimations = resolvedElement.getAnimations();
+          if (treatAbortedAsFinished) {
+            if (signal?.aborted) {
               return;
             }
-
-            // 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);
-          }).catch(() => {
-            if (treatAbortedAsFinished) {
-              if (signal != null && signal.aborted) {
-                return;
-              }
-              ReactDOM.flushSync(fnToExecute);
-            } else if (element.getAnimations().length > 0 && element.getAnimations().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();
-            }
-          });
-        }
-
-        // `open: true` animations need to wait for the next tick to be detected
-        if (waitForNextTick) {
-          frame.request(exec);
-        } else {
-          exec();
-        }
-      });
+            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;
+      }
+      frame.request(exec);
     }
   });
 }

package/utils/useFocusableWhenDisabled.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 export declare function useFocusableWhenDisabled(parameters: useFocusableWhenDisabled.Parameters): useFocusableWhenDisabled.ReturnValue;
 interface FocusableWhenDisabledProps {
-  'aria-disabled'?: boolean;
-  disabled?: boolean;
+  'aria-disabled'?: boolean | undefined;
+  disabled?: boolean | undefined;
   onKeyDown: (event: React.KeyboardEvent) => void;
   tabIndex: number;
 }
@@ -20,11 +20,11 @@ export interface UseFocusableWhenDisabledParameters {
    * Whether this is a composite item or not.
    * @default false
    */
-  composite?: boolean;
+  composite?: boolean | undefined;
   /**
    * @default 0
    */
-  tabIndex?: number;
+  tabIndex?: number | undefined;
   /**
    * @default true
    */

package/utils/{useMixedToggleClickHander.d.ts → useMixedToggleClickHandler.d.ts}

@@ -9,7 +9,7 @@ export interface UseMixedToggleClickHandlerParameters {
    * Whether the mixed toggle click handler is enabled.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * Determines what action is performed on mousedown.
    */

package/utils/{useMixedToggleClickHander.js → useMixedToggleClickHandler.js}

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/utils/useOpenChangeComplete.d.ts

@@ -8,11 +8,11 @@ export interface UseOpenChangeCompleteParameters {
    * Whether the hook is enabled.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * Whether the element is open.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Ref to the element being closed.
    */

package/utils/useOpenChangeComplete.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useOpenChangeComplete = useOpenChangeComplete;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useAnimationsFinished = require("./useAnimationsFinished");
 /**
  * Calls the provided function when the CSS open/close animation or transition completes.
@@ -20,17 +19,16 @@ function useOpenChangeComplete(parameters) {
     ref,
     onComplete: onCompleteParam
   } = parameters;
-  const openRef = (0, _useValueAsRef.useValueAsRef)(open);
   const onComplete = (0, _useStableCallback.useStableCallback)(onCompleteParam);
-  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(ref, open);
+  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(ref, open, false);
   React.useEffect(() => {
     if (!enabled) {
-      return;
+      return undefined;
     }
-    runOnceAnimationsFinish(() => {
-      if (open === openRef.current) {
-        onComplete();
-      }
-    });
-  }, [enabled, open, onComplete, runOnceAnimationsFinish, openRef]);
+    const abortController = new AbortController();
+    runOnceAnimationsFinish(onComplete, abortController.signal);
+    return () => {
+      abortController.abort();
+    };
+  }, [enabled, open, onComplete, runOnceAnimationsFinish]);
 }

package/utils/useOpenInteractionType.js

@@ -9,6 +9,7 @@ exports.useOpenInteractionType = useOpenInteractionType;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useEnhancedClickHandler = require("@base-ui/utils/useEnhancedClickHandler");
+var _detectBrowser = require("@base-ui/utils/detectBrowser");
 /**
  * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
  *
@@ -18,7 +19,11 @@ function useOpenInteractionType(open) {
   const [openMethod, setOpenMethod] = React.useState(null);
   const handleTriggerClick = (0, _useStableCallback.useStableCallback)((_, interactionType) => {
     if (!open) {
-      setOpenMethod(interactionType);
+      setOpenMethod(interactionType || (
+      // On iOS Safari, the hitslop around touch targets means tapping outside an element's
+      // bounds does not fire `pointerdown` but does fire `mousedown`. The `interactionType`
+      // will be "" in that case.
+      _detectBrowser.isIOS ? 'touch' : ''));
     }
   });
   const reset = React.useCallback(() => {

package/utils/usePopupAutoResize.d.ts

@@ -18,18 +18,18 @@ interface UsePopupAutoResizeParameters {
   /**
    * Whether the auto-resize is enabled. This function runs in an effect and can safely access refs.
    */
-  enabled?: () => boolean;
+  enabled?: (() => boolean) | undefined;
   /**
    * Callback fired immediately before measuring the dimensions of the new content.
    */
-  onMeasureLayout?: () => void;
+  onMeasureLayout?: (() => void) | undefined;
   /**
    * Callback fired after the new dimensions have been measured.
    *
    * @param previousDimensions Dimensions before the change, or `null` if this is the first measurement.
    * @param newDimensions Newly measured dimensions.
    */
-  onMeasureLayoutComplete?: (previousDimensions: Dimensions | null, newDimensions: Dimensions) => void;
+  onMeasureLayoutComplete?: ((previousDimensions: Dimensions | null, newDimensions: Dimensions) => void) | undefined;
   side: Side;
   direction: 'ltr' | 'rtl';
 }