@base-ui/react 1.4.0 → 1.5.0

package/esm/select/group/SelectGroup.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";
 /**
  * Groups related select items with the corresponding label.
  * Renders a `<div>` element.

package/esm/select/group/SelectGroup.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { SelectGroupContext } from "./SelectGroupContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Groups related select items with the corresponding label.
@@ -13,8 +13,8 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const SelectGroup = /*#__PURE__*/React.forwardRef(function SelectGroup(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/select/group-label/SelectGroupLabel.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";
 /**
  * An accessible label that is automatically associated with its parent group.
  * Renders a `<div>` element.

package/esm/select/group-label/SelectGroupLabel.js

@@ -2,9 +2,9 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { useSelectGroupContext } from "../group/SelectGroupContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * An accessible label that is automatically associated with its parent group.
@@ -14,10 +14,10 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
  */
 export const SelectGroupLabel = /*#__PURE__*/React.forwardRef(function SelectGroupLabel(componentProps, forwardedRef) {
   const {
-    className,
     render,
-    id: idProp,
+    className,
     style,
+    id: idProp,
     ...elementProps
   } = componentProps;
   const {

package/esm/select/icon/SelectIcon.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";
 /**
  * An icon that indicates that the trigger button opens a select popup.
  * Renders a `<span>` element.

package/esm/select/icon/SelectIcon.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { selectors } from "../store.js";
@@ -15,8 +15,8 @@ import { selectors } from "../store.js";
  */
 export const SelectIcon = /*#__PURE__*/React.forwardRef(function SelectIcon(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/select/item/SelectItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NonNativeButtonProps } from "../../internals/types.js";
 /**
  * An individual option in the select popup.
  * Renders a `<div>` element.

package/esm/select/item/SelectItem.js

@@ -2,17 +2,17 @@
 
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStore } from '@base-ui/utils/store';
 import { useSelectRootContext } from "../root/SelectRootContext.js";
-import { useCompositeListItem, IndexGuessBehavior } from "../../composite/list/useCompositeListItem.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useCompositeListItem, IndexGuessBehavior } from "../../internals/composite/list/useCompositeListItem.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { SelectItemContext } from "./SelectItemContext.js";
 import { selectors } from "../store.js";
-import { useButton } from "../../use-button/index.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { compareItemEquality, removeItem } from "../../utils/itemEquality.js";
+import { useButton } from "../../internals/use-button/index.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { compareItemEquality, removeItem } from "../../internals/itemEquality.js";
+import { isVirtualClick } from "../../floating-ui-react/utils/event.js";
 
 /**
  * An individual option in the select popup.
@@ -25,11 +25,11 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   const {
     render,
     className,
+    style,
     value: itemValue = null,
     label,
     disabled = false,
     nativeButton = false,
-    style,
     ...elementProps
   } = componentProps;
   const textRef = React.useRef(null);
@@ -40,7 +40,7 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   });
   const {
     store,
-    getItemProps,
+    itemProps,
     setOpen,
     setValue,
     selectionRef,
@@ -56,7 +56,6 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
   const index = listItem.index;
   const hasRegistered = index !== -1;
   const itemRef = React.useRef(null);
-  const indexRef = useValueAsRef(index);
   useIsoLayoutEffect(() => {
     if (!hasRegistered) {
       return undefined;
@@ -85,19 +84,9 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       }
     }
   }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue, selectedItemTextRef]);
-  const state = {
-    disabled,
-    selected,
-    highlighted
-  };
-  const rootProps = getItemProps({
-    active: highlighted,
-    selected
-  });
-  rootProps.id = undefined;
   const lastKeyRef = React.useRef(null);
   const pointerTypeRef = React.useRef('mouse');
-  const didPointerDownRef = React.useRef(false);
+  const allowMouseSelectionRef = React.useRef(false);
   const {
     getButtonProps,
     buttonRef
@@ -107,6 +96,11 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     native: nativeButton,
     composite: true
   });
+  const state = {
+    disabled,
+    selected,
+    highlighted
+  };
   function commitSelection(event) {
     const selectedValue = store.state.value;
     if (multiple) {
@@ -118,16 +112,13 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       setOpen(false, createChangeEventDetails(REASONS.itemPress, event));
     }
   }
+  function resetDragMovement() {
+    selectionRef.current.dragY = 0;
+  }
   const defaultProps = {
     role: 'option',
     'aria-selected': selected,
     tabIndex: highlighted ? 0 : -1,
-    onTouchStart() {
-      selectionRef.current = {
-        allowSelectedMouseUp: false,
-        allowUnselectedMouseUp: false
-      };
-    },
     onKeyDown(event) {
       lastKeyRef.current = event.key;
       store.set('activeIndex', index);
@@ -136,13 +127,24 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
       }
     },
     onClick(event) {
-      didPointerDownRef.current = false;
+      const isMouseClick = event.type === 'click' && pointerTypeRef.current !== 'touch';
+      const clickPointerType = event.nativeEvent.pointerType;
+      const isVirtualMouseClick = isMouseClick && isVirtualClick(event.nativeEvent) && (
+      // Generic no-pointer `detail === 0` clicks stay tied to highlight state. Virtual
+      // clicks that carry browser pointer data, including an empty string from assistive
+      // technology, can activate unhighlighted items.
+      clickPointerType !== undefined || highlighted);
+      // With alignItemWithTrigger, opening can place an item under the cursor. Real mouse
+      // clicks must start on the item, while virtual clicks represent explicit keyboard or
+      // assistive technology activation.
+      const isInvalidMouseClick = isMouseClick && !isVirtualMouseClick && !allowMouseSelectionRef.current;
+      allowMouseSelectionRef.current = false;
 
       // Prevent double commit on {Enter}
       if (event.type === 'keydown' && lastKeyRef.current === null) {
         return;
       }
-      if (disabled || event.type === 'keydown' && lastKeyRef.current === ' ' && typingRef.current || pointerTypeRef.current !== 'touch' && !highlighted) {
+      if (disabled || event.type === 'keydown' && lastKeyRef.current === ' ' && typingRef.current || isInvalidMouseClick) {
         return;
       }
       lastKeyRef.current = null;
@@ -151,40 +153,52 @@ export const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(
     onPointerEnter(event) {
       pointerTypeRef.current = event.pointerType;
     },
+    onPointerMove(event) {
+      if (event.pointerType === 'mouse' && event.buttons === 1) {
+        const selection = selectionRef.current;
+        selection.dragY += event.movementY;
+        if (selection.dragY ** 2 >= 64) {
+          selection.allowUnselectedMouseUp = true;
+        }
+      }
+    },
     onPointerDown(event) {
       pointerTypeRef.current = event.pointerType;
-      didPointerDownRef.current = true;
+      allowMouseSelectionRef.current = true;
+      resetDragMovement();
     },
     onMouseUp() {
-      if (disabled) {
+      resetDragMovement();
+      if (disabled || pointerTypeRef.current === 'touch') {
         return;
       }
 
-      // Regular click (pointerdown on this element) if didPointerDownRef is set, otherwise drag-to-select
-      if (didPointerDownRef.current) {
-        didPointerDownRef.current = false;
+      // Regular clicks are committed by the click event.
+      if (allowMouseSelectionRef.current) {
         return;
       }
       const disallowSelectedMouseUp = !selectionRef.current.allowSelectedMouseUp && selected;
       const disallowUnselectedMouseUp = !selectionRef.current.allowUnselectedMouseUp && !selected;
-      if (disallowSelectedMouseUp || disallowUnselectedMouseUp || pointerTypeRef.current !== 'touch' && !highlighted) {
+      if (disallowSelectedMouseUp || disallowUnselectedMouseUp) {
         return;
       }
+      allowMouseSelectionRef.current = true;
       itemRef.current?.click();
+      allowMouseSelectionRef.current = false;
     }
   };
   const element = useRenderElement('div', componentProps, {
     ref: [buttonRef, forwardedRef, listItem.ref, itemRef],
     state,
-    props: [rootProps, defaultProps, elementProps, getButtonProps]
+    props: [itemProps, defaultProps, elementProps, getButtonProps]
   });
   const contextValue = React.useMemo(() => ({
     selected,
-    indexRef,
+    index,
     textRef,
     selectedByFocus,
     hasRegistered
-  }), [selected, indexRef, textRef, selectedByFocus, hasRegistered]);
+  }), [selected, index, textRef, selectedByFocus, hasRegistered]);
   return /*#__PURE__*/_jsx(SelectItemContext.Provider, {
     value: contextValue,
     children: element

package/esm/select/item/SelectItemContext.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface SelectItemContext {
   selected: boolean;
-  indexRef: React.RefObject<number>;
+  index: number;
   textRef: React.RefObject<HTMLElement | null>;
   selectedByFocus: boolean;
   hasRegistered: boolean;

package/esm/select/item-indicator/SelectItemIndicator.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";
 /**
  * Indicates whether the select item is selected.
  * Renders a `<span>` element.

package/esm/select/item-indicator/SelectItemIndicator.js

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import { useSelectItemContext } from "../item/SelectItemContext.js";
-import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
 
 /**
  * Indicates whether the select item is selected.
@@ -31,8 +31,7 @@ export const SelectItemIndicator = /*#__PURE__*/React.forwardRef(function Select
   });
 });
 
-/** The core implementation of the indicator is split here to avoid paying the hooks
- * costs unless the element needs to be mounted. */
+// Split the core implementation to avoid paying the hook costs unless the element needs to mount.
 if (process.env.NODE_ENV !== "production") SelectItemIndicator.displayName = "SelectItemIndicator";
 const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentProps, forwardedRef) => {
   const {

package/esm/select/item-indicator/SelectItemIndicatorDataAttributes.js

@@ -1,4 +1,4 @@
-import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.js";
 export let SelectItemIndicatorDataAttributes = function (SelectItemIndicatorDataAttributes) {
   /**
    * Present when the indicator is animating in.

package/esm/select/item-text/SelectItemText.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";
 /**
  * A text label of the select item.
  * Renders a `<div>` element.

package/esm/select/item-text/SelectItemText.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { useSelectItemContext } from "../item/SelectItemContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * A text label of the select item.
@@ -13,29 +13,32 @@ import { useRenderElement } from "../../utils/useRenderElement.js";
  */
 export const SelectItemText = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function SelectItemText(componentProps, forwardedRef) {
   const {
-    indexRef,
+    index,
     textRef,
     selectedByFocus,
     hasRegistered
   } = useSelectItemContext();
   const {
+    firstItemTextRef,
     selectedItemTextRef
   } = useSelectRootContext();
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;
   const localRef = React.useCallback(node => {
-    if (!node || !hasRegistered) {
+    if (!node) {
       return;
     }
-    const hasNoSelectedItemText = selectedItemTextRef.current === null || !selectedItemTextRef.current.isConnected;
-    if (selectedByFocus || hasNoSelectedItemText && indexRef.current === 0) {
+    if (hasRegistered && index === 0) {
+      firstItemTextRef.current = node;
+    }
+    if (hasRegistered && selectedByFocus) {
       selectedItemTextRef.current = node;
     }
-  }, [selectedItemTextRef, indexRef, selectedByFocus, hasRegistered]);
+  }, [firstItemTextRef, selectedItemTextRef, index, selectedByFocus, hasRegistered]);
   const element = useRenderElement('div', componentProps, {
     ref: [localRef, forwardedRef, textRef],
     props: elementProps

package/esm/select/label/SelectLabel.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 { FieldRoot } from "../../field/root/FieldRoot.js";
 /**
  * An accessible label that is automatically associated with the select trigger.

package/esm/select/label/SelectLabel.js

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import { useStore } from '@base-ui/utils/store';
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { fieldValidityMapping } from "../../field/utils/constants.js";
-import { useLabel } from "../../labelable-provider/useLabel.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { useLabel } from "../../internals/labelable-provider/useLabel.js";
 import { getDefaultLabelId } from "../../utils/resolveAriaLabelledBy.js";
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { selectors } from "../store.js";

package/esm/select/list/SelectList.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";
 /**
  * A container for the select items.
  * Renders a `<div>` element.

package/esm/select/list/SelectList.js

@@ -5,7 +5,7 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useStore } from '@base-ui/utils/store';
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { styleDisableScrollbar } from "../../utils/styles.js";
 import { LIST_FUNCTIONAL_STYLES } from "../popup/utils.js";
 import { selectors } from "../store.js";
@@ -18,8 +18,8 @@ import { selectors } from "../store.js";
  */
 export const SelectList = /*#__PURE__*/React.forwardRef(function SelectList(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/select/popup/SelectPopup.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A container for the select list.
  * Renders a `<div>` element.

package/esm/select/popup/SelectPopup.js

@@ -14,20 +14,20 @@ import { useSelectFloatingContext, useSelectRootContext } from "../root/SelectRo
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.js";
 import { styleDisableScrollbar } from "../../utils/styles.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 { selectors } from "../store.js";
 import { clearStyles, LIST_FUNCTIONAL_STYLES } from "./utils.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 { useToolbarRootContext } from "../../toolbar/root/ToolbarRootContext.js";
-import { COMPOSITE_KEYS } from "../../composite/composite.js";
+import { COMPOSITE_KEYS } from "../../internals/composite/composite.js";
 import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
-import { clamp } from "../../utils/clamp.js";
+import { clamp } from "../../internals/clamp.js";
 import { getMaxScrollOffset, SCROLL_EDGE_TOLERANCE_PX } from "../../utils/scrollEdges.js";
-import { useCSPContext } from "../../csp-provider/CSPContext.js";
-import { useDirection } from "../../direction-provider/DirectionContext.js";
+import { useCSPContext } from "../../internals/csp-context/CSPContext.js";
+import { useDirection } from "../../internals/direction-context/DirectionContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...popupStateMapping,
@@ -54,6 +54,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     onOpenChangeComplete,
     setOpen,
     valueRef,
+    firstItemTextRef,
     selectedItemTextRef,
     keyboardActiveRef,
     multiple,
@@ -233,7 +234,11 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     const restoreTransformStyles = unsetTransformStyles(popupElement);
     popupElement.style.removeProperty('--transform-origin');
     try {
-      const textElement = selectedItemTextRef.current;
+      let textElement = selectedItemTextRef.current;
+      if (!textElement?.isConnected) {
+        const hasSelectedValue = selectors.hasSelectedValue(store.state);
+        textElement = !hasSelectedValue && firstItemTextRef.current?.isConnected ? firstItemTextRef.current : null;
+      }
       const valueElement = valueRef.current;
       const positionerStyles = getComputedStyle(positionerElement);
       const popupStyles = getComputedStyle(popupElement);
@@ -325,7 +330,7 @@ export const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(co
     } finally {
       restoreTransformStyles();
     }
-  }, [store, open, positionerElement, triggerElement, valueRef, selectedItemTextRef, popupRef, handleScrollArrowVisibility, alignItemWithTriggerActive, setControlledAlignItemWithTrigger, scrollArrowFrame, scrollDownArrowRef, scrollUpArrowRef, listElement, listRef, highlightItemOnHover, direction, isPositioned]);
+  }, [store, open, positionerElement, triggerElement, valueRef, firstItemTextRef, selectedItemTextRef, popupRef, handleScrollArrowVisibility, alignItemWithTriggerActive, setControlledAlignItemWithTrigger, scrollArrowFrame, scrollDownArrowRef, scrollUpArrowRef, listElement, listRef, highlightItemOnHover, direction, isPositioned]);
   React.useEffect(() => {
     if (!alignItemWithTriggerActive || !positionerElement || !open) {
       return undefined;

package/esm/select/positioner/SelectPositioner.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, type Side, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 /**
  * Positions the select popup.

package/esm/select/positioner/SelectPositioner.js

@@ -6,16 +6,16 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useStore } from '@base-ui/utils/store';
 import { useSelectRootContext, useSelectFloatingContext } from "../root/SelectRootContext.js";
-import { CompositeList } from "../../composite/list/CompositeList.js";
+import { CompositeList } from "../../internals/composite/list/CompositeList.js";
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
 import { SelectPositionerContext } from "./SelectPositionerContext.js";
 import { InternalBackdrop } from "../../utils/InternalBackdrop.js";
-import { DROPDOWN_COLLISION_AVOIDANCE } from "../../utils/constants.js";
+import { DROPDOWN_COLLISION_AVOIDANCE } from "../../internals/constants.js";
 import { clearStyles } from "../popup/utils.js";
 import { selectors } from "../store.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { findItemIndex, selectedValueIncludes } from "../../utils/itemEquality.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { findItemIndex, selectedValueIncludes } from "../../internals/itemEquality.js";
 import { usePositioner } from "../../utils/usePositioner.js";
 import { useAnchoredPopupScrollLock } from "../../utils/useAnchoredPopupScrollLock.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -114,6 +114,9 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
     align: positioning.align,
     anchorHidden: positioning.anchorHidden
   };
+  useIsoLayoutEffect(() => {
+    store.set('popupSide', positioning.side);
+  }, [store, positioning.side]);
   const setPositionerElement = useStableCallback(element => {
     store.set('positionerElement', element);
   });

package/esm/select/root/SelectRoot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { type Group } from "../../utils/resolveValueLabel.js";
+import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { type Group } from "../../internals/resolveValueLabel.js";
 /**
  * Groups all parts of the select.
  * Doesn't render its own HTML element.