@base-ui/react 1.3.0 → 1.4.1

package/esm/popover/viewport/PopoverViewport.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
 import { usePopoverPositionerContext } from "../positioner/PopoverPositionerContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { PopoverViewportCssVars } from "./PopoverViewportCssVars.js";
 import { usePopupViewport } from "../../utils/usePopupViewport.js";
 const stateAttributesMapping = {
@@ -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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { Align, Side } from "../../utils/useAnchorPositioning.js";
 /**
  * Displays an element positioned against the preview card anchor.

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

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { usePreviewCardPositionerContext } from "../positioner/PreviewCardPositionerContext.js";
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Displays an element positioned against the preview card anchor.
@@ -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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-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";
 /**
  * An overlay displayed beneath the popup.
  * Renders a `<div>` element.

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

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 const stateAttributesMapping = {
   ...baseMapping,
   ...transitionStatusMapping
@@ -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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Align, Side } 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 preview card contents.
  * Renders a `<div>` element.

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

@@ -5,9 +5,9 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { usePreviewCardPositionerContext } from "../positioner/PreviewCardPositionerContext.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 { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { useHoverFloatingInteraction } from "../../floating-ui-react/index.js";
 const stateAttributesMapping = {
@@ -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/positioner/PreviewCardPositioner.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 popup against the trigger.
  * Renders a `<div>` element.

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

@@ -5,12 +5,10 @@ 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 { POPUP_COLLISION_AVOIDANCE } from "../../internals/constants.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.
@@ -35,6 +33,7 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance = POPUP_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const store = usePreviewCardRootContext();
@@ -65,20 +64,6 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
     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,
@@ -86,21 +71,16 @@ 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,
+    value: positioning,
     children: /*#__PURE__*/_jsx(FloatingNode, {
       id: nodeId,
       children: element

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
-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 { 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)
  */
@@ -51,7 +51,7 @@ export interface PreviewCardRootProps<Payload = unknown> {
   /**
    * ID of the trigger that the preview card is associated with.
    * 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 (i.e. when the `open` prop is not set).
+   * 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;
   /**

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

@@ -5,8 +5,8 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
 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 { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { PreviewCardStore } from "../store/PreviewCardStore.js";
 import { useImplicitActiveTrigger, useOpenStateTransitions } from "../../utils/popups/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -43,6 +43,7 @@ function PreviewCardRootComponent(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);
@@ -57,13 +58,12 @@ function PreviewCardRootComponent(props) {
     }
   }, [store, activeTriggerId, open]);
   const handleImperativeClose = React.useCallback(() => {
-    store.setOpen(false, createPreviewCardEventDetails(store, REASONS.imperativeAction));
+    store.setOpen(false, createChangeEventDetails(REASONS.imperativeAction));
   }, [store]);
   React.useImperativeHandle(actionsRef, () => ({
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
-  const floatingRootContext = store.useState('floatingRootContext');
   const dismiss = useDismiss(floatingRootContext);
   const {
     getReferenceProps,
@@ -88,7 +88,7 @@ function PreviewCardRootComponent(props) {
 
 /**
  * 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)
  */
@@ -103,11 +103,4 @@ export function PreviewCardRoot(props) {
       ...props
     })
   });
-}
-function createPreviewCardEventDetails(store, reason) {
-  const details = createChangeEventDetails(reason);
-  details.preventUnmountOnClose = () => {
-    store.set('preventUnmountingOnClose', true);
-  };
-  return details;
 }

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

@@ -1,7 +1,7 @@
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import { PreviewCardStore } from "./PreviewCardStore.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";
 
 /**
  * A handle to control a preview card imperatively and to associate detached triggers with it.

package/esm/preview-card/store/PreviewCardStore.d.ts

@@ -16,7 +16,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;
@@ -33,7 +33,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;
@@ -50,7 +50,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;
@@ -62,12 +62,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;
@@ -84,7 +84,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;
@@ -101,7 +101,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;
@@ -118,7 +118,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;
@@ -135,7 +135,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;
@@ -152,7 +152,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;
@@ -169,7 +169,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;
@@ -186,7 +186,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;
@@ -203,7 +203,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;
@@ -220,7 +220,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;
@@ -237,7 +237,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;
@@ -254,7 +254,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/preview-card/store/PreviewCardStore.js

@@ -4,7 +4,7 @@ import { createSelector, ReactStore } from '@base-ui/utils/store';
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap } from "../../utils/popups/index.js";
 import { useSyncedFloatingRootContext } from "../../floating-ui-react/index.js";
-import { REASONS } from "../../utils/reasons.js";
+import { REASONS } from "../../internals/reasons.js";
 import { CLOSE_DELAY } from "../utils/constants.js";
 const selectors = {
   ...popupStoreSelectors,
@@ -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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import { PreviewCardHandle } from "../store/PreviewCardHandle.js";
 /**
  * A link that opens the preview card.

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

@@ -5,8 +5,8 @@ import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.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";
 import { useTriggerDataForwarding } from "../../utils/popups/index.js";
 import { CLOSE_DELAY, OPEN_DELAY } from "../utils/constants.js";
 import { safePolygon, useFocus, useHoverReferenceInteraction } from "../../floating-ui-react/index.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

@@ -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

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

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { usePreviewCardPositionerContext } from "../positioner/PreviewCardPositionerContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { PreviewCardViewportCssVars } from "./PreviewCardViewportCssVars.js";
 import { usePopupViewport } from "../../utils/usePopupViewport.js";
 const stateAttributesMapping = {
@@ -24,6 +24,7 @@ export const PreviewCardViewport = /*#__PURE__*/React.forwardRef(function Previe
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;

package/esm/progress/indicator/ProgressIndicator.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ProgressRootState } from "../root/ProgressRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Visualizes the completion status of the task.
  * Renders a `<div>` element.

package/esm/progress/indicator/ProgressIndicator.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { valueToPercent } from "../../utils/valueToPercent.js";
 import { useProgressRootContext } from "../root/ProgressRootContext.js";
 import { progressStateAttributesMapping } from "../root/stateAttributesMapping.js";
@@ -15,6 +15,7 @@ export const ProgressIndicator = /*#__PURE__*/React.forwardRef(function Progress
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/progress/indicator/ProgressIndicatorDataAttributes.d.ts

@@ -4,7 +4,7 @@ export declare enum ProgressIndicatorDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/esm/progress/indicator/ProgressIndicatorDataAttributes.js

@@ -4,7 +4,7 @@ export let ProgressIndicatorDataAttributes = /*#__PURE__*/function (ProgressIndi
    */
   ProgressIndicatorDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressIndicatorDataAttributes["indeterminate"] = "data-indeterminate";
   /**

package/esm/progress/label/ProgressLabel.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ProgressRootState } from "../root/ProgressRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * An accessible label for the progress bar.
  * Renders a `<span>` element.

package/esm/progress/label/ProgressLabel.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useRegisteredLabelId } from "../../utils/useRegisteredLabelId.js";
 import { useProgressRootContext } from "../root/ProgressRootContext.js";
 import { progressStateAttributesMapping } from "../root/stateAttributesMapping.js";
@@ -15,6 +15,7 @@ export const ProgressLabel = /*#__PURE__*/React.forwardRef(function ProgressLabe
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/esm/progress/label/ProgressLabelDataAttributes.d.ts

@@ -4,7 +4,7 @@ export declare enum ProgressLabelDataAttributes {
    */
   complete = "data-complete",
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   indeterminate = "data-indeterminate",
   /**

package/esm/progress/label/ProgressLabelDataAttributes.js

@@ -4,7 +4,7 @@ export let ProgressLabelDataAttributes = /*#__PURE__*/function (ProgressLabelDat
    */
   ProgressLabelDataAttributes["complete"] = "data-complete";
   /**
-   * Present when the progress is in interminate state.
+   * Present when the progress is in indeterminate state.
    */
   ProgressLabelDataAttributes["indeterminate"] = "data-indeterminate";
   /**

package/esm/progress/root/ProgressRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Groups all parts of the progress bar and provides the task completion status to screen readers.
  * Renders a `<div>` element.