@base-ui/react 1.2.0 → 1.4.0

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;

package/esm/popover/store/PopoverStore.js

@@ -13,6 +13,7 @@ function createInitialState() {
     ...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

@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  */
 export declare const PopoverTitle: React.ForwardRefExoticComponent<Omit<PopoverTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
 export interface PopoverTitleState {}
-export interface PopoverTitleProps extends BaseUIComponentProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', PopoverTitle.State> {}
+export interface PopoverTitleProps extends BaseUIComponentProps<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6', PopoverTitleState> {}
 export declare namespace PopoverTitle {
   type State = PopoverTitleState;
   type Props = PopoverTitleProps;

package/esm/popover/title/PopoverTitle.js

@@ -16,6 +16,7 @@ export const PopoverTitle = /*#__PURE__*/React.forwardRef(function PopoverTitle(
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/popover/trigger/PopoverTrigger.js

@@ -2,8 +2,6 @@
 
 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 { triggerOpenStateMapping, pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
@@ -13,10 +11,9 @@ import { safePolygon, useClick, useHoverReferenceInteraction, useInteractions }
 import { OPEN_DELAY } from "../utils/constants.js";
 import { useBaseUiId } from "../../utils/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 { 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

@@ -9,22 +9,26 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
 export declare const PopoverViewport: React.ForwardRefExoticComponent<Omit<PopoverViewport.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PopoverViewportState {
+  /**
+   * The activation direction of the transitioned content.
+   */
+  activationDirection: string | undefined;
+  /**
+   * Whether the viewport is currently transitioning between contents.
+   */
+  transitioning: boolean;
+  /**
+   * Present if animations should be instant.
+   */
+  instant: 'dismiss' | 'click' | undefined;
+}
 export declare namespace PopoverViewport {
-  interface Props extends BaseUIComponentProps<'div', State> {
+  interface Props extends BaseUIComponentProps<'div', PopoverViewportState> {
     /**
      * The content to render inside the transition container.
      */
     children?: React.ReactNode;
   }
-  interface State {
-    activationDirection: string | undefined;
-    /**
-     * Whether the viewport is currently transitioning between contents.
-     */
-    transitioning: boolean;
-    /**
-     * Present if animations should be instant.
-     */
-    instant: 'dismiss' | 'click' | undefined;
-  }
+  type State = PopoverViewportState;
 }

package/esm/popover/viewport/PopoverViewport.js

@@ -24,6 +24,7 @@ export const PopoverViewport = /*#__PURE__*/React.forwardRef(function PopoverVie
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;

package/esm/preview-card/arrow/PreviewCardArrow.d.ts

@@ -13,11 +13,20 @@ export interface PreviewCardArrowState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the arrow cannot be centered on the anchor.
+   */
   uncentered: boolean;
 }
-export interface PreviewCardArrowProps extends BaseUIComponentProps<'div', PreviewCardArrow.State> {}
+export interface PreviewCardArrowProps extends BaseUIComponentProps<'div', PreviewCardArrowState> {}
 export declare namespace PreviewCardArrow {
   type State = PreviewCardArrowState;
   type Props = PreviewCardArrowProps;

package/esm/preview-card/arrow/PreviewCardArrow.js

@@ -16,6 +16,7 @@ export const PreviewCardArrow = /*#__PURE__*/React.forwardRef(function PreviewCa
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = usePreviewCardRootContext();

package/esm/preview-card/backdrop/PreviewCardBackdrop.d.ts

@@ -13,9 +13,12 @@ export interface PreviewCardBackdropState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface PreviewCardBackdropProps extends BaseUIComponentProps<'div', PreviewCardBackdrop.State> {}
+export interface PreviewCardBackdropProps extends BaseUIComponentProps<'div', PreviewCardBackdropState> {}
 export declare namespace PreviewCardBackdrop {
   type State = PreviewCardBackdropState;
   type Props = PreviewCardBackdropProps;

package/esm/preview-card/backdrop/PreviewCardBackdrop.js

@@ -20,6 +20,7 @@ export const PreviewCardBackdrop = /*#__PURE__*/React.forwardRef(function Previe
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = usePreviewCardRootContext();

package/esm/preview-card/index.d.ts

@@ -5,4 +5,5 @@ export type * from "./portal/PreviewCardPortal.js";
 export type * from "./positioner/PreviewCardPositioner.js";
 export type * from "./popup/PreviewCardPopup.js";
 export type * from "./arrow/PreviewCardArrow.js";
+export type * from "./viewport/PreviewCardViewport.js";
 export type * from "./backdrop/PreviewCardBackdrop.js";

package/esm/preview-card/popup/PreviewCardPopup.d.ts

@@ -14,12 +14,24 @@ export interface PreviewCardPopupState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether transitions should be skipped.
+   */
   instant: 'dismiss' | 'focus' | undefined;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface PreviewCardPopupProps extends BaseUIComponentProps<'div', PreviewCardPopup.State> {}
+export interface PreviewCardPopupProps extends BaseUIComponentProps<'div', PreviewCardPopupState> {}
 export declare namespace PreviewCardPopup {
   type State = PreviewCardPopupState;
   type Props = PreviewCardPopupProps;

package/esm/preview-card/popup/PreviewCardPopup.js

@@ -25,6 +25,7 @@ export const PreviewCardPopup = /*#__PURE__*/React.forwardRef(function PreviewCa
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const store = usePreviewCardRootContext();

package/esm/preview-card/portal/PreviewCardPortal.d.ts

@@ -8,10 +8,8 @@ import { FloatingPortalLite } from "../../utils/FloatingPortalLite.js";
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
 export declare const PreviewCardPortal: React.ForwardRefExoticComponent<Omit<PreviewCardPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace PreviewCardPortal {
-  interface State {}
-}
-export interface PreviewCardPortalProps extends FloatingPortalLite.Props<PreviewCardPortal.State> {
+export interface PreviewCardPortalState {}
+export interface PreviewCardPortalProps extends FloatingPortalLite.Props<PreviewCardPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
@@ -19,5 +17,6 @@ export interface PreviewCardPortalProps extends FloatingPortalLite.Props<Preview
   keepMounted?: boolean | undefined;
 }
 export declare namespace PreviewCardPortal {
+  type State = PreviewCardPortalState;
   type Props = PreviewCardPortalProps;
 }

package/esm/preview-card/positioner/PreviewCardPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type Side, type Align, useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
+import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Positions the popup against the trigger.
@@ -13,12 +13,24 @@ export interface PreviewCardPositionerState {
    * Whether the preview card is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
+  /**
+   * Whether transitions should be skipped.
+   */
   instant: 'dismiss' | 'focus' | undefined;
 }
-export interface PreviewCardPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', PreviewCardPositioner.State> {}
+export interface PreviewCardPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', PreviewCardPositionerState> {}
 export declare namespace PreviewCardPositioner {
   type State = PreviewCardPositionerState;
   type Props = PreviewCardPositionerProps;

package/esm/preview-card/positioner/PreviewCardPositioner.js

@@ -3,13 +3,12 @@
 import * as React from 'react';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { PreviewCardPositionerContext } from "./PreviewCardPositionerContext.js";
+import { FloatingNode, useFloatingNodeId } from "../../floating-ui-react/index.js";
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
-import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { usePreviewCardPortalContext } from "../portal/PreviewCardPortalContext.js";
 import { POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
 import { adaptiveOrigin } from "../../utils/adaptiveOriginMiddleware.js";
-import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
+import { usePositioner } from "../../utils/usePositioner.js";
 
 /**
  * Positions the popup against the trigger.
@@ -34,10 +33,12 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance = POPUP_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const store = usePreviewCardRootContext();
   const keepMounted = usePreviewCardPortalContext();
+  const nodeId = useFloatingNodeId();
   const open = store.useState('open');
   const mounted = store.useState('mounted');
   const floatingRootContext = store.useState('floatingRootContext');
@@ -59,23 +60,10 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
     sticky,
     disableAnchorTracking,
     keepMounted,
+    nodeId,
     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 state = {
     open,
     side: positioning.side,
@@ -83,22 +71,20 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
     anchorHidden: positioning.anchorHidden,
     instant: instantType
   };
-  const contextValue = React.useMemo(() => ({
-    side: positioning.side,
-    align: positioning.align,
-    arrowRef: positioning.arrowRef,
-    arrowUncentered: positioning.arrowUncentered,
-    arrowStyles: positioning.arrowStyles
-  }), [positioning.side, positioning.align, positioning.arrowRef, positioning.arrowUncentered, positioning.arrowStyles]);
-  const element = useRenderElement('div', componentProps, {
-    state,
-    props: [defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    ref: [forwardedRef, store.useStateSetter('positionerElement')],
-    stateAttributesMapping: popupStateMapping
+  const element = usePositioner(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, store.useStateSetter('positionerElement')],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/_jsx(PreviewCardPositionerContext.Provider, {
-    value: contextValue,
-    children: element
+    value: positioning,
+    children: /*#__PURE__*/_jsx(FloatingNode, {
+      id: nodeId,
+      children: element
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") PreviewCardPositioner.displayName = "PreviewCardPositioner";

package/esm/preview-card/positioner/PreviewCardPositionerContext.d.ts

@@ -1,11 +1,5 @@
 import * as React from 'react';
-import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-export interface PreviewCardPositionerContext {
-  side: Side;
-  align: Align;
-  arrowRef: React.RefObject<Element | null>;
-  arrowUncentered: boolean;
-  arrowStyles: React.CSSProperties;
-}
+import type { UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.js";
+export type PreviewCardPositionerContext = Pick<UseAnchorPositioningReturnValue, 'side' | 'align' | 'arrowRef' | 'arrowUncentered' | 'arrowStyles'>;
 export declare const PreviewCardPositionerContext: React.Context<PreviewCardPositionerContext | undefined>;
 export declare function usePreviewCardPositionerContext(): PreviewCardPositionerContext;

package/esm/preview-card/root/PreviewCardRoot.d.ts

@@ -5,7 +5,7 @@ import { PayloadChildRenderFunction } from "../../utils/popups/index.js";
 import { PreviewCardHandle } from "../store/PreviewCardHandle.js";
 /**
  * Groups all parts of the preview card.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
@@ -50,15 +50,15 @@ export interface PreviewCardRootProps<Payload = unknown> {
   children?: React.ReactNode | PayloadChildRenderFunction<Payload>;
   /**
    * ID of the trigger that the preview card is associated with.
-   * This is useful in conjuntion with the `open` prop to create a controlled preview card.
-   * There's no need to specify this prop when the preview card is uncontrolled (i.e. when the `open` prop is not set).
+   * This is useful in conjunction with the `open` prop to create a controlled preview card.
+   * There's no need to specify this prop when the preview card is uncontrolled (that is, when the `open` prop is not set).
    */
-  triggerId?: (string | null) | undefined;
+  triggerId?: string | null | undefined;
   /**
    * ID of the trigger that the preview card is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open preview card.
    */
-  defaultTriggerId?: (string | null) | undefined;
+  defaultTriggerId?: string | null | undefined;
 }
 export interface PreviewCardRootActions {
   unmount: () => void;

package/esm/preview-card/root/PreviewCardRoot.js

@@ -3,20 +3,14 @@
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
-import { useDismiss, useInteractions } from "../../floating-ui-react/index.js";
-import { PreviewCardRootContext } from "./PreviewCardContext.js";
+import { useDismiss, useInteractions, FloatingTree } from "../../floating-ui-react/index.js";
+import { PreviewCardRootContext, usePreviewCardRootContext } from "./PreviewCardContext.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { PreviewCardStore } from "../store/PreviewCardStore.js";
 import { useImplicitActiveTrigger, useOpenStateTransitions } from "../../utils/popups/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Groups all parts of the preview card.
- * Doesn’t render its own HTML element.
- *
- * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
- */
-export function PreviewCardRoot(props) {
+function PreviewCardRootComponent(props) {
   const {
     open: openProp,
     defaultOpen = false,
@@ -49,6 +43,7 @@ export function PreviewCardRoot(props) {
   store.useContextCallback('onOpenChange', onOpenChange);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
   const open = store.useState('open');
+  const floatingRootContext = store.select('floatingRootContext');
   const activeTriggerId = store.useState('activeTriggerId');
   const payload = store.useState('payload');
   useImplicitActiveTrigger(store);
@@ -69,7 +64,6 @@ export function PreviewCardRoot(props) {
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
-  const floatingRootContext = store.useState('floatingRootContext');
   const dismiss = useDismiss(floatingRootContext);
   const {
     getReferenceProps,
@@ -91,6 +85,25 @@ export function PreviewCardRoot(props) {
     }) : children
   });
 }
+
+/**
+ * Groups all parts of the preview card.
+ * Doesn't render its own HTML element.
+ *
+ * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
+ */
+export function PreviewCardRoot(props) {
+  if (usePreviewCardRootContext(true)) {
+    return /*#__PURE__*/_jsx(PreviewCardRootComponent, {
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(FloatingTree, {
+    children: /*#__PURE__*/_jsx(PreviewCardRootComponent, {
+      ...props
+    })
+  });
+}
 function createPreviewCardEventDetails(store, reason) {
   const details = createChangeEventDetails(reason);
   details.preventUnmountOnClose = () => {

package/esm/preview-card/store/PreviewCardStore.js

@@ -38,6 +38,7 @@ export class PreviewCardStore extends ReactStore {
     if (eventDetails.isCanceled) {
       return;
     }
+    this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const changeState = () => {
       const updatedState = {
         open: nextOpen

package/esm/preview-card/trigger/PreviewCardTrigger.d.ts

@@ -17,7 +17,7 @@ export interface PreviewCardTriggerState {
    */
   open: boolean;
 }
-export interface PreviewCardTriggerProps<Payload = unknown> extends BaseUIComponentProps<'a', PreviewCardTrigger.State> {
+export interface PreviewCardTriggerProps<Payload = unknown> extends BaseUIComponentProps<'a', PreviewCardTriggerState> {
   /**
    * A handle to associate the trigger with a preview card.
    */

package/esm/preview-card/trigger/PreviewCardTrigger.js

@@ -26,6 +26,7 @@ export const PreviewCardTrigger = /*#__PURE__*/React.forwardRef(function Preview
     id: idProp,
     payload,
     handle,
+    style,
     ...elementProps
   } = componentProps;
   const rootContext = usePreviewCardRootContext(true);
@@ -60,7 +61,8 @@ export const PreviewCardTrigger = /*#__PURE__*/React.forwardRef(function Preview
       close: closeDelayWithDefault
     }),
     triggerElementRef,
-    isActiveTrigger: isTriggerActive
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
   const focusProps = useFocus(floatingRootContext, {
     delay: delayWithDefault

package/esm/preview-card/viewport/PreviewCardViewport.d.ts

@@ -9,19 +9,26 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
 export declare const PreviewCardViewport: React.ForwardRefExoticComponent<Omit<PreviewCardViewport.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface PreviewCardViewportState {
+  /**
+   * The activation direction of the transitioned content.
+   */
+  activationDirection: string | undefined;
+  /**
+   * Whether the viewport is currently transitioning between contents.
+   */
+  transitioning: boolean;
+  /**
+   * Present if animations should be instant.
+   */
+  instant: 'dismiss' | 'focus' | undefined;
+}
 export declare namespace PreviewCardViewport {
-  interface Props extends BaseUIComponentProps<'div', State> {
+  interface Props extends BaseUIComponentProps<'div', PreviewCardViewportState> {
     /**
      * The content to render inside the transition container.
      */
     children?: React.ReactNode;
   }
-  interface State {
-    activationDirection: string | undefined;
-    /**
-     * Whether the viewport is currently transitioning between contents.
-     */
-    transitioning: boolean;
-    instant: 'dismiss' | 'focus' | undefined;
-  }
+  type State = PreviewCardViewportState;
 }

package/esm/preview-card/viewport/PreviewCardViewport.js

@@ -24,6 +24,7 @@ export const PreviewCardViewport = /*#__PURE__*/React.forwardRef(function Previe
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;