@base-ui/react 1.1.0 → 1.2.0

package/drawer/viewport/DrawerViewportContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface DrawerViewportContextValue {
+  swiping: boolean;
+  getDragStyles: () => React.CSSProperties;
+  swipeStrength: number | null;
+  setSwipeDismissed: (dismissed: boolean) => void;
+}
+export declare const DrawerViewportContext: React.Context<DrawerViewportContextValue | null>;
+export declare function useDrawerViewportContext(optional?: false): DrawerViewportContextValue;
+export declare function useDrawerViewportContext(optional: true): DrawerViewportContextValue | null;
+export {};

package/drawer/viewport/DrawerViewportContext.js

@@ -0,0 +1,21 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerViewportContext = void 0;
+exports.useDrawerViewportContext = useDrawerViewportContext;
+var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
+var React = _interopRequireWildcard(require("react"));
+const DrawerViewportContext = exports.DrawerViewportContext = /*#__PURE__*/React.createContext(null);
+if (process.env.NODE_ENV !== "production") DrawerViewportContext.displayName = "DrawerViewportContext";
+function useDrawerViewportContext(optional) {
+  const context = React.useContext(DrawerViewportContext);
+  if (optional === false && context === null) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: DrawerViewportContext is missing. Drawer parts must be placed within <Drawer.Viewport>.' : (0, _formatErrorMessage2.default)(92));
+  }
+  return context;
+}

package/esm/accordion/item/AccordionItem.d.ts

@@ -33,7 +33,7 @@ export interface AccordionItemProps extends BaseUIComponentProps<'div', Accordio
   /**
    * Event handler called when the panel is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: AccordionItem.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: AccordionItem.ChangeEventDetails) => void) | undefined;
 }
 export type AccordionItemChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
 export type AccordionItemChangeEventDetails = BaseUIChangeEventDetails<AccordionItem.ChangeEventReason>;

package/esm/accordion/item/AccordionItemContext.d.ts

@@ -4,7 +4,7 @@ export interface AccordionItemContext {
   open: boolean;
   state: AccordionItem.State;
   setTriggerId: (id: string | undefined) => void;
-  triggerId?: string;
+  triggerId?: string | undefined;
 }
 export declare const AccordionItemContext: React.Context<AccordionItemContext | undefined>;
 export declare function useAccordionItemContext(): AccordionItemContext;

package/esm/accordion/root/AccordionRoot.d.ts

@@ -24,18 +24,18 @@ export interface AccordionRootProps extends BaseUIComponentProps<'div', Accordio
    *
    * To render an uncontrolled accordion, use the `defaultValue` prop instead.
    */
-  value?: AccordionValue;
+  value?: AccordionValue | undefined;
   /**
    * The uncontrolled value of the item(s) that should be initially expanded.
    *
    * To render a controlled accordion, use the `value` prop instead.
    */
-  defaultValue?: AccordionValue;
+  defaultValue?: AccordionValue | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Allows the browser’s built-in page search to find and expand the panel contents.
    *
@@ -43,35 +43,35 @@ export interface AccordionRootProps extends BaseUIComponentProps<'div', Accordio
    * to hide the element without removing it from the DOM.
    * @default false
    */
-  hiddenUntilFound?: boolean;
+  hiddenUntilFound?: boolean | undefined;
   /**
    * Whether to keep the element in the DOM while the panel is closed.
    * This prop is ignored when `hiddenUntilFound` is used.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
   /**
    * Whether to loop keyboard focus back to the first item
    * when the end of the list is reached while using the arrow keys.
    * @default true
    */
-  loopFocus?: boolean;
+  loopFocus?: boolean | undefined;
   /**
    * Event handler called when an accordion item is expanded or collapsed.
    * Provides the new value as an argument.
    */
-  onValueChange?: (value: AccordionValue, eventDetails: AccordionRootChangeEventDetails) => void;
+  onValueChange?: ((value: AccordionValue, eventDetails: AccordionRootChangeEventDetails) => void) | undefined;
   /**
    * Whether multiple items can be open at the same time.
    * @default false
    */
-  multiple?: boolean;
+  multiple?: boolean | undefined;
   /**
    * The visual orientation of the accordion.
    * Controls whether roving focus uses left/right or up/down arrow keys.
    * @default 'vertical'
    */
-  orientation?: Orientation;
+  orientation?: Orientation | undefined;
 }
 export type AccordionRootChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none;
 export type AccordionRootChangeEventDetails = BaseUIChangeEventDetails<AccordionRoot.ChangeEventReason>;

package/esm/alert-dialog/root/AlertDialogRoot.d.ts

@@ -13,7 +13,7 @@ export interface AlertDialogRootProps<Payload = unknown> extends Omit<DialogRoot
   /**
    * Event handler called when the dialog is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: AlertDialogRoot.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: AlertDialogRoot.ChangeEventDetails) => void) | undefined;
   /**
    * A ref to imperative actions.
    * - `unmount`: When specified, the dialog will not be unmounted when closed.
@@ -21,13 +21,13 @@ export interface AlertDialogRootProps<Payload = unknown> extends Omit<DialogRoot
    * Useful when the dialog's animation is controlled by an external library.
    * - `close`: Closes the dialog imperatively when called.
    */
-  actionsRef?: React.RefObject<AlertDialogRoot.Actions | null>;
+  actionsRef?: React.RefObject<AlertDialogRoot.Actions | null> | undefined;
   /**
    * A handle to associate the alert dialog with a trigger.
    * If specified, allows external triggers to control the alert dialog's open state.
    * Can be created with the AlertDialog.createHandle() method.
    */
-  handle?: DialogHandle<Payload>;
+  handle?: DialogHandle<Payload> | undefined;
 }
 export type AlertDialogRootActions = DialogRoot.Actions;
 export type AlertDialogRootChangeEventReason = DialogRoot.ChangeEventReason;

package/esm/alert-dialog/root/AlertDialogRoot.js

@@ -28,16 +28,18 @@ export function AlertDialogRoot(props) {
   const nested = Boolean(parentDialogRootContext);
   const store = useRefWithInit(() => {
     return handle?.store ?? new DialogStore({
-      open: openProp ?? defaultOpen,
-      activeTriggerId: triggerIdProp !== undefined ? triggerIdProp : defaultTriggerIdProp,
+      open: defaultOpen,
+      openProp,
+      activeTriggerId: defaultTriggerIdProp,
+      triggerIdProp,
       modal: true,
       disablePointerDismissal: true,
       nested,
       role: 'alertdialog'
     });
   }).current;
-  store.useControlledProp('open', openProp, defaultOpen);
-  store.useControlledProp('activeTriggerId', triggerIdProp, defaultTriggerIdProp);
+  store.useControlledProp('openProp', openProp);
+  store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useSyncedValue('nested', nested);
   store.useContextCallback('onOpenChange', onOpenChange);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);

package/esm/autocomplete/index.parts.d.ts

@@ -18,4 +18,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/esm/autocomplete/index.parts.js

@@ -18,4 +18,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/esm/autocomplete/root/AutocompleteRoot.d.ts

@@ -20,7 +20,7 @@ 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 AutocompleteRootActions {
@@ -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/esm/autocomplete/root/AutocompleteRoot.js

@@ -59,21 +59,19 @@ export function AutocompleteRoot(props) {
     if (other.filter) {
       return other.filter;
     }
-    return (item, query, toString) => {
-      return collator.contains(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;
     }
     return (item, _query, toString) => {
       return baseFilter(item, resolvedQuery, toString);
     };
-  }, [baseFilter, mode, other.filter, resolvedQuery, staticItems]);
+  }, [baseFilter, mode, resolvedQuery, staticItems]);
   const handleItemHighlighted = useStableCallback((highlightedValue, eventDetails) => {
     props.onItemHighlighted?.(highlightedValue, eventDetails);
     if (eventDetails.reason === REASONS.pointer) {

package/esm/avatar/fallback/AvatarFallback.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 TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * Rendered when the image fails to load or when no image is provided.
  * Renders a `<span>` element.
@@ -8,12 +9,16 @@ 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 AvatarRoot.State {
+  transitionStatus: TransitionStatus;
+}
+export interface AvatarFallbackProps extends BaseUIComponentProps<'span', AvatarFallback.State> {
   /**
    * 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/esm/avatar/fallback/AvatarFallback.js

@@ -5,6 +5,13 @@ import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useAvatarRootContext } from "../root/AvatarRootContext.js";
 import { avatarStateAttributesMapping } from "../root/stateAttributesMapping.js";
+import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
+const stateAttributesMapping = {
+  ...avatarStateAttributesMapping,
+  ...transitionStatusMapping
+};
 
 /**
  * Rendered when the image fails to load or when no image is provided.
@@ -24,22 +31,42 @@ export const AvatarFallback = /*#__PURE__*/React.forwardRef(function AvatarFallb
   } = useAvatarRootContext();
   const [delayPassed, setDelayPassed] = React.useState(delay === undefined);
   const timeout = useTimeout();
+  const visible = imageLoadingStatus !== 'loaded' && delayPassed;
+  const {
+    mounted,
+    transitionStatus,
+    setMounted
+  } = useTransitionStatus(visible);
+  const fallbackRef = React.useRef(null);
   React.useEffect(() => {
     if (delay !== undefined) {
       timeout.start(delay, () => setDelayPassed(true));
     }
     return timeout.clear;
   }, [timeout, delay]);
-  const state = React.useMemo(() => ({
-    imageLoadingStatus
-  }), [imageLoadingStatus]);
+  const state = {
+    imageLoadingStatus,
+    transitionStatus
+  };
+  useOpenChangeComplete({
+    open: visible,
+    ref: fallbackRef,
+    onComplete() {
+      if (!visible) {
+        setMounted(false);
+      }
+    }
+  });
   const element = useRenderElement('span', componentProps, {
     state,
-    ref: forwardedRef,
+    ref: [forwardedRef, fallbackRef],
     props: elementProps,
-    stateAttributesMapping: avatarStateAttributesMapping,
-    enabled: imageLoadingStatus !== 'loaded' && delayPassed
+    stateAttributesMapping,
+    enabled: mounted
   });
+  if (!mounted) {
+    return null;
+  }
   return element;
 });
 if (process.env.NODE_ENV !== "production") AvatarFallback.displayName = "AvatarFallback";

package/esm/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 TransitionStatus } from "../../utils/useTransitionStatus.js";
 import { ImageLoadingStatus } from "./useImageLoadingStatus.js";
 /**
  * The image to be displayed in the avatar.
@@ -9,12 +10,16 @@ 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 AvatarRoot.State {
+  transitionStatus: TransitionStatus;
+}
+export interface AvatarImageProps extends BaseUIComponentProps<'img', AvatarImage.State> {
   /**
    * 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/esm/avatar/image/AvatarImage.js

@@ -6,7 +6,14 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { useAvatarRootContext } from "../root/AvatarRootContext.js";
 import { avatarStateAttributesMapping } from "../root/stateAttributesMapping.js";
+import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
+import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
 import { useImageLoadingStatus } from "./useImageLoadingStatus.js";
+const stateAttributesMapping = {
+  ...avatarStateAttributesMapping,
+  ...transitionStatusMapping
+};
 
 /**
  * The image to be displayed in the avatar.
@@ -28,6 +35,13 @@ export const AvatarImage = /*#__PURE__*/React.forwardRef(function AvatarImage(co
     referrerPolicy,
     crossOrigin
   });
+  const isVisible = imageLoadingStatus === 'loading' || imageLoadingStatus === 'loaded';
+  const {
+    mounted,
+    transitionStatus,
+    setMounted
+  } = useTransitionStatus(isVisible);
+  const imageRef = React.useRef(null);
   const handleLoadingStatusChange = useStableCallback(status => {
     onLoadingStatusChangeProp?.(status);
     context.setImageLoadingStatus(status);
@@ -37,16 +51,30 @@ export const AvatarImage = /*#__PURE__*/React.forwardRef(function AvatarImage(co
       handleLoadingStatusChange(imageLoadingStatus);
     }
   }, [imageLoadingStatus, handleLoadingStatusChange]);
-  const state = React.useMemo(() => ({
-    imageLoadingStatus
-  }), [imageLoadingStatus]);
+  const resolvedTransitionStatus = imageLoadingStatus === 'loading' ? 'starting' : transitionStatus;
+  const state = {
+    imageLoadingStatus,
+    transitionStatus: resolvedTransitionStatus
+  };
+  useOpenChangeComplete({
+    open: isVisible,
+    ref: imageRef,
+    onComplete() {
+      if (!isVisible) {
+        setMounted(false);
+      }
+    }
+  });
   const element = useRenderElement('img', componentProps, {
     state,
-    ref: forwardedRef,
+    ref: [forwardedRef, imageRef],
     props: elementProps,
-    stateAttributesMapping: avatarStateAttributesMapping,
-    enabled: imageLoadingStatus === 'loaded'
+    stateAttributesMapping,
+    enabled: mounted
   });
+  if (!mounted) {
+    return null;
+  }
   return element;
 });
 if (process.env.NODE_ENV !== "production") AvatarImage.displayName = "AvatarImage";

package/esm/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/esm/avatar/root/AvatarRoot.js

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

package/esm/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/esm/button/Button.js

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

package/esm/checkbox/indicator/CheckboxIndicator.d.ts

@@ -17,7 +17,7 @@ export interface CheckboxIndicatorProps extends BaseUIComponentProps<'span', Che
    * 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/esm/checkbox/indicator/CheckboxIndicator.js

@@ -25,14 +25,15 @@ export const CheckboxIndicator = /*#__PURE__*/React.forwardRef(function Checkbox
   const rootState = useCheckboxRootContext();
   const rendered = rootState.checked || rootState.indeterminate;
   const {
+    mounted,
     transitionStatus,
     setMounted
   } = useTransitionStatus(rendered);
   const indicatorRef = React.useRef(null);
-  const state = React.useMemo(() => ({
+  const state = {
     ...rootState,
     transitionStatus
-  }), [rootState, transitionStatus]);
+  };
   useOpenChangeComplete({
     open: rendered,
     ref: indicatorRef,
@@ -48,9 +49,8 @@ export const CheckboxIndicator = /*#__PURE__*/React.forwardRef(function Checkbox
     ...transitionStatusMapping,
     ...fieldValidityMapping
   }), [baseStateAttributesMapping]);
-  const shouldRender = keepMounted || rendered;
+  const shouldRender = keepMounted || mounted;
   const element = useRenderElement('span', componentProps, {
-    enabled: shouldRender,
     ref: [forwardedRef, indicatorRef],
     state,
     stateAttributesMapping,