@base-ui/react 1.1.0 → 1.3.0

package/combobox/input-group/ComboboxInputGroupDataAttributes.d.ts

@@ -0,0 +1,55 @@
+export declare enum ComboboxInputGroupDataAttributes {
+  /**
+   * Present when the corresponding popup is open.
+   */
+  popupOpen = "data-popup-open",
+  /**
+   * Present when the input group is pressed.
+   */
+  pressed = "data-pressed",
+  /**
+   * Present when the component is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the component is readonly.
+   */
+  readonly = "data-readonly",
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  popupSide = "data-popup-side",
+  /**
+   * Present when the component is in valid state (when wrapped in Field.Root).
+   */
+  valid = "data-valid",
+  /**
+   * Present when the component is in invalid state (when wrapped in Field.Root).
+   */
+  invalid = "data-invalid",
+  /**
+   * Present when the component has been touched (when wrapped in Field.Root).
+   */
+  touched = "data-touched",
+  /**
+   * Present when the component's value has changed (when wrapped in Field.Root).
+   */
+  dirty = "data-dirty",
+  /**
+   * Present when the component has a value (when wrapped in Field.Root).
+   */
+  filled = "data-filled",
+  /**
+   * Present when the component is focused (when wrapped in Field.Root).
+   */
+  focused = "data-focused",
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  listEmpty = "data-list-empty",
+  /**
+   * Present when the combobox doesn't have a value.
+   */
+  placeholder = "data-placeholder",
+}

package/combobox/input-group/ComboboxInputGroupDataAttributes.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxInputGroupDataAttributes = void 0;
+let ComboboxInputGroupDataAttributes = exports.ComboboxInputGroupDataAttributes = /*#__PURE__*/function (ComboboxInputGroupDataAttributes) {
+  /**
+   * Present when the corresponding popup is open.
+   */
+  ComboboxInputGroupDataAttributes["popupOpen"] = "data-popup-open";
+  /**
+   * Present when the input group is pressed.
+   */
+  ComboboxInputGroupDataAttributes["pressed"] = "data-pressed";
+  /**
+   * Present when the component is disabled.
+   */
+  ComboboxInputGroupDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the component is readonly.
+   */
+  ComboboxInputGroupDataAttributes["readonly"] = "data-readonly";
+  /**
+   * Indicates which side the corresponding popup is positioned relative to its anchor.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start' | null}
+   */
+  ComboboxInputGroupDataAttributes["popupSide"] = "data-popup-side";
+  /**
+   * Present when the component is in valid state (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the component is in invalid state (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the component has been touched (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the component's value has changed (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the component has a value (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the component is focused (when wrapped in Field.Root).
+   */
+  ComboboxInputGroupDataAttributes["focused"] = "data-focused";
+  /**
+   * Present when the corresponding items list is empty.
+   */
+  ComboboxInputGroupDataAttributes["listEmpty"] = "data-list-empty";
+  /**
+   * Present when the combobox doesn't have a value.
+   */
+  ComboboxInputGroupDataAttributes["placeholder"] = "data-placeholder";
+  return ComboboxInputGroupDataAttributes;
+}({});

package/combobox/item/ComboboxItem.d.ts

@@ -19,17 +19,17 @@ export interface ComboboxItemState {
    */
   highlighted: boolean;
 }
-export interface ComboboxItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', ComboboxItem.State>, 'id'> {
+export interface ComboboxItemProps extends NonNativeButtonProps, Omit<BaseUIComponentProps<'div', ComboboxItemState>, 'id'> {
   children?: React.ReactNode;
   /**
    * An optional click handler for the item when selected.
    * It fires when clicking the item with the pointer, as well as when pressing `Enter` with the keyboard if the item is highlighted when the `Input` or `List` element has focus.
    */
-  onClick?: React.MouseEventHandler<HTMLElement>;
+  onClick?: BaseUIComponentProps<'div', ComboboxItemState>['onClick'] | undefined;
   /**
    * The index of the item in the list. Improves performance when specified by avoiding the need to calculate the index automatically from the DOM.
    */
-  index?: number;
+  index?: number | undefined;
   /**
    * A unique value that identifies this item.
    * @default null
@@ -39,7 +39,7 @@ export interface ComboboxItemProps extends NonNativeButtonProps, Omit<BaseUIComp
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace ComboboxItem {
   type State = ComboboxItemState;

package/combobox/item/ComboboxItem.js

@@ -27,7 +27,7 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   const {
     render,
     className,
-    value = null,
+    value: itemValue = null,
     index: indexProp,
     disabled = false,
     nativeButton = false,
@@ -43,7 +43,8 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
   const isRow = (0, _ComboboxRowContext.useComboboxRowContext)();
   const {
-    flatFilteredItems
+    flatFilteredItems,
+    hasItems
   } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
@@ -51,12 +52,11 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   const virtualized = (0, _store.useStore)(store, _store2.selectors.virtualized);
   const isItemEqualToValue = (0, _store.useStore)(store, _store2.selectors.isItemEqualToValue);
   const selectable = selectionMode !== 'none';
-  const index = indexProp ?? (virtualized ? (0, _itemEquality.findItemIndex)(flatFilteredItems, value, isItemEqualToValue) : listItem.index);
+  const index = indexProp ?? (virtualized ? (0, _itemEquality.findItemIndex)(flatFilteredItems, itemValue, isItemEqualToValue) : listItem.index);
   const hasRegistered = listItem.index !== -1;
   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, value);
-  const items = (0, _store.useStore)(store, _store2.selectors.items);
+  const matchesSelectedValue = (0, _store.useStore)(store, _store2.selectors.isSelected, itemValue);
   const getItemProps = (0, _store.useStore)(store, _store2.selectors.getItemProps);
   const itemRef = React.useRef(null);
   const id = rootId != null && hasRegistered ? `${rootId}-${index}` : undefined;
@@ -73,41 +73,41 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
     };
   }, [hasRegistered, virtualized, index, indexProp, store]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!hasRegistered || items) {
+    if (!hasRegistered || hasItems) {
       return undefined;
     }
     const visibleMap = store.state.valuesRef.current;
-    visibleMap[index] = value;
+    visibleMap[index] = itemValue;
 
     // Stable registry that doesn't depend on filtering. Assume that no
     // filtering had occurred at this point; otherwise, an `items` prop is
     // required.
     if (selectionMode !== 'none') {
-      store.state.allValuesRef.current.push(value);
+      store.state.allValuesRef.current.push(itemValue);
     }
     return () => {
       delete visibleMap[index];
     };
-  }, [hasRegistered, items, index, value, store, selectionMode]);
+  }, [hasRegistered, hasItems, index, itemValue, store, selectionMode]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!open) {
       didPointerDownRef.current = false;
       return;
     }
-    if (!hasRegistered || items) {
+    if (!hasRegistered || hasItems) {
       return;
     }
     const selectedValue = store.state.selectedValue;
     const lastSelectedValue = Array.isArray(selectedValue) ? selectedValue[selectedValue.length - 1] : selectedValue;
-    if ((0, _itemEquality.compareItemEquality)(lastSelectedValue, value, isItemEqualToValue)) {
+    if ((0, _itemEquality.compareItemEquality)(itemValue, lastSelectedValue, isItemEqualToValue)) {
       store.set('selectedIndex', index);
     }
-  }, [hasRegistered, items, open, store, index, value, isItemEqualToValue]);
-  const state = React.useMemo(() => ({
+  }, [hasRegistered, hasItems, open, store, index, itemValue, isItemEqualToValue]);
+  const state = {
     disabled,
     selected,
     highlighted
-  }), [disabled, selected, highlighted]);
+  };
   const rootProps = getItemProps({
     active: highlighted,
     selected
@@ -120,11 +120,12 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
   } = (0, _useButton.useButton)({
     disabled,
     focusableWhenDisabled: true,
-    native: nativeButton
+    native: nativeButton,
+    composite: true
   });
   function commitSelection(nativeEvent) {
     function selectItem() {
-      store.state.handleSelection(nativeEvent, value);
+      store.state.handleSelection(nativeEvent, itemValue);
     }
     if (store.state.submitOnItemClick) {
       ReactDOM.flushSync(selectItem);

package/combobox/item/ComboboxItemContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/combobox/item-indicator/ComboboxItemIndicator.d.ts

@@ -6,16 +6,22 @@ import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
  * Renders a `<span>` element.
  */
 export declare const ComboboxItemIndicator: React.ForwardRefExoticComponent<Omit<ComboboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span', ComboboxItemIndicator.State> {
+export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span', ComboboxItemIndicatorState> {
   children?: React.ReactNode;
   /**
    * Whether to keep the HTML element in the DOM when the item is not selected.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export interface ComboboxItemIndicatorState {
+  /**
+   * Whether the item is selected.
+   */
   selected: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace ComboboxItemIndicator {

package/combobox/item-indicator/ComboboxItemIndicator.js

@@ -52,10 +52,10 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
     transitionStatus,
     setMounted
   } = (0, _useTransitionStatus.useTransitionStatus)(selected);
-  const state = React.useMemo(() => ({
+  const state = {
     selected,
     transitionStatus
-  }), [selected, transitionStatus]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     ref: [forwardedRef, indicatorRef],
     state,

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.d.ts

@@ -0,0 +1,10 @@
+export declare enum ComboboxItemIndicatorDataAttributes {
+  /**
+   * Present when the indicator is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the indicator is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxItemIndicatorDataAttributes = void 0;
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+let ComboboxItemIndicatorDataAttributes = exports.ComboboxItemIndicatorDataAttributes = function (ComboboxItemIndicatorDataAttributes) {
+  /**
+   * Present when the indicator is animating in.
+   */
+  ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the indicator is animating out.
+   */
+  ComboboxItemIndicatorDataAttributes[ComboboxItemIndicatorDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  return ComboboxItemIndicatorDataAttributes;
+}({});

package/combobox/label/ComboboxLabel.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { FieldRoot } from "../../field/root/FieldRoot.js";
+/**
+ * An accessible label that is automatically associated with the combobox trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ */
+export declare const ComboboxLabel: React.ForwardRefExoticComponent<Omit<ComboboxLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export type ComboboxLabelState = FieldRoot.State;
+export interface ComboboxLabelProps extends Omit<BaseUIComponentProps<'div', ComboboxLabel.State>, 'id'> {}
+export declare namespace ComboboxLabel {
+  type State = ComboboxLabelState;
+  type Props = ComboboxLabelProps;
+}

package/combobox/label/ComboboxLabel.js

@@ -0,0 +1,68 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComboboxLabel = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _error = require("@base-ui/utils/error");
+var _safeReact = require("@base-ui/utils/safeReact");
+var _store = require("@base-ui/utils/store");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _constants = require("../../field/utils/constants");
+var _useLabel = require("../../labelable-provider/useLabel");
+var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
+var _ComboboxRootContext = require("../root/ComboboxRootContext");
+var _store2 = require("../store");
+/**
+ * An accessible label that is automatically associated with the combobox trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
+ */
+const ComboboxLabel = exports.ComboboxLabel = /*#__PURE__*/React.forwardRef(function ComboboxLabel(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
+  const elementPropsWithoutId = elementProps;
+  delete elementPropsWithoutId.id;
+  const fieldRootContext = (0, _FieldRootContext.useFieldRootContext)();
+  const store = (0, _ComboboxRootContext.useComboboxRootContext)();
+  const inputInsidePopup = (0, _store.useStore)(store, _store2.selectors.inputInsidePopup);
+  const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
+  const inputElement = (0, _store.useStore)(store, _store2.selectors.inputElement);
+  const rootId = (0, _store.useStore)(store, _store2.selectors.id);
+  const defaultLabelId = (0, _resolveAriaLabelledBy.getDefaultLabelId)(rootId);
+  const localControlId = triggerElement?.id ?? (inputInsidePopup ? rootId : undefined);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (!inputElement || inputInsidePopup) {
+        return;
+      }
+      const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
+      const message = '<Combobox.Label> labels <Combobox.Trigger> only. ' + 'When <Combobox.Input> is the form control, use a native <label> or <Field.Label> instead.';
+      (0, _error.error)(`${message}${ownerStackMessage}`);
+    }, [inputElement, inputInsidePopup]);
+  }
+  const labelProps = (0, _useLabel.useLabel)({
+    id: defaultLabelId,
+    fallbackControlId: localControlId,
+    setLabelId(nextLabelId) {
+      store.set('labelId', nextLabelId);
+    }
+  });
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: forwardedRef,
+    state: fieldRootContext.state,
+    props: [labelProps, elementProps],
+    stateAttributesMapping: _constants.fieldValidityMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") ComboboxLabel.displayName = "ComboboxLabel";

package/combobox/list/ComboboxList.d.ts

@@ -11,7 +11,7 @@ export interface ComboboxListState {
    */
   empty: boolean;
 }
-export interface ComboboxListProps extends Omit<BaseUIComponentProps<'div', ComboboxList.State>, 'children'> {
+export interface ComboboxListProps extends Omit<BaseUIComponentProps<'div', ComboboxListState>, 'children'> {
   children?: React.ReactNode | ((item: any, index: number) => React.ReactNode);
 }
 export declare namespace ComboboxList {

package/combobox/list/ComboboxList.js

@@ -65,9 +65,9 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
     }
     return children;
   }, [children]);
-  const state = React.useMemo(() => ({
+  const state = {
     empty
-  }), [empty]);
+  };
   const floatingId = floatingRootContext.useState('floatingId');
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,

package/combobox/popup/ComboboxPopup.d.ts

@@ -9,14 +9,32 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  */
 export declare const ComboboxPopup: React.ForwardRefExoticComponent<Omit<ComboboxPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPopupState {
+  /**
+   * Whether the component is open.
+   */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
+  /**
+   * Whether there are no items to display.
+   */
   empty: boolean;
 }
-export interface ComboboxPopupProps extends BaseUIComponentProps<'div', ComboboxPopup.State> {
+export interface ComboboxPopupProps extends BaseUIComponentProps<'div', ComboboxPopupState> {
   /**
    * Determines the element to focus when the popup is opened.
    *
@@ -26,7 +44,7 @@ export interface ComboboxPopupProps extends BaseUIComponentProps<'div', Combobox
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null);
+  initialFocus?: boolean | React.RefObject<HTMLElement | null> | ((openType: InteractionType) => void | boolean | HTMLElement | null) | undefined;
   /**
    * Determines the element to focus when the popup is closed.
    *
@@ -36,7 +54,7 @@ export interface ComboboxPopupProps extends BaseUIComponentProps<'div', Combobox
    * - `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).
    *   Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing.
    */
-  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null);
+  finalFocus?: boolean | React.RefObject<HTMLElement | null> | ((closeType: InteractionType) => void | boolean | HTMLElement | null) | undefined;
 }
 export declare namespace ComboboxPopup {
   type State = ComboboxPopupState;

package/combobox/popup/ComboboxPopup.js

@@ -18,6 +18,7 @@ var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
 var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
 var _utils = require("../../floating-ui-react/utils");
 var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
+var _ComboboxInternalDismissButton = require("../utils/ComboboxInternalDismissButton");
 var _jsxRuntime = require("react/jsx-runtime");
 const stateAttributesMapping = {
   ..._popupStateMapping.popupStateMapping,
@@ -59,14 +60,14 @@ const ComboboxPopup = exports.ComboboxPopup = /*#__PURE__*/React.forwardRef(func
       }
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side: positioning.side,
     align: positioning.align,
     anchorHidden: positioning.anchorHidden,
     transitionStatus,
     empty
-  }), [open, positioning.side, positioning.align, positioning.anchorHidden, transitionStatus, empty]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
     state,
     ref: [forwardedRef, store.state.popupRef],
@@ -94,14 +95,20 @@ const ComboboxPopup = exports.ComboboxPopup = /*#__PURE__*/React.forwardRef(func
   } else {
     resolvedFinalFocus = inputInsidePopup ? undefined : false;
   }
+  const focusManagerModal = !inputInsidePopup || modal;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingUiReact.FloatingFocusManager, {
     context: floatingRootContext,
     disabled: !mounted,
-    modal: inputInsidePopup ? modal : false,
+    modal: focusManagerModal,
     openInteractionType: openMethod,
     initialFocus: resolvedInitialFocus,
     returnFocus: resolvedFinalFocus,
-    children: element
+    getInsideElements: () => [store.state.startDismissRef.current, store.state.endDismissRef.current],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [element, focusManagerModal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ComboboxInternalDismissButton.ComboboxInternalDismissButton, {
+        ref: store.state.endDismissRef
+      })]
+    })
   });
 });
 if (process.env.NODE_ENV !== "production") ComboboxPopup.displayName = "ComboboxPopup";

package/combobox/popup/ComboboxPopupDataAttributes.js

@@ -26,12 +26,12 @@ let ComboboxPopupDataAttributes = exports.ComboboxPopupDataAttributes = function
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  ComboboxPopupDataAttributes["side"] = "data-side";
+  ComboboxPopupDataAttributes[ComboboxPopupDataAttributes["side"] = _popupStateMapping.CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  ComboboxPopupDataAttributes["align"] = "data-align";
+  ComboboxPopupDataAttributes[ComboboxPopupDataAttributes["align"] = _popupStateMapping.CommonPopupDataAttributes.align] = "align";
   /**
    * Present if animations should be instant.
    * @type {'click' | 'dismiss'}

package/combobox/portal/ComboboxPortal.d.ts

@@ -6,16 +6,15 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * Renders a `<div>` element.
  */
 export declare const ComboboxPortal: React.ForwardRefExoticComponent<Omit<ComboboxPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare namespace ComboboxPortal {
-  interface State {}
-}
-export interface ComboboxPortalProps extends FloatingPortal.Props<ComboboxPortal.State> {
+export interface ComboboxPortalState {}
+export interface ComboboxPortalProps extends FloatingPortal.Props<ComboboxPortalState> {
   /**
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace ComboboxPortal {
+  type State = ComboboxPortalState;
   type Props = ComboboxPortalProps;
 }

package/combobox/portal/ComboboxPortalContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/combobox/positioner/ComboboxPositioner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type Side, type Align, useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
+import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Positions the popup against the trigger.
@@ -11,12 +11,24 @@ export interface ComboboxPositionerState {
    * Whether the popup is currently open.
    */
   open: boolean;
+  /**
+   * The side of the anchor the component is placed on.
+   */
   side: Side;
+  /**
+   * The alignment of the component relative to the anchor.
+   */
   align: Align;
+  /**
+   * Whether the anchor element is hidden.
+   */
   anchorHidden: boolean;
+  /**
+   * Whether there are no items to display.
+   */
   empty: boolean;
 }
-export interface ComboboxPositionerProps extends useAnchorPositioning.SharedParameters, BaseUIComponentProps<'div', ComboboxPositioner.State> {}
+export interface ComboboxPositionerProps extends UseAnchorPositioningSharedParameters, BaseUIComponentProps<'div', ComboboxPositionerState> {}
 export declare namespace ComboboxPositioner {
   type State = ComboboxPositionerState;
   type Props = ComboboxPositionerProps;