@ariakit/react-core 0.0.1 → 0.1.1

package/cjs/combobox/combobox-group.d.ts

@@ -0,0 +1,46 @@
+import type { CompositeGroupOptions } from "../composite/composite-group.js";
+import type { As, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxGroup` component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxGroup({ store });
+ * <Combobox store={store} />
+ * <ComboboxPopover store={store}>
+ *   <Role {...props}>
+ *     <ComboboxGroupLabel>Label</ComboboxGroupLabel>
+ *     <ComboboxItem value="Item 1" />
+ *     <ComboboxItem value="Item 2" />
+ *   </Role>
+ * </ComboboxPopover>
+ * ```
+ */
+export declare const useComboboxGroup: import("../utils/types.js").Hook<ComboboxGroupOptions<"div">>;
+/**
+ * Renders a combobox group.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const combobox = useComboboxStore();
+ * <Combobox store={store} />
+ * <ComboboxPopover store={store}>
+ *   <ComboboxGroup>
+ *     <ComboboxGroupLabel>Label</ComboboxGroupLabel>
+ *     <ComboboxItem value="Item 1" />
+ *     <ComboboxItem value="Item 2" />
+ *   </ComboboxGroup>
+ * </ComboboxPopover>
+ * ```
+ */
+export declare const ComboboxGroup: import("../utils/types.js").Component<ComboboxGroupOptions<"div">>;
+export interface ComboboxGroupOptions<T extends As = "div"> extends CompositeGroupOptions<T> {
+    /**
+     * Object returned by the `useComboboxStore` hook. If not provided, the parent
+     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     */
+    store?: ComboboxStore;
+}
+export type ComboboxGroupProps<T extends As = "div"> = Props<ComboboxGroupOptions<T>>;

package/cjs/combobox/combobox-item-value.cjs

@@ -0,0 +1,77 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+
+var _2WZVSPAIcjs = require('../__chunks/2WZVSPAI.cjs');
+
+
+
+
+var _UYIFJ7U3cjs = require('../__chunks/UYIFJ7U3.cjs');
+
+// src/combobox/combobox-item-value.tsx
+var _react = require('react');
+var _misc = require('@ariakit/core/utils/misc');
+var _jsxruntime = require('react/jsx-runtime');
+function normalizeValue(value) {
+  return _misc.normalizeString.call(void 0, value).toLowerCase();
+}
+function splitValue(itemValue, userValue) {
+  userValue = normalizeValue(userValue);
+  let index = normalizeValue(itemValue).indexOf(userValue);
+  const parts = [];
+  while (index !== -1) {
+    if (index !== 0) {
+      parts.push(
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-autocomplete-value": "", children: itemValue.substr(0, index) }, parts.length)
+      );
+    }
+    parts.push(
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-user-value": "", children: itemValue.substr(index, userValue.length) }, parts.length)
+    );
+    itemValue = itemValue.substr(index + userValue.length);
+    index = normalizeValue(itemValue).indexOf(userValue);
+  }
+  if (itemValue) {
+    parts.push(
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { "data-autocomplete-value": "", children: itemValue }, parts.length)
+    );
+  }
+  return parts;
+}
+var useComboboxItemValue = _UYIFJ7U3cjs.createHook.call(void 0, 
+  ({ store, value, ...props }) => {
+    const context = _react.useContext.call(void 0, _2WZVSPAIcjs.ComboboxContext);
+    store = store || context;
+    const itemContext = _react.useContext.call(void 0, _2WZVSPAIcjs.ComboboxItemValueContext);
+    const itemValue = _nullishCoalesce(value, () => ( itemContext));
+    _misc.invariant.call(void 0, 
+      store,
+      process.env.NODE_ENV !== "production" && "ComboboxItemValue must be wrapped in a ComboboxItem component"
+    );
+    const stateValue = store.useState(
+      (state) => itemValue && state.value ? state.value : void 0
+    );
+    const children = _react.useMemo.call(void 0, 
+      () => itemValue && stateValue ? splitValue(itemValue, stateValue) : itemValue,
+      [itemValue, stateValue]
+    );
+    props = {
+      children,
+      ...props
+    };
+    return props;
+  }
+);
+var ComboboxItemValue = _UYIFJ7U3cjs.createComponent.call(void 0, 
+  (props) => {
+    const htmlProps = useComboboxItemValue(props);
+    return _UYIFJ7U3cjs.createElement.call(void 0, "span", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ComboboxItemValue.displayName = "ComboboxItemValue";
+}
+
+
+
+exports.ComboboxItemValue = ComboboxItemValue; exports.useComboboxItemValue = useComboboxItemValue;

package/cjs/combobox/combobox-item-value.d.ts

@@ -0,0 +1,64 @@
+import type { As, Options, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxItemValue` component that displays a value
+ * element inside a combobox item. The value will be split into span elements
+ * and returned as the children prop. The portions of the value that correspond
+ * to the store value will have a `data-user-value` attribute. The other
+ * portions will have a `data-autocomplete-value` attribute.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore({ value: "p" });
+ * const props = useComboboxItemValue({ store, value: "Apple" });
+ * <Role {...props} />
+ * // This will result in the following DOM:
+ * <span>
+ *   <span data-autocomplete-value>A</span>
+ *   <span data-user-value>p</span>
+ *   <span data-user-value>p</span>
+ *   <span data-autocomplete-value>le</span>
+ * </span>
+ * ```
+ */
+export declare const useComboboxItemValue: import("../utils/types.js").Hook<ComboboxItemValueOptions<"span">>;
+/**
+ * Renders a value element inside a combobox item. The value will be split into
+ * span elements. The portions of the value that correspond to the store value
+ * will have a `data-user-value` attribute. The other portions will have a
+ * `data-autocomplete-value` attribute.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const combobox = useComboboxStore({ value: "p" });
+ *
+ * <Combobox store={combobox} />
+ * <ComboboxPopover store={combobox}>
+ *   <ComboboxItem value="Apple">
+ *     <ComboboxItemValue />
+ *   </ComboboxItem>
+ * </ComboboxPopover>
+ *
+ * // The Apple item will have a value element that looks like this:
+ * <span>
+ *   <span data-autocomplete-value>A</span>
+ *   <span data-user-value>p</span>
+ *   <span data-user-value>p</span>
+ *   <span data-autocomplete-value>le</span>
+ * </span>
+ * ```
+ */
+export declare const ComboboxItemValue: import("../utils/types.js").Component<ComboboxItemValueOptions<"span">>;
+export interface ComboboxItemValueOptions<T extends As = "span"> extends Options<T> {
+    /**
+     * Object returned by the `useComboboxStore` hook. If not provided, the parent
+     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     */
+    store?: ComboboxStore;
+    /**
+     * The current combobox item value. If not provided, the parent `ComboboxItem`
+     * component's `value` prop will be used.
+     */
+    value?: string;
+}
+export type ComboboxItemValueProps<T extends As = "span"> = Props<ComboboxItemValueOptions<T>>;

package/cjs/combobox/combobox-item.cjs

@@ -0,0 +1,151 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+
+var _2WZVSPAIcjs = require('../__chunks/2WZVSPAI.cjs');
+
+
+var _TBYPXZ5Hcjs = require('../__chunks/TBYPXZ5H.cjs');
+
+
+var _TIVUAJD3cjs = require('../__chunks/TIVUAJD3.cjs');
+require('../__chunks/EWCMH6G3.cjs');
+require('../__chunks/3QEUUQVB.cjs');
+require('../__chunks/ZQAFJQIS.cjs');
+require('../__chunks/6622YWGR.cjs');
+require('../__chunks/44UMDBZE.cjs');
+require('../__chunks/NVMBKFRB.cjs');
+
+
+
+
+var _UYIFJ7U3cjs = require('../__chunks/UYIFJ7U3.cjs');
+
+
+
+
+var _5QY4WCTRcjs = require('../__chunks/5QY4WCTR.cjs');
+require('../__chunks/2X5K3J7Y.cjs');
+
+// src/combobox/combobox-item.tsx
+var _react = require('react');
+var _dom = require('@ariakit/core/utils/dom');
+var _events = require('@ariakit/core/utils/events');
+var _focus = require('@ariakit/core/utils/focus');
+var _misc = require('@ariakit/core/utils/misc');
+var _jsxruntime = require('react/jsx-runtime');
+var useComboboxItem = _UYIFJ7U3cjs.createHook.call(void 0, 
+  ({
+    store,
+    value,
+    hideOnClick = value != null,
+    setValueOnClick = true,
+    shouldRegisterItem = true,
+    focusOnHover = false,
+    moveOnKeyPress = true,
+    getItem: getItemProp,
+    ...props
+  }) => {
+    const context = _react.useContext.call(void 0, _2WZVSPAIcjs.ComboboxContext);
+    store = store || context;
+    _misc.invariant.call(void 0, 
+      store,
+      process.env.NODE_ENV !== "production" && "ComboboxItem must be wrapped in a ComboboxList or ComboboxPopover component"
+    );
+    const getItem = _react.useCallback.call(void 0, 
+      (item) => {
+        const nextItem = { ...item, value };
+        if (getItemProp) {
+          return getItemProp(nextItem);
+        }
+        return nextItem;
+      },
+      [value, getItemProp]
+    );
+    const onClickProp = props.onClick;
+    const setValueOnClickProp = _5QY4WCTRcjs.useBooleanEvent.call(void 0, setValueOnClick);
+    const hideOnClickProp = _5QY4WCTRcjs.useBooleanEvent.call(void 0, hideOnClick);
+    const onClick = _5QY4WCTRcjs.useEvent.call(void 0, (event) => {
+      _optionalChain([onClickProp, 'optionalCall', _ => _(event)]);
+      if (event.defaultPrevented)
+        return;
+      if (_events.isDownloading.call(void 0, event))
+        return;
+      if (_events.isOpeningInNewTab.call(void 0, event))
+        return;
+      if (value != null && setValueOnClickProp(event)) {
+        _optionalChain([store, 'optionalAccess', _2 => _2.setValue, 'call', _3 => _3(value)]);
+      }
+      if (hideOnClickProp(event)) {
+        _optionalChain([store, 'optionalAccess', _4 => _4.move, 'call', _5 => _5(null)]);
+        _optionalChain([store, 'optionalAccess', _6 => _6.hide, 'call', _7 => _7()]);
+      }
+    });
+    const onKeyDownProp = props.onKeyDown;
+    const onKeyDown = _5QY4WCTRcjs.useEvent.call(void 0, (event) => {
+      _optionalChain([onKeyDownProp, 'optionalCall', _8 => _8(event)]);
+      if (event.defaultPrevented)
+        return;
+      const baseElement = _optionalChain([store, 'optionalAccess', _9 => _9.getState, 'call', _10 => _10(), 'access', _11 => _11.baseElement]);
+      if (!baseElement)
+        return;
+      if (_focus.hasFocus.call(void 0, baseElement))
+        return;
+      const printable = event.key.length === 1;
+      if (printable || event.key === "Backspace" || event.key === "Delete") {
+        queueMicrotask(() => baseElement.focus());
+        if (_dom.isTextField.call(void 0, baseElement)) {
+          _optionalChain([store, 'optionalAccess', _12 => _12.setValue, 'call', _13 => _13(baseElement.value)]);
+        }
+      }
+    });
+    props = _5QY4WCTRcjs.useWrapElement.call(void 0, 
+      props,
+      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _2WZVSPAIcjs.ComboboxItemValueContext.Provider, { value, children: element }),
+      [value]
+    );
+    const contentElement = store.useState("contentElement");
+    props = {
+      role: _dom.getPopupItemRole.call(void 0, contentElement),
+      children: value,
+      ...props,
+      onClick,
+      onKeyDown
+    };
+    const moveOnKeyPressProp = _5QY4WCTRcjs.useBooleanEvent.call(void 0, moveOnKeyPress);
+    const shouldRegister = store.useState(
+      (state) => state.mounted && shouldRegisterItem
+    );
+    props = _TIVUAJD3cjs.useCompositeItem.call(void 0, {
+      store,
+      ...props,
+      getItem,
+      shouldRegisterItem: shouldRegister,
+      // Dispatch a custom event on the combobox input when moving to an item
+      // with the keyboard so the Combobox component can enable inline
+      // autocompletion.
+      moveOnKeyPress: (event) => {
+        if (!moveOnKeyPressProp(event))
+          return false;
+        const moveEvent = new Event("combobox-item-move");
+        const baseElement = _optionalChain([store, 'optionalAccess', _14 => _14.getState, 'call', _15 => _15(), 'access', _16 => _16.baseElement]);
+        _optionalChain([baseElement, 'optionalAccess', _17 => _17.dispatchEvent, 'call', _18 => _18(moveEvent)]);
+        return true;
+      }
+    });
+    props = _TBYPXZ5Hcjs.useCompositeHover.call(void 0, { store, focusOnHover, ...props });
+    return props;
+  }
+);
+var ComboboxItem = _UYIFJ7U3cjs.createMemoComponent.call(void 0, 
+  (props) => {
+    const htmlProps = useComboboxItem(props);
+    return _UYIFJ7U3cjs.createElement.call(void 0, "div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ComboboxItem.displayName = "ComboboxItem";
+}
+
+
+
+exports.ComboboxItem = ComboboxItem; exports.useComboboxItem = useComboboxItem;

package/cjs/combobox/combobox-item.d.ts

@@ -0,0 +1,69 @@
+import type { MouseEvent } from "react";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { CompositeHoverOptions } from "../composite/composite-hover.js";
+import type { CompositeItemOptions } from "../composite/composite-item.js";
+import type { As, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxItem` component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxItem({ store, value: "value" });
+ * <Role {...props} />
+ * ```
+ */
+export declare const useComboboxItem: import("../utils/types.js").Hook<ComboboxItemOptions<"div">>;
+/**
+ * Renders a combobox item inside a combobox list or popover. The `role` prop
+ * will be automatically set based on the `ComboboxList` or `ComboboxPopover`
+ * own `role` prop. For example, if the `ComboboxPopover` component's `role`
+ * prop is set to `listbox` (default), the `ComboboxItem` `role` will be set to
+ * `option`. By default, the `value` prop will be rendered as the children, but
+ * this can be overriden.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const combobox = useComboboxStore();
+ * <Combobox store={combobox} />
+ * <ComboboxPopover store={combobox}>
+ *   <ComboboxItem value="Item 1" />
+ *   <ComboboxItem value="Item 2" />
+ *   <ComboboxItem value="Item 3" />
+ * </ComboboxPopover>
+ * ```
+ */
+export declare const ComboboxItem: import("../utils/types.js").Component<ComboboxItemOptions<"div">>;
+export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItemOptions<T>, CompositeHoverOptions<T> {
+    /**
+     * Object returned by the `useComboboxStore` hook. If not provided, the parent
+     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     */
+    store?: ComboboxStore;
+    /**
+     * The value of the item. This will be rendered as the children by default.
+     *   - If `setValueOnClick` is set to `true`, this will be the value of the
+     *     combobox input when the user clicks on this item.
+     *   - If the `autoComplete` prop on the `Combobox` component is set to `both`
+     *     or `inline`, this will be the value of the combobox input when the
+     *     combobox loses focus.
+     */
+    value?: string;
+    /**
+     * Whether to hide the combobox when this item is clicked.
+     * @default true
+     */
+    hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    /**
+     * Whether to set the combobox value with this item's value when this item is
+     * clicked.
+     * @default true
+     */
+    setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    /**
+     * @default false
+     */
+    focusOnHover?: CompositeHoverOptions["focusOnHover"];
+}
+export type ComboboxItemProps<T extends As = "div"> = Props<ComboboxItemOptions<T>>;

package/cjs/combobox/combobox-list.cjs

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+var _DARNBOHZcjs = require('../__chunks/DARNBOHZ.cjs');
+require('../__chunks/2WZVSPAI.cjs');
+require('../__chunks/UYIFJ7U3.cjs');
+require('../__chunks/5QY4WCTR.cjs');
+require('../__chunks/2X5K3J7Y.cjs');
+
+
+
+exports.ComboboxList = _DARNBOHZcjs.ComboboxList; exports.useComboboxList = _DARNBOHZcjs.useComboboxList;

package/cjs/combobox/combobox-list.d.ts

@@ -0,0 +1,42 @@
+import type { As, Options, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxList` component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxList({ store });
+ * <Role {...props}>
+ *   <ComboboxItem value="Item 1" />
+ *   <ComboboxItem value="Item 2" />
+ *   <ComboboxItem value="Item 3" />
+ * </Role>
+ * ```
+ */
+export declare const useComboboxList: import("../utils/types.js").Hook<ComboboxListOptions<"div">>;
+/**
+ * Renders a combobox list. The `role` prop is set to `listbox` by default, but
+ * can be overriden by any other valid combobox popup role (`listbox`, `menu`,
+ * `tree`, `grid` or `dialog`). The `aria-labelledby` prop is set to the
+ * combobox input element's `id` by default.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const combobox = useComboboxStore();
+ * <Combobox store={combobox} />
+ * <ComboboxList store={combobox}>
+ *   <ComboboxItem value="Item 1" />
+ *   <ComboboxItem value="Item 2" />
+ *   <ComboboxItem value="Item 3" />
+ * </ComboboxList>
+ * ```
+ */
+export declare const ComboboxList: import("../utils/types.js").Component<ComboboxListOptions<"div">>;
+export interface ComboboxListOptions<T extends As = "div"> extends Options<T> {
+    /**
+     * Object returned by the `useComboboxStore` hook.
+     */
+    store: ComboboxStore;
+}
+export type ComboboxListProps<T extends As = "div"> = Props<ComboboxListOptions<T>>;

package/cjs/combobox/combobox-popover.cjs

@@ -0,0 +1,94 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _DARNBOHZcjs = require('../__chunks/DARNBOHZ.cjs');
+require('../__chunks/2WZVSPAI.cjs');
+
+
+var _YAJKVIK2cjs = require('../__chunks/YAJKVIK2.cjs');
+require('../__chunks/GEJXRZB4.cjs');
+require('../__chunks/2ZU7T6CD.cjs');
+require('../__chunks/XKBGBOWQ.cjs');
+require('../__chunks/ORRE4SVW.cjs');
+require('../__chunks/5EIZ4QQ7.cjs');
+require('../__chunks/RDNP4FTV.cjs');
+require('../__chunks/XFVLDGPP.cjs');
+require('../__chunks/ZNVMDYMM.cjs');
+require('../__chunks/YHG3KGFW.cjs');
+require('../__chunks/X2GXTE3P.cjs');
+require('../__chunks/CMHDB7LY.cjs');
+require('../__chunks/KWHAB2F2.cjs');
+require('../__chunks/T4TB3AAZ.cjs');
+require('../__chunks/SOPRUU56.cjs');
+require('../__chunks/CQSUIL2D.cjs');
+require('../__chunks/N2VCZZLP.cjs');
+require('../__chunks/W5PBA4D6.cjs');
+require('../__chunks/44UMDBZE.cjs');
+require('../__chunks/IVRU7X3P.cjs');
+require('../__chunks/MAH7ORCZ.cjs');
+require('../__chunks/NS56XHXG.cjs');
+require('../__chunks/SWSQUGVG.cjs');
+require('../__chunks/DGBC5VB4.cjs');
+
+
+
+
+var _UYIFJ7U3cjs = require('../__chunks/UYIFJ7U3.cjs');
+require('../__chunks/5QY4WCTR.cjs');
+require('../__chunks/2X5K3J7Y.cjs');
+
+// src/combobox/combobox-popover.ts
+var _dom = require('@ariakit/core/utils/dom');
+function isController(target, ...ids) {
+  if (!target)
+    return false;
+  if ("id" in target) {
+    const selector = ids.filter(Boolean).map((id) => `[aria-controls="${id}"]`).join(", ");
+    if (!selector)
+      return false;
+    return _dom.matches.call(void 0, target, selector);
+  }
+  return false;
+}
+var useComboboxPopover = _UYIFJ7U3cjs.createHook.call(void 0, 
+  ({ store, tabIndex, hideOnInteractOutside = true, ...props }) => {
+    const baseElement = store.useState("baseElement");
+    props = _DARNBOHZcjs.useComboboxList.call(void 0, { store, ...props });
+    props = _YAJKVIK2cjs.usePopover.call(void 0, {
+      store,
+      autoFocusOnShow: false,
+      autoFocusOnHide: false,
+      finalFocus: baseElement,
+      ...props,
+      // Combobox popovers can't be modal because the focus may be (and is by
+      // default) outside of it on the combobox input element.
+      modal: false,
+      // Make sure we don't hide the popover when the user interacts with the
+      // combobox cancel or the combobox disclosure buttons. They will have the
+      // aria-controls attribute pointing to either the combobox input or the
+      // comboobx popover elements.
+      hideOnInteractOutside: (event) => {
+        const { contentElement, baseElement: baseElement2 } = store.getState();
+        const contentId = _optionalChain([contentElement, 'optionalAccess', _ => _.id]);
+        const baseId = _optionalChain([baseElement2, 'optionalAccess', _2 => _2.id]);
+        if (isController(event.target, contentId, baseId))
+          return false;
+        const result = typeof hideOnInteractOutside === "function" ? hideOnInteractOutside(event) : hideOnInteractOutside;
+        return result;
+      }
+    });
+    return props;
+  }
+);
+var ComboboxPopover = _UYIFJ7U3cjs.createComponent.call(void 0, 
+  (props) => {
+    const htmlProps = useComboboxPopover(props);
+    return _UYIFJ7U3cjs.createElement.call(void 0, "div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ComboboxPopover.displayName = "ComboboxPopover";
+}
+
+
+
+exports.ComboboxPopover = ComboboxPopover; exports.useComboboxPopover = useComboboxPopover;

package/cjs/combobox/combobox-popover.d.ts

@@ -0,0 +1,39 @@
+import type { PopoverOptions } from "../popover/popover.js";
+import type { As, Props } from "../utils/types.js";
+import type { ComboboxListOptions } from "./combobox-list.js";
+/**
+ * Returns props to create a `ComboboxPopover` component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxPopover({ store });
+ * <Role {...props}>
+ *   <ComboboxItem value="Item 1" />
+ *   <ComboboxItem value="Item 2" />
+ *   <ComboboxItem value="Item 3" />
+ * </Role>
+ * ```
+ */
+export declare const useComboboxPopover: import("../utils/types.js").Hook<ComboboxPopoverOptions<"div">>;
+/**
+ * Renders a combobox popover. The `role` prop is set to `listbox` by default,
+ * but can be overriden by any other valid combobox popup role (`listbox`,
+ * `menu`, `tree`, `grid` or `dialog`). The `aria-labelledby` prop is set to the
+ * combobox input element's `id` by default.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const combobox = useComboboxStore();
+ * <Combobox store={combobox} />
+ * <ComboboxPopover store={combobox}>
+ *   <ComboboxItem value="Item 1" />
+ *   <ComboboxItem value="Item 2" />
+ *   <ComboboxItem value="Item 3" />
+ * </ComboboxPopover>
+ * ```
+ */
+export declare const ComboboxPopover: import("../utils/types.js").Component<ComboboxPopoverOptions<"div">>;
+export interface ComboboxPopoverOptions<T extends As = "div"> extends ComboboxListOptions<T>, Omit<PopoverOptions<T>, "store" | "modal"> {
+}
+export type ComboboxPopoverProps<T extends As = "div"> = Props<ComboboxPopoverOptions<T>>;

package/cjs/combobox/combobox-row.cjs

@@ -0,0 +1,46 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _2WZVSPAIcjs = require('../__chunks/2WZVSPAI.cjs');
+
+
+var _TZSSCEPYcjs = require('../__chunks/TZSSCEPY.cjs');
+require('../__chunks/NVMBKFRB.cjs');
+
+
+
+
+var _UYIFJ7U3cjs = require('../__chunks/UYIFJ7U3.cjs');
+require('../__chunks/5QY4WCTR.cjs');
+require('../__chunks/2X5K3J7Y.cjs');
+
+// src/combobox/combobox-row.ts
+var _react = require('react');
+var _dom = require('@ariakit/core/utils/dom');
+var _misc = require('@ariakit/core/utils/misc');
+var useComboboxRow = _UYIFJ7U3cjs.createHook.call(void 0, 
+  ({ store, ...props }) => {
+    const context = _react.useContext.call(void 0, _2WZVSPAIcjs.ComboboxContext);
+    store = store || context;
+    _misc.invariant.call(void 0, 
+      store,
+      process.env.NODE_ENV !== "production" && "ComboboxRow must be wrapped in a ComboboxList or ComboboxPopover component"
+    );
+    const contentElement = store.useState("contentElement");
+    const popupRole = _dom.getPopupRole.call(void 0, contentElement);
+    const role = popupRole === "grid" ? "row" : "presentation";
+    props = { role, ...props };
+    props = _TZSSCEPYcjs.useCompositeRow.call(void 0, { store, ...props });
+    return props;
+  }
+);
+var ComboboxRow = _UYIFJ7U3cjs.createComponent.call(void 0, (props) => {
+  const htmlProps = useComboboxRow(props);
+  return _UYIFJ7U3cjs.createElement.call(void 0, "div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  ComboboxRow.displayName = "ComboboxRow";
+}
+
+
+
+exports.ComboboxRow = ComboboxRow; exports.useComboboxRow = useComboboxRow;