@base-ui/react 1.0.0 → 1.1.0

package/select/trigger/SelectTrigger.js

@@ -26,7 +26,10 @@ var _mergeProps = require("../../merge-props");
 var _useButton = require("../../use-button");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
+var _useLabelableId = require("../../labelable-provider/useLabelableId");
 const BOUNDARY_OFFSET = 2;
+const SELECTED_DELAY = 400;
+const UNSELECTED_DELAY = 200;
 const stateAttributesMapping = {
   ..._popupStateMapping.pressableTriggerOpenStateMapping,
   ..._constants.fieldValidityMapping,
@@ -43,6 +46,7 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
   const {
     render,
     className,
+    id: idProp,
     disabled: disabledProp = false,
     nativeButton = true,
     ...elementProps
@@ -63,6 +67,7 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
     selectionRef,
     validation,
     readOnly,
+    required,
     alignItemWithTriggerActiveRef,
     disabled: selectDisabled,
     keyboardActiveRef
@@ -73,11 +78,16 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
   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 serializedValue = (0, _store.useStore)(store, _store2.selectors.serializedValue);
+  const rootId = (0, _store.useStore)(store, _store2.selectors.id);
+  const hasSelectedValue = (0, _store.useStore)(store, _store2.selectors.hasSelectedValue);
+  const shouldCheckNullItemLabel = !hasSelectedValue && open;
+  const hasNullItemLabel = (0, _store.useStore)(store, _store2.selectors.hasNullItemLabel, shouldCheckNullItemLabel);
+  const id = idProp ?? rootId;
+  (0, _useLabelableId.useLabelableId)({
+    id
+  });
   const positionerRef = (0, _useValueAsRef.useValueAsRef)(positionerElement);
   const triggerRef = React.useRef(null);
-  const timeoutFocus = (0, _useTimeout.useTimeout)();
-  const timeoutMouseDown = (0, _useTimeout.useTimeout)();
   const {
     getButtonProps,
     buttonRef
@@ -89,22 +99,37 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
     store.set('triggerElement', element);
   });
   const mergedRef = (0, _useMergedRefs.useMergedRefs)(forwardedRef, triggerRef, buttonRef, setTriggerElement);
-  const timeout1 = (0, _useTimeout.useTimeout)();
-  const timeout2 = (0, _useTimeout.useTimeout)();
+  const timeoutFocus = (0, _useTimeout.useTimeout)();
+  const timeoutMouseDown = (0, _useTimeout.useTimeout)();
+  const selectedDelayTimeout = (0, _useTimeout.useTimeout)();
+  const unselectedDelayTimeout = (0, _useTimeout.useTimeout)();
   React.useEffect(() => {
     if (open) {
-      // mousedown -> move to unselected item -> mouseup should not select within 200ms.
-      timeout2.start(200, () => {
-        selectionRef.current.allowUnselectedMouseUp = true;
+      const hasSelectedItemInList = hasSelectedValue || hasNullItemLabel;
+      const shouldDelayUnselectedMouseUpLonger = !hasSelectedItemInList;
 
-        // mousedown -> mouseup on selected item should not select within 400ms.
-        timeout1.start(200, () => {
+      // 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;
+          });
+        });
+      }
       return () => {
-        timeout1.clear();
-        timeout2.clear();
+        selectedDelayTimeout.clear();
+        unselectedDelayTimeout.clear();
       };
     }
     selectionRef.current = {
@@ -113,24 +138,27 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
     };
     timeoutMouseDown.clear();
     return undefined;
-  }, [open, selectionRef, timeoutMouseDown, timeout1, timeout2]);
+  }, [open, hasSelectedValue, hasNullItemLabel, selectionRef, timeoutMouseDown, selectedDelayTimeout, unselectedDelayTimeout]);
   const ariaControlsId = React.useMemo(() => {
     return listElement?.id ?? (0, _utils.getFloatingFocusElement)(positionerElement)?.id;
   }, [listElement, positionerElement]);
   const props = (0, _mergeProps.mergeProps)(triggerProps, {
+    id,
     role: 'combobox',
     'aria-expanded': open ? 'true' : 'false',
     'aria-haspopup': 'listbox',
     'aria-controls': open ? ariaControlsId : undefined,
     'aria-labelledby': labelId,
     'aria-readonly': readOnly || undefined,
+    'aria-required': required || undefined,
     tabIndex: disabled ? -1 : 0,
     ref: mergedRef,
     onFocus(event) {
       setFocused(true);
+
       // The popup element shouldn't obscure the focused trigger.
       if (open && alignItemWithTriggerActiveRef.current) {
-        setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent));
+        setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent));
       }
 
       // Saves a re-render on initial click: `forceMount === true` mounts
@@ -142,7 +170,11 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
         store.set('forceMount', true);
       });
     },
-    onBlur() {
+    onBlur(event) {
+      // If focus is moving into the popup, don't count it as a blur.
+      if ((0, _utils.contains)(positionerElement, event.relatedTarget)) {
+        return;
+      }
       setTouched(true);
       setFocused(false);
       if (validationMode === 'onBlur') {
@@ -195,8 +227,8 @@ const SelectTrigger = exports.SelectTrigger = /*#__PURE__*/React.forwardRef(func
     disabled,
     value,
     readOnly,
-    placeholder: !serializedValue
-  }), [fieldState, open, disabled, value, readOnly, serializedValue]);
+    placeholder: !hasSelectedValue
+  }), [fieldState, open, disabled, value, readOnly, hasSelectedValue]);
   return (0, _useRenderElement.useRenderElement)('button', componentProps, {
     ref: [forwardedRef, triggerRef],
     state,

package/select/value/SelectValue.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Select](https://base-ui.com/react/components/select)
  */
-export declare const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const SelectValue: React.ForwardRefExoticComponent<Omit<SelectValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface SelectValueState {
   /**
    * The value of the currently selected item.
@@ -24,6 +24,11 @@ export interface SelectValueProps extends Omit<BaseUIComponentProps<'span', Sele
    * ```
    */
   children?: React.ReactNode | ((value: any) => React.ReactNode);
+  /**
+   * The placeholder value to display when no value is selected.
+   * This is overridden by `children` if specified, or by a null item's label in `items`.
+   */
+  placeholder?: React.ReactNode;
 }
 export declare namespace SelectValue {
   type State = SelectValueState;

package/select/value/SelectValue.js

@@ -27,6 +27,7 @@ const SelectValue = exports.SelectValue = /*#__PURE__*/React.forwardRef(function
     className,
     render,
     children: childrenProp,
+    placeholder,
     ...elementProps
   } = componentProps;
   const {
@@ -36,12 +37,25 @@ const SelectValue = exports.SelectValue = /*#__PURE__*/React.forwardRef(function
   const value = (0, _store.useStore)(store, _store2.selectors.value);
   const items = (0, _store.useStore)(store, _store2.selectors.items);
   const itemToStringLabel = (0, _store.useStore)(store, _store2.selectors.itemToStringLabel);
-  const serializedValue = (0, _store.useStore)(store, _store2.selectors.serializedValue);
+  const hasSelectedValue = (0, _store.useStore)(store, _store2.selectors.hasSelectedValue);
+  const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
+  const hasNullLabel = (0, _store.useStore)(store, _store2.selectors.hasNullItemLabel, shouldCheckNullItemLabel);
   const state = React.useMemo(() => ({
     value,
-    placeholder: !serializedValue
-  }), [value, serializedValue]);
-  const children = typeof childrenProp === 'function' ? childrenProp(value) : childrenProp ?? (Array.isArray(value) ? (0, _resolveValueLabel.resolveMultipleLabels)(value, itemToStringLabel) : (0, _resolveValueLabel.resolveSelectedLabel)(value, items, itemToStringLabel));
+    placeholder: !hasSelectedValue
+  }), [value, hasSelectedValue]);
+  let children = null;
+  if (typeof childrenProp === 'function') {
+    children = childrenProp(value);
+  } else if (childrenProp != null) {
+    children = childrenProp;
+  } else if (!hasSelectedValue && placeholder != null && !hasNullLabel) {
+    children = placeholder;
+  } else if (Array.isArray(value)) {
+    children = (0, _resolveValueLabel.resolveMultipleLabels)(value, items, itemToStringLabel);
+  } else {
+    children = (0, _resolveValueLabel.resolveSelectedLabel)(value, items, itemToStringLabel);
+  }
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     state,
     ref: [forwardedRef, valueRef],

package/separator/Separator.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps, Orientation } from "../utils/types.js";
  *
  * Documentation: [Base UI Separator](https://base-ui.com/react/components/separator)
  */
-export declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SeparatorProps extends BaseUIComponentProps<'div', Separator.State> {
   /**
    * The orientation of the separator.

package/slider/control/SliderControl.d.ts

@@ -7,7 +7,7 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-export declare const SliderControl: React.ForwardRefExoticComponent<SliderControlProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SliderControl: React.ForwardRefExoticComponent<Omit<SliderControlProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SliderControlProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
 export declare namespace SliderControl {
   type State = SliderRoot.State;

package/slider/control/SliderControl.js

@@ -273,7 +273,6 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
     setDragging(false);
     pressedInputRef.current = null;
     pressedThumbCenterOffsetRef.current = null;
-    pressedThumbIndexRef.current = -1;
     const fingerCoords = getFingerCoords(nativeEvent, touchIdRef);
     const finger = fingerCoords != null ? getFingerState(fingerCoords) : null;
     if (finger != null) {
@@ -284,6 +283,7 @@ const SliderControl = exports.SliderControl = /*#__PURE__*/React.forwardRef(func
     if ('pointerType' in nativeEvent && controlRef.current?.hasPointerCapture(nativeEvent.pointerId)) {
       controlRef.current?.releasePointerCapture(nativeEvent.pointerId);
     }
+    pressedThumbIndexRef.current = -1;
     touchIdRef.current = null;
     pressedValuesRef.current = null;
     // eslint-disable-next-line @typescript-eslint/no-use-before-define

package/slider/control/SliderControlDataAttributes.d.ts

@@ -12,14 +12,6 @@ export declare enum SliderControlDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/control/SliderControlDataAttributes.js

@@ -18,14 +18,6 @@ let SliderControlDataAttributes = exports.SliderControlDataAttributes = /*#__PUR
    * Present when the slider is disabled.
    */
   SliderControlDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderControlDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderControlDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/indicator/SliderIndicator.d.ts

@@ -7,7 +7,7 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-export declare const SliderIndicator: React.ForwardRefExoticComponent<SliderIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SliderIndicator: React.ForwardRefExoticComponent<Omit<SliderIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SliderIndicatorProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
 export declare namespace SliderIndicator {
   type Props = SliderIndicatorProps;

package/slider/indicator/SliderIndicatorDataAttributes.d.ts

@@ -12,14 +12,6 @@ export declare enum SliderIndicatorDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/indicator/SliderIndicatorDataAttributes.js

@@ -18,14 +18,6 @@ let SliderIndicatorDataAttributes = exports.SliderIndicatorDataAttributes = /*#_
    * Present when the slider is disabled.
    */
   SliderIndicatorDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderIndicatorDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderIndicatorDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/root/SliderRootDataAttributes.d.ts

@@ -12,14 +12,6 @@ export declare enum SliderRootDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/root/SliderRootDataAttributes.js

@@ -18,14 +18,6 @@ let SliderRootDataAttributes = exports.SliderRootDataAttributes = /*#__PURE__*/f
    * Present when the slider is disabled.
    */
   SliderRootDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderRootDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderRootDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/thumb/SliderThumb.d.ts

@@ -3,12 +3,12 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 import { type LabelableContext } from "../../labelable-provider/LabelableContext.js";
 import type { SliderRoot } from "../root/SliderRoot.js";
 /**
- * The draggable part of the the slider at the tip of the indicator.
+ * The draggable part of the slider at the tip of the indicator.
  * Renders a `<div>` element and a nested `<input type="range">`.
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-export declare const SliderThumb: React.ForwardRefExoticComponent<SliderThumbProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SliderThumb: React.ForwardRefExoticComponent<Omit<SliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ThumbMetadata {
   inputId: LabelableContext['controlId'];
 }

package/slider/thumb/SliderThumb.js

@@ -20,6 +20,7 @@ var _valueToPercent = require("../../utils/valueToPercent");
 var _composite = require("../../composite/composite");
 var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
 var _DirectionContext = require("../../direction-provider/DirectionContext");
+var _CSPContext = require("../../csp-provider/CSPContext");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _getMidpoint = require("../utils/getMidpoint");
@@ -50,7 +51,7 @@ function getNewValue(thumbValue, step, direction, min, max) {
 }
 
 /**
- * The draggable part of the the slider at the tip of the indicator.
+ * The draggable part of the slider at the tip of the indicator.
  * Renders a `<div>` element and a nested `<input type="range">`.
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
@@ -75,6 +76,9 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
     tabIndex: tabIndexProp,
     ...elementProps
   } = componentProps;
+  const {
+    nonce
+  } = (0, _CSPContext.useCSPContext)();
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const {
     active: activeIndex,
@@ -309,7 +313,9 @@ const SliderThumb = exports.SliderThumb = /*#__PURE__*/React.forwardRef(function
         // this must be rendered with the last thumb to ensure all
         // preceding thumbs are already rendered in the DOM
         last && /*#__PURE__*/(0, _jsxRuntime.jsx)("script", {
+          nonce: nonce
           // eslint-disable-next-line react/no-danger
+          ,
           dangerouslySetInnerHTML: {
             __html: _prehydrationScript.script
           },

package/slider/thumb/SliderThumbDataAttributes.d.ts

@@ -16,14 +16,6 @@ export declare enum SliderThumbDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/thumb/SliderThumbDataAttributes.js

@@ -22,14 +22,6 @@ let SliderThumbDataAttributes = exports.SliderThumbDataAttributes = /*#__PURE__*
    * Present when the slider is disabled.
    */
   SliderThumbDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderThumbDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderThumbDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/track/SliderTrack.d.ts

@@ -7,7 +7,7 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-export declare const SliderTrack: React.ForwardRefExoticComponent<SliderTrackProps & React.RefAttributes<HTMLElement>>;
+export declare const SliderTrack: React.ForwardRefExoticComponent<Omit<SliderTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface SliderTrackProps extends BaseUIComponentProps<'div', SliderRoot.State> {}
 export declare namespace SliderTrack {
   type Props = SliderTrackProps;

package/slider/track/SliderTrackDataAttributes.d.ts

@@ -12,14 +12,6 @@ export declare enum SliderTrackDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/track/SliderTrackDataAttributes.js

@@ -18,14 +18,6 @@ let SliderTrackDataAttributes = exports.SliderTrackDataAttributes = /*#__PURE__*
    * Present when the slider is disabled.
    */
   SliderTrackDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderTrackDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderTrackDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/value/SliderValue.d.ts

@@ -7,7 +7,7 @@ import type { SliderRoot } from "../root/SliderRoot.js";
  *
  * Documentation: [Base UI Slider](https://base-ui.com/react/components/slider)
  */
-export declare const SliderValue: React.ForwardRefExoticComponent<SliderValueProps & React.RefAttributes<HTMLOutputElement>>;
+export declare const SliderValue: React.ForwardRefExoticComponent<Omit<SliderValueProps, "ref"> & React.RefAttributes<HTMLOutputElement>>;
 export interface SliderValueProps extends Omit<BaseUIComponentProps<'output', SliderRoot.State>, 'children'> {
   children?: null | ((formattedValues: readonly string[], values: readonly number[]) => React.ReactNode);
 }

package/slider/value/SliderValueDataAttributes.d.ts

@@ -12,14 +12,6 @@ export declare enum SliderValueDataAttributes {
    * Present when the slider is disabled.
    */
   disabled = "data-disabled",
-  /**
-   * Present when the slider is readonly.
-   */
-  readonly = "data-readonly",
-  /**
-   * Present when the slider is required.
-   */
-  required = "data-required",
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/slider/value/SliderValueDataAttributes.js

@@ -18,14 +18,6 @@ let SliderValueDataAttributes = exports.SliderValueDataAttributes = /*#__PURE__*
    * Present when the slider is disabled.
    */
   SliderValueDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the slider is readonly.
-   */
-  SliderValueDataAttributes["readonly"] = "data-readonly";
-  /**
-   * Present when the slider is required.
-   */
-  SliderValueDataAttributes["required"] = "data-required";
   /**
    * Present when the slider is in valid state (when wrapped in Field.Root).
    */

package/switch/root/SwitchRoot.d.ts

@@ -9,7 +9,7 @@ import type { BaseUIChangeEventDetails } from "../../types/index.js";
  *
  * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)
  */
-export declare const SwitchRoot: React.ForwardRefExoticComponent<SwitchRootProps & React.RefAttributes<HTMLElement>>;
+export declare const SwitchRoot: React.ForwardRefExoticComponent<Omit<SwitchRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export interface SwitchRootState extends FieldRoot.State {
   /**
    * Whether the switch is currently active.
@@ -73,6 +73,11 @@ export interface SwitchRootProps extends NonNativeButtonProps, Omit<BaseUICompon
    * @default false
    */
   required?: boolean;
+  /**
+   * The value submitted with the form when the switch is on.
+   * By default, switch submits the "on" value, matching native checkbox behavior.
+   */
+  value?: string;
   /**
    * The value submitted with the form when the switch is off.
    * By default, unchecked switches do not submit any value, matching native checkbox behavior.

package/switch/root/SwitchRoot.js

@@ -12,6 +12,7 @@ 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 _useRenderElement = require("../../utils/useRenderElement");
 var _mergeProps = require("../../merge-props");
 var _useBaseUiId = require("../../utils/useBaseUiId");
@@ -48,6 +49,7 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     disabled: disabledProp = false,
     render,
     uncheckedValue,
+    value,
     ...elementProps
   } = componentProps;
   const {
@@ -76,11 +78,12 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
   const handleInputRef = (0, _useMergedRefs.useMergedRefs)(inputRef, externalInputRef, validation.inputRef);
   const switchRef = React.useRef(null);
   const id = (0, _useBaseUiId.useBaseUiId)();
-  const inputId = (0, _useLabelableId.useLabelableId)({
+  const controlId = (0, _useLabelableId.useLabelableId)({
     id: idProp,
     implicit: false,
     controlRef: switchRef
   });
+  const hiddenInputId = nativeButton ? undefined : controlId;
   const [checked, setCheckedState] = (0, _useControlled.useControlled)({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
@@ -118,10 +121,11 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     native: nativeButton
   });
   const rootProps = {
-    id,
+    id: nativeButton ? controlId : id,
     role: 'switch',
     'aria-checked': checked,
     'aria-readonly': readOnly || undefined,
+    'aria-required': required || undefined,
     'aria-labelledby': labelId,
     onFocus() {
       if (!disabled) {
@@ -150,10 +154,10 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
   const inputProps = React.useMemo(() => (0, _mergeProps.mergeProps)({
     checked,
     disabled,
-    id: inputId,
+    id: hiddenInputId,
     name,
     required,
-    style: _visuallyHidden.visuallyHidden,
+    style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
     tabIndex: -1,
     type: 'checkbox',
     'aria-hidden': true,
@@ -174,7 +178,12 @@ const SwitchRoot = exports.SwitchRoot = /*#__PURE__*/React.forwardRef(function S
     onFocus() {
       switchRef.current?.focus();
     }
-  }, validation.getInputValidationProps), [checked, disabled, handleInputRef, inputId, name, onCheckedChange, required, setCheckedState, validation]);
+  }, validation.getInputValidationProps,
+  // React <19 sets an empty value if `undefined` is passed explicitly
+  // To avoid this, we only set the value if it's defined
+  value !== undefined ? {
+    value
+  } : _empty.EMPTY_OBJECT), [checked, disabled, handleInputRef, hiddenInputId, name, onCheckedChange, required, setCheckedState, validation, value]);
   const state = React.useMemo(() => ({
     ...fieldState,
     checked,

package/switch/thumb/SwitchThumb.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Switch](https://base-ui.com/react/components/switch)
  */
-export declare const SwitchThumb: React.ForwardRefExoticComponent<SwitchThumbProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const SwitchThumb: React.ForwardRefExoticComponent<Omit<SwitchThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface SwitchThumbProps extends BaseUIComponentProps<'span', SwitchThumb.State> {}
 export interface SwitchThumbState extends SwitchRoot.State {}
 export declare namespace SwitchThumb {

package/tabs/indicator/TabsIndicator.d.ts

@@ -8,7 +8,7 @@ import type { TabsTab } from "../tab/TabsTab.js";
  *
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
-export declare const TabsIndicator: React.ForwardRefExoticComponent<TabsIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const TabsIndicator: React.ForwardRefExoticComponent<Omit<TabsIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface TabsIndicatorState extends TabsRoot.State {
   activeTabPosition: TabsTab.Position | null;
   activeTabSize: TabsTab.Size | null;