@base-ui/react 1.1.0 → 1.3.0

package/utils/scrollable.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findScrollableTouchTarget = findScrollableTouchTarget;
+exports.hasScrollableAncestor = hasScrollableAncestor;
+exports.isScrollable = isScrollable;
+var _dom = require("@floating-ui/utils/dom");
+function isScrollable(element, axis) {
+  const style = (0, _dom.getComputedStyle)(element);
+  if (axis === 'vertical') {
+    const overflowY = style.overflowY;
+    return (overflowY === 'auto' || overflowY === 'scroll') && element.scrollHeight > element.clientHeight;
+  }
+  const overflowX = style.overflowX;
+  return (overflowX === 'auto' || overflowX === 'scroll') && element.scrollWidth > element.clientWidth;
+}
+function hasScrollableAncestor(target, root, axes) {
+  let node = target;
+  while (node && node !== root) {
+    for (const axis of axes) {
+      if (isScrollable(node, axis)) {
+        return true;
+      }
+    }
+    node = node.parentElement;
+  }
+  return false;
+}
+function findScrollableTouchTarget(target, root, axis = 'vertical') {
+  let node = (0, _dom.isHTMLElement)(target) ? target : null;
+  while (node && node !== root) {
+    if (isScrollable(node, axis)) {
+      return node;
+    }
+    node = node.parentElement;
+  }
+  return isScrollable(root, axis) ? root : null;
+}

package/utils/types.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
-export type HTMLProps<T = any> = React.HTMLAttributes<T> & {
-  ref?: React.Ref<T> | undefined;
-};
+import type * as React from 'react';
+import type { BaseUIEvent, ComponentRenderFn, HTMLProps } from "../types/index.js";
+export type { HTMLProps, BaseUIEvent, ComponentRenderFn };
 export interface FloatingUIOpenChangeDetails {
   open: boolean;
   reason: string;
@@ -9,22 +8,11 @@ export interface FloatingUIOpenChangeDetails {
   nested: boolean;
   triggerElement?: Element | undefined;
 }
-export type BaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
-  preventBaseUIHandler: () => void;
-  readonly baseUIHandlerPrevented?: boolean;
-};
 type WithPreventBaseUIHandler<T> = T extends ((event: infer E) => any) ? E extends React.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
 /**
  * Adds a `preventBaseUIHandler` method to all event handlers.
  */
 export type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]> };
-/**
- * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
- *
- * @template Props Props to be spread on the rendered element.
- * @template State Component's internal state.
- */
-export type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement<unknown>;
 /**
  * Props shared by all Base UI components.
  * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
@@ -34,19 +22,19 @@ export type BaseUIComponentProps<ElementType extends React.ElementType, State, R
    * CSS class applied to the element, or a function that
    * returns a class based on the component’s state.
    */
-  className?: string | ((state: State) => string | undefined);
+  className?: string | ((state: State) => string | undefined) | undefined;
   /**
    * Allows you to replace the component’s HTML element
    * with a different tag, or compose it with another component.
    *
    * Accepts a `ReactElement` or a function that returns the element to render.
    */
-  render?: ComponentRenderFn<RenderFunctionProps, State> | React.ReactElement;
+  render?: React.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
   /**
    * Style applied to the element, or a function that
    * returns a style object based on the component’s state.
    */
-  style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined);
+  style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined;
 };
 export interface NativeButtonProps {
   /**
@@ -55,7 +43,7 @@ export interface NativeButtonProps {
    * Set to `false` if the rendered element is not a button (e.g. `<div>`).
    * @default true
    */
-  nativeButton?: boolean;
+  nativeButton?: boolean | undefined;
 }
 export interface NonNativeButtonProps {
   /**
@@ -64,7 +52,7 @@ export interface NonNativeButtonProps {
    * Set to `true` if the rendered element is a native button.
    * @default false
    */
-  nativeButton?: boolean;
+  nativeButton?: boolean | undefined;
 }
 /**
  * Simplifies the display of a type (without modifying it).
@@ -72,5 +60,4 @@ export interface NonNativeButtonProps {
  */
 export type Simplify<T> = T extends Function ? T : { [K in keyof T]: T[K] };
 export type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;
-export type Orientation = 'horizontal' | 'vertical';
-export {};
+export type Orientation = 'horizontal' | 'vertical';

package/utils/useAnchorPositioning.d.ts

@@ -19,56 +19,71 @@ export type OffsetFunction = (data: {
 interface SideFlipMode {
   /**
    * How to avoid collisions on the side axis.
+   * - `'flip'`: If there is not enough space, place the popup on the opposite side.
+   * - `'none'`: Keep the preferred side even if it overflows.
    */
-  side?: 'flip' | 'none';
+  side?: 'flip' | 'none' | undefined;
   /**
    * How to avoid collisions on the align axis.
+   * - `'flip'`: If there is not enough space, swap `'start'` and `'end'` alignment.
+   * - `'shift'`: Keep the alignment and shift the popup to fit within the boundary.
+   * - `'none'`: Keep the preferred alignment even if it overflows.
    */
-  align?: 'flip' | 'shift' | 'none';
+  align?: 'flip' | 'shift' | 'none' | undefined;
   /**
    * If both sides on the preferred axis do not fit, determines whether to fallback
    * to a side on the perpendicular axis and which logical side to prefer.
+   * - `'start'`: Prefer the logical start side on the perpendicular axis.
+   * - `'end'`: Prefer the logical end side on the perpendicular axis.
+   * - `'none'`: Do not fallback to the perpendicular axis.
    */
-  fallbackAxisSide?: 'start' | 'end' | 'none';
+  fallbackAxisSide?: 'start' | 'end' | 'none' | undefined;
 }
 interface SideShiftMode {
   /**
    * How to avoid collisions on the side axis.
+   * - `'shift'`: Keep the preferred side and shift the popup to fit within the boundary.
+   * - `'none'`: Keep the preferred side even if it overflows.
    */
-  side?: 'shift' | 'none';
+  side?: 'shift' | 'none' | undefined;
   /**
    * How to avoid collisions on the align axis.
+   * - `'shift'`: Keep the alignment and shift the popup to fit within the boundary.
+   * - `'none'`: Keep the preferred alignment even if it overflows.
    */
-  align?: 'shift' | 'none';
+  align?: 'shift' | 'none' | undefined;
   /**
    * If both sides on the preferred axis do not fit, determines whether to fallback
    * to a side on the perpendicular axis and which logical side to prefer.
+   * - `'start'`: Prefer the logical start side on the perpendicular axis.
+   * - `'end'`: Prefer the logical end side on the perpendicular axis.
+   * - `'none'`: Do not fallback to the perpendicular axis.
    */
-  fallbackAxisSide?: 'start' | 'end' | 'none';
+  fallbackAxisSide?: 'start' | 'end' | 'none' | undefined;
 }
 export type CollisionAvoidance = SideFlipMode | SideShiftMode;
 /**
  * Provides standardized anchor positioning behavior for floating elements. Wraps Floating UI's
  * `useFloating` hook.
  */
-export declare function useAnchorPositioning(params: useAnchorPositioning.Parameters): useAnchorPositioning.ReturnValue;
+export declare function useAnchorPositioning(params: UseAnchorPositioningParameters): UseAnchorPositioningReturnValue;
 export interface UseAnchorPositioningSharedParameters {
   /**
    * An element to position the popup against.
    * By default, the popup will be positioned against the trigger.
    */
-  anchor?: Element | null | VirtualElement | React.RefObject<Element | null> | (() => Element | VirtualElement | null);
+  anchor?: Element | null | VirtualElement | React.RefObject<Element | null> | (() => Element | VirtualElement | null) | undefined;
   /**
    * Determines which CSS `position` property to use.
    * @default 'absolute'
    */
-  positionMethod?: 'absolute' | 'fixed';
+  positionMethod?: 'absolute' | 'fixed' | undefined;
   /**
    * Which side of the anchor element to align the popup against.
    * May automatically change to avoid collisions.
    * @default 'bottom'
    */
-  side?: Side;
+  side?: Side | undefined;
   /**
    * Distance between the anchor and the popup in pixels.
    * Also accepts a function that returns the distance to read the dimensions of the anchor
@@ -93,12 +108,12 @@ export interface UseAnchorPositioningSharedParameters {
    *
    * @default 0
    */
-  sideOffset?: number | OffsetFunction;
+  sideOffset?: number | OffsetFunction | undefined;
   /**
    * How to align the popup relative to the specified side.
    * @default 'center'
    */
-  align?: Align;
+  align?: Align | undefined;
   /**
    * Additional offset along the alignment axis in pixels.
    * Also accepts a function that returns the offset to read the dimensions of the anchor
@@ -123,38 +138,62 @@ export interface UseAnchorPositioningSharedParameters {
    *
    * @default 0
    */
-  alignOffset?: number | OffsetFunction;
+  alignOffset?: number | OffsetFunction | undefined;
   /**
    * An element or a rectangle that delimits the area that the popup is confined to.
    * @default 'clipping-ancestors'
    */
-  collisionBoundary?: Boundary;
+  collisionBoundary?: Boundary | undefined;
   /**
    * Additional space to maintain from the edge of the collision boundary.
    * @default 5
    */
-  collisionPadding?: Padding;
+  collisionPadding?: Padding | undefined;
   /**
    * Whether to maintain the popup in the viewport after
    * the anchor element was scrolled out of view.
    * @default false
    */
-  sticky?: boolean;
+  sticky?: boolean | undefined;
   /**
    * Minimum distance to maintain between the arrow and the edges of the popup.
    *
    * Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
    * @default 5
    */
-  arrowPadding?: number;
+  arrowPadding?: number | undefined;
   /**
    * Whether to disable the popup from tracking any layout shift of its positioning anchor.
    * @default false
    */
-  disableAnchorTracking?: boolean;
+  disableAnchorTracking?: boolean | undefined;
   /**
    * Determines how to handle collisions when positioning the popup.
    *
+   * `side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):
+   * - `'flip'`: keep the requested side when it fits; otherwise try the opposite side
+   *   (`top` and `bottom`, or `left` and `right`).
+   * - `'shift'`: never change side; keep the requested side and move the popup within
+   *   the clipping boundary so it stays visible.
+   * - `'none'`: do not correct side-axis overflow.
+   *
+   * `align` controls overflow on the alignment axis (`start`/`center`/`end`):
+   * - `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.
+   * - `'shift'`: keep side and requested alignment, then nudge the popup along the
+   *   alignment axis to fit.
+   * - `'none'`: do not correct alignment-axis overflow.
+   *
+   * `fallbackAxisSide` controls fallback behavior on the perpendicular axis when the
+   * preferred axis cannot fit:
+   * - `'start'`: allow perpendicular fallback and try the logical start side first
+   *   (`top` before `bottom`, or `left` before `right` in LTR).
+   * - `'end'`: allow perpendicular fallback and try the logical end side first
+   *   (`bottom` before `top`, or `right` before `left` in LTR).
+   * - `'none'`: do not fallback to the perpendicular axis.
+   *
+   * When `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.
+   * If `align` is omitted, it defaults to `'flip'`.
+   *
    * @example
    * ```jsx
    * <Positioner
@@ -167,20 +206,20 @@ export interface UseAnchorPositioningSharedParameters {
    * ```
    *
    */
-  collisionAvoidance?: CollisionAvoidance;
+  collisionAvoidance?: CollisionAvoidance | undefined;
 }
-export interface UseAnchorPositioningParameters extends useAnchorPositioning.SharedParameters {
-  keepMounted?: boolean;
-  trackCursorAxis?: 'none' | 'x' | 'y' | 'both';
-  floatingRootContext?: FloatingRootContext;
+export interface UseAnchorPositioningParameters extends UseAnchorPositioningSharedParameters {
+  keepMounted?: boolean | undefined;
+  trackCursorAxis?: 'none' | 'x' | 'y' | 'both' | undefined;
+  floatingRootContext?: FloatingRootContext | undefined;
   mounted: boolean;
   disableAnchorTracking: boolean;
-  nodeId?: string;
-  adaptiveOrigin?: Middleware;
+  nodeId?: string | undefined;
+  adaptiveOrigin?: Middleware | undefined;
   collisionAvoidance: CollisionAvoidance;
-  shiftCrossAxis?: boolean;
-  lazyFlip?: boolean;
-  externalTree?: FloatingTreeStore;
+  shiftCrossAxis?: boolean | undefined;
+  lazyFlip?: boolean | undefined;
+  externalTree?: FloatingTreeStore | undefined;
 }
 export interface UseAnchorPositioningReturnValue {
   positionerStyles: React.CSSProperties;
@@ -196,9 +235,5 @@ export interface UseAnchorPositioningReturnValue {
   isPositioned: boolean;
   update: () => void;
 }
-export declare namespace useAnchorPositioning {
-  type SharedParameters = UseAnchorPositioningSharedParameters;
-  type Parameters = UseAnchorPositioningParameters;
-  type ReturnValue = UseAnchorPositioningReturnValue;
-}
+export interface UseAnchorPositioningState {}
 export {};

package/utils/useAnchorPositioning.js

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

package/utils/useFocusableWhenDisabled.d.ts

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

package/utils/useMixedToggleClickHandler.d.ts

@@ -3,13 +3,13 @@
  * For example, a button that opens a popup on mousedown and closes it on click.
  * This hook prevents the popup from closing immediately after the mouse button is released.
  */
-export declare function useMixedToggleClickHandler(params: useMixedToggleClickHandler.Parameters): Readonly<{}>;
+export declare function useMixedToggleClickHandler(params: UseMixedToggleClickHandlerParameters): Readonly<{}>;
 export interface UseMixedToggleClickHandlerParameters {
   /**
    * Whether the mixed toggle click handler is enabled.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * Determines what action is performed on mousedown.
    */
@@ -19,6 +19,4 @@ export interface UseMixedToggleClickHandlerParameters {
    */
   open: boolean;
 }
-export declare namespace useMixedToggleClickHandler {
-  type Parameters = UseMixedToggleClickHandlerParameters;
-}
+export interface UseMixedToggleClickHandlerState {}

package/utils/useMixedToggleClickHandler.js

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

package/utils/useOpenChangeComplete.d.ts

@@ -2,17 +2,17 @@ import * as React from 'react';
 /**
  * Calls the provided function when the CSS open/close animation or transition completes.
  */
-export declare function useOpenChangeComplete(parameters: useOpenChangeComplete.Parameters): void;
+export declare function useOpenChangeComplete(parameters: UseOpenChangeCompleteParameters): void;
 export interface UseOpenChangeCompleteParameters {
   /**
    * Whether the hook is enabled.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * Whether the element is open.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Ref to the element being closed.
    */
@@ -22,6 +22,4 @@ export interface UseOpenChangeCompleteParameters {
    */
   onComplete: () => void;
 }
-export declare namespace useOpenChangeComplete {
-  type Parameters = UseOpenChangeCompleteParameters;
-}
+export interface UseOpenChangeCompleteState {}

package/utils/useOpenInteractionType.d.ts

@@ -7,7 +7,6 @@ import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
  */
 export declare function useOpenInteractionType(open: boolean): {
   openMethod: InteractionType | null;
-  reset: () => void;
   triggerProps: {
     onClick: (event: React.MouseEvent | React.PointerEvent) => void;
     onPointerDown: (event: React.PointerEvent) => void;

package/utils/useOpenInteractionType.js

@@ -10,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useEnhancedClickHandler = require("@base-ui/utils/useEnhancedClickHandler");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
+var _useValueChanged = require("./useValueChanged");
 /**
  * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
  *
@@ -26,19 +27,20 @@ function useOpenInteractionType(open) {
       _detectBrowser.isIOS ? 'touch' : ''));
     }
   });
-  const reset = React.useCallback(() => {
-    setOpenMethod(null);
-  }, []);
+  (0, _useValueChanged.useValueChanged)(open, previousOpen => {
+    if (previousOpen && !open) {
+      setOpenMethod(null);
+    }
+  });
   const {
     onClick,
     onPointerDown
   } = (0, _useEnhancedClickHandler.useEnhancedClickHandler)(handleTriggerClick);
   return React.useMemo(() => ({
     openMethod,
-    reset,
     triggerProps: {
       onClick,
       onPointerDown
     }
-  }), [openMethod, reset, onClick, onPointerDown]);
+  }), [openMethod, onClick, onPointerDown]);
 }

package/utils/usePopupAutoResize.d.ts

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

package/utils/usePopupAutoResize.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -13,7 +14,6 @@ var _empty = require("@base-ui/utils/empty");
 var _useAnimationsFinished = require("./useAnimationsFinished");
 var _getCssDimensions = require("./getCssDimensions");
 var _constants = require("./constants");
-const supportsResizeObserver = typeof ResizeObserver !== 'undefined';
 const DEFAULT_ENABLED = () => true;
 
 /**
@@ -58,7 +58,7 @@ function usePopupAutoResize(parameters) {
   }, [side, direction]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Reset the state when the popup is closed.
-    if (!mounted || !enabled() || !supportsResizeObserver) {
+    if (!mounted || !enabled() || typeof ResizeObserver !== 'function') {
       restoreAnchoringStylesRef.current = _empty.NOOP;
       isInitialRenderRef.current = true;
       committedDimensionsRef.current = null;
@@ -137,7 +137,7 @@ function usePopupAutoResize(parameters) {
       };
     }
     setPopupCssSize(popupElement, previousDimensions);
-    restoreMeasurementOverrides();
+    restoreMeasurementOverridesIncludingScale();
     onMeasureLayoutComplete?.(previousDimensions, newDimensions);
     setPositionerCssSize(positionerElement, newDimensions);
     const abortController = new AbortController();

package/utils/usePopupViewport.d.ts

@@ -0,0 +1,58 @@
+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;
+};
+export interface PopupViewportState {
+  /**
+   * Direction from which the popup was activated, used for directional animations.
+   */
+  activationDirection: string | undefined;
+  /**
+   * Whether the viewport is currently transitioning between contents.
+   */
+  transitioning: boolean;
+}
+type PopupViewportStore = Pick<ReactStore<any, any, any>, 'useState' | 'set'>;
+export interface UsePopupViewportParameters {
+  /**
+   * Popup store instance for accessing shared popup state.
+   */
+  store: PopupViewportStore;
+  /**
+   * 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.
+   */
+  children?: React.ReactNode;
+}
+export interface UsePopupViewportResult {
+  /**
+   * The viewport children wrapped in current/previous containers as needed.
+   */
+  children: React.ReactNode;
+  /**
+   * Viewport state used for data attributes and render prop styling.
+   */
+  state: PopupViewportState;
+}
+/**
+ * Builds morphing viewport containers for popups that animate between trigger-based content.
+ * Handles previous-content snapshots, auto-resize, and state attributes for transitions.
+ */
+export declare function usePopupViewport(parameters: UsePopupViewportParameters): UsePopupViewportResult;
+export {};