@base-ui/react 1.4.1 → 1.5.0

package/alert-dialog/root/AlertDialogRoot.js

@@ -1,17 +1,11 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AlertDialogRoot = AlertDialogRoot;
-var React = _interopRequireWildcard(require("react"));
-var _DialogRoot = require("../../dialog/root/DialogRoot");
-var _useDialogRoot = require("../../dialog/root/useDialogRoot");
-var _DialogRootContext = require("../../dialog/root/DialogRootContext");
-var _DialogStore = require("../../dialog/store/DialogStore");
-var _jsxRuntime = require("react/jsx-runtime");
+var _useRenderDialogRoot = require("../../dialog/root/useRenderDialogRoot");
 /**
  * Groups all parts of the alert dialog.
  * Doesn't render its own HTML element.
@@ -19,53 +13,5 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
  */
 function AlertDialogRoot(props) {
-  const {
-    children,
-    open: openProp,
-    defaultOpen = false,
-    onOpenChange,
-    onOpenChangeComplete,
-    actionsRef,
-    handle,
-    triggerId: triggerIdProp,
-    defaultTriggerId: defaultTriggerIdProp = null
-  } = props;
-  const parentDialogRootContext = (0, _DialogRootContext.useDialogRootContext)(true);
-  const nested = Boolean(parentDialogRootContext);
-  const store = _DialogStore.DialogStore.useStore(handle?.store, {
-    open: defaultOpen,
-    openProp,
-    activeTriggerId: defaultTriggerIdProp,
-    triggerIdProp,
-    modal: true,
-    disablePointerDismissal: true,
-    nested,
-    role: 'alertdialog'
-  });
-  store.useControlledProp('openProp', openProp);
-  store.useControlledProp('triggerIdProp', triggerIdProp);
-  store.useSyncedValue('nested', nested);
-  store.useContextCallback('onOpenChange', onOpenChange);
-  store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
-  const payload = store.useState('payload');
-  (0, _useDialogRoot.useDialogRoot)({
-    store,
-    actionsRef,
-    parentContext: parentDialogRootContext?.store.context,
-    isDrawer: false,
-    onOpenChange,
-    triggerIdProp
-  });
-  const contextValue = React.useMemo(() => ({
-    store
-  }), [store]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRoot.IsDrawerContext.Provider, {
-    value: false,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRootContext.DialogRootContext.Provider, {
-      value: contextValue,
-      children: typeof children === 'function' ? children({
-        payload
-      }) : children
-    })
-  });
+  return (0, _useRenderDialogRoot.useRenderDialogRoot)(props, 'alert-dialog');
 }

package/alert-dialog/trigger/AlertDialogTrigger.d.ts

@@ -0,0 +1,25 @@
+import type * as React from 'react';
+import { type DialogTriggerProps, type DialogTriggerState } from "../../dialog/trigger/DialogTrigger.js";
+import type { AlertDialogHandle } from "../handle.js";
+/**
+ * A button that opens the alert dialog.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+ */
+export declare const AlertDialogTrigger: AlertDialogTrigger;
+export interface AlertDialogTrigger {
+  <Payload>(componentProps: AlertDialogTriggerProps<Payload>): React.JSX.Element;
+}
+export interface AlertDialogTriggerProps<Payload = unknown> extends Omit<DialogTriggerProps<Payload>, 'handle'> {
+  /**
+   * A handle to associate the trigger with an alert dialog.
+   * Can be created with the AlertDialog.createHandle() method.
+   */
+  handle?: AlertDialogHandle<Payload> | undefined;
+}
+export interface AlertDialogTriggerState extends DialogTriggerState {}
+export declare namespace AlertDialogTrigger {
+  type Props<Payload = unknown> = AlertDialogTriggerProps<Payload>;
+  type State = AlertDialogTriggerState;
+}

package/alert-dialog/trigger/AlertDialogTrigger.js

@@ -0,0 +1,15 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AlertDialogTrigger = void 0;
+var _DialogTrigger = require("../../dialog/trigger/DialogTrigger");
+/**
+ * A button that opens the alert dialog.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Alert Dialog](https://base-ui.com/react/components/alert-dialog)
+ */
+const AlertDialogTrigger = exports.AlertDialogTrigger = _DialogTrigger.DialogTrigger;

package/alert-dialog/trigger/AlertDialogTriggerDataAttributes.d.ts

@@ -0,0 +1,10 @@
+export declare enum AlertDialogTriggerDataAttributes {
+  /**
+   * Present when the trigger is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the corresponding alert dialog is open.
+   */
+  popupOpen = "data-popup-open",
+}

package/alert-dialog/trigger/AlertDialogTriggerDataAttributes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AlertDialogTriggerDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let AlertDialogTriggerDataAttributes = exports.AlertDialogTriggerDataAttributes = function (AlertDialogTriggerDataAttributes) {
+  /**
+   * Present when the trigger is disabled.
+   */
+  AlertDialogTriggerDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the corresponding alert dialog is open.
+   */
+  AlertDialogTriggerDataAttributes[AlertDialogTriggerDataAttributes["popupOpen"] = _popupStateMapping.CommonTriggerDataAttributes.popupOpen] = "popupOpen";
+  return AlertDialogTriggerDataAttributes;
+}({});

package/autocomplete/root/AutocompleteRoot.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AutocompleteRoot = AutocompleteRoot;
 var React = _interopRequireWildcard(require("react"));
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _AriaCombobox = require("../../combobox/root/AriaCombobox");
 var _useFilter = require("../../combobox/root/utils/useFilter");
 var _resolveValueLabel = require("../../internals/resolveValueLabel");
@@ -53,13 +52,6 @@ function AutocompleteRoot(props) {
   } else {
     resolvedInputValue = internalValue;
   }
-  const handleValueChange = (0, _useStableCallback.useStableCallback)((nextValue, eventDetails) => {
-    setInlineInputValue('');
-    if (!isControlled) {
-      setInternalValue(nextValue);
-    }
-    onValueChange?.(nextValue, eventDetails);
-  });
   const collator = (0, _useFilter.useCoreFilter)();
   const baseFilter = React.useMemo(() => {
     if (other.filter !== undefined) {
@@ -81,7 +73,14 @@ function AutocompleteRoot(props) {
       return baseFilter(item, resolvedQuery, toString);
     };
   }, [baseFilter, mode, resolvedQuery, staticItems]);
-  const handleItemHighlighted = (0, _useStableCallback.useStableCallback)((highlightedValue, eventDetails) => {
+  function handleValueChange(nextValue, eventDetails) {
+    setInlineInputValue('');
+    if (!isControlled) {
+      setInternalValue(nextValue);
+    }
+    onValueChange?.(nextValue, eventDetails);
+  }
+  function handleItemHighlighted(highlightedValue, eventDetails) {
     props.onItemHighlighted?.(highlightedValue, eventDetails);
     if (eventDetails.reason === _reasons.REASONS.pointer) {
       return;
@@ -95,7 +94,7 @@ function AutocompleteRoot(props) {
     } else {
       setInlineInputValue('');
     }
-  });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AriaCombobox.AriaCombobox, {
     ...other,
     itemToStringLabel: itemToStringValue,

package/avatar/image/AvatarImage.js

@@ -58,10 +58,6 @@ const AvatarImage = exports.AvatarImage = /*#__PURE__*/React.forwardRef(function
       handleLoadingStatusChange(imageLoadingStatus);
     }
   }, [imageLoadingStatus, handleLoadingStatusChange]);
-  const state = {
-    imageLoadingStatus,
-    transitionStatus
-  };
   (0, _useOpenChangeComplete.useOpenChangeComplete)({
     open: isVisible,
     ref: imageRef,
@@ -71,6 +67,10 @@ const AvatarImage = exports.AvatarImage = /*#__PURE__*/React.forwardRef(function
       }
     }
   });
+  const state = {
+    imageLoadingStatus,
+    transitionStatus
+  };
   const element = (0, _useRenderElement.useRenderElement)('img', componentProps, {
     state,
     ref: [forwardedRef, imageRef],

package/checkbox/indicator/CheckboxIndicator.js

@@ -50,11 +50,11 @@ const CheckboxIndicator = exports.CheckboxIndicator = /*#__PURE__*/React.forward
     }
   });
   const baseStateAttributesMapping = (0, _useStateAttributesMapping.useStateAttributesMapping)(rootState);
-  const stateAttributesMapping = React.useMemo(() => ({
+  const stateAttributesMapping = {
     ...baseStateAttributesMapping,
     ..._stateAttributesMapping.transitionStatusMapping,
     ..._constants.fieldValidityMapping
-  }), [baseStateAttributesMapping]);
+  };
   const shouldRender = keepMounted || mounted;
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     ref: [forwardedRef, indicatorRef],

package/checkbox/root/CheckboxRoot.js

@@ -9,11 +9,12 @@ exports.PARENT_CHECKBOX = exports.CheckboxRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _empty = require("@base-ui/utils/empty");
 var _useControlled = require("@base-ui/utils/useControlled");
-var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
 var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
+var _owner = require("@base-ui/utils/owner");
+var _getDefaultFormSubmitter = require("@base-ui/utils/getDefaultFormSubmitter");
 var _noop = require("../../internals/noop");
 var _useStateAttributesMapping = require("../utils/useStateAttributesMapping");
 var _useRenderElement = require("../../internals/useRenderElement");
@@ -52,7 +53,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
     indeterminate = false,
     inputRef: inputRefProp,
     name: nameProp,
-    onCheckedChange: onCheckedChangeProp,
+    onCheckedChange,
     parent = false,
     readOnly = false,
     render,
@@ -108,7 +109,6 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
       groupProps = groupContext.parent.getChildProps(value);
     }
   }
-  const onCheckedChange = (0, _useStableCallback.useStableCallback)(onCheckedChangeProp);
   const {
     checked: groupChecked = checkedProp,
     indeterminate: groupIndeterminate = indeterminate,
@@ -144,7 +144,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
     hasRegisteredRef.current = true;
     registerControlId(controlSourceRef.current, inputId);
     return undefined;
-  }, [inputId, groupContext, registerControlId, parent, controlSourceRef]);
+  }, [inputId, registerControlId, controlSourceRef]);
   React.useEffect(() => {
     const controlSource = controlSourceRef.current;
     return () => {
@@ -155,11 +155,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
       registerControlId(controlSource, undefined);
     };
   }, [registerControlId, controlSourceRef]);
-  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
-    enabled: !groupContext,
-    id,
-    value: checked
-  });
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, id, checked, undefined, !groupContext);
   const inputRef = React.useRef(null);
   const mergedInputRef = (0, _useMergedRefs.useMergedRefs)(inputRefProp, inputRef, validation.inputRef);
   const ariaLabelledBy = (0, _useAriaLabelledBy.useAriaLabelledBy)(ariaLabelledByProp, labelId, inputRef, !nativeButton, inputId ?? undefined);
@@ -211,7 +207,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
       const nextChecked = event.currentTarget.checked;
       const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent);
       groupOnChange?.(nextChecked, details);
-      onCheckedChange(nextChecked, details);
+      onCheckedChange?.(nextChecked, details);
       if (details.isCanceled) {
         return;
       }
@@ -276,12 +272,54 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
           validation.commit(groupContext ? groupValue : inputEl.checked);
         }
       },
+      onKeyDown(event) {
+        if (event.key !== 'Enter') {
+          return;
+        }
+
+        // Let consumer `preventDefault()` handlers opt out while defensively stopping
+        // any remaining Base UI Enter handling from treating the checkbox as a button.
+        event.preventBaseUIHandler();
+        if (event.defaultPrevented) {
+          return;
+        }
+        const formToSubmit = inputRef.current?.form ?? null;
+        const currentTarget = event.currentTarget;
+        const nativeEvent = event.nativeEvent;
+        const originalPreventDefault = event.preventDefault;
+        const originalNativePreventDefault = nativeEvent.preventDefault;
+        let preventDefaultCalledAfterPropagation = false;
+        event.preventDefault = () => {
+          preventDefaultCalledAfterPropagation = true;
+          originalPreventDefault.call(event);
+        };
+        nativeEvent.preventDefault = () => {
+          preventDefaultCalledAfterPropagation = true;
+          originalNativePreventDefault.call(nativeEvent);
+        };
+
+        // Enter should not activate/toggle the checkbox. Cancel the native button behavior
+        // without setting React's synthetic `defaultPrevented`, so ancestor React handlers
+        // can still opt out by calling `preventDefault()` during propagation.
+        originalNativePreventDefault.call(nativeEvent);
+        (0, _owner.ownerWindow)(currentTarget).queueMicrotask(() => {
+          event.preventDefault = originalPreventDefault;
+          nativeEvent.preventDefault = originalNativePreventDefault;
+          if (!preventDefaultCalledAfterPropagation) {
+            (0, _getDefaultFormSubmitter.getDefaultFormSubmitter)(formToSubmit)?.click();
+          }
+        });
+      },
       onClick(event) {
         if (readOnly || disabled) {
           return;
         }
         event.preventDefault();
-        inputRef.current?.dispatchEvent(new PointerEvent('click', {
+        const input = inputRef.current;
+        if (!input) {
+          return;
+        }
+        input.dispatchEvent(new ((0, _owner.ownerWindow)(input).PointerEvent)('click', {
           bubbles: true,
           shiftKey: event.shiftKey,
           ctrlKey: event.ctrlKey,

package/checkbox-group/CheckboxGroup.js

@@ -90,11 +90,7 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
       controlRef.current = element;
     }
   }, []);
-  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
-    enabled: !!fieldName,
-    id,
-    value
-  });
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, id, value, undefined, !!fieldName);
   const resolvedValue = value ?? _empty.EMPTY_ARRAY;
   (0, _useValueChanged.useValueChanged)(resolvedValue, () => {
     if (fieldName) {

package/collapsible/panel/CollapsiblePanel.js

@@ -9,12 +9,12 @@ exports.CollapsiblePanel = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _warn = require("@base-ui/utils/warn");
+var _resolveStyle = require("../../utils/resolveStyle");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _CollapsibleRootContext = require("../root/CollapsibleRootContext");
 var _stateAttributesMapping = require("../root/stateAttributesMapping");
 var _useCollapsiblePanel = require("./useCollapsiblePanel");
 var _CollapsiblePanelCssVars = require("./CollapsiblePanelCssVars");
-var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
 /**
  * A panel with the collapsible contents.
  * Renders a `<div>` element.
@@ -35,31 +35,19 @@ const CollapsiblePanel = exports.CollapsiblePanel = /*#__PURE__*/React.forwardRe
     // eslint-disable-next-line react-hooks/rules-of-hooks
     (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
       if (hiddenUntilFoundProp && keepMountedProp === false) {
-        (0, _warn.warn)('The `keepMounted={false}` prop on a Collapsible will be ignored when using `hiddenUntilFound` since it requires the Panel to remain mounted even when closed.');
+        (0, _warn.warn)('The `keepMounted={false}` prop on `Collapsible.Panel` is ignored when `hiddenUntilFound` is enabled, since the panel must remain mounted while closed.');
       }
     }, [hiddenUntilFoundProp, keepMountedProp]);
   }
   const {
-    abortControllerRef,
-    animationTypeRef,
-    height,
     mounted,
     onOpenChange,
     open,
     panelId,
-    panelRef,
-    runOnceAnimationsFinish,
-    setDimensions,
-    setHiddenUntilFound,
-    setKeepMounted,
     setMounted,
     setPanelIdState,
     setOpen,
-    setVisible,
     state,
-    transitionDimensionRef,
-    visible,
-    width,
     transitionStatus
   } = (0, _CollapsibleRootContext.useCollapsibleRootContext)();
   const hiddenUntilFound = hiddenUntilFoundProp ?? false;
@@ -73,64 +61,54 @@ const CollapsiblePanel = exports.CollapsiblePanel = /*#__PURE__*/React.forwardRe
     }
     return undefined;
   }, [idProp, setPanelIdState]);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    setHiddenUntilFound(hiddenUntilFound);
-  }, [setHiddenUntilFound, hiddenUntilFound]);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    setKeepMounted(keepMounted);
-  }, [setKeepMounted, keepMounted]);
   const {
-    props
+    height,
+    props,
+    ref,
+    shouldPreventOpenAnimation,
+    shouldRender,
+    transitionStatus: panelTransitionStatus,
+    width
   } = (0, _useCollapsiblePanel.useCollapsiblePanel)({
-    abortControllerRef,
-    animationTypeRef,
     externalRef: forwardedRef,
-    height,
     hiddenUntilFound,
     id: panelId,
     keepMounted,
     mounted,
     onOpenChange,
     open,
-    panelRef,
-    runOnceAnimationsFinish,
-    setDimensions,
     setMounted,
     setOpen,
-    setVisible,
-    transitionDimensionRef,
-    visible,
-    width
-  });
-  (0, _useOpenChangeComplete.useOpenChangeComplete)({
-    open: open && transitionStatus === 'idle',
-    ref: panelRef,
-    onComplete() {
-      if (!open) {
-        return;
-      }
-      setDimensions({
-        height: undefined,
-        width: undefined
-      });
-    }
+    transitionStatus
   });
-  const panelState = React.useMemo(() => ({
+  const panelState = {
     ...state,
-    transitionStatus
-  }), [state, transitionStatus]);
-  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    transitionStatus: panelTransitionStatus
+  };
+  const resolvedStyle = (0, _resolveStyle.resolveStyle)(style, panelState);
+  const element = (0, _useRenderElement.useRenderElement)('div', {
+    ...componentProps,
+    style: undefined
+  }, {
     state: panelState,
-    ref: [forwardedRef, panelRef],
+    ref,
     props: [props, {
       style: {
         [_CollapsiblePanelCssVars.CollapsiblePanelCssVars.collapsiblePanelHeight]: height === undefined ? 'auto' : `${height}px`,
         [_CollapsiblePanelCssVars.CollapsiblePanelCssVars.collapsiblePanelWidth]: width === undefined ? 'auto' : `${width}px`
       }
-    }, elementProps],
+    }, elementProps, resolvedStyle ? {
+      style: resolvedStyle
+    } : undefined,
+    // Resolve the public `style` prop so temporary `animationName: 'none'`
+    // can still win after user's inline styles have been merged.
+    shouldPreventOpenAnimation ? {
+      style: {
+        animationName: 'none'
+      }
+    } : undefined],
     stateAttributesMapping: _stateAttributesMapping.collapsibleStateAttributesMapping
   });
-  const shouldRender = keepMounted || hiddenUntilFound || mounted;
   if (!shouldRender) {
     return null;
   }

package/collapsible/panel/useCollapsiblePanel.d.ts

@@ -1,16 +1,10 @@
 import * as React from 'react';
 import { HTMLProps } from "../../internals/types.js";
-import type { AnimationType, Dimensions } from "../root/useCollapsibleRoot.js";
 import type { CollapsibleRoot } from "../root/CollapsibleRoot.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 export declare function useCollapsiblePanel(parameters: UseCollapsiblePanelParameters): UseCollapsiblePanelReturnValue;
 export interface UseCollapsiblePanelParameters {
-  abortControllerRef: React.RefObject<AbortController | null>;
-  animationTypeRef: React.RefObject<AnimationType>;
   externalRef: React.ForwardedRef<HTMLDivElement>;
-  /**
-   * The height of the panel.
-   */
-  height: number | undefined;
   /**
    * Allows the browser's built-in page search to find and expand the panel contents.
    *
@@ -38,24 +32,16 @@ export interface UseCollapsiblePanelParameters {
    * Whether the collapsible panel is currently open.
    */
   open: boolean;
-  panelRef: React.RefObject<HTMLElement | null>;
-  runOnceAnimationsFinish: (fnToExecute: () => void, signal?: AbortSignal | null) => void;
-  setDimensions: React.Dispatch<React.SetStateAction<Dimensions>>;
   setMounted: (nextMounted: boolean) => void;
   setOpen: (nextOpen: boolean) => void;
-  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  transitionDimensionRef: React.RefObject<'height' | 'width' | null>;
-  /**
-   * The visible state of the panel used to determine the `[hidden]` attribute
-   * only when CSS keyframe animations are used.
-   */
-  visible: boolean;
-  /**
-   * The width of the panel.
-   */
-  width: number | undefined;
+  transitionStatus: TransitionStatus;
 }
 export interface UseCollapsiblePanelReturnValue {
+  height: number | undefined;
   props: HTMLProps;
-}
-export interface UseCollapsiblePanelState {}
+  ref: React.Ref<HTMLDivElement>;
+  shouldPreventOpenAnimation: boolean;
+  shouldRender: boolean;
+  transitionStatus: TransitionStatus;
+  width: number | undefined;
+}