@jobber/components 9.5.3 → 9.6.0

package/dist/SelectGroupLabel-es.js

@@ -1,11 +1,9 @@
 import * as React from 'react';
-import { N as createSelector, n as useControlled, m as useTransitionStatus, O as useOpenInteractionType, P as useStore, q as useValueAsRef, b as useStableCallback, a as useIsoLayoutEffect, K as useValueChanged, f as useOpenChangeComplete, Q as useClick, R as useDismiss, F as FOCUSABLE_POPUP_PROPS, U as useOnFirstRender, d as createChangeEventDetails, v as none, w as visuallyHiddenInput, x as visuallyHidden, V as Store, W as focusOut, X as outsidePress, Y as pressableTriggerOpenStateMapping, c as useButton, k as useTimeout, Z as getFloatingFocusElement, _ as contains, o as ownerDocument, $ as cancelOpen, a0 as FloatingPortal, a1 as InternalBackdrop, a2 as inertValue, a3 as DROPDOWN_COLLISION_AVOIDANCE, p as popupStateMapping, t as transitionStatusMapping, a4 as useDirection, a5 as useAnimationFrame, a6 as webkit, s as addEventListener, i as FloatingFocusManager, a7 as windowResize, a8 as isVirtualClick, a9 as itemPress, u as useBaseUiId } from './useScrollLock-es.js';
+import { v as useControlled, s as useTransitionStatus, R as useOpenInteractionType, U as useStore, w as useValueAsRef, d as useStableCallback, c as useIsoLayoutEffect, L as useValueChanged, l as useOpenChangeComplete, V as useClick, W as useDismiss, F as FOCUSABLE_POPUP_PROPS, h as createChangeEventDetails, z as none, B as visuallyHiddenInput, C as visuallyHidden, X as ReactStore, Y as focusOut, Z as outsidePress, _ as pressableTriggerOpenStateMapping, f as useButton, q as useTimeout, $ as getFloatingFocusElement, a0 as contains, o as ownerDocument, a1 as cancelOpen, a2 as FloatingPortal, a3 as InternalBackdrop, a4 as inertValue, a5 as DROPDOWN_COLLISION_AVOIDANCE, a6 as popupStateMapping, t as transitionStatusMapping, a7 as useDirection, a8 as useAnimationFrame, I as getWindow, a9 as webkit, y as addEventListener, n as FloatingFocusManager, aa as rectToClientRect, ab as windowResize, ac as isVirtualClick, ad as itemPress, u as useBaseUiId } from './useScrollLock-es.js';
 import { f as formatErrorMessage, a as useRefWithInit, m as mergeProps, E as EMPTY_OBJECT, b as useMergedRefs, c as EMPTY_ARRAY, u as useRenderElement } from './useRenderElement-es.js';
-import { s as stringifyAsValue, h as hasNullItemLabel, e as compareItemEquality, a as useFormContext, b as useFieldRootContext, c as useLabelableId, d as useRegisterFieldControl, g as findItemIndex, i as useFloatingRootContext, j as useListNavigation, k as useTypeahead, l as defaultItemEquality, m as stringifyAsLabel, n as areArraysEqual, f as fieldValidityMapping, u as useLabelableContext, r as resolveAriaLabelledBy, o as getPseudoElementBounds, p as resolveMultipleLabels, q as resolveSelectedLabel, t as useAnchoredPopupScrollLock, v as useAnchorPositioning, w as usePositioner, C as CompositeList, x as selectedValueIncludes, y as getDisabledMountTransitionStyles, z as useCompositeListItem, I as IndexGuessBehavior, A as removeItem } from './useCompositeListItem-es.js';
+import { s as stringifyAsValue, h as hasNullItemLabel, e as compareItemEquality, a as useFormContext, b as useFieldRootContext, c as useLabelableId, d as useRegisterFieldControl, g as findItemIndex, i as useFloatingRootContext, j as useListNavigation, k as useTypeahead, l as useOnFirstRender, m as defaultItemEquality, n as stringifyAsLabel, o as areArraysEqual, f as fieldValidityMapping, u as useLabelableContext, r as resolveAriaLabelledBy, p as isMouseWithinBounds, q as resolveMultipleLabels, t as resolveSelectedLabel, v as useAnchoredPopupScrollLock, w as useAnchorPositioning, x as usePositioner, C as CompositeList, y as platform, z as getDisabledMountTransitionStyles, A as useCompositeListItem, B as removeItem } from './useCompositeListItem-es.js';
 import { g as getMaxScrollOffset, n as normalizeScrollOffset, u as useCSPContext, c as clamp, 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 { K as getWindow, r as rectToClientRect } from './floating-ui.utils-es.js';
-import { p as platform } from './floating-ui.react-dom-es.js';
 
 const ToolbarRootContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ToolbarRootContext.displayName = "ToolbarRootContext";
@@ -27,7 +25,7 @@ function usePreviousValue(value) {
     current: value,
     previous: null
   });
-  if (value !== state.current) {
+  if (!Object.is(value, state.current)) {
     setState({
       current: value,
       previous: state.current
@@ -42,8 +40,6 @@ function isElementDisabled(element) {
 
 const SelectRootContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") SelectRootContext.displayName = "SelectRootContext";
-const SelectFloatingContext = /*#__PURE__*/React.createContext(null);
-if (process.env.NODE_ENV !== "production") SelectFloatingContext.displayName = "SelectFloatingContext";
 function useSelectRootContext() {
   const context = React.useContext(SelectRootContext);
   if (context === null) {
@@ -51,25 +47,16 @@ function useSelectRootContext() {
   }
   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>.' : formatErrorMessage(61));
-  }
-  return context;
-}
 
 const selectors = {
-  id: createSelector(state => state.id),
-  labelId: createSelector(state => state.labelId),
-  modal: createSelector(state => state.modal),
-  multiple: createSelector(state => state.multiple),
-  items: createSelector(state => state.items),
-  itemToStringLabel: createSelector(state => state.itemToStringLabel),
-  itemToStringValue: createSelector(state => state.itemToStringValue),
-  isItemEqualToValue: createSelector(state => state.isItemEqualToValue),
-  value: createSelector(state => state.value),
-  hasSelectedValue: createSelector(state => {
+  id: state => state.id,
+  labelId: state => state.labelId,
+  modal: state => state.modal,
+  items: state => state.items,
+  itemToStringLabel: state => state.itemToStringLabel,
+  isItemEqualToValue: state => state.isItemEqualToValue,
+  value: state => state.value,
+  hasSelectedValue: state => {
     const {
       value,
       multiple,
@@ -82,19 +69,19 @@ const selectors = {
       return value.length > 0;
     }
     return stringifyAsValue(value, itemToStringValue) !== '';
-  }),
-  hasNullItemLabel: createSelector((state, enabled) => {
+  },
+  hasNullItemLabel: (state, enabled) => {
     return enabled ? hasNullItemLabel(state.items) : false;
-  }),
-  open: createSelector(state => state.open),
-  mounted: createSelector(state => state.mounted),
-  forceMount: createSelector(state => state.forceMount),
-  transitionStatus: createSelector(state => state.transitionStatus),
-  openMethod: createSelector(state => state.openMethod),
-  activeIndex: createSelector(state => state.activeIndex),
-  selectedIndex: createSelector(state => state.selectedIndex),
-  isActive: createSelector((state, index) => state.activeIndex === index),
-  isSelected: createSelector((state, itemValue) => {
+  },
+  open: state => state.open,
+  mounted: state => state.mounted,
+  forceMount: state => state.forceMount,
+  transitionStatus: state => state.transitionStatus,
+  openMethod: state => state.openMethod,
+  activeIndex: state => state.activeIndex,
+  selectedIndex: state => state.selectedIndex,
+  isActive: (state, index) => state.activeIndex === index,
+  isSelected: (state, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const storeValue = state.value;
     if (state.multiple) {
@@ -105,19 +92,19 @@ const selectors = {
     // 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) => {
+  },
+  isSelectedByFocus: (state, index) => {
     return state.selectedIndex === index;
-  }),
-  popupProps: createSelector(state => state.popupProps),
-  triggerProps: createSelector(state => state.triggerProps),
-  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)
+  },
+  popupProps: state => state.popupProps,
+  triggerProps: state => state.triggerProps,
+  triggerElement: state => state.triggerElement,
+  positionerElement: state => state.positionerElement,
+  listElement: state => state.listElement,
+  popupSide: state => state.popupSide,
+  scrollUpArrowVisible: state => state.scrollUpArrowVisible,
+  scrollDownArrowVisible: state => state.scrollDownArrowVisible,
+  hasScrollArrows: state => state.hasScrollArrows
 };
 
 function SelectRoot(props) {
@@ -203,7 +190,7 @@ function SelectRoot(props) {
     openMethod,
     triggerProps: interactionTypeProps
   } = useOpenInteractionType(open);
-  const store = useRefWithInit(() => new Store({
+  const store = useRefWithInit(() => new ReactStore({
     id: generatedId,
     labelId: undefined,
     modal,
@@ -235,7 +222,7 @@ 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
@@ -251,38 +238,26 @@ 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;
     }
@@ -290,7 +265,7 @@ 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)) {
@@ -321,7 +296,9 @@ function SelectRoot(props) {
     setMounted(false);
     store.update({
       activeIndex: null,
-      openMethod: null
+      openMethod: null,
+      scrollUpArrowVisible: false,
+      scrollDownArrowVisible: false
     });
     onOpenChangeComplete?.(false);
   });
@@ -345,21 +322,13 @@ 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,
@@ -404,20 +373,16 @@ function SelectRoot(props) {
       if (open) {
         store.set('activeIndex', index);
       } else {
-        setValue(valuesRef.current[index], createChangeEventDetails('none'));
+        setValue(valuesRef.current[index], createChangeEventDetails(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(() => {
@@ -426,27 +391,25 @@ 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,
@@ -471,9 +434,8 @@ 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) {
@@ -490,73 +452,69 @@ 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(none, event.nativeEvent);
+          function handleChange() {
+            if (multiple) {
+              // Browser autofill only writes a single scalar value.
               return;
             }
-            const nextValue = event.currentTarget.value;
-            const details = createChangeEventDetails(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]
   });
 }
 
-const BOUNDARY_OFFSET = 2;
 const SELECTED_DELAY = 400;
 const stateAttributesMapping$2 = {
   ...pressableTriggerOpenStateMapping,
@@ -629,9 +587,7 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
     disabled,
     native: nativeButton
   });
-  const setTriggerElement = useStableCallback(element => {
-    store.set('triggerElement', element);
-  });
+  const setTriggerElement = store.useStateSetter('triggerElement');
   const timeoutFocus = useTimeout();
   const timeoutMouseDown = useTimeout();
   const selectedDelayTimeout = useTimeout();
@@ -660,7 +616,7 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
   const mergedProps = mergeProps(triggerProps, {
     id,
     role: 'combobox',
-    'aria-expanded': open ? 'true' : 'false',
+    'aria-expanded': open,
     'aria-haspopup': 'listbox',
     'aria-controls': open ? listElement?.id ?? getFloatingFocusElement(positionerElement)?.id : undefined,
     'aria-labelledby': ariaLabelledBy,
@@ -709,8 +665,7 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
         if (contains(triggerRef.current, mouseUpTarget) || contains(positionerRef.current, mouseUpTarget)) {
           return;
         }
-        const bounds = getPseudoElementBounds(triggerRef.current);
-        if (mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET && mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET) {
+        if (isMouseWithinBounds(mouseEvent, triggerRef.current)) {
           return;
         }
         setOpen(false, createChangeEventDetails(cancelOpen, mouseEvent));
@@ -785,7 +740,7 @@ const SelectValue = /*#__PURE__*/React.forwardRef(function SelectValue(component
     children = childrenProp(value);
   } else if (childrenProp != null) {
     children = childrenProp;
-  } else if (!hasSelectedValue && placeholder != null && !hasNullLabel) {
+  } else if (shouldCheckNullItemLabel && !hasNullLabel) {
     children = placeholder;
   } else if (Array.isArray(value)) {
     children = resolveMultipleLabels(value, items, itemToStringLabel);
@@ -804,9 +759,6 @@ const SelectValue = /*#__PURE__*/React.forwardRef(function SelectValue(component
 });
 if (process.env.NODE_ENV !== "production") SelectValue.displayName = "SelectValue";
 
-const SelectPortalContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") SelectPortalContext.displayName = "SelectPortalContext";
-
 const SelectPortal = /*#__PURE__*/React.forwardRef(function SelectPortal(portalProps, forwardedRef) {
   const {
     store
@@ -817,12 +769,9 @@ const SelectPortal = /*#__PURE__*/React.forwardRef(function SelectPortal(portalP
   if (!shouldRender) {
     return null;
   }
-  return /*#__PURE__*/jsx(SelectPortalContext.Provider, {
-    value: true,
-    children: /*#__PURE__*/jsx(FloatingPortal, {
-      ref: forwardedRef,
-      ...portalProps
-    })
+  return /*#__PURE__*/jsx(FloatingPortal, {
+    ref: forwardedRef,
+    ...portalProps
   });
 });
 if (process.env.NODE_ENV !== "production") SelectPortal.displayName = "SelectPortal";
@@ -862,17 +811,19 @@ const FIXED = {
 const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner(componentProps, forwardedRef) {
   const {
     anchor,
-    positionMethod = 'absolute',
     className,
     render,
-    side = 'bottom',
-    align = 'center',
-    sideOffset = 0,
-    alignOffset = 0,
+    // `useAnchorPositioning` applies the same defaults to the undefined values; the names
+    // remain destructured to exclude the props from `elementProps`.
+    positionMethod,
+    side,
+    align,
+    sideOffset,
+    alignOffset,
     collisionBoundary = 'clipping-ancestors',
     collisionPadding,
-    arrowPadding = 5,
-    sticky = false,
+    arrowPadding,
+    sticky,
     disableAnchorTracking,
     alignItemWithTrigger = true,
     collisionAvoidance = DROPDOWN_COLLISION_AVOIDANCE,
@@ -888,9 +839,9 @@ const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner
     valuesRef,
     initialValueRef,
     popupRef,
-    setValue
+    setValue,
+    floatingContext: floatingRootContext
   } = useSelectRootContext();
-  const floatingRootContext = useSelectFloatingContext();
   const open = useStore(store, selectors.open);
   const mounted = useStore(store, selectors.mounted);
   const modal = useStore(store, selectors.modal);
@@ -907,16 +858,6 @@ const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner
   if (!mounted && controlledAlignItemWithTrigger !== alignItemWithTrigger) {
     setControlledAlignItemWithTrigger(alignItemWithTrigger);
   }
-  useIsoLayoutEffect(() => {
-    if (!mounted) {
-      if (selectors.scrollUpArrowVisible(store.state)) {
-        store.set('scrollUpArrowVisible', false);
-      }
-      if (selectors.scrollDownArrowVisible(store.state)) {
-        store.set('scrollDownArrowVisible', false);
-      }
-    }
-  }, [store, mounted]);
   React.useImperativeHandle(alignItemWithTriggerActiveRef, () => alignItemWithTriggerActive);
   useAnchoredPopupScrollLock((alignItemWithTriggerActive || modal) && open, openMethod === 'touch', positionerElement, triggerElement);
   const positioning = useAnchorPositioning({
@@ -947,9 +888,7 @@ const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner
   useIsoLayoutEffect(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
-  const setPositionerElement = useStableCallback(element => {
-    store.set('positionerElement', element);
-  });
+  const setPositionerElement = store.useStateSetter('positionerElement');
   const element = usePositioner(componentProps, state, {
     styles: positionerStyles,
     transitionStatus,
@@ -960,9 +899,6 @@ const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner
   });
   const prevMapSizeRef = React.useRef(0);
   const onMapChange = useStableCallback(map => {
-    if (map.size === 0 && prevMapSizeRef.current === 0) {
-      return;
-    }
     if (valuesRef.current.length === 0) {
       return;
     }
@@ -986,9 +922,8 @@ const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner
       }
     }
     if (prevSize !== 0 && store.state.multiple && Array.isArray(value)) {
-      const hasVisibleItem = selectedItemValue => findItemIndex(valuesRef.current, selectedItemValue, isItemEqualToValue) !== -1;
-      const nextValue = value.filter(selectedItemValue => hasVisibleItem(selectedItemValue));
-      if (nextValue.length !== value.length || nextValue.some(selectedItemValue => !selectedValueIncludes(value, selectedItemValue, isItemEqualToValue))) {
+      const nextValue = value.filter(selectedItemValue => findItemIndex(valuesRef.current, selectedItemValue, isItemEqualToValue) !== -1);
+      if (nextValue.length !== value.length) {
         setValue(nextValue, eventDetails);
         if (nextValue.length === 0) {
           store.set('selectedIndex', null);
@@ -1062,7 +997,8 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
     handleScrollArrowVisibility,
     scrollHandlerRef,
     listRef,
-    highlightItemOnHover
+    highlightItemOnHover,
+    floatingContext: floatingRootContext
   } = useSelectRootContext();
   const {
     side,
@@ -1072,7 +1008,6 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
     setControlledAlignItemWithTrigger
   } = useSelectPositionerContext();
   const insideToolbar = useToolbarRootContext(true) != null;
-  const floatingRootContext = useSelectFloatingContext();
   const direction = useDirection();
   const {
     nonce,
@@ -1095,14 +1030,10 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
     if (!positionerElement || !popupRef.current || !initialPlacedRef.current) {
       return;
     }
-    if (reachedMaxHeightRef.current || !alignItemWithTriggerActive) {
-      handleScrollArrowVisibility();
-      return;
-    }
     const isTopPositioned = positionerElement.style.top === '0px';
     const isBottomPositioned = positionerElement.style.bottom === '0px';
-    if (!isTopPositioned && !isBottomPositioned) {
-      handleScrollArrowVisibility();
+    if (reachedMaxHeightRef.current || !alignItemWithTriggerActive || !isTopPositioned && !isBottomPositioned) {
+      handleScrollArrowVisibility(scroller);
       return;
     }
     const scale = getScale(positionerElement);
@@ -1116,63 +1047,50 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
     const maxAvailableHeight = Math.min(doc.documentElement.clientHeight - marginTop - marginBottom, maxPopupHeight);
     const scrollTop = scroller.scrollTop;
     const maxScrollTop = getMaxScrollTop(scroller);
-    let nextPositionerHeight = 0;
+
+    // `Infinity` requests a scroll to the recomputed maximum offset.
     let nextScrollTop = null;
-    let setReachedMax = false;
-    let scrollToMax = false;
     const setHeight = height => {
       positionerElement.style.height = `${height}px`;
     };
-    const handleSmallDiff = (diff, targetScrollTop) => {
+    const diff = isTopPositioned ? maxScrollTop - scrollTop : scrollTop;
+    const nextHeight = Math.min(currentHeight + diff, maxAvailableHeight);
+    if (diff <= SCROLL_EDGE_TOLERANCE_PX) {
       const heightDelta = clamp(diff, 0, maxAvailableHeight - currentHeight);
       if (heightDelta > 0) {
         // Consume the remaining scroll in height.
         setHeight(currentHeight + heightDelta);
       }
-      scroller.scrollTop = targetScrollTop;
+      scroller.scrollTop = isTopPositioned ? maxScrollTop : 0;
       if (maxAvailableHeight - (currentHeight + heightDelta) <= SCROLL_EDGE_TOLERANCE_PX) {
         reachedMaxHeightRef.current = true;
       }
-      handleScrollArrowVisibility();
-    };
-    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);
+      handleScrollArrowVisibility(scroller);
       return;
     }
     if (maxAvailableHeight - nextHeight > SCROLL_EDGE_TOLERANCE_PX) {
-      if (isTopPositioned) {
-        scrollToMax = true;
-      } else {
-        nextScrollTop = 0;
-      }
-    } else {
-      setReachedMax = true;
-      if (isBottomPositioned && scrollTop < maxScrollTop) {
-        const overshoot = currentHeight + diff - maxAvailableHeight;
-        nextScrollTop = scrollTop - (diff - overshoot);
-      }
+      nextScrollTop = isTopPositioned ? Infinity : 0;
+    } else if (isBottomPositioned && scrollTop < maxScrollTop) {
+      const overshoot = currentHeight + diff - maxAvailableHeight;
+      nextScrollTop = scrollTop - (diff - overshoot);
     }
-    nextPositionerHeight = Math.ceil(nextPositionerHeight);
+    const nextPositionerHeight = Math.ceil(nextHeight);
     if (nextPositionerHeight !== 0) {
       setHeight(nextPositionerHeight);
     }
-    if (scrollToMax || nextScrollTop != null) {
+    if (nextScrollTop != null) {
       // Recompute bounds after resizing (clientHeight likely changed).
-      const nextMaxScrollTop = getMaxScrollTop(scroller);
-      const target = scrollToMax ? nextMaxScrollTop : clamp(nextScrollTop, 0, nextMaxScrollTop);
+      const target = clamp(nextScrollTop, 0, getMaxScrollTop(scroller));
 
       // Avoid adjustments that re-trigger scroll events forever.
       if (Math.abs(scroller.scrollTop - target) > SCROLL_EDGE_TOLERANCE_PX) {
         scroller.scrollTop = target;
       }
     }
-    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - SCROLL_EDGE_TOLERANCE_PX) {
+    if (nextPositionerHeight >= maxAvailableHeight - SCROLL_EDGE_TOLERANCE_PX) {
       reachedMaxHeightRef.current = true;
     }
-    handleScrollArrowVisibility();
+    handleScrollArrowVisibility(scroller);
   });
   React.useImperativeHandle(scrollHandlerRef, () => handleScroll, [handleScroll]);
   useOpenChangeComplete({
@@ -1223,17 +1141,18 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
     if (!open || !triggerElement || !positionerElement || !popupElement || alignItemWithTriggerActive && !isPositioned || store.state.transitionStatus === 'ending') {
       return;
     }
+    initialPlacedRef.current = true;
+    popupElement.style.removeProperty('--transform-origin');
     if (!alignItemWithTriggerActive) {
-      initialPlacedRef.current = true;
-      scrollArrowFrame.request(handleScrollArrowVisibility);
-      popupElement.style.removeProperty('--transform-origin');
+      // The wrapper supplies the scroller: the list owns scrolling once it has mounted, and
+      // this effect re-runs (cancelling the stale frame) when that happens.
+      scrollArrowFrame.request(() => handleScrollArrowVisibility(listElement || popupElement));
       return;
     }
 
     // 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) {
@@ -1302,7 +1221,6 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
       // 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;
@@ -1321,18 +1239,16 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
         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);
+        const clampedY = clamp(popupHeight > 0 ? (textCenterY - popupTop) / popupHeight * 100 : 50, 0, 100);
         popupElement.style.setProperty('--transform-origin', `50% ${clampedY}%`);
       }
       if (initialHeight === viewportHeight || height >= maxPopupHeight) {
         reachedMaxHeightRef.current = true;
       }
-      handleScrollArrowVisibility();
+      handleScrollArrowVisibility(scroller);
       if (highlightItemOnHover && store.state.selectedIndex === null && store.state.activeIndex === null && listRef.current[0] != null) {
         store.set('activeIndex', 0);
       }
-      initialPlacedRef.current = true;
     } finally {
       restoreTransformStyles();
     }
@@ -1371,15 +1287,14 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
       style: listElement ? {
         height: '100%'
       } : LIST_FUNCTIONAL_STYLES
-    })
+    }),
+    className: !listElement && alignItemWithTriggerActive ? styleDisableScrollbar.className : undefined
   };
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, popupRef],
     state,
     stateAttributesMapping,
-    props: [popupProps, defaultProps, getDisabledMountTransitionStyles(transitionStatus), {
-      className: !listElement && alignItemWithTriggerActive ? styleDisableScrollbar.className : undefined
-    }, elementProps]
+    props: [popupProps, defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps]
   });
   return /*#__PURE__*/jsxs(React.Fragment, {
     children: [!disableStyleElements && styleDisableScrollbar.getElement(nonce), /*#__PURE__*/jsx(FloatingFocusManager, {
@@ -1395,7 +1310,7 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
 });
 if (process.env.NODE_ENV !== "production") SelectPopup.displayName = "SelectPopup";
 function getMaxPopupHeight(popupStyles) {
-  const maxHeightStyle = popupStyles.maxHeight || '';
+  const maxHeightStyle = popupStyles.maxHeight;
   return maxHeightStyle.endsWith('px') ? parseFloat(maxHeightStyle) || Infinity : Infinity;
 }
 function getMaxScrollTop(scroller) {
@@ -1453,14 +1368,14 @@ const SelectList = /*#__PURE__*/React.forwardRef(function SelectList(componentPr
   } = componentProps;
   const {
     store,
-    scrollHandlerRef
+    scrollHandlerRef,
+    multiple
   } = useSelectRootContext();
   const {
     alignItemWithTriggerActive
   } = useSelectPositionerContext();
   const hasScrollArrows = useStore(store, selectors.hasScrollArrows);
   const openMethod = useStore(store, selectors.openMethod);
-  const multiple = useStore(store, selectors.multiple);
   const id = useStore(store, selectors.id);
   const defaultProps = {
     id: `${id}-list`,
@@ -1474,9 +1389,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(function SelectList(componentPr
     }),
     className: hasScrollArrows && openMethod !== 'touch' ? styleDisableScrollbar.className : undefined
   };
-  const setListElement = useStableCallback(element => {
-    store.set('listElement', element);
-  });
+  const setListElement = store.useStateSetter('listElement');
   return useRenderElement('div', componentProps, {
     ref: [forwardedRef, setListElement],
     props: [defaultProps, elementProps]
@@ -1501,15 +1414,15 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
     style,
     value: itemValue = null,
     label,
-    disabled = false,
+    disabled: disabledProp = false,
     nativeButton = false,
     ...elementProps
   } = componentProps;
   const textRef = React.useRef(null);
   const listItem = useCompositeListItem({
+    guess: true,
     label,
-    textRef,
-    indexGuessBehavior: IndexGuessBehavior.GuessFromOrder
+    textRef
   });
   const {
     store,
@@ -1524,28 +1437,22 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
     disabled: selectDisabled,
     readOnly
   } = useSelectRootContext();
+  const disabled = selectDisabled || disabledProp;
   const highlighted = useStore(store, selectors.isActive, listItem.index);
   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);
   useIsoLayoutEffect(() => {
-    if (!hasRegistered) {
-      return undefined;
-    }
     const values = valuesRef.current;
     values[index] = itemValue;
     return () => {
       delete values[index];
     };
-  }, [hasRegistered, index, itemValue, valuesRef]);
+  }, [index, itemValue, valuesRef]);
   useIsoLayoutEffect(() => {
-    if (!hasRegistered) {
-      return;
-    }
     const selectedValue = store.state.value;
     let selectedCandidate = selectedValue;
     if (multiple && Array.isArray(selectedValue)) {
@@ -1561,8 +1468,7 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
         selectedItemTextRef.current = textRef.current;
       }
     }
-  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue, selectedItemTextRef]);
-  const lastKeyRef = React.useRef(null);
+  }, [index, multiple, isItemEqualToValue, store, itemValue, selectedItemTextRef]);
   const pointerTypeRef = React.useRef('mouse');
   const allowMouseSelectionRef = React.useRef(false);
   const {
@@ -1603,14 +1509,15 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
     'aria-selected': selected,
     tabIndex: open && highlighted ? 0 : -1,
     onKeyDown(event) {
-      lastKeyRef.current = event.key;
       store.set('activeIndex', index);
       if (event.key === ' ' && typingRef.current) {
+        // `useButton` skips Space activation for `role="option"` items when the keydown
+        // is `defaultPrevented`, keeping typeahead spaces from committing a selection.
         event.preventDefault();
       }
     },
     onClick(event) {
-      const isMouseClick = event.type === 'click' && pointerTypeRef.current !== 'touch';
+      const isMouseClick = 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
@@ -1622,15 +1529,9 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
       // 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 || isInvalidMouseClick) {
+      if (disabled || isInvalidMouseClick) {
         return;
       }
-      lastKeyRef.current = null;
       commitSelection(event.nativeEvent);
     },
     onPointerEnter(event) {
@@ -1679,9 +1580,8 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
     selected,
     index,
     textRef,
-    selectedByFocus,
-    hasRegistered
-  }), [selected, index, textRef, selectedByFocus, hasRegistered]);
+    selectedByFocus
+  }), [selected, index, textRef, selectedByFocus]);
   return /*#__PURE__*/jsx(SelectItemContext.Provider, {
     value: contextValue,
     children: element
@@ -1690,11 +1590,10 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
 if (process.env.NODE_ENV !== "production") SelectItem.displayName = "SelectItem";
 
 const SelectItemIndicator = /*#__PURE__*/React.forwardRef(function SelectItemIndicator(componentProps, forwardedRef) {
-  const keepMounted = componentProps.keepMounted ?? false;
   const {
     selected
   } = useSelectItemContext();
-  const shouldRender = keepMounted || selected;
+  const shouldRender = componentProps.keepMounted || selected;
   if (!shouldRender) {
     return null;
   }
@@ -1760,8 +1659,7 @@ const SelectItemText = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fun
   const {
     index,
     textRef,
-    selectedByFocus,
-    hasRegistered
+    selectedByFocus
   } = useSelectItemContext();
   const {
     firstItemTextRef,
@@ -1777,13 +1675,13 @@ const SelectItemText = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fun
     if (!node) {
       return;
     }
-    if (hasRegistered && index === 0) {
+    if (index === 0) {
       firstItemTextRef.current = node;
     }
-    if (hasRegistered && selectedByFocus) {
+    if (selectedByFocus) {
       selectedItemTextRef.current = node;
     }
-  }, [firstItemTextRef, selectedItemTextRef, index, selectedByFocus, hasRegistered]);
+  }, [firstItemTextRef, selectedItemTextRef, index, selectedByFocus]);
   const element = useRenderElement('div', componentProps, {
     ref: [localRef, forwardedRef, textRef],
     props: elementProps
@@ -1848,6 +1746,9 @@ const SelectGroupLabel = /*#__PURE__*/React.forwardRef(function SelectGroupLabel
   const id = useBaseUiId(idProp);
   useIsoLayoutEffect(() => {
     setLabelId(id);
+    return () => {
+      setLabelId(currentId => currentId === id ? undefined : currentId);
+    };
   }, [id, setLabelId]);
   const element = useRenderElement('div', componentProps, {
     ref: forwardedRef,