@base-ui/react 1.4.0 → 1.5.0

package/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/select/label/SelectLabel.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectLabel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@base-ui/utils/store");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _constants = require("../../field/utils/constants");
-var _useLabel = require("../../labelable-provider/useLabel");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _constants = require("../../internals/field-constants/constants");
+var _useLabel = require("../../internals/labelable-provider/useLabel");
 var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _store2 = require("../store");

package/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/select/list/SelectList.js

@@ -11,7 +11,7 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _store = require("@base-ui/utils/store");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _SelectPositionerContext = require("../positioner/SelectPositionerContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _styles = require("../../utils/styles");
 var _utils = require("../popup/utils");
 var _store2 = require("../store");
@@ -23,8 +23,8 @@ var _store2 = require("../store");
  */
 const SelectList = exports.SelectList = /*#__PURE__*/React.forwardRef(function SelectList(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/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/select/popup/SelectPopup.js

@@ -20,20 +20,20 @@ var _SelectRootContext = require("../root/SelectRootContext");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _SelectPositionerContext = require("../positioner/SelectPositionerContext");
 var _styles = require("../../utils/styles");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _store2 = require("../store");
 var _utils2 = require("./utils");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _ToolbarRootContext = require("../../toolbar/root/ToolbarRootContext");
-var _composite = require("../../composite/composite");
+var _composite = require("../../internals/composite/composite");
 var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
-var _clamp = require("../../utils/clamp");
+var _clamp = require("../../internals/clamp");
 var _scrollEdges = require("../../utils/scrollEdges");
-var _CSPContext = require("../../csp-provider/CSPContext");
-var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _CSPContext = require("../../internals/csp-context/CSPContext");
+var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -60,6 +60,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     onOpenChangeComplete,
     setOpen,
     valueRef,
+    firstItemTextRef,
     selectedItemTextRef,
     keyboardActiveRef,
     multiple,
@@ -239,7 +240,11 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     const restoreTransformStyles = unsetTransformStyles(popupElement);
     popupElement.style.removeProperty('--transform-origin');
     try {
-      const textElement = selectedItemTextRef.current;
+      let textElement = selectedItemTextRef.current;
+      if (!textElement?.isConnected) {
+        const hasSelectedValue = _store2.selectors.hasSelectedValue(store.state);
+        textElement = !hasSelectedValue && firstItemTextRef.current?.isConnected ? firstItemTextRef.current : null;
+      }
       const valueElement = valueRef.current;
       const positionerStyles = getComputedStyle(positionerElement);
       const popupStyles = getComputedStyle(popupElement);
@@ -331,7 +336,7 @@ const SelectPopup = exports.SelectPopup = /*#__PURE__*/React.forwardRef(function
     } 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/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/select/positioner/SelectPositioner.js

@@ -12,16 +12,16 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _store = require("@base-ui/utils/store");
 var _SelectRootContext = require("../root/SelectRootContext");
-var _CompositeList = require("../../composite/list/CompositeList");
+var _CompositeList = require("../../internals/composite/list/CompositeList");
 var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
 var _SelectPositionerContext = require("./SelectPositionerContext");
 var _InternalBackdrop = require("../../utils/InternalBackdrop");
-var _constants = require("../../utils/constants");
+var _constants = require("../../internals/constants");
 var _utils = require("../popup/utils");
 var _store2 = require("../store");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
-var _itemEquality = require("../../utils/itemEquality");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
+var _itemEquality = require("../../internals/itemEquality");
 var _usePositioner = require("../../utils/usePositioner");
 var _useAnchoredPopupScrollLock = require("../../utils/useAnchoredPopupScrollLock");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -120,6 +120,9 @@ const SelectPositioner = exports.SelectPositioner = /*#__PURE__*/React.forwardRe
     align: positioning.align,
     anchorHidden: positioning.anchorHidden
   };
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    store.set('popupSide', positioning.side);
+  }, [store, positioning.side]);
   const setPositionerElement = (0, _useStableCallback.useStableCallback)(element => {
     store.set('positionerElement', element);
   });

package/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.

package/select/root/SelectRoot.js

@@ -17,23 +17,24 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _store = require("@base-ui/utils/store");
+var _empty = require("@base-ui/utils/empty");
 var _floatingUiReact = require("../../floating-ui-react");
 var _SelectRootContext = require("./SelectRootContext");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _useRegisterFieldControl = require("../../field/root/useRegisterFieldControl");
-var _useLabelableId = require("../../labelable-provider/useLabelableId");
-var _useTransitionStatus = require("../../utils/useTransitionStatus");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _useRegisterFieldControl = require("../../internals/field-register-control/useRegisterFieldControl");
+var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
+var _useTransitionStatus = require("../../internals/useTransitionStatus");
 var _store2 = require("../store");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _FormContext = require("../../form/FormContext");
-var _resolveValueLabel = require("../../utils/resolveValueLabel");
-var _constants = require("../../utils/constants");
-var _itemEquality = require("../../utils/itemEquality");
-var _useValueChanged = require("../../utils/useValueChanged");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _FormContext = require("../../internals/form-context/FormContext");
+var _resolveValueLabel = require("../../internals/resolveValueLabel");
+var _itemEquality = require("../../internals/itemEquality");
+var _useValueChanged = require("../../internals/useValueChanged");
 var _useOpenInteractionType = require("../../utils/useOpenInteractionType");
 var _scrollEdges = require("../../utils/scrollEdges");
+var _popups = require("../../utils/popups");
 var _mergeProps = require("../../merge-props");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -91,7 +92,7 @@ function SelectRoot(props) {
   const name = fieldName ?? nameProp;
   const [value, setValueUnwrapped] = (0, _useControlled.useControlled)({
     controlled: valueProp,
-    default: multiple ? defaultValue ?? _constants.EMPTY_ARRAY : defaultValue,
+    default: multiple ? defaultValue ?? _empty.EMPTY_ARRAY : defaultValue,
     name: 'Select',
     state: 'value'
   });
@@ -110,10 +111,12 @@ function SelectRoot(props) {
   const valuesRef = React.useRef([]);
   const typingRef = React.useRef(false);
   const keyboardActiveRef = React.useRef(false);
+  const firstItemTextRef = React.useRef(null);
   const selectedItemTextRef = React.useRef(null);
   const selectionRef = React.useRef({
     allowSelectedMouseUp: false,
-    allowUnselectedMouseUp: false
+    allowUnselectedMouseUp: false,
+    dragY: 0
   });
   const alignItemWithTriggerActiveRef = React.useRef(false);
   const {
@@ -147,6 +150,7 @@ function SelectRoot(props) {
     triggerElement: null,
     positionerElement: null,
     listElement: null,
+    popupSide: null,
     scrollUpArrowVisible: false,
     scrollDownArrowVisible: false,
     hasScrollArrows: false
@@ -170,13 +174,10 @@ function SelectRoot(props) {
     return (0, _resolveValueLabel.stringifyAsValue)(value, itemToStringValue);
   }, [multiple, value, itemToStringValue]);
   const controlRef = (0, _useValueAsRef.useValueAsRef)(store.state.triggerElement);
-  const getFieldValue = (0, _useStableCallback.useStableCallback)(() => fieldStringValue);
-  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
-    id: generatedId,
-    value,
-    getValue: getFieldValue
-  });
+  const getStringifiedValueForForm = (0, _useStableCallback.useStableCallback)(() => fieldStringValue);
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, generatedId, value, getStringifiedValueForForm);
   const initialValueRef = React.useRef(value);
+  const hasSelectedValue = multiple ? Array.isArray(value) && value.length > 0 : value != null;
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     // Ensure the values and labels are registered for programmatic value changes.
     if (value !== initialValueRef.current) {
@@ -184,27 +185,32 @@ function SelectRoot(props) {
     }
   }, [store, value]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    setFilled(multiple ? Array.isArray(value) && value.length > 0 : value != null);
-  }, [multiple, value, setFilled]);
+    setFilled(hasSelectedValue);
+  }, [hasSelectedValue, setFilled]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(function syncSelectedIndex() {
-    if (open) {
-      return;
-    }
     const registry = valuesRef.current;
+    let nextIndex;
     if (multiple) {
       const currentValue = Array.isArray(value) ? value : [];
       if (currentValue.length === 0) {
-        store.set('selectedIndex', null);
-        return;
+        nextIndex = null;
+      } else {
+        const lastValue = currentValue[currentValue.length - 1];
+        const lastIndex = (0, _itemEquality.findItemIndex)(registry, lastValue, isItemEqualToValue);
+        nextIndex = lastIndex === -1 ? null : lastIndex;
       }
-      const lastValue = currentValue[currentValue.length - 1];
-      const lastIndex = (0, _itemEquality.findItemIndex)(registry, lastValue, isItemEqualToValue);
-      store.set('selectedIndex', lastIndex === -1 ? null : lastIndex);
+    } else {
+      const index = (0, _itemEquality.findItemIndex)(registry, value, isItemEqualToValue);
+      nextIndex = index === -1 ? null : index;
+    }
+    if (nextIndex === null) {
+      selectedItemTextRef.current = null;
+    }
+    if (open) {
       return;
     }
-    const index = (0, _itemEquality.findItemIndex)(registry, value, isItemEqualToValue);
-    store.set('selectedIndex', index === -1 ? null : index);
-  }, [multiple, open, value, valuesRef, isItemEqualToValue, store]);
+    store.set('selectedIndex', nextIndex);
+  }, [hasSelectedValue, multiple, open, value, valuesRef, isItemEqualToValue, store, selectedItemTextRef]);
   (0, _useValueChanged.useValueChanged)(value, () => {
     clearErrors(name);
     setDirty(value !== validityData.initialValue);
@@ -298,15 +304,13 @@ function SelectRoot(props) {
     enabled: !readOnly && !disabled,
     event: 'mousedown'
   });
-  const dismiss = (0, _floatingUiReact.useDismiss)(floatingContext, {
-    bubbles: false
-  });
+  const dismiss = (0, _floatingUiReact.useDismiss)(floatingContext);
   const listNavigation = (0, _floatingUiReact.useListNavigation)(floatingContext, {
     enabled: !readOnly && !disabled,
     listRef,
     activeIndex,
     selectedIndex,
-    disabledIndices: _constants.EMPTY_ARRAY,
+    disabledIndices: _empty.EMPTY_ARRAY,
     onNavigate(nextActiveIndex) {
       // Retain the highlight while transitioning out.
       if (nextActiveIndex === null && !open) {
@@ -328,23 +332,22 @@ function SelectRoot(props) {
         setValue(valuesRef.current[index], (0, _createBaseUIEventDetails.createChangeEventDetails)('none'));
       }
     },
-    onTypingChange(typing) {
+    onTyping(typing) {
       typingRef.current = typing;
     }
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps
-  } = (0, _floatingUiReact.useInteractions)([click, dismiss, listNavigation, typeahead]);
   const mergedTriggerProps = React.useMemo(() => {
-    return (0, _mergeProps.mergeProps)(getReferenceProps(), interactionTypeProps, generatedId ? {
-      id: generatedId
-    } : _constants.EMPTY_OBJECT);
-  }, [getReferenceProps, interactionTypeProps, generatedId]);
+    const triggerInteractionProps = (0, _mergeProps.mergeProps)(typeahead.reference, listNavigation.reference, dismiss.reference, click.reference, interactionTypeProps);
+    if (generatedId) {
+      triggerInteractionProps.id = generatedId;
+    }
+    return triggerInteractionProps;
+  }, [click.reference, typeahead.reference, listNavigation.reference, dismiss.reference, interactionTypeProps, generatedId]);
+  const popupProps = React.useMemo(() => (0, _mergeProps.mergeProps)(_popups.FOCUSABLE_POPUP_PROPS, typeahead.floating, listNavigation.floating, dismiss.floating), [typeahead.floating, listNavigation.floating, dismiss.floating]);
+  const itemProps = listNavigation.item ?? _empty.EMPTY_OBJECT;
   (0, _useOnFirstRender.useOnFirstRender)(() => {
     store.update({
-      popupProps: getFloatingProps(),
+      popupProps,
       triggerProps: mergedTriggerProps
     });
   });
@@ -357,7 +360,7 @@ function SelectRoot(props) {
       open,
       mounted,
       transitionStatus,
-      popupProps: getFloatingProps(),
+      popupProps,
       triggerProps: mergedTriggerProps,
       items,
       itemToStringLabel,
@@ -365,7 +368,7 @@ function SelectRoot(props) {
       isItemEqualToValue,
       openMethod: renderedOpenMethod
     });
-  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, getFloatingProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, renderedOpenMethod]);
+  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, popupProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, renderedOpenMethod]);
   const contextValue = React.useMemo(() => ({
     store,
     name,
@@ -373,8 +376,6 @@ function SelectRoot(props) {
     disabled,
     readOnly,
     multiple,
-    itemToStringLabel,
-    itemToStringValue,
     highlightItemOnHover,
     setValue,
     setOpen,
@@ -383,20 +384,21 @@ function SelectRoot(props) {
     scrollHandlerRef,
     handleScrollArrowVisibility,
     scrollArrowsMountedCountRef,
-    getItemProps,
+    itemProps,
     events: floatingContext.context.events,
     valueRef,
     valuesRef,
     labelsRef,
     typingRef,
     selectionRef,
+    firstItemTextRef,
     selectedItemTextRef,
     validation,
     onOpenChangeComplete,
     keyboardActiveRef,
     alignItemWithTriggerActiveRef,
     initialValueRef
-  }), [store, name, required, disabled, readOnly, multiple, itemToStringLabel, itemToStringValue, highlightItemOnHover, setValue, setOpen, getItemProps, floatingContext.context.events, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
+  }), [store, name, required, disabled, readOnly, multiple, highlightItemOnHover, setValue, setOpen, itemProps, floatingContext.context.events, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
   const ref = (0, _useMergedRefs.useMergedRefs)(inputRef, validation.inputRef);
   const hasMultipleSelection = multiple && Array.isArray(value) && value.length > 0;
   const hiddenInputName = multiple ? undefined : name;
@@ -430,7 +432,9 @@ function SelectRoot(props) {
           // Handle browser autofill.
           onChange(event) {
             // Workaround for https://github.com/facebook/react/issues/9023
-            if (event.nativeEvent.defaultPrevented) {
+            if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
+              // Outside Field.Root, the event is not wrapped by mergeProps.
+              event.preventBaseUIHandler?.();
               return;
             }
             const nextValue = event.currentTarget.value;

package/select/root/SelectRootContext.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type FloatingEvents } from "../../floating-ui-react/index.js";
 import type { SelectStore } from "../store.js";
 import type { UseFieldValidationReturnValue } from "../../field/root/useFieldValidation.js";
-import type { HTMLProps } from "../../utils/types.js";
+import type { HTMLProps } from "../../internals/types.js";
 import type { SelectRoot } from "./SelectRoot.js";
 export interface SelectRootContext {
   store: SelectStore;
@@ -19,10 +19,7 @@ export interface SelectRootContext {
   scrollHandlerRef: React.RefObject<((el: HTMLDivElement) => void) | null>;
   handleScrollArrowVisibility: () => void;
   scrollArrowsMountedCountRef: React.RefObject<number>;
-  getItemProps: (props?: HTMLProps & {
-    active?: boolean | undefined;
-    selected?: boolean | undefined;
-  }) => Record<string, unknown>;
+  itemProps: HTMLProps;
   events: FloatingEvents;
   valueRef: React.RefObject<HTMLSpanElement | null>;
   valuesRef: React.RefObject<Array<any>>;
@@ -31,8 +28,10 @@ export interface SelectRootContext {
   selectionRef: React.RefObject<{
     allowUnselectedMouseUp: boolean;
     allowSelectedMouseUp: boolean;
+    dragY: number;
   }>;
-  selectedItemTextRef: React.RefObject<HTMLSpanElement | null>;
+  firstItemTextRef: React.RefObject<HTMLElement | null>;
+  selectedItemTextRef: React.RefObject<HTMLElement | null>;
   validation: UseFieldValidationReturnValue;
   onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   keyboardActiveRef: React.RefObject<boolean>;

package/select/scroll-arrow/SelectScrollArrow.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import { Side } from "../../utils/useAnchorPositioning.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * @internal
  */

package/select/scroll-arrow/SelectScrollArrow.js

@@ -12,9 +12,9 @@ var _store = require("@base-ui/utils/store");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _SelectPositionerContext = require("../positioner/SelectPositionerContext");
-var _useTransitionStatus = require("../../utils/useTransitionStatus");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useTransitionStatus = require("../../internals/useTransitionStatus");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _scrollEdges = require("../../utils/scrollEdges");
 var _store2 = require("../store");
 /**

package/select/scroll-down-arrow/SelectScrollDownArrow.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 element that scrolls the select popup down when hovered. Does not render when using touch input.
  * Renders a `<div>` element.

package/select/scroll-up-arrow/SelectScrollUpArrow.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 element that scrolls the select popup up when hovered. Does not render when using touch input.
  * Renders a `<div>` element.

package/select/store.d.ts

@@ -1,8 +1,9 @@
 import { Store } from '@base-ui/utils/store';
 import { type InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
-import type { TransitionStatus } from "../utils/useTransitionStatus.js";
-import type { HTMLProps } from "../utils/types.js";
-import { type Group } from "../utils/resolveValueLabel.js";
+import type { TransitionStatus } from "../internals/useTransitionStatus.js";
+import type { HTMLProps } from "../internals/types.js";
+import type { Side } from "../utils/useAnchorPositioning.js";
+import { type Group } from "../internals/resolveValueLabel.js";
 export type State = {
   id: string | undefined;
   labelId: string | undefined;
@@ -28,6 +29,7 @@ export type State = {
   triggerElement: HTMLElement | null;
   positionerElement: HTMLElement | null;
   listElement: HTMLDivElement | null;
+  popupSide: Side | null;
   scrollUpArrowVisible: boolean;
   scrollDownArrowVisible: boolean;
   hasScrollArrows: boolean;
@@ -63,6 +65,7 @@ export declare const selectors: {
   triggerElement: (state: State) => HTMLElement | null;
   positionerElement: (state: State) => HTMLElement | null;
   listElement: (state: State) => HTMLDivElement | null;
+  popupSide: (state: State) => Side | null;
   scrollUpArrowVisible: (state: State) => boolean;
   scrollDownArrowVisible: (state: State) => boolean;
   hasScrollArrows: (state: State) => boolean;

package/select/store.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.selectors = void 0;
 var _store = require("@base-ui/utils/store");
-var _itemEquality = require("../utils/itemEquality");
-var _resolveValueLabel = require("../utils/resolveValueLabel");
+var _itemEquality = require("../internals/itemEquality");
+var _resolveValueLabel = require("../internals/resolveValueLabel");
 const selectors = exports.selectors = {
   id: (0, _store.createSelector)(state => state.id),
   labelId: (0, _store.createSelector)(state => state.labelId),
@@ -64,6 +64,7 @@ const selectors = exports.selectors = {
   triggerElement: (0, _store.createSelector)(state => state.triggerElement),
   positionerElement: (0, _store.createSelector)(state => state.positionerElement),
   listElement: (0, _store.createSelector)(state => state.listElement),
+  popupSide: (0, _store.createSelector)(state => state.popupSide),
   scrollUpArrowVisible: (0, _store.createSelector)(state => state.scrollUpArrowVisible),
   scrollDownArrowVisible: (0, _store.createSelector)(state => state.scrollDownArrowVisible),
   hasScrollArrows: (0, _store.createSelector)(state => state.hasScrollArrows)

package/select/trigger/SelectTrigger.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
+import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A button that opens the select popup.
  * Renders a `<button>` element.
@@ -17,6 +18,10 @@ export interface SelectTriggerState extends FieldRootState {
    * Whether the select popup is readonly.
    */
   readOnly: boolean;
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   */
+  popupSide: Side | null;
   /**
    * The value of the currently selected item.
    */