@base-ui/react 1.6.0 → 1.7.0

package/utils/usePopupAutoResize.mjs

@@ -21,30 +21,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) {
@@ -120,6 +104,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);

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,13 @@ 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 _jsxRuntime = require("react/jsx-runtime");
+const popupViewportStateMapping = exports.popupViewportStateMapping = {
+  activationDirection: value => value ? {
+    'data-activation-direction': 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 +33,6 @@ function usePopupViewport(parameters) {
   const {
     store,
     side,
-    cssVars,
     children
   } = parameters;
   const direction = (0, _directionProvider.useDirection)();
@@ -46,14 +52,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 +76,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 +103,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 +166,8 @@ function usePopupViewport(parameters) {
         ref: previousContainerRef,
         style: {
           ...(previousContentDimensions ? {
-            [cssVars.popupWidth]: `${previousContentDimensions.width}px`,
-            [cssVars.popupHeight]: `${previousContentDimensions.height}px`
+            '--popup-width': `${previousContentDimensions.width}px`,
+            '--popup-height': `${previousContentDimensions.height}px`
           } : null),
           position: 'absolute'
         },

package/utils/usePopupViewport.mjs

@@ -11,7 +11,13 @@ 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const popupViewportStateMapping = {
+  activationDirection: value => value ? {
+    'data-activation-direction': 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 +26,6 @@ export function usePopupViewport(parameters) {
   const {
     store,
     side,
-    cssVars,
     children
   } = parameters;
   const direction = useDirection();
@@ -40,14 +45,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 +69,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 +96,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 +159,8 @@ export function usePopupViewport(parameters) {
         ref: previousContainerRef,
         style: {
           ...(previousContentDimensions ? {
-            [cssVars.popupWidth]: `${previousContentDimensions.width}px`,
-            [cssVars.popupHeight]: `${previousContentDimensions.height}px`
+            '--popup-width': `${previousContentDimensions.width}px`,
+            '--popup-height': `${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;

package/utils/useRegisteredLabelId.d.ts

@@ -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;

package/utils/useRegisteredLabelId.js

@@ -12,7 +12,7 @@ function useRegisteredLabelId(idProp, setLabelId) {
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     setLabelId(id);
     return () => {
-      setLabelId(undefined);
+      setLabelId(currentId => currentId === id ? undefined : currentId);
     };
   }, [id, setLabelId]);
   return id;

package/utils/useRegisteredLabelId.mjs

@@ -7,7 +7,7 @@ export function useRegisteredLabelId(idProp, setLabelId) {
   useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
-      setLabelId(undefined);
+      setLabelId(currentId => currentId === id ? undefined : currentId);
     };
   }, [id, setLabelId]);
   return id;