@jobber/components 8.23.0 → 8.23.1

package/dist/SelectGroupLabel-es.js

@@ -1,19 +1,37 @@
 import * as React from 'react';
-import { E as useControlled, k as useTransitionStatus, n as useValueAsRef, a as useIsoLayoutEffect, Q as useValueChanged, b as useStableCallback, f as useOpenChangeComplete, d as createChangeEventDetails, G as none, H as visuallyHiddenInput, I as visuallyHidden, y as focusOut, U as outsidePress, c as useButton, h as useTimeout, m as getFloatingFocusElement, r as contains, o as ownerDocument, V as cancelOpen, t as transitionStatusMapping, W as useAnimationFrame, X as isWebKit, Y as windowResize, Z as itemPress, u as useBaseUiId } from './useButton-es.js';
-import { f as formatErrorMessage, a as useRefWithInit, m as mergeProps, b as useMergedRefs, c as EMPTY_ARRAY, E as EMPTY_OBJECT, u as useRenderElement } from './useRenderElement-es.js';
-import { o as createSelector, q as useOpenInteractionType, r as useStore, s as useClick, t as useDismiss, v as useInteractions, w as useOnFirstRender, S as Store, x as pressableTriggerOpenStateMapping, y as FloatingPortal, z as useScrollLock, I as InternalBackdrop, A as inertValue, B as DROPDOWN_COLLISION_AVOIDANCE, p as popupStateMapping, F as FloatingFocusManager } from './InternalBackdrop-es.js';
-import { a as useFormContext, b as useFieldRootContext, c as useLabelableId, d as useField, f as fieldValidityMapping, u as useLabelableContext } from './useLabelableId-es.js';
-import { s as stringifyAsValue, h as hasNullItemLabel, c as compareItemEquality, f as findItemIndex, d as defaultItemEquality, r as resolveAriaLabelledBy, a as resolveMultipleLabels, b as resolveSelectedLabel, e as selectedValueIncludes, g as removeItem } from './resolveAriaLabelledBy-es.js';
+import { z as useControlled, k as useTransitionStatus, m as useValueAsRef, b as useStableCallback, a as useIsoLayoutEffect, O as useValueChanged, f as useOpenChangeComplete, d as createChangeEventDetails, C as none, D as visuallyHiddenInput, E as visuallyHidden, v as focusOut, Q as outsidePress, c as useButton, h as useTimeout, q as contains, o as ownerDocument, R as cancelOpen, t as transitionStatusMapping, n as useAnimationFrame, B as addEventListener, U as windowResize, w as isVirtualClick, V as itemPress, u as useBaseUiId } from './useButton-es.js';
+import { f as formatErrorMessage, a as useRefWithInit, m as mergeProps, E as EMPTY_OBJECT, c as useMergedRefs, b as EMPTY_ARRAY, u as useRenderElement } from './useRenderElement-es.js';
+import { t as createSelector, v as useOpenInteractionType, w as useStore, x as useClick, y as useDismiss, F as FOCUSABLE_POPUP_PROPS, z as useOnFirstRender, S as Store, B as pressableTriggerOpenStateMapping, g as getFloatingFocusElement, E as FloatingPortal, I as InternalBackdrop, G as inertValue, H as DROPDOWN_COLLISION_AVOIDANCE, p as popupStateMapping, r as useDirection, J as webkit, a as FloatingFocusManager } from './useScrollLock-es.js';
+import { i as isElementDisabled, u as useToolbarRootContext } from './isElementDisabled-es.js';
+import { a as useFormContext, b as useFieldRootContext, c as useLabelableId, d as useRegisterFieldControl, f as fieldValidityMapping, u as useLabelableContext } from './useLabelableId-es.js';
+import { s as stringifyAsValue, h as hasNullItemLabel, c as compareItemEquality, f as findItemIndex, d as defaultItemEquality, a as stringifyAsLabel, b as areArraysEqual, r as resolveAriaLabelledBy, e as resolveMultipleLabels, g as resolveSelectedLabel, i as selectedValueIncludes, j as removeItem } from './resolveAriaLabelledBy-es.js';
+import { g as getMaxScrollOffset, n as normalizeScrollOffset, u as useCSPContext, S as SCROLL_EDGE_TOLERANCE_PX, C as COMPOSITE_KEYS, s as styleDisableScrollbar } from './scrollEdges-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { u as useFloatingRootContext, a as useListNavigation, b as useTypeahead, g as getPseudoElementBounds, c as useAnchorPositioning, C as CompositeList, d as getDisabledMountTransitionStyles, e as useCompositeListItem, I as IndexGuessBehavior } from './useCompositeListItem-es.js';
-import * as ReactDOM from 'react-dom';
-import { r as rectToClientRect } from './index.esm-es.js';
-import { u as useCSPContext, C as COMPOSITE_KEYS, s as styleDisableScrollbar } from './CSPContext-es.js';
-import { u as useToolbarRootContext } from './ToolbarRootContext-es.js';
+import { u as useFloatingRootContext, a as useListNavigation, b as useTypeahead, g as getPseudoElementBounds, c as useAnchoredPopupScrollLock, d as useAnchorPositioning, e as usePositioner, C as CompositeList, f as getDisabledMountTransitionStyles, h as useCompositeListItem, I as IndexGuessBehavior } from './useCompositeListItem-es.js';
+import { r as rectToClientRect } from './floating-ui.utils-es.js';
 import { c as clamp } from './clamp-es.js';
 import { o as getWindow } from './floating-ui.utils.dom-es.js';
 import { p as platform } from './floating-ui.react-dom-es.js';
 
+/**
+ * Returns a previous value of its argument.
+ * @param value Current value.
+ * @returns Previous value, or null if there is no previous value.
+ */
+function usePreviousValue(value) {
+  const [state, setState] = React.useState({
+    current: value,
+    previous: null
+  });
+  if (value !== state.current) {
+    setState({
+      current: value,
+      previous: state.current
+    });
+  }
+  return state.previous;
+}
+
 const SelectRootContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") SelectRootContext.displayName = "SelectRootContext";
 const SelectFloatingContext = /*#__PURE__*/React.createContext(null);
@@ -68,18 +86,16 @@ const selectors = {
   activeIndex: createSelector(state => state.activeIndex),
   selectedIndex: createSelector(state => state.selectedIndex),
   isActive: createSelector((state, index) => state.activeIndex === index),
-  isSelected: createSelector((state, index, itemValue) => {
+  isSelected: createSelector((state, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const storeValue = state.value;
     if (state.multiple) {
       return Array.isArray(storeValue) && storeValue.some(selectedItem => compareItemEquality(itemValue, selectedItem, comparer));
     }
 
-    // `selectedIndex` is only updated after the items mount for the first time,
-    // the value check avoids a re-render for the initially selected item.
-    if (state.selectedIndex === index && state.selectedIndex !== null) {
-      return true;
-    }
+    // The value is the source of truth: a stale `selectedIndex` (e.g. the controlled
+    // value changes while the popup is open, where the index sync is deferred) must not
+    // keep a previously selected item marked as selected.
     return compareItemEquality(itemValue, storeValue, comparer);
   }),
   isSelectedByFocus: createSelector((state, index) => {
@@ -90,6 +106,7 @@ 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)
@@ -105,6 +122,7 @@ function SelectRoot(props) {
     defaultOpen = false,
     onOpenChange,
     name: nameProp,
+    form,
     autoComplete,
     disabled: disabledProp = false,
     readOnly = false,
@@ -128,7 +146,6 @@ function SelectRoot(props) {
     setDirty,
     setTouched,
     setFocused,
-    shouldValidateOnChange,
     validityData,
     setFilled,
     name: fieldName,
@@ -161,11 +178,12 @@ function SelectRoot(props) {
   const valueRef = React.useRef(null);
   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 {
@@ -199,6 +217,7 @@ function SelectRoot(props) {
     triggerElement: null,
     positionerElement: null,
     listElement: null,
+    popupSide: null,
     scrollUpArrowVisible: false,
     scrollDownArrowVisible: false,
     hasScrollArrows: false
@@ -207,8 +226,13 @@ function SelectRoot(props) {
   const selectedIndex = useStore(store, selectors.selectedIndex);
   const triggerElement = useStore(store, selectors.triggerElement);
   const positionerElement = useStore(store, selectors.positionerElement);
+  const previousOpenMethod = usePreviousValue(openMethod);
+  const renderedOpenMethod = openMethod ?? previousOpenMethod ?? null;
   const serializedValue = React.useMemo(() => {
-    if (multiple && Array.isArray(value) && value.length === 0) {
+    // In multiple mode the shared input is nameless; per-value entries are submitted via
+    // `hiddenInputs`. Its value is therefore irrelevant, and passing the whole array to
+    // `stringifyAsValue` would invoke a user `itemToStringValue` with an array it doesn't expect.
+    if (multiple) {
       return '';
     }
     return stringifyAsValue(value, itemToStringValue);
@@ -220,15 +244,12 @@ function SelectRoot(props) {
     return stringifyAsValue(value, itemToStringValue);
   }, [multiple, value, itemToStringValue]);
   const controlRef = useValueAsRef(store.state.triggerElement);
-  useField({
-    id: generatedId,
-    commit: validation.commit,
-    value,
-    controlRef,
-    name,
-    getValue: () => fieldStringValue
-  });
+  const getStringifiedValueForForm = useStableCallback(() => fieldStringValue);
+  useRegisterFieldControl(controlRef, generatedId, value, getStringifiedValueForForm, !disabled, nameProp);
   const initialValueRef = React.useRef(value);
+  // Mirror the `hasSelectedValue` store selector so the Field's filled state agrees with the
+  // trigger/value placeholder semantics (a value serializing to `''` counts as empty).
+  const hasSelectedValue = multiple ? Array.isArray(value) && value.length > 0 : value != null && stringifyAsValue(value, itemToStringValue) !== '';
   useIsoLayoutEffect(() => {
     // Ensure the values and labels are registered for programmatic value changes.
     if (value !== initialValueRef.current) {
@@ -236,35 +257,43 @@ 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]);
+  function isSelectedValueDirty(currentValue) {
+    const initialValue = validityData.initialValue;
+    if (Array.isArray(currentValue) && Array.isArray(initialValue)) {
+      return !areArraysEqual(currentValue, initialValue, (itemValue, initialItemValue) => compareItemEquality(itemValue, initialItemValue, isItemEqualToValue));
+    }
+    return currentValue !== initialValue;
+  }
   useValueChanged(value, () => {
     clearErrors(name);
-    setDirty(value !== validityData.initialValue);
-    if (shouldValidateOnChange()) {
-      validation.commit(value);
-    } else {
-      validation.commit(value, true);
-    }
+    setDirty(isSelectedValueDirty(value));
+    validation.change(value);
   });
   const setOpen = useStableCallback((nextOpen, eventDetails) => {
     onOpenChange?.(nextOpen, eventDetails);
@@ -279,24 +308,13 @@ function SelectRoot(props) {
         validation.commit(value);
       }
     }
-
-    // The active index will sync to the last selected index on the next open.
-    // Workaround `enableFocusInside` in Floating UI setting `tabindex=0` of a non-highlighted
-    // option upon close when tabbing out due to `keepMounted=true`:
-    // https://github.com/floating-ui/floating-ui/pull/3004/files#diff-962a7439cdeb09ea98d4b622a45d517bce07ad8c3f866e089bda05f4b0bbd875R194-R199
-    // This otherwise causes options to retain `tabindex=0` incorrectly when the popup is closed
-    // when tabbing outside.
-    if (!nextOpen && store.state.activeIndex !== null) {
-      const activeOption = listRef.current[store.state.activeIndex];
-      // Wait for Floating UI's focus effect to have fired
-      queueMicrotask(() => {
-        activeOption?.setAttribute('tabindex', '-1');
-      });
-    }
   });
   const handleUnmount = useStableCallback(() => {
     setMounted(false);
-    store.set('activeIndex', null);
+    store.update({
+      activeIndex: null,
+      openMethod: null
+    });
     onOpenChangeComplete?.(false);
   });
   useOpenChangeComplete({
@@ -324,10 +342,10 @@ function SelectRoot(props) {
     if (!scroller) {
       return;
     }
-    const viewportTop = scroller.scrollTop;
-    const viewportBottom = scroller.scrollTop + scroller.clientHeight;
-    const shouldShowUp = viewportTop > 1;
-    const shouldShowDown = viewportBottom < scroller.scrollHeight - 1;
+    const maxScrollTop = getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
+    const scrollTop = normalizeScrollOffset(scroller.scrollTop, maxScrollTop);
+    const shouldShowUp = scrollTop > 0;
+    const shouldShowDown = scrollTop < maxScrollTop;
     if (store.state.scrollUpArrowVisible !== shouldShowUp) {
       store.set('scrollUpArrowVisible', shouldShowUp);
     }
@@ -347,9 +365,7 @@ 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,
@@ -363,15 +379,19 @@ function SelectRoot(props) {
       }
       store.set('activeIndex', nextActiveIndex);
     },
-    // Implement our own listeners since `onPointerLeave` on each option fires while scrolling with
-    // the `alignItemWithTrigger=true`, causing a performance issue on Chrome.
-    focusItemOnHover: false
+    focusItemOnHover: highlightItemOnHover
   });
   const typeahead = useTypeahead(floatingContext, {
     enabled: !readOnly && !disabled && (open || !multiple),
     listRef: labelsRef,
     activeIndex,
     selectedIndex,
+    // Skip disabled items while matching so typeahead advances to the next selectable item
+    // (a click can never select a disabled item and native `<select>` skips them too). Resolve
+    // the disabled state from the element via the attribute-only `isElementDisabled` so the
+    // hidden, force-mounted items used for closed-trigger typeahead aren't dropped by the
+    // `elementsRef`/visibility filter that `disabledIndices` deliberately sidesteps.
+    disabledIndices: index => isElementDisabled(listRef.current[index]),
     onMatch(index) {
       if (open) {
         store.set('activeIndex', index);
@@ -379,23 +399,22 @@ 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
     });
   });
@@ -408,15 +427,15 @@ function SelectRoot(props) {
       open,
       mounted,
       transitionStatus,
-      popupProps: getFloatingProps(),
+      popupProps,
       triggerProps: mergedTriggerProps,
       items,
       itemToStringLabel,
       itemToStringValue,
       isItemEqualToValue,
-      openMethod
+      openMethod: renderedOpenMethod
     });
-  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, getFloatingProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, openMethod]);
+  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, popupProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, renderedOpenMethod]);
   const contextValue = React.useMemo(() => ({
     store,
     name,
@@ -424,8 +443,6 @@ function SelectRoot(props) {
     disabled,
     readOnly,
     multiple,
-    itemToStringLabel,
-    itemToStringValue,
     highlightItemOnHover,
     setValue,
     setOpen,
@@ -434,20 +451,19 @@ function SelectRoot(props) {
     scrollHandlerRef,
     handleScrollArrowVisibility,
     scrollArrowsMountedCountRef,
-    getItemProps,
-    events: floatingContext.context.events,
+    itemProps,
     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, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
   const ref = useMergedRefs(inputRef, validation.inputRef);
   const hasMultipleSelection = multiple && Array.isArray(value) && value.length > 0;
   const hiddenInputName = multiple ? undefined : name;
@@ -459,32 +475,33 @@ function SelectRoot(props) {
       const currentSerializedValue = stringifyAsValue(v, itemToStringValue);
       return /*#__PURE__*/jsx("input", {
         type: "hidden",
+        form: form,
         name: name,
-        value: currentSerializedValue
+        value: currentSerializedValue,
+        disabled: disabled
       }, currentSerializedValue);
     });
-  }, [multiple, value, name, itemToStringValue]);
+  }, [multiple, value, form, name, itemToStringValue, disabled]);
   return /*#__PURE__*/jsx(SelectRootContext.Provider, {
     value: contextValue,
     children: /*#__PURE__*/jsxs(SelectFloatingContext.Provider, {
       value: floatingContext,
       children: [children, /*#__PURE__*/jsx("input", {
-        ...validation.getInputValidationProps({
+        ...validation.getValidationProps(disabled, {
           onFocus() {
             // Move focus to the trigger element when the hidden input is focused.
             store.state.triggerElement?.focus({
               // Supported in Chrome from 144 (January 2026)
-              // @ts-expect-error - focusVisible is not yet in the lib.dom.d.ts
               focusVisible: true
             });
           },
           // Handle browser autofill.
           onChange(event) {
             // Workaround for https://github.com/facebook/react/issues/9023
-            if (event.nativeEvent.defaultPrevented) {
+            if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
               return;
             }
-            const nextValue = event.target.value;
+            const nextValue = event.currentTarget.value;
             const details = createChangeEventDetails(none, event.nativeEvent);
             function handleChange() {
               if (multiple) {
@@ -492,20 +509,21 @@ function SelectRoot(props) {
                 return;
               }
 
-              // Handle single selection: match against registered values using serialization
-              const matchingValue = valuesRef.current.find(v => {
-                const candidate = stringifyAsValue(v, itemToStringValue);
-                if (candidate.toLowerCase() === nextValue.toLowerCase()) {
-                  return true;
-                }
-                return false;
-              });
+              // Preserve the original serialized matching, then fall back to rendered text,
+              // which browsers can autofill for primitive values like `value="US">United States`.
+              const nextValueLower = nextValue.toLowerCase();
+              let matchingIndex = valuesRef.current.findIndex(candidate => stringifyAsValue(candidate, itemToStringValue).toLowerCase() === nextValueLower || stringifyAsLabel(candidate, itemToStringLabel).toLowerCase() === nextValueLower);
+              if (matchingIndex === -1) {
+                matchingIndex = valuesRef.current.findIndex((_, index) => {
+                  const renderedLabel = labelsRef.current[index];
+                  return renderedLabel != null && renderedLabel.toLowerCase() === nextValueLower;
+                });
+              }
+              const matchingValue = matchingIndex === -1 ? undefined : valuesRef.current[matchingIndex];
               if (matchingValue != null) {
-                setDirty(matchingValue !== validityData.initialValue);
+                // `setValue` may be canceled by `onValueChange`; rely on `useValueChanged` to
+                // mark the field dirty and run validation only when the value actually changes.
                 setValue(matchingValue, details);
-                if (shouldValidateOnChange()) {
-                  validation.commit(matchingValue);
-                }
               }
             }
             store.set('forceMount', true);
@@ -513,6 +531,7 @@ function SelectRoot(props) {
           }
         }),
         id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
+        form: form,
         name: hiddenInputName,
         autoComplete: autoComplete,
         value: serializedValue,
@@ -522,7 +541,8 @@ function SelectRoot(props) {
         ref: ref,
         style: name ? visuallyHiddenInput : visuallyHidden,
         tabIndex: -1,
-        "aria-hidden": true
+        "aria-hidden": true,
+        suppressHydrationWarning: true
       }), hiddenInputs]
     })
   });
@@ -530,10 +550,12 @@ function SelectRoot(props) {
 
 const BOUNDARY_OFFSET = 2;
 const SELECTED_DELAY = 400;
-const UNSELECTED_DELAY = 200;
 const stateAttributesMapping$2 = {
   ...pressableTriggerOpenStateMapping,
   ...fieldValidityMapping,
+  popupSide: side => side ? {
+    'data-popup-side': side
+  } : null,
   value: () => null
 };
 
@@ -550,6 +572,7 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
     id: idProp,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -570,20 +593,20 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
     readOnly,
     required,
     alignItemWithTriggerActiveRef,
-    disabled: selectDisabled,
-    keyboardActiveRef
+    disabled: selectDisabled
   } = 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({
@@ -601,61 +624,41 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
   const setTriggerElement = useStableCallback(element => {
     store.set('triggerElement', element);
   });
-  const mergedRef = useMergedRefs(forwardedRef, triggerRef, buttonRef, setTriggerElement);
   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]);
-  const props = mergeProps(triggerProps, {
+  }, [open, selectionRef, timeoutMouseDown, selectedDelayTimeout]);
+  const mergedProps = 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,
     tabIndex: disabled ? -1 : 0,
-    ref: mergedRef,
     onFocus(event) {
       setFocused(true);
 
@@ -667,8 +670,6 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
       // Saves a re-render on initial click: `forceMount === true` mounts
       // the items before `open === true`. We could sync those cycles better
       // without a timeout, but this is enough for now.
-      //
-      // XXX: might be causing `act()` warnings.
       timeoutFocus.start(0, () => {
         store.set('forceMount', true);
       });
@@ -684,12 +685,6 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
         validation.commit(value);
       }
     },
-    onPointerMove() {
-      keyboardActiveRef.current = false;
-    },
-    onKeyDown() {
-      keyboardActiveRef.current = true;
-    },
     onMouseDown(event) {
       if (open) {
         return;
@@ -701,8 +696,9 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
         }
         const mouseUpTarget = mouseEvent.target;
 
-        // Early return if clicked on trigger element or its children
-        if (contains(triggerRef.current, mouseUpTarget) || contains(positionerRef.current, mouseUpTarget) || mouseUpTarget === triggerRef.current) {
+        // Don't treat the release as an outside press when it lands on the trigger or inside
+        // the popup positioner (or their children).
+        if (contains(triggerRef.current, mouseUpTarget) || contains(positionerRef.current, mouseUpTarget)) {
           return;
         }
         const bounds = getPseudoElementBounds(triggerRef.current);
@@ -719,7 +715,8 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
         });
       });
     }
-  }, validation.getValidationProps, elementProps, getButtonProps);
+  }, elementProps, getButtonProps);
+  const props = validation.getValidationProps(disabled, mergedProps);
 
   // ensure nested useButton does not overwrite the combobox role:
   // <Toolbar.Button render={<Select.Trigger />} />
@@ -730,10 +727,11 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
     disabled,
     value,
     readOnly,
+    popupSide,
     placeholder: !hasSelectedValue
   };
   return useRenderElement('button', componentProps, {
-    ref: [forwardedRef, triggerRef],
+    ref: [forwardedRef, triggerRef, buttonRef, setTriggerElement],
     state,
     stateAttributesMapping: stateAttributesMapping$2,
     props
@@ -757,6 +755,7 @@ const SelectValue = /*#__PURE__*/React.forwardRef(function SelectValue(component
     render,
     children: childrenProp,
     placeholder,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -869,6 +868,7 @@ const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner
     disableAnchorTracking,
     alignItemWithTrigger = true,
     collisionAvoidance = DROPDOWN_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -910,7 +910,7 @@ const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner
     }
   }, [store, mounted]);
   React.useImperativeHandle(alignItemWithTriggerActiveRef, () => alignItemWithTriggerActive);
-  useScrollLock((alignItemWithTriggerActive || modal) && open && openMethod !== 'touch', triggerElement);
+  useAnchoredPopupScrollLock((alignItemWithTriggerActive || modal) && open, openMethod === 'touch', positionerElement, triggerElement);
   const positioning = useAnchorPositioning({
     anchor,
     floatingRootContext,
@@ -930,34 +930,25 @@ const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner
   });
   const renderedSide = alignItemWithTriggerActive ? 'none' : positioning.side;
   const positionerStyles = alignItemWithTriggerActive ? FIXED : positioning.positionerStyles;
-  const defaultProps = React.useMemo(() => {
-    const hiddenStyles = {};
-    if (!open) {
-      hiddenStyles.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        ...positionerStyles,
-        ...hiddenStyles
-      }
-    };
-  }, [open, mounted, positionerStyles]);
   const state = {
     open,
     side: renderedSide,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden
   };
+  useIsoLayoutEffect(() => {
+    store.set('popupSide', positioning.side);
+  }, [store, positioning.side]);
   const setPositionerElement = useStableCallback(element => {
     store.set('positionerElement', element);
   });
-  const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, setPositionerElement],
-    state,
-    stateAttributesMapping: popupStateMapping,
-    props: [defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps]
+  const element = usePositioner(componentProps, state, {
+    styles: positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement],
+    hidden: !mounted,
+    inert: !open
   });
   const prevMapSizeRef = React.useRef(0);
   const onMapChange = useStableCallback(map => {
@@ -1032,18 +1023,6 @@ const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner
 });
 if (process.env.NODE_ENV !== "production") SelectPositioner.displayName = "SelectPositioner";
 
-function isMouseWithinBounds(event) {
-  const targetRect = event.currentTarget.getBoundingClientRect();
-
-  // Safari randomly fires `mouseleave` incorrectly when the item is
-  // aligned to the trigger. This is a workaround to prevent the highlight
-  // from being removed while the cursor is still within the bounds of the item.
-  // https://github.com/mui/base-ui/issues/869
-  const isWithinBounds = targetRect.top + 1 <= event.clientY && event.clientY <= targetRect.bottom - 1 && targetRect.left + 1 <= event.clientX && event.clientX <= targetRect.right - 1;
-  return isWithinBounds;
-}
-
-const SCROLL_EPS_PX = 1;
 const stateAttributesMapping = {
   ...popupStateMapping,
   ...transitionStatusMapping
@@ -1059,6 +1038,7 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
   const {
     render,
     className,
+    style,
     finalFocus,
     ...elementProps
   } = componentProps;
@@ -1068,39 +1048,38 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
     onOpenChangeComplete,
     setOpen,
     valueRef,
+    firstItemTextRef,
     selectedItemTextRef,
-    keyboardActiveRef,
     multiple,
     handleScrollArrowVisibility,
     scrollHandlerRef,
+    listRef,
     highlightItemOnHover
   } = useSelectRootContext();
   const {
     side,
     align,
     alignItemWithTriggerActive,
-    setControlledAlignItemWithTrigger,
-    scrollDownArrowRef,
-    scrollUpArrowRef
+    isPositioned,
+    setControlledAlignItemWithTrigger
   } = useSelectPositionerContext();
   const insideToolbar = useToolbarRootContext(true) != null;
   const floatingRootContext = useSelectFloatingContext();
+  const direction = useDirection();
   const {
     nonce,
     disableStyleElements
   } = useCSPContext();
-  const highlightTimeout = useTimeout();
   const id = useStore(store, selectors.id);
   const open = useStore(store, selectors.open);
+  const openMethod = useStore(store, selectors.openMethod);
   const mounted = useStore(store, selectors.mounted);
   const popupProps = useStore(store, selectors.popupProps);
   const transitionStatus = useStore(store, selectors.transitionStatus);
   const triggerElement = useStore(store, selectors.triggerElement);
   const positionerElement = useStore(store, selectors.positionerElement);
   const listElement = useStore(store, selectors.listElement);
-  const initialHeightRef = React.useRef(0);
   const reachedMaxHeightRef = React.useRef(false);
-  const maxHeightRef = React.useRef(0);
   const initialPlacedRef = React.useRef(false);
   const originalPositionerStylesRef = React.useRef({});
   const scrollArrowFrame = useAnimationFrame();
@@ -1114,12 +1093,18 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
     }
     const isTopPositioned = positionerElement.style.top === '0px';
     const isBottomPositioned = positionerElement.style.bottom === '0px';
-    const currentHeight = positionerElement.getBoundingClientRect().height;
+    if (!isTopPositioned && !isBottomPositioned) {
+      handleScrollArrowVisibility();
+      return;
+    }
+    const scale = getScale(positionerElement);
+    const currentHeight = normalizeSize(positionerElement.getBoundingClientRect().height, 'y', scale);
     const doc = ownerDocument(positionerElement);
-    const positionerStyles = getComputedStyle(positionerElement);
+    const win = getWindow(positionerElement);
+    const positionerStyles = win.getComputedStyle(positionerElement);
     const marginTop = parseFloat(positionerStyles.marginTop);
     const marginBottom = parseFloat(positionerStyles.marginBottom);
-    const maxPopupHeight = getMaxPopupHeight(getComputedStyle(popupRef.current));
+    const maxPopupHeight = getMaxPopupHeight(win.getComputedStyle(popupRef.current));
     const maxAvailableHeight = Math.min(doc.documentElement.clientHeight - marginTop - marginBottom, maxPopupHeight);
     const scrollTop = scroller.scrollTop;
     const maxScrollTop = getMaxScrollTop(scroller);
@@ -1137,42 +1122,29 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
         setHeight(currentHeight + heightDelta);
       }
       scroller.scrollTop = targetScrollTop;
-      if (maxAvailableHeight - (currentHeight + heightDelta) <= SCROLL_EPS_PX) {
+      if (maxAvailableHeight - (currentHeight + heightDelta) <= SCROLL_EDGE_TOLERANCE_PX) {
         reachedMaxHeightRef.current = true;
       }
       handleScrollArrowVisibility();
     };
-    if (isTopPositioned) {
-      const diff = maxScrollTop - scrollTop;
-      const idealHeight = currentHeight + diff;
-      const nextHeight = Math.min(idealHeight, maxAvailableHeight);
-      nextPositionerHeight = nextHeight;
-      if (diff <= SCROLL_EPS_PX) {
-        handleSmallDiff(diff, maxScrollTop);
-        return;
-      }
-      if (maxAvailableHeight - nextHeight > SCROLL_EPS_PX) {
+    const diff = isTopPositioned ? maxScrollTop - scrollTop : scrollTop;
+    const nextHeight = Math.min(currentHeight + diff, maxAvailableHeight);
+    nextPositionerHeight = nextHeight;
+    if (diff <= SCROLL_EDGE_TOLERANCE_PX) {
+      handleSmallDiff(diff, isTopPositioned ? maxScrollTop : 0);
+      return;
+    }
+    if (maxAvailableHeight - nextHeight > SCROLL_EDGE_TOLERANCE_PX) {
+      if (isTopPositioned) {
         scrollToMax = true;
       } else {
-        setReachedMax = true;
-      }
-    } else if (isBottomPositioned) {
-      const diff = scrollTop;
-      const idealHeight = currentHeight + diff;
-      const nextHeight = Math.min(idealHeight, maxAvailableHeight);
-      const overshoot = idealHeight - maxAvailableHeight;
-      nextPositionerHeight = nextHeight;
-      if (diff <= SCROLL_EPS_PX) {
-        handleSmallDiff(diff, 0);
-        return;
-      }
-      if (maxAvailableHeight - nextHeight > SCROLL_EPS_PX) {
         nextScrollTop = 0;
-      } else {
-        setReachedMax = true;
-        if (scrollTop < maxScrollTop) {
-          nextScrollTop = scrollTop - (diff - overshoot);
-        }
+      }
+    } else {
+      setReachedMax = true;
+      if (isBottomPositioned && scrollTop < maxScrollTop) {
+        const overshoot = currentHeight + diff - maxAvailableHeight;
+        nextScrollTop = scrollTop - (diff - overshoot);
       }
     }
     nextPositionerHeight = Math.ceil(nextPositionerHeight);
@@ -1185,11 +1157,11 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
       const target = scrollToMax ? nextMaxScrollTop : clamp(nextScrollTop, 0, nextMaxScrollTop);
 
       // Avoid adjustments that re-trigger scroll events forever.
-      if (Math.abs(scroller.scrollTop - target) > SCROLL_EPS_PX) {
+      if (Math.abs(scroller.scrollTop - target) > SCROLL_EDGE_TOLERANCE_PX) {
         scroller.scrollTop = target;
       }
     }
-    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - SCROLL_EPS_PX) {
+    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - SCROLL_EDGE_TOLERANCE_PX) {
       reachedMaxHeightRef.current = true;
     }
     handleScrollArrowVisibility();
@@ -1232,13 +1204,15 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
     }
     initialPlacedRef.current = false;
     reachedMaxHeightRef.current = false;
-    initialHeightRef.current = 0;
-    maxHeightRef.current = 0;
     clearStyles(positionerElement, originalPositionerStylesRef.current);
   }, [open, alignItemWithTriggerActive, positionerElement, popupRef]);
   useIsoLayoutEffect(() => {
     const popupElement = popupRef.current;
-    if (!open || !triggerElement || !positionerElement || !popupElement || store.state.transitionStatus === 'ending') {
+
+    // Wait for Floating UI's first positioning pass before reading DOM geometry.
+    // We replace the final coordinates for aligned selects, but still need middleware
+    // like `size()` to set CSS variables such as `--anchor-width`.
+    if (!open || !triggerElement || !positionerElement || !popupElement || alignItemWithTriggerActive && !isPositioned || store.state.transitionStatus === 'ending') {
       return;
     }
     if (!alignItemWithTriggerActive) {
@@ -1248,114 +1222,113 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
       return;
     }
 
-    // Wait for `selectedItemTextRef.current` to be set.
-    queueMicrotask(() => {
-      // Ensure we remove any transforms that can affect the location of the popup
-      // and therefore the calculations.
-      const restoreTransformStyles = unsetTransformStyles(popupElement);
-      popupElement.style.removeProperty('--transform-origin');
-      try {
-        const positionerStyles = getComputedStyle(positionerElement);
-        const popupStyles = getComputedStyle(popupElement);
-        const doc = ownerDocument(triggerElement);
-        const win = getWindow(positionerElement);
-        const scale = getScale(triggerElement);
-        const triggerRect = normalizeRect(triggerElement.getBoundingClientRect(), scale);
-        const positionerRect = normalizeRect(positionerElement.getBoundingClientRect(), scale);
-        const triggerX = triggerRect.left;
-        const triggerHeight = triggerRect.height;
-        const scroller = listElement || popupElement;
-        const scrollHeight = scroller.scrollHeight;
-        const borderBottom = parseFloat(popupStyles.borderBottomWidth);
-        const marginTop = parseFloat(positionerStyles.marginTop) || 10;
-        const marginBottom = parseFloat(positionerStyles.marginBottom) || 10;
-        const minHeight = parseFloat(positionerStyles.minHeight) || 100;
-        const maxPopupHeight = getMaxPopupHeight(popupStyles);
-        const paddingLeft = 5;
-        const paddingRight = 5;
-        const triggerCollisionThreshold = 20;
-        const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
-        const viewportWidth = doc.documentElement.clientWidth;
-        const availableSpaceBeneathTrigger = viewportHeight - triggerRect.bottom + triggerHeight;
-        const textElement = selectedItemTextRef.current;
-        const valueElement = valueRef.current;
-        let textRect;
-        let offsetX = 0;
-        let offsetY = 0;
-        if (textElement && valueElement) {
-          const valueRect = normalizeRect(valueElement.getBoundingClientRect(), scale);
-          textRect = normalizeRect(textElement.getBoundingClientRect(), scale);
-          const valueLeftFromTriggerLeft = valueRect.left - triggerX;
-          const textLeftFromPositionerLeft = textRect.left - positionerRect.left;
-          const valueCenterFromPositionerTop = valueRect.top - triggerRect.top + valueRect.height / 2;
-          const textCenterFromTriggerTop = textRect.top - positionerRect.top + textRect.height / 2;
-          offsetX = valueLeftFromTriggerLeft - textLeftFromPositionerLeft;
-          offsetY = textCenterFromTriggerTop - valueCenterFromPositionerTop;
-        }
-        const idealHeight = availableSpaceBeneathTrigger + offsetY + marginBottom + borderBottom;
-        let height = Math.min(viewportHeight, idealHeight);
-        const maxHeight = viewportHeight - marginTop - marginBottom;
-        const scrollTop = idealHeight - height;
-        const left = Math.max(paddingLeft, triggerX + offsetX);
-        const maxRight = viewportWidth - paddingRight;
-        const rightOverflow = Math.max(0, left + positionerRect.width - maxRight);
-        positionerElement.style.left = `${left - rightOverflow}px`;
-        positionerElement.style.height = `${height}px`;
-        positionerElement.style.maxHeight = 'auto';
-        positionerElement.style.marginTop = `${marginTop}px`;
-        positionerElement.style.marginBottom = `${marginBottom}px`;
-        popupElement.style.height = '100%';
-        const maxScrollTop = getMaxScrollTop(scroller);
-        const isTopPositioned = scrollTop >= maxScrollTop - SCROLL_EPS_PX;
-        if (isTopPositioned) {
-          height = Math.min(viewportHeight, positionerRect.height) - (scrollTop - maxScrollTop);
-        }
-
-        // When the trigger is too close to the top or bottom of the viewport, or the minHeight is
-        // reached, we fallback to aligning the popup to the trigger as the UX is poor otherwise.
-        const fallbackToAlignPopupToTrigger = triggerRect.top < triggerCollisionThreshold || triggerRect.bottom > viewportHeight - triggerCollisionThreshold || Math.ceil(height) + SCROLL_EPS_PX < Math.min(scrollHeight, minHeight);
+    // Ensure we remove any transforms that can affect the location of the popup
+    // and therefore the calculations.
+    const restoreTransformStyles = unsetTransformStyles(popupElement);
+    popupElement.style.removeProperty('--transform-origin');
+    try {
+      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 win = getWindow(positionerElement);
+      const positionerStyles = win.getComputedStyle(positionerElement);
+      const popupStyles = win.getComputedStyle(popupElement);
+      const doc = ownerDocument(triggerElement);
+      const scale = getScale(triggerElement);
+      const triggerRect = normalizeRect(triggerElement.getBoundingClientRect(), scale);
+      const positionerRect = normalizeRect(positionerElement.getBoundingClientRect(), scale);
+      const triggerHeight = triggerRect.height;
+      const scroller = listElement || popupElement;
+      const scrollHeight = scroller.scrollHeight;
+      const borderBottom = parseFloat(popupStyles.borderBottomWidth);
+      // The `|| N` fallbacks cover an unset/`auto` value (parses to `NaN`). Note a literal `0`
+      // also resolves to the fallback, so an explicit `margin: 0` or `min-height: 0` still takes
+      // the default below.
+      const marginTop = parseFloat(positionerStyles.marginTop) || 10;
+      const marginBottom = parseFloat(positionerStyles.marginBottom) || 10;
+      const minHeight = parseFloat(positionerStyles.minHeight) || 100;
+      const maxPopupHeight = getMaxPopupHeight(popupStyles);
+      const paddingLeft = 5;
+      const paddingRight = 5;
+      const triggerCollisionThreshold = 20;
+      const viewportHeight = doc.documentElement.clientHeight - marginTop - marginBottom;
+      const viewportWidth = doc.documentElement.clientWidth;
+      const availableSpaceBeneathTrigger = viewportHeight - triggerRect.bottom + triggerHeight;
+      let textRect;
+      let alignedLeft = direction === 'rtl' ? triggerRect.right - positionerRect.width : triggerRect.left;
+      let offsetY = 0;
+      if (textElement && valueElement) {
+        const valueRect = normalizeRect(valueElement.getBoundingClientRect(), scale);
+        textRect = normalizeRect(textElement.getBoundingClientRect(), scale);
+        alignedLeft = positionerRect.left + (direction === 'rtl' ? valueRect.right - textRect.right : valueRect.left - textRect.left);
+        const valueCenterFromTriggerTop = valueRect.top - triggerRect.top + valueRect.height / 2;
+        const textCenterFromPositionerTop = textRect.top - positionerRect.top + textRect.height / 2;
+        offsetY = textCenterFromPositionerTop - valueCenterFromTriggerTop;
+      }
+      const idealHeight = availableSpaceBeneathTrigger + offsetY + marginBottom + borderBottom;
+      let height = Math.min(viewportHeight, idealHeight);
+      const maxHeight = viewportHeight - marginTop - marginBottom;
+      const scrollTop = idealHeight - height;
+      const maxRight = viewportWidth - paddingRight;
+      positionerElement.style.left = `${clamp(alignedLeft, paddingLeft, maxRight - positionerRect.width)}px`;
+      positionerElement.style.height = `${height}px`;
+      // `none` (not the invalid `auto`) so the explicit height governs in align mode and isn't
+      // clamped by a `max-height` from user CSS.
+      positionerElement.style.maxHeight = 'none';
+      positionerElement.style.marginTop = `${marginTop}px`;
+      positionerElement.style.marginBottom = `${marginBottom}px`;
+      popupElement.style.height = '100%';
+      const maxScrollTop = getMaxScrollTop(scroller);
+      const isTopPositioned = scrollTop >= maxScrollTop - SCROLL_EDGE_TOLERANCE_PX;
+      if (isTopPositioned) {
+        height = Math.min(viewportHeight, positionerRect.height) - (scrollTop - maxScrollTop);
+      }
 
-        // Safari doesn't position the popup correctly when pinch-zoomed.
-        const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && isWebKit;
-        if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
-          initialPlacedRef.current = true;
-          clearStyles(positionerElement, originalPositionerStylesRef.current);
-          ReactDOM.flushSync(() => setControlledAlignItemWithTrigger(false));
-          return;
-        }
-        if (isTopPositioned) {
-          const topOffset = Math.max(0, viewportHeight - idealHeight);
-          positionerElement.style.top = positionerRect.height >= maxHeight ? '0' : `${topOffset}px`;
-          positionerElement.style.height = `${height}px`;
-          scroller.scrollTop = getMaxScrollTop(scroller);
-          initialHeightRef.current = Math.max(minHeight, height);
-        } else {
-          positionerElement.style.bottom = '0';
-          initialHeightRef.current = Math.max(minHeight, height);
-          scroller.scrollTop = scrollTop;
-        }
-        if (textRect) {
-          const popupTop = positionerRect.top;
-          const popupHeight = positionerRect.height;
-          const textCenterY = textRect.top + textRect.height / 2;
-          const transformOriginY = popupHeight > 0 ? (textCenterY - popupTop) / popupHeight * 100 : 50;
-          const clampedY = clamp(transformOriginY, 0, 100);
-          popupElement.style.setProperty('--transform-origin', `50% ${clampedY}%`);
-        }
-        if (initialHeightRef.current === viewportHeight || height >= maxPopupHeight) {
-          reachedMaxHeightRef.current = true;
-        }
-        handleScrollArrowVisibility();
+      // When the trigger is too close to the top or bottom of the viewport, or the minHeight is
+      // reached, we fallback to aligning the popup to the trigger as the UX is poor otherwise.
+      const fallbackToAlignPopupToTrigger = triggerRect.top < triggerCollisionThreshold || triggerRect.bottom > viewportHeight - triggerCollisionThreshold || Math.ceil(height) + SCROLL_EDGE_TOLERANCE_PX < Math.min(scrollHeight, minHeight);
 
-        // Avoid the `onScroll` event logic from triggering before the popup is placed.
-        setTimeout(() => {
-          initialPlacedRef.current = true;
-        });
-      } finally {
-        restoreTransformStyles();
+      // Safari doesn't position the popup correctly when pinch-zoomed.
+      const isPinchZoomed = (win.visualViewport?.scale ?? 1) !== 1 && webkit;
+      if (fallbackToAlignPopupToTrigger || isPinchZoomed) {
+        initialPlacedRef.current = true;
+        clearStyles(positionerElement, originalPositionerStylesRef.current);
+        setControlledAlignItemWithTrigger(false);
+        return;
       }
-    });
-  }, [store, open, positionerElement, triggerElement, valueRef, selectedItemTextRef, popupRef, handleScrollArrowVisibility, alignItemWithTriggerActive, setControlledAlignItemWithTrigger, scrollArrowFrame, scrollDownArrowRef, scrollUpArrowRef, listElement]);
+      const initialHeight = Math.max(minHeight, height);
+      if (isTopPositioned) {
+        const topOffset = Math.max(0, viewportHeight - idealHeight);
+        positionerElement.style.top = positionerRect.height >= maxHeight ? '0' : `${topOffset}px`;
+        positionerElement.style.height = `${height}px`;
+        scroller.scrollTop = getMaxScrollTop(scroller);
+      } else {
+        positionerElement.style.bottom = '0';
+        scroller.scrollTop = scrollTop;
+      }
+      if (textRect) {
+        const popupTop = positionerRect.top;
+        const popupHeight = positionerRect.height;
+        const textCenterY = textRect.top + textRect.height / 2;
+        const transformOriginY = popupHeight > 0 ? (textCenterY - popupTop) / popupHeight * 100 : 50;
+        const clampedY = clamp(transformOriginY, 0, 100);
+        popupElement.style.setProperty('--transform-origin', `50% ${clampedY}%`);
+      }
+      if (initialHeight === viewportHeight || height >= maxPopupHeight) {
+        reachedMaxHeightRef.current = true;
+      }
+      handleScrollArrowVisibility();
+      if (highlightItemOnHover && store.state.selectedIndex === null && store.state.activeIndex === null && listRef.current[0] != null) {
+        store.set('activeIndex', 0);
+      }
+      initialPlacedRef.current = true;
+    } finally {
+      restoreTransformStyles();
+    }
+  }, [store, open, positionerElement, triggerElement, valueRef, firstItemTextRef, selectedItemTextRef, popupRef, handleScrollArrowVisibility, alignItemWithTriggerActive, setControlledAlignItemWithTrigger, scrollArrowFrame, listElement, listRef, highlightItemOnHover, direction, isPositioned]);
   React.useEffect(() => {
     if (!alignItemWithTriggerActive || !positionerElement || !open) {
       return undefined;
@@ -1364,10 +1337,7 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
     function handleResize(event) {
       setOpen(false, createChangeEventDetails(windowResize, event));
     }
-    win.addEventListener('resize', handleResize);
-    return () => {
-      win.removeEventListener('resize', handleResize);
-    };
+    return addEventListener(win, 'resize', handleResize);
   }, [setOpen, alignItemWithTriggerActive, positionerElement, open]);
   const defaultProps = {
     ...(listElement ? {
@@ -1379,26 +1349,10 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
       id: `${id}-list`
     }),
     onKeyDown(event) {
-      keyboardActiveRef.current = true;
       if (insideToolbar && COMPOSITE_KEYS.has(event.key)) {
         event.stopPropagation();
       }
     },
-    onMouseMove() {
-      keyboardActiveRef.current = false;
-    },
-    onPointerLeave(event) {
-      if (!highlightItemOnHover || isMouseWithinBounds(event) || event.pointerType === 'touch') {
-        return;
-      }
-      const popup = event.currentTarget;
-      highlightTimeout.start(0, () => {
-        store.set('activeIndex', null);
-        popup.focus({
-          preventScroll: true
-        });
-      });
-    },
     onScroll(event) {
       if (listElement) {
         return;
@@ -1424,6 +1378,7 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
       context: floatingRootContext,
       modal: false,
       disabled: !mounted,
+      openInteractionType: openMethod,
       returnFocus: finalFocus,
       restoreFocus: true,
       children: element
@@ -1436,18 +1391,21 @@ function getMaxPopupHeight(popupStyles) {
   return maxHeightStyle.endsWith('px') ? parseFloat(maxHeightStyle) || Infinity : Infinity;
 }
 function getMaxScrollTop(scroller) {
-  return Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+  return getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
 }
 function getScale(element) {
   // The platform API is async-capable, but the DOM platform returns a plain scale object.
   return platform.getScale(element);
 }
+function normalizeSize(size, axis, scale) {
+  return size / scale[axis];
+}
 function normalizeRect(rect, scale) {
   return rectToClientRect({
-    x: rect.x / scale.x,
-    y: rect.y / scale.y,
-    width: rect.width / scale.x,
-    height: rect.height / scale.y
+    x: normalizeSize(rect.x, 'x', scale),
+    y: normalizeSize(rect.y, 'y', scale),
+    width: normalizeSize(rect.width, 'x', scale),
+    height: normalizeSize(rect.height, 'y', scale)
   });
 }
 const TRANSFORM_STYLE_RESETS = [['transform', 'none'], ['scale', '1'], ['translate', '0 0']];
@@ -1480,8 +1438,9 @@ function unsetTransformStyles(popupElement) {
  */
 const SelectList = /*#__PURE__*/React.forwardRef(function SelectList(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -1531,6 +1490,7 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
   const {
     render,
     className,
+    style,
     value: itemValue = null,
     label,
     disabled = false,
@@ -1545,25 +1505,25 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
   });
   const {
     store,
-    getItemProps,
+    itemProps,
     setOpen,
     setValue,
     selectionRef,
     typingRef,
     valuesRef,
-    keyboardActiveRef,
     multiple,
-    highlightItemOnHover
+    selectedItemTextRef,
+    disabled: selectDisabled,
+    readOnly
   } = useSelectRootContext();
-  const highlightTimeout = useTimeout();
   const highlighted = useStore(store, selectors.isActive, listItem.index);
-  const selected = useStore(store, selectors.isSelected, listItem.index, itemValue);
+  const open = useStore(store, selectors.open);
+  const selected = useStore(store, selectors.isSelected, itemValue);
   const selectedByFocus = useStore(store, selectors.isSelectedByFocus, listItem.index);
   const isItemEqualToValue = useStore(store, selectors.isItemEqualToValue);
   const index = listItem.index;
   const hasRegistered = index !== -1;
   const itemRef = React.useRef(null);
-  const indexRef = useValueAsRef(index);
   useIsoLayoutEffect(() => {
     if (!hasRegistered) {
       return undefined;
@@ -1576,34 +1536,27 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
   }, [hasRegistered, index, itemValue, valuesRef]);
   useIsoLayoutEffect(() => {
     if (!hasRegistered) {
-      return undefined;
+      return;
     }
     const selectedValue = store.state.value;
     let selectedCandidate = selectedValue;
-    if (multiple && Array.isArray(selectedValue) && selectedValue.length > 0) {
-      selectedCandidate = selectedValue[selectedValue.length - 1];
+    if (multiple && Array.isArray(selectedValue)) {
+      // Compare against the last selected item, or `undefined` when nothing is selected — never
+      // the raw array, which a custom `isItemEqualToValue` isn't expected to receive.
+      selectedCandidate = selectedValue.length > 0 ? selectedValue[selectedValue.length - 1] : undefined;
     }
     if (selectedCandidate !== undefined && compareItemEquality(itemValue, selectedCandidate, isItemEqualToValue)) {
       store.set('selectedIndex', index);
+      // Make sure SelectPopup can measure the selected item on first open.
+      // SelectItemText can still update this ref later when focus moves.
+      if (textRef.current) {
+        selectedItemTextRef.current = textRef.current;
+      }
     }
-    return undefined;
-  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue]);
-  const state = {
-    disabled,
-    selected,
-    highlighted
-  };
-  const rootProps = getItemProps({
-    active: highlighted,
-    selected
-  });
-  // With our custom `focusItemOnHover` implementation, this interferes with the logic and can
-  // cause the index state to be stuck when leaving the select popup.
-  rootProps.onFocus = undefined;
-  rootProps.id = undefined;
+  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue, selectedItemTextRef]);
   const lastKeyRef = React.useRef(null);
   const pointerTypeRef = React.useRef('mouse');
-  const didPointerDownRef = React.useRef(false);
+  const allowMouseSelectionRef = React.useRef(false);
   const {
     getButtonProps,
     buttonRef
@@ -1613,7 +1566,17 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
     native: nativeButton,
     composite: true
   });
+  const state = {
+    disabled,
+    selected,
+    highlighted
+  };
   function commitSelection(event) {
+    // A forced-open select (`open`/`defaultOpen`) can still receive item activations even
+    // when the root is disabled or read-only, so guard the commit here too.
+    if (selectDisabled || readOnly) {
+      return;
+    }
     const selectedValue = store.state.value;
     if (multiple) {
       const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
@@ -1624,39 +1587,13 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
       setOpen(false, createChangeEventDetails(itemPress, event));
     }
   }
+  function resetDragMovement() {
+    selectionRef.current.dragY = 0;
+  }
   const defaultProps = {
     role: 'option',
     'aria-selected': selected,
-    tabIndex: highlighted ? 0 : -1,
-    onFocus() {
-      store.set('activeIndex', index);
-    },
-    onMouseEnter() {
-      if (!keyboardActiveRef.current && store.state.selectedIndex === null && highlightItemOnHover) {
-        store.set('activeIndex', index);
-      }
-    },
-    onMouseMove() {
-      if (highlightItemOnHover) {
-        store.set('activeIndex', index);
-      }
-    },
-    onMouseLeave(event) {
-      if (!highlightItemOnHover || keyboardActiveRef.current || isMouseWithinBounds(event)) {
-        return;
-      }
-      highlightTimeout.start(0, () => {
-        if (store.state.activeIndex === index) {
-          store.set('activeIndex', null);
-        }
-      });
-    },
-    onTouchStart() {
-      selectionRef.current = {
-        allowSelectedMouseUp: false,
-        allowUnselectedMouseUp: false
-      };
-    },
+    tabIndex: open && highlighted ? 0 : -1,
     onKeyDown(event) {
       lastKeyRef.current = event.key;
       store.set('activeIndex', index);
@@ -1665,13 +1602,24 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
       }
     },
     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;
@@ -1680,40 +1628,52 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
     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
@@ -1738,13 +1698,13 @@ const SelectItemIndicator = /*#__PURE__*/React.forwardRef(function SelectItemInd
   });
 });
 
-/** 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 {
     render,
     className,
+    style,
     keepMounted,
     ...elementProps
   } = componentProps;
@@ -1790,28 +1750,32 @@ if (process.env.NODE_ENV !== "production") Inner.displayName = "Inner";
  */
 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
@@ -1832,8 +1796,9 @@ function useSelectGroupContext() {
 
 const SelectGroup = /*#__PURE__*/React.forwardRef(function SelectGroup(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     ...elementProps
   } = componentProps;
   const [labelId, setLabelId] = React.useState();
@@ -1863,8 +1828,9 @@ if (process.env.NODE_ENV !== "production") SelectGroup.displayName = "SelectGrou
  */
 const SelectGroupLabel = /*#__PURE__*/React.forwardRef(function SelectGroupLabel(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;
@@ -1885,4 +1851,4 @@ const SelectGroupLabel = /*#__PURE__*/React.forwardRef(function SelectGroupLabel
 });
 if (process.env.NODE_ENV !== "production") SelectGroupLabel.displayName = "SelectGroupLabel";
 
-export { SelectRoot as S, SelectPortal as a, SelectTrigger as b, SelectValue as c, SelectPositioner as d, SelectPopup as e, SelectList as f, SelectItem as g, SelectItemText as h, SelectItemIndicator as i, SelectGroup as j, SelectGroupLabel as k, useSelectPositionerContext as l, selectors as s, useSelectRootContext as u };
+export { SelectRoot as S, SelectPortal as a, SelectTrigger as b, SelectValue as c, SelectPositioner as d, SelectPopup as e, SelectList as f, SelectItem as g, SelectItemText as h, SelectItemIndicator as i, SelectGroup as j, SelectGroupLabel as k, useSelectRootContext as l, useSelectPositionerContext as m, selectors as s, usePreviousValue as u };