@base-ui/react 1.6.0 → 1.7.0

package/{utils → internals}/useAnchorPositioning.mjs

@@ -6,11 +6,14 @@ 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';
-import { autoUpdate, flip, limitShift, offset, shift, useFloating, size } from "../floating-ui-react/index.mjs";
-import { useDirection } from "../internals/direction-context/DirectionContext.mjs";
+import { autoUpdate, flip, limitShift, offset, shift as floatingShift, size } from "../floating-ui-react/index.mjs";
+import { useBaseUIFloating } from "../floating-ui-react/hooks/useFloating.mjs";
+import { useDirection } from "./direction-context/DirectionContext.mjs";
 import { arrow } from "../floating-ui-react/middleware/arrow.mjs";
-import { hide } from "./hideMiddleware.mjs";
-import { DEFAULT_SIDES } from "./adaptiveOriginMiddleware.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';
 function getLogicalSide(sideParam, renderedSide, isRtl) {
   const isLogicalSideParam = sideParam === 'inline-start' || sideParam === 'inline-end';
   const logicalRight = isRtl ? 'inline-start' : 'inline-end';
@@ -46,6 +49,9 @@ function getOffsetData(state, sideParam, isRtl) {
  * `useFloating` hook.
  */
 export function useAnchorPositioning(params) {
+  return useAnchorPositioningWithHook(params, useBaseUIFloating);
+}
+export function useAnchorPositioningWithHook(params, useFloatingHook) {
   const {
     // Public parameters
     anchor,
@@ -65,7 +71,7 @@ export function useAnchorPositioning(params) {
     floatingRootContext,
     mounted,
     collisionAvoidance,
-    shiftCrossAxis = false,
+    shift,
     nodeId,
     adaptiveOrigin,
     lazyFlip = false,
@@ -78,6 +84,8 @@ export function useAnchorPositioning(params) {
   const collisionAvoidanceSide = collisionAvoidance.side || 'flip';
   const collisionAvoidanceAlign = collisionAvoidance.align || 'flip';
   const collisionAvoidanceFallbackAxisSide = collisionAvoidance.fallbackAxisSide || 'end';
+  const shiftCrossAxis = shift?.crossAxis ?? false;
+  const shiftRootBoundary = shift?.rootBoundary;
   const anchorFn = typeof anchor === 'function' ? anchor : undefined;
   const anchorFnCallback = useStableCallback(anchorFn);
   const anchorDep = anchorFn ? anchorFnCallback : anchor;
@@ -95,30 +103,32 @@ export function useAnchorPositioning(params) {
   }[sideParam];
   const placement = align === 'center' ? side : `${side}-${align}`;
   let collisionPadding = collisionPaddingParam;
+  if (typeof collisionPadding === 'number') {
+    collisionPadding = {
+      top: collisionPadding,
+      right: collisionPadding,
+      bottom: collisionPadding,
+      left: collisionPadding
+    };
+  } else if (collisionPadding) {
+    collisionPadding = {
+      top: collisionPadding.top || 0,
+      right: collisionPadding.right || 0,
+      bottom: collisionPadding.bottom || 0,
+      left: collisionPadding.left || 0
+    };
+  }
 
   // Create a bias to the preferred side.
   // On iOS, when the mobile software keyboard opens, the input is exactly centered
   // in the viewport, but this can cause it to flip to the top undesirably.
+  // The bias is only applied to `flip()` so it doesn't shift the resting position
+  // computed by `shift()` and `size()` away from the requested `collisionPadding`.
   const bias = 1;
   const biasTop = sideParam === 'bottom' ? bias : 0;
   const biasBottom = sideParam === 'top' ? bias : 0;
   const biasLeft = sideParam === 'right' ? bias : 0;
   const biasRight = sideParam === 'left' ? bias : 0;
-  if (typeof collisionPadding === 'number') {
-    collisionPadding = {
-      top: collisionPadding + biasTop,
-      right: collisionPadding + biasRight,
-      bottom: collisionPadding + biasBottom,
-      left: collisionPadding + biasLeft
-    };
-  } else if (collisionPadding) {
-    collisionPadding = {
-      top: (collisionPadding.top || 0) + biasTop,
-      right: (collisionPadding.right || 0) + biasRight,
-      bottom: (collisionPadding.bottom || 0) + biasBottom,
-      left: (collisionPadding.left || 0) + biasLeft
-    };
-  }
   const commonCollisionProps = {
     boundary: collisionBoundary === 'clipping-ancestors' ? 'clippingAncestors' : collisionBoundary,
     padding: collisionPadding
@@ -155,46 +165,37 @@ export function useAnchorPositioning(params) {
     // Ensure the popup flips if it's been limited by its --available-height and it resizes.
     // Since the size() padding is smaller than the flip() padding, flip() will take precedence.
     padding: {
-      top: collisionPadding.top + bias,
-      right: collisionPadding.right + bias,
-      bottom: collisionPadding.bottom + bias,
-      left: collisionPadding.left + bias
+      top: collisionPadding.top + bias + biasTop,
+      right: collisionPadding.right + bias + biasRight,
+      bottom: collisionPadding.bottom + bias + biasBottom,
+      left: collisionPadding.left + bias + biasLeft
     },
     mainAxis: !shiftCrossAxis && collisionAvoidanceSide === 'flip',
     crossAxis: collisionAvoidanceAlign === 'flip' ? 'alignment' : false,
     fallbackAxisSideDirection: collisionAvoidanceFallbackAxisSide
   });
-  const shiftMiddleware = shiftDisabled ? null : shift(data => {
-    const html = ownerDocument(data.elements.floating).documentElement;
-    return {
-      ...commonCollisionProps,
-      // Use the Layout Viewport to avoid shifting around when pinch-zooming
-      // for context menus.
-      rootBoundary: shiftCrossAxis ? {
-        x: 0,
-        y: 0,
-        width: html.clientWidth,
-        height: html.clientHeight
-      } : undefined,
-      mainAxis: collisionAvoidanceAlign !== 'none',
-      crossAxis: crossAxisShiftEnabled,
-      limiter: sticky || shiftCrossAxis ? undefined : limitShift(limitData => {
-        if (!arrowRef.current) {
-          return {};
-        }
-        const {
-          width,
-          height
-        } = arrowRef.current.getBoundingClientRect();
-        const sideAxis = getSideAxis(getSide(limitData.placement));
-        const arrowSize = sideAxis === 'y' ? width : height;
-        const offsetAmount = sideAxis === 'y' ? collisionPadding.left + collisionPadding.right : collisionPadding.top + collisionPadding.bottom;
-        return {
-          offset: arrowSize / 2 + offsetAmount / 2
-        };
-      })
-    };
-  }, [commonCollisionProps, sticky, shiftCrossAxis, collisionPadding, collisionAvoidanceAlign]);
+  const shiftMiddleware = shiftDisabled ? null : floatingShift({
+    ...commonCollisionProps,
+    // Use the Layout Viewport to avoid shifting around when pinch-zooming.
+    rootBoundary: shiftRootBoundary,
+    mainAxis: collisionAvoidanceAlign !== 'none',
+    crossAxis: crossAxisShiftEnabled,
+    limiter: sticky || shiftCrossAxis ? undefined : limitShift(limitData => {
+      if (!arrowRef.current) {
+        return {};
+      }
+      const {
+        width,
+        height
+      } = arrowRef.current.getBoundingClientRect();
+      const sideAxis = getSideAxis(getSide(limitData.placement));
+      const arrowSize = sideAxis === 'y' ? width : height;
+      const offsetAmount = sideAxis === 'y' ? collisionPadding.left + collisionPadding.right : collisionPadding.top + collisionPadding.bottom;
+      return {
+        offset: arrowSize / 2 + offsetAmount / 2
+      };
+    })
+  }, [commonCollisionProps, sticky, shiftCrossAxis, shiftRootBoundary, collisionPadding, collisionAvoidanceAlign]);
 
   // https://floating-ui.com/docs/flip#combining-with-shift
   if (collisionAvoidanceSide === 'shift' || collisionAvoidanceAlign === 'shift' || align === 'center') {
@@ -216,8 +217,8 @@ export function useAnchorPositioning(params) {
         return;
       }
       const floatingStyle = floating.style;
-      floatingStyle.setProperty('--available-width', `${availableWidth}px`);
-      floatingStyle.setProperty('--available-height', `${availableHeight}px`);
+      floatingStyle.setProperty(AVAILABLE_WIDTH_VAR, `${availableWidth}px`);
+      floatingStyle.setProperty(AVAILABLE_HEIGHT_VAR, `${availableHeight}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;
@@ -299,7 +300,7 @@ export function useAnchorPositioning(params) {
     context,
     isPositioned,
     floatingStyles: originalFloatingStyles
-  } = useFloating({
+  } = useFloatingHook({
     rootContext: floatingRootContext,
     open: keepMounted ? mounted : undefined,
     placement,
@@ -318,14 +319,41 @@ export function useAnchorPositioning(params) {
   // This ensures the popup is inside the viewport initially before it gets positioned.
   const resolvedPosition = isPositioned ? positionMethod : 'fixed';
   const floatingStyles = React.useMemo(() => {
-    const base = adaptiveOrigin ? {
-      position: resolvedPosition,
-      [sideX]: x,
-      [sideY]: y
-    } : {
-      position: resolvedPosition,
-      ...originalFloatingStyles
-    };
+    let base;
+    if (!isPositioned) {
+      // Until a position for the current open is computed, ignore any coordinates retained from a
+      // previous open (or from a pass that measured the hidden popup as 0x0). Rendering the
+      // full-size popup at such stale coordinates can overflow the layout viewport, which makes
+      // mobile Chrome zoom the page out and reflow everything the popup is anchored to.
+      base = {
+        position: resolvedPosition,
+        top: 0,
+        left: 0
+      };
+    } else if (adaptiveOrigin) {
+      base = {
+        position: resolvedPosition,
+        [sideX]: x,
+        [sideY]: y
+      };
+    } else {
+      base = {
+        ...originalFloatingStyles,
+        position: resolvedPosition
+      };
+    }
+
+    // Seed the available size vars so consumer `max-height: min(x, var(--available-height))` rules
+    // resolve to a valid length on the first positioning pass, before `size()` writes the real
+    // values. Without a fallback the unresolved `var()` invalidates the whole declaration, so the
+    // popup is measured unconstrained while `flip()` picks its side, against the full content
+    // height rather than the capped one. Seeded unconditionally (not only while `!isPositioned`):
+    // the keys must stay present with a constant value so React's per-property style diff never
+    // rewrites them after mount, preserving the px values `size()` sets imperatively. Moving them
+    // into the `!isPositioned` branch makes React remove them once positioned, wiping `size()`'s
+    // values and leaving the popup unconstrained.
+    base[AVAILABLE_WIDTH_VAR] = '100vw';
+    base[AVAILABLE_HEIGHT_VAR] = '100vh';
     if (!isPositioned) {
       base.opacity = 0;
     }
@@ -376,10 +404,10 @@ export function useAnchorPositioning(params) {
   // and flips back lazily, not eagerly. Ideal for filtered lists that change
   // the size of the popup dynamically to avoid unwanted flipping when typing.
   useIsoLayoutEffect(() => {
-    if (lazyFlip && mounted && isPositioned) {
+    if (lazyFlip && mounted && isPositioned && renderedSide !== side) {
       setMountSide(renderedSide);
     }
-  }, [lazyFlip, mounted, isPositioned, renderedSide]);
+  }, [lazyFlip, mounted, isPositioned, renderedSide, side]);
   const arrowStyles = React.useMemo(() => ({
     position: 'absolute',
     top: middlewareData.arrow?.y,

package/internals/useAnimationsFinished.d.mts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 /**
  * 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 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, waitForStartingStyleRemoved?: boolean, treatAbortedAsFinished?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;
+export declare function useAnimationsFinished(elementOrRef: React.RefObject<HTMLElement | null> | HTMLElement | null, waitForStartingStyleRemoved?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;

package/internals/useAnimationsFinished.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
 /**
  * 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 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, waitForStartingStyleRemoved?: boolean, treatAbortedAsFinished?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;
+export declare function useAnimationsFinished(elementOrRef: React.RefObject<HTMLElement | null> | HTMLElement | null, waitForStartingStyleRemoved?: boolean): (fnToExecute: () => void, signal?: AbortSignal | null) => void;

package/internals/useAnimationsFinished.js

@@ -10,16 +10,14 @@ 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 _stateAttributesMapping = require("./stateAttributesMapping");
 /**
  * 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 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, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true) {
+function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false) {
   const frame = (0, _useAnimationFrame.useAnimationFrame)();
   return (0, _useStableCallback.useStableCallback)((fnToExecute,
   /**
@@ -48,23 +46,22 @@ function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false
         if (!signal?.aborted) {
           done();
         }
-      }).catch(() => {
-        if (treatAbortedAsFinished) {
-          if (!signal?.aborted) {
-            done();
-          }
+      }, () => {
+        if (signal?.aborted) {
           return;
         }
         const currentAnimations = resolvedElement.getAnimations();
-        if (!signal?.aborted && currentAnimations.length > 0 && currentAnimations.some(animation => animation.pending || animation.playState !== 'finished')) {
+        if (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();
+          return;
         }
+        done();
       });
     }
     if (waitForStartingStyleRemoved) {
-      const startingStyleAttribute = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle;
+      const startingStyleAttribute = 'data-starting-style';
 
       // 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,17 +4,15 @@ 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 { TransitionStatusDataAttributes } from "./stateAttributesMapping.mjs";
 
 /**
  * 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 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 function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true) {
+export function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false) {
   const frame = useAnimationFrame();
   return useStableCallback((fnToExecute,
   /**
@@ -43,23 +41,22 @@ export function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved
         if (!signal?.aborted) {
           done();
         }
-      }).catch(() => {
-        if (treatAbortedAsFinished) {
-          if (!signal?.aborted) {
-            done();
-          }
+      }, () => {
+        if (signal?.aborted) {
           return;
         }
         const currentAnimations = resolvedElement.getAnimations();
-        if (!signal?.aborted && currentAnimations.length > 0 && currentAnimations.some(animation => animation.pending || animation.playState !== 'finished')) {
+        if (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();
+          return;
         }
+        done();
       });
     }
     if (waitForStartingStyleRemoved) {
-      const startingStyleAttribute = TransitionStatusDataAttributes.startingStyle;
+      const startingStyleAttribute = 'data-starting-style';
 
       // 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.js

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

package/internals/useOpenChangeComplete.mjs

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

package/internals/usePressAndHold.d.mts

@@ -2,7 +2,6 @@ import * as React from 'react';
 export declare function isTouchLikePointerType(pointerType: string): pointerType is "pen" | "touch";
 export interface UsePressAndHoldParameters {
   disabled: boolean;
-  readOnly?: boolean | undefined;
   /**
    * Called on each tick during a hold. Return `false` to stop the auto-change sequence.
    */

package/internals/usePressAndHold.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 export declare function isTouchLikePointerType(pointerType: string): pointerType is "pen" | "touch";
 export interface UsePressAndHoldParameters {
   disabled: boolean;
-  readOnly?: boolean | undefined;
   /**
    * Called on each tick during a hold. Return `false` to stop the auto-change sequence.
    */

package/internals/usePressAndHold.js

@@ -35,7 +35,6 @@ function isTouchLikePointerType(pointerType) {
 function usePressAndHold(params) {
   const {
     disabled,
-    readOnly = false,
     tick,
     onStop,
     tickDelay = DEFAULT_TICK_DELAY,
@@ -115,8 +114,7 @@ function usePressAndHold(params) {
       isTouchingButtonRef.current = false;
     },
     onPointerDown(event) {
-      const isMainButton = !event.button || event.button === 0;
-      if (event.defaultPrevented || !isMainButton || disabled || readOnly) {
+      if (event.defaultPrevented || event.button || disabled) {
         return;
       }
       pointerTypeRef.current = event.pointerType;
@@ -159,12 +157,10 @@ function usePressAndHold(params) {
       }
     },
     onPointerMove(event) {
-      if (disabled || readOnly || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
+      if (disabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
         return;
       }
-      if (movesAfterTouchRef.current != null) {
-        movesAfterTouchRef.current += 1;
-      }
+      movesAfterTouchRef.current += 1;
       const {
         x,
         y
@@ -176,7 +172,7 @@ function usePressAndHold(params) {
       }
     },
     onMouseEnter(event) {
-      if (event.defaultPrevented || disabled || readOnly || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
+      if (event.defaultPrevented || disabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
         return;
       }
       startAutoChange(event.nativeEvent);

package/internals/usePressAndHold.mjs

@@ -28,7 +28,6 @@ export function isTouchLikePointerType(pointerType) {
 export function usePressAndHold(params) {
   const {
     disabled,
-    readOnly = false,
     tick,
     onStop,
     tickDelay = DEFAULT_TICK_DELAY,
@@ -108,8 +107,7 @@ export function usePressAndHold(params) {
       isTouchingButtonRef.current = false;
     },
     onPointerDown(event) {
-      const isMainButton = !event.button || event.button === 0;
-      if (event.defaultPrevented || !isMainButton || disabled || readOnly) {
+      if (event.defaultPrevented || event.button || disabled) {
         return;
       }
       pointerTypeRef.current = event.pointerType;
@@ -152,12 +150,10 @@ export function usePressAndHold(params) {
       }
     },
     onPointerMove(event) {
-      if (disabled || readOnly || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
+      if (disabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
         return;
       }
-      if (movesAfterTouchRef.current != null) {
-        movesAfterTouchRef.current += 1;
-      }
+      movesAfterTouchRef.current += 1;
       const {
         x,
         y
@@ -169,7 +165,7 @@ export function usePressAndHold(params) {
       }
     },
     onMouseEnter(event) {
-      if (event.defaultPrevented || disabled || readOnly || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
+      if (event.defaultPrevented || disabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
         return;
       }
       startAutoChange(event.nativeEvent);

package/internals/useRenderElement.js

@@ -69,7 +69,8 @@ function useRenderElementProps(componentProps, params = {}) {
   /* eslint-disable react-hooks/rules-of-hooks */
   if (typeof document !== 'undefined') {
     if (!enabled) {
-      (0, _useMergedRefs.useMergedRefs)(null, null);
+      // Called only to keep the hook order stable when disabled; the merged ref is unused.
+      void (0, _useMergedRefs.useMergedRefs)(null, null);
     } else if (Array.isArray(ref)) {
       outProps.ref = (0, _useMergedRefs.useMergedRefsN)([outProps.ref, (0, _getReactElementRef.getReactElementRef)(renderProp), ...ref]);
     } else {
@@ -95,9 +96,9 @@ function resolveRenderFunctionProps(props) {
 }
 
 // The symbol React uses internally for lazy components
-// https://github.com/facebook/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/shared/ReactSymbols.js#L31
+// https://github.com/react/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/shared/ReactSymbols.js#L31
 //
-// TODO delete once https://github.com/facebook/react/issues/32392 is fixed
+// TODO delete once https://github.com/react/react/issues/32392 is fixed
 const REACT_LAZY_TYPE = Symbol.for('react.lazy');
 const COMPONENT_IDENTIFIER_PATTERN = /^[A-Z][A-Za-z0-9$]*$/;
 const LOWERCASE_CHARACTER_PATTERN = /[a-z]/;
@@ -112,10 +113,9 @@ 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/facebook/react/issues/32392
+    // Workaround for https://github.com/react/react/issues/32392
     // This works because the toArray() logic unwrap lazy element type in
-    // https://github.com/facebook/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/react/src/ReactChildren.js#L186
+    // 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];

package/internals/useRenderElement.mjs

@@ -61,7 +61,8 @@ function useRenderElementProps(componentProps, params = {}) {
   /* eslint-disable react-hooks/rules-of-hooks */
   if (typeof document !== 'undefined') {
     if (!enabled) {
-      useMergedRefs(null, null);
+      // Called only to keep the hook order stable when disabled; the merged ref is unused.
+      void useMergedRefs(null, null);
     } else if (Array.isArray(ref)) {
       outProps.ref = useMergedRefsN([outProps.ref, getReactElementRef(renderProp), ...ref]);
     } else {
@@ -87,9 +88,9 @@ function resolveRenderFunctionProps(props) {
 }
 
 // The symbol React uses internally for lazy components
-// https://github.com/facebook/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/shared/ReactSymbols.js#L31
+// https://github.com/react/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/shared/ReactSymbols.js#L31
 //
-// TODO delete once https://github.com/facebook/react/issues/32392 is fixed
+// TODO delete once https://github.com/react/react/issues/32392 is fixed
 const REACT_LAZY_TYPE = Symbol.for('react.lazy');
 const COMPONENT_IDENTIFIER_PATTERN = /^[A-Z][A-Za-z0-9$]*$/;
 const LOWERCASE_CHARACTER_PATTERN = /[a-z]/;
@@ -104,10 +105,9 @@ function evaluateRenderProp(element, render, props, state) {
     const mergedProps = mergeProps(props, render.props);
     mergedProps.ref = props.ref;
     let newElement = render;
-
-    // Workaround for https://github.com/facebook/react/issues/32392
+    // Workaround for https://github.com/react/react/issues/32392
     // This works because the toArray() logic unwrap lazy element type in
-    // https://github.com/facebook/react/blob/a0566250b210499b4c5677f5ac2eedbd71d51a1b/packages/react/src/ReactChildren.js#L186
+    // 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];

package/internals/useValueChanged.js

@@ -13,12 +13,9 @@ function useValueChanged(value, onChange) {
   const valueRef = React.useRef(value);
   const onChangeCallback = (0, _useStableCallback.useStableCallback)(onChange);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (valueRef.current === value) {
-      return;
+    if (valueRef.current !== value) {
+      onChangeCallback(valueRef.current);
     }
-    onChangeCallback(valueRef.current);
-  }, [value, onChangeCallback]);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     valueRef.current = value;
-  }, [value]);
+  }, [value, onChangeCallback]);
 }

package/internals/useValueChanged.mjs

@@ -7,12 +7,9 @@ export function useValueChanged(value, onChange) {
   const valueRef = React.useRef(value);
   const onChangeCallback = useStableCallback(onChange);
   useIsoLayoutEffect(() => {
-    if (valueRef.current === value) {
-      return;
+    if (valueRef.current !== value) {
+      onChangeCallback(valueRef.current);
     }
-    onChangeCallback(valueRef.current);
-  }, [value, onChangeCallback]);
-  useIsoLayoutEffect(() => {
     valueRef.current = value;
-  }, [value]);
+  }, [value, onChangeCallback]);
 }

package/menu/arrow/MenuArrow.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Side, Align } from "../../utils/useAnchorPositioning.mjs";
+import type { Side, Align } from "../../internals/useAnchorPositioning.mjs";
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
 /**
  * Displays an element positioned against the menu anchor.

package/menu/arrow/MenuArrow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Side, Align } from "../../utils/useAnchorPositioning.js";
+import type { Side, Align } from "../../internals/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Displays an element positioned against the menu anchor.

package/menu/backdrop/MenuBackdrop.js

@@ -10,14 +10,8 @@ var React = _interopRequireWildcard(require("react"));
 var _MenuRootContext = require("../root/MenuRootContext");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _ContextMenuRootContext = require("../../context-menu/root/ContextMenuRootContext");
 var _reasons = require("../../internals/reasons");
-const stateAttributesMapping = {
-  ..._popupStateMapping.popupStateMapping,
-  ..._stateAttributesMapping.transitionStatusMapping
-};
-
 /**
  * An overlay displayed beneath the menu popup.
  * Renders a `<div>` element.
@@ -46,7 +40,7 @@ const MenuBackdrop = exports.MenuBackdrop = /*#__PURE__*/React.forwardRef(functi
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: contextMenuContext?.backdropRef ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
     state,
-    stateAttributesMapping,
+    stateAttributesMapping: _popupStateMapping.popupTransitionStateMapping,
     props: [{
       role: 'presentation',
       hidden: !mounted,