@base-ui/react 1.6.0 → 1.8.0

package/utils/scrollable.js

@@ -6,25 +6,33 @@ Object.defineProperty(exports, "__esModule", {
 exports.findScrollableTouchTarget = findScrollableTouchTarget;
 exports.hasScrollableAncestor = hasScrollableAncestor;
 exports.isScrollable = isScrollable;
+exports.isScrollableX = isScrollableX;
+exports.isScrollableY = isScrollableY;
 var _dom = require("@floating-ui/utils/dom");
-function isScrollable(element, axis,
-// When true, a container that overflows only once extra space is added (e.g. drawer
-// keyboard scroll slack) still counts, as long as it has layout size on the axis.
-allowOverflowIntent = false) {
-  const style = (0, _dom.getComputedStyle)(element);
-  if (axis === 'vertical') {
-    const overflowY = style.overflowY;
-    if (overflowY !== 'auto' && overflowY !== 'scroll') {
-      return false;
-    }
-    return allowOverflowIntent ? element.clientHeight > 0 : element.scrollHeight > element.clientHeight;
+function isScrollableY(element, allowOverflowIntent = false) {
+  const {
+    overflowY
+  } = (0, _dom.getComputedStyle)(element);
+  if (overflowY !== 'auto' && overflowY !== 'scroll') {
+    return false;
   }
-  const overflowX = style.overflowX;
+  // When `allowOverflowIntent` is true, a container that overflows only once extra space is
+  // added (e.g. drawer keyboard scroll slack) still counts, as long as it has layout size on
+  // the axis.
+  return allowOverflowIntent ? element.clientHeight > 0 : element.scrollHeight > element.clientHeight;
+}
+function isScrollableX(element, allowOverflowIntent = false) {
+  const {
+    overflowX
+  } = (0, _dom.getComputedStyle)(element);
   if (overflowX !== 'auto' && overflowX !== 'scroll') {
     return false;
   }
   return allowOverflowIntent ? element.clientWidth > 0 : element.scrollWidth > element.clientWidth;
 }
+function isScrollable(element, axis, allowOverflowIntent = false) {
+  return axis === 'vertical' ? isScrollableY(element, allowOverflowIntent) : isScrollableX(element, allowOverflowIntent);
+}
 function hasScrollableAncestor(target, root, axes) {
   // `getParentNode` crosses shadow boundaries (and slots), so a target inside a shadow root
   // still walks up to scrollable ancestors in the light DOM.

package/utils/scrollable.mjs

@@ -1,22 +1,28 @@
 import { getComputedStyle, getParentNode, isHTMLElement, isLastTraversableNode } from '@floating-ui/utils/dom';
-export function isScrollable(element, axis,
-// When true, a container that overflows only once extra space is added (e.g. drawer
-// keyboard scroll slack) still counts, as long as it has layout size on the axis.
-allowOverflowIntent = false) {
-  const style = getComputedStyle(element);
-  if (axis === 'vertical') {
-    const overflowY = style.overflowY;
-    if (overflowY !== 'auto' && overflowY !== 'scroll') {
-      return false;
-    }
-    return allowOverflowIntent ? element.clientHeight > 0 : element.scrollHeight > element.clientHeight;
+export function isScrollableY(element, allowOverflowIntent = false) {
+  const {
+    overflowY
+  } = getComputedStyle(element);
+  if (overflowY !== 'auto' && overflowY !== 'scroll') {
+    return false;
   }
-  const overflowX = style.overflowX;
+  // When `allowOverflowIntent` is true, a container that overflows only once extra space is
+  // added (e.g. drawer keyboard scroll slack) still counts, as long as it has layout size on
+  // the axis.
+  return allowOverflowIntent ? element.clientHeight > 0 : element.scrollHeight > element.clientHeight;
+}
+export function isScrollableX(element, allowOverflowIntent = false) {
+  const {
+    overflowX
+  } = getComputedStyle(element);
   if (overflowX !== 'auto' && overflowX !== 'scroll') {
     return false;
   }
   return allowOverflowIntent ? element.clientWidth > 0 : element.scrollWidth > element.clientWidth;
 }
+export function isScrollable(element, axis, allowOverflowIntent = false) {
+  return axis === 'vertical' ? isScrollableY(element, allowOverflowIntent) : isScrollableX(element, allowOverflowIntent);
+}
 export function hasScrollableAncestor(target, root, axes) {
   // `getParentNode` crosses shadow boundaries (and slots), so a target inside a shadow root
   // still walks up to scrollable ancestors in the light DOM.

package/utils/styles.d.mts

@@ -1,4 +1,4 @@
 export declare const styleDisableScrollbar: {
   className: string;
-  getElement(nonce?: string): import("react/jsx-runtime").JSX.Element;
+  getElement(nonce?: string): import("react").JSX.Element;
 };

package/utils/styles.d.ts

@@ -1,4 +1,4 @@
 export declare const styleDisableScrollbar: {
   className: string;
-  getElement(nonce?: string): import("react/jsx-runtime").JSX.Element;
+  getElement(nonce?: string): import("react").JSX.Element;
 };

package/utils/usePopupAutoResize.d.mts

@@ -1,5 +1,5 @@
 import { Dimensions } from "../floating-ui-react/types.mjs";
-import { Side } from "./useAnchorPositioning.mjs";
+import { Side } from "../internals/useAnchorPositioning.mjs";
 /**
  * Allows the element to automatically resize based on its content while supporting animations.
  */

package/utils/usePopupAutoResize.d.ts

@@ -1,5 +1,5 @@
 import { Dimensions } from "../floating-ui-react/types.js";
-import { Side } from "./useAnchorPositioning.js";
+import { Side } from "../internals/useAnchorPositioning.js";
 /**
  * Allows the element to automatically resize based on its content while supporting animations.
  */

package/utils/usePopupAutoResize.js

@@ -13,6 +13,8 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _empty = require("@base-ui/utils/empty");
 var _useAnimationsFinished = require("../internals/useAnimationsFinished");
 var _getCssDimensions = require("./getCssDimensions");
+var CommonPopupCssVars = _interopRequireWildcard(require("./CommonPopupCssVars"));
+var CommonPositionerCssVars = _interopRequireWildcard(require("./CommonPositionerCssVars"));
 /**
  * Allows the element to automatically resize based on its content while supporting animations.
  */
@@ -27,30 +29,14 @@ function usePopupAutoResize(parameters) {
     side,
     direction
   } = parameters;
-  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(popupElement, true, false);
+  const runOnceAnimationsFinish = (0, _useAnimationsFinished.useAnimationsFinished)(popupElement, true);
   const animationFrame = (0, _useAnimationFrame.useAnimationFrame)();
   const committedDimensionsRef = React.useRef(null);
   const isInitialRenderRef = React.useRef(true);
   const restoreAnchoringStylesRef = React.useRef(_empty.NOOP);
   const onMeasureLayout = (0, _useStableCallback.useStableCallback)(onMeasureLayoutParam);
   const onMeasureLayoutComplete = (0, _useStableCallback.useStableCallback)(onMeasureLayoutCompleteParam);
-  const anchoringStyles = React.useMemo(() => {
-    // Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
-    let isOriginSide = side === 'top';
-    let isPhysicalLeft = side === 'left';
-    if (direction === 'rtl') {
-      isOriginSide = isOriginSide || side === 'inline-end';
-      isPhysicalLeft = isPhysicalLeft || side === 'inline-end';
-    } else {
-      isOriginSide = isOriginSide || side === 'inline-start';
-      isPhysicalLeft = isPhysicalLeft || side === 'inline-start';
-    }
-    return isOriginSide ? {
-      position: 'absolute',
-      [side === 'top' ? 'bottom' : 'top']: '0',
-      [isPhysicalLeft ? 'right' : 'left']: '0'
-    } : _empty.EMPTY_OBJECT;
-  }, [side, direction]);
+  const anchoringStyles = React.useMemo(() => getPopupAnchoringStyles(side, direction), [side, direction]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Reset the state when the popup is closed.
     if (!mounted) {
@@ -70,8 +56,8 @@ function usePopupAutoResize(parameters) {
     const restorePopupTransform = overrideElementStyle(popupElement, 'transform', 'none');
     const restorePopupScale = overrideElementStyle(popupElement, 'scale', '1');
     const restorePositionerAvailableSize = applyElementStyles(positionerElement, {
-      '--available-width': 'max-content',
-      '--available-height': 'max-content'
+      [CommonPositionerCssVars.availableWidth]: 'max-content',
+      [CommonPositionerCssVars.availableHeight]: 'max-content'
     });
     function restoreMeasurementOverrides() {
       restorePopupPosition();
@@ -114,8 +100,8 @@ function usePopupAutoResize(parameters) {
     animationFrame.request(() => {
       setPopupCssSize(popupElement, newDimensions);
       runOnceAnimationsFinish(() => {
-        popupElement.style.setProperty('--popup-width', 'auto');
-        popupElement.style.setProperty('--popup-height', 'auto');
+        popupElement.style.setProperty(CommonPopupCssVars.popupWidth, 'auto');
+        popupElement.style.setProperty(CommonPopupCssVars.popupHeight, 'auto');
       }, abortController.signal);
     });
     return () => {
@@ -126,6 +112,19 @@ function usePopupAutoResize(parameters) {
     };
   }, [content, popupElement, positionerElement, runOnceAnimationsFinish, animationFrame, mounted, onMeasureLayout, onMeasureLayoutComplete, anchoringStyles]);
 }
+function getPopupAnchoringStyles(side, direction) {
+  // Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
+  const isPhysicalTop = side === 'top';
+  const isPhysicalLeft = side === 'left' || side === (direction === 'rtl' ? 'inline-end' : 'inline-start');
+  if (!isPhysicalTop && !isPhysicalLeft) {
+    return _empty.EMPTY_OBJECT;
+  }
+  return {
+    position: 'absolute',
+    [isPhysicalTop ? 'bottom' : 'top']: '0',
+    [isPhysicalLeft ? 'right' : 'left']: '0'
+  };
+}
 function overrideElementStyle(element, property, value) {
   const originalValue = element.style.getPropertyValue(property);
   element.style.setProperty(property, value);
@@ -145,12 +144,12 @@ function applyElementStyles(element, styles) {
 function setPopupCssSize(popupElement, size) {
   const width = size === 'auto' ? 'auto' : `${size.width}px`;
   const height = size === 'auto' ? 'auto' : `${size.height}px`;
-  popupElement.style.setProperty('--popup-width', width);
-  popupElement.style.setProperty('--popup-height', height);
+  popupElement.style.setProperty(CommonPopupCssVars.popupWidth, width);
+  popupElement.style.setProperty(CommonPopupCssVars.popupHeight, height);
 }
 function setPositionerCssSize(positionerElement, size) {
   const width = size === 'max-content' ? 'max-content' : `${size.width}px`;
   const height = size === 'max-content' ? 'max-content' : `${size.height}px`;
-  positionerElement.style.setProperty('--positioner-width', width);
-  positionerElement.style.setProperty('--positioner-height', height);
+  positionerElement.style.setProperty(CommonPositionerCssVars.positionerWidth, width);
+  positionerElement.style.setProperty(CommonPositionerCssVars.positionerHeight, height);
 }

package/utils/usePopupAutoResize.mjs

@@ -7,6 +7,9 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { NOOP, EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { useAnimationsFinished } from "../internals/useAnimationsFinished.mjs";
 import { getCssDimensions } from "./getCssDimensions.mjs";
+import * as CommonPopupCssVars from "./CommonPopupCssVars.mjs";
+import * as CommonPositionerCssVars from "./CommonPositionerCssVars.mjs";
+
 /**
  * Allows the element to automatically resize based on its content while supporting animations.
  */
@@ -21,30 +24,14 @@ export function usePopupAutoResize(parameters) {
     side,
     direction
   } = parameters;
-  const runOnceAnimationsFinish = useAnimationsFinished(popupElement, true, false);
+  const runOnceAnimationsFinish = useAnimationsFinished(popupElement, true);
   const animationFrame = useAnimationFrame();
   const committedDimensionsRef = React.useRef(null);
   const isInitialRenderRef = React.useRef(true);
   const restoreAnchoringStylesRef = React.useRef(NOOP);
   const onMeasureLayout = useStableCallback(onMeasureLayoutParam);
   const onMeasureLayoutComplete = useStableCallback(onMeasureLayoutCompleteParam);
-  const anchoringStyles = React.useMemo(() => {
-    // Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
-    let isOriginSide = side === 'top';
-    let isPhysicalLeft = side === 'left';
-    if (direction === 'rtl') {
-      isOriginSide = isOriginSide || side === 'inline-end';
-      isPhysicalLeft = isPhysicalLeft || side === 'inline-end';
-    } else {
-      isOriginSide = isOriginSide || side === 'inline-start';
-      isPhysicalLeft = isPhysicalLeft || side === 'inline-start';
-    }
-    return isOriginSide ? {
-      position: 'absolute',
-      [side === 'top' ? 'bottom' : 'top']: '0',
-      [isPhysicalLeft ? 'right' : 'left']: '0'
-    } : EMPTY_OBJECT;
-  }, [side, direction]);
+  const anchoringStyles = React.useMemo(() => getPopupAnchoringStyles(side, direction), [side, direction]);
   useIsoLayoutEffect(() => {
     // Reset the state when the popup is closed.
     if (!mounted) {
@@ -64,8 +51,8 @@ export function usePopupAutoResize(parameters) {
     const restorePopupTransform = overrideElementStyle(popupElement, 'transform', 'none');
     const restorePopupScale = overrideElementStyle(popupElement, 'scale', '1');
     const restorePositionerAvailableSize = applyElementStyles(positionerElement, {
-      '--available-width': 'max-content',
-      '--available-height': 'max-content'
+      [CommonPositionerCssVars.availableWidth]: 'max-content',
+      [CommonPositionerCssVars.availableHeight]: 'max-content'
     });
     function restoreMeasurementOverrides() {
       restorePopupPosition();
@@ -108,8 +95,8 @@ export function usePopupAutoResize(parameters) {
     animationFrame.request(() => {
       setPopupCssSize(popupElement, newDimensions);
       runOnceAnimationsFinish(() => {
-        popupElement.style.setProperty('--popup-width', 'auto');
-        popupElement.style.setProperty('--popup-height', 'auto');
+        popupElement.style.setProperty(CommonPopupCssVars.popupWidth, 'auto');
+        popupElement.style.setProperty(CommonPopupCssVars.popupHeight, 'auto');
       }, abortController.signal);
     });
     return () => {
@@ -120,6 +107,19 @@ export function usePopupAutoResize(parameters) {
     };
   }, [content, popupElement, positionerElement, runOnceAnimationsFinish, animationFrame, mounted, onMeasureLayout, onMeasureLayoutComplete, anchoringStyles]);
 }
+function getPopupAnchoringStyles(side, direction) {
+  // Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
+  const isPhysicalTop = side === 'top';
+  const isPhysicalLeft = side === 'left' || side === (direction === 'rtl' ? 'inline-end' : 'inline-start');
+  if (!isPhysicalTop && !isPhysicalLeft) {
+    return EMPTY_OBJECT;
+  }
+  return {
+    position: 'absolute',
+    [isPhysicalTop ? 'bottom' : 'top']: '0',
+    [isPhysicalLeft ? 'right' : 'left']: '0'
+  };
+}
 function overrideElementStyle(element, property, value) {
   const originalValue = element.style.getPropertyValue(property);
   element.style.setProperty(property, value);
@@ -139,12 +139,12 @@ function applyElementStyles(element, styles) {
 function setPopupCssSize(popupElement, size) {
   const width = size === 'auto' ? 'auto' : `${size.width}px`;
   const height = size === 'auto' ? 'auto' : `${size.height}px`;
-  popupElement.style.setProperty('--popup-width', width);
-  popupElement.style.setProperty('--popup-height', height);
+  popupElement.style.setProperty(CommonPopupCssVars.popupWidth, width);
+  popupElement.style.setProperty(CommonPopupCssVars.popupHeight, height);
 }
 function setPositionerCssSize(positionerElement, size) {
   const width = size === 'max-content' ? 'max-content' : `${size.width}px`;
   const height = size === 'max-content' ? 'max-content' : `${size.height}px`;
-  positionerElement.style.setProperty('--positioner-width', width);
-  positionerElement.style.setProperty('--positioner-height', height);
+  positionerElement.style.setProperty(CommonPositionerCssVars.positionerWidth, width);
+  positionerElement.style.setProperty(CommonPositionerCssVars.positionerHeight, height);
 }

package/utils/usePopupViewport.d.mts

@@ -1,16 +1,10 @@
 import * as React from 'react';
 import type { ReactStore } from '@base-ui/utils/store';
-import { Side } from "./useAnchorPositioning.mjs";
-export type PopupViewportCssVars = {
-  /**
-   * CSS variable name storing the popup width for the previous content snapshot.
-   */
-  popupWidth: string;
-  /**
-   * CSS variable name storing the popup height for the previous content snapshot.
-   */
-  popupHeight: string;
-};
+import type { StateAttributesMapping } from "../internals/getStateAttributesProps.mjs";
+import { Side } from "../internals/useAnchorPositioning.mjs";
+export declare const popupViewportStateMapping: StateAttributesMapping<{
+  activationDirection: string | undefined;
+}>;
 export interface PopupViewportState {
   /**
    * Direction from which the popup was activated, used for directional animations.
@@ -31,10 +25,6 @@ export interface UsePopupViewportParameters {
    * Side of the positioner relative to the trigger.
    */
   side: Side;
-  /**
-   * CSS variable names used for sizing the previous content snapshot.
-   */
-  cssVars: PopupViewportCssVars;
   /**
    * Viewport children to render in the current container.
    */

package/utils/usePopupViewport.d.ts

@@ -1,16 +1,10 @@
 import * as React from 'react';
 import type { ReactStore } from '@base-ui/utils/store';
-import { Side } from "./useAnchorPositioning.js";
-export type PopupViewportCssVars = {
-  /**
-   * CSS variable name storing the popup width for the previous content snapshot.
-   */
-  popupWidth: string;
-  /**
-   * CSS variable name storing the popup height for the previous content snapshot.
-   */
-  popupHeight: string;
-};
+import type { StateAttributesMapping } from "../internals/getStateAttributesProps.js";
+import { Side } from "../internals/useAnchorPositioning.js";
+export declare const popupViewportStateMapping: StateAttributesMapping<{
+  activationDirection: string | undefined;
+}>;
 export interface PopupViewportState {
   /**
    * Direction from which the popup was activated, used for directional animations.
@@ -31,10 +25,6 @@ export interface UsePopupViewportParameters {
    * Side of the positioner relative to the trigger.
    */
   side: Side;
-  /**
-   * CSS variable names used for sizing the previous content snapshot.
-   */
-  cssVars: PopupViewportCssVars;
   /**
    * Viewport children to render in the current container.
    */

package/utils/usePopupViewport.js

@@ -5,6 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.popupViewportStateMapping = void 0;
 exports.usePopupViewport = usePopupViewport;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
@@ -17,7 +18,15 @@ var _owner = require("@base-ui/utils/owner");
 var _useAnimationsFinished = require("../internals/useAnimationsFinished");
 var _usePopupAutoResize = require("./usePopupAutoResize");
 var _directionProvider = require("../direction-provider");
+var _adaptiveOriginMiddleware = require("./adaptiveOriginMiddleware");
+var CommonPopupCssVars = _interopRequireWildcard(require("./CommonPopupCssVars"));
+var CommonViewportDataAttributes = _interopRequireWildcard(require("./CommonViewportDataAttributes"));
 var _jsxRuntime = require("react/jsx-runtime");
+const popupViewportStateMapping = exports.popupViewportStateMapping = {
+  activationDirection: value => value ? {
+    [CommonViewportDataAttributes.activationDirection]: value
+  } : null
+};
 /**
  * Builds morphing viewport containers for popups that animate between trigger-based content.
  * Handles previous-content snapshots, auto-resize, and state attributes for transitions.
@@ -26,7 +35,6 @@ function usePopupViewport(parameters) {
   const {
     store,
     side,
-    cssVars,
     children
   } = parameters;
   const direction = (0, _directionProvider.useDirection)();
@@ -46,14 +54,15 @@ function usePopupViewport(parameters) {
   const [newTriggerOffset, setNewTriggerOffset] = React.useState(null);
   const currentContainerRef = React.useRef(null);
   const previousContainerRef = React.useRef(null);
-  const onAnimationsFinished = (0, _useAnimationsFinished.useAnimationsFinished)(currentContainerRef, true, false);
+  const onAnimationsFinished = (0, _useAnimationsFinished.useAnimationsFinished)(currentContainerRef, true);
   const cleanupFrame = (0, _useAnimationFrame.useAnimationFrame)();
+  const cleanupControllerRef = React.useRef(null);
   const [previousContentDimensions, setPreviousContentDimensions] = React.useState(null);
   const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React.useState(false);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    store.set('hasViewport', true);
+    store.set('adaptiveOrigin', _adaptiveOriginMiddleware.adaptiveOrigin);
     return () => {
-      store.set('hasViewport', false);
+      store.set('adaptiveOrigin', undefined);
     };
   }, [store]);
   const handleMeasureLayout = (0, _useStableCallback.useStableCallback)(() => {
@@ -69,6 +78,16 @@ function usePopupViewport(parameters) {
       setPreviousContentDimensions(previousDimensions);
     }
   });
+  const armViewportCleanup = (0, _useStableCallback.useStableCallback)(() => {
+    cleanupControllerRef.current?.abort();
+    const controller = new AbortController();
+    cleanupControllerRef.current = controller;
+    onAnimationsFinished(() => {
+      setPreviousContentNode(null);
+      setPreviousContentDimensions(null);
+      capturedNodeRef.current = null;
+    }, controller.signal);
+  });
   const lastHandledTriggerRef = React.useRef(null);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!open || !mounted) {
@@ -86,19 +105,33 @@ function usePopupViewport(parameters) {
       // so we can pass it to the style hook for animation purposes.
       const offset = calculateRelativePosition(previousActiveTrigger, activeTrigger);
       setNewTriggerOffset(offset);
-      cleanupFrame.request(() => {
-        ReactDOM.flushSync(() => {
-          setShowStartingStyleAttribute(false);
-        });
-        onAnimationsFinished(() => {
-          setPreviousContentNode(null);
-          setPreviousContentDimensions(null);
-          capturedNodeRef.current = null;
-        });
-      });
       lastHandledTriggerRef.current = activeTrigger;
     }
-  }, [activeTrigger, previousActiveTrigger, previousContentNode, onAnimationsFinished, cleanupFrame]);
+  }, [activeTrigger, previousActiveTrigger]);
+
+  // Arm cleanup after a trigger change, and re-arm it if the current container remounts
+  // mid-transition when a lagging payload bumps `currentContentKey`. The remount discards
+  // the running entry animation (and with transition-style CSS the replacement mounts at
+  // final styles with no animation at all), so re-run the starting-style choreography —
+  // otherwise the watcher either strands or fires before the previous container's exit
+  // animation finishes.
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (previousContentNode == null) {
+      return;
+    }
+
+    // Abort the stale watcher synchronously. The remount cancels the old container's
+    // animations, and the resulting promise rejection would otherwise run the cleanup
+    // in a microtask before the re-armed watcher below is in place.
+    cleanupControllerRef.current?.abort();
+    setShowStartingStyleAttribute(true);
+    cleanupFrame.request(() => {
+      ReactDOM.flushSync(() => {
+        setShowStartingStyleAttribute(false);
+      });
+      armViewportCleanup();
+    });
+  }, [currentContentKey, previousContentNode, armViewportCleanup, cleanupFrame]);
 
   // Capture a clone of the current content DOM subtree when not transitioning.
   // We can't store previous React nodes as they may be stateful; instead we capture DOM clones for visual continuity.
@@ -135,8 +168,8 @@ function usePopupViewport(parameters) {
         ref: previousContainerRef,
         style: {
           ...(previousContentDimensions ? {
-            [cssVars.popupWidth]: `${previousContentDimensions.width}px`,
-            [cssVars.popupHeight]: `${previousContentDimensions.height}px`
+            [CommonPopupCssVars.popupWidth]: `${previousContentDimensions.width}px`,
+            [CommonPopupCssVars.popupHeight]: `${previousContentDimensions.height}px`
           } : null),
           position: 'absolute'
         },

package/utils/usePopupViewport.mjs

@@ -11,7 +11,15 @@ import { ownerDocument } from '@base-ui/utils/owner';
 import { useAnimationsFinished } from "../internals/useAnimationsFinished.mjs";
 import { usePopupAutoResize } from "./usePopupAutoResize.mjs";
 import { useDirection } from "../direction-provider/index.mjs";
+import { adaptiveOrigin } from "./adaptiveOriginMiddleware.mjs";
+import * as CommonPopupCssVars from "./CommonPopupCssVars.mjs";
+import * as CommonViewportDataAttributes from "./CommonViewportDataAttributes.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const popupViewportStateMapping = {
+  activationDirection: value => value ? {
+    [CommonViewportDataAttributes.activationDirection]: value
+  } : null
+};
 /**
  * Builds morphing viewport containers for popups that animate between trigger-based content.
  * Handles previous-content snapshots, auto-resize, and state attributes for transitions.
@@ -20,7 +28,6 @@ export function usePopupViewport(parameters) {
   const {
     store,
     side,
-    cssVars,
     children
   } = parameters;
   const direction = useDirection();
@@ -40,14 +47,15 @@ export function usePopupViewport(parameters) {
   const [newTriggerOffset, setNewTriggerOffset] = React.useState(null);
   const currentContainerRef = React.useRef(null);
   const previousContainerRef = React.useRef(null);
-  const onAnimationsFinished = useAnimationsFinished(currentContainerRef, true, false);
+  const onAnimationsFinished = useAnimationsFinished(currentContainerRef, true);
   const cleanupFrame = useAnimationFrame();
+  const cleanupControllerRef = React.useRef(null);
   const [previousContentDimensions, setPreviousContentDimensions] = React.useState(null);
   const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React.useState(false);
   useIsoLayoutEffect(() => {
-    store.set('hasViewport', true);
+    store.set('adaptiveOrigin', adaptiveOrigin);
     return () => {
-      store.set('hasViewport', false);
+      store.set('adaptiveOrigin', undefined);
     };
   }, [store]);
   const handleMeasureLayout = useStableCallback(() => {
@@ -63,6 +71,16 @@ export function usePopupViewport(parameters) {
       setPreviousContentDimensions(previousDimensions);
     }
   });
+  const armViewportCleanup = useStableCallback(() => {
+    cleanupControllerRef.current?.abort();
+    const controller = new AbortController();
+    cleanupControllerRef.current = controller;
+    onAnimationsFinished(() => {
+      setPreviousContentNode(null);
+      setPreviousContentDimensions(null);
+      capturedNodeRef.current = null;
+    }, controller.signal);
+  });
   const lastHandledTriggerRef = React.useRef(null);
   useIsoLayoutEffect(() => {
     if (!open || !mounted) {
@@ -80,19 +98,33 @@ export function usePopupViewport(parameters) {
       // so we can pass it to the style hook for animation purposes.
       const offset = calculateRelativePosition(previousActiveTrigger, activeTrigger);
       setNewTriggerOffset(offset);
-      cleanupFrame.request(() => {
-        ReactDOM.flushSync(() => {
-          setShowStartingStyleAttribute(false);
-        });
-        onAnimationsFinished(() => {
-          setPreviousContentNode(null);
-          setPreviousContentDimensions(null);
-          capturedNodeRef.current = null;
-        });
-      });
       lastHandledTriggerRef.current = activeTrigger;
     }
-  }, [activeTrigger, previousActiveTrigger, previousContentNode, onAnimationsFinished, cleanupFrame]);
+  }, [activeTrigger, previousActiveTrigger]);
+
+  // Arm cleanup after a trigger change, and re-arm it if the current container remounts
+  // mid-transition when a lagging payload bumps `currentContentKey`. The remount discards
+  // the running entry animation (and with transition-style CSS the replacement mounts at
+  // final styles with no animation at all), so re-run the starting-style choreography —
+  // otherwise the watcher either strands or fires before the previous container's exit
+  // animation finishes.
+  useIsoLayoutEffect(() => {
+    if (previousContentNode == null) {
+      return;
+    }
+
+    // Abort the stale watcher synchronously. The remount cancels the old container's
+    // animations, and the resulting promise rejection would otherwise run the cleanup
+    // in a microtask before the re-armed watcher below is in place.
+    cleanupControllerRef.current?.abort();
+    setShowStartingStyleAttribute(true);
+    cleanupFrame.request(() => {
+      ReactDOM.flushSync(() => {
+        setShowStartingStyleAttribute(false);
+      });
+      armViewportCleanup();
+    });
+  }, [currentContentKey, previousContentNode, armViewportCleanup, cleanupFrame]);
 
   // Capture a clone of the current content DOM subtree when not transitioning.
   // We can't store previous React nodes as they may be stateful; instead we capture DOM clones for visual continuity.
@@ -129,8 +161,8 @@ export function usePopupViewport(parameters) {
         ref: previousContainerRef,
         style: {
           ...(previousContentDimensions ? {
-            [cssVars.popupWidth]: `${previousContentDimensions.width}px`,
-            [cssVars.popupHeight]: `${previousContentDimensions.height}px`
+            [CommonPopupCssVars.popupWidth]: `${previousContentDimensions.width}px`,
+            [CommonPopupCssVars.popupHeight]: `${previousContentDimensions.height}px`
           } : null),
           position: 'absolute'
         },

package/utils/usePositioner.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.usePositioner = usePositioner;
 var _popupStateMapping = require("./popupStateMapping");
 var _useRenderElement = require("../internals/useRenderElement");
-var _getDisabledMountTransitionStyles = require("./getDisabledMountTransitionStyles");
+var _getDisabledMountTransitionStyles = require("../internals/getDisabledMountTransitionStyles");
 /**
  * Renders the shared outer Positioner element used by popup components.
  * Applies the common role, hidden state, transition styles, state attributes, and optional inert styling.

package/utils/usePositioner.mjs

@@ -2,7 +2,7 @@
 
 import { popupStateMapping } from "./popupStateMapping.mjs";
 import { useRenderElement } from "../internals/useRenderElement.mjs";
-import { getDisabledMountTransitionStyles } from "./getDisabledMountTransitionStyles.mjs";
+import { getDisabledMountTransitionStyles } from "../internals/getDisabledMountTransitionStyles.mjs";
 /**
  * Renders the shared outer Positioner element used by popup components.
  * Applies the common role, hidden state, transition styles, state attributes, and optional inert styling.

package/utils/useRegisteredLabelId.d.mts

@@ -1 +1,2 @@
-export declare function useRegisteredLabelId(idProp: string | undefined, setLabelId: (id: string | undefined) => void): string | undefined;
+import type * as React from 'react';
+export declare function useRegisteredLabelId(idProp: string | undefined, setLabelId: React.Dispatch<React.SetStateAction<string | undefined>>): string | undefined;