@base-ui/react 1.4.1 → 1.5.0

package/esm/utils/popups/store.js

@@ -1,5 +1,6 @@
 import { createSelector } from '@base-ui/utils/store';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { FloatingRootStore } from "../../floating-ui-react/components/FloatingRootStore.js";
 import { getEmptyRootContext } from "../../floating-ui-react/utils/getEmptyRootContext.js";
 
 /**
@@ -13,6 +14,8 @@ export function createInitialPopupStoreState() {
     mounted: false,
     transitionStatus: undefined,
     floatingRootContext: getEmptyRootContext(),
+    floatingId: undefined,
+    triggerCount: 0,
     preventUnmountingOnClose: false,
     payload: undefined,
     activeTriggerId: null,
@@ -25,16 +28,45 @@ export function createInitialPopupStoreState() {
     popupProps: EMPTY_OBJECT
   };
 }
+export function createPopupFloatingRootContext(triggerElements, floatingId, nested = false) {
+  return new FloatingRootStore({
+    open: false,
+    transitionStatus: undefined,
+    floatingElement: null,
+    referenceElement: null,
+    triggerElements,
+    floatingId,
+    syncOnly: true,
+    nested,
+    onOpenChange: undefined
+  });
+}
 const activeTriggerIdSelector = createSelector(state => state.triggerIdProp ?? state.activeTriggerId);
+const openSelector = createSelector(state => state.openProp ?? state.open);
+const popupIdSelector = createSelector(state => {
+  const popupId = state.popupElement?.id ?? state.floatingId;
+  return popupId || undefined;
+});
+function triggerOwnsOpenPopup(state, triggerId) {
+  return triggerId !== undefined && openSelector(state) && activeTriggerIdSelector(state) === triggerId;
+}
+function triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) {
+  if (triggerOwnsOpenPopup(state, triggerId)) {
+    return true;
+  }
+  return triggerId !== undefined && openSelector(state) && activeTriggerIdSelector(state) == null && state.triggerCount === 1;
+}
 export const popupStoreSelectors = {
-  open: createSelector(state => state.openProp ?? state.open),
+  open: openSelector,
   mounted: createSelector(state => state.mounted),
   transitionStatus: createSelector(state => state.transitionStatus),
   floatingRootContext: createSelector(state => state.floatingRootContext),
+  triggerCount: createSelector(state => state.triggerCount),
   preventUnmountingOnClose: createSelector(state => state.preventUnmountingOnClose),
   payload: createSelector(state => state.payload),
   activeTriggerId: activeTriggerIdSelector,
   activeTriggerElement: createSelector(state => state.mounted ? state.activeTriggerElement : null),
+  popupId: popupIdSelector,
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
@@ -42,12 +74,16 @@ export const popupStoreSelectors = {
   /**
    * Whether the popup is open and was activated by a trigger with the given ID.
    */
-  isOpenedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.open),
+  isOpenedByTrigger: createSelector((state, triggerId) => triggerOwnsOpenPopup(state, triggerId)),
   /**
    * Whether the popup is mounted and was activated by a trigger with the given ID.
    */
   isMountedByTrigger: createSelector((state, triggerId) => triggerId !== undefined && activeTriggerIdSelector(state) === triggerId && state.mounted),
   triggerProps: createSelector((state, isActive) => isActive ? state.activeTriggerProps : state.inactiveTriggerProps),
+  /**
+   * Popup id for the trigger that currently owns the open popup.
+   */
+  triggerPopupId: createSelector((state, triggerId) => triggerOwnsOpenPopupOrIsOnlyTrigger(state, triggerId) ? popupIdSelector(state) : undefined),
   popupProps: createSelector(state => state.popupProps),
   popupElement: createSelector(state => state.popupElement),
   positionerElement: createSelector(state => state.positionerElement)

package/esm/utils/popups/useTriggerFocusGuards.js

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { contains, getNextTabbable, getTabbableAfterElement, getTabbableBeforeElement, isOutsideEvent } from "../../floating-ui-react/utils.js";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
@@ -21,14 +20,14 @@ import { REASONS } from "../../internals/reasons.js";
  */
 export function useTriggerFocusGuards(store, triggerElementRef) {
   const preFocusGuardRef = React.useRef(null);
-  const handlePreFocusGuardFocus = useStableCallback(event => {
+  function handlePreFocusGuardFocus(event) {
     ReactDOM.flushSync(() => {
       store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent, event.currentTarget));
     });
     const previousTabbable = getTabbableBeforeElement(preFocusGuardRef.current);
     previousTabbable?.focus();
-  });
-  const handleFocusTargetFocus = useStableCallback(event => {
+  }
+  function handleFocusTargetFocus(event) {
     const positionerElement = store.select('positionerElement');
     if (positionerElement && isOutsideEvent(event, positionerElement)) {
       store.context.beforeContentFocusGuardRef.current?.focus();
@@ -46,7 +45,7 @@ export function useTriggerFocusGuards(store, triggerElementRef) {
       }
       nextTabbable?.focus();
     }
-  });
+  }
   return {
     preFocusGuardRef,
     handlePreFocusGuardFocus,

package/esm/utils/useAnchorPositioning.d.ts

@@ -220,6 +220,11 @@ export interface UseAnchorPositioningParameters extends UseAnchorPositioningShar
   shiftCrossAxis?: boolean | undefined;
   lazyFlip?: boolean | undefined;
   externalTree?: FloatingTreeStore | undefined;
+  /**
+   * Optional middleware that can replace the measured reference rect before offsets and collision
+   * middleware run. Used by Preview Card to position against a specific inline line box.
+   */
+  inline?: Middleware | undefined;
 }
 export interface UseAnchorPositioningReturnValue {
   positionerStyles: React.CSSProperties;

package/esm/utils/useAnchorPositioning.js

@@ -59,6 +59,7 @@ export function useAnchorPositioning(params) {
     sticky = false,
     arrowPadding = 5,
     disableAnchorTracking = false,
+    inline: inlineMiddleware,
     // Private parameters
     keepMounted = false,
     floatingRootContext,
@@ -133,7 +134,11 @@ export function useAnchorPositioning(params) {
   const alignOffsetRef = useValueAsRef(alignOffset);
   const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0;
   const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0;
-  const middleware = [offset(state => {
+  const middleware = [];
+  if (inlineMiddleware) {
+    middleware.push(inlineMiddleware);
+  }
+  middleware.push(offset(state => {
     const data = getOffsetData(state, sideParam, isRtl);
     const sideAxis = typeof sideOffsetRef.current === 'function' ? sideOffsetRef.current(data) : sideOffsetRef.current;
     const alignAxis = typeof alignOffsetRef.current === 'function' ? alignOffsetRef.current(data) : alignOffsetRef.current;
@@ -142,7 +147,7 @@ export function useAnchorPositioning(params) {
       crossAxis: alignAxis,
       alignmentAxis: alignAxis
     };
-  }, [sideOffsetDep, alignOffsetDep, isRtl, sideParam])];
+  }, [sideOffsetDep, alignOffsetDep, isRtl, sideParam]));
   const shiftDisabled = collisionAvoidanceAlign === 'none' && collisionAvoidanceSide !== 'shift';
   const crossAxisShiftEnabled = !shiftDisabled && (sticky || shiftCrossAxis || collisionAvoidanceSide === 'shift');
   const flipMiddleware = collisionAvoidanceSide === 'none' ? null : flip({
@@ -227,10 +232,10 @@ export function useAnchorPositioning(params) {
       floatingStyle.setProperty('--anchor-width', `${anchorWidth}px`);
       floatingStyle.setProperty('--anchor-height', `${anchorHeight}px`);
     }
-  }), arrow(() => ({
+  }), arrow(state => ({
     // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
     // we'll create a fake element.
-    element: arrowRef.current || ownerDocument(arrowRef.current).createElement('div'),
+    element: arrowRef.current || ownerDocument(state.elements.floating).createElement('div'),
     padding: arrowPadding,
     offsetParent: 'floating'
   }), [arrowPadding]), {
@@ -367,11 +372,9 @@ export function useAnchorPositioning(params) {
   const renderedAlign = getAlignment(renderedPlacement) || 'center';
   const anchorHidden = Boolean(middlewareData.hide?.referenceHidden);
 
-  /**
-   * Locks the flip (makes it "sticky") so it doesn't prefer a given placement
-   * and flips back lazily, not eagerly. Ideal for filtered lists that change
-   * the size of the popup dynamically to avoid unwanted flipping when typing.
-   */
+  // Locks the flip (makes it "sticky") so it doesn't prefer a given placement
+  // and flips back lazily, not eagerly. Ideal for filtered lists that change
+  // the size of the popup dynamically to avoid unwanted flipping when typing.
   useIsoLayoutEffect(() => {
     if (lazyFlip && mounted && isPositioned) {
       setMountSide(renderedSide);

package/esm/utils/useOpenInteractionType.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
+export declare function useOpenMethodTriggerProps(open: boolean | (() => boolean), setOpenMethod: (interactionType: InteractionType | null) => void): {
+  onClick: (event: React.MouseEvent | React.PointerEvent) => void;
+  onPointerDown: (event: React.PointerEvent) => void;
+};
 /**
  * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
  *

package/esm/utils/useOpenInteractionType.js

@@ -5,16 +5,10 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useEnhancedClickHandler } from '@base-ui/utils/useEnhancedClickHandler';
 import { isIOS } from '@base-ui/utils/detectBrowser';
 import { useValueChanged } from "../internals/useValueChanged.js";
-
-/**
- * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
- *
- * @param open The open state of the component.
- */
-export function useOpenInteractionType(open) {
-  const [openMethod, setOpenMethod] = React.useState(null);
+export function useOpenMethodTriggerProps(open, setOpenMethod) {
   const handleTriggerClick = useStableCallback((_, interactionType) => {
-    if (!open) {
+    const isOpen = typeof open === 'function' ? open() : open;
+    if (!isOpen) {
       setOpenMethod(interactionType || (
       // On iOS Safari, the hitslop around touch targets means tapping outside an element's
       // bounds does not fire `pointerdown` but does fire `mousedown`. The `interactionType`
@@ -22,20 +16,31 @@ export function useOpenInteractionType(open) {
       isIOS ? 'touch' : ''));
     }
   });
+  const {
+    onClick,
+    onPointerDown
+  } = useEnhancedClickHandler(handleTriggerClick);
+  return React.useMemo(() => ({
+    onClick,
+    onPointerDown
+  }), [onClick, onPointerDown]);
+}
+
+/**
+ * Determines the interaction type (keyboard, mouse, touch, etc.) that opened the component.
+ *
+ * @param open The open state of the component.
+ */
+export function useOpenInteractionType(open) {
+  const [openMethod, setOpenMethod] = React.useState(null);
+  const triggerProps = useOpenMethodTriggerProps(open, setOpenMethod);
   useValueChanged(open, previousOpen => {
     if (previousOpen && !open) {
       setOpenMethod(null);
     }
   });
-  const {
-    onClick,
-    onPointerDown
-  } = useEnhancedClickHandler(handleTriggerClick);
   return React.useMemo(() => ({
     openMethod,
-    triggerProps: {
-      onClick,
-      onPointerDown
-    }
-  }), [openMethod, onClick, onPointerDown]);
+    triggerProps
+  }), [openMethod, triggerProps]);
 }

package/field/control/FieldControl.js

@@ -90,12 +90,8 @@ const FieldControl = exports.FieldControl = /*#__PURE__*/React.forwardRef(functi
   });
   const isControlled = valueProp !== undefined;
   const value = isControlled ? valueUnwrapped : undefined;
-  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => validation.inputRef.current?.value);
-  (0, _useRegisterFieldControl.useRegisterFieldControl)(validation.inputRef, {
-    id,
-    value,
-    getValue: getFieldValue
-  });
+  const getValueFromInput = (0, _useStableCallback.useStableCallback)(() => validation.inputRef.current?.value);
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(validation.inputRef, id, value, getValueFromInput);
   const element = (0, _useRenderElement.useRenderElement)('input', componentProps, {
     ref: [forwardedRef, inputRef],
     state,

package/field/item/FieldItem.js

@@ -34,11 +34,8 @@ const FieldItem = exports.FieldItem = /*#__PURE__*/React.forwardRef(function Fie
   } = (0, _FieldRootContext.useFieldRootContext)(false);
   const disabled = rootDisabled || disabledProp;
   const checkboxGroupContext = (0, _CheckboxGroupContext.useCheckboxGroupContext)();
-  // checkboxGroupContext.parent is truthy even if no parent checkbox is involved
-  const parentId = checkboxGroupContext?.parent.id;
-  // this a more reliable check
   const hasParentCheckbox = checkboxGroupContext?.allValues !== undefined;
-  const controlId = hasParentCheckbox ? parentId : undefined;
+  const controlId = hasParentCheckbox ? checkboxGroupContext?.parent.id : undefined;
   const fieldItemContext = React.useMemo(() => ({
     disabled
   }), [disabled]);

package/field/root/FieldRoot.js

@@ -52,6 +52,11 @@ var _jsxRuntime = require("react/jsx-runtime");
   const dirty = dirtyProp ?? dirtyState;
   const touched = touchedProp ?? touchedState;
   const markedDirtyRef = React.useRef(false);
+  const registeredFieldIdRef = React.useRef(undefined);
+  const getRegisteredFieldId = React.useCallback(() => registeredFieldIdRef.current, []);
+  const setRegisteredFieldId = React.useCallback(id => {
+    registeredFieldIdRef.current = id;
+  }, []);
   const setDirty = (0, _useStableCallback.useStableCallback)(value => {
     if (dirtyProp !== undefined) {
       return;
@@ -95,17 +100,20 @@ var _jsxRuntime = require("react/jsx-runtime");
     markedDirtyRef,
     state,
     name,
-    shouldValidateOnChange
+    shouldValidateOnChange,
+    getRegisteredFieldId
   });
+  const validityValue = validityData.value;
   const handleImperativeValidate = React.useCallback(() => {
     markedDirtyRef.current = true;
-    validation.commit(validityData.value);
-  }, [validation, validityData]);
+    validation.commit(validityValue);
+  }, [validation, validityValue]);
   const registerFieldControl = (0, _useFieldControlRegistration.useFieldControlRegistration)({
     commit: validation.commit,
     invalid,
     markedDirtyRef,
     name,
+    setRegisteredFieldId,
     setValidityData,
     validityData
   });

package/field/root/useFieldValidation.d.ts

@@ -13,6 +13,7 @@ export interface UseFieldValidationParameters {
   state: FieldRootState;
   name: string | undefined;
   shouldValidateOnChange: () => boolean;
+  getRegisteredFieldId: () => string | undefined;
 }
 export interface UseFieldValidationReturnValue {
   getValidationProps: (props?: HTMLProps) => HTMLProps;

package/field/root/useFieldValidation.js

@@ -48,7 +48,8 @@ function useFieldValidation(params) {
     markedDirtyRef,
     state,
     name,
-    shouldValidateOnChange
+    shouldValidateOnChange,
+    getRegisteredFieldId
   } = params;
   const {
     controlId,
@@ -61,6 +62,21 @@ function useFieldValidation(params) {
     if (!element) {
       return;
     }
+    function updateRegisteredFieldValidity(nextValidityData, externalInvalid = invalid) {
+      const fieldId = getRegisteredFieldId() ?? controlId;
+      if (fieldId == null) {
+        return;
+      }
+      const currentFieldData = formRef.current.fields.get(fieldId);
+      if (!currentFieldData) {
+        return;
+      }
+      const validityDataWithFormErrors = (0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(nextValidityData, externalInvalid);
+      formRef.current.fields.set(fieldId, {
+        ...currentFieldData,
+        validityData: validityDataWithFormErrors
+      });
+    }
     if (revalidate) {
       if (state.valid !== false) {
         return;
@@ -81,15 +97,9 @@ function useFieldValidation(params) {
           initialValue: validityData.initialValue
         };
         element.setCustomValidity('');
-        if (controlId) {
-          const currentFieldData = formRef.current.fields.get(controlId);
-          if (currentFieldData) {
-            formRef.current.fields.set(controlId, {
-              ...currentFieldData,
-              ...(0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(nextValidityData, false) // invalid = false
-            });
-          }
-        }
+
+        // The required value is now present; ignore stale external invalid state for this pass.
+        updateRegisteredFieldValidity(nextValidityData, false);
         setValidityData(nextValidityData);
         return;
       }
@@ -192,16 +202,9 @@ function useFieldValidation(params) {
       errors: validationErrors,
       initialValue: validityData.initialValue
     };
-    if (controlId) {
-      const currentFieldData = formRef.current.fields.get(controlId);
-      if (currentFieldData) {
-        formRef.current.fields.set(controlId, {
-          ...currentFieldData,
-          // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
-          ...(0, _getCombinedFieldValidityData.getCombinedFieldValidityData)(nextValidityData, invalid)
-        });
-      }
-    }
+
+    // Keep Form-level errors part of overall field validity for submit blocking/focus logic.
+    updateRegisteredFieldValidity(nextValidityData);
     setValidityData(nextValidityData);
   });
   const getValidationProps = React.useCallback((externalProps = {}) => (0, _mergeProps.mergeProps)(getDescriptionProps, state.valid === false ? {

package/field/utils/getCombinedFieldValidityData.d.ts

@@ -1,4 +1,4 @@
-import { FieldValidityData } from "../root/FieldRoot.js";
+import type { FieldValidityData } from "../root/FieldRoot.js";
 /**
  * Combines the field's client-side, stateful validity data with the external invalid state to
  * determine the field's true validity.

package/field/validity/FieldValidity.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FieldValidityData } from "../root/FieldRoot.js";
+import type { FieldValidityData } from "../root/FieldRoot.js";
 import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * Used to display a custom message based on the field's validity.

package/floating-ui-react/components/FloatingDelayGroup.js

@@ -75,11 +75,11 @@ function FloatingDelayGroup(props) {
 function useDelayGroup(context, options = {
   open: false
 }) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const floatingId = store.useState('floatingId');
   const {
     open
   } = options;
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const floatingId = store.useState('floatingId');
   const groupContext = React.useContext(FloatingDelayGroupContext);
   const {
     currentIdRef,
@@ -148,7 +148,7 @@ function useDelayGroup(context, options = {
       setIsInstantPhase(false);
       prevContext?.setIsInstantPhase(false);
     }
-  }, [open, floatingId, store, currentIdRef, delayRef, timeoutMs, initialDelayRef, currentContextRef, timeout]);
+  }, [open, floatingId, store, currentIdRef, delayRef, initialDelayRef, currentContextRef, timeout]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     return () => {
       currentContextRef.current = null;

package/floating-ui-react/components/FloatingFocusManager.d.ts

@@ -83,7 +83,7 @@ export interface FloatingFocusManagerProps {
    */
   beforeContentFocusGuardRef?: React.RefObject<HTMLSpanElement | null> | undefined;
   /**
-   * External FlatingTree to use when the one provided by context can't be used.
+   * External FloatingTree to use when the one provided by context can't be used.
    */
   externalTree?: FloatingTreeStore | undefined;
   /**

package/floating-ui-react/components/FloatingFocusManager.js

@@ -186,7 +186,7 @@ function FloatingFocusManager(props) {
     }
     const doc = (0, _owner.ownerDocument)(floatingFocusElement);
     return (0, _addEventListener.addEventListener)(doc, 'keydown', onKeyDown);
-  }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent]);
+  }, [disabled, floatingFocusElement, modal, isUntrappedTypeableCombobox, getTabbableContent]);
 
   // Track pointer/keyboard interactions to disambiguate focus and outside presses.
   React.useEffect(() => {
@@ -335,7 +335,7 @@ function FloatingFocusManager(props) {
       markerCleanup();
       ariaHiddenCleanup();
     };
-  }, [open, disabled, domReference, floating, modal, orderRef, portalContext, isUntrappedTypeableCombobox, tree, getNodeId, nextFocusableElement, previousFocusableElement, getResolvedInsideElements]);
+  }, [open, disabled, domReference, floating, modal, portalContext, isUntrappedTypeableCombobox, tree, getNodeId, nextFocusableElement, previousFocusableElement, getResolvedInsideElements]);
 
   // Focus the initial element when the floating element opens.
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
@@ -372,11 +372,20 @@ function FloatingFocusManager(props) {
         elToFocus = (0, _resolveRef.resolveRef)(resolvedInitialFocus);
       }
       elToFocus = elToFocus || getDefaultFocusElement();
+      const hadFocusInside = (0, _element.contains)(floatingFocusElement, (0, _element.activeElement)(doc));
       (0, _enqueueFocus.enqueueFocus)(elToFocus, {
-        preventScroll: elToFocus === floatingFocusElement
+        preventScroll: elToFocus === floatingFocusElement,
+        shouldFocus() {
+          if (hadFocusInside) {
+            return true;
+          }
+          const currentActiveElement = (0, _element.activeElement)(doc);
+          const focusMovedInside = currentActiveElement !== elToFocus && (0, _element.contains)(floatingFocusElement, currentActiveElement);
+          return !focusMovedInside;
+        }
       });
     });
-  }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableContent, initialFocusRef, openInteractionTypeRef]);
+  }, [disabled, open, floatingFocusElement, getTabbableContent, initialFocusRef, openInteractionTypeRef]);
 
   // Track return focus targets and restore focus on unmount/close.
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
@@ -431,10 +440,12 @@ function FloatingFocusManager(props) {
         resolvedReturnFocusValue = true;
       }
       if (typeof resolvedReturnFocusValue === 'boolean') {
-        const el = domReference || getPreviouslyFocusedElement();
-        return el && el.isConnected ? el : null;
+        if (domReference?.isConnected) {
+          return domReference;
+        }
+        return getPreviouslyFocusedElement() || null;
       }
-      const fallback = domReference || getPreviouslyFocusedElement();
+      const fallback = domReference?.isConnected ? domReference : getPreviouslyFocusedElement();
       return (0, _resolveRef.resolveRef)(resolvedReturnFocusValue) || fallback || null;
     }
     return () => {
@@ -462,7 +473,7 @@ function FloatingFocusManager(props) {
         preventReturnFocusRef.current = false;
       });
     };
-  }, [disabled, floating, floatingFocusElement, returnFocusRef, dataRef, events, tree, domReference, getNodeId, getResolvedInsideElements]);
+  }, [disabled, floating, floatingFocusElement, returnFocusRef, events, tree, domReference, getNodeId, getResolvedInsideElements]);
 
   // Safari may randomly scroll to the bottom of the page if an input inside a popup has focus
   // when the popup unmounts from the DOM.
@@ -479,6 +490,7 @@ function FloatingFocusManager(props) {
       activeEl.blur();
     }
   }, [open, floating]);
+
   // Synchronize the `context` & `modal` value to the FloatingPortal context.
   // It will decide whether or not it needs to render its own guards.
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {

package/floating-ui-react/components/FloatingPortal.js

@@ -109,12 +109,12 @@ function useFloatingPortalNode(props = {}) {
  */
 const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPortal(componentProps, forwardedRef) {
   const {
+    render,
+    className,
+    style,
     children,
     container,
-    className,
-    render,
     renderGuards,
-    style,
     ...elementProps
   } = componentProps;
   const {