@base-ui/react 1.4.1 → 1.5.0

package/select/item/SelectItem.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectItem = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
-var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _store = require("@base-ui/utils/store");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _useCompositeListItem = require("../../internals/composite/list/useCompositeListItem");
@@ -19,6 +18,7 @@ var _useButton = require("../../internals/use-button");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
 var _itemEquality = require("../../internals/itemEquality");
+var _event = require("../../floating-ui-react/utils/event");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An individual option in the select popup.
@@ -30,11 +30,11 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
   const {
     render,
     className,
+    style,
     value: itemValue = null,
     label,
     disabled = false,
     nativeButton = false,
-    style,
     ...elementProps
   } = componentProps;
   const textRef = React.useRef(null);
@@ -45,7 +45,7 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
   });
   const {
     store,
-    getItemProps,
+    itemProps,
     setOpen,
     setValue,
     selectionRef,
@@ -61,7 +61,6 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
   const index = listItem.index;
   const hasRegistered = index !== -1;
   const itemRef = React.useRef(null);
-  const indexRef = (0, _useValueAsRef.useValueAsRef)(index);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!hasRegistered) {
       return undefined;
@@ -90,19 +89,9 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       }
     }
   }, [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
@@ -112,6 +101,11 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     native: nativeButton,
     composite: true
   });
+  const state = {
+    disabled,
+    selected,
+    highlighted
+  };
   function commitSelection(event) {
     const selectedValue = store.state.value;
     if (multiple) {
@@ -123,16 +117,13 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.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);
@@ -141,13 +132,24 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
       }
     },
     onClick(event) {
-      didPointerDownRef.current = false;
+      const isMouseClick = event.type === 'click' && pointerTypeRef.current !== 'touch';
+      const clickPointerType = event.nativeEvent.pointerType;
+      const isVirtualMouseClick = isMouseClick && (0, _event.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;
@@ -156,40 +158,52 @@ const SelectItem = exports.SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/Rea
     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 = (0, _useRenderElement.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__*/(0, _jsxRuntime.jsx)(_SelectItemContext.SelectItemContext.Provider, {
     value: contextValue,
     children: element

package/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/select/item-indicator/SelectItemIndicator.js

@@ -36,8 +36,7 @@ const SelectItemIndicator = exports.SelectItemIndicator = /*#__PURE__*/React.for
   });
 });
 
-/** 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/select/item-text/SelectItemText.js

@@ -18,29 +18,32 @@ var _useRenderElement = require("../../internals/useRenderElement");
  */
 const SelectItemText = exports.SelectItemText = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function SelectItemText(componentProps, forwardedRef) {
   const {
-    indexRef,
+    index,
     textRef,
     selectedByFocus,
     hasRegistered
   } = (0, _SelectItemContext.useSelectItemContext)();
   const {
+    firstItemTextRef,
     selectedItemTextRef
   } = (0, _SelectRootContext.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 = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [localRef, forwardedRef, textRef],
     props: elementProps

package/select/list/SelectList.js

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

@@ -32,7 +32,7 @@ var _composite = require("../../internals/composite/composite");
 var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
 var _clamp = require("../../internals/clamp");
 var _scrollEdges = require("../../utils/scrollEdges");
-var _CSPContext = require("../../csp-provider/CSPContext");
+var _CSPContext = require("../../internals/csp-context/CSPContext");
 var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
@@ -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.js

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

@@ -34,6 +34,7 @@ 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");
 /**
@@ -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,9 +304,7 @@ 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,
@@ -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
-    } : _empty.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,
@@ -381,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, 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;
@@ -428,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

@@ -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/store.d.ts

@@ -2,6 +2,7 @@ import { Store } from '@base-ui/utils/store';
 import { type InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 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;
@@ -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

@@ -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 "../../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.
    */