@base-ui/react 1.4.1 → 1.5.0

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

@@ -31,8 +31,7 @@ export const SelectItemIndicator = /*#__PURE__*/React.forwardRef(function Select
   });
 });
 
-/** The core implementation of the indicator is split here to avoid paying the hooks
- * costs unless the element needs to be mounted. */
+// Split the core implementation to avoid paying the hook costs unless the element needs to mount.
 if (process.env.NODE_ENV !== "production") SelectItemIndicator.displayName = "SelectItemIndicator";
 const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentProps, forwardedRef) => {
   const {

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

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

package/esm/select/list/SelectList.js

@@ -18,8 +18,8 @@ import { selectors } from "../store.js";
  */
 export const SelectList = /*#__PURE__*/React.forwardRef(function SelectList(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/select/popup/SelectPopup.js

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

package/esm/select/positioner/SelectPositioner.js

@@ -114,6 +114,9 @@ export const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPos
     align: positioning.align,
     anchorHidden: positioning.anchorHidden
   };
+  useIsoLayoutEffect(() => {
+    store.set('popupSide', positioning.side);
+  }, [store, positioning.side]);
   const setPositionerElement = useStableCallback(element => {
     store.set('positionerElement', element);
   });

package/esm/select/root/SelectRoot.js

@@ -12,7 +12,7 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStore, Store } from '@base-ui/utils/store';
 import { EMPTY_ARRAY, EMPTY_OBJECT } from '@base-ui/utils/empty';
-import { useClick, useDismiss, useFloatingRootContext, useInteractions, useListNavigation, useTypeahead } from "../../floating-ui-react/index.js";
+import { useClick, useDismiss, useFloatingRootContext, useListNavigation, useTypeahead } from "../../floating-ui-react/index.js";
 import { SelectRootContext, SelectFloatingContext } from "./SelectRootContext.js";
 import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
 import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.js";
@@ -28,6 +28,7 @@ import { defaultItemEquality, findItemIndex } from "../../internals/itemEquality
 import { useValueChanged } from "../../internals/useValueChanged.js";
 import { useOpenInteractionType } from "../../utils/useOpenInteractionType.js";
 import { getMaxScrollOffset, normalizeScrollOffset } from "../../utils/scrollEdges.js";
+import { FOCUSABLE_POPUP_PROPS } from "../../utils/popups/index.js";
 import { mergeProps } from "../../merge-props/index.js";
 
 /**
@@ -105,10 +106,12 @@ export function SelectRoot(props) {
   const valuesRef = React.useRef([]);
   const typingRef = React.useRef(false);
   const keyboardActiveRef = React.useRef(false);
+  const firstItemTextRef = React.useRef(null);
   const selectedItemTextRef = React.useRef(null);
   const selectionRef = React.useRef({
     allowSelectedMouseUp: false,
-    allowUnselectedMouseUp: false
+    allowUnselectedMouseUp: false,
+    dragY: 0
   });
   const alignItemWithTriggerActiveRef = React.useRef(false);
   const {
@@ -142,6 +145,7 @@ export function SelectRoot(props) {
     triggerElement: null,
     positionerElement: null,
     listElement: null,
+    popupSide: null,
     scrollUpArrowVisible: false,
     scrollDownArrowVisible: false,
     hasScrollArrows: false
@@ -165,13 +169,10 @@ export function SelectRoot(props) {
     return stringifyAsValue(value, itemToStringValue);
   }, [multiple, value, itemToStringValue]);
   const controlRef = useValueAsRef(store.state.triggerElement);
-  const getFieldValue = useStableCallback(() => fieldStringValue);
-  useRegisterFieldControl(controlRef, {
-    id: generatedId,
-    value,
-    getValue: getFieldValue
-  });
+  const getStringifiedValueForForm = useStableCallback(() => fieldStringValue);
+  useRegisterFieldControl(controlRef, generatedId, value, getStringifiedValueForForm);
   const initialValueRef = React.useRef(value);
+  const hasSelectedValue = multiple ? Array.isArray(value) && value.length > 0 : value != null;
   useIsoLayoutEffect(() => {
     // Ensure the values and labels are registered for programmatic value changes.
     if (value !== initialValueRef.current) {
@@ -179,27 +180,32 @@ export function SelectRoot(props) {
     }
   }, [store, value]);
   useIsoLayoutEffect(() => {
-    setFilled(multiple ? Array.isArray(value) && value.length > 0 : value != null);
-  }, [multiple, value, setFilled]);
+    setFilled(hasSelectedValue);
+  }, [hasSelectedValue, setFilled]);
   useIsoLayoutEffect(function syncSelectedIndex() {
-    if (open) {
-      return;
-    }
     const registry = valuesRef.current;
+    let nextIndex;
     if (multiple) {
       const currentValue = Array.isArray(value) ? value : [];
       if (currentValue.length === 0) {
-        store.set('selectedIndex', null);
-        return;
+        nextIndex = null;
+      } else {
+        const lastValue = currentValue[currentValue.length - 1];
+        const lastIndex = findItemIndex(registry, lastValue, isItemEqualToValue);
+        nextIndex = lastIndex === -1 ? null : lastIndex;
       }
-      const lastValue = currentValue[currentValue.length - 1];
-      const lastIndex = findItemIndex(registry, lastValue, isItemEqualToValue);
-      store.set('selectedIndex', lastIndex === -1 ? null : lastIndex);
+    } else {
+      const index = findItemIndex(registry, value, isItemEqualToValue);
+      nextIndex = index === -1 ? null : index;
+    }
+    if (nextIndex === null) {
+      selectedItemTextRef.current = null;
+    }
+    if (open) {
       return;
     }
-    const index = findItemIndex(registry, value, isItemEqualToValue);
-    store.set('selectedIndex', index === -1 ? null : index);
-  }, [multiple, open, value, valuesRef, isItemEqualToValue, store]);
+    store.set('selectedIndex', nextIndex);
+  }, [hasSelectedValue, multiple, open, value, valuesRef, isItemEqualToValue, store, selectedItemTextRef]);
   useValueChanged(value, () => {
     clearErrors(name);
     setDirty(value !== validityData.initialValue);
@@ -293,9 +299,7 @@ export function SelectRoot(props) {
     enabled: !readOnly && !disabled,
     event: 'mousedown'
   });
-  const dismiss = useDismiss(floatingContext, {
-    bubbles: false
-  });
+  const dismiss = useDismiss(floatingContext);
   const listNavigation = useListNavigation(floatingContext, {
     enabled: !readOnly && !disabled,
     listRef,
@@ -323,23 +327,22 @@ export function SelectRoot(props) {
         setValue(valuesRef.current[index], createChangeEventDetails('none'));
       }
     },
-    onTypingChange(typing) {
+    onTyping(typing) {
       typingRef.current = typing;
     }
   });
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps
-  } = useInteractions([click, dismiss, listNavigation, typeahead]);
   const mergedTriggerProps = React.useMemo(() => {
-    return mergeProps(getReferenceProps(), interactionTypeProps, generatedId ? {
-      id: generatedId
-    } : EMPTY_OBJECT);
-  }, [getReferenceProps, interactionTypeProps, generatedId]);
+    const triggerInteractionProps = mergeProps(typeahead.reference, listNavigation.reference, dismiss.reference, click.reference, interactionTypeProps);
+    if (generatedId) {
+      triggerInteractionProps.id = generatedId;
+    }
+    return triggerInteractionProps;
+  }, [click.reference, typeahead.reference, listNavigation.reference, dismiss.reference, interactionTypeProps, generatedId]);
+  const popupProps = React.useMemo(() => mergeProps(FOCUSABLE_POPUP_PROPS, typeahead.floating, listNavigation.floating, dismiss.floating), [typeahead.floating, listNavigation.floating, dismiss.floating]);
+  const itemProps = listNavigation.item ?? EMPTY_OBJECT;
   useOnFirstRender(() => {
     store.update({
-      popupProps: getFloatingProps(),
+      popupProps,
       triggerProps: mergedTriggerProps
     });
   });
@@ -352,7 +355,7 @@ export function SelectRoot(props) {
       open,
       mounted,
       transitionStatus,
-      popupProps: getFloatingProps(),
+      popupProps,
       triggerProps: mergedTriggerProps,
       items,
       itemToStringLabel,
@@ -360,7 +363,7 @@ export function SelectRoot(props) {
       isItemEqualToValue,
       openMethod: renderedOpenMethod
     });
-  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, getFloatingProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, renderedOpenMethod]);
+  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, popupProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, renderedOpenMethod]);
   const contextValue = React.useMemo(() => ({
     store,
     name,
@@ -376,20 +379,21 @@ export function SelectRoot(props) {
     scrollHandlerRef,
     handleScrollArrowVisibility,
     scrollArrowsMountedCountRef,
-    getItemProps,
+    itemProps,
     events: floatingContext.context.events,
     valueRef,
     valuesRef,
     labelsRef,
     typingRef,
     selectionRef,
+    firstItemTextRef,
     selectedItemTextRef,
     validation,
     onOpenChangeComplete,
     keyboardActiveRef,
     alignItemWithTriggerActiveRef,
     initialValueRef
-  }), [store, name, required, disabled, readOnly, multiple, highlightItemOnHover, setValue, setOpen, getItemProps, floatingContext.context.events, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
+  }), [store, name, required, disabled, readOnly, multiple, highlightItemOnHover, setValue, setOpen, itemProps, floatingContext.context.events, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
   const ref = useMergedRefs(inputRef, validation.inputRef);
   const hasMultipleSelection = multiple && Array.isArray(value) && value.length > 0;
   const hiddenInputName = multiple ? undefined : name;
@@ -423,7 +427,9 @@ export function SelectRoot(props) {
           // Handle browser autofill.
           onChange(event) {
             // Workaround for https://github.com/facebook/react/issues/9023
-            if (event.nativeEvent.defaultPrevented) {
+            if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
+              // Outside Field.Root, the event is not wrapped by mergeProps.
+              event.preventBaseUIHandler?.();
               return;
             }
             const nextValue = event.currentTarget.value;

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

@@ -19,10 +19,7 @@ export interface SelectRootContext {
   scrollHandlerRef: React.RefObject<((el: HTMLDivElement) => void) | null>;
   handleScrollArrowVisibility: () => void;
   scrollArrowsMountedCountRef: React.RefObject<number>;
-  getItemProps: (props?: HTMLProps & {
-    active?: boolean | undefined;
-    selected?: boolean | undefined;
-  }) => Record<string, unknown>;
+  itemProps: HTMLProps;
   events: FloatingEvents;
   valueRef: React.RefObject<HTMLSpanElement | null>;
   valuesRef: React.RefObject<Array<any>>;
@@ -31,8 +28,10 @@ export interface SelectRootContext {
   selectionRef: React.RefObject<{
     allowUnselectedMouseUp: boolean;
     allowSelectedMouseUp: boolean;
+    dragY: number;
   }>;
-  selectedItemTextRef: React.RefObject<HTMLSpanElement | null>;
+  firstItemTextRef: React.RefObject<HTMLElement | null>;
+  selectedItemTextRef: React.RefObject<HTMLElement | null>;
   validation: UseFieldValidationReturnValue;
   onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   keyboardActiveRef: React.RefObject<boolean>;

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

@@ -58,6 +58,7 @@ export const selectors = {
   triggerElement: createSelector(state => state.triggerElement),
   positionerElement: createSelector(state => state.positionerElement),
   listElement: createSelector(state => state.listElement),
+  popupSide: createSelector(state => state.popupSide),
   scrollUpArrowVisible: createSelector(state => state.scrollUpArrowVisible),
   scrollDownArrowVisible: createSelector(state => state.scrollDownArrowVisible),
   hasScrollArrows: createSelector(state => state.hasScrollArrows)

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

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

package/esm/select/trigger/SelectTrigger.js

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

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

@@ -15,6 +15,11 @@ export declare enum SelectTriggerDataAttributes {
    * Present when the select is readonly.
    */
   readonly = "data-readonly",
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  popupSide = "data-popup-side",
   /**
    * Present when the select is required.
    */

package/esm/select/trigger/SelectTriggerDataAttributes.js

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

package/esm/slider/control/SliderControl.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { isElement } from '@floating-ui/utils/dom';
 import { addEventListener } from '@base-ui/utils/addEventListener';
-import { ownerDocument } from '@base-ui/utils/owner';
+import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
@@ -107,9 +107,7 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
   const stylesRef = React.useRef(null);
   const setStylesRef = useStableCallback(element => {
     if (element && stylesRef.current == null) {
-      if (stylesRef.current == null) {
-        stylesRef.current = getComputedStyle(element);
-      }
+      stylesRef.current = ownerWindow(element).getComputedStyle(element);
     }
   });
 
@@ -121,7 +119,7 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
   // This value should be equal to the radius or half the width/height of the thumb.
   const insetThumbOffsetRef = React.useRef(0);
   const latestValuesRef = useValueAsRef(values);
-  const updatePressedThumb = useStableCallback(nextIndex => {
+  function updatePressedThumb(nextIndex) {
     if (pressedThumbIndexRef.current !== nextIndex) {
       pressedThumbIndexRef.current = nextIndex;
     }
@@ -132,8 +130,8 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
       return;
     }
     pressedInputRef.current = thumbElement.querySelector('input[type="range"]');
-  });
-  const getFingerState = useStableCallback(fingerCoords => {
+  }
+  function getFingerState(fingerCoords) {
     const control = controlRef.current;
     if (!control) {
       return null;
@@ -186,8 +184,8 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
       pressedThumbIndexRef.current = collisionResult.thumbIndex;
     }
     return collisionResult;
-  });
-  const startPressing = useStableCallback(fingerCoords => {
+  }
+  function startPressing(fingerCoords) {
     pressedValuesRef.current = range ? values.slice() : null;
     latestValuesRef.current = values;
     const pressedThumbIndex = pressedThumbIndexRef.current;
@@ -228,8 +226,8 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
         insetThumbOffsetRef.current = thumbRect[side] / 2;
       }
     }
-  });
-  const focusThumb = useStableCallback(thumbIndex => {
+  }
+  function focusThumb(thumbIndex) {
     const input = thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]');
     if (!input) {
       return;
@@ -240,7 +238,7 @@ export const SliderControl = /*#__PURE__*/React.forwardRef(function SliderContro
       // Supported in Chrome from 144+.
       focusVisible: false
     });
-  });
+  }
   const handleTouchMove = useStableCallback(nativeEvent => {
     const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
     if (fingerCoords == null) {

package/esm/slider/root/SliderRoot.js

@@ -135,10 +135,7 @@ export const SliderRoot = /*#__PURE__*/React.forwardRef(function SliderRoot(comp
       setLastUsedThumbIndex(value);
     }
   });
-  useRegisterFieldControl(controlRef, {
-    id,
-    value: valueUnwrapped
-  });
+  useRegisterFieldControl(controlRef, id, valueUnwrapped);
   useValueChanged(valueUnwrapped, () => {
     clearErrors(name);
     if (shouldValidateOnChange()) {