@base-ui/react 1.7.0 → 1.8.0

package/internals/useAnchorPositioning.js

@@ -19,8 +19,9 @@ var _DirectionContext = require("./direction-context/DirectionContext");
 var _arrow = require("../floating-ui-react/middleware/arrow");
 var _hideMiddleware = require("../utils/hideMiddleware");
 var _adaptiveOriginConstants = require("../utils/adaptiveOriginConstants");
-const AVAILABLE_WIDTH_VAR = '--available-width';
-const AVAILABLE_HEIGHT_VAR = '--available-height';
+var CommonPositionerCssVars = _interopRequireWildcard(require("../utils/CommonPositionerCssVars"));
+const AVAILABLE_WIDTH_VAR = CommonPositionerCssVars.availableWidth;
+const AVAILABLE_HEIGHT_VAR = CommonPositionerCssVars.availableHeight;
 function getLogicalSide(sideParam, renderedSide, isRtl) {
   const isLogicalSideParam = sideParam === 'inline-start' || sideParam === 'inline-end';
   const logicalRight = isRtl ? 'inline-start' : 'inline-end';
@@ -237,46 +238,53 @@ function useAnchorPositioningWithHook(params, useFloatingHook) {
       } = 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`);
+      floatingStyle.setProperty(CommonPositionerCssVars.anchorWidth, `${anchorWidth}px`);
+      floatingStyle.setProperty(CommonPositionerCssVars.anchorHeight, `${anchorHeight}px`);
     }
   }), (0, _arrow.arrow)(state => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
     // we'll create a fake element.
     element: arrowRef.current || (0, _owner.ownerDocument)(state.elements.floating).createElement('div'),
-    padding: arrowPadding,
+    // No padding for the fake arrow: it would displace aligned popups on narrow anchors.
+    padding: arrowRef.current ? arrowPadding : 0,
     offsetParent: 'floating'
   }), [arrowPadding]), {
     name: 'transformOrigin',
     fn(state) {
       const {
-        elements,
+        elements: {
+          floating
+        },
         middlewareData,
         placement: renderedPlacement,
+        platform,
         rects,
         y
       } = state;
-      const currentRenderedSide = (0, _utils.getSide)(renderedPlacement);
-      const currentRenderedAxis = (0, _utils.getSideAxis)(currentRenderedSide);
+      const renderedSide = (0, _utils.getSide)(renderedPlacement);
+      const renderedAlign = (0, _utils.getAlignment)(renderedPlacement);
+      const isVertical = (0, _utils.getSideAxis)(renderedSide) === 'y';
       const arrowEl = arrowRef.current;
-      const arrowX = middlewareData.arrow?.x || 0;
-      const arrowY = middlewareData.arrow?.y || 0;
-      const arrowWidth = arrowEl?.clientWidth || 0;
-      const arrowHeight = arrowEl?.clientHeight || 0;
-      const transformX = arrowX + arrowWidth / 2;
-      const transformY = arrowY + arrowHeight / 2;
-      const shiftY = Math.abs(middlewareData.shift?.y || 0);
-      const halfAnchorHeight = rects.reference.height / 2;
       const sideOffsetValue = typeof sideOffset === 'function' ? sideOffset(getOffsetData(state, sideParam, isRtl)) : sideOffset;
-      const isOverlappingAnchor = shiftY > sideOffsetValue;
-      const adjacentTransformOrigin = {
-        top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
-        bottom: `${transformX}px ${-sideOffsetValue}px`,
-        left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
-        right: `${-sideOffsetValue}px ${transformY}px`
-      }[currentRenderedSide];
-      const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
-      elements.floating.style.setProperty('--transform-origin', crossAxisShiftEnabled && currentRenderedAxis === 'y' && isOverlappingAnchor ? overlapTransformOrigin : adjacentTransformOrigin);
+
+      // An aligned arrowless popup grows from its aligned edge, until a shift (beyond subpixel)
+      // breaks its alignment with the anchor. Everything else grows from the arrow, real or fake.
+      let crossOrigin;
+      if (!arrowEl && renderedAlign && Math.abs(isVertical ? middlewareData.shift?.x || 0 : middlewareData.shift?.y || 0) <= 1) {
+        // The platform direction, not `isRtl`: it must match what Floating UI placed with.
+        crossOrigin = renderedAlign === 'start' === (isVertical && platform.isRTL?.(floating) === true) ? '100%' : '0%';
+      } else {
+        const arrowOffset = isVertical ? middlewareData.arrow?.x || 0 : middlewareData.arrow?.y || 0;
+        const arrowSize = isVertical ? arrowEl?.clientWidth || 0 : arrowEl?.clientHeight || 0;
+        crossOrigin = `${arrowOffset + arrowSize / 2}px`;
+      }
+
+      // Side axis: the anchor-facing edge, or the anchor's center when the popup overlaps it.
+      let sideOrigin = renderedSide === 'top' || renderedSide === 'left' ? `calc(100% + ${sideOffsetValue}px)` : `${-sideOffsetValue}px`;
+      if (crossAxisShiftEnabled && isVertical && Math.abs(middlewareData.shift?.y || 0) > sideOffsetValue) {
+        sideOrigin = `${rects.reference.y + rects.reference.height / 2 - y}px`;
+      }
+      floating.style.setProperty(CommonPositionerCssVars.transformOrigin, isVertical ? `${crossOrigin} ${sideOrigin}` : `${sideOrigin} ${crossOrigin}`);
       return {};
     }
   }, _hideMiddleware.hide, adaptiveOrigin);
@@ -293,6 +301,7 @@ function useAnchorPositioningWithHook(params, useFloatingHook) {
     }
   }, [mounted, floatingRootContext]);
   const autoUpdateOptions = React.useMemo(() => ({
+    ancestorScroll: !disableAnchorTracking,
     elementResize: !disableAnchorTracking && typeof ResizeObserver !== 'undefined',
     layoutShift: !disableAnchorTracking && typeof IntersectionObserver !== 'undefined'
   }), [disableAnchorTracking]);

package/internals/useAnchorPositioning.mjs

@@ -12,8 +12,9 @@ import { useDirection } from "./direction-context/DirectionContext.mjs";
 import { arrow } from "../floating-ui-react/middleware/arrow.mjs";
 import { hide } from "../utils/hideMiddleware.mjs";
 import { DEFAULT_SIDES } from "../utils/adaptiveOriginConstants.mjs";
-const AVAILABLE_WIDTH_VAR = '--available-width';
-const AVAILABLE_HEIGHT_VAR = '--available-height';
+import * as CommonPositionerCssVars from "../utils/CommonPositionerCssVars.mjs";
+const AVAILABLE_WIDTH_VAR = CommonPositionerCssVars.availableWidth;
+const AVAILABLE_HEIGHT_VAR = CommonPositionerCssVars.availableHeight;
 function getLogicalSide(sideParam, renderedSide, isRtl) {
   const isLogicalSideParam = sideParam === 'inline-start' || sideParam === 'inline-end';
   const logicalRight = isRtl ? 'inline-start' : 'inline-end';
@@ -230,46 +231,53 @@ export function useAnchorPositioningWithHook(params, useFloatingHook) {
       } = 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`);
+      floatingStyle.setProperty(CommonPositionerCssVars.anchorWidth, `${anchorWidth}px`);
+      floatingStyle.setProperty(CommonPositionerCssVars.anchorHeight, `${anchorHeight}px`);
     }
   }), arrow(state => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
     // we'll create a fake element.
     element: arrowRef.current || ownerDocument(state.elements.floating).createElement('div'),
-    padding: arrowPadding,
+    // No padding for the fake arrow: it would displace aligned popups on narrow anchors.
+    padding: arrowRef.current ? arrowPadding : 0,
     offsetParent: 'floating'
   }), [arrowPadding]), {
     name: 'transformOrigin',
     fn(state) {
       const {
-        elements,
+        elements: {
+          floating
+        },
         middlewareData,
         placement: renderedPlacement,
+        platform,
         rects,
         y
       } = state;
-      const currentRenderedSide = getSide(renderedPlacement);
-      const currentRenderedAxis = getSideAxis(currentRenderedSide);
+      const renderedSide = getSide(renderedPlacement);
+      const renderedAlign = getAlignment(renderedPlacement);
+      const isVertical = getSideAxis(renderedSide) === 'y';
       const arrowEl = arrowRef.current;
-      const arrowX = middlewareData.arrow?.x || 0;
-      const arrowY = middlewareData.arrow?.y || 0;
-      const arrowWidth = arrowEl?.clientWidth || 0;
-      const arrowHeight = arrowEl?.clientHeight || 0;
-      const transformX = arrowX + arrowWidth / 2;
-      const transformY = arrowY + arrowHeight / 2;
-      const shiftY = Math.abs(middlewareData.shift?.y || 0);
-      const halfAnchorHeight = rects.reference.height / 2;
       const sideOffsetValue = typeof sideOffset === 'function' ? sideOffset(getOffsetData(state, sideParam, isRtl)) : sideOffset;
-      const isOverlappingAnchor = shiftY > sideOffsetValue;
-      const adjacentTransformOrigin = {
-        top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
-        bottom: `${transformX}px ${-sideOffsetValue}px`,
-        left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
-        right: `${-sideOffsetValue}px ${transformY}px`
-      }[currentRenderedSide];
-      const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
-      elements.floating.style.setProperty('--transform-origin', crossAxisShiftEnabled && currentRenderedAxis === 'y' && isOverlappingAnchor ? overlapTransformOrigin : adjacentTransformOrigin);
+
+      // An aligned arrowless popup grows from its aligned edge, until a shift (beyond subpixel)
+      // breaks its alignment with the anchor. Everything else grows from the arrow, real or fake.
+      let crossOrigin;
+      if (!arrowEl && renderedAlign && Math.abs(isVertical ? middlewareData.shift?.x || 0 : middlewareData.shift?.y || 0) <= 1) {
+        // The platform direction, not `isRtl`: it must match what Floating UI placed with.
+        crossOrigin = renderedAlign === 'start' === (isVertical && platform.isRTL?.(floating) === true) ? '100%' : '0%';
+      } else {
+        const arrowOffset = isVertical ? middlewareData.arrow?.x || 0 : middlewareData.arrow?.y || 0;
+        const arrowSize = isVertical ? arrowEl?.clientWidth || 0 : arrowEl?.clientHeight || 0;
+        crossOrigin = `${arrowOffset + arrowSize / 2}px`;
+      }
+
+      // Side axis: the anchor-facing edge, or the anchor's center when the popup overlaps it.
+      let sideOrigin = renderedSide === 'top' || renderedSide === 'left' ? `calc(100% + ${sideOffsetValue}px)` : `${-sideOffsetValue}px`;
+      if (crossAxisShiftEnabled && isVertical && Math.abs(middlewareData.shift?.y || 0) > sideOffsetValue) {
+        sideOrigin = `${rects.reference.y + rects.reference.height / 2 - y}px`;
+      }
+      floating.style.setProperty(CommonPositionerCssVars.transformOrigin, isVertical ? `${crossOrigin} ${sideOrigin}` : `${sideOrigin} ${crossOrigin}`);
       return {};
     }
   }, hide, adaptiveOrigin);
@@ -286,6 +294,7 @@ export function useAnchorPositioningWithHook(params, useFloatingHook) {
     }
   }, [mounted, floatingRootContext]);
   const autoUpdateOptions = React.useMemo(() => ({
+    ancestorScroll: !disableAnchorTracking,
     elementResize: !disableAnchorTracking && typeof ResizeObserver !== 'undefined',
     layoutShift: !disableAnchorTracking && typeof IntersectionObserver !== 'undefined'
   }), [disableAnchorTracking]);

package/internals/useAnimationsFinished.d.mts

@@ -4,6 +4,9 @@ import * as React from 'react';
  * If an animation is canceled, waits for any replacement animations before executing.
  * @param elementOrRef - The element to watch for animations.
  * @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.
+ * @param batch - Whether completions ready in the same microtask may be coalesced into a single
+ * commit. A batched callback runs before earlier callbacks' React updates have committed, so only
+ * opt in when the callback doesn't read state that another completion can change.
  * @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, waitForStartingStyleRemoved?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;
+export declare function useAnimationsFinished(elementOrRef: React.RefObject<HTMLElement | null> | HTMLElement | null, waitForStartingStyleRemoved?: boolean, batch?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;

package/internals/useAnimationsFinished.d.ts

@@ -4,6 +4,9 @@ import * as React from 'react';
  * If an animation is canceled, waits for any replacement animations before executing.
  * @param elementOrRef - The element to watch for animations.
  * @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.
+ * @param batch - Whether completions ready in the same microtask may be coalesced into a single
+ * commit. A batched callback runs before earlier callbacks' React updates have committed, so only
+ * opt in when the callback doesn't read state that another completion can change.
  * @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, waitForStartingStyleRemoved?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;
+export declare function useAnimationsFinished(elementOrRef: React.RefObject<HTMLElement | null> | HTMLElement | null, waitForStartingStyleRemoved?: boolean, batch?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;

package/internals/useAnimationsFinished.js

@@ -10,14 +10,43 @@ var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _resolveRef = require("../utils/resolveRef");
+var TransitionStatusDataAttributes = _interopRequireWildcard(require("./TransitionStatusDataAttributes"));
+let pendingCallbacks = null;
+
+/**
+ * Runs the callback in a synchronous flush before the browser paints, so that the
+ * browser doesn't paint an intermediate frame: https://github.com/mui/base-ui/issues/979
+ * Callbacks that become ready within the same microtask checkpoint (e.g. multiple elements
+ * whose animations finish together) are batched into a single commit:
+ * https://github.com/mui/base-ui/issues/5481
+ */
+function flushBeforePaint(fn) {
+  if (!pendingCallbacks) {
+    const callbacks = [];
+    pendingCallbacks = callbacks;
+    queueMicrotask(() => {
+      pendingCallbacks = null;
+      ReactDOM.flushSync(() => {
+        for (const callback of callbacks) {
+          callback();
+        }
+      });
+    });
+  }
+  pendingCallbacks.push(fn);
+}
+
 /**
  * Executes a function once all animations have finished on the provided element.
  * If an animation is canceled, waits for any replacement animations before executing.
  * @param elementOrRef - The element to watch for animations.
  * @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.
+ * @param batch - Whether completions ready in the same microtask may be coalesced into a single
+ * commit. A batched callback runs before earlier callbacks' React updates have committed, so only
+ * opt in when the callback doesn't read state that another completion can change.
  * @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, waitForStartingStyleRemoved = false) {
+function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, batch = false) {
   const frame = (0, _useAnimationFrame.useAnimationFrame)();
   return (0, _useStableCallback.useStableCallback)((fnToExecute,
   /**
@@ -33,9 +62,20 @@ function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false
     }
     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 (!batch) {
+        // Synchronously flush the unmounting of the component so that the browser doesn't
+        // paint: https://github.com/mui/base-ui/issues/979
+        // Each callback gets its own commit so that later completions observe the React
+        // updates caused by earlier ones.
+        ReactDOM.flushSync(fnToExecute);
+        return;
+      }
+      flushBeforePaint(() => {
+        // Re-check at flush time: the signal may abort between queueing and the flush.
+        if (!signal?.aborted) {
+          fnToExecute();
+        }
+      });
     };
     if (typeof resolvedElement.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
       fnToExecute();
@@ -61,7 +101,7 @@ function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false
       });
     }
     if (waitForStartingStyleRemoved) {
-      const startingStyleAttribute = 'data-starting-style';
+      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.

package/internals/useAnimationsFinished.mjs

@@ -4,15 +4,43 @@ import * as ReactDOM from 'react-dom';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { resolveRef } from "../utils/resolveRef.mjs";
+import * as TransitionStatusDataAttributes from "./TransitionStatusDataAttributes.mjs";
+let pendingCallbacks = null;
+
+/**
+ * Runs the callback in a synchronous flush before the browser paints, so that the
+ * browser doesn't paint an intermediate frame: https://github.com/mui/base-ui/issues/979
+ * Callbacks that become ready within the same microtask checkpoint (e.g. multiple elements
+ * whose animations finish together) are batched into a single commit:
+ * https://github.com/mui/base-ui/issues/5481
+ */
+function flushBeforePaint(fn) {
+  if (!pendingCallbacks) {
+    const callbacks = [];
+    pendingCallbacks = callbacks;
+    queueMicrotask(() => {
+      pendingCallbacks = null;
+      ReactDOM.flushSync(() => {
+        for (const callback of callbacks) {
+          callback();
+        }
+      });
+    });
+  }
+  pendingCallbacks.push(fn);
+}
 
 /**
  * Executes a function once all animations have finished on the provided element.
  * If an animation is canceled, waits for any replacement animations before executing.
  * @param elementOrRef - The element to watch for animations.
  * @param waitForStartingStyleRemoved - Whether to wait for [data-starting-style] to be removed before checking for animations.
+ * @param batch - Whether completions ready in the same microtask may be coalesced into a single
+ * commit. A batched callback runs before earlier callbacks' React updates have committed, so only
+ * opt in when the callback doesn't read state that another completion can change.
  * @returns A function that takes a callback to execute once all animations have finished, and an optional AbortSignal to abort the callback
  */
-export function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false) {
+export function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, batch = false) {
   const frame = useAnimationFrame();
   return useStableCallback((fnToExecute,
   /**
@@ -28,9 +56,20 @@ export function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved
     }
     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 (!batch) {
+        // Synchronously flush the unmounting of the component so that the browser doesn't
+        // paint: https://github.com/mui/base-ui/issues/979
+        // Each callback gets its own commit so that later completions observe the React
+        // updates caused by earlier ones.
+        ReactDOM.flushSync(fnToExecute);
+        return;
+      }
+      flushBeforePaint(() => {
+        // Re-check at flush time: the signal may abort between queueing and the flush.
+        if (!signal?.aborted) {
+          fnToExecute();
+        }
+      });
     };
     if (typeof resolvedElement.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
       fnToExecute();
@@ -56,7 +95,7 @@ export function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved
       });
     }
     if (waitForStartingStyleRemoved) {
-      const startingStyleAttribute = 'data-starting-style';
+      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.

package/internals/useOpenChangeComplete.d.mts

@@ -17,6 +17,12 @@ export interface UseOpenChangeCompleteParameters {
    * Ref to the element being closed.
    */
   ref: React.RefObject<HTMLElement | null>;
+  /**
+   * Whether completions ready in the same microtask may be coalesced into a single commit.
+   * Only safe when `onComplete` doesn't read state that another completion can change.
+   * @default false
+   */
+  batch?: boolean | undefined;
   /**
    * Function to call when the animation completes (or there is no animation).
    */

package/internals/useOpenChangeComplete.d.ts

@@ -17,6 +17,12 @@ export interface UseOpenChangeCompleteParameters {
    * Ref to the element being closed.
    */
   ref: React.RefObject<HTMLElement | null>;
+  /**
+   * Whether completions ready in the same microtask may be coalesced into a single commit.
+   * Only safe when `onComplete` doesn't read state that another completion can change.
+   * @default false
+   */
+  batch?: boolean | undefined;
   /**
    * Function to call when the animation completes (or there is no animation).
    */

package/internals/useOpenChangeComplete.js

@@ -17,10 +17,11 @@ function useOpenChangeComplete(parameters) {
     enabled = true,
     open,
     ref,
+    batch = false,
     onComplete: onCompleteParam
   } = parameters;
   const onComplete = (0, _useStableCallback.useStableCallback)(onCompleteParam);
-  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(ref, open);
+  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(ref, open, batch);
   React.useEffect(() => {
     if (!enabled) {
       return undefined;

package/internals/useOpenChangeComplete.mjs

@@ -12,10 +12,11 @@ export function useOpenChangeComplete(parameters) {
     enabled = true,
     open,
     ref,
+    batch = false,
     onComplete: onCompleteParam
   } = parameters;
   const onComplete = useStableCallback(onCompleteParam);
-  const runOnceAnimationsFinish = useAnimationsFinished(ref, open);
+  const runOnceAnimationsFinish = useAnimationsFinished(ref, open, batch);
   React.useEffect(() => {
     if (!enabled) {
       return undefined;

package/internals/usePressAndHold.js

@@ -106,6 +106,14 @@ function usePressAndHold(params) {
     stopAutoChange();
     unsubscribeFromGlobalPointerUpRef.current();
   }, [stopAutoChange]);
+  React.useEffect(() => {
+    if (disabled) {
+      isPressedRef.current = false;
+      isTouchingButtonRef.current = false;
+      pointerTypeRef.current = '';
+      stopAutoChange();
+    }
+  }, [disabled, stopAutoChange]);
   const pointerHandlers = {
     onTouchStart() {
       isTouchingButtonRef.current = true;

package/internals/usePressAndHold.mjs

@@ -99,6 +99,14 @@ export function usePressAndHold(params) {
     stopAutoChange();
     unsubscribeFromGlobalPointerUpRef.current();
   }, [stopAutoChange]);
+  React.useEffect(() => {
+    if (disabled) {
+      isPressedRef.current = false;
+      isTouchingButtonRef.current = false;
+      pointerTypeRef.current = '';
+      stopAutoChange();
+    }
+  }, [disabled, stopAutoChange]);
   const pointerHandlers = {
     onTouchStart() {
       isTouchingButtonRef.current = true;

package/internals/useRenderElement.js

@@ -26,8 +26,12 @@ var _mergeProps = require("../merge-props");
  * @param params Additional parameters for rendering the element.
  */
 function useRenderElement(element, componentProps, params = {}) {
-  const renderProp = componentProps.render;
-  const outProps = useRenderElementProps(componentProps, params);
+  let renderProp = componentProps.render;
+  if (params.enabled !== false) {
+    // A pending lazy element suspends when unwrapped, so leave it wrapped while disabled.
+    renderProp = unwrapLazyRenderProp(renderProp);
+  }
+  const outProps = useRenderElementProps(componentProps, params, renderProp);
   if (params.enabled === false) {
     return null;
   }
@@ -38,11 +42,10 @@ function useRenderElement(element, componentProps, params = {}) {
 /**
  * Computes render element final props.
  */
-function useRenderElementProps(componentProps, params = {}) {
+function useRenderElementProps(componentProps, params, renderProp) {
   const {
     className: classNameProp,
-    style: styleProp,
-    render: renderProp
+    style: styleProp
   } = componentProps;
   const {
     state = _empty.EMPTY_OBJECT,
@@ -102,6 +105,23 @@ function resolveRenderFunctionProps(props) {
 const REACT_LAZY_TYPE = Symbol.for('react.lazy');
 const COMPONENT_IDENTIFIER_PATTERN = /^[A-Z][A-Za-z0-9$]*$/;
 const LOWERCASE_CHARACTER_PATTERN = /[a-z]/;
+
+// Workaround for https://github.com/react/react/issues/32392
+// The Flight client hands over a lazy wrapper in place of a render element created in a
+// Server Component. The wrapper exposes no `.props` or `.ref`, so it must be unwrapped
+// before those are read. This works because the toArray() logic unwraps the lazy
+// element type in
+// https://github.com/react/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/react/src/ReactChildren.js#L186
+function unwrapLazyRenderProp(render) {
+  // `$$typeof` is a React internal, absent from the public element types.
+  if (render?.$$typeof !== REACT_LAZY_TYPE) {
+    return render;
+  }
+  // Keep the wrapper unless it unwraps to an element, so an invalid render prop is still
+  // reported as one instead of silently falling back to the default element.
+  const unwrapped = React.Children.toArray(render)[0];
+  return /*#__PURE__*/React.isValidElement(unwrapped) ? unwrapped : render;
+}
 function evaluateRenderProp(element, render, props, state) {
   if (render) {
     if (typeof render === 'function') {
@@ -112,14 +132,6 @@ function evaluateRenderProp(element, render, props, state) {
     }
     const mergedProps = (0, _mergeProps.mergeProps)(props, render.props);
     mergedProps.ref = props.ref;
-    let newElement = render;
-    // Workaround for https://github.com/react/react/issues/32392
-    // This works because the toArray() logic unwrap lazy element type in
-    // https://github.com/react/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/react/src/ReactChildren.js#L186
-    if (newElement?.$$typeof === REACT_LAZY_TYPE) {
-      const children = React.Children.toArray(render);
-      newElement = children[0];
-    }
 
     // There is a high number of indirections, the error message thrown by React.cloneElement() is
     // hard to use for developers, this logic provides a better context.
@@ -128,13 +140,13 @@ function evaluateRenderProp(element, render, props, state) {
     // However, React.cloneElement() throws if React.isValidElement() is false,
     // so we can throw before with custom message.
     if (process.env.NODE_ENV !== 'production') {
-      if (! /*#__PURE__*/React.isValidElement(newElement)) {
+      if (! /*#__PURE__*/React.isValidElement(render)) {
         // TODO: fix mui/no-guarded-throw
         // eslint-disable-next-line mui/no-guarded-throw
         throw new Error(['Base UI: The `render` prop was provided an invalid React element as `React.isValidElement(render)` is `false`.', 'A valid React element must be provided to the `render` prop because it is cloned with props to replace the default element.', 'https://base-ui.com/r/invalid-render-prop'].join('\n'));
       }
     }
-    return /*#__PURE__*/React.cloneElement(newElement, mergedProps);
+    return /*#__PURE__*/React.cloneElement(render, mergedProps);
   }
   if (element) {
     if (typeof element === 'string') {

package/internals/useRenderElement.mjs

@@ -18,8 +18,12 @@ import { createElement as _createElement } from "react";
  * @param params Additional parameters for rendering the element.
  */
 export function useRenderElement(element, componentProps, params = {}) {
-  const renderProp = componentProps.render;
-  const outProps = useRenderElementProps(componentProps, params);
+  let renderProp = componentProps.render;
+  if (params.enabled !== false) {
+    // A pending lazy element suspends when unwrapped, so leave it wrapped while disabled.
+    renderProp = unwrapLazyRenderProp(renderProp);
+  }
+  const outProps = useRenderElementProps(componentProps, params, renderProp);
   if (params.enabled === false) {
     return null;
   }
@@ -30,11 +34,10 @@ export function useRenderElement(element, componentProps, params = {}) {
 /**
  * Computes render element final props.
  */
-function useRenderElementProps(componentProps, params = {}) {
+function useRenderElementProps(componentProps, params, renderProp) {
   const {
     className: classNameProp,
-    style: styleProp,
-    render: renderProp
+    style: styleProp
   } = componentProps;
   const {
     state = EMPTY_OBJECT,
@@ -94,6 +97,23 @@ function resolveRenderFunctionProps(props) {
 const REACT_LAZY_TYPE = Symbol.for('react.lazy');
 const COMPONENT_IDENTIFIER_PATTERN = /^[A-Z][A-Za-z0-9$]*$/;
 const LOWERCASE_CHARACTER_PATTERN = /[a-z]/;
+
+// Workaround for https://github.com/react/react/issues/32392
+// The Flight client hands over a lazy wrapper in place of a render element created in a
+// Server Component. The wrapper exposes no `.props` or `.ref`, so it must be unwrapped
+// before those are read. This works because the toArray() logic unwraps the lazy
+// element type in
+// https://github.com/react/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/react/src/ReactChildren.js#L186
+function unwrapLazyRenderProp(render) {
+  // `$$typeof` is a React internal, absent from the public element types.
+  if (render?.$$typeof !== REACT_LAZY_TYPE) {
+    return render;
+  }
+  // Keep the wrapper unless it unwraps to an element, so an invalid render prop is still
+  // reported as one instead of silently falling back to the default element.
+  const unwrapped = React.Children.toArray(render)[0];
+  return /*#__PURE__*/React.isValidElement(unwrapped) ? unwrapped : render;
+}
 function evaluateRenderProp(element, render, props, state) {
   if (render) {
     if (typeof render === 'function') {
@@ -104,14 +124,6 @@ function evaluateRenderProp(element, render, props, state) {
     }
     const mergedProps = mergeProps(props, render.props);
     mergedProps.ref = props.ref;
-    let newElement = render;
-    // Workaround for https://github.com/react/react/issues/32392
-    // This works because the toArray() logic unwrap lazy element type in
-    // https://github.com/react/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/react/src/ReactChildren.js#L186
-    if (newElement?.$$typeof === REACT_LAZY_TYPE) {
-      const children = React.Children.toArray(render);
-      newElement = children[0];
-    }
 
     // There is a high number of indirections, the error message thrown by React.cloneElement() is
     // hard to use for developers, this logic provides a better context.
@@ -120,13 +132,13 @@ function evaluateRenderProp(element, render, props, state) {
     // However, React.cloneElement() throws if React.isValidElement() is false,
     // so we can throw before with custom message.
     if (process.env.NODE_ENV !== 'production') {
-      if (! /*#__PURE__*/React.isValidElement(newElement)) {
+      if (! /*#__PURE__*/React.isValidElement(render)) {
         // TODO: fix mui/no-guarded-throw
         // eslint-disable-next-line mui/no-guarded-throw
         throw new Error(['Base UI: The `render` prop was provided an invalid React element as `React.isValidElement(render)` is `false`.', 'A valid React element must be provided to the `render` prop because it is cloned with props to replace the default element.', 'https://base-ui.com/r/invalid-render-prop'].join('\n'));
       }
     }
-    return /*#__PURE__*/React.cloneElement(newElement, mergedProps);
+    return /*#__PURE__*/React.cloneElement(render, mergedProps);
   }
   if (element) {
     if (typeof element === 'string') {

package/internals/useTransitionStatus.d.mts

@@ -4,8 +4,12 @@ export type TransitionStatus = 'starting' | 'ending' | 'idle' | undefined;
  * Provides a status string for CSS animations.
  * @param open - a boolean that determines if the element is open.
  * @param enableIdleState - a boolean that enables the `'idle'` state between `'starting'` and `'ending'`
+ * @param deferEndingState - a boolean that delays the `'ending'` state by a frame
+ * @param animateInitialOpen - a boolean that makes an element which mounts already open still go
+ *   through `'starting'`. Off by default so content that was open on the first render (a
+ *   `defaultOpen` popup on page load, SSR'd markup) doesn't animate in.
  */
-export declare function useTransitionStatus(open: boolean, enableIdleState?: boolean, deferEndingState?: boolean): {
+export declare function useTransitionStatus(open: boolean, enableIdleState?: boolean, deferEndingState?: boolean, animateInitialOpen?: boolean): {
   mounted: boolean;
   setMounted: React.Dispatch<React.SetStateAction<boolean>>;
   transitionStatus: TransitionStatus;