@base-ui/react 1.4.1 → 1.5.0

package/esm/autocomplete/root/AutocompleteRoot.js

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { AriaCombobox } from "../../combobox/root/AriaCombobox.js";
 import { useCoreFilter } from "../../combobox/root/utils/useFilter.js";
 import { stringifyAsLabel } from "../../internals/resolveValueLabel.js";
@@ -47,13 +46,6 @@ export function AutocompleteRoot(props) {
   } else {
     resolvedInputValue = internalValue;
   }
-  const handleValueChange = useStableCallback((nextValue, eventDetails) => {
-    setInlineInputValue('');
-    if (!isControlled) {
-      setInternalValue(nextValue);
-    }
-    onValueChange?.(nextValue, eventDetails);
-  });
   const collator = useCoreFilter();
   const baseFilter = React.useMemo(() => {
     if (other.filter !== undefined) {
@@ -75,7 +67,14 @@ export function AutocompleteRoot(props) {
       return baseFilter(item, resolvedQuery, toString);
     };
   }, [baseFilter, mode, resolvedQuery, staticItems]);
-  const handleItemHighlighted = 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.pointer) {
       return;
@@ -89,7 +88,7 @@ export function AutocompleteRoot(props) {
     } else {
       setInlineInputValue('');
     }
-  });
+  }
   return /*#__PURE__*/_jsx(AriaCombobox, {
     ...other,
     itemToStringLabel: itemToStringValue,

package/esm/avatar/image/AvatarImage.js

@@ -52,10 +52,6 @@ export const AvatarImage = /*#__PURE__*/React.forwardRef(function AvatarImage(co
       handleLoadingStatusChange(imageLoadingStatus);
     }
   }, [imageLoadingStatus, handleLoadingStatusChange]);
-  const state = {
-    imageLoadingStatus,
-    transitionStatus
-  };
   useOpenChangeComplete({
     open: isVisible,
     ref: imageRef,
@@ -65,6 +61,10 @@ export const AvatarImage = /*#__PURE__*/React.forwardRef(function AvatarImage(co
       }
     }
   });
+  const state = {
+    imageLoadingStatus,
+    transitionStatus
+  };
   const element = useRenderElement('img', componentProps, {
     state,
     ref: [forwardedRef, imageRef],

package/esm/checkbox/indicator/CheckboxIndicator.js

@@ -45,11 +45,11 @@ export const CheckboxIndicator = /*#__PURE__*/React.forwardRef(function Checkbox
     }
   });
   const baseStateAttributesMapping = useStateAttributesMapping(rootState);
-  const stateAttributesMapping = React.useMemo(() => ({
+  const stateAttributesMapping = {
     ...baseStateAttributesMapping,
     ...transitionStatusMapping,
     ...fieldValidityMapping
-  }), [baseStateAttributesMapping]);
+  };
   const shouldRender = keepMounted || mounted;
   const element = useRenderElement('span', componentProps, {
     ref: [forwardedRef, indicatorRef],

package/esm/checkbox/root/CheckboxRoot.js

@@ -3,11 +3,12 @@
 import * as React from 'react';
 import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { useControlled } from '@base-ui/utils/useControlled';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
+import { ownerWindow } from '@base-ui/utils/owner';
+import { getDefaultFormSubmitter } from '@base-ui/utils/getDefaultFormSubmitter';
 import { NOOP } from "../../internals/noop.js";
 import { useStateAttributesMapping } from "../utils/useStateAttributesMapping.js";
 import { useRenderElement } from "../../internals/useRenderElement.js";
@@ -46,7 +47,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
     indeterminate = false,
     inputRef: inputRefProp,
     name: nameProp,
-    onCheckedChange: onCheckedChangeProp,
+    onCheckedChange,
     parent = false,
     readOnly = false,
     render,
@@ -102,7 +103,6 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
       groupProps = groupContext.parent.getChildProps(value);
     }
   }
-  const onCheckedChange = useStableCallback(onCheckedChangeProp);
   const {
     checked: groupChecked = checkedProp,
     indeterminate: groupIndeterminate = indeterminate,
@@ -138,7 +138,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
     hasRegisteredRef.current = true;
     registerControlId(controlSourceRef.current, inputId);
     return undefined;
-  }, [inputId, groupContext, registerControlId, parent, controlSourceRef]);
+  }, [inputId, registerControlId, controlSourceRef]);
   React.useEffect(() => {
     const controlSource = controlSourceRef.current;
     return () => {
@@ -149,11 +149,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
       registerControlId(controlSource, undefined);
     };
   }, [registerControlId, controlSourceRef]);
-  useRegisterFieldControl(controlRef, {
-    enabled: !groupContext,
-    id,
-    value: checked
-  });
+  useRegisterFieldControl(controlRef, id, checked, undefined, !groupContext);
   const inputRef = React.useRef(null);
   const mergedInputRef = useMergedRefs(inputRefProp, inputRef, validation.inputRef);
   const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, inputId ?? undefined);
@@ -205,7 +201,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
       const nextChecked = event.currentTarget.checked;
       const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
       groupOnChange?.(nextChecked, details);
-      onCheckedChange(nextChecked, details);
+      onCheckedChange?.(nextChecked, details);
       if (details.isCanceled) {
         return;
       }
@@ -270,12 +266,54 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
           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);
+        ownerWindow(currentTarget).queueMicrotask(() => {
+          event.preventDefault = originalPreventDefault;
+          nativeEvent.preventDefault = originalNativePreventDefault;
+          if (!preventDefaultCalledAfterPropagation) {
+            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 (ownerWindow(input).PointerEvent)('click', {
           bubbles: true,
           shiftKey: event.shiftKey,
           ctrlKey: event.ctrlKey,

package/esm/checkbox-group/CheckboxGroup.js

@@ -85,11 +85,7 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
       controlRef.current = element;
     }
   }, []);
-  useRegisterFieldControl(controlRef, {
-    enabled: !!fieldName,
-    id,
-    value
-  });
+  useRegisterFieldControl(controlRef, id, value, undefined, !!fieldName);
   const resolvedValue = value ?? EMPTY_ARRAY;
   useValueChanged(resolvedValue, () => {
     if (fieldName) {

package/esm/collapsible/panel/CollapsiblePanel.js

@@ -3,12 +3,12 @@
 import * as React from 'react';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { warn } from '@base-ui/utils/warn';
+import { resolveStyle } from "../../utils/resolveStyle.js";
 import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useCollapsibleRootContext } from "../root/CollapsibleRootContext.js";
 import { collapsibleStateAttributesMapping } from "../root/stateAttributesMapping.js";
 import { useCollapsiblePanel } from "./useCollapsiblePanel.js";
 import { CollapsiblePanelCssVars } from "./CollapsiblePanelCssVars.js";
-import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
 /**
  * A panel with the collapsible contents.
  * Renders a `<div>` element.
@@ -29,31 +29,19 @@ export const CollapsiblePanel = /*#__PURE__*/React.forwardRef(function Collapsib
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useIsoLayoutEffect(() => {
       if (hiddenUntilFoundProp && keepMountedProp === false) {
-        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.');
+        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
   } = useCollapsibleRootContext();
   const hiddenUntilFound = hiddenUntilFoundProp ?? false;
@@ -67,64 +55,54 @@ export const CollapsiblePanel = /*#__PURE__*/React.forwardRef(function Collapsib
     }
     return undefined;
   }, [idProp, setPanelIdState]);
-  useIsoLayoutEffect(() => {
-    setHiddenUntilFound(hiddenUntilFound);
-  }, [setHiddenUntilFound, hiddenUntilFound]);
-  useIsoLayoutEffect(() => {
-    setKeepMounted(keepMounted);
-  }, [setKeepMounted, keepMounted]);
   const {
-    props
+    height,
+    props,
+    ref,
+    shouldPreventOpenAnimation,
+    shouldRender,
+    transitionStatus: panelTransitionStatus,
+    width
   } = useCollapsiblePanel({
-    abortControllerRef,
-    animationTypeRef,
     externalRef: forwardedRef,
-    height,
     hiddenUntilFound,
     id: panelId,
     keepMounted,
     mounted,
     onOpenChange,
     open,
-    panelRef,
-    runOnceAnimationsFinish,
-    setDimensions,
     setMounted,
     setOpen,
-    setVisible,
-    transitionDimensionRef,
-    visible,
-    width
-  });
-  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 = useRenderElement('div', componentProps, {
+    transitionStatus: panelTransitionStatus
+  };
+  const resolvedStyle = resolveStyle(style, panelState);
+  const element = useRenderElement('div', {
+    ...componentProps,
+    style: undefined
+  }, {
     state: panelState,
-    ref: [forwardedRef, panelRef],
+    ref,
     props: [props, {
       style: {
         [CollapsiblePanelCssVars.collapsiblePanelHeight]: height === undefined ? 'auto' : `${height}px`,
         [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: collapsibleStateAttributesMapping
   });
-  const shouldRender = keepMounted || hiddenUntilFound || mounted;
   if (!shouldRender) {
     return null;
   }

package/esm/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;
+}