@base-ui/react 1.3.0 → 1.4.1

package/esm/popover/close/PopoverClose.js

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useButton } from "../../use-button/index.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useButton } from "../../internals/use-button/index.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useClosePartRegistration } from "../../utils/closePart.js";
 
 /**
@@ -20,6 +20,7 @@ export const PopoverClose = /*#__PURE__*/React.forwardRef(function PopoverClose(
     className,
     disabled = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/popover/description/PopoverDescription.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A paragraph with additional information about the popover.
  * Renders a `<p>` element.

package/esm/popover/description/PopoverDescription.js

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * A paragraph with additional information about the popover.
@@ -16,6 +16,7 @@ export const PopoverDescription = /*#__PURE__*/React.forwardRef(function Popover
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/popover/popup/PopoverPopup.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A container for the popover contents.
  * Renders a `<div>` element.

package/esm/popover/popup/PopoverPopup.js

@@ -6,11 +6,11 @@ import { FloatingFocusManager, useHoverFloatingInteraction } from "../../floatin
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
 import { usePopoverPositionerContext } from "../positioner/PopoverPositionerContext.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { REASONS } from "../../utils/reasons.js";
-import { COMPOSITE_KEYS } from "../../composite/composite.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { REASONS } from "../../internals/reasons.js";
+import { COMPOSITE_KEYS } from "../../internals/composite/composite.js";
 import { useToolbarRootContext } from "../../toolbar/root/ToolbarRootContext.js";
 import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { ClosePartProvider, useClosePartCount } from "../../utils/closePart.js";
@@ -32,6 +32,7 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
     render,
     initialFocus,
     finalFocus,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -90,6 +91,7 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
     transitionStatus
   };
   const focusManagerModal = modal !== false && hasClosePart;
+  store.useSyncedValue('focusManagerModal', focusManagerModal);
   const setPopupElement = React.useCallback(element => {
     store.set('popupElement', element);
   }, [store]);

package/esm/popover/positioner/PopoverPositioner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Positions the popover against the trigger.
  * Renders a `<div>` element.

package/esm/popover/positioner/PopoverPositioner.js

@@ -7,15 +7,14 @@ import { FloatingNode, useFloatingNodeId } from "../../floating-ui-react/index.j
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
 import { PopoverPositionerContext } from "./PopoverPositionerContext.js";
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
-import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { usePopoverPortalContext } from "../portal/PopoverPortalContext.js";
 import { InternalBackdrop } from "../../utils/InternalBackdrop.js";
-import { REASONS } from "../../utils/reasons.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
-import { useAnimationsFinished } from "../../utils/useAnimationsFinished.js";
+import { REASONS } from "../../internals/reasons.js";
+import { POPUP_COLLISION_AVOIDANCE } from "../../internals/constants.js";
+import { useAnimationsFinished } from "../../internals/useAnimationsFinished.js";
 import { adaptiveOrigin } from "../../utils/adaptiveOriginMiddleware.js";
-import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
+import { usePositioner } from "../../utils/usePositioner.js";
+import { useAnchoredPopupScrollLock } from "../../utils/useAnchoredPopupScrollLock.js";
 
 /**
  * Positions the popover against the trigger.
@@ -40,6 +39,7 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance = POPUP_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -53,6 +53,7 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
   const openReason = store.useState('openChangeReason');
   const triggerElement = store.useState('activeTriggerElement');
   const modal = store.useState('modal');
+  const openMethod = store.useState('openMethod');
   const positionerElement = store.useState('positionerElement');
   const instantType = store.useState('instantType');
   const transitionStatus = store.useState('transitionStatus');
@@ -78,24 +79,6 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
     collisionAvoidance,
     adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
   });
-  const defaultProps = React.useMemo(() => {
-    const hiddenStyles = {};
-    if (!open) {
-      hiddenStyles.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        ...positioning.positionerStyles,
-        ...hiddenStyles
-      }
-    };
-  }, [open, mounted, positioning.positionerStyles]);
-  const positioner = React.useMemo(() => ({
-    props: defaultProps,
-    ...positioning
-  }), [defaultProps, positioning]);
   const domReference = floatingRootContext.useState('domReferenceElement');
 
   // When the current trigger element changes, enable transitions on the
@@ -120,22 +103,25 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
   }, [domReference, runOnceAnimationsFinish, store]);
   const state = {
     open,
-    side: positioner.side,
-    align: positioner.align,
-    anchorHidden: positioner.anchorHidden,
+    side: positioning.side,
+    align: positioning.align,
+    anchorHidden: positioning.anchorHidden,
     instant: instantType
   };
+  useAnchoredPopupScrollLock(open && modal === true && openReason !== REASONS.triggerHover, openMethod === 'touch', positionerElement, triggerElement);
   const setPositionerElement = React.useCallback(element => {
     store.set('positionerElement', element);
   }, [store]);
-  const element = useRenderElement('div', componentProps, {
-    state,
-    props: [positioner.props, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    ref: [forwardedRef, setPositionerElement],
-    stateAttributesMapping: popupStateMapping
+  const element = usePositioner(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/_jsxs(PopoverPositionerContext.Provider, {
-    value: positioner,
+    value: positioning,
     children: [mounted && modal === true && openReason !== REASONS.triggerHover && /*#__PURE__*/_jsx(InternalBackdrop, {
       ref: store.context.internalBackdropRef,
       inert: inertValue(!open),

package/esm/popover/root/PopoverRoot.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { PopoverHandle } from "../store/PopoverHandle.js";
-import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { type PayloadChildRenderFunction } from "../../utils/popups/index.js";
 /**
  * Groups all parts of the popover.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
@@ -57,7 +57,7 @@ export interface PopoverRootProps<Payload = unknown> {
   /**
    * ID of the trigger that the popover is associated with.
    * This is useful in conjunction with the `open` prop to create a controlled popover.
-   * There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
+   * There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set).
    */
   triggerId?: string | null | undefined;
   /**

package/esm/popover/root/PopoverRoot.js

@@ -1,13 +1,12 @@
 'use client';
 
 import * as React from 'react';
-import { useScrollLock } from '@base-ui/utils/useScrollLock';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
 import { useDismiss, useInteractions, useRole, FloatingTree, useFloatingParentNodeId, useSyncedFloatingRootContext } from "../../floating-ui-react/index.js";
 import { PopoverRootContext, usePopoverRootContext } from "./PopoverRootContext.js";
 import { PopoverStore } from "../store/PopoverStore.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useImplicitActiveTrigger, useOpenStateTransitions } from "../../utils/popups/index.js";
 import { useOpenInteractionType } from "../../utils/useOpenInteractionType.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -45,9 +44,7 @@ function PopoverRootComponent({
   store.useControlledProp('openProp', openProp);
   store.useControlledProp('triggerIdProp', triggerIdProp);
   const open = store.useState('open');
-  const positionerElement = store.useState('positionerElement');
   const payload = store.useState('payload');
-  const openReason = store.useState('openChangeReason');
   store.useContextCallback('onOpenChange', onOpenChange);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
   const {
@@ -63,22 +60,14 @@ function PopoverRootComponent({
       openChangeReason: null
     });
   });
-  useScrollLock(open && modal === true && openReason !== REASONS.triggerHover && openMethod !== 'touch', positionerElement);
   React.useEffect(() => {
     if (!open) {
       store.context.stickIfOpenTimeout.clear();
     }
   }, [store, open]);
-  const createPopoverEventDetails = React.useCallback(reason => {
-    const details = createChangeEventDetails(reason);
-    details.preventUnmountOnClose = () => {
-      store.set('preventUnmountingOnClose', true);
-    };
-    return details;
-  }, [store]);
   const handleImperativeClose = React.useCallback(() => {
-    store.setOpen(false, createPopoverEventDetails(REASONS.imperativeAction));
-  }, [store, createPopoverEventDetails]);
+    store.setOpen(false, createChangeEventDetails(REASONS.imperativeAction));
+  }, [store]);
   React.useImperativeHandle(props.actionsRef, () => ({
     unmount: forceUnmount,
     close: handleImperativeClose
@@ -132,7 +121,7 @@ function PopoverRootComponent({
 
 /**
  * Groups all parts of the popover.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */

package/esm/popover/store/PopoverHandle.js

@@ -1,6 +1,6 @@
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { PopoverStore } from "./PopoverStore.js";
 export class PopoverHandle {
   /**

package/esm/popover/store/PopoverStore.d.ts

@@ -8,6 +8,7 @@ export type State<Payload> = PopupStoreState<Payload> & {
   disabled: boolean;
   instantType: 'dismiss' | 'click' | undefined;
   modal: boolean | 'trap-focus';
+  focusManagerModal: boolean;
   openMethod: InteractionType | null;
   openChangeReason: PopoverRoot.ChangeEventReason | null;
   stickIfOpen: boolean;
@@ -32,6 +33,7 @@ declare const selectors: {
   openMethod: (state: State<unknown>) => InteractionType | null;
   openChangeReason: (state: State<unknown>) => import("../index.js").PopoverRootChangeEventReason | null;
   modal: (state: State<unknown>) => boolean | "trap-focus";
+  focusManagerModal: (state: State<unknown>) => boolean;
   stickIfOpen: (state: State<unknown>) => boolean;
   titleElementId: (state: State<unknown>) => string | undefined;
   descriptionElementId: (state: State<unknown>) => string | undefined;
@@ -42,7 +44,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -59,7 +61,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -76,7 +78,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -88,12 +90,12 @@ declare const selectors: {
     activeTriggerProps: import("../../index.js").HTMLProps;
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
-  }) => import("../../utils/useTransitionStatus.js").TransitionStatus;
+  }) => import("../../internals/useTransitionStatus.js").TransitionStatus;
   floatingRootContext: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -110,7 +112,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -127,7 +129,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -144,7 +146,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -161,7 +163,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -178,7 +180,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -195,7 +197,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -212,7 +214,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -229,7 +231,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -246,7 +248,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -263,7 +265,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;
@@ -280,7 +282,7 @@ declare const selectors: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
-    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
     preventUnmountingOnClose: boolean;
     payload: unknown;

package/esm/popover/store/PopoverStore.js

@@ -5,14 +5,15 @@ import { ReactStore, createSelector } from '@base-ui/utils/store';
 import { Timeout } from '@base-ui/utils/useTimeout';
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { useOnMount } from '@base-ui/utils/useOnMount';
-import { REASONS } from "../../utils/reasons.js";
+import { REASONS } from "../../internals/reasons.js";
 import { createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap } from "../../utils/popups/index.js";
-import { PATIENT_CLICK_THRESHOLD } from "../../utils/constants.js";
+import { PATIENT_CLICK_THRESHOLD } from "../../internals/constants.js";
 function createInitialState() {
   return {
     ...createInitialPopupStoreState(),
     disabled: false,
     modal: false,
+    focusManagerModal: false,
     instantType: undefined,
     openMethod: null,
     openChangeReason: null,
@@ -32,6 +33,7 @@ const selectors = {
   openMethod: createSelector(state => state.openMethod),
   openChangeReason: createSelector(state => state.openChangeReason),
   modal: createSelector(state => state.modal),
+  focusManagerModal: createSelector(state => state.focusManagerModal),
   stickIfOpen: createSelector(state => state.stickIfOpen),
   titleElementId: createSelector(state => state.titleElementId),
   descriptionElementId: createSelector(state => state.descriptionElementId),
@@ -71,15 +73,7 @@ export class PopoverStore extends ReactStore {
     if (eventDetails.isCanceled) {
       return;
     }
-    const details = {
-      open: nextOpen,
-      nativeEvent: eventDetails.event,
-      reason: eventDetails.reason,
-      nested: this.state.nested,
-      triggerElement: eventDetails.trigger
-    };
-    const floatingEvents = this.state.floatingRootContext.context.events;
-    floatingEvents?.emit('openchange', details);
+    this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const changeState = () => {
       const updatedState = {
         open: nextOpen,

package/esm/popover/title/PopoverTitle.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A heading that labels the popover.
  * Renders an `<h2>` element.

package/esm/popover/title/PopoverTitle.js

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 
 /**
  * A heading that labels the popover.
@@ -16,6 +16,7 @@ export const PopoverTitle = /*#__PURE__*/React.forwardRef(function PopoverTitle(
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/popover/trigger/PopoverTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import { PopoverHandle } from "../store/PopoverHandle.js";
 /**
  * A button that opens the popover.

package/esm/popover/trigger/PopoverTrigger.js

@@ -2,21 +2,18 @@
 
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
-import { useButton } from "../../use-button/useButton.js";
+import { useButton } from "../../internals/use-button/useButton.js";
 import { triggerOpenStateMapping, pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { CLICK_TRIGGER_IDENTIFIER } from "../../utils/constants.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { CLICK_TRIGGER_IDENTIFIER } from "../../internals/constants.js";
 import { safePolygon, useClick, useHoverReferenceInteraction, useInteractions } from "../../floating-ui-react/index.js";
 import { OPEN_DELAY } from "../utils/constants.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { FocusGuard } from "../../utils/FocusGuard.js";
-import { contains, getNextTabbable, getTabbableAfterElement, getTabbableBeforeElement, isOutsideEvent } from "../../floating-ui-react/utils.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useTriggerDataForwarding } from "../../utils/popups/index.js";
+import { useTriggerFocusGuards } from "../../utils/popups/useTriggerFocusGuards.js";
 
 /**
  * A button that opens the popover.
@@ -37,6 +34,7 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
     delay = OPEN_DELAY,
     closeDelay = 0,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const rootContext = usePopoverRootContext(true);
@@ -61,6 +59,7 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
   const openReason = store.useState('openChangeReason');
   const stickIfOpen = store.useState('stickIfOpen');
   const openMethod = store.useState('openMethod');
+  const focusManagerModal = store.useState('focusManagerModal');
   const hoverProps = useHoverReferenceInteraction(floatingContext, {
     enabled: floatingContext != null && openOnHover && (openMethod !== 'touch' || openReason !== REASONS.triggerPress),
     mouseOnly: true,
@@ -71,7 +70,8 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
       close: closeDelay
     },
     triggerElementRef,
-    isActiveTrigger: isTriggerActive
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
   const click = useClick(floatingContext, {
     enabled: floatingContext != null,
@@ -107,38 +107,16 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
     }, elementProps, getButtonProps],
     stateAttributesMapping
   });
-  const preFocusGuardRef = React.useRef(null);
-  const handlePreFocusGuardFocus = useStableCallback(event => {
-    ReactDOM.flushSync(() => {
-      store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent, event.currentTarget));
-    });
-    const previousTabbable = getTabbableBeforeElement(preFocusGuardRef.current);
-    previousTabbable?.focus();
-  });
-  const handleFocusTargetFocus = useStableCallback(event => {
-    const positionerElement = store.select('positionerElement');
-    if (positionerElement && isOutsideEvent(event, positionerElement)) {
-      store.context.beforeContentFocusGuardRef.current?.focus();
-    } else {
-      ReactDOM.flushSync(() => {
-        store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent, event.currentTarget));
-      });
-      let nextTabbable = getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
-      while (nextTabbable !== null && contains(positionerElement, nextTabbable)) {
-        const prevTabbable = nextTabbable;
-        nextTabbable = getNextTabbable(nextTabbable);
-        if (nextTabbable === prevTabbable) {
-          break;
-        }
-      }
-      nextTabbable?.focus();
-    }
-  });
+  const {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  } = useTriggerFocusGuards(store, triggerElementRef);
 
   // A fragment with key is required to ensure that the `element` is mounted to the same DOM node
   // regardless of whether the focus guards are rendered or not.
 
-  if (isTriggerActive) {
+  if (isTriggerActive && !focusManagerModal) {
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(FocusGuard, {
         ref: preFocusGuardRef,

package/esm/popover/viewport/PopoverViewport.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A viewport for displaying content transitions.
  * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger