@base-ui/react 1.0.0 → 1.2.0

package/preview-card/viewport/PreviewCardViewportDataAttributes.d.ts

@@ -0,0 +1,26 @@
+export declare enum PreviewCardViewportDataAttributes {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  current = "data-current",
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  previous = "data-previous",
+  /**
+   * Indicates the direction from which the popup was activated.
+   * This can be used to create directional animations based on how the popup was triggered.
+   * Contains space-separated values for both horizontal and vertical axes.
+   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   */
+  activationDirection = "data-activation-direction",
+  /**
+   * Indicates that the viewport is currently transitioning between old and new content.
+   */
+  transitioning = "data-transitioning",
+  /**
+   * Present if animations should be instant.
+   * @type {'delay' | 'dismiss' | 'focus'}
+   */
+  instant = "data-instant",
+}

package/preview-card/viewport/PreviewCardViewportDataAttributes.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewCardViewportDataAttributes = void 0;
+let PreviewCardViewportDataAttributes = exports.PreviewCardViewportDataAttributes = /*#__PURE__*/function (PreviewCardViewportDataAttributes) {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  PreviewCardViewportDataAttributes["current"] = "data-current";
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  PreviewCardViewportDataAttributes["previous"] = "data-previous";
+  /**
+   * Indicates the direction from which the popup was activated.
+   * This can be used to create directional animations based on how the popup was triggered.
+   * Contains space-separated values for both horizontal and vertical axes.
+   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   */
+  PreviewCardViewportDataAttributes["activationDirection"] = "data-activation-direction";
+  /**
+   * Indicates that the viewport is currently transitioning between old and new content.
+   */
+  PreviewCardViewportDataAttributes["transitioning"] = "data-transitioning";
+  /**
+   * Present if animations should be instant.
+   * @type {'delay' | 'dismiss' | 'focus'}
+   */
+  PreviewCardViewportDataAttributes["instant"] = "data-instant";
+  return PreviewCardViewportDataAttributes;
+}({});

package/progress/indicator/ProgressIndicator.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
-export declare const ProgressIndicator: React.ForwardRefExoticComponent<ProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ProgressIndicator: React.ForwardRefExoticComponent<Omit<ProgressIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ProgressIndicatorProps extends BaseUIComponentProps<'div', ProgressRoot.State> {}
 export declare namespace ProgressIndicator {
   type Props = ProgressIndicatorProps;

package/progress/label/ProgressLabel.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
-export declare const ProgressLabel: React.ForwardRefExoticComponent<ProgressLabelProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const ProgressLabel: React.ForwardRefExoticComponent<Omit<ProgressLabelProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface ProgressLabelProps extends BaseUIComponentProps<'span', ProgressRoot.State> {}
 export declare namespace ProgressLabel {
   type Props = ProgressLabelProps;

package/progress/root/ProgressRoot.d.ts

@@ -6,7 +6,7 @@ import { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
-export declare const ProgressRoot: React.ForwardRefExoticComponent<ProgressRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ProgressRoot: React.ForwardRefExoticComponent<Omit<ProgressRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete';
 export interface ProgressRootState {
   status: ProgressStatus;
@@ -15,30 +15,30 @@ export interface ProgressRootProps extends BaseUIComponentProps<'div', ProgressR
   /**
    * A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
    */
-  'aria-valuetext'?: React.AriaAttributes['aria-valuetext'];
+  'aria-valuetext'?: React.AriaAttributes['aria-valuetext'] | undefined;
   /**
    * Options to format the value.
    */
-  format?: Intl.NumberFormatOptions;
+  format?: Intl.NumberFormatOptions | undefined;
   /**
    * Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.
    */
-  getAriaValueText?: (formattedValue: string | null, value: number | null) => string;
+  getAriaValueText?: ((formattedValue: string | null, value: number | null) => string) | undefined;
   /**
    * The locale used by `Intl.NumberFormat` when formatting the value.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * The maximum value.
    * @default 100
    */
-  max?: number;
+  max?: number | undefined;
   /**
    * The minimum value.
    * @default 0
    */
-  min?: number;
+  min?: number | undefined;
   /**
    * The current value. The component is indeterminate when value is `null`.
    * @default null

package/progress/root/ProgressRoot.js

@@ -13,17 +13,6 @@ var _useRenderElement = require("../../utils/useRenderElement");
 var _ProgressRootContext = require("./ProgressRootContext");
 var _stateAttributesMapping = require("./stateAttributesMapping");
 var _jsxRuntime = require("react/jsx-runtime");
-function formatValue(value, locale, format) {
-  if (value == null) {
-    return '';
-  }
-  if (!format) {
-    return (0, _formatNumber.formatNumber)(value / 100, locale, {
-      style: 'percent'
-    });
-  }
-  return (0, _formatNumber.formatNumber)(value, locale, format);
-}
 function getDefaultAriaValueText(formattedValue, value) {
   if (value == null) {
     return 'indeterminate progress';
@@ -55,7 +44,7 @@ const ProgressRoot = exports.ProgressRoot = /*#__PURE__*/React.forwardRef(functi
   if (Number.isFinite(value)) {
     status = value === max ? 'complete' : 'progressing';
   }
-  const formattedValue = formatValue(value, locale, formatOptionsRef.current);
+  const formattedValue = (0, _formatNumber.formatNumberValue)(value, locale, formatOptionsRef.current);
   const state = React.useMemo(() => ({
     status
   }), [status]);

package/progress/track/ProgressTrack.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
-export declare const ProgressTrack: React.ForwardRefExoticComponent<ProgressTrackProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ProgressTrack: React.ForwardRefExoticComponent<Omit<ProgressTrackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ProgressTrackProps extends BaseUIComponentProps<'div', ProgressRoot.State> {}
 export declare namespace ProgressTrack {
   type Props = ProgressTrackProps;

package/progress/value/ProgressValue.d.ts

@@ -7,9 +7,9 @@ import type { ProgressRoot } from "../root/ProgressRoot.js";
  *
  * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
  */
-export declare const ProgressValue: React.ForwardRefExoticComponent<ProgressValueProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const ProgressValue: React.ForwardRefExoticComponent<Omit<ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface ProgressValueProps extends Omit<BaseUIComponentProps<'span', ProgressRoot.State>, 'children'> {
-  children?: null | ((formattedValue: string | null, value: number | null) => React.ReactNode);
+  children?: (null | ((formattedValue: string | null, value: number | null) => React.ReactNode)) | undefined;
 }
 export declare namespace ProgressValue {
   type Props = ProgressValueProps;

package/radio/indicator/RadioIndicator.d.ts

@@ -7,13 +7,13 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Radio](https://base-ui.com/react/components/radio)
  */
-export declare const RadioIndicator: React.ForwardRefExoticComponent<RadioIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const RadioIndicator: React.ForwardRefExoticComponent<Omit<RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface RadioIndicatorProps extends BaseUIComponentProps<'span', RadioIndicator.State> {
   /**
    * Whether to keep the HTML element in the DOM when the radio button is inactive.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export interface RadioIndicatorState {
   /**

package/radio/indicator/RadioIndicator.js

@@ -28,17 +28,17 @@ const RadioIndicator = exports.RadioIndicator = /*#__PURE__*/React.forwardRef(fu
   const rootState = (0, _RadioRootContext.useRadioRootContext)();
   const rendered = rootState.checked;
   const {
+    mounted,
     transitionStatus,
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(rendered);
-  const state = React.useMemo(() => ({
+  const state = {
     ...rootState,
     transitionStatus
-  }), [rootState, transitionStatus]);
+  };
   const indicatorRef = React.useRef(null);
-  const shouldRender = keepMounted || rendered;
+  const shouldRender = keepMounted || mounted;
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
-    enabled: shouldRender,
     ref: [forwardedRef, indicatorRef],
     state,
     props: elementProps,

package/radio/root/RadioRoot.d.ts

@@ -7,30 +7,50 @@ import type { FieldRoot } from "../../field/root/FieldRoot.js";
  *
  * Documentation: [Base UI Radio](https://base-ui.com/react/components/radio)
  */
-export declare const RadioRoot: React.ForwardRefExoticComponent<RadioRootProps & React.RefAttributes<HTMLElement>>;
+export declare const RadioRoot: {
+  <Value>(props: RadioRoot.Props<Value>): React.JSX.Element;
+};
 export interface RadioRootState extends FieldRoot.State {
-  /** Whether the radio button is currently selected. */
+  /**
+   * Whether the radio button is currently selected.
+   */
   checked: boolean;
-  /** Whether the component should ignore user interaction. */
+  /**
+   * Whether the component should ignore user interaction.
+   */
   disabled: boolean;
-  /** Whether the user should be unable to select the radio button. */
+  /**
+   * Whether the user should be unable to select the radio button.
+   */
   readOnly: boolean;
-  /** Whether the user must choose a value before submitting a form. */
+  /**
+   * Whether the user must choose a value before submitting a form.
+   */
   required: boolean;
 }
-export interface RadioRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', RadioRoot.State>, 'value'> {
-  /** The unique identifying value of the radio in a group. */
-  value: any;
-  /** Whether the component should ignore user interaction. */
-  disabled?: boolean;
-  /** Whether the user must choose a value before submitting a form. */
-  required?: boolean;
-  /** Whether the user should be unable to select the radio button. */
-  readOnly?: boolean;
-  /** A ref to access the hidden input element. */
-  inputRef?: React.Ref<HTMLInputElement>;
+export interface RadioRootProps<Value = any> extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', RadioRoot.State>, 'value'> {
+  /**
+   * The unique identifying value of the radio in a group.
+   */
+  value: Value;
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Whether the user must choose a value before submitting a form.
+   */
+  required?: boolean | undefined;
+  /**
+   * Whether the user should be unable to select the radio button.
+   */
+  readOnly?: boolean | undefined;
+  /**
+   * A ref to access the hidden input element.
+   */
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
 }
 export declare namespace RadioRoot {
   type State = RadioRootState;
-  type Props = RadioRootProps;
+  type Props<TValue = any> = RadioRootProps<TValue>;
 }

package/radio/root/RadioRoot.js

@@ -9,6 +9,7 @@ exports.RadioRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
@@ -25,6 +26,7 @@ var _FieldItemContext = require("../../field/item/FieldItemContext");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _useLabelableId = require("../../labelable-provider/useLabelableId");
 var _RadioGroupContext = require("../../radio-group/RadioGroupContext");
+var _serializeValue = require("../../utils/serializeValue");
 var _RadioRootContext = require("./RadioRootContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -46,17 +48,20 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     id: idProp,
     ...elementProps
   } = componentProps;
+  const groupContext = (0, _RadioGroupContext.useRadioGroupContext)();
   const {
     disabled: disabledGroup,
     readOnly: readOnlyGroup,
     required: requiredGroup,
     checkedValue,
-    setCheckedValue,
-    touched,
-    setTouched,
+    touched = false,
     validation,
-    registerControlRef
-  } = (0, _RadioGroupContext.useRadioGroupContext)();
+    name
+  } = groupContext ?? {};
+  const setCheckedValue = groupContext?.setCheckedValue ?? _noop.NOOP;
+  const setTouched = groupContext?.setTouched ?? _noop.NOOP;
+  const registerControlRef = groupContext?.registerControlRef ?? _noop.NOOP;
+  const registerInputRef = groupContext?.registerInputRef ?? _noop.NOOP;
   const {
     setDirty,
     validityData,
@@ -73,31 +78,50 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
   const disabled = fieldDisabled || fieldItemContext.disabled || disabledGroup || disabledProp;
   const readOnly = readOnlyGroup || readOnlyProp;
   const required = requiredGroup || requiredProp;
-  const checked = checkedValue === value;
+  const checked = groupContext ? checkedValue === value : value === '';
+  const serializedValue = React.useMemo(() => (0, _serializeValue.serializeValue)(value), [value]);
   const radioRef = React.useRef(null);
   const inputRef = React.useRef(null);
-  const mergedInputRef = (0, _useMergedRefs.useMergedRefs)(inputRefProp, inputRef);
+  const handleControlRef = (0, _useStableCallback.useStableCallback)(element => {
+    if (!element) {
+      return;
+    }
+    registerControlRef(element, disabled);
+  });
+  const mergedInputRef = (0, _useMergedRefs.useMergedRefs)(inputRefProp, inputRef, registerInputRef);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (inputRef.current?.checked) {
       setFilled(true);
     }
   }, [setFilled]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (!inputRef.current) {
+      return;
+    }
+    if (disabled && checked) {
+      registerInputRef(null);
+      return;
+    }
+    if (radioRef.current) {
+      registerControlRef(radioRef.current, disabled);
+    }
+    registerInputRef(inputRef.current);
+  }, [checked, disabled, registerControlRef, registerInputRef]);
   const id = (0, _useBaseUiId.useBaseUiId)();
   const inputId = (0, _useLabelableId.useLabelableId)({
     id: idProp,
     implicit: false,
     controlRef: radioRef
   });
+  const hiddenInputId = nativeButton ? undefined : inputId;
   const rootProps = {
     role: 'radio',
     'aria-checked': checked,
     'aria-required': required || undefined,
-    'aria-disabled': disabled || undefined,
     'aria-readonly': readOnly || undefined,
     'aria-labelledby': labelId,
     [_constants2.ACTIVE_COMPOSITE_ITEM]: checked ? '' : undefined,
-    id,
-    disabled,
+    id: nativeButton ? inputId : id,
     onKeyDown(event) {
       if (event.key === 'Enter') {
         event.preventDefault();
@@ -108,7 +132,13 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
         return;
       }
       event.preventDefault();
-      inputRef.current?.click();
+      inputRef.current?.dispatchEvent(new PointerEvent('click', {
+        bubbles: true,
+        shiftKey: event.shiftKey,
+        ctrlKey: event.ctrlKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey
+      }));
     },
     onFocus(event) {
       if (event.defaultPrevented || disabled || readOnly || !touched) {
@@ -125,13 +155,17 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     disabled,
     native: nativeButton
   });
-  const inputProps = React.useMemo(() => ({
+  const inputProps = {
     type: 'radio',
     ref: mergedInputRef,
-    id: inputId,
+    id: hiddenInputId,
+    name,
     tabIndex: -1,
-    style: _visuallyHidden.visuallyHidden,
+    style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden,
     'aria-hidden': true,
+    ...(value !== undefined ? {
+      value: serializedValue
+    } : _constants.EMPTY_OBJECT),
     disabled,
     checked,
     required,
@@ -156,7 +190,7 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     onFocus() {
       radioRef.current?.focus();
     }
-  }), [checked, disabled, inputId, mergedInputRef, readOnly, required, setCheckedValue, setDirty, setFieldTouched, setFilled, validityData.initialValue, value]);
+  };
   const state = React.useMemo(() => ({
     ...fieldState,
     required,
@@ -164,9 +198,9 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     readOnly,
     checked
   }), [fieldState, disabled, readOnly, checked, required]);
-  const contextValue = React.useMemo(() => state, [state]);
-  const isRadioGroup = setCheckedValue !== _noop.NOOP;
-  const refs = [forwardedRef, registerControlRef, radioRef, buttonRef];
+  const contextValue = state;
+  const isRadioGroup = groupContext !== undefined;
+  const refs = [forwardedRef, radioRef, buttonRef, handleControlRef];
   const props = [rootProps, getDescriptionProps, validation?.getValidationProps ?? _constants.EMPTY_OBJECT, elementProps, getButtonProps];
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     enabled: !isRadioGroup,

package/radio-group/RadioGroup.d.ts

@@ -9,59 +9,65 @@ import { REASONS } from "../utils/reasons.js";
  *
  * Documentation: [Base UI Radio Group](https://base-ui.com/react/components/radio)
  */
-export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const RadioGroup: {
+  <Value>(props: RadioGroup.Props<Value>): React.JSX.Element;
+};
 export interface RadioGroupState extends FieldRoot.State {
   /**
    * Whether the user should be unable to select a different radio button in the group.
    */
-  readOnly: boolean | undefined;
+  readOnly: boolean;
+  /**
+   * Whether the user must tick a radio button within the group before submitting a form.
+   */
+  required: boolean;
 }
-export interface RadioGroupProps extends Omit<BaseUIComponentProps<'div', RadioGroup.State>, 'value'> {
+export interface RadioGroupProps<Value = any> extends Omit<BaseUIComponentProps<'div', RadioGroup.State>, 'value'> {
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether the user should be unable to select a different radio button in the group.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Whether the user must choose a value before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * The controlled value of the radio item that should be currently selected.
    *
    * To render an uncontrolled radio group, use the `defaultValue` prop instead.
    */
-  value?: unknown;
+  value?: Value | undefined;
   /**
    * The uncontrolled value of the radio button that should be initially selected.
    *
    * To render a controlled radio group, use the `value` prop instead.
    */
-  defaultValue?: unknown;
+  defaultValue?: Value | undefined;
   /**
    * Callback fired when the value changes.
    */
-  onValueChange?: (value: unknown, eventDetails: RadioGroup.ChangeEventDetails) => void;
+  onValueChange?: ((value: Value, eventDetails: RadioGroup.ChangeEventDetails) => void) | undefined;
   /**
    * A ref to access the hidden input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
 }
 export type RadioGroupChangeEventReason = typeof REASONS.none;
 export type RadioGroupChangeEventDetails = BaseUIChangeEventDetails<RadioGroup.ChangeEventReason>;
 export declare namespace RadioGroup {
   type State = RadioGroupState;
-  type Props = RadioGroupProps;
+  type Props<TValue = any> = RadioGroupProps<TValue>;
   type ChangeEventReason = RadioGroupChangeEventReason;
   type ChangeEventDetails = RadioGroupChangeEventDetails;
 }