@ariakit/react-components 0.1.0

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

@@ -0,0 +1,146 @@
+import { t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+import { n as CompositeItemOptions } from "../composite-item-B4WTelVz.js";
+import { n as CompositeHoverOptions } from "../composite-hover-C7ul163w.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType, MouseEvent } from "react";
+import { BooleanOrCallback } from "@ariakit/utils";
+
+//#region src/combobox/combobox-item.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `ComboboxItem` component.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxItem({ store, value: "value" });
+ * <Role {...props} />
+ * ```
+ */
+declare const useComboboxItem: import("@ariakit/react-utils").Hook<"div", ComboboxItemOptions<"div">>;
+/**
+ * Renders a combobox item inside
+ * [`ComboboxList`](https://ariakit.com/reference/combobox-list) or
+ * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+ * components.
+ *
+ * By default, the [`value`](https://ariakit.com/reference/combobox-item#value)
+ * prop will be rendered as the children, but this can be overriden.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {4-6}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+declare const ComboboxItem: (props: ComboboxItemProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface ComboboxItemOptions<T extends ElementType = TagName> extends CompositeItemOptions<T>, CompositeHoverOptions<T> {
+  /**
+   * Object returned by the
+   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)
+   * hook. If not provided, the closest
+   * [`ComboboxList`](https://ariakit.com/reference/combobox-list) or
+   * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+   * components' context will be used.
+   *
+   * Live examples:
+   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)
+   */
+  store?: ComboboxStore;
+  /**
+   * The value of the item. This will be rendered as the children by default.
+   * - If
+   *   [`setValueOnClick`](https://ariakit.com/reference/combobox-item#setvalueonclick)
+   *   is set to `true`, this will be the value of the combobox input when the
+   *   user clicks on this item.
+   * - If
+   *   [`selectValueOnClick`](https://ariakit.com/reference/combobox-item#selectvalueonclick)
+   *   is set to `true`, this will be the value of the
+   *   [`selectedValue`](https://ariakit.com/reference/combobox-provider#selectedvalue)
+   *   state.
+   * - If the
+   *   [`autoComplete`](https://ariakit.com/reference/combobox#autocomplete)
+   *   prop on the [`Combobox`](https://ariakit.com/reference/combobox)
+   *   component is set to `both` or `inline`, this will be the value of the
+   *   combobox input when the combobox loses focus.
+   *
+   * Live examples:
+   * - [Animated Combobox](https://ariakit.com/examples/combobox-animated)
+   * - [ComboboxCancel](https://ariakit.com/examples/combobox-cancel)
+   * - [ComboboxDisclosure](https://ariakit.com/examples/combobox-disclosure)
+   * - [Combobox filtering](https://ariakit.com/examples/combobox-filtering)
+   * - [ComboboxGroup](https://ariakit.com/examples/combobox-group)
+   * - [Textarea with inline
+   *   Combobox](https://ariakit.com/examples/combobox-textarea)
+   */
+  value?: string;
+  /**
+   * Whether to hide the combobox when this item is clicked. By default, the
+   * combobox will be hidden when the user clicks on an item with a
+   * [`value`](https://ariakit.com/reference/combobox-item#value) prop, unless
+   * the combobox is
+   * [multi-selectable](https://ariakit.com/examples/combobox-multiple).
+   *
+   * Live examples:
+   * - [Combobox with links](https://ariakit.com/examples/combobox-links)
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   * - [Command Menu](https://ariakit.com/examples/dialog-combobox-command-menu)
+   * - [Command Menu with
+   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)
+   */
+  hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+  /**
+   * Whether to set the combobox
+   * [`value`](https://ariakit.com/reference/combobox-provider#value) state
+   * using this item's
+   * [`value`](https://ariakit.com/reference/combobox-item#value) when the item
+   * is clicked. The default is `true`, unless the combobox is
+   * [multi-selectable](https://ariakit.com/examples/combobox-multiple).
+   *
+   * Live examples:
+   * - [Menu with Combobox](https://ariakit.com/examples/menu-combobox)
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   */
+  setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+  /**
+   * Whether to set the
+   * [`selectedValue`](https://ariakit.com/reference/combobox-provider#selectedvalue)
+   * state using this item's
+   * [`value`](https://ariakit.com/reference/combobox-item#value) when the item
+   * is clicked. If a callback is provided, it will only be invoked if the item
+   * has a value.
+   *
+   * Live examples:
+   * - [Submenu with
+   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)
+   * @default true
+   */
+  selectValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+  /**
+   * Whether to reset the the combobox input value when this item is selected or
+   * unselected by click. This prop is set to `true` by default if
+   * the combobox supports multiple selections. In other words, if the
+   * [`selectedValue`](https://ariakit.com/reference/combobox-provider#selectedvalue)
+   * or
+   * [`defaultSelectedValue`](https://ariakit.com/reference/combobox-provider#defaultselectedvalue)
+   * props are arrays.
+   */
+  resetValueOnSelect?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+  /**
+   * @default false
+   */
+  focusOnHover?: CompositeHoverOptions["focusOnHover"];
+}
+type ComboboxItemProps<T extends ElementType = TagName> = Props<T, ComboboxItemOptions<T>>;
+//#endregion
+export { ComboboxItem, ComboboxItemOptions, ComboboxItemProps, useComboboxItem };
+//# sourceMappingURL=combobox-item.d.ts.map

package/dist/combobox/combobox-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-item.d.ts","names":["Props","BooleanOrCallback","ElementType","MouseEvent","CompositeHoverOptions","CompositeItemOptions","ComboboxStore","TagName","useComboboxItem","ComboboxItemOptions","Hook","ComboboxItem","ComboboxItemProps","props","ReactElement","JSXElementConstructor","T","HTMLElement","store","value","hideOnClick","setValueOnClick","selectValueOnClick","resetValueOnSelect","focusOnHover"],"sources":["../../src/combobox/combobox-item.d.ts"],"mappings":";;;;;;;;cAMcO,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAF4B,cAapCC,eAAAA,iCAAgDE,IAAAA,QAAYD,mBAAmB;;;;AAAA;AAsBpG;;;;;;;;;AAAiJ;AACjJ;;;;;;;cADqBE,YAAAA,GAAeE,KAAAA,EAAOD,iBAAiB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC3GN,mBAAAA,WAA8BP,WAAAA,GAAcK,OAAAA,UAAiBF,oBAAAA,CAAqBW,CAAAA,GAAIZ,qBAAAA,CAAsBY,CAAAA;EAuDzFb;;;;;;;;;;;EA3ChCe,KAAAA,GAAQZ,aAAAA;EAZkED;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC1Ec,KAAAA;EAsDqBlB;;;;;;AAIe;AAExC;;;;;;;;EA5CImB,WAAAA,GAAcnB,iBAAAA,CAAkBE,UAAAA,CAAWc,WAAAA;EA4CuB;;;;;;;;;;AAAyB;;;EA9B3FI,eAAAA,GAAkBpB,iBAAAA,CAAkBE,UAAAA,CAAWc,WAAAA;;;;;;;;;;;;;;EAc/CK,kBAAAA,GAAqBrB,iBAAAA,CAAkBE,UAAAA,CAAWc,WAAAA;;;;;;;;;;EAUlDM,kBAAAA,GAAqBtB,iBAAAA,CAAkBE,UAAAA,CAAWc,WAAAA;;;;EAIlDO,YAAAA,GAAepB,qBAAAA;AAAAA;AAAAA,KAEPQ,iBAAAA,WAA4BV,WAAAA,GAAcK,OAAAA,IAAWP,KAAAA,CAAMgB,CAAAA,EAAGP,mBAAAA,CAAoBO,CAAAA"}

package/dist/combobox/combobox-item.js

@@ -0,0 +1,157 @@
+"use client";
+import { ComboboxItemCheckedContext, ComboboxItemValueContext, ComboboxListRoleContext, useComboboxScopedContext } from "./combobox-context.js";
+import { useCompositeItem } from "../composite/composite-item.js";
+import { useCompositeHover } from "../composite/composite-hover.js";
+import { createElement, createHook, forwardRef, memo, useBooleanEvent, useEvent, useWrapElement } from "@ariakit/react-utils";
+import { hasFocus, invariant, isDownloading, isOpeningInNewTab, isTextField } from "@ariakit/utils";
+import { useCallback, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreStateObject } from "@ariakit/react-store";
+//#region src/combobox/combobox-item.tsx
+const TagName = "div";
+function isSelected(storeValue, itemValue) {
+	if (itemValue == null) return;
+	if (storeValue == null) return false;
+	if (Array.isArray(storeValue)) return storeValue.includes(itemValue);
+	return storeValue === itemValue;
+}
+function getItemRole(popupRole) {
+	return {
+		menu: "menuitem",
+		listbox: "option",
+		tree: "treeitem"
+	}[popupRole] ?? "option";
+}
+/**
+* Returns props to create a `ComboboxItem` component.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx
+* const store = useComboboxStore();
+* const props = useComboboxItem({ store, value: "value" });
+* <Role {...props} />
+* ```
+*/
+const useComboboxItem = createHook(function useComboboxItem({ store, value, hideOnClick, setValueOnClick, selectValueOnClick = true, resetValueOnSelect, focusOnHover = false, moveOnKeyPress = true, getItem: getItemProp, ...props }) {
+	const context = useComboboxScopedContext();
+	store = store || context;
+	invariant(store, "ComboboxItem must be wrapped in a ComboboxList or ComboboxPopover component.");
+	const { resetValueOnSelectState, multiSelectable, selected } = useStoreStateObject(store, {
+		resetValueOnSelectState: "resetValueOnSelect",
+		multiSelectable(state) {
+			return Array.isArray(state.selectedValue);
+		},
+		selected(state) {
+			return isSelected(state.selectedValue, value);
+		}
+	});
+	const getItem = useCallback((item) => {
+		const nextItem = {
+			...item,
+			value
+		};
+		if (getItemProp) return getItemProp(nextItem);
+		return nextItem;
+	}, [value, getItemProp]);
+	setValueOnClick = setValueOnClick ?? !multiSelectable;
+	hideOnClick = hideOnClick ?? (value != null && !multiSelectable);
+	const onClickProp = props.onClick;
+	const setValueOnClickProp = useBooleanEvent(setValueOnClick);
+	const selectValueOnClickProp = useBooleanEvent(selectValueOnClick);
+	const resetValueOnSelectProp = useBooleanEvent(resetValueOnSelect ?? resetValueOnSelectState ?? multiSelectable);
+	const hideOnClickProp = useBooleanEvent(hideOnClick);
+	const onClick = useEvent((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		if (isDownloading(event)) return;
+		if (isOpeningInNewTab(event)) return;
+		if (value != null) {
+			if (selectValueOnClickProp(event)) {
+				if (resetValueOnSelectProp(event)) store?.resetValue();
+				store?.setSelectedValue((prevValue) => {
+					if (!Array.isArray(prevValue)) return value;
+					if (prevValue.includes(value)) return prevValue.filter((v) => v !== value);
+					return [...prevValue, value];
+				});
+			}
+			if (setValueOnClickProp(event)) store?.setValue(value);
+		}
+		if (hideOnClickProp(event)) store?.hide();
+	});
+	const onKeyDownProp = props.onKeyDown;
+	const onKeyDown = useEvent((event) => {
+		onKeyDownProp?.(event);
+		if (event.defaultPrevented) return;
+		const baseElement = store?.getState().baseElement;
+		if (!baseElement) return;
+		if (hasFocus(baseElement)) return;
+		if (event.key.length === 1 || event.key === "Backspace" || event.key === "Delete") {
+			queueMicrotask(() => baseElement.focus());
+			if (isTextField(baseElement)) store?.setValue(baseElement.value);
+		}
+	});
+	if (multiSelectable && selected != null) props = {
+		"aria-selected": selected,
+		...props
+	};
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(ComboboxItemValueContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(ComboboxItemCheckedContext.Provider, {
+			value: selected ?? false,
+			children: element
+		})
+	}), [value, selected]);
+	props = {
+		role: getItemRole(useContext(ComboboxListRoleContext)),
+		children: value,
+		...props,
+		onClick,
+		onKeyDown
+	};
+	const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);
+	props = useCompositeItem({
+		store,
+		...props,
+		getItem,
+		moveOnKeyPress: (event) => {
+			if (!moveOnKeyPressProp(event)) return false;
+			const moveEvent = new Event("combobox-item-move");
+			(store?.getState().baseElement)?.dispatchEvent(moveEvent);
+			return true;
+		}
+	});
+	props = useCompositeHover({
+		store,
+		focusOnHover,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a combobox item inside
+* [`ComboboxList`](https://ariakit.com/reference/combobox-list) or
+* [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+* components.
+*
+* By default, the [`value`](https://ariakit.com/reference/combobox-item#value)
+* prop will be rendered as the children, but this can be overriden.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {4-6}
+* <ComboboxProvider>
+*   <Combobox />
+*   <ComboboxPopover>
+*     <ComboboxItem value="Apple" />
+*     <ComboboxItem value="Banana" />
+*     <ComboboxItem value="Orange" />
+*   </ComboboxPopover>
+* </ComboboxProvider>
+* ```
+*/
+const ComboboxItem = memo(forwardRef(function ComboboxItem(props) {
+	return createElement(TagName, useComboboxItem(props));
+}));
+//#endregion
+export { ComboboxItem, useComboboxItem };
+
+//# sourceMappingURL=combobox-item.js.map

package/dist/combobox/combobox-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-item.js","names":["key"],"sources":["../../src/combobox/combobox-item.tsx"],"sourcesContent":["import { useStoreStateObject } from \"@ariakit/react-store\";\nimport {\n  useBooleanEvent,\n  useEvent,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport {\n  isTextField,\n  isDownloading,\n  isOpeningInNewTab,\n  hasFocus,\n  invariant,\n} from \"@ariakit/utils\";\nimport type { BooleanOrCallback } from \"@ariakit/utils\";\nimport type { ElementType, KeyboardEvent, MouseEvent } from \"react\";\nimport { useCallback, useContext } from \"react\";\nimport type { CompositeHoverOptions } from \"../composite/composite-hover.tsx\";\nimport { useCompositeHover } from \"../composite/composite-hover.tsx\";\nimport type { CompositeItemOptions } from \"../composite/composite-item.tsx\";\nimport { useCompositeItem } from \"../composite/composite-item.tsx\";\nimport {\n  ComboboxItemCheckedContext,\n  ComboboxItemValueContext,\n  ComboboxListRoleContext,\n  useComboboxScopedContext,\n} from \"./combobox-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction isSelected(\n  storeValue?: string | readonly string[],\n  itemValue?: string,\n) {\n  if (itemValue == null) return;\n  if (storeValue == null) return false;\n  if (Array.isArray(storeValue)) {\n    return storeValue.includes(itemValue);\n  }\n  return storeValue === itemValue;\n}\n\nfunction getItemRole(popupRole?: string) {\n  const itemRoleByPopupRole = {\n    menu: \"menuitem\",\n    listbox: \"option\",\n    tree: \"treeitem\",\n  };\n  const key = popupRole as keyof typeof itemRoleByPopupRole;\n  return itemRoleByPopupRole[key] ?? \"option\";\n}\n\n/**\n * Returns props to create a `ComboboxItem` component.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxItem({ store, value: \"value\" });\n * <Role {...props} />\n * ```\n */\nexport const useComboboxItem = createHook<TagName, ComboboxItemOptions>(\n  function useComboboxItem({\n    store,\n    value,\n    hideOnClick,\n    setValueOnClick,\n    selectValueOnClick = true,\n    resetValueOnSelect,\n    focusOnHover = false,\n    moveOnKeyPress = true,\n    getItem: getItemProp,\n    ...props\n  }) {\n    const context = useComboboxScopedContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"ComboboxItem must be wrapped in a ComboboxList or ComboboxPopover component.\",\n    );\n\n    const { resetValueOnSelectState, multiSelectable, selected } =\n      useStoreStateObject(store, {\n        resetValueOnSelectState: \"resetValueOnSelect\",\n        multiSelectable(state) {\n          return Array.isArray(state.selectedValue);\n        },\n        selected(state) {\n          return isSelected(state.selectedValue, value);\n        },\n      });\n\n    const getItem = useCallback<NonNullable<CompositeItemOptions[\"getItem\"]>>(\n      (item) => {\n        const nextItem = { ...item, value };\n        if (getItemProp) {\n          return getItemProp(nextItem);\n        }\n        return nextItem;\n      },\n      [value, getItemProp],\n    );\n\n    setValueOnClick = setValueOnClick ?? !multiSelectable;\n    hideOnClick = hideOnClick ?? (value != null && !multiSelectable);\n\n    const onClickProp = props.onClick;\n    const setValueOnClickProp = useBooleanEvent(setValueOnClick);\n    const selectValueOnClickProp = useBooleanEvent(selectValueOnClick);\n    const resetValueOnSelectProp = useBooleanEvent(\n      resetValueOnSelect ?? resetValueOnSelectState ?? multiSelectable,\n    );\n    const hideOnClickProp = useBooleanEvent(hideOnClick);\n\n    const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented) return;\n      if (isDownloading(event)) return;\n      if (isOpeningInNewTab(event)) return;\n      if (value != null) {\n        if (selectValueOnClickProp(event)) {\n          if (resetValueOnSelectProp(event)) {\n            store?.resetValue();\n          }\n          store?.setSelectedValue((prevValue) => {\n            if (!Array.isArray(prevValue)) return value;\n            if (prevValue.includes(value)) {\n              return prevValue.filter((v) => v !== value);\n            }\n            return [...prevValue, value];\n          });\n        }\n        if (setValueOnClickProp(event)) {\n          store?.setValue(value);\n        }\n      }\n      if (hideOnClickProp(event)) {\n        store?.hide();\n      }\n    });\n\n    const onKeyDownProp = props.onKeyDown;\n\n    const onKeyDown = useEvent((event: KeyboardEvent<HTMLType>) => {\n      onKeyDownProp?.(event);\n      if (event.defaultPrevented) return;\n      const baseElement = store?.getState().baseElement;\n      if (!baseElement) return;\n      if (hasFocus(baseElement)) return;\n      // When the combobox is not working with virtual focus, the items will\n      // receive DOM focus. Therefore, pressing printable keys will not fill\n      // the text field. So we need to programmatically focus on the text\n      // field when the user presses printable keys.\n      const printable = event.key.length === 1;\n      if (printable || event.key === \"Backspace\" || event.key === \"Delete\") {\n        queueMicrotask(() => baseElement.focus());\n        if (isTextField(baseElement)) {\n          // If the combobox element is a text field, we should update the\n          // store value with the current's element value. This is necessary\n          // because the value may temporarily change based on the currently\n          // selected item, but it'll be reset to the original value when the\n          // combobox input is focused.\n          store?.setValue(baseElement.value);\n        }\n      }\n    });\n\n    if (multiSelectable && selected != null) {\n      props = {\n        \"aria-selected\": selected,\n        ...props,\n      };\n    }\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <ComboboxItemValueContext.Provider value={value}>\n          <ComboboxItemCheckedContext.Provider value={selected ?? false}>\n            {element}\n          </ComboboxItemCheckedContext.Provider>\n        </ComboboxItemValueContext.Provider>\n      ),\n      [value, selected],\n    );\n\n    const popupRole = useContext(ComboboxListRoleContext);\n\n    props = {\n      role: getItemRole(popupRole),\n      children: value,\n      ...props,\n      onClick,\n      onKeyDown,\n    };\n\n    const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress);\n\n    props = useCompositeItem<TagName>({\n      store,\n      ...props,\n      getItem,\n      // Dispatch a custom event on the combobox input when moving to an item\n      // with the keyboard so the Combobox component can enable inline\n      // autocompletion.\n      moveOnKeyPress: (event) => {\n        if (!moveOnKeyPressProp(event)) return false;\n        const moveEvent = new Event(\"combobox-item-move\");\n        const baseElement = store?.getState().baseElement;\n        baseElement?.dispatchEvent(moveEvent);\n        return true;\n      },\n    });\n\n    props = useCompositeHover({ store, focusOnHover, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a combobox item inside\n * [`ComboboxList`](https://ariakit.com/reference/combobox-list) or\n * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)\n * components.\n *\n * By default, the [`value`](https://ariakit.com/reference/combobox-item#value)\n * prop will be rendered as the children, but this can be overriden.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {4-6}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxItem value=\"Apple\" />\n *     <ComboboxItem value=\"Banana\" />\n *     <ComboboxItem value=\"Orange\" />\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxItem = memo(\n  forwardRef(function ComboboxItem(props: ComboboxItemProps) {\n    const htmlProps = useComboboxItem(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface ComboboxItemOptions<T extends ElementType = TagName>\n  extends CompositeItemOptions<T>, CompositeHoverOptions<T> {\n  /**\n   * Object returned by the\n   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)\n   * hook. If not provided, the closest\n   * [`ComboboxList`](https://ariakit.com/reference/combobox-list) or\n   * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)\n   * components' context will be used.\n   *\n   * Live examples:\n   * - [Navigation Menubar](https://ariakit.com/examples/menubar-navigation)\n   */\n  store?: ComboboxStore;\n  /**\n   * The value of the item. This will be rendered as the children by default.\n   * - If\n   *   [`setValueOnClick`](https://ariakit.com/reference/combobox-item#setvalueonclick)\n   *   is set to `true`, this will be the value of the combobox input when the\n   *   user clicks on this item.\n   * - If\n   *   [`selectValueOnClick`](https://ariakit.com/reference/combobox-item#selectvalueonclick)\n   *   is set to `true`, this will be the value of the\n   *   [`selectedValue`](https://ariakit.com/reference/combobox-provider#selectedvalue)\n   *   state.\n   * - If the\n   *   [`autoComplete`](https://ariakit.com/reference/combobox#autocomplete)\n   *   prop on the [`Combobox`](https://ariakit.com/reference/combobox)\n   *   component is set to `both` or `inline`, this will be the value of the\n   *   combobox input when the combobox loses focus.\n   *\n   * Live examples:\n   * - [Animated Combobox](https://ariakit.com/examples/combobox-animated)\n   * - [ComboboxCancel](https://ariakit.com/examples/combobox-cancel)\n   * - [ComboboxDisclosure](https://ariakit.com/examples/combobox-disclosure)\n   * - [Combobox filtering](https://ariakit.com/examples/combobox-filtering)\n   * - [ComboboxGroup](https://ariakit.com/examples/combobox-group)\n   * - [Textarea with inline\n   *   Combobox](https://ariakit.com/examples/combobox-textarea)\n   */\n  value?: string;\n  /**\n   * Whether to hide the combobox when this item is clicked. By default, the\n   * combobox will be hidden when the user clicks on an item with a\n   * [`value`](https://ariakit.com/reference/combobox-item#value) prop, unless\n   * the combobox is\n   * [multi-selectable](https://ariakit.com/examples/combobox-multiple).\n   *\n   * Live examples:\n   * - [Combobox with links](https://ariakit.com/examples/combobox-links)\n   * - [Submenu with\n   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)\n   * - [Command Menu](https://ariakit.com/examples/dialog-combobox-command-menu)\n   * - [Command Menu with\n   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)\n   */\n  hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;\n  /**\n   * Whether to set the combobox\n   * [`value`](https://ariakit.com/reference/combobox-provider#value) state\n   * using this item's\n   * [`value`](https://ariakit.com/reference/combobox-item#value) when the item\n   * is clicked. The default is `true`, unless the combobox is\n   * [multi-selectable](https://ariakit.com/examples/combobox-multiple).\n   *\n   * Live examples:\n   * - [Menu with Combobox](https://ariakit.com/examples/menu-combobox)\n   * - [Submenu with\n   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)\n   */\n  setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;\n  /**\n   * Whether to set the\n   * [`selectedValue`](https://ariakit.com/reference/combobox-provider#selectedvalue)\n   * state using this item's\n   * [`value`](https://ariakit.com/reference/combobox-item#value) when the item\n   * is clicked. If a callback is provided, it will only be invoked if the item\n   * has a value.\n   *\n   * Live examples:\n   * - [Submenu with\n   *   Combobox](https://ariakit.com/examples/menu-nested-combobox)\n   * @default true\n   */\n  selectValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;\n  /**\n   * Whether to reset the the combobox input value when this item is selected or\n   * unselected by click. This prop is set to `true` by default if\n   * the combobox supports multiple selections. In other words, if the\n   * [`selectedValue`](https://ariakit.com/reference/combobox-provider#selectedvalue)\n   * or\n   * [`defaultSelectedValue`](https://ariakit.com/reference/combobox-provider#defaultselectedvalue)\n   * props are arrays.\n   */\n  resetValueOnSelect?: BooleanOrCallback<MouseEvent<HTMLElement>>;\n  /**\n   * @default false\n   */\n  focusOnHover?: CompositeHoverOptions[\"focusOnHover\"];\n}\n\nexport type ComboboxItemProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxItemOptions<T>\n>;\n"],"mappings":"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"}

package/dist/combobox/combobox-label.d.ts

@@ -0,0 +1,50 @@
+import { t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/combobox/combobox-label.d.ts
+declare const TagName = "label";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `ComboboxLabel` component.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxLabel({ store });
+ * <Role {...props}>Favorite fruit</Role>
+ * <Combobox store={store} />
+ * ```
+ */
+declare const useComboboxLabel: import("@ariakit/react-utils").Hook<"label", ComboboxLabelOptions<"label">>;
+/**
+ * Renders a label for the [`Combobox`](https://ariakit.com/reference/combobox)
+ * component.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {2}
+ * <ComboboxProvider>
+ *   <ComboboxLabel>Favorite fruit</ComboboxLabel>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+declare const ComboboxLabel: (props: ComboboxLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface ComboboxLabelOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)
+   * hook. If not provided, the closest
+   * [`ComboboxProvider`](https://ariakit.com/reference/combobox-provider)
+   * component's context will be used.
+   */
+  store?: ComboboxStore;
+}
+type ComboboxLabelProps<T extends ElementType = TagName> = Props<T, ComboboxLabelOptions<T>>;
+//#endregion
+export { ComboboxLabel, ComboboxLabelOptions, ComboboxLabelProps, useComboboxLabel };
+//# sourceMappingURL=combobox-label.d.ts.map

package/dist/combobox/combobox-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-label.d.ts","names":["Options","Props","ElementType","ComboboxStore","TagName","useComboboxLabel","ComboboxLabelOptions","Hook","ComboboxLabel","ComboboxLabelProps","props","ReactElement","JSXElementConstructor","_T","store","T"],"sources":["../../src/combobox/combobox-label.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAY7B;AAdyD,cAcpCC,gBAAAA,iCAAiDE,IAAAA,UAAcD,oBAAoB;;;AAAA;AAiBxG;;;;;;;;;AAAmJ;AACnJ;;;cADqBE,aAAAA,GAAgBE,KAAAA,EAAOD,kBAAkB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC7GN,oBAAAA,YAAgCJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAQpEG;;;;;;;EAARW,KAAAA,GAAQX,aAAAA;AAAAA;AAAAA,KAEAM,kBAAAA,WAA6BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMc,CAAAA,EAAGT,oBAAAA,CAAqBS,CAAAA"}

package/dist/combobox/combobox-label.js

@@ -0,0 +1,51 @@
+"use client";
+import { useComboboxProviderContext } from "./combobox-context.js";
+import { createElement, createHook, forwardRef, memo } from "@ariakit/react-utils";
+import { invariant, removeUndefinedValues } from "@ariakit/utils";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/combobox/combobox-label.tsx
+const TagName = "label";
+/**
+* Returns props to create a `ComboboxLabel` component.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx
+* const store = useComboboxStore();
+* const props = useComboboxLabel({ store });
+* <Role {...props}>Favorite fruit</Role>
+* <Combobox store={store} />
+* ```
+*/
+const useComboboxLabel = createHook(function useComboboxLabel({ store, ...props }) {
+	const context = useComboboxProviderContext();
+	store = store || context;
+	invariant(store, "ComboboxLabel must receive a `store` prop or be wrapped in a ComboboxProvider component.");
+	props = {
+		htmlFor: useStoreState(store, (state) => state.baseElement?.id),
+		...props
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders a label for the [`Combobox`](https://ariakit.com/reference/combobox)
+* component.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {2}
+* <ComboboxProvider>
+*   <ComboboxLabel>Favorite fruit</ComboboxLabel>
+*   <Combobox />
+*   <ComboboxPopover>
+*     <ComboboxItem value="Apple" />
+*     <ComboboxItem value="Orange" />
+*   </ComboboxPopover>
+* </ComboboxProvider>
+* ```
+*/
+const ComboboxLabel = memo(forwardRef(function ComboboxLabel(props) {
+	return createElement(TagName, useComboboxLabel(props));
+}));
+//#endregion
+export { ComboboxLabel, useComboboxLabel };
+
+//# sourceMappingURL=combobox-label.js.map

package/dist/combobox/combobox-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-label.js","names":[],"sources":["../../src/combobox/combobox-label.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport { invariant, removeUndefinedValues } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useComboboxProviderContext } from \"./combobox-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nconst TagName = \"label\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `ComboboxLabel` component.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxLabel({ store });\n * <Role {...props}>Favorite fruit</Role>\n * <Combobox store={store} />\n * ```\n */\nexport const useComboboxLabel = createHook<TagName, ComboboxLabelOptions>(\n  function useComboboxLabel({ store, ...props }) {\n    const context = useComboboxProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"ComboboxLabel must receive a `store` prop or be wrapped in a ComboboxProvider component.\",\n    );\n\n    const comboboxId = useStoreState(store, (state) => state.baseElement?.id);\n\n    props = {\n      htmlFor: comboboxId,\n      ...props,\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders a label for the [`Combobox`](https://ariakit.com/reference/combobox)\n * component.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {2}\n * <ComboboxProvider>\n *   <ComboboxLabel>Favorite fruit</ComboboxLabel>\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxItem value=\"Apple\" />\n *     <ComboboxItem value=\"Orange\" />\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxLabel = memo(\n  forwardRef(function ComboboxLabel(props: ComboboxLabelProps) {\n    const htmlProps = useComboboxLabel(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface ComboboxLabelOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)\n   * hook. If not provided, the closest\n   * [`ComboboxProvider`](https://ariakit.com/reference/combobox-provider)\n   * component's context will be used.\n   */\n  store?: ComboboxStore;\n}\n\nexport type ComboboxLabelProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxLabelOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;MA6BI,mBAAgB,WAAA,SAA2B,iBAAA,EAAA,OAAA,GAAA,SAAA;CAC3C,MAAA,UAAQ,2BAAS;CAEjB,QAAA,SAGI;CAKJ,UAAQ,OAAA,0FAAA;SACN;EACA,SAAG,cAAA,QAAA,UAAA,MAAA,aAAA,EAAA;EACL,GAAA;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;;MAqBI,gBAAqB,KAAA,WADH,SAAA,cACqB,OAAA;CACxC,OACH,cAAA,SAAA,iBAAA,KAAA,CAAA"}

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

@@ -0,0 +1,55 @@
+import { t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+import { n as DisclosureContentOptions } from "../disclosure-content-BbPkZgAc.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/combobox/combobox-list.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `ComboboxList` component.
+ * @see https://ariakit.com/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>
+ * ```
+ */
+declare const useComboboxList: import("@ariakit/react-utils").Hook<"div", 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`).
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {3-7}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxList>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxList>
+ * </ComboboxProvider>
+ * ```
+ */
+declare const ComboboxList: (props: ComboboxListProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface ComboboxListOptions<T extends ElementType = TagName> extends Options, Pick<DisclosureContentOptions<T>, "alwaysVisible"> {
+  /**
+   * Object returned by the
+   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)
+   * hook. If not provided, the closest
+   * [`ComboboxProvider`](https://ariakit.com/reference/combobox-provider)
+   * component's context will be used.
+   */
+  store?: ComboboxStore;
+}
+type ComboboxListProps<T extends ElementType = TagName> = Props<T, ComboboxListOptions<T>>;
+//#endregion
+export { ComboboxList, ComboboxListOptions, ComboboxListProps, useComboboxList };
+//# sourceMappingURL=combobox-list.d.ts.map

package/dist/combobox/combobox-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-list.d.ts","names":["Options","Props","ElementType","DisclosureContentOptions","ComboboxStore","TagName","useComboboxList","ComboboxListOptions","Hook","ComboboxList","ComboboxListProps","props","ReactElement","JSXElementConstructor","T","Pick","store"],"sources":["../../src/combobox/combobox-list.d.ts"],"mappings":";;;;;;cAIcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAe7B;;;;AAjByD,cAiBpCC,eAAAA,iCAAgDE,IAAAA,QAAYD,mBAAmB;AAkBpG;;;;;;;;;AAAiJ;AACjJ;;;;;;;AADA,cAAqBE,YAAAA,GAAeE,KAAAA,EAAOD,iBAAiB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC3GN,mBAAAA,WAA8BL,WAAAA,GAAcG,OAAAA,UAAiBL,OAAAA,EAASe,IAAAA,CAAKZ,wBAAAA,CAAyBW,CAAAA;EAA9BC;;;;;;;EAQnFC,KAAAA,GAAQZ,aAAAA;AAAAA;AAAAA,KAEAM,iBAAAA,WAA4BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,mBAAAA,CAAoBO,CAAAA"}

package/dist/combobox/combobox-list.js

@@ -0,0 +1,106 @@
+"use client";
+import { ComboboxListRoleContext, ComboboxScopedContextProvider, useComboboxContext, useComboboxScopedContext } from "./combobox-context.js";
+import { isHidden } from "../disclosure/disclosure-content.js";
+import { createElement, createHook, forwardRef, useAttribute, useId, useMergeRefs, useSafeLayoutEffect, useWrapElement } from "@ariakit/react-utils";
+import { invariant, removeUndefinedValues } from "@ariakit/utils";
+import { useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/combobox/combobox-list.tsx
+const TagName = "div";
+/**
+* Returns props to create a `ComboboxList` component.
+* @see https://ariakit.com/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>
+* ```
+*/
+const useComboboxList = createHook(function useComboboxList({ store, alwaysVisible, ...props }) {
+	const scopedContext = useComboboxScopedContext(true);
+	const context = useComboboxContext();
+	store = store || context;
+	const scopedContextSameStore = !!store && store === scopedContext;
+	invariant(store, "ComboboxList must receive a `store` prop or be wrapped in a ComboboxProvider component.");
+	const ref = useRef(null);
+	const id = useId(props.id);
+	const mounted = useStoreState(store, "mounted");
+	const hidden = isHidden(mounted, props.hidden, alwaysVisible);
+	const style = hidden ? {
+		...props.style,
+		display: "none"
+	} : props.style;
+	const multiSelectable = useStoreState(store, (state) => Array.isArray(state.selectedValue));
+	const role = useAttribute(ref, "role", props.role);
+	const ariaMultiSelectable = role === "listbox" || role === "tree" || role === "grid" ? multiSelectable || void 0 : void 0;
+	const [hasListboxInside, setHasListboxInside] = useState(false);
+	const contentElement = useStoreState(store, "contentElement");
+	useSafeLayoutEffect(() => {
+		if (!mounted) return;
+		const element = ref.current;
+		if (!element) return;
+		if (contentElement !== element) return;
+		const callback = () => {
+			setHasListboxInside(!!element.querySelector("[role='listbox']"));
+		};
+		const observer = new MutationObserver(callback);
+		observer.observe(element, {
+			subtree: true,
+			childList: true,
+			attributeFilter: ["role"]
+		});
+		callback();
+		return () => observer.disconnect();
+	}, [mounted, contentElement]);
+	if (!hasListboxInside) props = {
+		role: "listbox",
+		"aria-multiselectable": ariaMultiSelectable,
+		...props
+	};
+	props = useWrapElement(props, (element) => /* @__PURE__ */ jsx(ComboboxScopedContextProvider, {
+		value: store,
+		children: /* @__PURE__ */ jsx(ComboboxListRoleContext.Provider, {
+			value: role,
+			children: element
+		})
+	}), [store, role]);
+	const setContentElement = id && (!scopedContext || !scopedContextSameStore) ? store.setContentElement : null;
+	props = {
+		hidden,
+		...props,
+		id,
+		ref: useMergeRefs(setContentElement, ref, props.ref),
+		style
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* 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`).
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {3-7}
+* <ComboboxProvider>
+*   <Combobox />
+*   <ComboboxList>
+*     <ComboboxItem value="Apple" />
+*     <ComboboxItem value="Banana" />
+*     <ComboboxItem value="Orange" />
+*   </ComboboxList>
+* </ComboboxProvider>
+* ```
+*/
+const ComboboxList = forwardRef(function ComboboxList(props) {
+	return createElement(TagName, useComboboxList(props));
+});
+//#endregion
+export { ComboboxList, useComboboxList };
+
+//# sourceMappingURL=combobox-list.js.map

package/dist/combobox/combobox-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-list.js","names":[],"sources":["../../src/combobox/combobox-list.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useAttribute,\n  useId,\n  useMergeRefs,\n  useSafeLayoutEffect,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport { invariant, removeUndefinedValues } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useRef, useState } from \"react\";\nimport type { DisclosureContentOptions } from \"../disclosure/disclosure-content.tsx\";\nimport { isHidden } from \"../disclosure/disclosure-content.tsx\";\nimport {\n  ComboboxListRoleContext,\n  ComboboxScopedContextProvider,\n  useComboboxContext,\n  useComboboxScopedContext,\n} from \"./combobox-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\n/**\n * Returns props to create a `ComboboxList` component.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxList({ store });\n * <Role {...props}>\n *   <ComboboxItem value=\"Item 1\" />\n *   <ComboboxItem value=\"Item 2\" />\n *   <ComboboxItem value=\"Item 3\" />\n * </Role>\n * ```\n */\nexport const useComboboxList = createHook<TagName, ComboboxListOptions>(\n  function useComboboxList({ store, alwaysVisible, ...props }) {\n    const scopedContext = useComboboxScopedContext(true);\n    const context = useComboboxContext();\n    store = store || context;\n    const scopedContextSameStore = !!store && store === scopedContext;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"ComboboxList must receive a `store` prop or be wrapped in a ComboboxProvider component.\",\n    );\n\n    const ref = useRef<HTMLType>(null);\n    const id = useId(props.id);\n    const mounted = useStoreState(store, \"mounted\");\n    const hidden = isHidden(mounted, props.hidden, alwaysVisible);\n    const style = hidden ? { ...props.style, display: \"none\" } : props.style;\n\n    const multiSelectable = useStoreState(store, (state) =>\n      Array.isArray(state.selectedValue),\n    );\n    const role = useAttribute(ref, \"role\", props.role);\n    const isCompositeRole =\n      role === \"listbox\" || role === \"tree\" || role === \"grid\";\n    const ariaMultiSelectable = isCompositeRole\n      ? multiSelectable || undefined\n      : undefined;\n\n    const [hasListboxInside, setHasListboxInside] = useState(false);\n    const contentElement = useStoreState(store, \"contentElement\");\n\n    // We support nested <ComboboxList> elements (usually in the form of\n    // ComboboxPopover>ComboboxList), but we can't have nested listbox roles, so\n    // we check here if there's already a listbox element inside the current\n    // element.\n    useSafeLayoutEffect(() => {\n      if (!mounted) return;\n      const element = ref.current;\n      if (!element) return;\n      if (contentElement !== element) return;\n      const callback = () => {\n        setHasListboxInside(!!element.querySelector(\"[role='listbox']\"));\n      };\n      const observer = new MutationObserver(callback);\n      observer.observe(element, {\n        subtree: true,\n        childList: true,\n        attributeFilter: [\"role\"],\n      });\n      callback();\n      return () => observer.disconnect();\n    }, [mounted, contentElement]);\n\n    if (!hasListboxInside) {\n      props = {\n        role: \"listbox\",\n        \"aria-multiselectable\": ariaMultiSelectable,\n        ...props,\n      };\n    }\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <ComboboxScopedContextProvider value={store}>\n          <ComboboxListRoleContext.Provider value={role}>\n            {element}\n          </ComboboxListRoleContext.Provider>\n        </ComboboxScopedContextProvider>\n      ),\n      [store, role],\n    );\n\n    // When nesting ComboboxList elements, the content element should be\n    // assigned to the topmost ComboboxList element.\n    const setContentElement =\n      id && (!scopedContext || !scopedContextSameStore)\n        ? store.setContentElement\n        : null;\n\n    props = {\n      hidden,\n      ...props,\n      id,\n      ref: useMergeRefs(setContentElement, ref, props.ref),\n      style,\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders a combobox list. The `role` prop is set to `listbox` by default, but\n * can be overriden by any other valid combobox popup role (`listbox`, `menu`,\n * `tree`, `grid` or `dialog`).\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {3-7}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxList>\n *     <ComboboxItem value=\"Apple\" />\n *     <ComboboxItem value=\"Banana\" />\n *     <ComboboxItem value=\"Orange\" />\n *   </ComboboxList>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxList = forwardRef(function ComboboxList(\n  props: ComboboxListProps,\n) {\n  const htmlProps = useComboboxList(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxListOptions<T extends ElementType = TagName>\n  extends Options, Pick<DisclosureContentOptions<T>, \"alwaysVisible\"> {\n  /**\n   * Object returned by the\n   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)\n   * hook. If not provided, the closest\n   * [`ComboboxProvider`](https://ariakit.com/reference/combobox-provider)\n   * component's context will be used.\n   */\n  store?: ComboboxStore;\n}\n\nexport type ComboboxListProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxListOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;MA6CI,kBAAsB,WAAA,SAAA,gBAA6B,EAAA,OAAA,eAAA,GAAA,SAAA;CACnD,MAAM,gBAAU,yBAAmB,IAAA;CACnC,MAAA,UAAQ,mBAAS;CACjB,QAAM,SAAA;CAEN,MAAA,yBAGI,CAAA,CAAA,SAAA,UAAA;CAGJ,UAAM,OAAM,yFAAqB;CACjC,MAAM,MAAK,OAAM,IAAM;CACvB,MAAM,KAAA,MAAU,MAAA,EAAA;CAChB,MAAM,UAAS,cAAS,OAAS,SAAM;CACvC,MAAM,SAAQ,SAAS,SAAA,MAAA,QAAA,aAAA;OAAK,QAAM,SAAA;EAAO,GAAA,MAAS;EAAO,SAAU;CAEnE,IAAA,MAAM;CAGN,MAAM,kBAAO,cAAkB,QAAc,UAAI,MAAA,QAAA,MAAA,aAAA,CAAA;CAGjD,MAAM,OAAA,aAAA,KADJ,QAAS,MAAA,IAAA;CAKX,MAAM,sBAAmB,SAAA,aAAuB,SAAS,UAAK,SAAA,SAAA,mBAAA,KAAA,IAAA,KAAA;CAC9D,MAAM,CAAA,kBAAiB,uBAAqB,SAAA,KAAgB;CAM5D,MAAA,iBAAA,cAA0B,OAAA,gBAAA;2BACV;EACd,IAAA,CAAA,SAAM;EACN,MAAK,UAAS,IAAA;EACd,IAAI,CAAA,SAAA;EACJ,IAAA,mBAAuB,SAAA;QACrB,iBAAsB;GACxB,oBAAA,CAAA,CAAA,QAAA,cAAA,kBAAA,CAAA;EACA;EACA,MAAA,WAAiB,IAAA,iBAAS,QAAA;WACxB,QAAS,SAAA;GACT,SAAA;GACA,WAAA;GACD,iBAAA,CAAA,MAAA;EACD,CAAA;EACA,SAAA;EACF,aAAa,SAAA,WAAe;CAE5B,GAAA,CAAI,SAAC,cACH,CAAA;KACE,CAAA,kBAAM,QAAA;EACN,MAAA;EACA,wBAAG;EACL,GAAA;CAGF;SAG0C,eAAA,QAAA,YAAA,oBAAA,+BAAA;;YACK,oBAAA,wBAAA,UAAA;;GAEP,UAAA;EACL,CAAA;CAOnC,CAAA,GAAA,CAAA,OAAM,IAAA,CAAA;CAKN,MAAA,oBAAQ,OAAA,CAAA,iBAAA,CAAA,0BAAA,MAAA,oBAAA;SACN;EACA;EACA,GAAA;EACA;EACA,KAAA,aAAA,mBAAA,KAAA,MAAA,GAAA;EACF;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;;;MAuBE,eAAO,WADW,SAAA,aACqB,OAAA;CACxC,OAAA,cAAA,SAAA,gBAAA,KAAA,CAAA"}