@base-ui/react 1.4.1 → 1.5.0

package/select/trigger/SelectTrigger.js

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

package/select/trigger/SelectTriggerDataAttributes.d.ts

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

package/select/trigger/SelectTriggerDataAttributes.js

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

package/slider/control/SliderControl.js

@@ -113,9 +113,7 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
   const stylesRef = React.useRef(null);
   const setStylesRef = (0, _useStableCallback.useStableCallback)(element => {
     if (element && stylesRef.current == null) {
-      if (stylesRef.current == null) {
-        stylesRef.current = getComputedStyle(element);
-      }
+      stylesRef.current = (0, _owner.ownerWindow)(element).getComputedStyle(element);
     }
   });
 
@@ -127,7 +125,7 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
   // This value should be equal to the radius or half the width/height of the thumb.
   const insetThumbOffsetRef = React.useRef(0);
   const latestValuesRef = (0, _useValueAsRef.useValueAsRef)(values);
-  const updatePressedThumb = (0, _useStableCallback.useStableCallback)(nextIndex => {
+  function updatePressedThumb(nextIndex) {
     if (pressedThumbIndexRef.current !== nextIndex) {
       pressedThumbIndexRef.current = nextIndex;
     }
@@ -138,8 +136,8 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
       return;
     }
     pressedInputRef.current = thumbElement.querySelector('input[type="range"]');
-  });
-  const getFingerState = (0, _useStableCallback.useStableCallback)(fingerCoords => {
+  }
+  function getFingerState(fingerCoords) {
     const control = controlRef.current;
     if (!control) {
       return null;
@@ -192,8 +190,8 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
       pressedThumbIndexRef.current = collisionResult.thumbIndex;
     }
     return collisionResult;
-  });
-  const startPressing = (0, _useStableCallback.useStableCallback)(fingerCoords => {
+  }
+  function startPressing(fingerCoords) {
     pressedValuesRef.current = range ? values.slice() : null;
     latestValuesRef.current = values;
     const pressedThumbIndex = pressedThumbIndexRef.current;
@@ -234,8 +232,8 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
         insetThumbOffsetRef.current = thumbRect[side] / 2;
       }
     }
-  });
-  const focusThumb = (0, _useStableCallback.useStableCallback)(thumbIndex => {
+  }
+  function focusThumb(thumbIndex) {
     const input = thumbRefs.current?.[thumbIndex]?.querySelector('input[type="range"]');
     if (!input) {
       return;
@@ -246,7 +244,7 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
       // Supported in Chrome from 144+.
       focusVisible: false
     });
-  });
+  }
   const handleTouchMove = (0, _useStableCallback.useStableCallback)(nativeEvent => {
     const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
     if (fingerCoords == null) {

package/slider/root/SliderRoot.js

@@ -141,10 +141,7 @@ const SliderRoot = exports.SliderRoot = /*#__PURE__*/React.forwardRef(function S
       setLastUsedThumbIndex(value);
     }
   });
-  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
-    id,
-    value: valueUnwrapped
-  });
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, id, valueUnwrapped);
   (0, _useValueChanged.useValueChanged)(valueUnwrapped, () => {
     clearErrors(name);
     if (shouldValidateOnChange()) {

package/slider/thumb/SliderThumb.js

@@ -11,6 +11,7 @@ var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
+var _owner = require("@base-ui/utils/owner");
 var _clamp = require("../../internals/clamp");
 var _formatNumber = require("../../utils/formatNumber");
 var _mergeProps = require("../../merge-props");
@@ -21,7 +22,7 @@ var _valueToPercent = require("../../utils/valueToPercent");
 var _composite = require("../../internals/composite/composite");
 var _useCompositeListItem = require("../../internals/composite/list/useCompositeListItem");
 var _DirectionContext = require("../../internals/direction-context/DirectionContext");
-var _CSPContext = require("../../csp-provider/CSPContext");
+var _CSPContext = require("../../internals/csp-context/CSPContext");
 var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
 var _element = require("../../floating-ui-react/utils/element");
 var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
@@ -33,7 +34,7 @@ var _stateAttributesMapping = require("../root/stateAttributesMapping");
 var _SliderThumbDataAttributes = require("./SliderThumbDataAttributes");
 var _prehydrationScript = require("./prehydrationScript.min");
 var _jsxRuntime = require("react/jsx-runtime");
-const ALL_KEYS = new Set([_composite.ARROW_UP, _composite.ARROW_DOWN, _composite.ARROW_LEFT, _composite.ARROW_RIGHT, _composite.HOME, _composite.END, _composite.PAGE_UP, _composite.PAGE_DOWN]);
+const ALL_KEYS = new Set([..._composite.COMPOSITE_KEYS, _composite.PAGE_UP, _composite.PAGE_DOWN]);
 function getDefaultAriaValueText(values, index, format, locale) {
   if (index < 0) {
     return undefined;
@@ -176,7 +177,7 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     }
   }, [getInsetPosition, inset, thumbValuePercent]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!inset || typeof ResizeObserver !== 'function') {
+    if (!inset) {
       return undefined;
     }
     const control = controlRef.current;
@@ -184,39 +185,32 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     if (!control || !thumb) {
       return undefined;
     }
-    const resizeObserver = new ResizeObserver(getInsetPosition);
+    const ResizeObserverCtor = (0, _owner.ownerWindow)(control).ResizeObserver;
+    if (typeof ResizeObserverCtor !== 'function') {
+      return undefined;
+    }
+    const resizeObserver = new ResizeObserverCtor(getInsetPosition);
     resizeObserver.observe(control);
     resizeObserver.observe(thumb);
     return () => {
       resizeObserver.disconnect();
     };
   }, [controlRef, getInsetPosition, inset]);
-  const getThumbStyle = React.useCallback(() => {
-    const startEdge = vertical ? 'bottom' : 'insetInlineStart';
-    const crossOffsetProperty = vertical ? 'left' : 'top';
-    let zIndex;
-    if (range) {
-      if (activeIndex === index) {
-        zIndex = 2;
-      } else if (safeLastUsedThumbIndex === index) {
-        zIndex = 1;
-      }
-    } else if (activeIndex === index) {
+  const startEdge = vertical ? 'bottom' : 'insetInlineStart';
+  const crossOffsetProperty = vertical ? 'left' : 'top';
+  let zIndex;
+  if (range) {
+    if (activeIndex === index) {
+      zIndex = 2;
+    } else if (safeLastUsedThumbIndex === index) {
       zIndex = 1;
     }
-    if (!inset) {
-      if (!Number.isFinite(thumbValuePercent)) {
-        return _visuallyHidden.visuallyHidden;
-      }
-      return {
-        position: 'absolute',
-        [startEdge]: `${thumbValuePercent}%`,
-        [crossOffsetProperty]: '50%',
-        translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
-        zIndex
-      };
-    }
-    return {
+  } else if (activeIndex === index) {
+    zIndex = 1;
+  }
+  let thumbStyle;
+  if (inset) {
+    thumbStyle = {
       ['--position']: `${positionPercent ?? 0}%`,
       visibility: renderBeforeHydration && isHydrating || positionPercent === undefined ? 'hidden' : undefined,
       position: 'absolute',
@@ -225,7 +219,15 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
       translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
       zIndex
     };
-  }, [activeIndex, index, inset, isHydrating, positionPercent, range, renderBeforeHydration, rtl, safeLastUsedThumbIndex, thumbValuePercent, vertical]);
+  } else {
+    thumbStyle = !Number.isFinite(thumbValuePercent) ? _visuallyHidden.visuallyHidden : {
+      position: 'absolute',
+      [startEdge]: `${thumbValuePercent}%`,
+      [crossOffsetProperty]: '50%',
+      translate: `${(vertical || !rtl ? -1 : 1) * 50}% ${(vertical ? 1 : -1) * 50}%`,
+      zIndex
+    };
+  }
   let cssWritingMode;
   if (orientation === 'vertical') {
     cssWritingMode = rtl ? 'vertical-rl' : 'vertical-lr';
@@ -381,7 +383,7 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
           pressedInputRef.current = inputRef.current;
         }
       },
-      style: getThumbStyle(),
+      style: thumbStyle,
       suppressHydrationWarning: renderBeforeHydration || undefined
     }, elementProps],
     stateAttributesMapping: _stateAttributesMapping.sliderStateAttributesMapping

package/slider/value/SliderValue.js

@@ -33,15 +33,13 @@ const SliderValue = exports.SliderValue = /*#__PURE__*/React.forwardRef(function
     formatOptionsRef,
     locale
   } = (0, _SliderRootContext.useSliderRootContext)();
-  const outputFor = React.useMemo(() => {
-    let htmlFor = '';
-    for (const thumbMetadata of thumbMap.values()) {
-      if (thumbMetadata?.inputId) {
-        htmlFor += `${thumbMetadata.inputId} `;
-      }
+  let htmlFor = '';
+  for (const thumbMetadata of thumbMap.values()) {
+    if (thumbMetadata?.inputId) {
+      htmlFor += `${thumbMetadata.inputId} `;
     }
-    return htmlFor.trim() === '' ? undefined : htmlFor.trim();
-  }, [thumbMap]);
+  }
+  const outputFor = htmlFor.trim() === '' ? undefined : htmlFor.trim();
   const formattedValues = React.useMemo(() => {
     const arr = [];
     for (let i = 0; i < values.length; i += 1) {
@@ -49,13 +47,7 @@ const SliderValue = exports.SliderValue = /*#__PURE__*/React.forwardRef(function
     }
     return arr;
   }, [formatOptionsRef, locale, values]);
-  const defaultDisplayValue = React.useMemo(() => {
-    const arr = [];
-    for (let i = 0; i < values.length; i += 1) {
-      arr.push(formattedValues[i] || values[i]);
-    }
-    return arr.join(' – ');
-  }, [values, formattedValues]);
+  const defaultDisplayValue = values.map((v, i) => formattedValues[i] || v).join(' – ');
   const element = (0, _useRenderElement.useRenderElement)('output', componentProps, {
     state,
     ref: forwardedRef,

package/switch/root/SwitchRoot.js

@@ -8,11 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.SwitchRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useControlled = require("@base-ui/utils/useControlled");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _empty = require("@base-ui/utils/empty");
+var _owner = require("@base-ui/utils/owner");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _mergeProps = require("../../merge-props");
 var _useBaseUiId = require("../../internals/useBaseUiId");
@@ -46,7 +46,7 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     inputRef: externalInputRef,
     name: nameProp,
     nativeButton = false,
-    onCheckedChange: onCheckedChangeProp,
+    onCheckedChange,
     readOnly = false,
     required = false,
     disabled: disabledProp = false,
@@ -77,7 +77,6 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
   } = (0, _LabelableContext.useLabelableContext)();
   const disabled = fieldDisabled || disabledProp;
   const name = fieldName ?? nameProp;
-  const onCheckedChange = (0, _useStableCallback.useStableCallback)(onCheckedChangeProp);
   const inputRef = React.useRef(null);
   const handleInputRef = (0, _useMergedRefs.useMergedRefs)(inputRef, externalInputRef, validation.inputRef);
   const switchRef = React.useRef(null);
@@ -94,10 +93,7 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     name: 'Switch',
     state: 'checked'
   });
-  (0, _useRegisterFieldControl.useRegisterFieldControl)(switchRef, {
-    id,
-    value: checked
-  });
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(switchRef, id, checked);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (inputRef.current) {
       setFilled(inputRef.current.checked);
@@ -149,7 +145,11 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
         return;
       }
       event.preventDefault();
-      inputRef.current?.dispatchEvent(new PointerEvent('click', {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.dispatchEvent(new ((0, _owner.ownerWindow)(input).PointerEvent)('click', {
         bubbles: true,
         shiftKey: event.shiftKey,
         ctrlKey: event.ctrlKey,
@@ -158,7 +158,7 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
       }));
     }
   };
-  const inputProps = React.useMemo(() => (0, _mergeProps.mergeProps)({
+  const inputProps = (0, _mergeProps.mergeProps)({
     checked,
     disabled,
     form,
@@ -195,7 +195,7 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
   // To avoid this, we only set the value if it's defined
   value !== undefined ? {
     value
-  } : _empty.EMPTY_OBJECT), [checked, disabled, form, handleInputRef, hiddenInputId, name, onCheckedChange, readOnly, required, setCheckedState, validation, value]);
+  } : _empty.EMPTY_OBJECT);
   const state = React.useMemo(() => ({
     ...fieldState,
     checked,

package/switch/thumb/SwitchThumb.js

@@ -9,7 +9,6 @@ exports.SwitchThumb = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _SwitchRootContext = require("../root/SwitchRootContext");
 var _useRenderElement = require("../../internals/useRenderElement");
-var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
 var _stateAttributesMapping = require("../stateAttributesMapping");
 /**
  * The movable part of the switch that indicates whether the switch is on or off.
@@ -24,16 +23,9 @@ const SwitchThumb = exports.SwitchThumb = /*#__PURE__*/React.forwardRef(function
     style,
     ...elementProps
   } = componentProps;
-  const {
-    state: fieldState
-  } = (0, _FieldRootContext.useFieldRootContext)();
   const state = (0, _SwitchRootContext.useSwitchRootContext)();
-  const extendedState = {
-    ...fieldState,
-    ...state
-  };
   return (0, _useRenderElement.useRenderElement)('span', componentProps, {
-    state: extendedState,
+    state,
     ref: forwardedRef,
     stateAttributesMapping: _stateAttributesMapping.stateAttributesMapping,
     props: elementProps

package/tabs/indicator/TabsIndicator.js

@@ -16,7 +16,7 @@ var _stateAttributesMapping = require("../root/stateAttributesMapping");
 var _TabsListContext = require("../list/TabsListContext");
 var _prehydrationScript = require("./prehydrationScript.min");
 var _TabsIndicatorCssVars = require("./TabsIndicatorCssVars");
-var _CSPContext = require("../../csp-provider/CSPContext");
+var _CSPContext = require("../../internals/csp-context/CSPContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._stateAttributesMapping.tabsStateAttributesMapping,
@@ -30,7 +30,7 @@ const stateAttributesMapping = {
  *
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
-const TabsIndicator = exports.TabsIndicator = /*#__PURE__*/React.forwardRef(function TabIndicator(componentProps, forwardedRef) {
+const TabsIndicator = exports.TabsIndicator = /*#__PURE__*/React.forwardRef(function TabsIndicator(componentProps, forwardedRef) {
   const {
     className,
     render,
@@ -95,29 +95,24 @@ const TabsIndicator = exports.TabsIndicator = /*#__PURE__*/React.forwardRef(func
       bottom = tabsListElement.scrollHeight - top - height;
     }
   }
-  const activeTabPosition = React.useMemo(() => isTabSelected ? {
+  const activeTabPosition = isTabSelected ? {
     left,
     right,
     top,
     bottom
-  } : null, [left, right, top, bottom, isTabSelected]);
-  const activeTabSize = React.useMemo(() => isTabSelected ? {
+  } : null;
+  const activeTabSize = isTabSelected ? {
     width,
     height
-  } : null, [width, height, isTabSelected]);
-  const style = React.useMemo(() => {
-    if (!isTabSelected) {
-      return undefined;
-    }
-    return {
-      [_TabsIndicatorCssVars.TabsIndicatorCssVars.activeTabLeft]: `${left}px`,
-      [_TabsIndicatorCssVars.TabsIndicatorCssVars.activeTabRight]: `${right}px`,
-      [_TabsIndicatorCssVars.TabsIndicatorCssVars.activeTabTop]: `${top}px`,
-      [_TabsIndicatorCssVars.TabsIndicatorCssVars.activeTabBottom]: `${bottom}px`,
-      [_TabsIndicatorCssVars.TabsIndicatorCssVars.activeTabWidth]: `${width}px`,
-      [_TabsIndicatorCssVars.TabsIndicatorCssVars.activeTabHeight]: `${height}px`
-    };
-  }, [left, right, top, bottom, width, height, isTabSelected]);
+  } : null;
+  const style = isTabSelected ? {
+    [_TabsIndicatorCssVars.TabsIndicatorCssVars.activeTabLeft]: `${left}px`,
+    [_TabsIndicatorCssVars.TabsIndicatorCssVars.activeTabRight]: `${right}px`,
+    [_TabsIndicatorCssVars.TabsIndicatorCssVars.activeTabTop]: `${top}px`,
+    [_TabsIndicatorCssVars.TabsIndicatorCssVars.activeTabBottom]: `${bottom}px`,
+    [_TabsIndicatorCssVars.TabsIndicatorCssVars.activeTabWidth]: `${width}px`,
+    [_TabsIndicatorCssVars.TabsIndicatorCssVars.activeTabHeight]: `${height}px`
+  } : undefined;
   const displayIndicator = isTabSelected && width > 0 && height > 0;
   const state = {
     orientation,

package/tabs/list/TabsList.js

@@ -41,20 +41,14 @@ const TabsList = exports.TabsList = /*#__PURE__*/React.forwardRef(function TabsL
   const indicatorUpdateListenersRef = React.useRef(new Set());
   const tabResizeObserverElementsRef = React.useRef(new Set());
   const resizeObserverRef = React.useRef(null);
-  const notifyIndicatorUpdateListeners = (0, _useStableCallback.useStableCallback)(() => {
-    indicatorUpdateListenersRef.current.forEach(listener => {
-      listener();
-    });
-  });
   React.useEffect(() => {
     if (typeof ResizeObserver === 'undefined') {
       return undefined;
     }
     const resizeObserver = new ResizeObserver(() => {
-      if (!indicatorUpdateListenersRef.current.size) {
-        return;
-      }
-      notifyIndicatorUpdateListeners();
+      indicatorUpdateListenersRef.current.forEach(listener => {
+        listener();
+      });
     });
     resizeObserverRef.current = resizeObserver;
     if (tabsListElement) {
@@ -67,7 +61,7 @@ const TabsList = exports.TabsList = /*#__PURE__*/React.forwardRef(function TabsL
       resizeObserver.disconnect();
       resizeObserverRef.current = null;
     };
-  }, [tabsListElement, notifyIndicatorUpdateListeners]);
+  }, [tabsListElement]);
   const registerIndicatorUpdateListener = (0, _useStableCallback.useStableCallback)(listener => {
     indicatorUpdateListenersRef.current.add(listener);
     return () => {

package/tabs/list/TabsListContext.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import type { TabsRoot } from "../root/TabsRoot.js";
+import type { TabsTab } from "../tab/TabsTab.js";
 export interface TabsListContext {
   activateOnFocus: boolean;
   highlightedTabIndex: number;
   registerIndicatorUpdateListener: (listener: () => void) => () => void;
   registerTabResizeObserverElement: (element: HTMLElement) => () => void;
-  onTabActivation: (newValue: any, eventDetails: TabsRoot.ChangeEventDetails) => void;
+  onTabActivation: (newValue: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) => void;
   setHighlightedTabIndex: (index: number) => void;
   tabsListElement: HTMLElement | null;
 }

package/tabs/panel/TabsPanel.js

@@ -29,7 +29,7 @@ const stateAttributesMapping = {
  *
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
-const TabsPanel = exports.TabsPanel = /*#__PURE__*/React.forwardRef(function TabPanel(componentProps, forwardedRef) {
+const TabsPanel = exports.TabsPanel = /*#__PURE__*/React.forwardRef(function TabsPanel(componentProps, forwardedRef) {
   const {
     className,
     value,

package/tabs/root/TabsRoot.d.ts

@@ -40,10 +40,25 @@ export interface TabsRootProps extends BaseUIComponentProps<'div', TabsRootState
   orientation?: TabsRoot.Orientation | undefined;
   /**
    * Callback invoked when new value is being set.
+   *
+   * The event `reason` is `'none'` for user-initiated changes, such as a click
+   * or keyboard navigation; `'initial'` for the first automatic selection or
+   * fallback in uncontrolled roots when `defaultValue` is omitted or
+   * `undefined`, including when the implicit initial value is disabled or
+   * missing; `'disabled'` for automatic fallback when the selected tab becomes
+   * disabled in uncontrolled roots; or `'missing'` for automatic fallback when
+   * the selected tab is removed, or when an explicit `defaultValue` never
+   * matches a mounted tab in uncontrolled roots.
+   *
+   * For automatic changes, the selected value can be `null` when no enabled Tab
+   * is available as a fallback.
+   *
+   * Automatic changes cannot be canceled; calling `eventDetails.cancel()` for
+   * `'initial'`, `'disabled'`, or `'missing'` has no effect.
    */
   onValueChange?: ((value: TabsTab.Value, eventDetails: TabsRoot.ChangeEventDetails) => void) | undefined;
 }
-export type TabsRootChangeEventReason = typeof REASONS.none;
+export type TabsRootChangeEventReason = typeof REASONS.none | typeof REASONS.disabled | typeof REASONS.missing | typeof REASONS.initial;
 export type TabsRootChangeEventDetails = BaseUIChangeEventDetails<TabsRoot.ChangeEventReason, {
   activationDirection: TabsTab.ActivationDirection;
 }>;