@base-ui/react 1.3.0 → 1.4.1

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

@@ -1,10 +1,12 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { FieldRoot } from "../../field/root/FieldRoot.js";
 import type { Side } from "../../utils/useAnchorPositioning.js";
 /**
  * A wrapper for the input and its associated controls.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxInputGroup: React.ForwardRefExoticComponent<Omit<ComboboxInputGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxInputGroupState extends FieldRoot.State {

package/combobox/input-group/ComboboxInputGroup.js

@@ -9,24 +9,28 @@ exports.ComboboxInputGroup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _store = require("@base-ui/utils/store");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _store2 = require("../store");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
+var _handleInputPress = require("../utils/handleInputPress");
+var _element = require("../../floating-ui-react/utils/element");
 /**
  * A wrapper for the input and its associated controls.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxInputGroup = exports.ComboboxInputGroup = /*#__PURE__*/React.forwardRef(function ComboboxInputGroup(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {
-    state: fieldState,
-    disabled: fieldDisabled
+    state: fieldState
   } = (0, _FieldRootContext.useFieldRootContext)();
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
   const {
@@ -41,7 +45,7 @@ const ComboboxInputGroup = exports.ComboboxInputGroup = /*#__PURE__*/React.forwa
   const hasSelectedValue = (0, _store.useStore)(store, _store2.selectors.hasSelectedValue);
   const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
   const popupSide = mounted && positionerElement ? popupSideValue : null;
-  const disabled = fieldDisabled || comboboxDisabled;
+  const disabled = comboboxDisabled;
   const listEmpty = filteredItems.length === 0;
   const placeholder = selectionMode === 'none' ? false : !hasSelectedValue;
   const state = {
@@ -59,7 +63,12 @@ const ComboboxInputGroup = exports.ComboboxInputGroup = /*#__PURE__*/React.forwa
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: [forwardedRef, setInputGroupElement],
     props: [{
-      role: 'group'
+      role: 'group',
+      onMouseDown(event) {
+        (0, _handleInputPress.handleInputPress)(event, store, disabled, readOnly, target => {
+          return (0, _element.contains)(store.state.chipsContainerRef.current, target);
+        });
+      }
     }, elementProps],
     state,
     stateAttributesMapping: _stateAttributesMapping.triggerStateAttributesMapping

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

@@ -21,11 +21,11 @@ export declare enum ComboboxInputGroupDataAttributes {
    */
   popupSide = "data-popup-side",
   /**
-   * Present when the component is in valid state (when wrapped in Field.Root).
+   * Present when the component is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the component is in invalid state (when wrapped in Field.Root).
+   * Present when the component is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/combobox/input-group/ComboboxInputGroupDataAttributes.js

@@ -27,11 +27,11 @@ let ComboboxInputGroupDataAttributes = exports.ComboboxInputGroupDataAttributes
    */
   ComboboxInputGroupDataAttributes["popupSide"] = "data-popup-side";
   /**
-   * Present when the component is in valid state (when wrapped in Field.Root).
+   * Present when the component is in a valid state (when wrapped in Field.Root).
    */
   ComboboxInputGroupDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the component is in invalid state (when wrapped in Field.Root).
+   * Present when the component is in an invalid state (when wrapped in Field.Root).
    */
   ComboboxInputGroupDataAttributes["invalid"] = "data-invalid";
   /**

package/combobox/item/ComboboxItem.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NonNativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NonNativeButtonProps } from "../../internals/types.js";
 /**
  * An individual item in the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxItem: React.NamedExoticComponent<Omit<ComboboxItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxItemState {

package/combobox/item/ComboboxItem.js

@@ -11,17 +11,19 @@ var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _store = require("@base-ui/utils/store");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
-var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useCompositeListItem = require("../../internals/composite/list/useCompositeListItem");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _ComboboxItemContext = require("./ComboboxItemContext");
 var _store2 = require("../store");
-var _useButton = require("../../use-button");
+var _useButton = require("../../internals/use-button");
 var _ComboboxRowContext = require("../row/ComboboxRowContext");
-var _itemEquality = require("../../utils/itemEquality");
+var _itemEquality = require("../../internals/itemEquality");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * An individual item in the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function ComboboxItem(componentProps, forwardedRef) {
   const {
@@ -31,6 +33,7 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
     index: indexProp,
     disabled = false,
     nativeButton = false,
+    style,
     ...elementProps
   } = componentProps;
   const didPointerDownRef = React.useRef(false);
@@ -146,6 +149,11 @@ const ComboboxItem = exports.ComboboxItem = /*#__PURE__*/React.memo(/*#__PURE__*
       didPointerDownRef.current = true;
       event.preventDefault();
     },
+    onMouseDown(event) {
+      // iOS Safari can emit a synthetic mousedown for touch taps without a preceding
+      // pointerdown. Prevent default here too so tapping an item does not blur the input.
+      event.preventDefault();
+    },
     onClick(event) {
       if (disabled || readOnly) {
         return;

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

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * Indicates whether the item is selected.
  * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxItemIndicator: React.ForwardRefExoticComponent<Omit<ComboboxItemIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export interface ComboboxItemIndicatorProps extends BaseUIComponentProps<'span', ComboboxItemIndicatorState> {

package/combobox/item-indicator/ComboboxItemIndicator.js

@@ -8,14 +8,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.ComboboxItemIndicator = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _ComboboxItemContext = require("../item/ComboboxItemContext");
-var _useTransitionStatus = require("../../utils/useTransitionStatus");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _useTransitionStatus = require("../../internals/useTransitionStatus");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Indicates whether the item is selected.
  * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxItemIndicator = exports.ComboboxItemIndicator = /*#__PURE__*/React.forwardRef(function ComboboxItemIndicator(componentProps, forwardedRef) {
   const keepMounted = componentProps.keepMounted ?? false;
@@ -41,6 +43,7 @@ const Inner = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef((componentPr
   const {
     render,
     className,
+    style,
     keepMounted,
     ...elementProps
   } = componentProps;

package/combobox/item-indicator/ComboboxItemIndicatorDataAttributes.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ComboboxItemIndicatorDataAttributes = void 0;
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 let ComboboxItemIndicatorDataAttributes = exports.ComboboxItemIndicatorDataAttributes = function (ComboboxItemIndicatorDataAttributes) {
   /**
    * Present when the indicator is animating in.

package/combobox/label/ComboboxLabel.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { FieldRoot } from "../../field/root/FieldRoot.js";
 /**
  * An accessible label that is automatically associated with the combobox trigger.

package/combobox/label/ComboboxLabel.js

@@ -10,10 +10,10 @@ 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 _useRenderElement = require("../../internals/useRenderElement");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _constants = require("../../internals/field-constants/constants");
+var _useLabel = require("../../internals/labelable-provider/useLabel");
 var _resolveAriaLabelledBy = require("../../utils/resolveAriaLabelledBy");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _store2 = require("../store");
@@ -27,6 +27,7 @@ const ComboboxLabel = exports.ComboboxLabel = /*#__PURE__*/React.forwardRef(func
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.

package/combobox/list/ComboboxList.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A list container for the items.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxList: React.ForwardRefExoticComponent<Omit<ComboboxListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxListState {

package/combobox/list/ComboboxList.js

@@ -9,23 +9,26 @@ exports.ComboboxList = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@base-ui/utils/store");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _ComboboxPositionerContext = require("../positioner/ComboboxPositionerContext");
 var _store2 = require("../store");
 var _ComboboxCollection2 = require("../collection/ComboboxCollection");
-var _CompositeList = require("../../composite/list/CompositeList");
+var _CompositeList = require("../../internals/composite/list/CompositeList");
 var _utils = require("../../floating-ui-react/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A list container for the items.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(function ComboboxList(componentProps, forwardedRef) {
   var _ComboboxCollection;
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;
@@ -33,16 +36,12 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
   const floatingRootContext = (0, _ComboboxRootContext.useComboboxFloatingContext)();
   const hasPositionerContext = Boolean((0, _ComboboxPositionerContext.useComboboxPositionerContext)(true));
   const {
-    filteredItems
+    filteredItems,
+    hasItems
   } = (0, _ComboboxRootContext.useComboboxDerivedItemsContext)();
-  const items = (0, _store.useStore)(store, _store2.selectors.items);
-  const labelsRef = (0, _store.useStore)(store, _store2.selectors.labelsRef);
-  const listRef = (0, _store.useStore)(store, _store2.selectors.listRef);
   const selectionMode = (0, _store.useStore)(store, _store2.selectors.selectionMode);
   const grid = (0, _store.useStore)(store, _store2.selectors.grid);
   const popupProps = (0, _store.useStore)(store, _store2.selectors.popupProps);
-  const disabled = (0, _store.useStore)(store, _store2.selectors.disabled);
-  const readOnly = (0, _store.useStore)(store, _store2.selectors.readOnly);
   const virtualized = (0, _store.useStore)(store, _store2.selectors.virtualized);
   const multiple = selectionMode === 'multiple';
   const empty = filteredItems.length === 0;
@@ -79,7 +78,7 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
       role: grid ? 'grid' : 'listbox',
       'aria-multiselectable': multiple ? 'true' : undefined,
       onKeyDown(event) {
-        if (disabled || readOnly) {
+        if (store.state.disabled || store.state.readOnly) {
           return;
         }
         if (event.key === 'Enter') {
@@ -110,8 +109,8 @@ const ComboboxList = exports.ComboboxList = /*#__PURE__*/React.forwardRef(functi
     return element;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeList.CompositeList, {
-    elementsRef: listRef,
-    labelsRef: items ? undefined : labelsRef,
+    elementsRef: store.state.listRef,
+    labelsRef: hasItems ? undefined : store.state.labelsRef,
     children: element
   });
 });

package/combobox/popup/ComboboxPopup.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
-import { BaseUIComponentProps } from "../../utils/types.js";
+import { BaseUIComponentProps } from "../../internals/types.js";
 import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A container for the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxPopup: React.ForwardRefExoticComponent<Omit<ComboboxPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPopupState {

package/combobox/popup/ComboboxPopup.js

@@ -9,13 +9,13 @@ exports.ComboboxPopup = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@base-ui/utils/store");
 var _floatingUiReact = require("../../floating-ui-react");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _store2 = require("../store");
 var _popupStateMapping = require("../../utils/popupStateMapping");
 var _ComboboxPositionerContext = require("../positioner/ComboboxPositionerContext");
-var _useOpenChangeComplete = require("../../utils/useOpenChangeComplete");
-var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _useOpenChangeComplete = require("../../internals/useOpenChangeComplete");
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _utils = require("../../floating-ui-react/utils");
 var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
 var _ComboboxInternalDismissButton = require("../utils/ComboboxInternalDismissButton");
@@ -28,11 +28,14 @@ const stateAttributesMapping = {
 /**
  * A container for the list.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxPopup = exports.ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopup(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     initialFocus,
     finalFocus,
     ...elementProps

package/combobox/portal/ComboboxPortal.d.ts

@@ -4,6 +4,8 @@ import { FloatingPortal } from "../../floating-ui-react/index.js";
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxPortal: React.ForwardRefExoticComponent<Omit<ComboboxPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPortalState {}

package/combobox/portal/ComboboxPortal.js

@@ -17,6 +17,8 @@ var _jsxRuntime = require("react/jsx-runtime");
  * A portal element that moves the popup to a different part of the DOM.
  * By default, the portal element is appended to `<body>`.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxPortal = exports.ComboboxPortal = /*#__PURE__*/React.forwardRef(function ComboboxPortal(props, forwardedRef) {
   const {

package/combobox/positioner/ComboboxPositioner.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Positions the popup against the trigger.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 export declare const ComboboxPositioner: React.ForwardRefExoticComponent<Omit<ComboboxPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ComboboxPositionerState {

package/combobox/positioner/ComboboxPositioner.js

@@ -11,21 +11,21 @@ var _store = require("@base-ui/utils/store");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _inertValue = require("@base-ui/utils/inertValue");
-var _useScrollLock = require("@base-ui/utils/useScrollLock");
 var _ComboboxRootContext = require("../root/ComboboxRootContext");
 var _ComboboxPositionerContext = require("./ComboboxPositionerContext");
 var _useAnchorPositioning = require("../../utils/useAnchorPositioning");
-var _popupStateMapping = require("../../utils/popupStateMapping");
 var _ComboboxPortalContext = require("../portal/ComboboxPortalContext");
-var _constants = require("../../utils/constants");
-var _getDisabledMountTransitionStyles = require("../../utils/getDisabledMountTransitionStyles");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _constants = require("../../internals/constants");
 var _store2 = require("../store");
 var _InternalBackdrop = require("../../utils/InternalBackdrop");
+var _usePositioner = require("../../utils/usePositioner");
+var _useAnchoredPopupScrollLock = require("../../utils/useAnchoredPopupScrollLock");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Positions the popup against the trigger.
  * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Combobox](https://base-ui.com/react/components/combobox)
  */
 const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositioner(componentProps, forwardedRef) {
   const {
@@ -43,6 +43,7 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance = _constants.DROPDOWN_COLLISION_AVOIDANCE,
+    style: styleProp,
     ...elementProps
   } = componentProps;
   const store = (0, _ComboboxRootContext.useComboboxRootContext)();
@@ -55,6 +56,7 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
   const open = (0, _store.useStore)(store, _store2.selectors.open);
   const mounted = (0, _store.useStore)(store, _store2.selectors.mounted);
   const openMethod = (0, _store.useStore)(store, _store2.selectors.openMethod);
+  const positionerElement = (0, _store.useStore)(store, _store2.selectors.positionerElement);
   const triggerElement = (0, _store.useStore)(store, _store2.selectors.triggerElement);
   const inputElement = (0, _store.useStore)(store, _store2.selectors.inputElement);
   const inputGroupElement = (0, _store.useStore)(store, _store2.selectors.inputGroupElement);
@@ -80,20 +82,7 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
     collisionAvoidance,
     lazyFlip: true
   });
-  (0, _useScrollLock.useScrollLock)(open && modal && openMethod !== 'touch', triggerElement);
-  const defaultProps = React.useMemo(() => {
-    const style = {
-      ...positioning.positionerStyles
-    };
-    if (!open) {
-      style.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style
-    };
-  }, [open, mounted, positioning.positionerStyles]);
+  (0, _useAnchoredPopupScrollLock.useAnchoredPopupScrollLock)(open && modal, openMethod === 'touch', positionerElement, triggerElement);
   const state = {
     open,
     side: positioning.side,
@@ -104,26 +93,19 @@ const ComboboxPositioner = exports.ComboboxPositioner = /*#__PURE__*/React.forwa
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
-  const contextValue = React.useMemo(() => ({
-    side: positioning.side,
-    align: positioning.align,
-    arrowRef: positioning.arrowRef,
-    arrowUncentered: positioning.arrowUncentered,
-    arrowStyles: positioning.arrowStyles,
-    anchorHidden: positioning.anchorHidden,
-    isPositioned: positioning.isPositioned
-  }), [positioning.side, positioning.align, positioning.arrowRef, positioning.arrowUncentered, positioning.arrowStyles, positioning.anchorHidden, positioning.isPositioned]);
   const setPositionerElement = (0, _useStableCallback.useStableCallback)(element => {
     store.set('positionerElement', element);
   });
-  const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    state,
-    ref: [forwardedRef, setPositionerElement],
-    props: [defaultProps, (0, _getDisabledMountTransitionStyles.getDisabledMountTransitionStyles)(transitionStatus), elementProps],
-    stateAttributesMapping: _popupStateMapping.popupStateMapping
+  const element = (0, _usePositioner.usePositioner)(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, setPositionerElement],
+    hidden: !mounted,
+    inert: !open
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ComboboxPositionerContext.ComboboxPositionerContext.Provider, {
-    value: contextValue,
+    value: positioning,
     children: [mounted && modal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InternalBackdrop.InternalBackdrop, {
       inert: (0, _inertValue.inertValue)(!open),
       cutout: inputGroupElement ?? inputElement ?? triggerElement

package/combobox/positioner/ComboboxPositionerContext.d.ts

@@ -1,14 +1,6 @@
 import * as React from 'react';
-import type { Side, Align } from "../../utils/useAnchorPositioning.js";
-export interface ComboboxPositionerContext {
-  side: Side;
-  align: Align;
-  arrowRef: React.RefObject<Element | null>;
-  arrowUncentered: boolean;
-  arrowStyles: React.CSSProperties;
-  anchorHidden: boolean;
-  isPositioned: boolean;
-}
+import type { UseAnchorPositioningReturnValue } from "../../utils/useAnchorPositioning.js";
+export type ComboboxPositionerContext = Pick<UseAnchorPositioningReturnValue, 'side' | 'align' | 'arrowRef' | 'arrowUncentered' | 'arrowStyles' | 'anchorHidden' | 'isPositioned'>;
 export declare const ComboboxPositionerContext: React.Context<ComboboxPositionerContext | undefined>;
 export declare function useComboboxPositionerContext(optional?: false): ComboboxPositionerContext;
 export declare function useComboboxPositionerContext(optional: true): ComboboxPositionerContext | undefined;

package/combobox/root/AriaCombobox.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
-import { Group } from "../../utils/resolveValueLabel.js";
+import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
+import { Group } from "../../internals/resolveValueLabel.js";
 /**
  * @internal
  */
@@ -19,6 +19,11 @@ interface ComboboxRootProps<ItemValue> {
    * Identifies the field when a form is submitted.
    */
   name?: string | undefined;
+  /**
+   * Identifies the form that owns the internal input.
+   * Useful when the combobox is rendered outside the form.
+   */
+  form?: string | undefined;
   /**
    * The id of the component.
    */