@jobber/components 9.6.1 → 9.6.2

package/dist/SelectGroupLabel-es.js

@@ -1,9 +1,11 @@
 import * as React from 'react';
-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 { 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 { 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 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 { 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 { 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";
@@ -25,7 +27,7 @@ function usePreviousValue(value) {
     current: value,
     previous: null
   });
-  if (!Object.is(value, state.current)) {
+  if (value !== state.current) {
     setState({
       current: value,
       previous: state.current
@@ -40,6 +42,8 @@ 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) {
@@ -47,16 +51,25 @@ 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: 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 => {
+  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 => {
     const {
       value,
       multiple,
@@ -69,19 +82,19 @@ const selectors = {
       return value.length > 0;
     }
     return stringifyAsValue(value, itemToStringValue) !== '';
-  },
-  hasNullItemLabel: (state, enabled) => {
+  }),
+  hasNullItemLabel: createSelector((state, enabled) => {
     return enabled ? hasNullItemLabel(state.items) : false;
-  },
-  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) => {
+  }),
+  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) => {
     const comparer = state.isItemEqualToValue;
     const storeValue = state.value;
     if (state.multiple) {
@@ -92,19 +105,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: (state, index) => {
+  }),
+  isSelectedByFocus: createSelector((state, index) => {
     return state.selectedIndex === index;
-  },
-  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
+  }),
+  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)
 };
 
 function SelectRoot(props) {
@@ -190,7 +203,7 @@ function SelectRoot(props) {
     openMethod,
     triggerProps: interactionTypeProps
   } = useOpenInteractionType(open);
-  const store = useRefWithInit(() => new ReactStore({
+  const store = useRefWithInit(() => new Store({
     id: generatedId,
     labelId: undefined,
     modal,
@@ -222,7 +235,7 @@ function SelectRoot(props) {
   const triggerElement = useStore(store, selectors.triggerElement);
   const positionerElement = useStore(store, selectors.positionerElement);
   const previousOpenMethod = usePreviousValue(openMethod);
-  const renderedOpenMethod = openMethod ?? previousOpenMethod;
+  const renderedOpenMethod = openMethod ?? previousOpenMethod ?? null;
   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
@@ -238,26 +251,38 @@ function SelectRoot(props) {
     }
     return stringifyAsValue(value, itemToStringValue);
   }, [multiple, value, itemToStringValue]);
-  const controlRef = useValueAsRef(triggerElement);
+  const controlRef = useValueAsRef(store.state.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 !== '';
+  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]);
   useIsoLayoutEffect(() => {
     setFilled(hasSelectedValue);
   }, [hasSelectedValue, setFilled]);
   useIsoLayoutEffect(function syncSelectedIndex() {
-    let target = value;
-    let empty = false;
+    const registry = valuesRef.current;
+    let nextIndex;
     if (multiple) {
       const currentValue = Array.isArray(value) ? value : [];
-      empty = currentValue.length === 0;
-      target = currentValue[currentValue.length - 1];
+      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;
     }
-    const index = empty ? -1 : findItemIndex(valuesRef.current, target, isItemEqualToValue);
-    const nextIndex = index === -1 ? null : index;
     if (nextIndex === null) {
       selectedItemTextRef.current = null;
     }
@@ -265,7 +290,7 @@ function SelectRoot(props) {
       return;
     }
     store.set('selectedIndex', nextIndex);
-  }, [multiple, open, value, isItemEqualToValue, store]);
+  }, [hasSelectedValue, multiple, open, value, valuesRef, isItemEqualToValue, store, selectedItemTextRef]);
   function isSelectedValueDirty(currentValue) {
     const initialValue = validityData.initialValue;
     if (Array.isArray(currentValue) && Array.isArray(initialValue)) {
@@ -296,9 +321,7 @@ function SelectRoot(props) {
     setMounted(false);
     store.update({
       activeIndex: null,
-      openMethod: null,
-      scrollUpArrowVisible: false,
-      scrollDownArrowVisible: false
+      openMethod: null
     });
     onOpenChangeComplete?.(false);
   });
@@ -322,13 +345,21 @@ function SelectRoot(props) {
     }
     setValueUnwrapped(nextValue);
   });
-  const handleScrollArrowVisibility = useStableCallback(scroller => {
+  const handleScrollArrowVisibility = useStableCallback(() => {
+    const scroller = store.state.listElement || popupRef.current;
+    if (!scroller) {
+      return;
+    }
     const maxScrollTop = getMaxScrollOffset(scroller.scrollHeight, scroller.clientHeight);
     const scrollTop = normalizeScrollOffset(scroller.scrollTop, maxScrollTop);
     const shouldShowUp = scrollTop > 0;
     const shouldShowDown = scrollTop < maxScrollTop;
-    store.set('scrollUpArrowVisible', shouldShowUp);
-    store.set('scrollDownArrowVisible', shouldShowDown);
+    if (store.state.scrollUpArrowVisible !== shouldShowUp) {
+      store.set('scrollUpArrowVisible', shouldShowUp);
+    }
+    if (store.state.scrollDownArrowVisible !== shouldShowDown) {
+      store.set('scrollDownArrowVisible', shouldShowDown);
+    }
   });
   const floatingContext = useFloatingRootContext({
     open,
@@ -373,16 +404,20 @@ 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;
     }
   });
-
-  // `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 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]);
   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(() => {
@@ -391,25 +426,27 @@ function SelectRoot(props) {
       triggerProps: mergedTriggerProps
     });
   });
-  store.useSyncedValues({
-    id: generatedId,
-    modal,
-    multiple,
-    value,
-    open,
-    mounted,
-    transitionStatus,
-    popupProps,
-    triggerProps: mergedTriggerProps,
-    items,
-    itemToStringLabel,
-    itemToStringValue,
-    isItemEqualToValue,
-    openMethod: renderedOpenMethod
-  });
+  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]);
   const contextValue = React.useMemo(() => ({
     store,
-    floatingContext,
+    name,
     required,
     disabled,
     readOnly,
@@ -434,8 +471,9 @@ function SelectRoot(props) {
     onOpenChangeComplete,
     alignItemWithTriggerActiveRef,
     initialValueRef
-  }), [store, floatingContext, required, disabled, readOnly, multiple, highlightItemOnHover, setValue, setOpen, itemProps, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
+  }), [store, name, required, disabled, readOnly, multiple, highlightItemOnHover, setValue, setOpen, itemProps, validation, onOpenChangeComplete, handleScrollArrowVisibility]);
   const ref = useMergedRefs(inputRef, validation.inputRef);
+  const hasMultipleSelection = multiple && Array.isArray(value) && value.length > 0;
   const hiddenInputName = multiple ? undefined : name;
   const hiddenInputs = React.useMemo(() => {
     if (!multiple || !Array.isArray(value) || !name) {
@@ -452,69 +490,73 @@ function SelectRoot(props) {
       }, currentSerializedValue);
     });
   }, [multiple, value, form, name, itemToStringValue, disabled]);
-  return /*#__PURE__*/jsxs(SelectRootContext.Provider, {
+  return /*#__PURE__*/jsx(SelectRootContext.Provider, {
     value: contextValue,
-    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.
+    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) {
               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 = 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 = 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);
+              }
             }
+            store.set('forceMount', true);
+            queueMicrotask(handleChange);
           }
-          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]
+        }),
+        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]
+    })
   });
 }
 
+const BOUNDARY_OFFSET = 2;
 const SELECTED_DELAY = 400;
 const stateAttributesMapping$2 = {
   ...pressableTriggerOpenStateMapping,
@@ -587,7 +629,9 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
     disabled,
     native: nativeButton
   });
-  const setTriggerElement = store.useStateSetter('triggerElement');
+  const setTriggerElement = useStableCallback(element => {
+    store.set('triggerElement', element);
+  });
   const timeoutFocus = useTimeout();
   const timeoutMouseDown = useTimeout();
   const selectedDelayTimeout = useTimeout();
@@ -616,7 +660,7 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
   const mergedProps = mergeProps(triggerProps, {
     id,
     role: 'combobox',
-    'aria-expanded': open,
+    'aria-expanded': open ? 'true' : 'false',
     'aria-haspopup': 'listbox',
     'aria-controls': open ? listElement?.id ?? getFloatingFocusElement(positionerElement)?.id : undefined,
     'aria-labelledby': ariaLabelledBy,
@@ -665,7 +709,8 @@ const SelectTrigger = /*#__PURE__*/React.forwardRef(function SelectTrigger(compo
         if (contains(triggerRef.current, mouseUpTarget) || contains(positionerRef.current, mouseUpTarget)) {
           return;
         }
-        if (isMouseWithinBounds(mouseEvent, triggerRef.current)) {
+        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) {
           return;
         }
         setOpen(false, createChangeEventDetails(cancelOpen, mouseEvent));
@@ -740,7 +785,7 @@ const SelectValue = /*#__PURE__*/React.forwardRef(function SelectValue(component
     children = childrenProp(value);
   } else if (childrenProp != null) {
     children = childrenProp;
-  } else if (shouldCheckNullItemLabel && !hasNullLabel) {
+  } else if (!hasSelectedValue && placeholder != null && !hasNullLabel) {
     children = placeholder;
   } else if (Array.isArray(value)) {
     children = resolveMultipleLabels(value, items, itemToStringLabel);
@@ -759,6 +804,9 @@ 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
@@ -769,9 +817,12 @@ const SelectPortal = /*#__PURE__*/React.forwardRef(function SelectPortal(portalP
   if (!shouldRender) {
     return null;
   }
-  return /*#__PURE__*/jsx(FloatingPortal, {
-    ref: forwardedRef,
-    ...portalProps
+  return /*#__PURE__*/jsx(SelectPortalContext.Provider, {
+    value: true,
+    children: /*#__PURE__*/jsx(FloatingPortal, {
+      ref: forwardedRef,
+      ...portalProps
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") SelectPortal.displayName = "SelectPortal";
@@ -811,19 +862,17 @@ const FIXED = {
 const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner(componentProps, forwardedRef) {
   const {
     anchor,
+    positionMethod = 'absolute',
     className,
     render,
-    // `useAnchorPositioning` applies the same defaults to the undefined values; the names
-    // remain destructured to exclude the props from `elementProps`.
-    positionMethod,
-    side,
-    align,
-    sideOffset,
-    alignOffset,
+    side = 'bottom',
+    align = 'center',
+    sideOffset = 0,
+    alignOffset = 0,
     collisionBoundary = 'clipping-ancestors',
     collisionPadding,
-    arrowPadding,
-    sticky,
+    arrowPadding = 5,
+    sticky = false,
     disableAnchorTracking,
     alignItemWithTrigger = true,
     collisionAvoidance = DROPDOWN_COLLISION_AVOIDANCE,
@@ -839,9 +888,9 @@ const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner
     valuesRef,
     initialValueRef,
     popupRef,
-    setValue,
-    floatingContext: floatingRootContext
+    setValue
   } = useSelectRootContext();
+  const floatingRootContext = useSelectFloatingContext();
   const open = useStore(store, selectors.open);
   const mounted = useStore(store, selectors.mounted);
   const modal = useStore(store, selectors.modal);
@@ -858,6 +907,16 @@ 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({
@@ -888,7 +947,9 @@ const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner
   useIsoLayoutEffect(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
-  const setPositionerElement = store.useStateSetter('positionerElement');
+  const setPositionerElement = useStableCallback(element => {
+    store.set('positionerElement', element);
+  });
   const element = usePositioner(componentProps, state, {
     styles: positionerStyles,
     transitionStatus,
@@ -899,6 +960,9 @@ 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;
     }
@@ -922,8 +986,9 @@ const SelectPositioner = /*#__PURE__*/React.forwardRef(function SelectPositioner
       }
     }
     if (prevSize !== 0 && store.state.multiple && Array.isArray(value)) {
-      const nextValue = value.filter(selectedItemValue => findItemIndex(valuesRef.current, selectedItemValue, isItemEqualToValue) !== -1);
-      if (nextValue.length !== value.length) {
+      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))) {
         setValue(nextValue, eventDetails);
         if (nextValue.length === 0) {
           store.set('selectedIndex', null);
@@ -997,8 +1062,7 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
     handleScrollArrowVisibility,
     scrollHandlerRef,
     listRef,
-    highlightItemOnHover,
-    floatingContext: floatingRootContext
+    highlightItemOnHover
   } = useSelectRootContext();
   const {
     side,
@@ -1008,6 +1072,7 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
     setControlledAlignItemWithTrigger
   } = useSelectPositionerContext();
   const insideToolbar = useToolbarRootContext(true) != null;
+  const floatingRootContext = useSelectFloatingContext();
   const direction = useDirection();
   const {
     nonce,
@@ -1030,10 +1095,14 @@ 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 (reachedMaxHeightRef.current || !alignItemWithTriggerActive || !isTopPositioned && !isBottomPositioned) {
-      handleScrollArrowVisibility(scroller);
+    if (!isTopPositioned && !isBottomPositioned) {
+      handleScrollArrowVisibility();
       return;
     }
     const scale = getScale(positionerElement);
@@ -1047,50 +1116,63 @@ 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);
-
-    // `Infinity` requests a scroll to the recomputed maximum offset.
+    let nextPositionerHeight = 0;
     let nextScrollTop = null;
+    let setReachedMax = false;
+    let scrollToMax = false;
     const setHeight = height => {
       positionerElement.style.height = `${height}px`;
     };
-    const diff = isTopPositioned ? maxScrollTop - scrollTop : scrollTop;
-    const nextHeight = Math.min(currentHeight + diff, maxAvailableHeight);
-    if (diff <= SCROLL_EDGE_TOLERANCE_PX) {
+    const handleSmallDiff = (diff, targetScrollTop) => {
       const heightDelta = clamp(diff, 0, maxAvailableHeight - currentHeight);
       if (heightDelta > 0) {
         // Consume the remaining scroll in height.
         setHeight(currentHeight + heightDelta);
       }
-      scroller.scrollTop = isTopPositioned ? maxScrollTop : 0;
+      scroller.scrollTop = targetScrollTop;
       if (maxAvailableHeight - (currentHeight + heightDelta) <= SCROLL_EDGE_TOLERANCE_PX) {
         reachedMaxHeightRef.current = true;
       }
-      handleScrollArrowVisibility(scroller);
+      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);
       return;
     }
     if (maxAvailableHeight - nextHeight > SCROLL_EDGE_TOLERANCE_PX) {
-      nextScrollTop = isTopPositioned ? Infinity : 0;
-    } else if (isBottomPositioned && scrollTop < maxScrollTop) {
-      const overshoot = currentHeight + diff - maxAvailableHeight;
-      nextScrollTop = scrollTop - (diff - overshoot);
+      if (isTopPositioned) {
+        scrollToMax = true;
+      } else {
+        nextScrollTop = 0;
+      }
+    } else {
+      setReachedMax = true;
+      if (isBottomPositioned && scrollTop < maxScrollTop) {
+        const overshoot = currentHeight + diff - maxAvailableHeight;
+        nextScrollTop = scrollTop - (diff - overshoot);
+      }
     }
-    const nextPositionerHeight = Math.ceil(nextHeight);
+    nextPositionerHeight = Math.ceil(nextPositionerHeight);
     if (nextPositionerHeight !== 0) {
       setHeight(nextPositionerHeight);
     }
-    if (nextScrollTop != null) {
+    if (scrollToMax || nextScrollTop != null) {
       // Recompute bounds after resizing (clientHeight likely changed).
-      const target = clamp(nextScrollTop, 0, getMaxScrollTop(scroller));
+      const nextMaxScrollTop = getMaxScrollTop(scroller);
+      const target = scrollToMax ? nextMaxScrollTop : clamp(nextScrollTop, 0, nextMaxScrollTop);
 
       // Avoid adjustments that re-trigger scroll events forever.
       if (Math.abs(scroller.scrollTop - target) > SCROLL_EDGE_TOLERANCE_PX) {
         scroller.scrollTop = target;
       }
     }
-    if (nextPositionerHeight >= maxAvailableHeight - SCROLL_EDGE_TOLERANCE_PX) {
+    if (setReachedMax || nextPositionerHeight >= maxAvailableHeight - SCROLL_EDGE_TOLERANCE_PX) {
       reachedMaxHeightRef.current = true;
     }
-    handleScrollArrowVisibility(scroller);
+    handleScrollArrowVisibility();
   });
   React.useImperativeHandle(scrollHandlerRef, () => handleScroll, [handleScroll]);
   useOpenChangeComplete({
@@ -1141,18 +1223,17 @@ 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) {
-      // 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));
+      initialPlacedRef.current = true;
+      scrollArrowFrame.request(handleScrollArrowVisibility);
+      popupElement.style.removeProperty('--transform-origin');
       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) {
@@ -1221,6 +1302,7 @@ 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;
@@ -1239,16 +1321,18 @@ const SelectPopup = /*#__PURE__*/React.forwardRef(function SelectPopup(component
         const popupTop = positionerRect.top;
         const popupHeight = positionerRect.height;
         const textCenterY = textRect.top + textRect.height / 2;
-        const clampedY = clamp(popupHeight > 0 ? (textCenterY - popupTop) / popupHeight * 100 : 50, 0, 100);
+        const transformOriginY = popupHeight > 0 ? (textCenterY - popupTop) / popupHeight * 100 : 50;
+        const clampedY = clamp(transformOriginY, 0, 100);
         popupElement.style.setProperty('--transform-origin', `50% ${clampedY}%`);
       }
       if (initialHeight === viewportHeight || height >= maxPopupHeight) {
         reachedMaxHeightRef.current = true;
       }
-      handleScrollArrowVisibility(scroller);
+      handleScrollArrowVisibility();
       if (highlightItemOnHover && store.state.selectedIndex === null && store.state.activeIndex === null && listRef.current[0] != null) {
         store.set('activeIndex', 0);
       }
+      initialPlacedRef.current = true;
     } finally {
       restoreTransformStyles();
     }
@@ -1287,14 +1371,15 @@ 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), elementProps]
+    props: [popupProps, defaultProps, getDisabledMountTransitionStyles(transitionStatus), {
+      className: !listElement && alignItemWithTriggerActive ? styleDisableScrollbar.className : undefined
+    }, elementProps]
   });
   return /*#__PURE__*/jsxs(React.Fragment, {
     children: [!disableStyleElements && styleDisableScrollbar.getElement(nonce), /*#__PURE__*/jsx(FloatingFocusManager, {
@@ -1310,7 +1395,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) {
@@ -1368,14 +1453,14 @@ const SelectList = /*#__PURE__*/React.forwardRef(function SelectList(componentPr
   } = componentProps;
   const {
     store,
-    scrollHandlerRef,
-    multiple
+    scrollHandlerRef
   } = 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`,
@@ -1389,7 +1474,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(function SelectList(componentPr
     }),
     className: hasScrollArrows && openMethod !== 'touch' ? styleDisableScrollbar.className : undefined
   };
-  const setListElement = store.useStateSetter('listElement');
+  const setListElement = useStableCallback(element => {
+    store.set('listElement', element);
+  });
   return useRenderElement('div', componentProps, {
     ref: [forwardedRef, setListElement],
     props: [defaultProps, elementProps]
@@ -1414,15 +1501,15 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
     style,
     value: itemValue = null,
     label,
-    disabled: disabledProp = false,
+    disabled = false,
     nativeButton = false,
     ...elementProps
   } = componentProps;
   const textRef = React.useRef(null);
   const listItem = useCompositeListItem({
-    guess: true,
     label,
-    textRef
+    textRef,
+    indexGuessBehavior: IndexGuessBehavior.GuessFromOrder
   });
   const {
     store,
@@ -1437,22 +1524,28 @@ 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];
     };
-  }, [index, itemValue, valuesRef]);
+  }, [hasRegistered, index, itemValue, valuesRef]);
   useIsoLayoutEffect(() => {
+    if (!hasRegistered) {
+      return;
+    }
     const selectedValue = store.state.value;
     let selectedCandidate = selectedValue;
     if (multiple && Array.isArray(selectedValue)) {
@@ -1468,7 +1561,8 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
         selectedItemTextRef.current = textRef.current;
       }
     }
-  }, [index, multiple, isItemEqualToValue, store, itemValue, selectedItemTextRef]);
+  }, [hasRegistered, index, multiple, isItemEqualToValue, store, itemValue, selectedItemTextRef]);
+  const lastKeyRef = React.useRef(null);
   const pointerTypeRef = React.useRef('mouse');
   const allowMouseSelectionRef = React.useRef(false);
   const {
@@ -1509,15 +1603,14 @@ 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 = pointerTypeRef.current !== 'touch';
+      const isMouseClick = event.type === 'click' && pointerTypeRef.current !== 'touch';
       const clickPointerType = event.nativeEvent.pointerType;
       const isVirtualMouseClick = isMouseClick && isVirtualClick(event.nativeEvent) && (
       // Generic no-pointer `detail === 0` clicks stay tied to highlight state. Virtual
@@ -1529,9 +1622,15 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
       // assistive technology activation.
       const isInvalidMouseClick = isMouseClick && !isVirtualMouseClick && !allowMouseSelectionRef.current;
       allowMouseSelectionRef.current = false;
-      if (disabled || isInvalidMouseClick) {
+
+      // Prevent double commit on {Enter}
+      if (event.type === 'keydown' && lastKeyRef.current === null) {
+        return;
+      }
+      if (disabled || event.type === 'keydown' && lastKeyRef.current === ' ' && typingRef.current || isInvalidMouseClick) {
         return;
       }
+      lastKeyRef.current = null;
       commitSelection(event.nativeEvent);
     },
     onPointerEnter(event) {
@@ -1580,8 +1679,9 @@ const SelectItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
     selected,
     index,
     textRef,
-    selectedByFocus
-  }), [selected, index, textRef, selectedByFocus]);
+    selectedByFocus,
+    hasRegistered
+  }), [selected, index, textRef, selectedByFocus, hasRegistered]);
   return /*#__PURE__*/jsx(SelectItemContext.Provider, {
     value: contextValue,
     children: element
@@ -1590,10 +1690,11 @@ 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 = componentProps.keepMounted || selected;
+  const shouldRender = keepMounted || selected;
   if (!shouldRender) {
     return null;
   }
@@ -1659,7 +1760,8 @@ const SelectItemText = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fun
   const {
     index,
     textRef,
-    selectedByFocus
+    selectedByFocus,
+    hasRegistered
   } = useSelectItemContext();
   const {
     firstItemTextRef,
@@ -1675,13 +1777,13 @@ const SelectItemText = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fun
     if (!node) {
       return;
     }
-    if (index === 0) {
+    if (hasRegistered && index === 0) {
       firstItemTextRef.current = node;
     }
-    if (selectedByFocus) {
+    if (hasRegistered && selectedByFocus) {
       selectedItemTextRef.current = node;
     }
-  }, [firstItemTextRef, selectedItemTextRef, index, selectedByFocus]);
+  }, [firstItemTextRef, selectedItemTextRef, index, selectedByFocus, hasRegistered]);
   const element = useRenderElement('div', componentProps, {
     ref: [localRef, forwardedRef, textRef],
     props: elementProps
@@ -1746,9 +1848,6 @@ 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,