@base-ui/react 1.4.1 → 1.5.0

package/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/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/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/collapsible/root/useCollapsibleRoot.js

@@ -8,12 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useCollapsibleRoot = useCollapsibleRoot;
 var React = _interopRequireWildcard(require("react"));
 var _useControlled = require("@base-ui/utils/useControlled");
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useBaseUiId = require("../../internals/useBaseUiId");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
-var _useAnimationsFinished = require("../../internals/useAnimationsFinished");
 var _useTransitionStatus = require("../../internals/useTransitionStatus");
 function useCollapsibleRoot(parameters) {
   const {
@@ -22,7 +20,6 @@ function useCollapsibleRoot(parameters) {
     onOpenChange,
     disabled
   } = parameters;
-  const isControlled = openParam !== undefined;
   const [open, setOpen] = (0, _useControlled.useControlled)({
     controlled: openParam,
     default: defaultOpen,
@@ -34,24 +31,9 @@ function useCollapsibleRoot(parameters) {
     setMounted,
     transitionStatus
   } = (0, _useTransitionStatus.useTransitionStatus)(open, true, true);
-  const [visible, setVisible] = React.useState(open);
-  const [{
-    height,
-    width
-  }, setDimensions] = React.useState({
-    height: undefined,
-    width: undefined
-  });
   const defaultPanelId = (0, _useBaseUiId.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 = (0, _useAnimationsFinished.useAnimationsFinished)(panelRef, false);
   const handleTrigger = (0, _useStableCallback.useStableCallback)(event => {
     const nextOpen = !open;
     const eventDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerPress, event.nativeEvent);
@@ -59,61 +41,17 @@ 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);
-    }
   });
-  (0, _useIsoLayoutEffect.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/collapsible/trigger/CollapsibleTrigger.js

@@ -48,15 +48,14 @@ const CollapsibleTrigger = exports.CollapsibleTrigger = /*#__PURE__*/React.forwa
     focusableWhenDisabled: true,
     native: nativeButton
   });
-  const props = React.useMemo(() => ({
-    'aria-controls': open ? panelId : undefined,
-    'aria-expanded': open,
-    onClick: handleTrigger
-  }), [panelId, open, handleTrigger]);
   const element = (0, _useRenderElement.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/combobox/arrow/ComboboxArrow.js

@@ -21,8 +21,8 @@ var _popupStateMapping = require("../../utils/popupStateMapping");
  */
 const ComboboxArrow = exports.ComboboxArrow = /*#__PURE__*/React.forwardRef(function ComboboxArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/combobox/backdrop/ComboboxBackdrop.js

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

package/combobox/chip/ComboboxChip.js

@@ -18,6 +18,7 @@ var _utils = require("../../floating-ui-react/utils");
 var _store2 = require("../store");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
+var _DirectionContext = require("../../internals/direction-context/DirectionContext");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An individual chip that represents a value in a multiselectable input.
@@ -37,6 +38,7 @@ const ComboboxChip = exports.ComboboxChip = /*#__PURE__*/React.forwardRef(functi
     setHighlightedChipIndex,
     chipsRef
   } = (0, _ComboboxChipsContext.useComboboxChipsContext)();
+  const direction = (0, _DirectionContext.useDirection)();
   const disabled = (0, _store.useStore)(store, _store2.selectors.disabled);
   const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
   const selectedValue = (0, _store.useStore)(store, _store2.selectors.selectedValue);
@@ -46,14 +48,17 @@ const ComboboxChip = exports.ComboboxChip = /*#__PURE__*/React.forwardRef(functi
   } = (0, _useCompositeListItem.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/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/combobox/clear/ComboboxClear.js

@@ -74,6 +74,7 @@ const ComboboxClear = exports.ComboboxClear = /*#__PURE__*/React.forwardRef(func
   } = (0, _useTransitionStatus.useTransitionStatus)(visible);
   const state = {
     disabled,
+    visible,
     open,
     transitionStatus
   };

package/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/combobox/clear/ComboboxClearDataAttributes.js

@@ -14,6 +14,10 @@ let ComboboxClearDataAttributes = exports.ComboboxClearDataAttributes = function
    * 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/combobox/icon/ComboboxIcon.js

@@ -16,8 +16,8 @@ var _useRenderElement = require("../../internals/useRenderElement");
  */
 const ComboboxIcon = exports.ComboboxIcon = /*#__PURE__*/React.forwardRef(function ComboboxIcon(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;

package/combobox/input/ComboboxInput.js

@@ -94,6 +94,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
   const isComposingRef = React.useRef(false);
   const lastActiveIndexRef = React.useRef(null);
   const shouldRestoreActiveIndexRef = React.useRef(false);
+  const inputOwnsFormValue = selectionMode === 'none' && !hasPositionerParent;
   const setInputElement = (0, _useStableCallback.useStableCallback)(element => {
     const nextIsInsidePopup = hasPositionerParent || store.state.inline;
     if (nextIsInsidePopup && !store.state.hasInputValue) {
@@ -101,7 +102,8 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     }
     store.update({
       inputElement: element,
-      inputInsidePopup: nextIsInsidePopup
+      inputInsidePopup: nextIsInsidePopup,
+      inputOwnsFormValue
     });
   });
   const validationProps = hasPositionerParent || !validation ? elementProps : validation.getValidationProps(elementProps);
@@ -122,15 +124,18 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       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;
@@ -153,7 +158,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     }
 
     // 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) {
@@ -179,7 +184,7 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
       readOnly,
       required: selectionMode === 'none' ? required : undefined,
       form,
-      ...(selectionMode === 'none' && name && {
+      ...(inputOwnsFormValue && name && {
         name
       }),
       id,
@@ -401,10 +406,14 @@ const ComboboxInput = exports.ComboboxInput = /*#__PURE__*/React.forwardRef(func
     }, validationProps],
     stateAttributesMapping: _stateAttributesMapping.triggerStateAttributesMapping
   });
+  const renderedInput = hasPositionerParent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldRootContext.FieldRootContext.Provider, {
+    value: _FieldRootContext.DEFAULT_FIELD_ROOT_CONTEXT,
+    children: element
+  }) : element;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [open && focusManagerModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxInternalDismissButton.ComboboxInternalDismissButton, {
       ref: store.state.startDismissRef
-    }), element]
+    }), renderedInput]
   });
 });
 if (process.env.NODE_ENV !== "production") ComboboxInput.displayName = "ComboboxInput";

package/combobox/item/ComboboxItem.js

@@ -29,11 +29,11 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   const {
     render,
     className,
+    style,
     value: itemValue = null,
     index: indexProp,
     disabled = false,
     nativeButton = false,
-    style,
     ...elementProps
   } = componentProps;
   const didPointerDownRef = React.useRef(false);
@@ -60,7 +60,7 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   const rootId = (0, _store.useStore)(store, _store2.selectors.id);
   const highlighted = (0, _store.useStore)(store, _store2.selectors.isActive, index);
   const matchesSelectedValue = (0, _store.useStore)(store, _store2.selectors.isSelected, itemValue);
-  const getItemProps = (0, _store.useStore)(store, _store2.selectors.getItemProps);
+  const itemProps = (0, _store.useStore)(store, _store2.selectors.itemProps);
   const itemRef = React.useRef(null);
   const id = rootId != null && hasRegistered ? `${rootId}-${index}` : undefined;
   const selected = matchesSelectedValue && selectable;
@@ -106,17 +106,6 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
       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
@@ -126,6 +115,11 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
     native: nativeButton,
     composite: true
   });
+  const state = {
+    disabled,
+    selected,
+    highlighted
+  };
   function commitSelection(nativeEvent) {
     function selectItem() {
       store.state.handleSelection(nativeEvent, itemValue);
@@ -172,7 +166,7 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   const element = (0, _useRenderElement.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/combobox/item-indicator/ComboboxItemIndicator.js

@@ -36,8 +36,7 @@ const ComboboxItemIndicator = exports.ComboboxItemIndicator = /*#__PURE__*/React
   });
 });
 
-/** 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 {