@base-ui/react 1.3.0 → 1.4.0

package/calendar/viewport/CalendarViewport.js

@@ -0,0 +1,171 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarViewport = CalendarViewport;
+var React = _interopRequireWildcard(require("react"));
+var _inertValue = require("@base-ui/utils/inertValue");
+var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _owner = require("@base-ui/utils/owner");
+var _store = require("@base-ui/utils/store");
+var _useAnimationsFinished = require("../../utils/useAnimationsFinished");
+var _CalendarViewportDataAttributes = require("./CalendarViewportDataAttributes");
+var _SharedCalendarRootContext = require("../root/SharedCalendarRootContext");
+var _store2 = require("../store");
+var _TemporalAdapterContext = require("../../temporal-adapter-provider/TemporalAdapterContext");
+var _jsxRuntime = require("react/jsx-runtime");
+const getNavigationDirectionAttribute = navigationDirection => {
+  switch (navigationDirection) {
+    case 'none':
+      return null;
+    default:
+      return {
+        [_CalendarViewportDataAttributes.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.CalendarViewportDataAttributes.current, _CalendarViewportDataAttributes.CalendarViewportDataAttributes.startingStyle, _CalendarViewportDataAttributes.CalendarViewportDataAttributes.endingStyle, _CalendarViewportDataAttributes.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)
+ */
+function CalendarViewport({
+  children
+}) {
+  const store = (0, _SharedCalendarRootContext.useSharedCalendarRootContext)();
+  const adapter = (0, _TemporalAdapterContext.useTemporalAdapter)();
+  const navigationDirection = (0, _store.useStore)(store, _store2.selectors.navigationDirection);
+  const visibleMonth = (0, _store.useStore)(store, _store2.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 = (0, _useAnimationsFinished.useAnimationsFinished)(currentContainerRef, true, false);
+  const cleanupTimeout = (0, _useAnimationFrame.useAnimationFrame)();
+  const abortControllerRef = React.useRef(null);
+  const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React.useState(false);
+  (0, _useIsoLayoutEffect.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.
+  (0, _useIsoLayoutEffect.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 = (0, _owner.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__*/(0, _jsxRuntime.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: (0, _inertValue.inertValue)(true),
+        ...getNavigationDirectionAttribute(navigationDirection)
+      }), navigationDirection === 'next' && currentChildren]
+    });
+  }
+
+  // Avoids remounting the current month after transition ends.
+  (0, _useIsoLayoutEffect.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.
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    const container = previousContainerRef.current;
+    if (!container || !previousContentNode) {
+      return;
+    }
+    container.replaceChildren(...Array.from(previousContentNode.childNodes));
+  }, [previousContentNode]);
+  return childrenToRender;
+}

package/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/calendar/viewport/CalendarViewportDataAttributes.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CalendarViewportDataAttributes = void 0;
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+let CalendarViewportDataAttributes = exports.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"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the day grid body is animating out.
+   */
+  CalendarViewportDataAttributes[CalendarViewportDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return CalendarViewportDataAttributes;
+}({});

package/checkbox/indicator/CheckboxIndicator.js

@@ -24,6 +24,7 @@ const CheckboxIndicator = exports.CheckboxIndicator = /*#__PURE__*/React.forward
   const {
     render,
     className,
+    style,
     keepMounted = false,
     ...elementProps
   } = componentProps;

package/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/checkbox/root/CheckboxRoot.js

@@ -21,8 +21,8 @@ var _useBaseUiId = require("../../utils/useBaseUiId");
 var _mergeProps = require("../../merge-props");
 var _useButton = require("../../use-button/useButton");
 var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _useRegisterFieldControl = require("../../field/root/useRegisterFieldControl");
 var _FieldItemContext = require("../../field/item/FieldItemContext");
-var _useField = require("../../field/useField");
 var _FormContext = require("../../form/FormContext");
 var _LabelableContext = require("../../labelable-provider/LabelableContext");
 var _useAriaLabelledBy = require("../../labelable-provider/useAriaLabelledBy");
@@ -47,6 +47,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
     defaultChecked = false,
     'aria-labelledby': ariaLabelledByProp,
     disabled: disabledProp = false,
+    form,
     id: idProp,
     indeterminate = false,
     inputRef: inputRefProp,
@@ -59,6 +60,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
     uncheckedValue,
     value: valueProp,
     nativeButton = false,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -153,14 +155,10 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
       registerControlId(controlSource, undefined);
     };
   }, [registerControlId, controlSourceRef]);
-  (0, _useField.useField)({
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
     enabled: !groupContext,
     id,
-    commit: validation.commit,
-    value: checked,
-    controlRef,
-    name,
-    getValue: () => checked
+    value: checked
   });
   const inputRef = React.useRef(null);
   const mergedInputRef = (0, _useMergedRefs.useMergedRefs)(inputRefProp, inputRef, validation.inputRef);
@@ -189,6 +187,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
   const inputProps = (0, _mergeProps.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.
@@ -205,7 +204,11 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
       if (event.nativeEvent.defaultPrevented) {
         return;
       }
-      const nextChecked = event.target.checked;
+      if (readOnly) {
+        event.preventDefault();
+        return;
+      }
+      const nextChecked = event.currentTarget.checked;
       const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent);
       groupOnChange?.(nextChecked, details);
       onCheckedChange(nextChecked, details);
@@ -213,7 +216,7 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
         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);
       }
@@ -293,10 +296,12 @@ const CheckboxRoot = exports.CheckboxRoot = /*#__PURE__*/React.forwardRef(functi
     value: state,
     children: [element, !checked && !groupContext && name && !parent && uncheckedValue !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
       type: "hidden",
+      form: form,
       name: name,
       value: uncheckedValue
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-      ...inputProps
+      ...inputProps,
+      suppressHydrationWarning: true
     })]
   });
 });

package/checkbox-group/CheckboxGroup.js

@@ -13,9 +13,9 @@ var _useBaseUiId = require("../utils/useBaseUiId");
 var _useRenderElement = require("../utils/useRenderElement");
 var _CheckboxGroupContext = require("./CheckboxGroupContext");
 var _FieldRootContext = require("../field/root/FieldRootContext");
+var _useRegisterFieldControl = require("../field/root/useRegisterFieldControl");
 var _LabelableContext = require("../labelable-provider/LabelableContext");
 var _constants = require("../field/utils/constants");
-var _useField = require("../field/useField");
 var _CheckboxRoot = require("../checkbox/root/CheckboxRoot");
 var _useCheckboxGroupParent = require("./useCheckboxGroupParent");
 var _FormContext = require("../form/FormContext");
@@ -32,12 +32,13 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
   const {
     allValues,
     className,
-    defaultValue,
+    defaultValue: defaultValueProp,
     disabled: disabledProp = false,
     id: idProp,
     onValueChange,
     render,
     value: externalValue,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -58,6 +59,12 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
     clearErrors
   } = (0, _FormContext.useFormContext)();
   const disabled = fieldDisabled || disabledProp;
+  const defaultValue = React.useMemo(() => {
+    if (externalValue === undefined) {
+      return defaultValueProp ?? [];
+    }
+    return undefined;
+  }, [externalValue, defaultValueProp]);
   const [value, setValueUnwrapped] = (0, _useControlled.useControlled)({
     controlled: externalValue,
     default: defaultValue,
@@ -73,8 +80,8 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
   });
   const parent = (0, _useCheckboxGroupParent.useCheckboxGroupParent)({
     allValues,
-    value: externalValue,
-    onValueChange
+    value,
+    onValueChange: setValue
   });
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   const controlRef = React.useRef(null);
@@ -83,14 +90,10 @@ const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/React.forwardRef(func
       controlRef.current = element;
     }
   }, []);
-  (0, _useField.useField)({
+  (0, _useRegisterFieldControl.useRegisterFieldControl)(controlRef, {
     enabled: !!fieldName,
     id,
-    commit: validation.commit,
-    value,
-    controlRef,
-    name: fieldName,
-    getValue: () => value
+    value
   });
   const resolvedValue = value ?? _constants2.EMPTY_ARRAY;
   (0, _useValueChanged.useValueChanged)(resolvedValue, () => {

package/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/collapsible/panel/CollapsiblePanel.js

@@ -28,6 +28,7 @@ const CollapsiblePanel = exports.CollapsiblePanel = /*#__PURE__*/React.forwardRe
     keepMounted: keepMountedProp,
     render,
     id: idProp,
+    style,
     ...elementProps
   } = componentProps;
   if (process.env.NODE_ENV !== 'production') {
@@ -129,7 +130,7 @@ const CollapsiblePanel = exports.CollapsiblePanel = /*#__PURE__*/React.forwardRe
     }, elementProps],
     stateAttributesMapping: _stateAttributesMapping.collapsibleStateAttributesMapping
   });
-  const shouldRender = keepMounted || hiddenUntilFound || !keepMounted && mounted;
+  const shouldRender = keepMounted || hiddenUntilFound || mounted;
   if (!shouldRender) {
     return null;
   }

package/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/collapsible/panel/useCollapsiblePanel.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useCollapsiblePanel = useCollapsiblePanel;
 var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useMergedRefs = require("@base-ui/utils/useMergedRefs");
@@ -335,10 +336,7 @@ function useCollapsiblePanel(parameters) {
       setOpen(true);
       onOpenChange(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event));
     }
-    panel.addEventListener('beforematch', handleBeforeMatch);
-    return () => {
-      panel.removeEventListener('beforematch', handleBeforeMatch);
-    };
+    return (0, _addEventListener.addEventListener)(panel, 'beforematch', handleBeforeMatch);
   }, [onOpenChange, panelRef, setOpen]);
   return React.useMemo(() => ({
     props: {

package/collapsible/root/CollapsibleRoot.js

@@ -27,6 +27,7 @@ const CollapsibleRoot = exports.CollapsibleRoot = /*#__PURE__*/React.forwardRef(
     disabled = false,
     onOpenChange: onOpenChangeProp,
     open,
+    style,
     ...elementProps
   } = componentProps;
   const onOpenChange = (0, _useStableCallback.useStableCallback)(onOpenChangeProp);

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

@@ -85,13 +85,14 @@ function useCollapsibleRoot(parameters) {
   });
   (0, _useIsoLayoutEffect.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/collapsible/trigger/CollapsibleTrigger.js

@@ -37,6 +37,7 @@ const CollapsibleTrigger = exports.CollapsibleTrigger = /*#__PURE__*/React.forwa
     id,
     render,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/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/combobox/arrow/ComboboxArrow.js

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

package/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/combobox/backdrop/ComboboxBackdrop.js

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

package/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/combobox/chip/ComboboxChip.js

@@ -22,11 +22,14 @@ var _jsxRuntime = require("react/jsx-runtime");
 /**
  * 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)
  */
 const ComboboxChip = exports.ComboboxChip = /*#__PURE__*/React.forwardRef(function ComboboxChip(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
@@ -52,7 +55,7 @@ const ComboboxChip = exports.ComboboxChip = /*#__PURE__*/React.forwardRef(functi
       }
     } else if (event.key === 'ArrowRight') {
       event.preventDefault();
-      if (index < selectedValue.length - 1) {
+      if (index < chipsRef.current.length - 1) {
         nextIndex = index + 1;
       } else {
         nextIndex = undefined;
@@ -104,16 +107,6 @@ const ComboboxChip = exports.ComboboxChip = /*#__PURE__*/React.forwardRef(functi
         } else {
           chipsRef.current[nextIndex]?.focus();
         }
-      },
-      onMouseDown(event) {
-        if (readOnly) {
-          return;
-        }
-        event.preventDefault();
-        if (disabled) {
-          return;
-        }
-        store.state.inputRef.current?.focus();
       }
     }, elementProps]
   });

package/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 {