@base-ui/react 1.4.1 → 1.5.0

package/preview-card/store/PreviewCardStore.js

@@ -8,9 +8,7 @@ exports.PreviewCardStore = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _store = require("@base-ui/utils/store");
-var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _popups = require("../../utils/popups");
-var _floatingUiReact = require("../../floating-ui-react");
 var _reasons = require("../../internals/reasons");
 var _constants = require("../utils/constants");
 const selectors = {
@@ -19,17 +17,23 @@ const selectors = {
   hasViewport: (0, _store.createSelector)(state => state.hasViewport)
 };
 class PreviewCardStore extends _store.ReactStore {
-  constructor(initialState) {
-    super({
+  constructor(initialState, floatingId, nested = false) {
+    const triggerElements = new _popups.PopupTriggerMap();
+    const state = {
       ...createInitialState(),
       ...initialState
-    }, {
+    };
+    state.floatingRootContext = (0, _popups.createPopupFloatingRootContext)(triggerElements, floatingId, nested);
+    super(state, {
       popupRef: /*#__PURE__*/React.createRef(),
       onOpenChange: undefined,
       onOpenChangeComplete: undefined,
-      triggerElements: new _popups.PopupTriggerMap(),
+      triggerElements,
       closeDelayRef: {
         current: _constants.CLOSE_DELAY
+      },
+      inlineRectCoordsRef: {
+        current: undefined
       }
     }, selectors);
   }
@@ -45,6 +49,10 @@ class PreviewCardStore extends _store.ReactStore {
     if (eventDetails.isCanceled) {
       return;
     }
+    const event = eventDetails.event;
+    if (nextOpen && isHover && eventDetails.trigger && 'clientX' in event && 'clientY' in event && this.context.inlineRectCoordsRef.current?.element !== eventDetails.trigger) {
+      (0, _popups.updateInlineRectCoords)(this.context.inlineRectCoordsRef, eventDetails.trigger, event.clientX, event.clientY);
+    }
     this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const changeState = () => {
       const updatedState = {
@@ -57,14 +65,7 @@ class PreviewCardStore extends _store.ReactStore {
       } else if (reason === _reasons.REASONS.triggerHover) {
         updatedState.instantType = undefined;
       }
-
-      // If a popup is closing, the `trigger` may be null.
-      // We want to keep the previous value so that exit animations are played and focus is returned correctly.
-      const newTriggerId = eventDetails.trigger?.id ?? null;
-      if (newTriggerId || nextOpen) {
-        updatedState.activeTriggerId = newTriggerId;
-        updatedState.activeTriggerElement = eventDetails.trigger ?? null;
-      }
+      (0, _popups.setOpenTriggerState)(updatedState, nextOpen, eventDetails.trigger);
       this.update(updatedState);
     };
     if (isHover) {
@@ -76,23 +77,10 @@ class PreviewCardStore extends _store.ReactStore {
     }
   };
   static useStore(externalStore, initialState) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const internalStore = (0, _useRefWithInit.useRefWithInit)(() => {
-      return new PreviewCardStore(initialState);
-    }).current;
-    const store = externalStore ?? internalStore;
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const floatingRootContext = (0, _floatingUiReact.useSyncedFloatingRootContext)({
-      popupStore: store,
-      onOpenChange: store.setOpen
-    });
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const store = (0, _popups.usePopupStore)(externalStore, (floatingId, nested) => new PreviewCardStore(initialState, floatingId, nested)).store;
+    /* eslint-enable react-hooks/rules-of-hooks */
 
-    // It's safe to set this here because when this code runs for the first time,
-    // nothing has had a chance to subscribe to the `store` yet.
-    // For subsequent renders, the `floatingRootContext` reference remains the same,
-    // so it's basically a no-op.
-    store.state.floatingRootContext = floatingRootContext;
     return store;
   }
 }

package/preview-card/trigger/PreviewCardTrigger.js

@@ -9,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.PreviewCardTrigger = void 0;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
+var _fastHooks = require("@base-ui/utils/fastHooks");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _PreviewCardContext = require("../root/PreviewCardContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
@@ -23,7 +24,7 @@ var _floatingUiReact = require("../../floating-ui-react");
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
-const PreviewCardTrigger = exports.PreviewCardTrigger = /*#__PURE__*/React.forwardRef(function PreviewCardTrigger(componentProps, forwardedRef) {
+const PreviewCardTrigger = exports.PreviewCardTrigger = (0, _fastHooks.fastComponentRef)(function PreviewCardTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
@@ -44,6 +45,7 @@ const PreviewCardTrigger = exports.PreviewCardTrigger = /*#__PURE__*/React.forwa
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
   const floatingRootContext = store.useState('floatingRootContext');
+  const inlineRectCoordsRef = store.context.inlineRectCoordsRef;
   const triggerElementRef = React.useRef(null);
   const delayWithDefault = delay ?? _constants.OPEN_DELAY;
   const closeDelayWithDefault = closeDelay ?? _constants.CLOSE_DELAY;
@@ -77,10 +79,11 @@ const PreviewCardTrigger = exports.PreviewCardTrigger = /*#__PURE__*/React.forwa
     open: isOpenedByThisTrigger
   };
   const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  const inlineRectTriggerProps = (0, _popups.getInlineRectTriggerProps)(inlineRectCoordsRef, isOpenedByThisTrigger);
   const element = (0, _useRenderElement.useRenderElement)('a', componentProps, {
     state,
     ref: [forwardedRef, registerTrigger, triggerElementRef],
-    props: [hoverProps, focusProps.reference, rootTriggerProps, {
+    props: [hoverProps, focusProps.reference, rootTriggerProps, inlineRectTriggerProps, {
       id: thisTriggerId
     }, elementProps],
     stateAttributesMapping: _popupStateMapping.triggerOpenStateMapping

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 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
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)

package/preview-card/viewport/PreviewCardViewport.js

@@ -20,8 +20,8 @@ const stateAttributesMapping = {
 
 /**
  * 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
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)

package/preview-card/viewport/PreviewCardViewportDataAttributes.d.ts

@@ -11,7 +11,7 @@ export declare enum PreviewCardViewportDataAttributes {
    * Indicates the direction from which the popup was activated.
    * This can be used to create directional animations based on how the popup was triggered.
    * Contains space-separated values for both horizontal and vertical axes.
-   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   * @type {`${'left' | 'right'} ${'top' | 'bottom'}`}
    */
   activationDirection = "data-activation-direction",
   /**
@@ -20,7 +20,7 @@ export declare enum PreviewCardViewportDataAttributes {
   transitioning = "data-transitioning",
   /**
    * Present if animations should be instant.
-   * @type {'delay' | 'dismiss' | 'focus'}
+   * @type {'dismiss' | 'focus'}
    */
   instant = "data-instant",
 }

package/preview-card/viewport/PreviewCardViewportDataAttributes.js

@@ -17,7 +17,7 @@ let PreviewCardViewportDataAttributes = exports.PreviewCardViewportDataAttribute
    * Indicates the direction from which the popup was activated.
    * This can be used to create directional animations based on how the popup was triggered.
    * Contains space-separated values for both horizontal and vertical axes.
-   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   * @type {`${'left' | 'right'} ${'top' | 'bottom'}`}
    */
   PreviewCardViewportDataAttributes["activationDirection"] = "data-activation-direction";
   /**
@@ -26,7 +26,7 @@ let PreviewCardViewportDataAttributes = exports.PreviewCardViewportDataAttribute
   PreviewCardViewportDataAttributes["transitioning"] = "data-transitioning";
   /**
    * Present if animations should be instant.
-   * @type {'delay' | 'dismiss' | 'focus'}
+   * @type {'dismiss' | 'focus'}
    */
   PreviewCardViewportDataAttributes["instant"] = "data-instant";
   return PreviewCardViewportDataAttributes;

package/progress/indicator/ProgressIndicator.js

@@ -31,21 +31,16 @@ const ProgressIndicator = exports.ProgressIndicator = /*#__PURE__*/React.forward
     state
   } = (0, _ProgressRootContext.useProgressRootContext)();
   const percentageValue = Number.isFinite(value) && value !== null ? (0, _valueToPercent.valueToPercent)(value, min, max) : null;
-  const getStyles = React.useCallback(() => {
-    if (percentageValue == null) {
-      return {};
-    }
-    return {
-      insetInlineStart: 0,
-      height: 'inherit',
-      width: `${percentageValue}%`
-    };
-  }, [percentageValue]);
+  const indicatorStyle = percentageValue == null ? {} : {
+    insetInlineStart: 0,
+    height: 'inherit',
+    width: `${percentageValue}%`
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: forwardedRef,
     props: [{
-      style: getStyles()
+      style: indicatorStyle
     }, elementProps],
     stateAttributesMapping: _stateAttributesMapping.progressStateAttributesMapping
   });

package/progress/root/ProgressRoot.d.ts

@@ -16,7 +16,7 @@ export interface ProgressRootState {
 }
 export interface ProgressRootProps extends BaseUIComponentProps<'div', ProgressRootState> {
   /**
-   * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
+   * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the progress bar.
    */
   'aria-valuetext'?: React.AriaAttributes['aria-valuetext'] | undefined;
   /**

package/radio/root/RadioRoot.js

@@ -12,6 +12,7 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _empty = require("@base-ui/utils/empty");
+var _owner = require("@base-ui/utils/owner");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
 var _noop = require("../../internals/noop");
@@ -84,7 +85,6 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
   const required = requiredGroup || requiredProp;
   const form = formGroup;
   const checked = groupContext ? checkedValue === value : value === '';
-  const serializedValue = React.useMemo(() => (0, _serializeValue.serializeValue)(value), [value]);
   const radioRef = React.useRef(null);
   const inputRef = React.useRef(null);
   const handleControlRef = (0, _useStableCallback.useStableCallback)(element => {
@@ -138,7 +138,11 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
         return;
       }
       event.preventDefault();
-      inputRef.current?.dispatchEvent(new PointerEvent('click', {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.dispatchEvent(new ((0, _owner.ownerWindow)(input).PointerEvent)('click', {
         bubbles: true,
         shiftKey: event.shiftKey,
         ctrlKey: event.ctrlKey,
@@ -171,7 +175,7 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
     'aria-hidden': true,
     ...(value !== undefined ? {
-      value: serializedValue
+      value: (0, _serializeValue.serializeValue)(value)
     } : _empty.EMPTY_OBJECT),
     disabled,
     checked,

package/radio-group/RadioGroup.js

@@ -76,9 +76,9 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     name: 'RadioGroup',
     state: 'value'
   });
-  const onValueChange = (0, _useStableCallback.useStableCallback)(onValueChangeProp);
+  const [touched, setTouched] = React.useState(false);
   const setCheckedValue = (0, _useStableCallback.useStableCallback)((value, eventDetails) => {
-    onValueChange(value, eventDetails);
+    onValueChangeProp?.(value, eventDetails);
     if (eventDetails.isCanceled) {
       return;
     }
@@ -127,12 +127,7 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     }
     return undefined;
   });
-  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => checkedValue ?? null);
-  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
-    id,
-    value: checkedValue,
-    getValue: getFieldValue
-  });
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, id, checkedValue ?? null);
   (0, _useValueChanged.useValueChanged)(checkedValue, () => {
     clearErrors(name);
     setDirty(checkedValue !== validityData.initialValue);
@@ -147,7 +142,6 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
       setInputRef(fallbackInput);
     }
   });
-  const [touched, setTouched] = React.useState(false);
   const ariaLabelledby = elementProps['aria-labelledby'] ?? labelId ?? fieldsetContext?.legendId;
   const state = {
     ...fieldState,
@@ -162,7 +156,6 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     form,
     validation,
     name,
-    onValueChange,
     readOnly,
     registerControlRef,
     registerInputRef,
@@ -170,7 +163,7 @@ const RadioGroup = exports.RadioGroup = /*#__PURE__*/React.forwardRef(function R
     setCheckedValue,
     setTouched,
     touched
-  }), [checkedValue, disabled, form, validation, fieldState, name, onValueChange, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
+  }), [checkedValue, disabled, form, validation, fieldState, name, readOnly, registerControlRef, registerInputRef, required, setCheckedValue, setTouched, touched]);
   const defaultProps = {
     role: 'radiogroup',
     'aria-required': required || undefined,

package/radio-group/RadioGroupContext.d.ts

@@ -10,7 +10,6 @@ export interface RadioGroupContext<Value> {
   name: string | undefined;
   checkedValue: Value | undefined;
   setCheckedValue: (value: Value, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
-  onValueChange: (value: Value, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   touched: boolean;
   setTouched: React.Dispatch<React.SetStateAction<boolean>>;
   validation?: UseFieldValidationReturnValue | undefined;

package/scroll-area/content/ScrollAreaContent.js

@@ -25,19 +25,19 @@ const ScrollAreaContent = exports.ScrollAreaContent = /*#__PURE__*/React.forward
     style,
     ...elementProps
   } = componentProps;
-  const contentWrapperRef = React.useRef(null);
   const {
     computeThumbPosition
   } = (0, _ScrollAreaViewportContext.useScrollAreaViewportContext)();
   const {
     viewportState
   } = (0, _ScrollAreaRootContext.useScrollAreaRootContext)();
+  const contentWrapperRef = React.useRef(null);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }
     let hasInitialized = false;
-    const ro = new ResizeObserver(() => {
+    const resizeObserver = new ResizeObserver(() => {
       // ResizeObserver fires once upon observing, so we skip the initial call
       // to avoid double-calculating the thumb position on mount.
       if (!hasInitialized) {
@@ -47,10 +47,10 @@ const ScrollAreaContent = exports.ScrollAreaContent = /*#__PURE__*/React.forward
       computeThumbPosition();
     });
     if (contentWrapperRef.current) {
-      ro.observe(contentWrapperRef.current);
+      resizeObserver.observe(contentWrapperRef.current);
     }
     return () => {
-      ro.disconnect();
+      resizeObserver.disconnect();
     };
   }, [computeThumbPosition]);
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {

package/scroll-area/root/ScrollAreaRoot.js

@@ -19,7 +19,7 @@ var _styles = require("../../utils/styles");
 var _useBaseUiId = require("../../internals/useBaseUiId");
 var _stateAttributes = require("./stateAttributes");
 var _utils = require("../../floating-ui-react/utils");
-var _CSPContext = require("../../csp-provider/CSPContext");
+var _CSPContext = require("../../internals/csp-context/CSPContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const DEFAULT_COORDS = {
   x: 0,

package/scroll-area/scrollbar/ScrollAreaScrollbar.js

@@ -67,7 +67,12 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
   };
   const direction = (0, _DirectionContext.useDirection)();
   const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
+  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
+  const shouldRender = keepMounted || !isHidden;
   React.useEffect(() => {
+    if (!shouldRender) {
+      return undefined;
+    }
     const viewportEl = viewportRef.current;
     const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
     if (!scrollbarEl) {
@@ -78,30 +83,23 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
         return;
       }
       event.preventDefault();
-      if (orientation === 'vertical') {
-        if (viewportEl.scrollTop === 0 && event.deltaY < 0) {
-          return;
-        }
-      } else if (viewportEl.scrollLeft === 0 && event.deltaX < 0) {
+      const horizontal = orientation === 'horizontal';
+      const scrollProperty = horizontal ? 'scrollLeft' : 'scrollTop';
+      const delta = horizontal ? event.deltaX : event.deltaY;
+      const maxScroll = horizontal ? viewportEl.scrollWidth - viewportEl.clientWidth : viewportEl.scrollHeight - viewportEl.clientHeight;
+      // RTL horizontal scrolling uses a negative `scrollLeft` range, from 0 to `-maxScroll`.
+      const minScroll = horizontal && direction === 'rtl' ? -maxScroll : 0;
+      const maxScrollValue = horizontal && direction === 'rtl' ? 0 : maxScroll;
+      const scrollValue = viewportEl[scrollProperty];
+      if (scrollValue <= minScroll && delta < 0 || scrollValue >= maxScrollValue && delta > 0) {
         return;
       }
-      if (orientation === 'vertical') {
-        if (viewportEl.scrollTop === viewportEl.scrollHeight - viewportEl.clientHeight && event.deltaY > 0) {
-          return;
-        }
-      } else if (viewportEl.scrollLeft === viewportEl.scrollWidth - viewportEl.clientWidth && event.deltaX > 0) {
-        return;
-      }
-      if (orientation === 'vertical') {
-        viewportEl.scrollTop += event.deltaY;
-      } else {
-        viewportEl.scrollLeft += event.deltaX;
-      }
+      viewportEl[scrollProperty] = Math.min(maxScrollValue, Math.max(minScroll, scrollValue + delta));
     }
     return (0, _addEventListener.addEventListener)(scrollbarEl, 'wheel', handleWheel, {
       passive: false
     });
-  }, [orientation, scrollbarXRef, scrollbarYRef, viewportRef]);
+  }, [direction, orientation, scrollbarXRef, scrollbarYRef, shouldRender, viewportRef]);
   const props = {
     ...(rootId && {
       'data-id': `${rootId}-scrollbar`
@@ -192,8 +190,6 @@ const ScrollAreaScrollbar = exports.ScrollAreaScrollbar = /*#__PURE__*/React.for
   const contextValue = React.useMemo(() => ({
     orientation
   }), [orientation]);
-  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
-  const shouldRender = keepMounted || !isHidden;
   if (!shouldRender) {
     return null;
   }

package/scroll-area/viewport/ScrollAreaViewport.js

@@ -26,6 +26,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 // Module-level flag to ensure we only register the CSS properties once,
 // regardless of how many Scroll Area components are mounted.
 let scrollAreaOverflowVarsRegistered = false;
+
 /**
  * Removes inheritance of the scroll area overflow CSS variables, which
  * improves rendering performance in complex scroll areas with deep subtrees.
@@ -259,7 +260,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
       return undefined;
     }
     let hasInitialized = false;
-    const ro = new ResizeObserver(() => {
+    const resizeObserver = new ResizeObserver(() => {
       // Avoid duplicate mount-time recompute when observer data matches what the mount
       // scheduling pass already measured. If dimensions changed before the first observer
       // delivery, keep the recompute so overflow transitions stay in sync.
@@ -272,15 +273,10 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
       }
       computeThumbPosition();
     });
-    ro.observe(viewport);
+    resizeObserver.observe(viewport);
 
-    // If there are animations in the viewport, wait for them to finish and then recompute the thumb position.
-    // This is necessary when the viewport contains a Dialog that is animating its popup on open
-    // and the popup is using a transform for the animation, which affects the size of the viewport.
-    // Without this, the thumb position will be incorrect until scrolling (i.e. if the scrollbar shows
-    // on hover, the thumb has an incorrect size).
-    // We assume the user is using `onOpenChangeComplete` to hide the scrollbar
-    // until animations complete because otherwise the scrollbar would show the thumb resizing mid-animation.
+    // Wait for subtree animations to finish, then recompute thumb geometry that
+    // may have been affected by transform-based animations.
     waitForAnimationsTimeout.start(0, () => {
       const animations = viewport.getAnimations({
         subtree: true
@@ -291,7 +287,7 @@ const ScrollAreaViewport = exports.ScrollAreaViewport = /*#__PURE__*/React.forwa
       Promise.allSettled(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
     });
     return () => {
-      ro.disconnect();
+      resizeObserver.disconnect();
       waitForAnimationsTimeout.clear();
     };
   }, [computeThumbPosition, viewportRef, waitForAnimationsTimeout]);

package/select/arrow/SelectArrow.js

@@ -27,8 +27,8 @@ const stateAttributesMapping = {
  */
 const SelectArrow = exports.SelectArrow = /*#__PURE__*/React.forwardRef(function SelectArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/select/backdrop/SelectBackdrop.js

@@ -26,8 +26,8 @@ const stateAttributesMapping = {
  */
 const SelectBackdrop = exports.SelectBackdrop = /*#__PURE__*/React.forwardRef(function SelectBackdrop(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/select/group/SelectGroup.js

@@ -18,8 +18,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  */
 const SelectGroup = exports.SelectGroup = /*#__PURE__*/React.forwardRef(function SelectGroup(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/select/group-label/SelectGroupLabel.js

@@ -19,10 +19,10 @@ var _useRenderElement = require("../../internals/useRenderElement");
  */
 const SelectGroupLabel = exports.SelectGroupLabel = /*#__PURE__*/React.forwardRef(function SelectGroupLabel(componentProps, forwardedRef) {
   const {
-    className,
     render,
-    id: idProp,
+    className,
     style,
+    id: idProp,
     ...elementProps
   } = componentProps;
   const {

package/select/icon/SelectIcon.js

@@ -20,8 +20,8 @@ var _store2 = require("../store");
  */
 const SelectIcon = exports.SelectIcon = /*#__PURE__*/React.forwardRef(function SelectIcon(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;