@base-ui/react 1.3.0 → 1.4.0

package/esm/popover/popup/PopoverPopup.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.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 { 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

@@ -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/esm/popover/root/PopoverRoot.js

@@ -1,7 +1,6 @@
 '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";
@@ -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,7 +60,6 @@ function PopoverRootComponent({
       openChangeReason: null
     });
   });
-  useScrollLock(open && modal === true && openReason !== REASONS.triggerHover && openMethod !== 'touch', positionerElement);
   React.useEffect(() => {
     if (!open) {
       store.context.stickIfOpenTimeout.clear();
@@ -132,7 +128,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/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.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.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.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.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.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/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 { 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

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

@@ -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);
@@ -63,7 +64,6 @@ function PreviewCardRootComponent(props) {
     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)
  */

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.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.js

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

package/esm/progress/indicator/ProgressIndicator.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.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.js

@@ -32,6 +32,7 @@ export const ProgressRoot = /*#__PURE__*/React.forwardRef(function ProgressRoot(
     render,
     className,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();

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

@@ -4,7 +4,7 @@ export declare enum ProgressRootDataAttributes {
    */
   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/root/ProgressRootDataAttributes.js

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

package/esm/progress/track/ProgressTrack.js

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

package/esm/progress/track/ProgressTrackDataAttributes.d.ts

@@ -4,7 +4,7 @@ export declare enum ProgressTrackDataAttributes {
    */
   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/track/ProgressTrackDataAttributes.js

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