@base-ui/react 1.4.1 → 1.5.0

package/esm/collapsible/root/CollapsibleRoot.d.ts

@@ -10,7 +10,7 @@ import { REASONS } from "../../internals/reasons.js";
  * Documentation: [Base UI Collapsible](https://base-ui.com/react/components/collapsible)
  */
 export declare const CollapsibleRoot: React.ForwardRefExoticComponent<Omit<CollapsibleRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface CollapsibleRootState extends Pick<UseCollapsibleRootReturnValue, 'open' | 'disabled'> {}
+export interface CollapsibleRootState extends Pick<UseCollapsibleRootReturnValue, 'open' | 'disabled' | 'transitionStatus'> {}
 export interface CollapsibleRootProps extends BaseUIComponentProps<'div', CollapsibleRootState> {
   /**
    * Whether the collapsible panel is currently open.

package/esm/collapsible/root/CollapsibleRootContext.d.ts

@@ -1,11 +1,9 @@
 import * as React from 'react';
 import type { UseCollapsibleRootReturnValue } from "./useCollapsibleRoot.js";
 import type { CollapsibleRoot, CollapsibleRootState } from "./CollapsibleRoot.js";
-import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 export interface CollapsibleRootContext extends UseCollapsibleRootReturnValue {
   onOpenChange: (open: boolean, eventDetails: CollapsibleRoot.ChangeEventDetails) => void;
   state: CollapsibleRootState;
-  transitionStatus: TransitionStatus;
 }
 export declare const CollapsibleRootContext: React.Context<CollapsibleRootContext | undefined>;
 export declare function useCollapsibleRootContext(): CollapsibleRootContext;

package/esm/collapsible/root/useCollapsibleRoot.d.ts

@@ -1,11 +1,6 @@
 import * as React from 'react';
 import { TransitionStatus } from "../../internals/useTransitionStatus.js";
 import type { CollapsibleRoot } from "./CollapsibleRoot.js";
-export type AnimationType = 'css-transition' | 'css-animation' | 'none' | null;
-export interface Dimensions {
-  height: number | undefined;
-  width: number | undefined;
-}
 export declare function useCollapsibleRoot(parameters: UseCollapsibleRootParameters): UseCollapsibleRootReturnValue;
 export interface UseCollapsibleRootParameters {
   /**
@@ -32,17 +27,11 @@ export interface UseCollapsibleRootParameters {
   disabled: boolean;
 }
 export interface UseCollapsibleRootReturnValue {
-  abortControllerRef: React.RefObject<AbortController | null>;
-  animationTypeRef: React.RefObject<AnimationType>;
   /**
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
   handleTrigger: (event: React.MouseEvent | React.KeyboardEvent) => void;
-  /**
-   * The height of the panel.
-   */
-  height: number | undefined;
   /**
    * Whether the collapsible panel is mounted for transition and hidden-state
    * purposes. This can be `false` while the element remains in the DOM when
@@ -54,25 +43,9 @@ export interface UseCollapsibleRootReturnValue {
    */
   open: boolean;
   panelId: React.HTMLAttributes<Element>['id'];
-  panelRef: React.RefObject<HTMLElement | null>;
-  runOnceAnimationsFinish: (fnToExecute: () => void, signal?: AbortSignal | null) => void;
-  setDimensions: React.Dispatch<React.SetStateAction<Dimensions>>;
-  setHiddenUntilFound: React.Dispatch<React.SetStateAction<boolean>>;
-  setKeepMounted: React.Dispatch<React.SetStateAction<boolean>>;
   setMounted: (nextMounted: boolean) => void;
   setOpen: (open: boolean) => void;
   setPanelIdState: (id: string | undefined) => void;
-  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  transitionDimensionRef: React.RefObject<'height' | 'width' | null>;
   transitionStatus: TransitionStatus;
-  /**
-   * 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;
 }
 export interface UseCollapsibleRootState {}

package/esm/collapsible/root/useCollapsibleRoot.js

@@ -2,12 +2,10 @@
 
 import * as React from 'react';
 import { useControlled } from '@base-ui/utils/useControlled';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
-import { useAnimationsFinished } from "../../internals/useAnimationsFinished.js";
 import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
 export function useCollapsibleRoot(parameters) {
   const {
@@ -16,7 +14,6 @@ export function useCollapsibleRoot(parameters) {
     onOpenChange,
     disabled
   } = parameters;
-  const isControlled = openParam !== undefined;
   const [open, setOpen] = useControlled({
     controlled: openParam,
     default: defaultOpen,
@@ -28,24 +25,9 @@ export function useCollapsibleRoot(parameters) {
     setMounted,
     transitionStatus
   } = useTransitionStatus(open, true, true);
-  const [visible, setVisible] = React.useState(open);
-  const [{
-    height,
-    width
-  }, setDimensions] = React.useState({
-    height: undefined,
-    width: undefined
-  });
   const defaultPanelId = useBaseUiId();
   const [panelIdState, setPanelIdState] = React.useState();
   const panelId = panelIdState ?? defaultPanelId;
-  const [hiddenUntilFound, setHiddenUntilFound] = React.useState(false);
-  const [keepMounted, setKeepMounted] = React.useState(false);
-  const abortControllerRef = React.useRef(null);
-  const animationTypeRef = React.useRef(null);
-  const transitionDimensionRef = React.useRef(null);
-  const panelRef = React.useRef(null);
-  const runOnceAnimationsFinish = useAnimationsFinished(panelRef, false);
   const handleTrigger = useStableCallback(event => {
     const nextOpen = !open;
     const eventDetails = createChangeEventDetails(REASONS.triggerPress, event.nativeEvent);
@@ -53,61 +35,17 @@ export function useCollapsibleRoot(parameters) {
     if (eventDetails.isCanceled) {
       return;
     }
-    const panel = panelRef.current;
-    if (animationTypeRef.current === 'css-animation' && panel != null) {
-      panel.style.removeProperty('animation-name');
-    }
-    if (!hiddenUntilFound && !keepMounted) {
-      if (animationTypeRef.current != null && animationTypeRef.current !== 'css-animation') {
-        if (!mounted && nextOpen) {
-          setMounted(true);
-        }
-      }
-      if (animationTypeRef.current === 'css-animation') {
-        if (!visible && nextOpen) {
-          setVisible(true);
-        }
-        if (!mounted && nextOpen) {
-          setMounted(true);
-        }
-      }
-    }
     setOpen(nextOpen);
-    if (animationTypeRef.current === 'none' && mounted && !nextOpen) {
-      setMounted(false);
-    }
   });
-  useIsoLayoutEffect(() => {
-    /**
-     * Close immediately in controlled mode when no CSS animations or
-     * transitions are applied. `keepMounted` only keeps the element in the
-     * DOM; `mounted` must still become `false` so the panel regains `hidden`.
-     */
-    if (isControlled && animationTypeRef.current === 'none' && !open) {
-      setMounted(false);
-    }
-  }, [isControlled, open, openParam, setMounted]);
   return React.useMemo(() => ({
-    abortControllerRef,
-    animationTypeRef,
     disabled,
     handleTrigger,
-    height,
     mounted,
     open,
     panelId,
-    panelRef,
-    runOnceAnimationsFinish,
-    setDimensions,
-    setHiddenUntilFound,
-    setKeepMounted,
     setMounted,
     setOpen,
     setPanelIdState,
-    setVisible,
-    transitionDimensionRef,
-    transitionStatus,
-    visible,
-    width
-  }), [abortControllerRef, animationTypeRef, disabled, handleTrigger, height, mounted, open, panelId, panelRef, runOnceAnimationsFinish, setDimensions, setHiddenUntilFound, setKeepMounted, setMounted, setOpen, setVisible, transitionDimensionRef, transitionStatus, visible, width]);
+    transitionStatus
+  }), [disabled, handleTrigger, mounted, open, panelId, setMounted, setOpen, setPanelIdState, transitionStatus]);
 }

package/esm/collapsible/trigger/CollapsibleTrigger.js

@@ -42,15 +42,14 @@ export const CollapsibleTrigger = /*#__PURE__*/React.forwardRef(function Collaps
     focusableWhenDisabled: true,
     native: nativeButton
   });
-  const props = React.useMemo(() => ({
-    'aria-controls': open ? panelId : undefined,
-    'aria-expanded': open,
-    onClick: handleTrigger
-  }), [panelId, open, handleTrigger]);
   const element = useRenderElement('button', componentProps, {
     state,
     ref: [forwardedRef, buttonRef],
-    props: [props, elementProps, getButtonProps],
+    props: [{
+      'aria-controls': open ? panelId : undefined,
+      'aria-expanded': open,
+      onClick: handleTrigger
+    }, elementProps, getButtonProps],
     stateAttributesMapping
   });
   return element;

package/esm/combobox/arrow/ComboboxArrow.js

@@ -16,8 +16,8 @@ import { popupStateMapping } from "../../utils/popupStateMapping.js";
  */
 export const ComboboxArrow = /*#__PURE__*/React.forwardRef(function ComboboxArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/combobox/backdrop/ComboboxBackdrop.js

@@ -20,8 +20,8 @@ const stateAttributesMapping = {
  */
 export const ComboboxBackdrop = /*#__PURE__*/React.forwardRef(function ComboboxBackdrop(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/combobox/chip/ComboboxChip.js

@@ -12,6 +12,7 @@ import { stopEvent } from "../../floating-ui-react/utils.js";
 import { selectors } from "../store.js";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
+import { useDirection } from "../../internals/direction-context/DirectionContext.js";
 
 /**
  * An individual chip that represents a value in a multiselectable input.
@@ -32,6 +33,7 @@ export const ComboboxChip = /*#__PURE__*/React.forwardRef(function ComboboxChip(
     setHighlightedChipIndex,
     chipsRef
   } = useComboboxChipsContext();
+  const direction = useDirection();
   const disabled = useStore(store, selectors.disabled);
   const readOnly = useStore(store, selectors.readOnly);
   const selectedValue = useStore(store, selectors.selectedValue);
@@ -41,14 +43,17 @@ export const ComboboxChip = /*#__PURE__*/React.forwardRef(function ComboboxChip(
   } = useCompositeListItem();
   function handleKeyDown(event) {
     let nextIndex = index;
-    if (event.key === 'ArrowLeft') {
+    const isRtl = direction === 'rtl';
+    const previousChipKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
+    const nextChipKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+    if (event.key === previousChipKey) {
       event.preventDefault();
       if (index > 0) {
         nextIndex = index - 1;
       } else {
         nextIndex = undefined;
       }
-    } else if (event.key === 'ArrowRight') {
+    } else if (event.key === nextChipKey) {
       event.preventDefault();
       if (index < chipsRef.current.length - 1) {
         nextIndex = index + 1;

package/esm/combobox/clear/ComboboxClear.d.ts

@@ -17,6 +17,10 @@ export interface ComboboxClearState {
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * Whether the clear button should be visible.
+   */
+  visible: boolean;
   /**
    * The transition status of the component.
    */

package/esm/combobox/clear/ComboboxClear.js

@@ -68,6 +68,7 @@ export const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClea
   } = useTransitionStatus(visible);
   const state = {
     disabled,
+    visible,
     open,
     transitionStatus
   };

package/esm/combobox/clear/ComboboxClearDataAttributes.d.ts

@@ -7,6 +7,10 @@ export declare enum ComboboxClearDataAttributes {
    * Present when the button is disabled.
    */
   disabled = "data-disabled",
+  /**
+   * Present when the clear button is visible.
+   */
+  visible = "data-visible",
   /**
    * Present when the button is animating in.
    */

package/esm/combobox/clear/ComboboxClearDataAttributes.js

@@ -8,6 +8,10 @@ export let ComboboxClearDataAttributes = function (ComboboxClearDataAttributes)
    * Present when the button is disabled.
    */
   ComboboxClearDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the clear button is visible.
+   */
+  ComboboxClearDataAttributes["visible"] = "data-visible";
   /**
    * Present when the button is animating in.
    */

package/esm/combobox/icon/ComboboxIcon.js

@@ -11,8 +11,8 @@ import { useRenderElement } from "../../internals/useRenderElement.js";
  */
 export const ComboboxIcon = /*#__PURE__*/React.forwardRef(function ComboboxIcon(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/esm/combobox/input/ComboboxInput.js

@@ -9,7 +9,7 @@ import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useComboboxDerivedItemsContext, useComboboxInputValueContext, useComboboxRootContext } from "../root/ComboboxRootContext.js";
 import { triggerStateAttributesMapping } from "../utils/stateAttributesMapping.js";
 import { selectors } from "../store.js";
-import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { DEFAULT_FIELD_ROOT_CONTEXT, FieldRootContext, useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
 import { DEFAULT_FIELD_STATE_ATTRIBUTES } from "../../internals/field-constants/constants.js";
 import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
 import { useComboboxChipsContext } from "../chips/ComboboxChipsContext.js";
@@ -89,6 +89,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
   const isComposingRef = React.useRef(false);
   const lastActiveIndexRef = React.useRef(null);
   const shouldRestoreActiveIndexRef = React.useRef(false);
+  const inputOwnsFormValue = selectionMode === 'none' && !hasPositionerParent;
   const setInputElement = useStableCallback(element => {
     const nextIsInsidePopup = hasPositionerParent || store.state.inline;
     if (nextIsInsidePopup && !store.state.hasInputValue) {
@@ -96,7 +97,8 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
     }
     store.update({
       inputElement: element,
-      inputInsidePopup: nextIsInsidePopup
+      inputInsidePopup: nextIsInsidePopup,
+      inputOwnsFormValue
     });
   });
   const validationProps = hasPositionerParent || !validation ? elementProps : validation.getValidationProps(elementProps);
@@ -117,15 +119,18 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
       highlightedChipIndex
     } = comboboxChipsContext;
     const renderedChipsCount = comboboxChipsContext.chipsRef.current.length;
+    const isRtl = direction === 'rtl';
+    const previousChipKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
+    const nextChipKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
     if (highlightedChipIndex !== undefined) {
-      if (event.key === 'ArrowLeft') {
+      if (event.key === previousChipKey) {
         event.preventDefault();
         if (highlightedChipIndex > 0) {
           nextIndex = highlightedChipIndex - 1;
         } else {
           nextIndex = undefined;
         }
-      } else if (event.key === 'ArrowRight') {
+      } else if (event.key === nextChipKey) {
         event.preventDefault();
         if (highlightedChipIndex < renderedChipsCount - 1) {
           nextIndex = highlightedChipIndex + 1;
@@ -148,7 +153,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
     }
 
     // Handle navigation when no chip is highlighted
-    if (event.key === 'ArrowLeft' && (event.currentTarget.selectionStart ?? 0) === 0 && selectedValue.length > 0) {
+    if (event.key === previousChipKey && (event.currentTarget.selectionStart ?? 0) === 0 && selectedValue.length > 0) {
       event.preventDefault();
       nextIndex = renderedChipsCount > 0 ? renderedChipsCount - 1 : undefined;
     } else if (event.key === 'Backspace' && event.currentTarget.value === '' && selectedValue.length > 0) {
@@ -174,7 +179,7 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
       readOnly,
       required: selectionMode === 'none' ? required : undefined,
       form,
-      ...(selectionMode === 'none' && name && {
+      ...(inputOwnsFormValue && name && {
         name
       }),
       id,
@@ -396,10 +401,14 @@ export const ComboboxInput = /*#__PURE__*/React.forwardRef(function ComboboxInpu
     }, validationProps],
     stateAttributesMapping: triggerStateAttributesMapping
   });
+  const renderedInput = hasPositionerParent ? /*#__PURE__*/_jsx(FieldRootContext.Provider, {
+    value: DEFAULT_FIELD_ROOT_CONTEXT,
+    children: element
+  }) : element;
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [open && focusManagerModal && /*#__PURE__*/_jsx(ComboboxInternalDismissButton, {
       ref: store.state.startDismissRef
-    }), element]
+    }), renderedInput]
   });
 });
 if (process.env.NODE_ENV !== "production") ComboboxInput.displayName = "ComboboxInput";

package/esm/combobox/item/ComboboxItem.js

@@ -24,11 +24,11 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
   const {
     render,
     className,
+    style,
     value: itemValue = null,
     index: indexProp,
     disabled = false,
     nativeButton = false,
-    style,
     ...elementProps
   } = componentProps;
   const didPointerDownRef = React.useRef(false);
@@ -55,7 +55,7 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
   const rootId = useStore(store, selectors.id);
   const highlighted = useStore(store, selectors.isActive, index);
   const matchesSelectedValue = useStore(store, selectors.isSelected, itemValue);
-  const getItemProps = useStore(store, selectors.getItemProps);
+  const itemProps = useStore(store, selectors.itemProps);
   const itemRef = React.useRef(null);
   const id = rootId != null && hasRegistered ? `${rootId}-${index}` : undefined;
   const selected = matchesSelectedValue && selectable;
@@ -101,17 +101,6 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
       store.set('selectedIndex', index);
     }
   }, [hasRegistered, hasItems, open, store, index, itemValue, isItemEqualToValue]);
-  const state = {
-    disabled,
-    selected,
-    highlighted
-  };
-  const rootProps = getItemProps({
-    active: highlighted,
-    selected
-  });
-  rootProps.id = undefined;
-  rootProps.onFocus = undefined;
   const {
     getButtonProps,
     buttonRef
@@ -121,6 +110,11 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
     native: nativeButton,
     composite: true
   });
+  const state = {
+    disabled,
+    selected,
+    highlighted
+  };
   function commitSelection(nativeEvent) {
     function selectItem() {
       store.state.handleSelection(nativeEvent, itemValue);
@@ -167,7 +161,7 @@ export const ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRe
   const element = useRenderElement('div', componentProps, {
     ref: [buttonRef, forwardedRef, listItem.ref, itemRef],
     state,
-    props: [rootProps, defaultProps, elementProps, getButtonProps]
+    props: [itemProps, defaultProps, elementProps, getButtonProps]
   });
   const contextValue = React.useMemo(() => ({
     selected,

package/esm/combobox/item-indicator/ComboboxItemIndicator.js

@@ -31,8 +31,7 @@ export const ComboboxItemIndicator = /*#__PURE__*/React.forwardRef(function Comb
   });
 });
 
-/** The core implementation of the indicator is split here to avoid paying the hooks
- * costs unless the element needs to be mounted. */
+// Split the core implementation to avoid paying the hook costs unless the element needs to mount.
 if (process.env.NODE_ENV !== "production") ComboboxItemIndicator.displayName = "ComboboxItemIndicator";
 const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentProps, forwardedRef) => {
   const {