@base-ui/react 1.3.0 → 1.4.0

package/esm/calendar/viewport/CalendarViewport.js

@@ -0,0 +1,165 @@
+'use client';
+
+import * as React from 'react';
+import { inertValue } from '@base-ui/utils/inertValue';
+import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { ownerDocument } from '@base-ui/utils/owner';
+import { useStore } from '@base-ui/utils/store';
+import { useAnimationsFinished } from "../../utils/useAnimationsFinished.js";
+import { CalendarViewportDataAttributes } from "./CalendarViewportDataAttributes.js";
+import { useSharedCalendarRootContext } from "../root/SharedCalendarRootContext.js";
+import { selectors } from "../store/index.js";
+import { useTemporalAdapter } from "../../temporal-adapter-provider/TemporalAdapterContext.js";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getNavigationDirectionAttribute = navigationDirection => {
+  switch (navigationDirection) {
+    case 'none':
+      return null;
+    default:
+      return {
+        [CalendarViewportDataAttributes.navigationDirection]: navigationDirection
+      };
+  }
+};
+const ALLOWED_TAGS = new Set(['div', 'section', 'span', 'tbody']);
+function getSafeTag(localName) {
+  return ALLOWED_TAGS.has(localName) ? localName : 'div';
+}
+function getVisibleMonthKey(adapter, visibleMonth) {
+  if (!visibleMonth) {
+    return 'empty';
+  }
+  return `${adapter.getYear(visibleMonth)}-${adapter.getMonth(visibleMonth)}`;
+}
+const DATA_ATTRIBUTES = [CalendarViewportDataAttributes.current, CalendarViewportDataAttributes.startingStyle, CalendarViewportDataAttributes.endingStyle, CalendarViewportDataAttributes.navigationDirection];
+
+/**
+ * A viewport for displaying calendar month transitions.
+ * This component is only required if you want to animate certain part of a calendar when navigating between months.
+ * The first rendered child element has to handle a ref.
+ * Passes `data-current` to the currently visible content and `data-previous` to the previous content when animating between two.
+ * Doesn't render its own HTML element.
+ *
+ * Documentation: [Base UI Calendar](https://base-ui.com/react/components/calendar)
+ */
+export function CalendarViewport({
+  children
+}) {
+  const store = useSharedCalendarRootContext();
+  const adapter = useTemporalAdapter();
+  const navigationDirection = useStore(store, selectors.navigationDirection);
+  const visibleMonth = useStore(store, selectors.visibleMonth);
+  // Remount the entering month on visible-month changes so interrupted transitions
+  // restart from the correct starting styles instead of reusing the previous DOM.
+  const currentContentKey = getVisibleMonthKey(adapter, visibleMonth);
+  const lastHandledVisibleMonth = React.useRef(visibleMonth);
+  const capturedNodeRef = React.useRef(null);
+  const [previousContentNode, setPreviousContentNode] = React.useState(null);
+  const currentContainerRef = React.useRef(null);
+  const previousContainerRef = React.useRef(null);
+  const onAnimationsFinished = useAnimationsFinished(currentContainerRef, true, false);
+  const cleanupTimeout = useAnimationFrame();
+  const abortControllerRef = React.useRef(null);
+  const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React.useState(false);
+  useIsoLayoutEffect(() => {
+    // When the visible month changes,
+    // set the captured children HTML to state,
+    // so we can render both new and old month when transitioning.
+    if (visibleMonth && lastHandledVisibleMonth.current && !adapter.isEqual(lastHandledVisibleMonth.current, visibleMonth) && capturedNodeRef.current) {
+      // Cancel the previous transition's pending animation-finished callback
+      abortControllerRef.current?.abort();
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+      setPreviousContentNode(capturedNodeRef.current);
+      setShowStartingStyleAttribute(true);
+      cleanupTimeout.request(() => {
+        setShowStartingStyleAttribute(false);
+        onAnimationsFinished(() => {
+          setPreviousContentNode(null);
+          capturedNodeRef.current = null;
+        }, abortController.signal);
+      });
+      lastHandledVisibleMonth.current = visibleMonth;
+    }
+  }, [adapter, cleanupTimeout, onAnimationsFinished, visibleMonth]);
+
+  // Capture a clone of the current content DOM subtree when not transitioning.
+  // We can't store previous React nodes as they may be stateful; instead we capture DOM clones for visual continuity.
+  useIsoLayoutEffect(() => {
+    // When a transition is in progress, we store the next content in capturedNodeRef.
+    // This handles the case where the trigger changes multiple times before the transition finishes.
+    // We want to always capture the latest content for the previous snapshot.
+    // So clicking quickly on T1, T2, T3 will result in the following sequence:
+    // 1. T1 -> T2: previousContent = T1, currentContent = T2
+    // 2. T2 -> T3: previousContent = T2, currentContent = T3
+    const source = currentContainerRef.current;
+    if (!source) {
+      return;
+    }
+
+    // Create the wrapper element of the same type as the source element.
+    // It has to be an element of the same tag, especially if it's the calendar body (`tbody`).
+    const wrapper = ownerDocument(source).createElement(getSafeTag(source.localName));
+    for (const child of Array.from(source.childNodes)) {
+      wrapper.appendChild(child.cloneNode(true));
+    }
+    capturedNodeRef.current = wrapper;
+  });
+  const currentChildren = /*#__PURE__*/React.cloneElement(children, {
+    ref: currentContainerRef,
+    key: currentContentKey
+  });
+  const isTransitioning = previousContentNode != null;
+  let childrenToRender;
+  if (!isTransitioning) {
+    childrenToRender = currentChildren;
+  } else {
+    childrenToRender = /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [navigationDirection === 'previous' && currentChildren, /*#__PURE__*/React.createElement(getSafeTag(previousContentNode.localName), {
+        className: currentContainerRef?.current?.className,
+        key: 'previous',
+        ref: previousContainerRef,
+        'data-previous': '',
+        'data-starting-style': showStartingStyleAttribute ? '' : undefined,
+        'data-ending-style': showStartingStyleAttribute ? undefined : '',
+        inert: inertValue(true),
+        ...getNavigationDirectionAttribute(navigationDirection)
+      }), navigationDirection === 'next' && currentChildren]
+    });
+  }
+
+  // Avoids remounting the current month after transition ends.
+  useIsoLayoutEffect(() => {
+    if (!currentContainerRef.current) {
+      return;
+    }
+    if (isTransitioning) {
+      currentContainerRef.current.setAttribute('data-current', '');
+      if (showStartingStyleAttribute) {
+        currentContainerRef.current.setAttribute('data-starting-style', '');
+      } else {
+        currentContainerRef.current.setAttribute('data-ending-style', '');
+        currentContainerRef.current.removeAttribute('data-starting-style');
+      }
+      const navigationDirectionAttribute = getNavigationDirectionAttribute(navigationDirection);
+      if (navigationDirectionAttribute) {
+        currentContainerRef.current.setAttribute(...Object.entries(navigationDirectionAttribute)[0]);
+      }
+    } else {
+      for (const attribute of DATA_ATTRIBUTES) {
+        currentContainerRef.current.removeAttribute(attribute);
+      }
+    }
+  }, [isTransitioning, showStartingStyleAttribute, navigationDirection]);
+
+  // When previousContentNode is present, imperatively populate the previous container with the cloned children.
+  useIsoLayoutEffect(() => {
+    const container = previousContainerRef.current;
+    if (!container || !previousContentNode) {
+      return;
+    }
+    container.replaceChildren(...Array.from(previousContentNode.childNodes));
+  }, [previousContentNode]);
+  return childrenToRender;
+}

package/esm/calendar/viewport/CalendarViewportDataAttributes.d.ts

@@ -0,0 +1,23 @@
+export declare enum CalendarViewportDataAttributes {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  current = "data-current",
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  previous = "data-previous",
+  /**
+   * Indicates the direction of the navigation (based on the month navigating to).
+   * @type {'previous' | 'next' | 'none'}
+   */
+  navigationDirection = "data-navigation-direction",
+  /**
+   * Present when the day grid body is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the day grid body is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/esm/calendar/viewport/CalendarViewportDataAttributes.js

@@ -0,0 +1,25 @@
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+export let CalendarViewportDataAttributes = function (CalendarViewportDataAttributes) {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  CalendarViewportDataAttributes["current"] = "data-current";
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  CalendarViewportDataAttributes["previous"] = "data-previous";
+  /**
+   * Indicates the direction of the navigation (based on the month navigating to).
+   * @type {'previous' | 'next' | 'none'}
+   */
+  CalendarViewportDataAttributes["navigationDirection"] = "data-navigation-direction";
+  /**
+   * Present when the day grid body is animating in.
+   */
+  CalendarViewportDataAttributes[CalendarViewportDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the day grid body is animating out.
+   */
+  CalendarViewportDataAttributes[CalendarViewportDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return CalendarViewportDataAttributes;
+}({});

package/esm/checkbox/indicator/CheckboxIndicator.js

@@ -19,6 +19,7 @@ export const CheckboxIndicator = /*#__PURE__*/React.forwardRef(function Checkbox
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;

package/esm/checkbox/root/CheckboxRoot.d.ts

@@ -43,6 +43,11 @@ export interface CheckboxRootProps extends NonNativeButtonProps, Omit<BaseUIComp
    * @default undefined
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the hidden input.
+   * Useful when the checkbox is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * Whether the checkbox is currently ticked.
    *

package/esm/checkbox/root/CheckboxRoot.js

@@ -15,8 +15,8 @@ import { useBaseUiId } from "../../utils/useBaseUiId.js";
 import { mergeProps } from "../../merge-props/index.js";
 import { useButton } from "../../use-button/useButton.js";
 import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../field/root/useRegisterFieldControl.js";
 import { useFieldItemContext } from "../../field/item/FieldItemContext.js";
-import { useField } from "../../field/useField.js";
 import { useFormContext } from "../../form/FormContext.js";
 import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
 import { useAriaLabelledBy } from "../../labelable-provider/useAriaLabelledBy.js";
@@ -41,6 +41,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
     defaultChecked = false,
     'aria-labelledby': ariaLabelledByProp,
     disabled: disabledProp = false,
+    form,
     id: idProp,
     indeterminate = false,
     inputRef: inputRefProp,
@@ -53,6 +54,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
     uncheckedValue,
     value: valueProp,
     nativeButton = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -147,14 +149,10 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
       registerControlId(controlSource, undefined);
     };
   }, [registerControlId, controlSourceRef]);
-  useField({
+  useRegisterFieldControl(controlRef, {
     enabled: !groupContext,
     id,
-    commit: validation.commit,
-    value: checked,
-    controlRef,
-    name,
-    getValue: () => checked
+    value: checked
   });
   const inputRef = React.useRef(null);
   const mergedInputRef = useMergedRefs(inputRefProp, inputRef, validation.inputRef);
@@ -183,6 +181,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
   const inputProps = mergeProps({
     checked,
     disabled,
+    form,
     // parent checkboxes unset `name` to be excluded from form submission
     name: parent ? undefined : name,
     // Set `id` to stop Chrome warning about an unassociated input.
@@ -199,7 +198,11 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
       if (event.nativeEvent.defaultPrevented) {
         return;
       }
-      const nextChecked = event.target.checked;
+      if (readOnly) {
+        event.preventDefault();
+        return;
+      }
+      const nextChecked = event.currentTarget.checked;
       const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
       groupOnChange?.(nextChecked, details);
       onCheckedChange(nextChecked, details);
@@ -207,7 +210,7 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
         return;
       }
       setCheckedState(nextChecked);
-      if (value && groupValue && setGroupValue && !parent) {
+      if (value && groupValue && setGroupValue && !parent && !isGroupedWithParent) {
         const nextGroupValue = nextChecked ? [...groupValue, value] : groupValue.filter(item => item !== value);
         setGroupValue(nextGroupValue, details);
       }
@@ -287,10 +290,12 @@ export const CheckboxRoot = /*#__PURE__*/React.forwardRef(function CheckboxRoot(
     value: state,
     children: [element, !checked && !groupContext && name && !parent && uncheckedValue !== undefined && /*#__PURE__*/_jsx("input", {
       type: "hidden",
+      form: form,
       name: name,
       value: uncheckedValue
     }), /*#__PURE__*/_jsx("input", {
-      ...inputProps
+      ...inputProps,
+      suppressHydrationWarning: true
     })]
   });
 });

package/esm/checkbox-group/CheckboxGroup.js

@@ -7,9 +7,9 @@ import { useBaseUiId } from "../utils/useBaseUiId.js";
 import { useRenderElement } from "../utils/useRenderElement.js";
 import { CheckboxGroupContext } from "./CheckboxGroupContext.js";
 import { useFieldRootContext } from "../field/root/FieldRootContext.js";
+import { useRegisterFieldControl } from "../field/root/useRegisterFieldControl.js";
 import { useLabelableContext } from "../labelable-provider/LabelableContext.js";
 import { fieldValidityMapping } from "../field/utils/constants.js";
-import { useField } from "../field/useField.js";
 import { PARENT_CHECKBOX } from "../checkbox/root/CheckboxRoot.js";
 import { useCheckboxGroupParent } from "./useCheckboxGroupParent.js";
 import { useFormContext } from "../form/FormContext.js";
@@ -27,12 +27,13 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
   const {
     allValues,
     className,
-    defaultValue,
+    defaultValue: defaultValueProp,
     disabled: disabledProp = false,
     id: idProp,
     onValueChange,
     render,
     value: externalValue,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -53,6 +54,12 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
     clearErrors
   } = useFormContext();
   const disabled = fieldDisabled || disabledProp;
+  const defaultValue = React.useMemo(() => {
+    if (externalValue === undefined) {
+      return defaultValueProp ?? [];
+    }
+    return undefined;
+  }, [externalValue, defaultValueProp]);
   const [value, setValueUnwrapped] = useControlled({
     controlled: externalValue,
     default: defaultValue,
@@ -68,8 +75,8 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
   });
   const parent = useCheckboxGroupParent({
     allValues,
-    value: externalValue,
-    onValueChange
+    value,
+    onValueChange: setValue
   });
   const id = useBaseUiId(idProp);
   const controlRef = React.useRef(null);
@@ -78,14 +85,10 @@ export const CheckboxGroup = /*#__PURE__*/React.forwardRef(function CheckboxGrou
       controlRef.current = element;
     }
   }, []);
-  useField({
+  useRegisterFieldControl(controlRef, {
     enabled: !!fieldName,
     id,
-    commit: validation.commit,
-    value,
-    controlRef,
-    name: fieldName,
-    getValue: () => value
+    value
   });
   const resolvedValue = value ?? EMPTY_ARRAY;
   useValueChanged(resolvedValue, () => {

package/esm/collapsible/panel/CollapsiblePanel.d.ts

@@ -17,7 +17,7 @@ export interface CollapsiblePanelState extends CollapsibleRootState {
 }
 export interface CollapsiblePanelProps extends BaseUIComponentProps<'div', CollapsiblePanelState> {
   /**
-   * Allows the browser’s built-in page search to find and expand the panel contents.
+   * Allows the browser's built-in page search to find and expand the panel contents.
    *
    * Overrides the `keepMounted` prop and uses `hidden="until-found"`
    * to hide the element without removing it from the DOM.

package/esm/collapsible/panel/CollapsiblePanel.js

@@ -22,6 +22,7 @@ export const CollapsiblePanel = /*#__PURE__*/React.forwardRef(function Collapsib
     keepMounted: keepMountedProp,
     render,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   if (process.env.NODE_ENV !== 'production') {
@@ -123,7 +124,7 @@ export const CollapsiblePanel = /*#__PURE__*/React.forwardRef(function Collapsib
     }, elementProps],
     stateAttributesMapping: collapsibleStateAttributesMapping
   });
-  const shouldRender = keepMounted || hiddenUntilFound || !keepMounted && mounted;
+  const shouldRender = keepMounted || hiddenUntilFound || mounted;
   if (!shouldRender) {
     return null;
   }

package/esm/collapsible/panel/useCollapsiblePanel.d.ts

@@ -12,7 +12,7 @@ export interface UseCollapsiblePanelParameters {
    */
   height: number | undefined;
   /**
-   * Allows the browser’s built-in page search to find and expand the panel contents.
+   * Allows the browser's built-in page search to find and expand the panel contents.
    *
    * Overrides the `keepMounted` prop and uses `hidden="until-found"`
    * to hide the element without removing it from the DOM.
@@ -28,7 +28,9 @@ export interface UseCollapsiblePanelParameters {
    */
   keepMounted: boolean;
   /**
-   * Whether the collapsible panel is currently mounted.
+   * Whether the collapsible panel is mounted for transition and hidden-state
+   * purposes. This can be `false` while the element remains in the DOM when
+   * `keepMounted` or `hiddenUntilFound` is enabled.
    */
   mounted: boolean;
   onOpenChange: (open: boolean, eventDetails: CollapsibleRoot.ChangeEventDetails) => void;

package/esm/collapsible/panel/useCollapsiblePanel.js

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
@@ -329,10 +330,7 @@ export function useCollapsiblePanel(parameters) {
       setOpen(true);
       onOpenChange(true, createChangeEventDetails(REASONS.none, event));
     }
-    panel.addEventListener('beforematch', handleBeforeMatch);
-    return () => {
-      panel.removeEventListener('beforematch', handleBeforeMatch);
-    };
+    return addEventListener(panel, 'beforematch', handleBeforeMatch);
   }, [onOpenChange, panelRef, setOpen]);
   return React.useMemo(() => ({
     props: {

package/esm/collapsible/root/CollapsibleRoot.js

@@ -21,6 +21,7 @@ export const CollapsibleRoot = /*#__PURE__*/React.forwardRef(function Collapsibl
     disabled = false,
     onOpenChange: onOpenChangeProp,
     open,
+    style,
     ...elementProps
   } = componentProps;
   const onOpenChange = useStableCallback(onOpenChangeProp);

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

@@ -44,7 +44,9 @@ export interface UseCollapsibleRootReturnValue {
    */
   height: number | undefined;
   /**
-   * Whether the collapsible panel is currently mounted.
+   * Whether the collapsible panel is mounted for transition and hidden-state
+   * purposes. This can be `false` while the element remains in the DOM when
+   * `keepMounted` or `hiddenUntilFound` is enabled.
    */
   mounted: boolean;
   /**
@@ -57,7 +59,7 @@ export interface UseCollapsibleRootReturnValue {
   setDimensions: React.Dispatch<React.SetStateAction<Dimensions>>;
   setHiddenUntilFound: React.Dispatch<React.SetStateAction<boolean>>;
   setKeepMounted: React.Dispatch<React.SetStateAction<boolean>>;
-  setMounted: (open: boolean) => void;
+  setMounted: (nextMounted: boolean) => void;
   setOpen: (open: boolean) => void;
   setPanelIdState: (id: string | undefined) => void;
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;

package/esm/collapsible/root/useCollapsibleRoot.js

@@ -79,13 +79,14 @@ export function useCollapsibleRoot(parameters) {
   });
   useIsoLayoutEffect(() => {
     /**
-     * Unmount immediately when closing in controlled mode and keepMounted={false}
-     * and no CSS animations or transitions are applied
+     * 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' && !keepMounted && !open) {
+    if (isControlled && animationTypeRef.current === 'none' && !open) {
       setMounted(false);
     }
-  }, [isControlled, keepMounted, open, openParam, setMounted]);
+  }, [isControlled, open, openParam, setMounted]);
   return React.useMemo(() => ({
     abortControllerRef,
     animationTypeRef,

package/esm/collapsible/trigger/CollapsibleTrigger.js

@@ -31,6 +31,7 @@ export const CollapsibleTrigger = /*#__PURE__*/React.forwardRef(function Collaps
     id,
     render,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/combobox/arrow/ComboboxArrow.d.ts

@@ -4,6 +4,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Displays an element positioned against the anchor.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxArrow: React.ForwardRefExoticComponent<Omit<ComboboxArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxArrowState {

package/esm/combobox/arrow/ComboboxArrow.js

@@ -11,11 +11,14 @@ import { popupStateMapping } from "../../utils/popupStateMapping.js";
 /**
  * Displays an element positioned against the anchor.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export const ComboboxArrow = /*#__PURE__*/React.forwardRef(function ComboboxArrow(componentProps, forwardedRef) {
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();

package/esm/combobox/backdrop/ComboboxBackdrop.d.ts

@@ -4,6 +4,8 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
 /**
  * An overlay displayed beneath the popup.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxBackdrop: React.ForwardRefExoticComponent<Omit<ComboboxBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxBackdropProps extends BaseUIComponentProps<'div', ComboboxBackdropState> {}

package/esm/combobox/backdrop/ComboboxBackdrop.js

@@ -15,11 +15,14 @@ const stateAttributesMapping = {
 /**
  * An overlay displayed beneath the popup.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export const ComboboxBackdrop = /*#__PURE__*/React.forwardRef(function ComboboxBackdrop(componentProps, forwardedRef) {
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();

package/esm/combobox/chip/ComboboxChip.d.ts

@@ -3,6 +3,8 @@ import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * An individual chip that represents a value in a multiselectable input.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxChip: React.ForwardRefExoticComponent<Omit<ComboboxChipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxChipState {

package/esm/combobox/chip/ComboboxChip.js

@@ -16,12 +16,15 @@ import { REASONS } from "../../utils/reasons.js";
 /**
  * An individual chip that represents a value in a multiselectable input.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 export const ComboboxChip = /*#__PURE__*/React.forwardRef(function ComboboxChip(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -47,7 +50,7 @@ export const ComboboxChip = /*#__PURE__*/React.forwardRef(function ComboboxChip(
       }
     } else if (event.key === 'ArrowRight') {
       event.preventDefault();
-      if (index < selectedValue.length - 1) {
+      if (index < chipsRef.current.length - 1) {
         nextIndex = index + 1;
       } else {
         nextIndex = undefined;
@@ -99,16 +102,6 @@ export const ComboboxChip = /*#__PURE__*/React.forwardRef(function ComboboxChip(
         } else {
           chipsRef.current[nextIndex]?.focus();
         }
-      },
-      onMouseDown(event) {
-        if (readOnly) {
-          return;
-        }
-        event.preventDefault();
-        if (disabled) {
-          return;
-        }
-        store.state.inputRef.current?.focus();
       }
     }, elementProps]
   });

package/esm/combobox/chip-remove/ComboboxChipRemove.d.ts

@@ -3,6 +3,8 @@ import { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
 /**
  * A button to remove a chip.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxChipRemove: React.ForwardRefExoticComponent<Omit<ComboboxChipRemoveProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ComboboxChipRemoveState {

package/esm/combobox/chip-remove/ComboboxChipRemove.js

@@ -15,6 +15,8 @@ import { findItemIndex } from "../../utils/itemEquality.js";
 /**
  * A button to remove a chip.
  * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function ComboboxChipRemove(componentProps, forwardedRef) {
   const {
@@ -22,6 +24,7 @@ export const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function Combobo
     className,
     disabled: disabledProp = false,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -73,6 +76,9 @@ export const ComboboxChipRemove = /*#__PURE__*/React.forwardRef(function Combobo
     state,
     props: [{
       tabIndex: -1,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
       onClick(event) {
         if (disabled || readOnly) {
           return;