@base-ui/react 1.1.0 → 1.3.0

package/autocomplete/index.d.ts

@@ -3,6 +3,7 @@ export type * from "./root/AutocompleteRoot.js";
 export type * from "./value/AutocompleteValue.js";
 export type { ComboboxTriggerProps as AutocompleteTriggerProps, ComboboxTriggerState as AutocompleteTriggerState } from "../combobox/trigger/ComboboxTrigger.js";
 export type { ComboboxInputProps as AutocompleteInputProps, ComboboxInputState as AutocompleteInputState } from "../combobox/input/ComboboxInput.js";
+export type { ComboboxInputGroupProps as AutocompleteInputGroupProps, ComboboxInputGroupState as AutocompleteInputGroupState } from "../combobox/input-group/ComboboxInputGroup.js";
 export type { ComboboxPopupProps as AutocompletePopupProps, ComboboxPopupState as AutocompletePopupState } from "../combobox/popup/ComboboxPopup.js";
 export type { ComboboxPositionerProps as AutocompletePositionerProps, ComboboxPositionerState as AutocompletePositionerState } from "../combobox/positioner/ComboboxPositioner.js";
 export type { ComboboxListProps as AutocompleteListProps, ComboboxListState as AutocompleteListState } from "../combobox/list/ComboboxList.js";

package/autocomplete/index.parts.d.ts

@@ -2,6 +2,7 @@ export { AutocompleteRoot as Root } from "./root/AutocompleteRoot.js";
 export { AutocompleteValue as Value } from "./value/AutocompleteValue.js";
 export { ComboboxTrigger as Trigger } from "../combobox/trigger/ComboboxTrigger.js";
 export { ComboboxInput as Input } from "../combobox/input/ComboboxInput.js";
+export { ComboboxInputGroup as InputGroup } from "../combobox/input-group/ComboboxInputGroup.js";
 export { ComboboxIcon as Icon } from "../combobox/icon/ComboboxIcon.js";
 export { ComboboxClear as Clear } from "../combobox/clear/ComboboxClear.js";
 export { ComboboxList as List } from "../combobox/list/ComboboxList.js";
@@ -18,4 +19,5 @@ export { ComboboxRow as Row } from "../combobox/row/ComboboxRow.js";
 export { ComboboxCollection as Collection } from "../combobox/collection/ComboboxCollection.js";
 export { ComboboxEmpty as Empty } from "../combobox/empty/ComboboxEmpty.js";
 export { Separator } from "../separator/Separator.js";
-export { useCoreFilter as useFilter } from "../combobox/root/utils/useFilter.js";
+export { useCoreFilter as useFilter } from "../combobox/root/utils/useFilter.js";
+export { useFilteredItems } from "../combobox/root/utils/useFilteredItems.js";

package/autocomplete/index.parts.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "Input", {
     return _ComboboxInput.ComboboxInput;
   }
 });
+Object.defineProperty(exports, "InputGroup", {
+  enumerable: true,
+  get: function () {
+    return _ComboboxInputGroup.ComboboxInputGroup;
+  }
+});
 Object.defineProperty(exports, "Item", {
   enumerable: true,
   get: function () {
@@ -129,10 +135,17 @@ Object.defineProperty(exports, "useFilter", {
     return _useFilter.useCoreFilter;
   }
 });
+Object.defineProperty(exports, "useFilteredItems", {
+  enumerable: true,
+  get: function () {
+    return _useFilteredItems.useFilteredItems;
+  }
+});
 var _AutocompleteRoot = require("./root/AutocompleteRoot");
 var _AutocompleteValue = require("./value/AutocompleteValue");
 var _ComboboxTrigger = require("../combobox/trigger/ComboboxTrigger");
 var _ComboboxInput = require("../combobox/input/ComboboxInput");
+var _ComboboxInputGroup = require("../combobox/input-group/ComboboxInputGroup");
 var _ComboboxIcon = require("../combobox/icon/ComboboxIcon");
 var _ComboboxClear = require("../combobox/clear/ComboboxClear");
 var _ComboboxList = require("../combobox/list/ComboboxList");
@@ -149,4 +162,5 @@ var _ComboboxRow = require("../combobox/row/ComboboxRow");
 var _ComboboxCollection = require("../combobox/collection/ComboboxCollection");
 var _ComboboxEmpty = require("../combobox/empty/ComboboxEmpty");
 var _Separator = require("../separator/Separator");
-var _useFilter = require("../combobox/root/utils/useFilter");
+var _useFilter = require("../combobox/root/utils/useFilter");
+var _useFilteredItems = require("../combobox/root/utils/useFilteredItems");

package/autocomplete/root/AutocompleteRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AriaCombobox } from "../../combobox/root/AriaCombobox.js";
+import { AriaCombobox, type AriaComboboxState } from "../../combobox/root/AriaCombobox.js";
 /**
  * Groups all parts of the autocomplete.
  * Doesn't render its own HTML element.
@@ -20,9 +20,9 @@ export declare function AutocompleteRoot<ItemValue>(props: Omit<AutocompleteRoot
    * The items to be displayed in the list.
    * Can be either a flat array of items or an array of groups with items.
    */
-  items?: readonly ItemValue[];
+  items?: readonly ItemValue[] | undefined;
 }): React.JSX.Element;
-export type AutocompleteRootState = AriaCombobox.State;
+export interface AutocompleteRootState extends AriaComboboxState {}
 export interface AutocompleteRootActions {
   unmount: () => void;
 }
@@ -30,7 +30,7 @@ export type AutocompleteRootChangeEventReason = AriaCombobox.ChangeEventReason;
 export type AutocompleteRootChangeEventDetails = AriaCombobox.ChangeEventDetails;
 export type AutocompleteRootHighlightEventReason = AriaCombobox.HighlightEventReason;
 export type AutocompleteRootHighlightEventDetails = AriaCombobox.HighlightEventDetails;
-export interface AutocompleteRootProps<ItemValue> extends Omit<AriaCombobox.Props<ItemValue, 'none'>, 'selectionMode' | 'selectedValue' | 'defaultSelectedValue' | 'onSelectedValueChange' | 'fillInputOnItemPress' | 'itemToStringValue' | 'isItemEqualToValue' | 'inputValue' | 'defaultInputValue' | 'onInputValueChange' | 'autoComplete' | 'itemToStringLabel' | 'autoHighlight' | 'keepHighlight' | 'highlightItemOnHover' | 'actionsRef' | 'onOpenChange'> {
+export interface AutocompleteRootProps<ItemValue> extends Omit<AriaCombobox.Props<ItemValue, 'none'>, 'selectionMode' | 'selectedValue' | 'defaultSelectedValue' | 'onSelectedValueChange' | 'fillInputOnItemPress' | 'itemToStringValue' | 'isItemEqualToValue' | 'inputValue' | 'defaultInputValue' | 'onInputValueChange' | 'autoComplete' | 'formAutoComplete' | 'itemToStringLabel' | 'autoHighlight' | 'keepHighlight' | 'highlightItemOnHover' | 'actionsRef' | 'onOpenChange' | 'openOnInputClick'> {
   /**
    * Controls how the autocomplete behaves with respect to list filtering and inline autocompletion.
    * - `list` (default): items are dynamically filtered based on the input value. The input value does not change based on the active item.
@@ -39,62 +39,62 @@ export interface AutocompleteRootProps<ItemValue> extends Omit<AriaCombobox.Prop
    * - `none`: items are static (not filtered), and the input value will not change based on the active item.
    * @default 'list'
    */
-  mode?: 'list' | 'both' | 'inline' | 'none';
+  mode?: 'list' | 'both' | 'inline' | 'none' | undefined;
   /**
    * Whether the first matching item is highlighted automatically.
    * - `true`: highlight after the user types and keep the highlight while the query changes.
    * - `'always'`: always highlight the first item.
    * @default false
    */
-  autoHighlight?: boolean | 'always';
+  autoHighlight?: boolean | 'always' | undefined;
   /**
    * Whether the highlighted item should be preserved when the pointer leaves the list.
    * @default false
    */
-  keepHighlight?: boolean;
+  keepHighlight?: boolean | undefined;
   /**
    * Whether moving the pointer over items should highlight them.
    * Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.
    * @default true
    */
-  highlightItemOnHover?: boolean;
+  highlightItemOnHover?: boolean | undefined;
   /**
    * The uncontrolled input value of the autocomplete when it's initially rendered.
    *
    * To render a controlled autocomplete, use the `value` prop instead.
    */
-  defaultValue?: AriaCombobox.Props<React.ComponentProps<'input'>['defaultValue'], 'none'>['defaultInputValue'];
+  defaultValue?: AriaCombobox.Props<React.ComponentProps<'input'>['defaultValue'], 'none'>['defaultInputValue'] | undefined;
   /**
    * The input value of the autocomplete. Use when controlled.
    */
-  value?: AriaCombobox.Props<React.ComponentProps<'input'>['value'], 'none'>['inputValue'];
+  value?: AriaCombobox.Props<React.ComponentProps<'input'>['value'], 'none'>['inputValue'] | undefined;
   /**
    * Event handler called when the input value of the autocomplete changes.
    */
-  onValueChange?: (value: string, eventDetails: AutocompleteRootChangeEventDetails) => void;
+  onValueChange?: ((value: string, eventDetails: AutocompleteRootChangeEventDetails) => void) | undefined;
   /**
    * Whether clicking an item should submit the autocomplete's owning form.
    * By default, clicking an item via a pointer or <kbd>Enter</kbd> key does not submit the owning form.
    * Useful when the autocomplete is used as a single-field form search input.
    * @default false
    */
-  submitOnItemClick?: AriaCombobox.Props<ItemValue, 'none'>['submitOnItemClick'];
+  submitOnItemClick?: AriaCombobox.Props<ItemValue, 'none'>['submitOnItemClick'] | undefined;
   /**
    * When the item values are objects (`<Autocomplete.Item value={object}>`), this function converts the object value to a string representation for both display in the input and form submission.
    * If the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop.
    */
-  itemToStringValue?: (itemValue: ItemValue) => string;
+  itemToStringValue?: ((itemValue: ItemValue) => string) | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the autocomplete will not be unmounted when closed.
    * Instead, the `unmount` function must be called to unmount the autocomplete manually.
    * Useful when the autocomplete's animation is controlled by an external library.
    */
-  actionsRef?: React.RefObject<AutocompleteRootActions | null>;
+  actionsRef?: React.RefObject<AutocompleteRootActions | null> | undefined;
   /**
    * Event handler called when the popup is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: AutocompleteRootChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: AutocompleteRootChangeEventDetails) => void) | undefined;
   /**
    * Callback fired when an item is highlighted or unhighlighted.
    * Receives the highlighted item value (or `undefined` if no item is highlighted) and event details with a `reason` property describing why the highlight changed.
@@ -103,7 +103,12 @@ export interface AutocompleteRootProps<ItemValue> extends Omit<AriaCombobox.Prop
    * - `'pointer'`: the highlight changed due to pointer hovering.
    * - `'none'`: the highlight changed programmatically.
    */
-  onItemHighlighted?: (highlightedValue: ItemValue | undefined, eventDetails: AutocompleteRootHighlightEventDetails) => void;
+  onItemHighlighted?: ((highlightedValue: ItemValue | undefined, eventDetails: AutocompleteRootHighlightEventDetails) => void) | undefined;
+  /**
+   * Whether the popup opens when clicking the input.
+   * @default false
+   */
+  openOnInputClick?: boolean | undefined;
 }
 export declare namespace AutocompleteRoot {
   type Props<ItemValue> = AutocompleteRootProps<ItemValue>;

package/autocomplete/root/AutocompleteRoot.js

@@ -62,24 +62,25 @@ function AutocompleteRoot(props) {
   });
   const collator = (0, _useFilter.useCoreFilter)();
   const baseFilter = React.useMemo(() => {
-    if (other.filter) {
+    if (other.filter !== undefined) {
       return other.filter;
     }
-    return (item, query, toString) => {
-      return collator.contains((0, _resolveValueLabel.stringifyAsLabel)(item, toString), query);
-    };
-  }, [other, collator]);
+    return collator.contains;
+  }, [other.filter, collator]);
   const resolvedQuery = String(isControlled ? value : internalValue).trim();
 
   // In "both", wrap filtering to use only the typed value, ignoring the inline value.
   const resolvedFilter = React.useMemo(() => {
     if (mode !== 'both') {
-      return staticItems ? null : other.filter;
+      return staticItems ? null : baseFilter;
+    }
+    if (baseFilter === null) {
+      return null;
     }
     return (item, _query, toString) => {
       return baseFilter(item, resolvedQuery, toString);
     };
-  }, [baseFilter, mode, other.filter, resolvedQuery, staticItems]);
+  }, [baseFilter, mode, resolvedQuery, staticItems]);
   const handleItemHighlighted = (0, _useStableCallback.useStableCallback)((highlightedValue, eventDetails) => {
     props.onItemHighlighted?.(highlightedValue, eventDetails);
     if (eventDetails.reason === _reasons.REASONS.pointer) {

package/avatar/fallback/AvatarFallback.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { AvatarRoot } from "../root/AvatarRoot.js";
+import type { AvatarRootState } from "../root/AvatarRoot.js";
 /**
  * Rendered when the image fails to load or when no image is provided.
  * Renders a `<span>` element.
@@ -8,12 +8,14 @@ import type { AvatarRoot } from "../root/AvatarRoot.js";
  * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
  */
 export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface AvatarFallbackProps extends BaseUIComponentProps<'span', AvatarRoot.State> {
+export interface AvatarFallbackState extends AvatarRootState {}
+export interface AvatarFallbackProps extends BaseUIComponentProps<'span', AvatarFallbackState> {
   /**
    * How long to wait before showing the fallback. Specified in milliseconds.
    */
-  delay?: number;
+  delay?: number | undefined;
 }
 export declare namespace AvatarFallback {
+  type State = AvatarFallbackState;
   type Props = AvatarFallbackProps;
 }

package/avatar/fallback/AvatarFallback.js

@@ -35,9 +35,9 @@ const AvatarFallback = exports.AvatarFallback = /*#__PURE__*/React.forwardRef(fu
     }
     return timeout.clear;
   }, [timeout, delay]);
-  const state = React.useMemo(() => ({
+  const state = {
     imageLoadingStatus
-  }), [imageLoadingStatus]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     state,
     ref: forwardedRef,

package/avatar/image/AvatarImage.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
-import type { AvatarRoot } from "../root/AvatarRoot.js";
+import type { AvatarRootState } from "../root/AvatarRoot.js";
+import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 import { ImageLoadingStatus } from "./useImageLoadingStatus.js";
 /**
  * The image to be displayed in the avatar.
@@ -9,12 +10,19 @@ import { ImageLoadingStatus } from "./useImageLoadingStatus.js";
  * Documentation: [Base UI Avatar](https://base-ui.com/react/components/avatar)
  */
 export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
-export interface AvatarImageProps extends BaseUIComponentProps<'img', AvatarRoot.State> {
+export interface AvatarImageState extends AvatarRootState {
+  /**
+   * The transition status of the component.
+   */
+  transitionStatus: TransitionStatus;
+}
+export interface AvatarImageProps extends BaseUIComponentProps<'img', AvatarImageState> {
   /**
    * Callback fired when the loading status changes.
    */
-  onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+  onLoadingStatusChange?: ((status: ImageLoadingStatus) => void) | undefined;
 }
 export declare namespace AvatarImage {
+  type State = AvatarImageState;
   type Props = AvatarImageProps;
 }

package/avatar/image/AvatarImage.js

@@ -12,7 +12,15 @@ var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _AvatarRootContext = require("../root/AvatarRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
+var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
+var _stateAttributesMapping2 = require("../../utils/stateAttributesMapping");
+var _useTransitionStatus = require("../../utils/useTransitionStatus");
 var _useImageLoadingStatus = require("./useImageLoadingStatus");
+const stateAttributesMapping = {
+  ..._stateAttributesMapping.avatarStateAttributesMapping,
+  ..._stateAttributesMapping2.transitionStatusMapping
+};
+
 /**
  * The image to be displayed in the avatar.
  * Renders an `<img>` element.
@@ -33,6 +41,13 @@ const AvatarImage = exports.AvatarImage = /*#__PURE__*/React.forwardRef(function
     referrerPolicy,
     crossOrigin
   });
+  const isVisible = imageLoadingStatus === 'loaded';
+  const {
+    mounted,
+    transitionStatus,
+    setMounted
+  } = (0, _useTransitionStatus.useTransitionStatus)(isVisible);
+  const imageRef = React.useRef(null);
   const handleLoadingStatusChange = (0, _useStableCallback.useStableCallback)(status => {
     onLoadingStatusChangeProp?.(status);
     context.setImageLoadingStatus(status);
@@ -42,16 +57,29 @@ const AvatarImage = exports.AvatarImage = /*#__PURE__*/React.forwardRef(function
       handleLoadingStatusChange(imageLoadingStatus);
     }
   }, [imageLoadingStatus, handleLoadingStatusChange]);
-  const state = React.useMemo(() => ({
-    imageLoadingStatus
-  }), [imageLoadingStatus]);
+  const state = {
+    imageLoadingStatus,
+    transitionStatus
+  };
+  (0, _useOpenChangeComplete.useOpenChangeComplete)({
+    open: isVisible,
+    ref: imageRef,
+    onComplete() {
+      if (!isVisible) {
+        setMounted(false);
+      }
+    }
+  });
   const element = (0, _useRenderElement.useRenderElement)('img', componentProps, {
     state,
-    ref: forwardedRef,
+    ref: [forwardedRef, imageRef],
     props: elementProps,
-    stateAttributesMapping: _stateAttributesMapping.avatarStateAttributesMapping,
-    enabled: imageLoadingStatus === 'loaded'
+    stateAttributesMapping,
+    enabled: mounted
   });
+  if (!mounted) {
+    return null;
+  }
   return element;
 });
 if (process.env.NODE_ENV !== "production") AvatarImage.displayName = "AvatarImage";

package/avatar/image/AvatarImageDataAttributes.d.ts

@@ -0,0 +1,10 @@
+export declare enum AvatarImageDataAttributes {
+  /**
+   * Present when the image is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the image is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/avatar/image/AvatarImageDataAttributes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarImageDataAttributes = void 0;
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+let AvatarImageDataAttributes = exports.AvatarImageDataAttributes = function (AvatarImageDataAttributes) {
+  /**
+   * Present when the image is animating in.
+   */
+  AvatarImageDataAttributes[AvatarImageDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the image is animating out.
+   */
+  AvatarImageDataAttributes[AvatarImageDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return AvatarImageDataAttributes;
+}({});

package/avatar/image/useImageLoadingStatus.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 interface UseImageLoadingStatusOptions {
-  referrerPolicy?: React.HTMLAttributeReferrerPolicy;
-  crossOrigin?: React.ImgHTMLAttributes<HTMLImageElement>['crossOrigin'];
+  referrerPolicy?: React.HTMLAttributeReferrerPolicy | undefined;
+  crossOrigin?: React.ImgHTMLAttributes<HTMLImageElement>['crossOrigin'] | undefined;
 }
 export declare function useImageLoadingStatus(src: string | undefined, {
   referrerPolicy,

package/avatar/root/AvatarRoot.d.ts

@@ -9,9 +9,12 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 export declare const AvatarRoot: React.ForwardRefExoticComponent<Omit<AvatarRootProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 export interface AvatarRootState {
+  /**
+   * The image loading status.
+   */
   imageLoadingStatus: ImageLoadingStatus;
 }
-export interface AvatarRootProps extends BaseUIComponentProps<'span', AvatarRoot.State> {}
+export interface AvatarRootProps extends BaseUIComponentProps<'span', AvatarRootState> {}
 export declare namespace AvatarRoot {
   type State = AvatarRootState;
   type Props = AvatarRootProps;

package/avatar/root/AvatarRoot.js

@@ -24,9 +24,9 @@ const AvatarRoot = exports.AvatarRoot = /*#__PURE__*/React.forwardRef(function A
     ...elementProps
   } = componentProps;
   const [imageLoadingStatus, setImageLoadingStatus] = React.useState('idle');
-  const state = React.useMemo(() => ({
+  const state = {
     imageLoadingStatus
-  }), [imageLoadingStatus]);
+  };
   const contextValue = React.useMemo(() => ({
     imageLoadingStatus,
     setImageLoadingStatus

package/button/Button.d.ts

@@ -18,7 +18,7 @@ export interface ButtonProps extends NativeButtonProps, BaseUIComponentProps<'bu
    * Whether the button should be focusable when disabled.
    * @default false
    */
-  focusableWhenDisabled?: boolean;
+  focusableWhenDisabled?: boolean | undefined;
 }
 export declare namespace Button {
   type State = ButtonState;

package/button/Button.js

@@ -32,9 +32,9 @@ const Button = exports.Button = /*#__PURE__*/React.forwardRef(function Button(co
     focusableWhenDisabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled
-  }), [disabled]);
+  };
   return (0, _useRenderElement.useRenderElement)('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef],

package/checkbox/indicator/CheckboxIndicator.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CheckboxRoot } from "../root/CheckboxRoot.js";
+import type { CheckboxRootState } from "../root/CheckboxRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
@@ -9,15 +9,18 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
  */
 export declare const CheckboxIndicator: React.ForwardRefExoticComponent<Omit<CheckboxIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface CheckboxIndicatorState extends CheckboxRoot.State {
+export interface CheckboxIndicatorState extends CheckboxRootState {
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
-export interface CheckboxIndicatorProps extends BaseUIComponentProps<'span', CheckboxIndicator.State> {
+export interface CheckboxIndicatorProps extends BaseUIComponentProps<'span', CheckboxIndicatorState> {
   /**
    * Whether to keep the element in the DOM when the checkbox is not checked.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace CheckboxIndicator {
   type State = CheckboxIndicatorState;

package/checkbox/indicator/CheckboxIndicator.js

@@ -30,14 +30,15 @@ const CheckboxIndicator = exports.CheckboxIndicator = /*#__PURE__*/React.forward
   const rootState = (0, _CheckboxRootContext.useCheckboxRootContext)();
   const rendered = rootState.checked || rootState.indeterminate;
   const {
+    mounted,
     transitionStatus,
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(rendered);
   const indicatorRef = React.useRef(null);
-  const state = React.useMemo(() => ({
+  const state = {
     ...rootState,
     transitionStatus
-  }), [rootState, transitionStatus]);
+  };
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open: rendered,
     ref: indicatorRef,
@@ -53,9 +54,8 @@ const CheckboxIndicator = exports.CheckboxIndicator = /*#__PURE__*/React.forward
     ..._stateAttributesMapping.transitionStatusMapping,
     ..._constants.fieldValidityMapping
   }), [baseStateAttributesMapping]);
-  const shouldRender = keepMounted || rendered;
+  const shouldRender = keepMounted || mounted;
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
-    enabled: shouldRender,
     ref: [forwardedRef, indicatorRef],
     state,
     stateAttributesMapping,

package/checkbox/root/CheckboxRoot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 export declare const PARENT_CHECKBOX = "data-parent";
@@ -11,7 +11,7 @@ export declare const PARENT_CHECKBOX = "data-parent";
  * Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
  */
 export declare const CheckboxRoot: React.ForwardRefExoticComponent<Omit<CheckboxRootProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export interface CheckboxRootState extends FieldRoot.State {
+export interface CheckboxRootState extends FieldRootState {
   /**
    * Whether the checkbox is currently ticked.
    */
@@ -33,74 +33,74 @@ export interface CheckboxRootState extends FieldRoot.State {
    */
   indeterminate: boolean;
 }
-export interface CheckboxRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', CheckboxRoot.State>, 'onChange' | 'value'> {
+export interface CheckboxRootProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', CheckboxRootState>, 'onChange' | 'value'> {
   /**
    * The id of the input element.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Identifies the field when a form is submitted.
    * @default undefined
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * Whether the checkbox is currently ticked.
    *
    * To render an uncontrolled checkbox, use the `defaultChecked` prop instead.
    * @default undefined
    */
-  checked?: boolean;
+  checked?: boolean | undefined;
   /**
    * Whether the checkbox is initially ticked.
    *
    * To render a controlled checkbox, use the `checked` prop instead.
    * @default false
    */
-  defaultChecked?: boolean;
+  defaultChecked?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Event handler called when the checkbox is ticked or unticked.
    */
-  onCheckedChange?: (checked: boolean, eventDetails: CheckboxRootChangeEventDetails) => void;
+  onCheckedChange?: ((checked: boolean, eventDetails: CheckboxRootChangeEventDetails) => void) | undefined;
   /**
    * Whether the user should be unable to tick or untick the checkbox.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Whether the user must tick the checkbox before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Whether the checkbox is in a mixed state: neither ticked, nor unticked.
    * @default false
    */
-  indeterminate?: boolean;
+  indeterminate?: boolean | undefined;
   /**
    * A ref to access the hidden `<input>` element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
   /**
    * Whether the checkbox controls a group of child checkboxes.
    *
    * Must be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group).
    * @default false
    */
-  parent?: boolean;
+  parent?: boolean | undefined;
   /**
    * The value submitted with the form when the checkbox is unchecked.
    * By default, unchecked checkboxes do not submit any value, matching native checkbox behavior.
    */
-  uncheckedValue?: string;
+  uncheckedValue?: string | undefined;
   /**
    * The value of the selected checkbox.
    */
-  value?: string;
+  value?: string | undefined;
 }
 export type CheckboxRootChangeEventReason = typeof REASONS.none;
 export type CheckboxRootChangeEventDetails = BaseUIChangeEventDetails<CheckboxRoot.ChangeEventReason>;