@base-ui/react 1.3.0 → 1.4.0

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@base-ui/react",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "author": "MUI Team",
   "description": "Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.",
+  "license": "MIT",
   "keywords": [
     "react",
     "react-component",
     "mui",
     "unstyled",
+    "base-ui",
     "a11y"
   ],
   "repository": {
@@ -15,7 +17,6 @@
     "url": "git+https://github.com/mui/base-ui.git",
     "directory": "packages/react"
   },
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/mui/base-ui/issues"
   },
@@ -26,15 +27,16 @@
   },
   "type": "commonjs",
   "dependencies": {
-    "@babel/runtime": "^7.28.6",
+    "@babel/runtime": "^7.29.2",
     "@floating-ui/react-dom": "^2.1.8",
     "@floating-ui/utils": "^0.2.11",
-    "tabbable": "^6.4.0",
     "use-sync-external-store": "^1.6.0",
-    "@base-ui/utils": "0.2.6"
+    "@base-ui/utils": "0.2.7"
   },
   "peerDependencies": {
+    "@date-fns/tz": "^1.2.0",
     "@types/react": "^17 || ^18 || ^19",
+    "date-fns": "^4.0.0",
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
@@ -402,6 +404,20 @@
         "default": "./esm/number-field/index.js"
       }
     },
+    "./otp-field": {
+      "import": {
+        "types": "./esm/otp-field/index.d.ts",
+        "default": "./esm/otp-field/index.js"
+      },
+      "require": {
+        "types": "./otp-field/index.d.ts",
+        "default": "./otp-field/index.js"
+      },
+      "default": {
+        "types": "./esm/otp-field/index.d.ts",
+        "default": "./esm/otp-field/index.js"
+      }
+    },
     "./popover": {
       "import": {
         "types": "./esm/popover/index.d.ts",

package/popover/arrow/PopoverArrow.js

@@ -21,6 +21,7 @@ const PopoverArrow = exports.PopoverArrow = /*#__PURE__*/React.forwardRef(functi
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/popover/backdrop/PopoverBackdrop.js

@@ -27,6 +27,7 @@ const PopoverBackdrop = exports.PopoverBackdrop = /*#__PURE__*/React.forwardRef(
   const {
     className,
     render,
+    style,
     ...elementProps
   } = props;
   const {

package/popover/close/PopoverClose.js

@@ -25,6 +25,7 @@ const PopoverClose = exports.PopoverClose = /*#__PURE__*/React.forwardRef(functi
     className,
     disabled = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/popover/description/PopoverDescription.js

@@ -21,6 +21,7 @@ const PopoverDescription = exports.PopoverDescription = /*#__PURE__*/React.forwa
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/popover/popup/PopoverPopup.js

@@ -38,6 +38,7 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
     render,
     initialFocus,
     finalFocus,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -96,6 +97,7 @@ const PopoverPopup = exports.PopoverPopup = /*#__PURE__*/React.forwardRef(functi
     transitionStatus
   };
   const focusManagerModal = modal !== false && hasClosePart;
+  store.useSyncedValue('focusManagerModal', focusManagerModal);
   const setPopupElement = React.useCallback(element => {
     store.set('popupElement', element);
   }, [store]);

package/popover/positioner/PopoverPositioner.js

@@ -13,15 +13,14 @@ var _floatingUiReact = require("../../floating-ui-react");
 var _PopoverRootContext = require("../root/PopoverRootContext");
 var _PopoverPositionerContext = require("./PopoverPositionerContext");
 var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
-var _popupStateMapping = require("../../utils/popupStateMapping");
 var _PopoverPortalContext = require("../portal/PopoverPortalContext");
 var _InternalBackdrop = require("../../utils/InternalBackdrop");
 var _reasons = require("../../utils/reasons");
-var _useRenderElement = require("../../utils/useRenderElement");
 var _constants = require("../../utils/constants");
 var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
 var _adaptiveOriginMiddleware = require("../../utils/adaptiveOriginMiddleware");
-var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _usePositioner = require("../../utils/usePositioner");
+var _useAnchoredPopupScrollLock = require("../../utils/useAnchoredPopupScrollLock");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Positions the popover against the trigger.
@@ -45,6 +44,7 @@ const PopoverPositioner = exports.PopoverPositioner = /*#__PURE__*/React.forward
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance = _constants.POPUP_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -58,6 +58,7 @@ const PopoverPositioner = exports.PopoverPositioner = /*#__PURE__*/React.forward
   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');
@@ -83,24 +84,6 @@ const PopoverPositioner = exports.PopoverPositioner = /*#__PURE__*/React.forward
     collisionAvoidance,
     adaptiveOrigin: hasViewport ? _adaptiveOriginMiddleware.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
@@ -125,22 +108,25 @@ const PopoverPositioner = exports.PopoverPositioner = /*#__PURE__*/React.forward
   }, [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
   };
+  (0, _useAnchoredPopupScrollLock.useAnchoredPopupScrollLock)(open && modal === true && openReason !== _reasons.REASONS.triggerHover, openMethod === 'touch', positionerElement, triggerElement);
   const setPositionerElement = React.useCallback(element => {
     store.set('positionerElement', element);
   }, [store]);
-  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    state,
-    props: [positioner.props, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
-    ref: [forwardedRef, setPositionerElement],
-    stateAttributesMapping: _popupStateMapping.popupStateMapping
+  const element = (0, _usePositioner.usePositioner)(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PopoverPositionerContext.PopoverPositionerContext.Provider, {
-    value: positioner,
+    value: positioning,
     children: [mounted && modal === true && openReason !== _reasons.REASONS.triggerHover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InternalBackdrop.InternalBackdrop, {
       ref: store.context.internalBackdropRef,
       inert: (0, _inertValue.inertValue)(!open),

package/popover/root/PopoverRoot.d.ts

@@ -5,7 +5,7 @@ import { REASONS } from "../../utils/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/popover/root/PopoverRoot.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PopoverRoot = PopoverRoot;
 var React = _interopRequireWildcard(require("react"));
-var _useScrollLock = require("@base-ui/utils/useScrollLock");
 var _useOnFirstRender = require("@base-ui/utils/useOnFirstRender");
 var _floatingUiReact = require("../../floating-ui-react");
 var _PopoverRootContext = require("./PopoverRootContext");
@@ -51,9 +50,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 {
@@ -69,7 +66,6 @@ function PopoverRootComponent({
       openChangeReason: null
     });
   });
-  (0, _useScrollLock.useScrollLock)(open && modal === true && openReason !== _reasons.REASONS.triggerHover && openMethod !== 'touch', positionerElement);
   React.useEffect(() => {
     if (!open) {
       store.context.stickIfOpenTimeout.clear();
@@ -138,7 +134,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/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/popover/store/PopoverStore.js

@@ -21,6 +21,7 @@ function createInitialState() {
     ...(0, _popups.createInitialPopupStoreState)(),
     disabled: false,
     modal: false,
+    focusManagerModal: false,
     instantType: undefined,
     openMethod: null,
     openChangeReason: null,
@@ -40,6 +41,7 @@ const selectors = {
   openMethod: (0, _store.createSelector)(state => state.openMethod),
   openChangeReason: (0, _store.createSelector)(state => state.openChangeReason),
   modal: (0, _store.createSelector)(state => state.modal),
+  focusManagerModal: (0, _store.createSelector)(state => state.focusManagerModal),
   stickIfOpen: (0, _store.createSelector)(state => state.stickIfOpen),
   titleElementId: (0, _store.createSelector)(state => state.titleElementId),
   descriptionElementId: (0, _store.createSelector)(state => state.descriptionElementId),
@@ -79,15 +81,7 @@ class PopoverStore extends _store.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/popover/title/PopoverTitle.js

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

package/popover/trigger/PopoverTrigger.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.PopoverTrigger = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
-var ReactDOM = _interopRequireWildcard(require("react-dom"));
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _PopoverRootContext = require("../root/PopoverRootContext");
 var _useButton = require("../../use-button/useButton");
 var _popupStateMapping = require("../../utils/popupStateMapping");
@@ -20,10 +18,9 @@ var _floatingUiReact = require("../../floating-ui-react");
 var _constants2 = require("../utils/constants");
 var _useBaseUiId = require("../../utils/useBaseUiId");
 var _FocusGuard = require("../../utils/FocusGuard");
-var _utils = require("../../floating-ui-react/utils");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _popups = require("../../utils/popups");
+var _useTriggerFocusGuards = require("../../utils/popups/useTriggerFocusGuards");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A button that opens the popover.
@@ -43,6 +40,7 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
     delay = _constants2.OPEN_DELAY,
     closeDelay = 0,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   const rootContext = (0, _PopoverRootContext.usePopoverRootContext)(true);
@@ -67,6 +65,7 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
   const openReason = store.useState('openChangeReason');
   const stickIfOpen = store.useState('stickIfOpen');
   const openMethod = store.useState('openMethod');
+  const focusManagerModal = store.useState('focusManagerModal');
   const hoverProps = (0, _floatingUiReact.useHoverReferenceInteraction)(floatingContext, {
     enabled: floatingContext != null && openOnHover && (openMethod !== 'touch' || openReason !== _reasons.REASONS.triggerPress),
     mouseOnly: true,
@@ -77,7 +76,8 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
       close: closeDelay
     },
     triggerElementRef,
-    isActiveTrigger: isTriggerActive
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
   const click = (0, _floatingUiReact.useClick)(floatingContext, {
     enabled: floatingContext != null,
@@ -113,38 +113,16 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
     }, elementProps, getButtonProps],
     stateAttributesMapping
   });
-  const preFocusGuardRef = React.useRef(null);
-  const handlePreFocusGuardFocus = (0, _useStableCallback.useStableCallback)(event => {
-    ReactDOM.flushSync(() => {
-      store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent, event.currentTarget));
-    });
-    const previousTabbable = (0, _utils.getTabbableBeforeElement)(preFocusGuardRef.current);
-    previousTabbable?.focus();
-  });
-  const handleFocusTargetFocus = (0, _useStableCallback.useStableCallback)(event => {
-    const positionerElement = store.select('positionerElement');
-    if (positionerElement && (0, _utils.isOutsideEvent)(event, positionerElement)) {
-      store.context.beforeContentFocusGuardRef.current?.focus();
-    } else {
-      ReactDOM.flushSync(() => {
-        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent, event.currentTarget));
-      });
-      let nextTabbable = (0, _utils.getTabbableAfterElement)(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
-      while (nextTabbable !== null && (0, _utils.contains)(positionerElement, nextTabbable)) {
-        const prevTabbable = nextTabbable;
-        nextTabbable = (0, _utils.getNextTabbable)(nextTabbable);
-        if (nextTabbable === prevTabbable) {
-          break;
-        }
-      }
-      nextTabbable?.focus();
-    }
-  });
+  const {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  } = (0, _useTriggerFocusGuards.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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
         ref: preFocusGuardRef,

package/popover/viewport/PopoverViewport.js

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

package/preview-card/arrow/PreviewCardArrow.js

@@ -21,6 +21,7 @@ const PreviewCardArrow = exports.PreviewCardArrow = /*#__PURE__*/React.forwardRe
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = (0, _PreviewCardContext.usePreviewCardRootContext)();

package/preview-card/backdrop/PreviewCardBackdrop.js

@@ -26,6 +26,7 @@ const PreviewCardBackdrop = exports.PreviewCardBackdrop = /*#__PURE__*/React.for
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = (0, _PreviewCardContext.usePreviewCardRootContext)();

package/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/preview-card/popup/PreviewCardPopup.js

@@ -31,6 +31,7 @@ const PreviewCardPopup = exports.PreviewCardPopup = /*#__PURE__*/React.forwardRe
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const store = (0, _PreviewCardContext.usePreviewCardRootContext)();

package/preview-card/positioner/PreviewCardPositioner.js

@@ -11,12 +11,10 @@ var _PreviewCardContext = require("../root/PreviewCardContext");
 var _PreviewCardPositionerContext = require("./PreviewCardPositionerContext");
 var _floatingUiReact = require("../../floating-ui-react");
 var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
-var _popupStateMapping = require("../../utils/popupStateMapping");
 var _PreviewCardPortalContext = require("../portal/PreviewCardPortalContext");
 var _constants = require("../../utils/constants");
-var _useRenderElement = require("../../utils/useRenderElement");
 var _adaptiveOriginMiddleware = require("../../utils/adaptiveOriginMiddleware");
-var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _usePositioner = require("../../utils/usePositioner");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Positions the popup against the trigger.
@@ -40,6 +38,7 @@ const PreviewCardPositioner = exports.PreviewCardPositioner = /*#__PURE__*/React
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance = _constants.POPUP_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const store = (0, _PreviewCardContext.usePreviewCardRootContext)();
@@ -70,20 +69,6 @@ const PreviewCardPositioner = exports.PreviewCardPositioner = /*#__PURE__*/React
     collisionAvoidance,
     adaptiveOrigin: hasViewport ? _adaptiveOriginMiddleware.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,
@@ -91,21 +76,16 @@ const PreviewCardPositioner = exports.PreviewCardPositioner = /*#__PURE__*/React
     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 = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    state,
-    props: [defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
-    ref: [forwardedRef, store.useStateSetter('positionerElement')],
-    stateAttributesMapping: _popupStateMapping.popupStateMapping
+  const element = (0, _usePositioner.usePositioner)(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, store.useStateSetter('positionerElement')],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PreviewCardPositionerContext.PreviewCardPositionerContext.Provider, {
-    value: contextValue,
+    value: positioning,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingNode, {
       id: nodeId,
       children: element

package/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/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)
  */
@@ -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/preview-card/root/PreviewCardRoot.js

@@ -49,6 +49,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');
   (0, _popups.useImplicitActiveTrigger)(store);
@@ -69,7 +70,6 @@ function PreviewCardRootComponent(props) {
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
-  const floatingRootContext = store.useState('floatingRootContext');
   const dismiss = (0, _floatingUiReact.useDismiss)(floatingRootContext);
   const {
     getReferenceProps,
@@ -94,7 +94,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)
  */

package/preview-card/store/PreviewCardStore.js

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

package/preview-card/trigger/PreviewCardTrigger.js

@@ -32,6 +32,7 @@ const PreviewCardTrigger = exports.PreviewCardTrigger = /*#__PURE__*/React.forwa
     id: idProp,
     payload,
     handle,
+    style,
     ...elementProps
   } = componentProps;
   const rootContext = (0, _PreviewCardContext.usePreviewCardRootContext)(true);
@@ -66,7 +67,8 @@ const PreviewCardTrigger = exports.PreviewCardTrigger = /*#__PURE__*/React.forwa
       close: closeDelayWithDefault
     }),
     triggerElementRef,
-    isActiveTrigger: isTriggerActive
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending'
   });
   const focusProps = (0, _floatingUiReact.useFocus)(floatingRootContext, {
     delay: delayWithDefault

package/preview-card/viewport/PreviewCardViewport.js

@@ -30,6 +30,7 @@ const PreviewCardViewport = exports.PreviewCardViewport = /*#__PURE__*/React.for
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;

package/progress/indicator/ProgressIndicator.js

@@ -21,6 +21,7 @@ const ProgressIndicator = exports.ProgressIndicator = /*#__PURE__*/React.forward
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/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",
   /**