@base-ui/react 1.6.0 → 1.7.0

package/internals/stateAttributesMapping.mjs

@@ -1,6 +1,6 @@
 export let TransitionStatusDataAttributes = /*#__PURE__*/function (TransitionStatusDataAttributes) {
   /**
-   * Present when the component is animating in.
+   * Present when the component begins animating in.
    */
   TransitionStatusDataAttributes["startingStyle"] = "data-starting-style";
   /**
@@ -10,10 +10,10 @@ export let TransitionStatusDataAttributes = /*#__PURE__*/function (TransitionSta
   return TransitionStatusDataAttributes;
 }({});
 const STARTING_HOOK = {
-  [TransitionStatusDataAttributes.startingStyle]: ''
+  'data-starting-style': ''
 };
 const ENDING_HOOK = {
-  [TransitionStatusDataAttributes.endingStyle]: ''
+  'data-ending-style': ''
 };
 export const transitionStatusMapping = {
   transitionStatus(value) {

package/internals/use-button/useButton.js

@@ -15,6 +15,7 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _mergeProps = require("../../merge-props");
 var _CompositeRootContext = require("../composite/root/CompositeRootContext");
 var _useFocusableWhenDisabled = require("../../utils/useFocusableWhenDisabled");
+var _dispatchClickWithModifiers = require("../../utils/dispatchClickWithModifiers");
 function useButton(parameters = {}) {
   const {
     disabled = false,
@@ -115,24 +116,34 @@ function useButton(parameters = {}) {
             return;
           }
           event.preventDefault();
-          if (isLink || isNativeButton && isButton) {
-            currentTarget.click();
-            event.preventBaseUIHandler();
-          } else if (shouldClick) {
-            externalOnClick?.(event);
+
+          // Only a native-mode item that isn't a real <button> is excluded.
+          if (!isNativeButton || isButton) {
             event.preventBaseUIHandler();
+            (0, _dispatchClickWithModifiers.dispatchClickWithModifiers)(currentTarget, event);
           }
           return;
         }
 
         // Keyboard accessibility for native and non-native elements.
-        if (shouldClick) {
-          if (!isNativeButton && (isSpaceKey || isEnterKey)) {
+        if (!shouldClick || isNativeButton || !isSpaceKey && !isEnterKey) {
+          // Space activates links on keyup (`role="button"` semantics, matching the
+          // composite path); prevent the page scroll Space would otherwise trigger.
+          // Enter is left to the browser's native link activation.
+          if (isCurrentTarget && isLink && isSpaceKey) {
             event.preventDefault();
           }
-          if (!isNativeButton && isEnterKey) {
-            externalOnClick?.(event);
-          }
+          return;
+        }
+
+        // Match native buttons: preventing the keydown's default cancels activation.
+        if (event.defaultPrevented) {
+          return;
+        }
+        event.preventDefault();
+        if (isEnterKey) {
+          event.preventBaseUIHandler();
+          (0, _dispatchClickWithModifiers.dispatchClickWithModifiers)(currentTarget, event);
         }
       },
       onKeyUp(event) {
@@ -152,9 +163,14 @@ function useButton(parameters = {}) {
           return;
         }
 
-        // Keyboard accessibility for non interactive elements
-        if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && event.key === ' ') {
-          externalOnClick?.(event);
+        // Keyboard accessibility for non interactive elements.
+        // Match native buttons: preventing the keyup's default cancels Space activation.
+        // Limitation: unlike a native <button>, a prevented *keydown* cannot cancel the
+        // activation — no state is kept between keydown and keyup, so we can't tell
+        // whether the keydown was prevented or even happened on this element.
+        if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && !event.defaultPrevented && event.key === ' ') {
+          event.preventBaseUIHandler();
+          (0, _dispatchClickWithModifiers.dispatchClickWithModifiers)(event.currentTarget, event);
         }
       },
       onPointerDown(event) {
@@ -183,5 +199,5 @@ function isButtonElement(elem) {
   return (0, _dom.isHTMLElement)(elem) && elem.tagName === 'BUTTON';
 }
 function isValidLinkElement(elem) {
-  return Boolean(elem?.tagName === 'A' && elem?.href);
+  return (0, _dom.isHTMLElement)(elem) && elem.tagName === 'A' && Boolean(elem.href);
 }

package/internals/use-button/useButton.mjs

@@ -9,6 +9,7 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { makeEventPreventable, mergeProps } from "../../merge-props/index.mjs";
 import { useCompositeRootContext } from "../composite/root/CompositeRootContext.mjs";
 import { useFocusableWhenDisabled } from "../../utils/useFocusableWhenDisabled.mjs";
+import { dispatchClickWithModifiers } from "../../utils/dispatchClickWithModifiers.mjs";
 export function useButton(parameters = {}) {
   const {
     disabled = false,
@@ -109,24 +110,34 @@ export function useButton(parameters = {}) {
             return;
           }
           event.preventDefault();
-          if (isLink || isNativeButton && isButton) {
-            currentTarget.click();
-            event.preventBaseUIHandler();
-          } else if (shouldClick) {
-            externalOnClick?.(event);
+
+          // Only a native-mode item that isn't a real <button> is excluded.
+          if (!isNativeButton || isButton) {
             event.preventBaseUIHandler();
+            dispatchClickWithModifiers(currentTarget, event);
           }
           return;
         }
 
         // Keyboard accessibility for native and non-native elements.
-        if (shouldClick) {
-          if (!isNativeButton && (isSpaceKey || isEnterKey)) {
+        if (!shouldClick || isNativeButton || !isSpaceKey && !isEnterKey) {
+          // Space activates links on keyup (`role="button"` semantics, matching the
+          // composite path); prevent the page scroll Space would otherwise trigger.
+          // Enter is left to the browser's native link activation.
+          if (isCurrentTarget && isLink && isSpaceKey) {
             event.preventDefault();
           }
-          if (!isNativeButton && isEnterKey) {
-            externalOnClick?.(event);
-          }
+          return;
+        }
+
+        // Match native buttons: preventing the keydown's default cancels activation.
+        if (event.defaultPrevented) {
+          return;
+        }
+        event.preventDefault();
+        if (isEnterKey) {
+          event.preventBaseUIHandler();
+          dispatchClickWithModifiers(currentTarget, event);
         }
       },
       onKeyUp(event) {
@@ -146,9 +157,14 @@ export function useButton(parameters = {}) {
           return;
         }
 
-        // Keyboard accessibility for non interactive elements
-        if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && event.key === ' ') {
-          externalOnClick?.(event);
+        // Keyboard accessibility for non interactive elements.
+        // Match native buttons: preventing the keyup's default cancels Space activation.
+        // Limitation: unlike a native <button>, a prevented *keydown* cannot cancel the
+        // activation — no state is kept between keydown and keyup, so we can't tell
+        // whether the keydown was prevented or even happened on this element.
+        if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && !event.defaultPrevented && event.key === ' ') {
+          event.preventBaseUIHandler();
+          dispatchClickWithModifiers(event.currentTarget, event);
         }
       },
       onPointerDown(event) {
@@ -177,5 +193,5 @@ function isButtonElement(elem) {
   return isHTMLElement(elem) && elem.tagName === 'BUTTON';
 }
 function isValidLinkElement(elem) {
-  return Boolean(elem?.tagName === 'A' && elem?.href);
+  return isHTMLElement(elem) && elem.tagName === 'A' && Boolean(elem.href);
 }

package/{utils → internals}/useAnchorPositioning.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type Rect } from '@floating-ui/utils';
-import { useFloating, type FloatingRootContext, type VirtualElement, type Padding, type FloatingContext, type Side as PhysicalSide, type Middleware, type FloatingTreeStore } from "../floating-ui-react/index.mjs";
+import { type UseFloatingOptions, type UseFloatingReturn, type FloatingRootContext, type VirtualElement, type Padding, type FloatingContext, type Side as PhysicalSide, type Middleware, type FloatingTreeStore } from "../floating-ui-react/index.mjs";
 export type Side = 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
 export type Align = 'start' | 'center' | 'end';
 export type Boundary = 'clipping-ancestors' | Element | Element[] | Rect;
@@ -62,11 +62,15 @@ interface SideShiftMode {
   fallbackAxisSide?: 'start' | 'end' | 'none' | undefined;
 }
 export type CollisionAvoidance = SideFlipMode | SideShiftMode;
+type UseFloatingHook = (options: UseFloatingOptions) => UseFloatingReturn;
 /**
  * Provides standardized anchor positioning behavior for floating elements. Wraps Floating UI's
  * `useFloating` hook.
  */
-export declare function useAnchorPositioning(params: UseAnchorPositioningParameters): UseAnchorPositioningReturnValue;
+export declare function useAnchorPositioning(params: UseAnchorPositioningParameters & {
+  floatingRootContext: FloatingRootContext;
+}): UseAnchorPositioningReturnValue;
+export declare function useAnchorPositioningWithHook(params: UseAnchorPositioningParameters, useFloatingHook: UseFloatingHook): UseAnchorPositioningReturnValue;
 export interface UseAnchorPositioningSharedParameters {
   /**
    * An element to position the popup against.
@@ -216,7 +220,10 @@ export interface UseAnchorPositioningParameters extends UseAnchorPositioningShar
   nodeId?: string | undefined;
   adaptiveOrigin?: Middleware | undefined;
   collisionAvoidance: CollisionAvoidance;
-  shiftCrossAxis?: boolean | undefined;
+  shift?: {
+    crossAxis?: boolean | undefined;
+    rootBoundary?: 'layoutViewport' | undefined;
+  } | undefined;
   lazyFlip?: boolean | undefined;
   externalTree?: FloatingTreeStore | undefined;
   /**
@@ -234,7 +241,7 @@ export interface UseAnchorPositioningReturnValue {
   align: Align;
   physicalSide: PhysicalSide;
   anchorHidden: boolean;
-  refs: ReturnType<typeof useFloating>['refs'];
+  refs: UseFloatingReturn['refs'];
   context: FloatingContext;
   isPositioned: boolean;
   update: () => void;

package/{utils → internals}/useAnchorPositioning.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type Rect } from '@floating-ui/utils';
-import { useFloating, type FloatingRootContext, type VirtualElement, type Padding, type FloatingContext, type Side as PhysicalSide, type Middleware, type FloatingTreeStore } from "../floating-ui-react/index.js";
+import { type UseFloatingOptions, type UseFloatingReturn, type FloatingRootContext, type VirtualElement, type Padding, type FloatingContext, type Side as PhysicalSide, type Middleware, type FloatingTreeStore } from "../floating-ui-react/index.js";
 export type Side = 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start';
 export type Align = 'start' | 'center' | 'end';
 export type Boundary = 'clipping-ancestors' | Element | Element[] | Rect;
@@ -62,11 +62,15 @@ interface SideShiftMode {
   fallbackAxisSide?: 'start' | 'end' | 'none' | undefined;
 }
 export type CollisionAvoidance = SideFlipMode | SideShiftMode;
+type UseFloatingHook = (options: UseFloatingOptions) => UseFloatingReturn;
 /**
  * Provides standardized anchor positioning behavior for floating elements. Wraps Floating UI's
  * `useFloating` hook.
  */
-export declare function useAnchorPositioning(params: UseAnchorPositioningParameters): UseAnchorPositioningReturnValue;
+export declare function useAnchorPositioning(params: UseAnchorPositioningParameters & {
+  floatingRootContext: FloatingRootContext;
+}): UseAnchorPositioningReturnValue;
+export declare function useAnchorPositioningWithHook(params: UseAnchorPositioningParameters, useFloatingHook: UseFloatingHook): UseAnchorPositioningReturnValue;
 export interface UseAnchorPositioningSharedParameters {
   /**
    * An element to position the popup against.
@@ -216,7 +220,10 @@ export interface UseAnchorPositioningParameters extends UseAnchorPositioningShar
   nodeId?: string | undefined;
   adaptiveOrigin?: Middleware | undefined;
   collisionAvoidance: CollisionAvoidance;
-  shiftCrossAxis?: boolean | undefined;
+  shift?: {
+    crossAxis?: boolean | undefined;
+    rootBoundary?: 'layoutViewport' | undefined;
+  } | undefined;
   lazyFlip?: boolean | undefined;
   externalTree?: FloatingTreeStore | undefined;
   /**
@@ -234,7 +241,7 @@ export interface UseAnchorPositioningReturnValue {
   align: Align;
   physicalSide: PhysicalSide;
   anchorHidden: boolean;
-  refs: ReturnType<typeof useFloating>['refs'];
+  refs: UseFloatingReturn['refs'];
   context: FloatingContext;
   isPositioned: boolean;
   update: () => void;

package/{utils → internals}/useAnchorPositioning.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useAnchorPositioning = useAnchorPositioning;
+exports.useAnchorPositioningWithHook = useAnchorPositioningWithHook;
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@floating-ui/utils");
 var _owner = require("@base-ui/utils/owner");
@@ -13,10 +14,13 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _floatingUiReact = require("../floating-ui-react");
-var _DirectionContext = require("../internals/direction-context/DirectionContext");
+var _useFloating = require("../floating-ui-react/hooks/useFloating");
+var _DirectionContext = require("./direction-context/DirectionContext");
 var _arrow = require("../floating-ui-react/middleware/arrow");
-var _hideMiddleware = require("./hideMiddleware");
-var _adaptiveOriginMiddleware = require("./adaptiveOriginMiddleware");
+var _hideMiddleware = require("../utils/hideMiddleware");
+var _adaptiveOriginConstants = require("../utils/adaptiveOriginConstants");
+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';
@@ -52,6 +56,9 @@ function getOffsetData(state, sideParam, isRtl) {
  * `useFloating` hook.
  */
 function useAnchorPositioning(params) {
+  return useAnchorPositioningWithHook(params, _useFloating.useBaseUIFloating);
+}
+function useAnchorPositioningWithHook(params, useFloatingHook) {
   const {
     // Public parameters
     anchor,
@@ -71,7 +78,7 @@ function useAnchorPositioning(params) {
     floatingRootContext,
     mounted,
     collisionAvoidance,
-    shiftCrossAxis = false,
+    shift,
     nodeId,
     adaptiveOrigin,
     lazyFlip = false,
@@ -84,6 +91,8 @@ 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 = (0, _useStableCallback.useStableCallback)(anchorFn);
   const anchorDep = anchorFn ? anchorFnCallback : anchor;
@@ -101,30 +110,32 @@ 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
@@ -161,46 +172,37 @@ 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 : (0, _floatingUiReact.shift)(data => {
-    const html = (0, _owner.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 : (0, _floatingUiReact.limitShift)(limitData => {
-        if (!arrowRef.current) {
-          return {};
-        }
-        const {
-          width,
-          height
-        } = arrowRef.current.getBoundingClientRect();
-        const sideAxis = (0, _utils.getSideAxis)((0, _utils.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 : (0, _floatingUiReact.shift)({
+    ...commonCollisionProps,
+    // Use the Layout Viewport to avoid shifting around when pinch-zooming.
+    rootBoundary: shiftRootBoundary,
+    mainAxis: collisionAvoidanceAlign !== 'none',
+    crossAxis: crossAxisShiftEnabled,
+    limiter: sticky || shiftCrossAxis ? undefined : (0, _floatingUiReact.limitShift)(limitData => {
+      if (!arrowRef.current) {
+        return {};
+      }
+      const {
+        width,
+        height
+      } = arrowRef.current.getBoundingClientRect();
+      const sideAxis = (0, _utils.getSideAxis)((0, _utils.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') {
@@ -222,8 +224,8 @@ 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 = (0, _owner.ownerWindow)(floating).devicePixelRatio || 1;
@@ -305,7 +307,7 @@ function useAnchorPositioning(params) {
     context,
     isPositioned,
     floatingStyles: originalFloatingStyles
-  } = (0, _floatingUiReact.useFloating)({
+  } = useFloatingHook({
     rootContext: floatingRootContext,
     open: keepMounted ? mounted : undefined,
     placement,
@@ -318,20 +320,47 @@ function useAnchorPositioning(params) {
   const {
     sideX,
     sideY
-  } = middlewareData.adaptiveOrigin || _adaptiveOriginMiddleware.DEFAULT_SIDES;
+  } = middlewareData.adaptiveOrigin || _adaptiveOriginConstants.DEFAULT_SIDES;
 
   // 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(() => {
-    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;
     }
@@ -382,10 +411,10 @@ 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.
   (0, _useIsoLayoutEffect.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,