@base-ui/react 1.7.0 → 1.8.0

package/select/root/SelectRoot.mjs

@@ -11,10 +11,10 @@ import { useControlled } from '@base-ui/utils/useControlled';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
-import { useStore, ReactStore } from '@base-ui/utils/store';
+import { ReactStore } from '@base-ui/utils/store';
 import { EMPTY_ARRAY, EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { useClick, useDismiss, useFloatingRootContext, useListNavigation, useTypeahead } from "../../floating-ui-react/index.mjs";
-import { SelectRootContext } from "./SelectRootContext.mjs";
+import { SelectFloatingContext, SelectRootContext, SelectRootPropsContext } from "./SelectRootContext.mjs";
 import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.mjs";
 import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.mjs";
 import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.mjs";
@@ -25,13 +25,13 @@ import { REASONS } from "../../internals/reasons.mjs";
 import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.mjs";
 import { useFormContext } from "../../internals/form-context/FormContext.mjs";
 import { stringifyAsLabel, stringifyAsValue } from "../../internals/resolveValueLabel.mjs";
-import { compareItemEquality, defaultItemEquality, findItemIndex } from "../../internals/itemEquality.mjs";
-import { areArraysEqual } from "../../internals/areArraysEqual.mjs";
+import { defaultItemEquality, findSelectionIndex, isSelectedValueDirty } from "../../internals/itemEquality.mjs";
 import { useValueChanged } from "../../internals/useValueChanged.mjs";
 import { useOpenInteractionType } from "../../utils/useOpenInteractionType.mjs";
 import { getMaxScrollOffset, normalizeScrollOffset } from "../../utils/scrollEdges.mjs";
 import { FOCUSABLE_POPUP_PROPS } from "../../utils/popups/index.mjs";
 import { mergeProps } from "../../merge-props/index.mjs";
+import { NOOP } from "../../internals/noop.mjs";
 
 /**
  * Groups all parts of the select.
@@ -114,6 +114,7 @@ export function SelectRoot(props) {
     dragY: 0
   });
   const alignItemWithTriggerActiveRef = React.useRef(false);
+  const initialValueRef = React.useRef(value);
   const {
     mounted,
     setMounted,
@@ -140,8 +141,8 @@ export function SelectRoot(props) {
     openMethod: null,
     activeIndex: null,
     selectedIndex: null,
-    popupProps: {},
-    triggerProps: {},
+    popupProps: EMPTY_OBJECT,
+    triggerProps: EMPTY_OBJECT,
     triggerElement: null,
     positionerElement: null,
     listElement: null,
@@ -149,11 +150,29 @@ export function SelectRoot(props) {
     scrollUpArrowVisible: false,
     scrollDownArrowVisible: false,
     hasScrollArrows: false
-  })).current;
-  const activeIndex = useStore(store, selectors.activeIndex);
-  const selectedIndex = useStore(store, selectors.selectedIndex);
-  const triggerElement = useStore(store, selectors.triggerElement);
-  const positionerElement = useStore(store, selectors.positionerElement);
+  }, {
+    setValue: NOOP,
+    setOpen: NOOP,
+    handleScrollArrowVisibility: NOOP,
+    onOpenChangeComplete: NOOP,
+    listRef,
+    popupRef,
+    scrollHandlerRef,
+    scrollArrowsMountedCountRef,
+    valueRef,
+    valuesRef,
+    labelsRef,
+    typingRef,
+    selectionRef,
+    firstItemTextRef,
+    selectedItemTextRef,
+    alignItemWithTriggerActiveRef,
+    initialValueRef
+  }, selectors)).current;
+  const activeIndex = store.useState('activeIndex');
+  const selectedIndex = store.useState('selectedIndex');
+  const triggerElement = store.useState('triggerElement');
+  const positionerElement = store.useState('positionerElement');
   const previousOpenMethod = usePreviousValue(openMethod);
   const renderedOpenMethod = openMethod ?? previousOpenMethod;
   const serializedValue = React.useMemo(() => {
@@ -174,7 +193,7 @@ export function SelectRoot(props) {
   const controlRef = useValueAsRef(triggerElement);
   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 && serializedValue !== '';
@@ -182,15 +201,7 @@ export function SelectRoot(props) {
     setFilled(hasSelectedValue);
   }, [hasSelectedValue, setFilled]);
   useIsoLayoutEffect(function syncSelectedIndex() {
-    let target = value;
-    let empty = false;
-    if (multiple) {
-      const currentValue = Array.isArray(value) ? value : [];
-      empty = currentValue.length === 0;
-      target = currentValue[currentValue.length - 1];
-    }
-    const index = empty ? -1 : findItemIndex(valuesRef.current, target, isItemEqualToValue);
-    const nextIndex = index === -1 ? null : index;
+    const nextIndex = findSelectionIndex(valuesRef.current, value, isItemEqualToValue, multiple);
     if (nextIndex === null) {
       selectedItemTextRef.current = null;
     }
@@ -199,16 +210,9 @@ export function SelectRoot(props) {
     }
     store.set('selectedIndex', nextIndex);
   }, [multiple, open, value, isItemEqualToValue, store]);
-  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(isSelectedValueDirty(value));
+    setDirty(isSelectedValueDirty(value, validityData.initialValue, isItemEqualToValue));
     validation.change(value);
   });
   const setOpen = useStableCallback((nextOpen, eventDetails) => {
@@ -271,13 +275,17 @@ export function SelectRoot(props) {
       floating: positionerElement
     }
   });
+
+  // `readOnly` locks the value, not the interaction: the popup can be opened and browsed so the
+  // user can see the available options and which one is selected. Committing a value is blocked
+  // separately in `SelectItem` and in the hidden input's autofill handler.
   const click = useClick(floatingContext, {
-    enabled: !readOnly && !disabled,
+    enabled: !disabled,
     event: 'mousedown'
   });
   const dismiss = useDismiss(floatingContext);
   const listNavigation = useListNavigation(floatingContext, {
-    enabled: !readOnly && !disabled,
+    enabled: !disabled,
     listRef,
     activeIndex,
     selectedIndex,
@@ -292,7 +300,9 @@ export function SelectRoot(props) {
     focusItemOnHover: highlightItemOnHover
   });
   const typeahead = useTypeahead(floatingContext, {
-    enabled: !readOnly && !disabled && (open || !multiple),
+    // Typeahead on an open popup only moves the highlight, so it remains available while
+    // `readOnly`. The closed-trigger variant commits a value instead, so it doesn't.
+    enabled: !disabled && (open || !readOnly && !multiple),
     listRef: labelsRef,
     activeIndex,
     selectedIndex,
@@ -318,6 +328,13 @@ export function SelectRoot(props) {
   const mergedTriggerProps = React.useMemo(() => mergeProps(typeahead.reference, listNavigation.reference, dismiss.reference, click.reference, interactionTypeProps), [click.reference, typeahead.reference, listNavigation.reference, dismiss.reference, interactionTypeProps]);
   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;
+  store.useContextCallback('setValue', setValue);
+  store.useContextCallback('setOpen', setOpen);
+  store.useContextCallback('handleScrollArrowVisibility', handleScrollArrowVisibility);
+  store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
+
+  // The prop bags must be in the store before the parts render. `useSyncedValues` writes in a
+  // layout effect, after all descendants have rendered.
   useOnFirstRender(() => {
     store.update({
       popupProps,
@@ -340,34 +357,14 @@ export function SelectRoot(props) {
     isItemEqualToValue,
     openMethod: renderedOpenMethod
   });
-  const contextValue = React.useMemo(() => ({
-    store,
-    floatingContext,
-    required,
+  const rootPropsContextValue = React.useMemo(() => ({
     disabled,
     readOnly,
+    required,
     multiple,
     highlightItemOnHover,
-    setValue,
-    setOpen,
-    listRef,
-    popupRef,
-    scrollHandlerRef,
-    handleScrollArrowVisibility,
-    scrollArrowsMountedCountRef,
-    itemProps,
-    valueRef,
-    valuesRef,
-    labelsRef,
-    typingRef,
-    selectionRef,
-    firstItemTextRef,
-    selectedItemTextRef,
-    validation,
-    onOpenChangeComplete,
-    alignItemWithTriggerActiveRef,
-    initialValueRef
-  }), [store, floatingContext, required, disabled, readOnly, multiple, highlightItemOnHover, setValue, setOpen, itemProps, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
+    itemProps
+  }), [disabled, readOnly, required, multiple, highlightItemOnHover, itemProps]);
   const ref = useMergedRefs(inputRef, validation.inputRef);
   const hiddenInputName = multiple ? undefined : name;
   const hiddenInputs = React.useMemo(() => {
@@ -386,8 +383,14 @@ export function SelectRoot(props) {
     });
   }, [multiple, value, form, name, itemToStringValue, disabled]);
   return /*#__PURE__*/_jsxs(SelectRootContext.Provider, {
-    value: contextValue,
-    children: [children, /*#__PURE__*/_jsx("input", {
+    value: store,
+    children: [/*#__PURE__*/_jsx(SelectRootPropsContext.Provider, {
+      value: rootPropsContextValue,
+      children: /*#__PURE__*/_jsx(SelectFloatingContext.Provider, {
+        value: floatingContext,
+        children: children
+      })
+    }), /*#__PURE__*/_jsx("input", {
       ...validation.getValidationProps(disabled, {
         onFocus() {
           // Move focus to the trigger element when the hidden input is focused.
@@ -411,7 +414,8 @@ export function SelectRoot(props) {
             }
 
             // Preserve the original serialized matching, then fall back to rendered text,
-            // which browsers can autofill for primitive values like `value="US">United States`.
+            // 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) {

package/select/root/SelectRootContext.d.mts

@@ -1,40 +1,21 @@
 import * as React from 'react';
-import { type FloatingRootContext } from "../../floating-ui-react/index.mjs";
 import type { SelectStore } from "../store.mjs";
-import type { UseFieldValidationReturnValue } from "../../field/root/useFieldValidation.mjs";
 import type { HTMLProps } from "../../internals/types.mjs";
-import type { SelectRoot } from "./SelectRoot.mjs";
-export interface SelectRootContext {
-  store: SelectStore;
-  floatingContext: FloatingRootContext;
+/**
+ * Root values consumed during render. Keep these outside `useSyncedValues` so descendant ref
+ * callbacks see the current props during the same commit.
+ */
+export interface SelectRootPropsContextValue {
   disabled: boolean;
   readOnly: boolean;
   required: boolean;
   multiple: boolean;
   highlightItemOnHover: boolean;
-  setValue: (nextValue: any, eventDetails: SelectRoot.ChangeEventDetails) => void;
-  setOpen: (open: boolean, eventDetails: SelectRoot.ChangeEventDetails) => void;
-  listRef: React.RefObject<Array<HTMLElement | null>>;
-  popupRef: React.RefObject<HTMLDivElement | null>;
-  scrollHandlerRef: React.RefObject<((el: HTMLDivElement) => void) | null>;
-  handleScrollArrowVisibility: (scroller: HTMLElement) => void;
-  scrollArrowsMountedCountRef: React.RefObject<number>;
   itemProps: HTMLProps;
-  valueRef: React.RefObject<HTMLSpanElement | null>;
-  valuesRef: React.RefObject<Array<any>>;
-  labelsRef: React.RefObject<Array<string | null>>;
-  typingRef: React.RefObject<boolean>;
-  selectionRef: React.RefObject<{
-    allowUnselectedMouseUp: boolean;
-    allowSelectedMouseUp: boolean;
-    dragY: number;
-  }>;
-  firstItemTextRef: React.RefObject<HTMLElement | null>;
-  selectedItemTextRef: React.RefObject<HTMLElement | null>;
-  validation: UseFieldValidationReturnValue;
-  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
-  alignItemWithTriggerActiveRef: React.RefObject<boolean>;
-  initialValueRef: React.RefObject<any>;
 }
-export declare const SelectRootContext: React.Context<SelectRootContext | null>;
-export declare function useSelectRootContext(): SelectRootContext;
+export declare const SelectRootContext: React.Context<SelectStore | undefined>;
+export declare const SelectRootPropsContext: React.Context<SelectRootPropsContextValue | undefined>;
+export declare const SelectFloatingContext: React.Context<import("../../floating-ui-react/components/FloatingRootStore.mjs").FloatingRootStore | undefined>;
+export declare function useSelectRootContext(): SelectStore;
+export declare function useSelectRootPropsContext(): SelectRootPropsContextValue;
+export declare function useSelectFloatingContext(): import("../../floating-ui-react/components/FloatingRootStore.mjs").FloatingRootStore;

package/select/root/SelectRootContext.d.ts

@@ -1,40 +1,21 @@
 import * as React from 'react';
-import { type FloatingRootContext } from "../../floating-ui-react/index.js";
 import type { SelectStore } from "../store.js";
-import type { UseFieldValidationReturnValue } from "../../field/root/useFieldValidation.js";
 import type { HTMLProps } from "../../internals/types.js";
-import type { SelectRoot } from "./SelectRoot.js";
-export interface SelectRootContext {
-  store: SelectStore;
-  floatingContext: FloatingRootContext;
+/**
+ * Root values consumed during render. Keep these outside `useSyncedValues` so descendant ref
+ * callbacks see the current props during the same commit.
+ */
+export interface SelectRootPropsContextValue {
   disabled: boolean;
   readOnly: boolean;
   required: boolean;
   multiple: boolean;
   highlightItemOnHover: boolean;
-  setValue: (nextValue: any, eventDetails: SelectRoot.ChangeEventDetails) => void;
-  setOpen: (open: boolean, eventDetails: SelectRoot.ChangeEventDetails) => void;
-  listRef: React.RefObject<Array<HTMLElement | null>>;
-  popupRef: React.RefObject<HTMLDivElement | null>;
-  scrollHandlerRef: React.RefObject<((el: HTMLDivElement) => void) | null>;
-  handleScrollArrowVisibility: (scroller: HTMLElement) => void;
-  scrollArrowsMountedCountRef: React.RefObject<number>;
   itemProps: HTMLProps;
-  valueRef: React.RefObject<HTMLSpanElement | null>;
-  valuesRef: React.RefObject<Array<any>>;
-  labelsRef: React.RefObject<Array<string | null>>;
-  typingRef: React.RefObject<boolean>;
-  selectionRef: React.RefObject<{
-    allowUnselectedMouseUp: boolean;
-    allowSelectedMouseUp: boolean;
-    dragY: number;
-  }>;
-  firstItemTextRef: React.RefObject<HTMLElement | null>;
-  selectedItemTextRef: React.RefObject<HTMLElement | null>;
-  validation: UseFieldValidationReturnValue;
-  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
-  alignItemWithTriggerActiveRef: React.RefObject<boolean>;
-  initialValueRef: React.RefObject<any>;
 }
-export declare const SelectRootContext: React.Context<SelectRootContext | null>;
-export declare function useSelectRootContext(): SelectRootContext;
+export declare const SelectRootContext: React.Context<SelectStore | undefined>;
+export declare const SelectRootPropsContext: React.Context<SelectRootPropsContextValue | undefined>;
+export declare const SelectFloatingContext: React.Context<import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore | undefined>;
+export declare function useSelectRootContext(): SelectStore;
+export declare function useSelectRootPropsContext(): SelectRootPropsContextValue;
+export declare function useSelectFloatingContext(): import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;

package/select/root/SelectRootContext.js

@@ -6,16 +6,41 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectRootContext = void 0;
+exports.SelectRootPropsContext = exports.SelectRootContext = exports.SelectFloatingContext = void 0;
+exports.useSelectFloatingContext = useSelectFloatingContext;
 exports.useSelectRootContext = useSelectRootContext;
+exports.useSelectRootPropsContext = useSelectRootPropsContext;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
-const SelectRootContext = exports.SelectRootContext = /*#__PURE__*/React.createContext(null);
+/**
+ * Root values consumed during render. Keep these outside `useSyncedValues` so descendant ref
+ * callbacks see the current props during the same commit.
+ */
+
+const SelectRootContext = exports.SelectRootContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") SelectRootContext.displayName = "SelectRootContext";
+const SelectRootPropsContext = exports.SelectRootPropsContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") SelectRootPropsContext.displayName = "SelectRootPropsContext";
+const SelectFloatingContext = exports.SelectFloatingContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") SelectFloatingContext.displayName = "SelectFloatingContext";
 function useSelectRootContext() {
-  const context = React.useContext(SelectRootContext);
-  if (context === null) {
+  const store = React.useContext(SelectRootContext);
+  if (store === undefined) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SelectRootContext is missing. Select parts must be placed within <Select.Root>.' : (0, _formatErrorMessage2.default)(60));
   }
+  return store;
+}
+function useSelectRootPropsContext() {
+  const context = React.useContext(SelectRootPropsContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SelectRootPropsContext is missing. Select parts must be placed within <Select.Root>.' : (0, _formatErrorMessage2.default)(101));
+  }
+  return context;
+}
+function useSelectFloatingContext() {
+  const context = React.useContext(SelectFloatingContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SelectFloatingContext is missing. Select parts must be placed within <Select.Root>.' : (0, _formatErrorMessage2.default)(61));
+  }
   return context;
 }

package/select/root/SelectRootContext.mjs

@@ -2,12 +2,36 @@
 
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
-export const SelectRootContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Root values consumed during render. Keep these outside `useSyncedValues` so descendant ref
+ * callbacks see the current props during the same commit.
+ */
+
+export const SelectRootContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") SelectRootContext.displayName = "SelectRootContext";
+export const SelectRootPropsContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") SelectRootPropsContext.displayName = "SelectRootPropsContext";
+export const SelectFloatingContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") SelectFloatingContext.displayName = "SelectFloatingContext";
 export function useSelectRootContext() {
-  const context = React.useContext(SelectRootContext);
-  if (context === null) {
+  const store = React.useContext(SelectRootContext);
+  if (store === undefined) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SelectRootContext is missing. Select parts must be placed within <Select.Root>.' : _formatErrorMessage(60));
   }
+  return store;
+}
+export function useSelectRootPropsContext() {
+  const context = React.useContext(SelectRootPropsContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SelectRootPropsContext is missing. Select parts must be placed within <Select.Root>.' : _formatErrorMessage(101));
+  }
+  return context;
+}
+export function useSelectFloatingContext() {
+  const context = React.useContext(SelectFloatingContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SelectFloatingContext is missing. Select parts must be placed within <Select.Root>.' : _formatErrorMessage(61));
+  }
   return context;
 }

package/select/scroll-arrow/SelectScrollArrow.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.SelectScrollArrow = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useTimeout = require("@base-ui/utils/useTimeout");
-var _store = require("@base-ui/utils/store");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _SelectRootContext = require("../root/SelectRootContext");
 var _SelectPositionerContext = require("../positioner/SelectPositionerContext");
@@ -17,7 +16,6 @@ var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _scrollEdges = require("../../utils/scrollEdges");
-var _store2 = require("../store");
 /**
  * @internal
  */
@@ -31,21 +29,15 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
     ...elementProps
   } = componentProps;
   const isUp = direction === 'up';
-  const {
-    store,
-    popupRef,
-    listRef,
-    handleScrollArrowVisibility,
-    scrollArrowsMountedCountRef
-  } = (0, _SelectRootContext.useSelectRootContext)();
+  const store = (0, _SelectRootContext.useSelectRootContext)();
   const {
     side,
     scrollDownArrowRef,
     scrollUpArrowRef
   } = (0, _SelectPositionerContext.useSelectPositionerContext)();
-  const visibleSelector = isUp ? _store2.selectors.scrollUpArrowVisible : _store2.selectors.scrollDownArrowVisible;
-  const stateVisible = (0, _store.useStore)(store, visibleSelector);
-  const openMethod = (0, _store.useStore)(store, _store2.selectors.openMethod);
+  const visibleSelector = isUp ? 'scrollUpArrowVisible' : 'scrollDownArrowVisible';
+  const stateVisible = store.useState(visibleSelector);
+  const openMethod = store.useState('openMethod');
 
   // Scroll arrows are disabled for touch modality as they are a hover-only element.
   const visible = stateVisible && openMethod !== 'touch';
@@ -57,15 +49,15 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(visible);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    scrollArrowsMountedCountRef.current += 1;
+    store.context.scrollArrowsMountedCountRef.current += 1;
     store.set('hasScrollArrows', true);
     return () => {
-      scrollArrowsMountedCountRef.current = Math.max(0, scrollArrowsMountedCountRef.current - 1);
-      if (scrollArrowsMountedCountRef.current === 0) {
+      store.context.scrollArrowsMountedCountRef.current = Math.max(0, store.context.scrollArrowsMountedCountRef.current - 1);
+      if (store.context.scrollArrowsMountedCountRef.current === 0) {
         store.set('hasScrollArrows', false);
       }
     };
-  }, [store, scrollArrowsMountedCountRef]);
+  }, [store]);
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open: visible,
     ref: scrollArrowRef,
@@ -93,16 +85,16 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
       }
       store.set('activeIndex', null);
       function scrollNextItem() {
-        const scroller = store.state.listElement ?? popupRef.current;
+        const scroller = store.state.listElement ?? store.context.popupRef.current;
         if (!scroller) {
           return;
         }
         store.set('activeIndex', null);
-        handleScrollArrowVisibility(scroller);
+        store.context.handleScrollArrowVisibility(scroller);
         const maxScrollTop = (0, _scrollEdges.getMaxScrollOffset)(scroller.scrollHeight, scroller.clientHeight);
         const scrollTop = (0, _scrollEdges.normalizeScrollOffset)(scroller.scrollTop, maxScrollTop);
         const isScrolledToEdge = scrollTop === (isUp ? 0 : maxScrollTop);
-        const items = listRef.current;
+        const items = store.context.listRef.current;
         if (scrollTop !== scroller.scrollTop) {
           scroller.scrollTop = scrollTop;
         }

package/select/scroll-arrow/SelectScrollArrow.mjs

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { useTimeout } from '@base-ui/utils/useTimeout';
-import { useStore } from '@base-ui/utils/store';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useSelectRootContext } from "../root/SelectRootContext.mjs";
 import { useSelectPositionerContext } from "../positioner/SelectPositionerContext.mjs";
@@ -11,7 +10,6 @@ import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.mjs
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
 import { getMaxScrollOffset, normalizeScrollOffset, SCROLL_EDGE_TOLERANCE_PX } from "../../utils/scrollEdges.mjs";
-import { selectors } from "../store.mjs";
 
 /**
  * @internal
@@ -26,21 +24,15 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
     ...elementProps
   } = componentProps;
   const isUp = direction === 'up';
-  const {
-    store,
-    popupRef,
-    listRef,
-    handleScrollArrowVisibility,
-    scrollArrowsMountedCountRef
-  } = useSelectRootContext();
+  const store = useSelectRootContext();
   const {
     side,
     scrollDownArrowRef,
     scrollUpArrowRef
   } = useSelectPositionerContext();
-  const visibleSelector = isUp ? selectors.scrollUpArrowVisible : selectors.scrollDownArrowVisible;
-  const stateVisible = useStore(store, visibleSelector);
-  const openMethod = useStore(store, selectors.openMethod);
+  const visibleSelector = isUp ? 'scrollUpArrowVisible' : 'scrollDownArrowVisible';
+  const stateVisible = store.useState(visibleSelector);
+  const openMethod = store.useState('openMethod');
 
   // Scroll arrows are disabled for touch modality as they are a hover-only element.
   const visible = stateVisible && openMethod !== 'touch';
@@ -52,15 +44,15 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
     setMounted
   } = useTransitionStatus(visible);
   useIsoLayoutEffect(() => {
-    scrollArrowsMountedCountRef.current += 1;
+    store.context.scrollArrowsMountedCountRef.current += 1;
     store.set('hasScrollArrows', true);
     return () => {
-      scrollArrowsMountedCountRef.current = Math.max(0, scrollArrowsMountedCountRef.current - 1);
-      if (scrollArrowsMountedCountRef.current === 0) {
+      store.context.scrollArrowsMountedCountRef.current = Math.max(0, store.context.scrollArrowsMountedCountRef.current - 1);
+      if (store.context.scrollArrowsMountedCountRef.current === 0) {
         store.set('hasScrollArrows', false);
       }
     };
-  }, [store, scrollArrowsMountedCountRef]);
+  }, [store]);
   useOpenChangeComplete({
     open: visible,
     ref: scrollArrowRef,
@@ -88,16 +80,16 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
       }
       store.set('activeIndex', null);
       function scrollNextItem() {
-        const scroller = store.state.listElement ?? popupRef.current;
+        const scroller = store.state.listElement ?? store.context.popupRef.current;
         if (!scroller) {
           return;
         }
         store.set('activeIndex', null);
-        handleScrollArrowVisibility(scroller);
+        store.context.handleScrollArrowVisibility(scroller);
         const maxScrollTop = getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
         const scrollTop = normalizeScrollOffset(scroller.scrollTop, maxScrollTop);
         const isScrolledToEdge = scrollTop === (isUp ? 0 : maxScrollTop);
-        const items = listRef.current;
+        const items = store.context.listRef.current;
         if (scrollTop !== scroller.scrollTop) {
           scroller.scrollTop = scrollTop;
         }

package/select/scroll-down-arrow/SelectScrollDownArrowDataAttributes.d.mts

@@ -1,24 +1,22 @@
-export declare enum SelectScrollDownArrowDataAttributes {
-  /**
-   * Present when the scroll arrow begins animating in.
-   */
-  startingStyle = "data-starting-style",
-  /**
-   * Present when the scroll arrow is animating out.
-   */
-  endingStyle = "data-ending-style",
-  /**
-   * Indicates the direction of the scroll arrow.
-   * @type {'down'}
-   */
-  direction = "data-direction",
-  /**
-   * Present when the scroll arrow is visible.
-   */
-  visible = "data-visible",
-  /**
-   * Indicates which side the popup is positioned relative to the trigger.
-   * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
-   */
-  side = "data-side",
-}
+/**
+ * Present when the scroll arrow begins animating in.
+ */
+export declare const startingStyle = "data-starting-style";
+/**
+ * Present when the scroll arrow is animating out.
+ */
+export declare const endingStyle = "data-ending-style";
+/**
+ * Indicates the direction of the scroll arrow.
+ * @type {'down'}
+ */
+export declare const direction = "data-direction";
+/**
+ * Present when the scroll arrow is visible.
+ */
+export declare const visible = "data-visible";
+/**
+ * Indicates which side the popup is positioned relative to the trigger.
+ * @type {'none' | 'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+ */
+export declare const side = "data-side";