@base-ui/react 1.6.0 → 1.7.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, Store } from '@base-ui/utils/store';
+import { useStore, 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, SelectFloatingContext } from "./SelectRootContext.mjs";
+import { SelectRootContext } 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";
@@ -123,7 +123,7 @@ export function SelectRoot(props) {
     openMethod,
     triggerProps: interactionTypeProps
   } = useOpenInteractionType(open);
-  const store = useRefWithInit(() => new Store({
+  const store = useRefWithInit(() => new ReactStore({
     id: generatedId,
     labelId: undefined,
     modal,
@@ -155,7 +155,7 @@ export function SelectRoot(props) {
   const triggerElement = useStore(store, selectors.triggerElement);
   const positionerElement = useStore(store, selectors.positionerElement);
   const previousOpenMethod = usePreviousValue(openMethod);
-  const renderedOpenMethod = openMethod ?? previousOpenMethod ?? null;
+  const renderedOpenMethod = openMethod ?? previousOpenMethod;
   const serializedValue = React.useMemo(() => {
     // 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
@@ -171,38 +171,26 @@ export function SelectRoot(props) {
     }
     return stringifyAsValue(value, itemToStringValue);
   }, [multiple, value, itemToStringValue]);
-  const controlRef = useValueAsRef(store.state.triggerElement);
+  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 && stringifyAsValue(value, itemToStringValue) !== '';
-  useIsoLayoutEffect(() => {
-    // Ensure the values and labels are registered for programmatic value changes.
-    if (value !== initialValueRef.current) {
-      store.set('forceMount', true);
-    }
-  }, [store, value]);
+  const hasSelectedValue = multiple ? Array.isArray(value) && value.length > 0 : value != null && serializedValue !== '';
   useIsoLayoutEffect(() => {
     setFilled(hasSelectedValue);
   }, [hasSelectedValue, setFilled]);
   useIsoLayoutEffect(function syncSelectedIndex() {
-    const registry = valuesRef.current;
-    let nextIndex;
+    let target = value;
+    let empty = false;
     if (multiple) {
       const currentValue = Array.isArray(value) ? value : [];
-      if (currentValue.length === 0) {
-        nextIndex = null;
-      } else {
-        const lastValue = currentValue[currentValue.length - 1];
-        const lastIndex = findItemIndex(registry, lastValue, isItemEqualToValue);
-        nextIndex = lastIndex === -1 ? null : lastIndex;
-      }
-    } else {
-      const index = findItemIndex(registry, value, isItemEqualToValue);
-      nextIndex = index === -1 ? null : index;
+      empty = currentValue.length === 0;
+      target = currentValue[currentValue.length - 1];
     }
+    const index = empty ? -1 : findItemIndex(valuesRef.current, target, isItemEqualToValue);
+    const nextIndex = index === -1 ? null : index;
     if (nextIndex === null) {
       selectedItemTextRef.current = null;
     }
@@ -210,7 +198,7 @@ export function SelectRoot(props) {
       return;
     }
     store.set('selectedIndex', nextIndex);
-  }, [hasSelectedValue, multiple, open, value, valuesRef, isItemEqualToValue, store, selectedItemTextRef]);
+  }, [multiple, open, value, isItemEqualToValue, store]);
   function isSelectedValueDirty(currentValue) {
     const initialValue = validityData.initialValue;
     if (Array.isArray(currentValue) && Array.isArray(initialValue)) {
@@ -241,7 +229,9 @@ export function SelectRoot(props) {
     setMounted(false);
     store.update({
       activeIndex: null,
-      openMethod: null
+      openMethod: null,
+      scrollUpArrowVisible: false,
+      scrollDownArrowVisible: false
     });
     onOpenChangeComplete?.(false);
   });
@@ -265,21 +255,13 @@ export function SelectRoot(props) {
     }
     setValueUnwrapped(nextValue);
   });
-  const handleScrollArrowVisibility = useStableCallback(() => {
-    const scroller = store.state.listElement || popupRef.current;
-    if (!scroller) {
-      return;
-    }
+  const handleScrollArrowVisibility = useStableCallback(scroller => {
     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);
-    }
-    if (store.state.scrollDownArrowVisible !== shouldShowDown) {
-      store.set('scrollDownArrowVisible', shouldShowDown);
-    }
+    store.set('scrollUpArrowVisible', shouldShowUp);
+    store.set('scrollDownArrowVisible', shouldShowDown);
   });
   const floatingContext = useFloatingRootContext({
     open,
@@ -324,20 +306,16 @@ export function SelectRoot(props) {
       if (open) {
         store.set('activeIndex', index);
       } else {
-        setValue(valuesRef.current[index], createChangeEventDetails('none'));
+        setValue(valuesRef.current[index], createChangeEventDetails(REASONS.none));
       }
     },
     onTyping(typing) {
       typingRef.current = typing;
     }
   });
-  const mergedTriggerProps = React.useMemo(() => {
-    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]);
+
+  // `Select.Trigger` applies the id itself from the store, so it's deliberately not merged here.
+  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;
   useOnFirstRender(() => {
@@ -346,27 +324,25 @@ export function SelectRoot(props) {
       triggerProps: mergedTriggerProps
     });
   });
-  useIsoLayoutEffect(() => {
-    store.update({
-      id: generatedId,
-      modal,
-      multiple,
-      value,
-      open,
-      mounted,
-      transitionStatus,
-      popupProps,
-      triggerProps: mergedTriggerProps,
-      items,
-      itemToStringLabel,
-      itemToStringValue,
-      isItemEqualToValue,
-      openMethod: renderedOpenMethod
-    });
-  }, [store, generatedId, modal, multiple, value, open, mounted, transitionStatus, popupProps, mergedTriggerProps, items, itemToStringLabel, itemToStringValue, isItemEqualToValue, renderedOpenMethod]);
+  store.useSyncedValues({
+    id: generatedId,
+    modal,
+    multiple,
+    value,
+    open,
+    mounted,
+    transitionStatus,
+    popupProps,
+    triggerProps: mergedTriggerProps,
+    items,
+    itemToStringLabel,
+    itemToStringValue,
+    isItemEqualToValue,
+    openMethod: renderedOpenMethod
+  });
   const contextValue = React.useMemo(() => ({
     store,
-    name,
+    floatingContext,
     required,
     disabled,
     readOnly,
@@ -391,9 +367,8 @@ export function SelectRoot(props) {
     onOpenChangeComplete,
     alignItemWithTriggerActiveRef,
     initialValueRef
-  }), [store, name, required, disabled, readOnly, multiple, highlightItemOnHover, setValue, setOpen, itemProps, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
+  }), [store, floatingContext, 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;
   const hiddenInputs = React.useMemo(() => {
     if (!multiple || !Array.isArray(value) || !name) {
@@ -410,68 +385,65 @@ export function SelectRoot(props) {
       }, currentSerializedValue);
     });
   }, [multiple, value, form, name, itemToStringValue, disabled]);
-  return /*#__PURE__*/_jsx(SelectRootContext.Provider, {
+  return /*#__PURE__*/_jsxs(SelectRootContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsxs(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.
-            store.state.triggerElement?.focus({
-              // Supported in Chrome from 144 (January 2026)
-              focusVisible: true
-            });
-          },
-          // Handle browser autofill.
-          onChange(event) {
-            // Workaround for https://github.com/facebook/react/issues/9023
-            if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
+    children: [children, /*#__PURE__*/_jsx("input", {
+      ...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)
+            focusVisible: true
+          });
+        },
+        // Handle browser autofill.
+        onChange(event) {
+          // Workaround for https://github.com/react/react/issues/9023
+          if (event.nativeEvent.defaultPrevented || disabled || readOnly) {
+            return;
+          }
+          const nextValue = event.currentTarget.value;
+          const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
+          function handleChange() {
+            if (multiple) {
+              // Browser autofill only writes a single scalar value.
               return;
             }
-            const nextValue = event.currentTarget.value;
-            const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
-            function handleChange() {
-              if (multiple) {
-                // Browser autofill only writes a single scalar value.
-                return;
-              }
 
-              // 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) {
-                // `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);
-              }
+            // 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 = valuesRef.current[matchingIndex];
+            if (matchingValue != null) {
+              // `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);
             }
-            store.set('forceMount', true);
-            queueMicrotask(handleChange);
           }
-        }),
-        id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
-        form: form,
-        name: hiddenInputName,
-        autoComplete: autoComplete,
-        value: serializedValue,
-        disabled: disabled,
-        required: required && !hasMultipleSelection,
-        readOnly: readOnly,
-        ref: ref,
-        style: name ? visuallyHiddenInput : visuallyHidden,
-        tabIndex: -1,
-        "aria-hidden": true,
-        suppressHydrationWarning: true
-      }), hiddenInputs]
-    })
+          store.set('forceMount', true);
+          queueMicrotask(handleChange);
+        }
+      }),
+      id: generatedId && hiddenInputName == null ? `${generatedId}-hidden-input` : undefined,
+      form: form,
+      name: hiddenInputName,
+      autoComplete: autoComplete,
+      value: serializedValue,
+      disabled: disabled,
+      required: required && !(multiple && hasSelectedValue),
+      readOnly: readOnly,
+      ref: ref,
+      style: name ? visuallyHiddenInput : visuallyHidden,
+      tabIndex: -1,
+      "aria-hidden": true,
+      suppressHydrationWarning: true
+    }), hiddenInputs]
   });
 }

package/select/root/SelectRootContext.d.mts

@@ -1,11 +1,12 @@
 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;
-  name: string | undefined;
+  floatingContext: FloatingRootContext;
   disabled: boolean;
   readOnly: boolean;
   required: boolean;
@@ -16,7 +17,7 @@ export interface SelectRootContext {
   listRef: React.RefObject<Array<HTMLElement | null>>;
   popupRef: React.RefObject<HTMLDivElement | null>;
   scrollHandlerRef: React.RefObject<((el: HTMLDivElement) => void) | null>;
-  handleScrollArrowVisibility: () => void;
+  handleScrollArrowVisibility: (scroller: HTMLElement) => void;
   scrollArrowsMountedCountRef: React.RefObject<number>;
   itemProps: HTMLProps;
   valueRef: React.RefObject<HTMLSpanElement | null>;
@@ -36,6 +37,4 @@ export interface SelectRootContext {
   initialValueRef: React.RefObject<any>;
 }
 export declare const SelectRootContext: React.Context<SelectRootContext | null>;
-export declare const SelectFloatingContext: React.Context<import("../../floating-ui-react/components/FloatingRootStore.mjs").FloatingRootStore | null>;
-export declare function useSelectRootContext(): SelectRootContext;
-export declare function useSelectFloatingContext(): import("../../floating-ui-react/components/FloatingRootStore.mjs").FloatingRootStore;
+export declare function useSelectRootContext(): SelectRootContext;

package/select/root/SelectRootContext.d.ts

@@ -1,11 +1,12 @@
 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;
-  name: string | undefined;
+  floatingContext: FloatingRootContext;
   disabled: boolean;
   readOnly: boolean;
   required: boolean;
@@ -16,7 +17,7 @@ export interface SelectRootContext {
   listRef: React.RefObject<Array<HTMLElement | null>>;
   popupRef: React.RefObject<HTMLDivElement | null>;
   scrollHandlerRef: React.RefObject<((el: HTMLDivElement) => void) | null>;
-  handleScrollArrowVisibility: () => void;
+  handleScrollArrowVisibility: (scroller: HTMLElement) => void;
   scrollArrowsMountedCountRef: React.RefObject<number>;
   itemProps: HTMLProps;
   valueRef: React.RefObject<HTMLSpanElement | null>;
@@ -36,6 +37,4 @@ export interface SelectRootContext {
   initialValueRef: React.RefObject<any>;
 }
 export declare const SelectRootContext: React.Context<SelectRootContext | null>;
-export declare const SelectFloatingContext: React.Context<import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore | null>;
-export declare function useSelectRootContext(): SelectRootContext;
-export declare function useSelectFloatingContext(): import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+export declare function useSelectRootContext(): SelectRootContext;

package/select/root/SelectRootContext.js

@@ -6,26 +6,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SelectRootContext = exports.SelectFloatingContext = void 0;
-exports.useSelectFloatingContext = useSelectFloatingContext;
+exports.SelectRootContext = void 0;
 exports.useSelectRootContext = useSelectRootContext;
 var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 const SelectRootContext = exports.SelectRootContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") SelectRootContext.displayName = "SelectRootContext";
-const SelectFloatingContext = exports.SelectFloatingContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") SelectFloatingContext.displayName = "SelectFloatingContext";
 function useSelectRootContext() {
   const context = React.useContext(SelectRootContext);
   if (context === null) {
     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 context;
-}
-function useSelectFloatingContext() {
-  const context = React.useContext(SelectFloatingContext);
-  if (context === null) {
-    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

@@ -4,19 +4,10 @@ import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const SelectRootContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") SelectRootContext.displayName = "SelectRootContext";
-export const SelectFloatingContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") SelectFloatingContext.displayName = "SelectFloatingContext";
 export function useSelectRootContext() {
   const context = React.useContext(SelectRootContext);
   if (context === null) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: SelectRootContext is missing. Select parts must be placed within <Select.Root>.' : _formatErrorMessage(60));
   }
   return context;
-}
-export function useSelectFloatingContext() {
-  const context = React.useContext(SelectFloatingContext);
-  if (context === null) {
-    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.d.mts

@@ -1,11 +1,6 @@
-import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.mjs";
-import { Side } from "../../utils/useAnchorPositioning.mjs";
+import { Side } from "../../internals/useAnchorPositioning.mjs";
 import { type TransitionStatus } from "../../internals/useTransitionStatus.mjs";
-/**
- * @internal
- */
-export declare const SelectScrollArrow: React.ForwardRefExoticComponent<Omit<SelectScrollArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollArrowState {
   /**
    * The direction of the element.

package/select/scroll-arrow/SelectScrollArrow.d.ts

@@ -1,11 +1,6 @@
-import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.js";
-import { Side } from "../../utils/useAnchorPositioning.js";
+import { Side } from "../../internals/useAnchorPositioning.js";
 import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
-/**
- * @internal
- */
-export declare const SelectScrollArrow: React.ForwardRefExoticComponent<Omit<SelectScrollArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SelectScrollArrowState {
   /**
    * The direction of the element.

package/select/scroll-arrow/SelectScrollArrow.js

@@ -27,7 +27,7 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
     className,
     style,
     direction,
-    keepMounted = false,
+    keepMounted,
     ...elementProps
   } = componentProps;
   const isUp = direction === 'up';
@@ -58,12 +58,10 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
   } = (0, _useTransitionStatus.useTransitionStatus)(visible);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     scrollArrowsMountedCountRef.current += 1;
-    if (!store.state.hasScrollArrows) {
-      store.set('hasScrollArrows', true);
-    }
+    store.set('hasScrollArrows', true);
     return () => {
       scrollArrowsMountedCountRef.current = Math.max(0, scrollArrowsMountedCountRef.current - 1);
-      if (scrollArrowsMountedCountRef.current === 0 && store.state.hasScrollArrows) {
+      if (scrollArrowsMountedCountRef.current === 0) {
         store.set('hasScrollArrows', false);
       }
     };
@@ -100,7 +98,7 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
           return;
         }
         store.set('activeIndex', null);
-        handleScrollArrowVisibility();
+        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);
@@ -108,11 +106,6 @@ const SelectScrollArrow = exports.SelectScrollArrow = /*#__PURE__*/React.forward
         if (scrollTop !== scroller.scrollTop) {
           scroller.scrollTop = scrollTop;
         }
-
-        // Fallback when there are no items registered yet.
-        if (items.length === 0) {
-          store.set(isUp ? 'scrollUpArrowVisible' : 'scrollDownArrowVisible', !isScrolledToEdge);
-        }
         if (isScrolledToEdge) {
           timeout.clear();
           return;

package/select/scroll-arrow/SelectScrollArrow.mjs

@@ -22,7 +22,7 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
     className,
     style,
     direction,
-    keepMounted = false,
+    keepMounted,
     ...elementProps
   } = componentProps;
   const isUp = direction === 'up';
@@ -53,12 +53,10 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
   } = useTransitionStatus(visible);
   useIsoLayoutEffect(() => {
     scrollArrowsMountedCountRef.current += 1;
-    if (!store.state.hasScrollArrows) {
-      store.set('hasScrollArrows', true);
-    }
+    store.set('hasScrollArrows', true);
     return () => {
       scrollArrowsMountedCountRef.current = Math.max(0, scrollArrowsMountedCountRef.current - 1);
-      if (scrollArrowsMountedCountRef.current === 0 && store.state.hasScrollArrows) {
+      if (scrollArrowsMountedCountRef.current === 0) {
         store.set('hasScrollArrows', false);
       }
     };
@@ -95,7 +93,7 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
           return;
         }
         store.set('activeIndex', null);
-        handleScrollArrowVisibility();
+        handleScrollArrowVisibility(scroller);
         const maxScrollTop = getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
         const scrollTop = normalizeScrollOffset(scroller.scrollTop, maxScrollTop);
         const isScrolledToEdge = scrollTop === (isUp ? 0 : maxScrollTop);
@@ -103,11 +101,6 @@ export const SelectScrollArrow = /*#__PURE__*/React.forwardRef(function SelectSc
         if (scrollTop !== scroller.scrollTop) {
           scroller.scrollTop = scrollTop;
         }
-
-        // Fallback when there are no items registered yet.
-        if (items.length === 0) {
-          store.set(isUp ? 'scrollUpArrowVisible' : 'scrollDownArrowVisible', !isScrolledToEdge);
-        }
         if (isScrolledToEdge) {
           timeout.clear();
           return;

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

@@ -1,6 +1,6 @@
 export declare enum SelectScrollDownArrowDataAttributes {
   /**
-   * Present when the scroll arrow is animating in.
+   * Present when the scroll arrow begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

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

@@ -1,6 +1,6 @@
 export declare enum SelectScrollDownArrowDataAttributes {
   /**
-   * Present when the scroll arrow is animating in.
+   * Present when the scroll arrow begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/select/scroll-down-arrow/SelectScrollDownArrowDataAttributes.js

@@ -7,7 +7,7 @@ exports.SelectScrollDownArrowDataAttributes = void 0;
 var _popupStateMapping = require("../../utils/popupStateMapping");
 let SelectScrollDownArrowDataAttributes = exports.SelectScrollDownArrowDataAttributes = function (SelectScrollDownArrowDataAttributes) {
   /**
-   * Present when the scroll arrow is animating in.
+   * Present when the scroll arrow begins animating in.
    */
   SelectScrollDownArrowDataAttributes[SelectScrollDownArrowDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/select/scroll-down-arrow/SelectScrollDownArrowDataAttributes.mjs

@@ -1,7 +1,7 @@
 import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.mjs";
 export let SelectScrollDownArrowDataAttributes = function (SelectScrollDownArrowDataAttributes) {
   /**
-   * Present when the scroll arrow is animating in.
+   * Present when the scroll arrow begins animating in.
    */
   SelectScrollDownArrowDataAttributes[SelectScrollDownArrowDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/select/scroll-up-arrow/SelectScrollUpArrowDataAttributes.d.mts

@@ -1,6 +1,6 @@
 export declare enum SelectScrollUpArrowDataAttributes {
   /**
-   * Present when the scroll arrow is animating in.
+   * Present when the scroll arrow begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/select/scroll-up-arrow/SelectScrollUpArrowDataAttributes.d.ts

@@ -1,6 +1,6 @@
 export declare enum SelectScrollUpArrowDataAttributes {
   /**
-   * Present when the scroll arrow is animating in.
+   * Present when the scroll arrow begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/select/scroll-up-arrow/SelectScrollUpArrowDataAttributes.js

@@ -7,7 +7,7 @@ exports.SelectScrollUpArrowDataAttributes = void 0;
 var _popupStateMapping = require("../../utils/popupStateMapping");
 let SelectScrollUpArrowDataAttributes = exports.SelectScrollUpArrowDataAttributes = function (SelectScrollUpArrowDataAttributes) {
   /**
-   * Present when the scroll arrow is animating in.
+   * Present when the scroll arrow begins animating in.
    */
   SelectScrollUpArrowDataAttributes[SelectScrollUpArrowDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/select/scroll-up-arrow/SelectScrollUpArrowDataAttributes.mjs

@@ -1,7 +1,7 @@
 import { CommonPopupDataAttributes } from "../../utils/popupStateMapping.mjs";
 export let SelectScrollUpArrowDataAttributes = function (SelectScrollUpArrowDataAttributes) {
   /**
-   * Present when the scroll arrow is animating in.
+   * Present when the scroll arrow begins animating in.
    */
   SelectScrollUpArrowDataAttributes[SelectScrollUpArrowDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**