@base-ui/react 1.4.0 → 1.5.0

package/esm/select/root/SelectRoot.js

@@ -11,23 +11,24 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStore, Store } from '@base-ui/utils/store';
-import { useClick, useDismiss, useFloatingRootContext, useInteractions, useListNavigation, useTypeahead } from "../../floating-ui-react/index.js";
+import { EMPTY_ARRAY, EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { useClick, useDismiss, useFloatingRootContext, useListNavigation, useTypeahead } from "../../floating-ui-react/index.js";
 import { SelectRootContext, SelectFloatingContext } from "./SelectRootContext.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { useRegisterFieldControl } from "../../field/root/useRegisterFieldControl.js";
-import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
-import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.js";
+import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
 import { selectors } from "../store.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { useFormContext } from "../../form/FormContext.js";
-import { stringifyAsLabel, stringifyAsValue } from "../../utils/resolveValueLabel.js";
-import { EMPTY_ARRAY, EMPTY_OBJECT } from "../../utils/constants.js";
-import { defaultItemEquality, findItemIndex } from "../../utils/itemEquality.js";
-import { useValueChanged } from "../../utils/useValueChanged.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { useFormContext } from "../../internals/form-context/FormContext.js";
+import { stringifyAsLabel, stringifyAsValue } from "../../internals/resolveValueLabel.js";
+import { defaultItemEquality, findItemIndex } from "../../internals/itemEquality.js";
+import { useValueChanged } from "../../internals/useValueChanged.js";
 import { useOpenInteractionType } from "../../utils/useOpenInteractionType.js";
 import { getMaxScrollOffset, normalizeScrollOffset } from "../../utils/scrollEdges.js";
+import { FOCUSABLE_POPUP_PROPS } from "../../utils/popups/index.js";
 import { mergeProps } from "../../merge-props/index.js";
 
 /**
@@ -105,10 +106,12 @@ export 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 {
@@ -142,6 +145,7 @@ export function SelectRoot(props) {
     triggerElement: null,
     positionerElement: null,
     listElement: null,
+    popupSide: null,
     scrollUpArrowVisible: false,
     scrollDownArrowVisible: false,
     hasScrollArrows: false
@@ -165,13 +169,10 @@ export function SelectRoot(props) {
     return stringifyAsValue(value, itemToStringValue);
   }, [multiple, value, itemToStringValue]);
   const controlRef = useValueAsRef(store.state.triggerElement);
-  const getFieldValue = useStableCallback(() => fieldStringValue);
-  useRegisterFieldControl(controlRef, {
-    id: generatedId,
-    value,
-    getValue: getFieldValue
-  });
+  const getStringifiedValueForForm = useStableCallback(() => fieldStringValue);
+  useRegisterFieldControl(controlRef, generatedId, value, getStringifiedValueForForm);
   const initialValueRef = React.useRef(value);
+  const hasSelectedValue = multiple ? Array.isArray(value) && value.length > 0 : value != null;
   useIsoLayoutEffect(() => {
     // Ensure the values and labels are registered for programmatic value changes.
     if (value !== initialValueRef.current) {
@@ -179,27 +180,32 @@ export function SelectRoot(props) {
     }
   }, [store, value]);
   useIsoLayoutEffect(() => {
-    setFilled(multiple ? Array.isArray(value) && value.length > 0 : value != null);
-  }, [multiple, value, setFilled]);
+    setFilled(hasSelectedValue);
+  }, [hasSelectedValue, setFilled]);
   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 = findItemIndex(registry, lastValue, isItemEqualToValue);
+        nextIndex = lastIndex === -1 ? null : lastIndex;
       }
-      const lastValue = currentValue[currentValue.length - 1];
-      const lastIndex = findItemIndex(registry, lastValue, isItemEqualToValue);
-      store.set('selectedIndex', lastIndex === -1 ? null : lastIndex);
+    } else {
+      const index = findItemIndex(registry, value, isItemEqualToValue);
+      nextIndex = index === -1 ? null : index;
+    }
+    if (nextIndex === null) {
+      selectedItemTextRef.current = null;
+    }
+    if (open) {
       return;
     }
-    const index = 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]);
   useValueChanged(value, () => {
     clearErrors(name);
     setDirty(value !== validityData.initialValue);
@@ -293,9 +299,7 @@ export function SelectRoot(props) {
     enabled: !readOnly && !disabled,
     event: 'mousedown'
   });
-  const dismiss = useDismiss(floatingContext, {
-    bubbles: false
-  });
+  const dismiss = useDismiss(floatingContext);
   const listNavigation = useListNavigation(floatingContext, {
     enabled: !readOnly && !disabled,
     listRef,
@@ -323,23 +327,22 @@ export function SelectRoot(props) {
         setValue(valuesRef.current[index], createChangeEventDetails('none'));
       }
     },
-    onTypingChange(typing) {
+    onTyping(typing) {
       typingRef.current = typing;
     }
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps
-  } = useInteractions([click, dismiss, listNavigation, typeahead]);
   const mergedTriggerProps = React.useMemo(() => {
-    return mergeProps(getReferenceProps(), interactionTypeProps, generatedId ? {
-      id: generatedId
-    } : EMPTY_OBJECT);
-  }, [getReferenceProps, interactionTypeProps, generatedId]);
+    const triggerInteractionProps = 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(() => mergeProps(FOCUSABLE_POPUP_PROPS, typeahead.floating, listNavigation.floating, dismiss.floating), [typeahead.floating, listNavigation.floating, dismiss.floating]);
+  const itemProps = listNavigation.item ?? EMPTY_OBJECT;
   useOnFirstRender(() => {
     store.update({
-      popupProps: getFloatingProps(),
+      popupProps,
       triggerProps: mergedTriggerProps
     });
   });
@@ -352,7 +355,7 @@ export function SelectRoot(props) {
       open,
       mounted,
       transitionStatus,
-      popupProps: getFloatingProps(),
+      popupProps,
       triggerProps: mergedTriggerProps,
       items,
       itemToStringLabel,
@@ -360,7 +363,7 @@ export 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,
@@ -368,8 +371,6 @@ export function SelectRoot(props) {
     disabled,
     readOnly,
     multiple,
-    itemToStringLabel,
-    itemToStringValue,
     highlightItemOnHover,
     setValue,
     setOpen,
@@ -378,20 +379,21 @@ export 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 = useMergedRefs(inputRef, validation.inputRef);
   const hasMultipleSelection = multiple && Array.isArray(value) && value.length > 0;
   const hiddenInputName = multiple ? undefined : name;
@@ -425,7 +427,9 @@ export 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/esm/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/esm/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/esm/select/scroll-arrow/SelectScrollArrow.js

@@ -6,9 +6,9 @@ import { useStore } from '@base-ui/utils/store';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useSelectRootContext } from "../root/SelectRootContext.js";
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.js";
-import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { getMaxScrollOffset, normalizeScrollOffset, SCROLL_EDGE_TOLERANCE_PX } from "../../utils/scrollEdges.js";
 import { selectors } from "../store.js";
 

package/esm/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/esm/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/esm/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/esm/select/store.js

@@ -1,6 +1,6 @@
 import { createSelector } from '@base-ui/utils/store';
-import { compareItemEquality } from "../utils/itemEquality.js";
-import { hasNullItemLabel, stringifyAsValue } from "../utils/resolveValueLabel.js";
+import { compareItemEquality } from "../internals/itemEquality.js";
+import { hasNullItemLabel, stringifyAsValue } from "../internals/resolveValueLabel.js";
 export const selectors = {
   id: createSelector(state => state.id),
   labelId: createSelector(state => state.labelId),
@@ -58,6 +58,7 @@ export const selectors = {
   triggerElement: createSelector(state => state.triggerElement),
   positionerElement: createSelector(state => state.positionerElement),
   listElement: createSelector(state => state.listElement),
+  popupSide: createSelector(state => state.popupSide),
   scrollUpArrowVisible: createSelector(state => state.scrollUpArrowVisible),
   scrollDownArrowVisible: createSelector(state => state.scrollDownArrowVisible),
   hasScrollArrows: createSelector(state => state.hasScrollArrows)

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

package/esm/select/trigger/SelectTrigger.js

@@ -8,26 +8,28 @@ import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStore } from '@base-ui/utils/store';
 import { useSelectRootContext } from "../root/SelectRootContext.js";
-import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
-import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
 import { pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
-import { fieldValidityMapping } from "../../field/utils/constants.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { selectors } from "../store.js";
 import { getPseudoElementBounds } from "../../utils/getPseudoElementBounds.js";
 import { contains, getFloatingFocusElement } from "../../floating-ui-react/utils.js";
 import { mergeProps } from "../../merge-props/index.js";
-import { useButton } from "../../use-button/index.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
+import { useButton } from "../../internals/use-button/index.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
 import { resolveAriaLabelledBy } from "../../utils/resolveAriaLabelledBy.js";
 const BOUNDARY_OFFSET = 2;
 const SELECTED_DELAY = 400;
-const UNSELECTED_DELAY = 200;
 const stateAttributesMapping = {
   ...pressableTriggerOpenStateMapping,
   ...fieldValidityMapping,
+  popupSide: side => side ? {
+    'data-popup-side': side
+  } : null,
   value: () => null
 };
 
@@ -70,15 +72,16 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
   } = useSelectRootContext();
   const disabled = fieldDisabled || selectDisabled || disabledProp;
   const open = useStore(store, selectors.open);
+  const mounted = useStore(store, selectors.mounted);
   const value = useStore(store, selectors.value);
   const triggerProps = useStore(store, selectors.triggerProps);
   const positionerElement = useStore(store, selectors.positionerElement);
   const listElement = useStore(store, selectors.listElement);
+  const popupSideValue = useStore(store, selectors.popupSide);
   const rootId = useStore(store, selectors.id);
   const selectLabelId = useStore(store, selectors.labelId);
   const hasSelectedValue = useStore(store, selectors.hasSelectedValue);
-  const shouldCheckNullItemLabel = !hasSelectedValue && open;
-  const hasNullItemLabel = useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
+  const popupSide = mounted && positionerElement ? popupSideValue : null;
   const id = idProp ?? rootId;
   const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, selectLabelId);
   useLabelableId({
@@ -100,52 +103,34 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
   const timeoutFocus = useTimeout();
   const timeoutMouseDown = useTimeout();
   const selectedDelayTimeout = useTimeout();
-  const unselectedDelayTimeout = useTimeout();
   React.useEffect(() => {
     if (open) {
-      const hasSelectedItemInList = hasSelectedValue || hasNullItemLabel;
-      const shouldDelayUnselectedMouseUpLonger = !hasSelectedItemInList;
-
-      // When there is no selected item in the list (placeholder-only selects), a mousedown
-      // on the trigger followed by a quick mouseup over the first option can accidentally select
-      // within 200ms. Delay unselected mouseup to match the safer 400ms window.
-      if (shouldDelayUnselectedMouseUpLonger) {
-        selectedDelayTimeout.start(SELECTED_DELAY, () => {
-          selectionRef.current.allowUnselectedMouseUp = true;
-          selectionRef.current.allowSelectedMouseUp = true;
-        });
-      } else {
-        // mousedown -> move to unselected item -> mouseup should not select within 200ms.
-        unselectedDelayTimeout.start(UNSELECTED_DELAY, () => {
-          selectionRef.current.allowUnselectedMouseUp = true;
-
-          // mousedown -> mouseup on selected item should not select within 400ms.
-          selectedDelayTimeout.start(UNSELECTED_DELAY, () => {
-            selectionRef.current.allowSelectedMouseUp = true;
-          });
-        });
-      }
+      // A mousedown on the trigger can open the popup under the cursor. Keep mouseup selection
+      // disabled briefly so releasing over either the selected item or a neighboring item doesn't
+      // commit an accidental selection. SelectItem can still opt into unselected mouseup sooner
+      // after a real drag over the item.
+      selectedDelayTimeout.start(SELECTED_DELAY, () => {
+        selectionRef.current.allowUnselectedMouseUp = true;
+        selectionRef.current.allowSelectedMouseUp = true;
+      });
       return () => {
         selectedDelayTimeout.clear();
-        unselectedDelayTimeout.clear();
       };
     }
     selectionRef.current = {
       allowSelectedMouseUp: false,
-      allowUnselectedMouseUp: false
+      allowUnselectedMouseUp: false,
+      dragY: 0
     };
     timeoutMouseDown.clear();
     return undefined;
-  }, [open, hasSelectedValue, hasNullItemLabel, selectionRef, timeoutMouseDown, selectedDelayTimeout, unselectedDelayTimeout]);
-  const ariaControlsId = React.useMemo(() => {
-    return listElement?.id ?? getFloatingFocusElement(positionerElement)?.id;
-  }, [listElement, positionerElement]);
+  }, [open, selectionRef, timeoutMouseDown, selectedDelayTimeout]);
   const props = mergeProps(triggerProps, {
     id,
     role: 'combobox',
     'aria-expanded': open ? 'true' : 'false',
     'aria-haspopup': 'listbox',
-    'aria-controls': open ? ariaControlsId : undefined,
+    'aria-controls': open ? listElement?.id ?? getFloatingFocusElement(positionerElement)?.id : undefined,
     'aria-labelledby': ariaLabelledBy,
     'aria-readonly': readOnly || undefined,
     'aria-required': required || undefined,
@@ -225,6 +210,7 @@ export const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigge
     disabled,
     value,
     readOnly,
+    popupSide,
     placeholder: !hasSelectedValue
   };
   return useRenderElement('button', componentProps, {

package/esm/select/trigger/SelectTriggerDataAttributes.d.ts

@@ -15,16 +15,21 @@ export declare enum SelectTriggerDataAttributes {
    * Present when the select is readonly.
    */
   readonly = "data-readonly",
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  popupSide = "data-popup-side",
   /**
    * Present when the select is required.
    */
   required = "data-required",
   /**
-   * Present when the select is in valid state (when wrapped in Field.Root).
+   * Present when the select is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the select is in invalid state (when wrapped in Field.Root).
+   * Present when the select is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/esm/select/trigger/SelectTriggerDataAttributes.js

@@ -16,16 +16,21 @@ export let SelectTriggerDataAttributes = function (SelectTriggerDataAttributes)
    * Present when the select is readonly.
    */
   SelectTriggerDataAttributes["readonly"] = "data-readonly";
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  SelectTriggerDataAttributes["popupSide"] = "data-popup-side";
   /**
    * Present when the select is required.
    */
   SelectTriggerDataAttributes["required"] = "data-required";
   /**
-   * Present when the select is in valid state (when wrapped in Field.Root).
+   * Present when the select is in a valid state (when wrapped in Field.Root).
    */
   SelectTriggerDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the select is in invalid state (when wrapped in Field.Root).
+   * Present when the select is in an invalid state (when wrapped in Field.Root).
    */
   SelectTriggerDataAttributes["invalid"] = "data-invalid";
   /**

package/esm/select/value/SelectValue.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 currently selected item.
  * Renders a `<span>` element.

package/esm/select/value/SelectValue.js

@@ -2,9 +2,9 @@
 
 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 { resolveMultipleLabels, resolveSelectedLabel } from "../../utils/resolveValueLabel.js";
+import { resolveMultipleLabels, resolveSelectedLabel } from "../../internals/resolveValueLabel.js";
 import { selectors } from "../store.js";
 const stateAttributesMapping = {
   value: () => null

package/esm/separator/Separator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, Orientation } from "../utils/types.js";
+import type { BaseUIComponentProps, Orientation } from "../internals/types.js";
 /**
  * A separator element accessible to screen readers.
  * Renders a `<div>` element.

package/esm/separator/Separator.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRenderElement } from "../utils/useRenderElement.js";
+import { useRenderElement } from "../internals/useRenderElement.js";
 
 /**
  * A separator element accessible to screen readers.

package/esm/slider/control/SliderControl.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 { SliderRootState } from "../root/SliderRoot.js";
 /**
  * The clickable, interactive part of the slider.