@ariakit/react-components 0.1.0

package/dist/combobox/combobox.js

@@ -0,0 +1,399 @@
+"use client";
+import { useComboboxProviderContext } from "./combobox-context.js";
+import { useComposite } from "../composite/composite.js";
+import { usePopoverAnchor } from "../popover/popover-anchor.js";
+import { createElement, createHook, forwardRef, useBooleanEvent, useEvent, useForceUpdate, useId, useMergeRefs, useSafeLayoutEffect, useUpdateEffect, useUpdateLayoutEffect } from "@ariakit/react-utils";
+import { getPopupRole, getScrollingElement, getTextboxSelection, hasFocus, invariant, isFalsyBooleanCallback, isFocusEventOutside, noop, normalizeString, queueBeforeEvent, setSelectionRange } from "@ariakit/utils";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useStoreState } from "@ariakit/react-store";
+import { sync } from "@ariakit/store";
+//#region src/combobox/combobox.tsx
+const TagName = "input";
+function isFirstItemAutoSelected(items, activeValue, autoSelect) {
+	if (!autoSelect) return false;
+	return items.find((item) => !item.disabled && item.value)?.value === activeValue;
+}
+function hasCompletionString(value, activeValue) {
+	if (!activeValue) return false;
+	if (value == null) return false;
+	value = normalizeString(value);
+	return activeValue.length > value.length && activeValue.toLowerCase().indexOf(value.toLowerCase()) === 0;
+}
+function isInputEvent(event) {
+	return event.type === "input";
+}
+function isAriaAutoCompleteValue(value) {
+	return value === "inline" || value === "list" || value === "both" || value === "none";
+}
+function getDefaultAutoSelectId(items) {
+	return items.find((item) => {
+		if (item.disabled) return false;
+		return item.element?.getAttribute("role") !== "tab";
+	})?.id;
+}
+/**
+* Returns props to create a `Combobox` component.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx
+* const store = useComboboxStore();
+* const props = useCombobox({ store });
+* <Role {...props} />
+* <ComboboxPopover store={store}>
+*   <ComboboxItem value="Apple" />
+*   <ComboboxItem value="Banana" />
+*   <ComboboxItem value="Orange" />
+* </ComboboxPopover>
+* ```
+*/
+const useCombobox = createHook(function useCombobox({ store, focusable = true, autoSelect: autoSelectProp = false, getAutoSelectId, setValueOnChange, showMinLength = 0, showOnChange, showOnMouseDown, showOnClick = showOnMouseDown, showOnKeyDown, showOnKeyPress = showOnKeyDown, blurActiveItemOnClick, setValueOnClick = true, moveOnKeyPress = true, autoComplete = "list", ...props }) {
+	const context = useComboboxProviderContext();
+	store = store || context;
+	invariant(store, "Combobox must receive a `store` prop or be wrapped in a ComboboxProvider component.");
+	const ref = useRef(null);
+	const [valueUpdated, forceValueUpdate] = useForceUpdate();
+	const canAutoSelectRef = useRef(false);
+	const composingRef = useRef(false);
+	const autoSelect = useStoreState(store, (state) => state.virtualFocus && autoSelectProp);
+	const inline = autoComplete === "inline" || autoComplete === "both";
+	const [canInline, setCanInline] = useState(inline);
+	useUpdateLayoutEffect(() => {
+		if (!inline) return;
+		setCanInline(true);
+	}, [inline]);
+	const storeValue = useStoreState(store, "value");
+	const prevSelectedValueRef = useRef(void 0);
+	useEffect(() => {
+		return sync(store, ["selectedValue", "activeId"], (_, prev) => {
+			prevSelectedValueRef.current = prev.selectedValue;
+		});
+	}, [store]);
+	const inlineActiveValue = useStoreState(store, (state) => {
+		if (!inline) return;
+		if (!canInline) return;
+		if (state.activeValue && Array.isArray(state.selectedValue)) {
+			if (state.selectedValue.includes(state.activeValue)) return;
+			if (prevSelectedValueRef.current?.includes(state.activeValue)) return;
+		}
+		return state.activeValue;
+	});
+	const items = useStoreState(store, "renderedItems");
+	const open = useStoreState(store, "open");
+	const contentElement = useStoreState(store, "contentElement");
+	const value = useMemo(() => {
+		if (!inline) return storeValue;
+		if (!canInline) return storeValue;
+		if (isFirstItemAutoSelected(items, inlineActiveValue, autoSelect)) {
+			if (hasCompletionString(storeValue, inlineActiveValue)) return storeValue + (inlineActiveValue?.slice(storeValue.length) || "");
+			return storeValue;
+		}
+		return inlineActiveValue || storeValue;
+	}, [
+		inline,
+		canInline,
+		items,
+		inlineActiveValue,
+		autoSelect,
+		storeValue
+	]);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const onCompositeItemMove = () => setCanInline(true);
+		element.addEventListener("combobox-item-move", onCompositeItemMove);
+		return () => {
+			element.removeEventListener("combobox-item-move", onCompositeItemMove);
+		};
+	}, []);
+	useEffect(() => {
+		if (!inline) return;
+		if (!canInline) return;
+		if (!inlineActiveValue) return;
+		if (!isFirstItemAutoSelected(items, inlineActiveValue, autoSelect)) return;
+		if (!hasCompletionString(storeValue, inlineActiveValue)) return;
+		let cleanup = noop;
+		queueMicrotask(() => {
+			const element = ref.current;
+			if (!element) return;
+			const { start: prevStart, end: prevEnd } = getTextboxSelection(element);
+			const nextStart = storeValue.length;
+			const nextEnd = inlineActiveValue.length;
+			setSelectionRange(element, nextStart, nextEnd);
+			cleanup = () => {
+				if (!hasFocus(element)) return;
+				const { start, end } = getTextboxSelection(element);
+				if (start !== nextStart) return;
+				if (end !== nextEnd) return;
+				setSelectionRange(element, prevStart, prevEnd);
+			};
+		});
+		return () => cleanup();
+	}, [
+		valueUpdated,
+		inline,
+		canInline,
+		inlineActiveValue,
+		items,
+		autoSelect,
+		storeValue
+	]);
+	const scrollingElementRef = useRef(null);
+	const getAutoSelectIdProp = useEvent(getAutoSelectId);
+	const autoSelectIdRef = useRef(null);
+	const userScrolledRef = useRef(false);
+	const isAutoScrollingRef = useRef(false);
+	useEffect(() => {
+		if (!open) return;
+		if (!contentElement) return;
+		const scrollingElement = getScrollingElement(contentElement);
+		if (!scrollingElement) return;
+		scrollingElementRef.current = scrollingElement;
+		const onUserScroll = () => {
+			canAutoSelectRef.current = false;
+			userScrolledRef.current = true;
+		};
+		const onScroll = () => {
+			if (!isAutoScrollingRef.current) userScrolledRef.current = true;
+			if (!store) return;
+			if (!canAutoSelectRef.current) return;
+			const { activeId } = store.getState();
+			if (activeId === null) return;
+			if (activeId === autoSelectIdRef.current) return;
+			canAutoSelectRef.current = false;
+		};
+		const options = {
+			passive: true,
+			capture: true
+		};
+		scrollingElement.addEventListener("wheel", onUserScroll, options);
+		scrollingElement.addEventListener("touchmove", onUserScroll, options);
+		scrollingElement.addEventListener("scroll", onScroll, options);
+		return () => {
+			scrollingElement.removeEventListener("wheel", onUserScroll, true);
+			scrollingElement.removeEventListener("touchmove", onUserScroll, true);
+			scrollingElement.removeEventListener("scroll", onScroll, true);
+		};
+	}, [
+		open,
+		contentElement,
+		store
+	]);
+	useSafeLayoutEffect(() => {
+		userScrolledRef.current = false;
+		if (!storeValue) return;
+		if (composingRef.current) return;
+		canAutoSelectRef.current = true;
+	}, [storeValue]);
+	useSafeLayoutEffect(() => {
+		if (autoSelect !== "always" && open) return;
+		canAutoSelectRef.current = open;
+	}, [autoSelect, open]);
+	const resetValueOnSelect = useStoreState(store, "resetValueOnSelect");
+	useUpdateEffect(() => {
+		const canAutoSelect = canAutoSelectRef.current;
+		if (!store) return;
+		if (!open) return;
+		if (!canAutoSelect && (!resetValueOnSelect || userScrolledRef.current)) return;
+		const { baseElement, contentElement, activeId } = store.getState();
+		if (baseElement && !hasFocus(baseElement)) return;
+		if (contentElement?.hasAttribute("data-placing")) {
+			const observer = new MutationObserver(forceValueUpdate);
+			observer.observe(contentElement, { attributeFilter: ["data-placing"] });
+			return () => observer.disconnect();
+		}
+		if (autoSelect && canAutoSelect) {
+			const userAutoSelectId = getAutoSelectIdProp(items);
+			const autoSelectId = userAutoSelectId !== void 0 ? userAutoSelectId : getDefaultAutoSelectId(items) ?? store.first();
+			autoSelectIdRef.current = autoSelectId;
+			store.move(autoSelectId ?? null);
+		} else {
+			const element = store.item(activeId || store.first())?.element;
+			if (element && "scrollIntoView" in element) {
+				isAutoScrollingRef.current = true;
+				element.scrollIntoView({
+					block: "nearest",
+					inline: "nearest"
+				});
+				requestAnimationFrame(() => {
+					isAutoScrollingRef.current = false;
+				});
+			}
+		}
+	}, [
+		store,
+		open,
+		valueUpdated,
+		storeValue,
+		autoSelect,
+		resetValueOnSelect,
+		getAutoSelectIdProp,
+		items
+	]);
+	useEffect(() => {
+		if (!inline) return;
+		const combobox = ref.current;
+		if (!combobox) return;
+		const elements = [combobox, contentElement].filter((value) => !!value);
+		const onBlur = (event) => {
+			if (elements.every((el) => isFocusEventOutside(event, el))) store?.setValue(value);
+		};
+		for (const element of elements) element.addEventListener("focusout", onBlur);
+		return () => {
+			for (const element of elements) element.removeEventListener("focusout", onBlur);
+		};
+	}, [
+		inline,
+		contentElement,
+		store,
+		value
+	]);
+	const canShow = (event) => {
+		return event.currentTarget.value.length >= showMinLength;
+	};
+	const onChangeProp = props.onChange;
+	const showOnChangeProp = useBooleanEvent(showOnChange ?? canShow);
+	const setValueOnChangeProp = useBooleanEvent(setValueOnChange ?? !store.tag);
+	const onChange = useEvent((event) => {
+		onChangeProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!store) return;
+		const currentTarget = event.currentTarget;
+		const { value, selectionStart, selectionEnd } = currentTarget;
+		const nativeEvent = event.nativeEvent;
+		canAutoSelectRef.current = true;
+		if (isInputEvent(nativeEvent)) {
+			if (nativeEvent.isComposing) {
+				canAutoSelectRef.current = false;
+				composingRef.current = true;
+			}
+			if (inline) {
+				const textInserted = nativeEvent.inputType === "insertText" || nativeEvent.inputType === "insertCompositionText";
+				const caretAtEnd = selectionStart === value.length;
+				setCanInline(textInserted && caretAtEnd);
+			}
+		}
+		if (setValueOnChangeProp(event)) {
+			const isSameValue = value === store.getState().value;
+			store.setValue(value);
+			queueMicrotask(() => {
+				setSelectionRange(currentTarget, selectionStart, selectionEnd);
+			});
+			if (inline && autoSelect && isSameValue) forceValueUpdate();
+		}
+		if (showOnChangeProp(event)) store.show();
+		if (!autoSelect || !canAutoSelectRef.current) store.setActiveId(null);
+	});
+	const onCompositionEndProp = props.onCompositionEnd;
+	const onCompositionEnd = useEvent((event) => {
+		canAutoSelectRef.current = true;
+		composingRef.current = false;
+		onCompositionEndProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!autoSelect) return;
+		forceValueUpdate();
+	});
+	const onMouseDownProp = props.onMouseDown;
+	const blurActiveItemOnClickProp = useBooleanEvent(blurActiveItemOnClick ?? (() => store.getState().includesBaseElement));
+	const setValueOnClickProp = useBooleanEvent(setValueOnClick);
+	const showOnClickProp = useBooleanEvent(showOnClick ?? canShow);
+	const onMouseDown = useEvent((event) => {
+		onMouseDownProp?.(event);
+		if (event.defaultPrevented) return;
+		if (event.button) return;
+		if (event.ctrlKey) return;
+		if (!store) return;
+		if (blurActiveItemOnClickProp(event)) store.setActiveId(null);
+		if (setValueOnClickProp(event)) store.setValue(value);
+		if (showOnClickProp(event)) queueBeforeEvent(event.currentTarget, "mouseup", store.show);
+	});
+	const onKeyDownProp = props.onKeyDown;
+	const showOnKeyPressProp = useBooleanEvent(showOnKeyPress ?? canShow);
+	const onKeyDown = useEvent((event) => {
+		onKeyDownProp?.(event);
+		if (!event.repeat) canAutoSelectRef.current = false;
+		if (event.defaultPrevented) return;
+		if (!store) return;
+		const { open } = store.getState();
+		if (open && event.key === "Enter") {
+			event.preventDefault();
+			return;
+		}
+		if (event.ctrlKey) return;
+		if (event.altKey) return;
+		if (event.shiftKey) return;
+		if (event.metaKey) return;
+		if (open) return;
+		if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+			if (showOnKeyPressProp(event)) {
+				event.preventDefault();
+				store.show();
+			}
+		}
+	});
+	const onBlurProp = props.onBlur;
+	const onBlur = useEvent((event) => {
+		canAutoSelectRef.current = false;
+		onBlurProp?.(event);
+		if (event.defaultPrevented) return;
+	});
+	const id = useId(props.id);
+	const ariaAutoComplete = isAriaAutoCompleteValue(autoComplete) ? autoComplete : void 0;
+	const isActiveItem = useStoreState(store, (state) => state.activeId === null);
+	props = {
+		role: "combobox",
+		"aria-autocomplete": ariaAutoComplete,
+		"aria-haspopup": getPopupRole(contentElement, "listbox"),
+		"aria-expanded": open,
+		"aria-controls": contentElement?.id,
+		"data-active-item": isActiveItem || void 0,
+		value,
+		...props,
+		id,
+		ref: useMergeRefs(ref, props.ref),
+		onChange,
+		onCompositionEnd,
+		onMouseDown,
+		onKeyDown,
+		onBlur
+	};
+	props = useComposite({
+		store,
+		focusable,
+		...props,
+		moveOnKeyPress: (event) => {
+			if (isFalsyBooleanCallback(moveOnKeyPress, event)) return false;
+			if (inline) setCanInline(true);
+			return true;
+		}
+	});
+	props = usePopoverAnchor({
+		store,
+		...props
+	});
+	return {
+		autoComplete: "off",
+		...props
+	};
+});
+/**
+* Renders a combobox input element that can be used to filter a list of items.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {2}
+* <ComboboxProvider>
+*   <Combobox />
+*   <ComboboxPopover>
+*     <ComboboxItem value="Apple" />
+*     <ComboboxItem value="Banana" />
+*     <ComboboxItem value="Orange" />
+*   </ComboboxPopover>
+* </ComboboxProvider>
+* ```
+*/
+const Combobox = forwardRef(function Combobox(props) {
+	return createElement(TagName, useCombobox(props));
+});
+//#endregion
+export { Combobox, useCombobox };
+
+//# sourceMappingURL=combobox.js.map

package/dist/combobox/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":[],"sources":["../../src/combobox/combobox.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useBooleanEvent,\n  useEvent,\n  useForceUpdate,\n  useId,\n  useMergeRefs,\n  useSafeLayoutEffect,\n  useUpdateEffect,\n  useUpdateLayoutEffect,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { sync } from \"@ariakit/store\";\nimport {\n  getPopupRole,\n  getScrollingElement,\n  getTextboxSelection,\n  setSelectionRange,\n  isFocusEventOutside,\n  queueBeforeEvent,\n  hasFocus,\n  invariant,\n  isFalsyBooleanCallback,\n  noop,\n  normalizeString,\n} from \"@ariakit/utils\";\nimport type { BooleanOrCallback, StringWithValue } from \"@ariakit/utils\";\nimport type {\n  AriaAttributes,\n  ChangeEvent,\n  CompositionEvent,\n  ElementType,\n  MouseEvent,\n  FocusEvent as ReactFocusEvent,\n  KeyboardEvent as ReactKeyboardEvent,\n  SyntheticEvent,\n} from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport type { CompositeOptions } from \"../composite/composite.tsx\";\nimport { useComposite } from \"../composite/composite.tsx\";\nimport type { PopoverAnchorOptions } from \"../popover/popover-anchor.tsx\";\nimport { usePopoverAnchor } from \"../popover/popover-anchor.tsx\";\nimport { useComboboxProviderContext } from \"./combobox-context.tsx\";\nimport type {\n  ComboboxStore,\n  ComboboxStoreSelectedValue,\n  ComboboxStoreState,\n} from \"./combobox-store.ts\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction isFirstItemAutoSelected(\n  items: ComboboxStoreState[\"items\"],\n  activeValue: ComboboxStoreState[\"activeValue\"],\n  autoSelect: ComboboxProps[\"autoSelect\"],\n) {\n  if (!autoSelect) return false;\n  const firstItem = items.find((item) => !item.disabled && item.value);\n  return firstItem?.value === activeValue;\n}\n\nfunction hasCompletionString(value?: string, activeValue?: string) {\n  if (!activeValue) return false;\n  if (value == null) return false;\n  value = normalizeString(value);\n  return (\n    activeValue.length > value.length &&\n    activeValue.toLowerCase().indexOf(value.toLowerCase()) === 0\n  );\n}\n\nfunction isInputEvent(event: Event): event is InputEvent {\n  return event.type === \"input\";\n}\n\nfunction isAriaAutoCompleteValue(\n  value: string,\n): value is Required<AriaAttributes>[\"aria-autocomplete\"] {\n  return (\n    value === \"inline\" ||\n    value === \"list\" ||\n    value === \"both\" ||\n    value === \"none\"\n  );\n}\n\nfunction getDefaultAutoSelectId(items: ComboboxStoreState[\"items\"]) {\n  const item = items.find((item) => {\n    if (item.disabled) return false;\n    // When rendering tabs in a combobox widget, we ignore them and auto select\n    // the first item that's not a tab instead.\n    return item.element?.getAttribute(\"role\") !== \"tab\";\n  });\n  return item?.id;\n}\n\n/**\n * Returns props to create a `Combobox` component.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useCombobox({ store });\n * <Role {...props} />\n * <ComboboxPopover store={store}>\n *   <ComboboxItem value=\"Apple\" />\n *   <ComboboxItem value=\"Banana\" />\n *   <ComboboxItem value=\"Orange\" />\n * </ComboboxPopover>\n * ```\n */\nexport const useCombobox = createHook<TagName, ComboboxOptions>(\n  function useCombobox({\n    store,\n    focusable = true,\n    autoSelect: autoSelectProp = false,\n    getAutoSelectId,\n    setValueOnChange,\n    showMinLength = 0,\n    showOnChange,\n    showOnMouseDown,\n    showOnClick = showOnMouseDown,\n    showOnKeyDown,\n    showOnKeyPress = showOnKeyDown,\n    blurActiveItemOnClick,\n    setValueOnClick = true,\n    moveOnKeyPress = true,\n    autoComplete = \"list\",\n    ...props\n  }) {\n    const context = useComboboxProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"Combobox must receive a `store` prop or be wrapped in a ComboboxProvider component.\",\n    );\n\n    const ref = useRef<HTMLType>(null);\n    const [valueUpdated, forceValueUpdate] = useForceUpdate();\n    const canAutoSelectRef = useRef(false);\n    const composingRef = useRef(false);\n\n    // We can only allow auto select when the combobox focus is handled via the\n    // aria-activedescendant attribute. Othwerwise, the focus would move to the\n    // first item on every keypress.\n    const autoSelect = useStoreState(\n      store,\n      (state) => state.virtualFocus && autoSelectProp,\n    );\n\n    const inline = autoComplete === \"inline\" || autoComplete === \"both\";\n    // The inline autocomplete should only happen in certain circumstances. We\n    // control this state here.\n    const [canInline, setCanInline] = useState(inline);\n\n    // If the inline autocomplete is enabled in a update, we need to update the\n    // canInline state to reflect this. TODO: Try derived state.\n    useUpdateLayoutEffect(() => {\n      if (!inline) return;\n      setCanInline(true);\n    }, [inline]);\n\n    const storeValue = useStoreState(store, \"value\");\n\n    // Keep track of the previous selected values so we can set the\n    // inlineActiveValue below only when the current activeValue isn't already\n    // selected and isn't one of the previously selected values. See\n    // tag-combobox test named \"deselecting a tag should not highlight the input\n    // text if it is not the first combobox item\".\n    const prevSelectedValueRef = useRef<ComboboxStoreSelectedValue>(undefined);\n    useEffect(() => {\n      return sync(store, [\"selectedValue\", \"activeId\"], (_, prev) => {\n        prevSelectedValueRef.current = prev.selectedValue;\n      });\n    }, [store]);\n\n    const inlineActiveValue = useStoreState(store, (state) => {\n      if (!inline) return;\n      if (!canInline) return;\n      // It doesn't make sense to inline the active value if it's already\n      // selected or just got deselected. Inlining the value typically implies\n      // an addition, but if the value is already selected, the action actually\n      // becomes a deletion. If the value was just deselected, pressing Enter\n      // again would reselect it, but it's not the usual path, so we also take\n      // into account the previously selected values. See tag-combobox test\n      // named \"deselecting a tag should not highlight the input text if it is\n      // not the first combobox item\".\n      if (state.activeValue && Array.isArray(state.selectedValue)) {\n        if (state.selectedValue.includes(state.activeValue)) return;\n        if (prevSelectedValueRef.current?.includes(state.activeValue)) return;\n      }\n      return state.activeValue;\n    });\n\n    const items = useStoreState(store, \"renderedItems\");\n    const open = useStoreState(store, \"open\");\n    const contentElement = useStoreState(store, \"contentElement\");\n\n    // The current input value may differ from state.value when\n    // autoComplete is either \"both\" or \"inline\", in which case it will be\n    // the active item value or a combination of the input value and the active\n    // item value if it's the first item and it's been auto selected. This will\n    // only affect the element's value, not the combobox state.\n    const value = useMemo(() => {\n      if (!inline) return storeValue;\n      if (!canInline) return storeValue;\n      const firstItemAutoSelected = isFirstItemAutoSelected(\n        items,\n        inlineActiveValue,\n        autoSelect,\n      );\n      if (firstItemAutoSelected) {\n        // If the first item is auto selected, we should append the completion\n        // string to the end of the value. This will be highlited in the effect\n        // below.\n        if (hasCompletionString(storeValue, inlineActiveValue)) {\n          const slice = inlineActiveValue?.slice(storeValue.length) || \"\";\n          return storeValue + slice;\n        }\n        return storeValue;\n      }\n      return inlineActiveValue || storeValue;\n    }, [inline, canInline, items, inlineActiveValue, autoSelect, storeValue]);\n\n    // Listen to the combobox-item-move event that's dispacthed the ComboboxItem\n    // component so we can enable the inline autocomplete when the user moves\n    // the focus to an item using the keyboard.\n    useEffect(() => {\n      const element = ref.current;\n      if (!element) return;\n      const onCompositeItemMove = () => setCanInline(true);\n      element.addEventListener(\"combobox-item-move\", onCompositeItemMove);\n      return () => {\n        element.removeEventListener(\"combobox-item-move\", onCompositeItemMove);\n      };\n    }, []);\n\n    // Highlights the completion string\n    useEffect(() => {\n      if (!inline) return;\n      if (!canInline) return;\n      if (!inlineActiveValue) return;\n      const firstItemAutoSelected = isFirstItemAutoSelected(\n        items,\n        inlineActiveValue,\n        autoSelect,\n      );\n      if (!firstItemAutoSelected) return;\n      if (!hasCompletionString(storeValue, inlineActiveValue)) return;\n      let cleanup = noop;\n      // For some reason, this setSelectionRange may run before the value is\n      // updated in the DOM. We're using a microtask to make sure it runs after\n      // the value is updated so we don't lose the selection. See combobox-group\n      // test-browser file.\n      queueMicrotask(() => {\n        const element = ref.current;\n        if (!element) return;\n        const { start: prevStart, end: prevEnd } = getTextboxSelection(element);\n        const nextStart = storeValue.length;\n        const nextEnd = inlineActiveValue.length;\n        setSelectionRange(element, nextStart, nextEnd);\n        cleanup = () => {\n          // This effect may run after the value is updated and the completion\n          // string is highlighted, for example, when the items are updated\n          // asynchronously or in a React transition in a multi-selectable\n          // combobox. In this case, we must restore the previous selection\n          // range if it hasn't changed. TODO: Test this.\n          if (!hasFocus(element)) return;\n          const { start, end } = getTextboxSelection(element);\n          if (start !== nextStart) return;\n          if (end !== nextEnd) return;\n          setSelectionRange(element, prevStart, prevEnd);\n        };\n      });\n      return () => cleanup();\n    }, [\n      valueUpdated,\n      inline,\n      canInline,\n      inlineActiveValue,\n      items,\n      autoSelect,\n      storeValue,\n    ]);\n\n    const scrollingElementRef = useRef<Element | null>(null);\n    const getAutoSelectIdProp = useEvent(getAutoSelectId);\n    const autoSelectIdRef = useRef<string | null | undefined>(null);\n    const userScrolledRef = useRef(false);\n    const isAutoScrollingRef = useRef(false);\n\n    // Disable the autoSelect behavior when the user scrolls the combobox\n    // content. This prevents the focus from moving to the first item on\n    // virtualized and infinite lists.\n    useEffect(() => {\n      if (!open) return;\n      if (!contentElement) return;\n      const scrollingElement = getScrollingElement(contentElement);\n      if (!scrollingElement) return;\n      scrollingElementRef.current = scrollingElement;\n      const onUserScroll = () => {\n        // A wheel event is always initiated by the user, so we can disable the\n        // autoSelect behavior without any additional checks.\n        canAutoSelectRef.current = false;\n        userScrolledRef.current = true;\n      };\n      const onScroll = () => {\n        // Mark any non-programmatic scroll as user-initiated so we don't\n        // reset the scroll position when new items load (e.g., infinite\n        // scroll, scrollbar drag). Programmatic scrolls from scrollIntoView\n        // set isAutoScrollingRef to avoid false positives.\n        if (!isAutoScrollingRef.current) {\n          userScrolledRef.current = true;\n        }\n        if (!store) return;\n        if (!canAutoSelectRef.current) return;\n        // We won't disable the autoSelect behavior if the autoSelect item is\n        // still focused.\n        const { activeId } = store.getState();\n        if (activeId === null) return;\n        if (activeId === autoSelectIdRef.current) return;\n        canAutoSelectRef.current = false;\n      };\n      const options = { passive: true, capture: true };\n      scrollingElement.addEventListener(\"wheel\", onUserScroll, options);\n      scrollingElement.addEventListener(\"touchmove\", onUserScroll, options);\n      scrollingElement.addEventListener(\"scroll\", onScroll, options);\n      return () => {\n        scrollingElement.removeEventListener(\"wheel\", onUserScroll, true);\n        scrollingElement.removeEventListener(\"touchmove\", onUserScroll, true);\n        scrollingElement.removeEventListener(\"scroll\", onScroll, true);\n      };\n    }, [open, contentElement, store]);\n\n    // Reset the user-scrolled flag and set the changed flag to true whenever\n    // the combobox value changes and is not empty. We're doing this here in\n    // addition to in the onChange handler because the value may change\n    // programmatically.\n    useSafeLayoutEffect(() => {\n      userScrolledRef.current = false;\n      if (!storeValue) return;\n      if (composingRef.current) return;\n      canAutoSelectRef.current = true;\n    }, [storeValue]);\n\n    // Reset the changed flag when the popover is not open so we don't try to\n    // auto select an item after the popover closes (for example, in the middle\n    // of an animation).\n    useSafeLayoutEffect(() => {\n      if (autoSelect !== \"always\" && open) return;\n      canAutoSelectRef.current = open;\n    }, [autoSelect, open]);\n\n    const resetValueOnSelect = useStoreState(store, \"resetValueOnSelect\");\n\n    // Auto select the first item on type. This effect runs both when the value\n    // changes and when the items change so we also catch async items.\n    useUpdateEffect(() => {\n      const canAutoSelect = canAutoSelectRef.current;\n      if (!store) return;\n      if (!open) return;\n      if (!canAutoSelect && (!resetValueOnSelect || userScrolledRef.current))\n        return;\n      const { baseElement, contentElement, activeId } = store.getState();\n      if (baseElement && !hasFocus(baseElement)) return;\n      // The data-placing attribute is an internal state added by the Popover\n      // component. We can observe it to know when the popover is done placing\n      // itself. This is to prevent the focus from moving to the first item\n      // while the popover is still calculating its position, which could cause\n      // a scroll jump. See combobox-group test-browser file.\n      if (contentElement?.hasAttribute(\"data-placing\")) {\n        const observer = new MutationObserver(forceValueUpdate);\n        observer.observe(contentElement, { attributeFilter: [\"data-placing\"] });\n        return () => observer.disconnect();\n      }\n      if (autoSelect && canAutoSelect) {\n        const userAutoSelectId = getAutoSelectIdProp(items);\n        const autoSelectId =\n          userAutoSelectId !== undefined\n            ? userAutoSelectId\n            : (getDefaultAutoSelectId(items) ?? store.first());\n        autoSelectIdRef.current = autoSelectId;\n        // If there's no first item (that is, there are no items or all items\n        // are disabled), we should move the focus to the input (null),\n        // otherwise, with async items, the activeValue won't be reset. TODO:\n        // Test this.\n        store.move(autoSelectId ?? null);\n      } else {\n        // Reset the scroll position to the active item when an item is selected\n        // and the combobox value is reset, which might move the active item\n        // offscreen. Otherwise, if no item is selected, reset to the first\n        // item, such as when `autoSelect` is false.\n        const element = store.item(activeId || store.first())?.element;\n        if (element && \"scrollIntoView\" in element) {\n          isAutoScrollingRef.current = true;\n          element.scrollIntoView({ block: \"nearest\", inline: \"nearest\" });\n          // Clear after the browser dispatches the scroll event. Scroll\n          // events fire during the \"scroll steps\" of the rendering update,\n          // which run before requestAnimationFrame callbacks.\n          requestAnimationFrame(() => {\n            isAutoScrollingRef.current = false;\n          });\n        }\n      }\n      return;\n    }, [\n      store,\n      open,\n      valueUpdated,\n      storeValue,\n      autoSelect,\n      resetValueOnSelect,\n      getAutoSelectIdProp,\n      items,\n    ]);\n\n    // If it has inline auto completion, set the store value when the combobox\n    // input or the combobox list lose focus.\n    useEffect(() => {\n      if (!inline) return;\n      const combobox = ref.current;\n      if (!combobox) return;\n      const elements = [combobox, contentElement].filter(\n        (value): value is HTMLElement => !!value,\n      );\n      const onBlur = (event: FocusEvent) => {\n        if (elements.every((el) => isFocusEventOutside(event, el))) {\n          store?.setValue(value);\n        }\n      };\n      for (const element of elements) {\n        element.addEventListener(\"focusout\", onBlur);\n      }\n      return () => {\n        for (const element of elements) {\n          element.removeEventListener(\"focusout\", onBlur);\n        }\n      };\n    }, [inline, contentElement, store, value]);\n\n    const canShow = (event: SyntheticEvent) => {\n      const currentTarget = event.currentTarget as HTMLType;\n      return currentTarget.value.length >= showMinLength;\n    };\n\n    const onChangeProp = props.onChange;\n    const showOnChangeProp = useBooleanEvent(showOnChange ?? canShow);\n    const setValueOnChangeProp = useBooleanEvent(\n      // If the combobox is combined with tags, the value will be set by the tag\n      // input component.\n      setValueOnChange ?? !store.tag,\n    );\n\n    const onChange = useEvent((event: ChangeEvent<HTMLType>) => {\n      onChangeProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!store) return;\n      const currentTarget = event.currentTarget;\n      const { value, selectionStart, selectionEnd } = currentTarget;\n      const nativeEvent = event.nativeEvent;\n      canAutoSelectRef.current = true;\n      if (isInputEvent(nativeEvent)) {\n        if (nativeEvent.isComposing) {\n          canAutoSelectRef.current = false;\n          composingRef.current = true;\n        }\n        if (inline) {\n          const textInserted =\n            nativeEvent.inputType === \"insertText\" ||\n            nativeEvent.inputType === \"insertCompositionText\";\n          const caretAtEnd = selectionStart === value.length;\n          setCanInline(textInserted && caretAtEnd);\n        }\n      }\n      if (setValueOnChangeProp(event)) {\n        const isSameValue = value === store.getState().value;\n        store.setValue(value);\n        // When the value is not set synchronously, the selection range may be\n        // lost. See combobox-group \"keep caret position when typing\" test.\n        queueMicrotask(() => {\n          setSelectionRange(currentTarget, selectionStart, selectionEnd);\n        });\n        if (inline && autoSelect && isSameValue) {\n          // The store.setValue(event.target.value) above may not trigger a\n          // state update. For example, say the first item starts with \"t\". The\n          // user starts typing \"t\", then the first item is auto selected and\n          // the inline completion string is appended and highlited. The user\n          // then selects all the text and type \"t\" again. This change will\n          // produce the same value as the store value, and therefore the state\n          // update will not trigger a re-render. We need to force a re-render\n          // here so the inline completion effect will be fired.\n          forceValueUpdate();\n        }\n      }\n      if (showOnChangeProp(event)) {\n        store.show();\n      }\n      if (!autoSelect || !canAutoSelectRef.current) {\n        // If autoSelect is not set or it's not an insertion of text, focus on\n        // the combobox input after changing the value.\n        store.setActiveId(null);\n      }\n    });\n\n    const onCompositionEndProp = props.onCompositionEnd;\n\n    // When dealing with composition text (for example, when the user is typing\n    // in accents or chinese characters), we need to set canAutoSelectRef to\n    // true when the composition ends. This is because the native input event\n    // that's passed to the change event above will not produce a consistent\n    // inputType value across browsers, so we can't rely on that there.\n    const onCompositionEnd = useEvent((event: CompositionEvent<HTMLType>) => {\n      canAutoSelectRef.current = true;\n      composingRef.current = false;\n      onCompositionEndProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!autoSelect) return;\n      forceValueUpdate();\n    });\n\n    const onMouseDownProp = props.onMouseDown;\n    const blurActiveItemOnClickProp = useBooleanEvent(\n      blurActiveItemOnClick ?? (() => store.getState().includesBaseElement),\n    );\n    const setValueOnClickProp = useBooleanEvent(setValueOnClick);\n    const showOnClickProp = useBooleanEvent(showOnClick ?? canShow);\n\n    const onMouseDown = useEvent((event: MouseEvent<HTMLType>) => {\n      onMouseDownProp?.(event);\n      if (event.defaultPrevented) return;\n      if (event.button) return;\n      if (event.ctrlKey) return;\n      if (!store) return;\n      if (blurActiveItemOnClickProp(event)) {\n        store.setActiveId(null);\n      }\n      if (setValueOnClickProp(event)) {\n        store.setValue(value);\n      }\n      if (showOnClickProp(event)) {\n        queueBeforeEvent(event.currentTarget, \"mouseup\", store.show);\n      }\n    });\n\n    const onKeyDownProp = props.onKeyDown;\n    const showOnKeyPressProp = useBooleanEvent(showOnKeyPress ?? canShow);\n\n    const onKeyDown = useEvent((event: ReactKeyboardEvent<HTMLType>) => {\n      onKeyDownProp?.(event);\n      if (!event.repeat) {\n        // Run combobox-tabs and combobox-group (browser) tests.\n        canAutoSelectRef.current = false;\n      }\n      if (event.defaultPrevented) return;\n      if (!store) return;\n      const { open } = store.getState();\n      // When the popover is open, prevent Enter (with or without modifiers)\n      // from triggering the default behavior (submitting a parent form). If\n      // there's an active item, the keyboard event proxy on Composite will\n      // dispatch Enter to the item, which handles selection. If there's no\n      // active item (e.g., all items are filtered out, or activeId is stale\n      // after a React transition), Enter should be a no-op rather than\n      // submitting a form.\n      if (open && event.key === \"Enter\") {\n        event.preventDefault();\n        return;\n      }\n      if (event.ctrlKey) return;\n      if (event.altKey) return;\n      if (event.shiftKey) return;\n      if (event.metaKey) return;\n      if (open) return;\n      // Up and Down arrow keys should open the combobox popover.\n      if (event.key === \"ArrowUp\" || event.key === \"ArrowDown\") {\n        if (showOnKeyPressProp(event)) {\n          event.preventDefault();\n          store.show();\n        }\n      }\n    });\n\n    const onBlurProp = props.onBlur;\n\n    const onBlur = useEvent((event: ReactFocusEvent<HTMLType>) => {\n      // If we don't reset the canAutoSelectRef here, the combobox will keep the\n      // first item selected when the combobox loses focus and its value gets\n      // cleared. See combobox-cancel tests.\n      canAutoSelectRef.current = false;\n      onBlurProp?.(event);\n      if (event.defaultPrevented) return;\n    });\n\n    // This is necessary so other components like ComboboxCancel can reference\n    // the combobox input in their aria-controls attribute. It's also used by\n    // ComboboxLabel.\n    const id = useId(props.id);\n\n    const ariaAutoComplete = isAriaAutoCompleteValue(autoComplete)\n      ? autoComplete\n      : undefined;\n\n    const isActiveItem = useStoreState(\n      store,\n      (state) => state.activeId === null,\n    );\n\n    props = {\n      role: \"combobox\",\n      \"aria-autocomplete\": ariaAutoComplete,\n      \"aria-haspopup\": getPopupRole(contentElement, \"listbox\"),\n      \"aria-expanded\": open,\n      \"aria-controls\": contentElement?.id,\n      \"data-active-item\": isActiveItem || undefined,\n      value,\n      ...props,\n      id,\n      ref: useMergeRefs(ref, props.ref),\n      onChange,\n      onCompositionEnd,\n      onMouseDown,\n      onKeyDown,\n      onBlur,\n    };\n\n    props = useComposite<TagName>({\n      store,\n      focusable,\n      ...props,\n      // Enable inline autocomplete when the user moves from the combobox input\n      // to an item.\n      moveOnKeyPress: (event) => {\n        if (isFalsyBooleanCallback(moveOnKeyPress, event)) return false;\n        if (inline) setCanInline(true);\n        return true;\n      },\n    });\n\n    props = usePopoverAnchor<TagName>({ store, ...props });\n\n    return { autoComplete: \"off\", ...props };\n  },\n);\n\n/**\n * Renders a combobox input element that can be used to filter a list of items.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {2}\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 Combobox = forwardRef(function Combobox(props: ComboboxProps) {\n  const htmlProps = useCombobox(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxOptions<T extends ElementType = TagName>\n  extends CompositeOptions<T>, PopoverAnchorOptions<T> {\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   * Determines if the first enabled item will be automatically focused when the\n   * combobox input value changes. If set to `true` or `\"always\"`, the exact\n   * behavior hinges on the value of the\n   * [`autoComplete`](https://ariakit.com/reference/combobox#autocomplete) prop:\n   * - If [`autoComplete`](https://ariakit.com/reference/combobox#autocomplete)\n   *   is `both` or `inline`, the first enabled item is automatically focused as\n   *   the user types in the input. The value gets appended with the completion\n   *   string if it matches. The inline completion string will be highlighted\n   *   and selected.\n   * - If [`autoComplete`](https://ariakit.com/reference/combobox#autocomplete)\n   *   is `list` or `none`, the first enabled item is automatically focused as\n   *   the user types in the input, but the input value is not appended with the\n   *   item value.\n   *\n   * If set to `\"always\"`, the first enabled item is auto-highlighted when the\n   * combobox list opens, not just when the input value changes.\n   *\n   * To change which item gets auto-selected, use the\n   * [`getAutoSelectId`](https://ariakit.com/reference/combobox#getautoselectid)\n   * prop.\n   *\n   * Live examples:\n   * - [Command Menu with\n   *   Tabs](https://ariakit.com/examples/dialog-combobox-tab-command-menu)\n   * - [ComboboxGroup](https://ariakit.com/examples/combobox-group)\n   * - [Combobox with links](https://ariakit.com/examples/combobox-links)\n   * - [Textarea with inline\n   *   Combobox](https://ariakit.com/examples/combobox-textarea)\n   * - [Menu with Combobox](https://ariakit.com/examples/menu-combobox)\n   * - [Select with Combobox](https://ariakit.com/examples/select-combobox)\n   * @default false\n   */\n  autoSelect?: boolean | \"always\";\n  /**\n   * Function that takes the currently rendered items and returns the id of the\n   * item to be auto selected when the\n   * [`autoSelect`](https://ariakit.com/reference/combobox#autoselect) prop is\n   * `true`.\n   *\n   * By default, the first enabled item is auto selected. This function is handy\n   * if you prefer a different item to be auto selected. Returning `undefined`\n   * from this function will result in the default behavior.\n   * @example\n   * ```jsx\n   * <Combobox\n   *   autoSelect\n   *   getAutoSelectId={(items) => {\n   *     // Auto select the first enabled item with a value\n   *     const item = items.find((item) => {\n   *       if (item.disabled) return false;\n   *       if (!item.value) return false;\n   *       return true;\n   *     });\n   *     return item?.id;\n   *   }}\n   * />\n   * ```\n   */\n  getAutoSelectId?: (\n    renderedItems: ComboboxStoreState[\"renderedItems\"],\n  ) => string | null | undefined;\n  /**\n   * Whether the items will be filtered based on\n   * [`value`](https://ariakit.com/reference/combobox-provider#value) and\n   * whether the input value will temporarily change based on the active item.\n   *\n   * This prop is based on the standard\n   * [`aria-autocomplete`](https://w3c.github.io/aria/#aria-autocomplete)\n   * attribute, accepting the same values:\n   * - `list` (default): indicates that the items will be dynamically rendered\n   *   based on [`value`](https://ariakit.com/reference/combobox-provider#value)\n   *   and the input value will _not_ change based on the active item. The\n   *   filtering logic must be implemented by the consumer of this component.\n   * - `inline`: indicates that the items are static, that is, they won't be\n   *   filtered, but the input value will temporarily change based on the active\n   *   item. Ariakit will automatically provide the inline autocompletion\n   *   behavior.\n   * - `both`: indicates that the items will be dynamically rendered based on\n   *   [`value`](https://ariakit.com/reference/combobox-provider#value) and the\n   *   input value will temporarily change based on the active item. The\n   *   filtering logic must be implemented by the consumer of this component,\n   *   whereas Ariakit will automatically provide the inline autocompletion\n   *   behavior.\n   * - `none`: the items are static and the input value will _not_ change based\n   *   on the active item.\n   *\n   * Live examples:\n   * - [ComboboxGroup](https://ariakit.com/examples/combobox-group)\n   * @default \"list\"\n   */\n  autoComplete?: StringWithValue<Required<AriaAttributes>[\"aria-autocomplete\"]>;\n  /**\n   * Determines if the highlighted item should lose focus when the user clicks\n   * on the combobox input element. By default, this prop's value is set\n   * according to the\n   * [`includesBaseElement`](https://ariakit.com/reference/combobox-provider#includesbaseelement)\n   * value.\n   */\n  blurActiveItemOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;\n  /**\n   * Specifies the minimum character count the input value should have before\n   * the [`ComboboxList`](https://ariakit.com/reference/combobox-list) or\n   * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)\n   * components are displayed.\n   *\n   * The [`showOnChange`](https://ariakit.com/reference/combobox#showonchange),\n   * [`showOnClick`](https://ariakit.com/reference/combobox#showonclick), and\n   * [`showOnKeyPress`](https://ariakit.com/reference/combobox#showonkeypress)\n   * props allow you to tailor the behavior for each unique event.\n   * @default 0\n   * @example\n   * In the following example, the combobox list will be shown when the input\n   * value has at least one character. However, if the user presses the arrow\n   * keys, the list will be shown regardless of the input value length.\n   * ```jsx\n   * <Combobox showMinLength={1} showOnKeyPress />\n   * ```\n   */\n  showMinLength?: number;\n  /**\n   * Whether the [`ComboboxList`](https://ariakit.com/reference/combobox-list)\n   * or [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)\n   * components should be shown when the input value changes.\n   *\n   * Live examples:\n   * - [Textarea with inline\n   *   Combobox](https://ariakit.com/examples/combobox-textarea)\n   * @default true\n   * @example\n   * ```jsx\n   * <Combobox showOnChange={(event) => event.target.value.length > 1} />\n   * ```\n   */\n  showOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;\n  /**\n   * Whether the [`ComboboxList`](https://ariakit.com/reference/combobox-list)\n   * or [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)\n   * components should be shown when the input is clicked.\n   * @deprecated Use\n   * [`showOnClick`](https://ariakit.com/reference/combobox#showonclick)\n   * instead.\n   * @default true\n   */\n  showOnMouseDown?: BooleanOrCallback<MouseEvent<HTMLElement>>;\n  /**\n   * Whether the [`ComboboxList`](https://ariakit.com/reference/combobox-list)\n   * or [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)\n   * components should be shown when the input is clicked.\n   *\n   * Live examples:\n   * - [Textarea with inline\n   *   Combobox](https://ariakit.com/examples/combobox-textarea)\n   * @default true\n   * @example\n   * ```jsx\n   * <Combobox showOnClick={value.length > 1} />\n   * ```\n   */\n  showOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;\n  /**\n   * Whether the [`ComboboxList`](https://ariakit.com/reference/combobox-list)\n   * or [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)\n   * components should be shown when the user presses the arrow up or down keys\n   * while focusing on the combobox input element.\n   * @deprecated Use\n   * [`showOnKeyPress`](https://ariakit.com/reference/combobox#showonkeypress)\n   * instead.\n   * @default true\n   */\n  showOnKeyDown?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;\n  /**\n   * Whether the [`ComboboxList`](https://ariakit.com/reference/combobox-list)\n   * or [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)\n   * components should be shown when the user presses the arrow up or down keys\n   * while focusing on the combobox input element.\n   *\n   * Live examples:\n   * - [Textarea with inline\n   *   Combobox](https://ariakit.com/examples/combobox-textarea)\n   * @default true\n   * @example\n   * ```jsx\n   * <Combobox showOnKeyPress={value.length > 1} />\n   * ```\n   */\n  showOnKeyPress?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;\n  /**\n   * Whether the combobox\n   * [`value`](https://ariakit.com/reference/combobox-provider#value) state\n   * should be updated when the input value changes. This is useful if you want\n   * to customize how the store\n   * [`value`](https://ariakit.com/reference/combobox-provider#value) is updated\n   * based on the input element's value.\n   *\n   * Live examples:\n   * - [Textarea with inline\n   *   Combobox](https://ariakit.com/examples/combobox-textarea)\n   * @default true\n   */\n  setValueOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;\n  /**\n   * Whether the combobox\n   * [`value`](https://ariakit.com/reference/combobox-provider#value) state\n   * should be updated when the combobox input element gets clicked. This\n   * usually only applies when\n   * [`autoComplete`](https://ariakit.com/reference/combobox#autocomplete) is\n   * `both` or `inline`, because the input value will temporarily change based\n   * on the active item and the store\n   * [`value`](https://ariakit.com/reference/combobox-provider#value) will not\n   * be updated until the user confirms the selection.\n   * @default true\n   */\n  setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;\n}\n\nexport type ComboboxProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxOptions<T>\n>;\n"],"mappings":"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"}

package/dist/combobox-store-DEVQ45mZ.d.ts

@@ -0,0 +1,80 @@
+import { t as DisclosureStore } from "./disclosure-store-BsaBaRKv.js";
+import { i as CompositeStoreOptions, n as CompositeStoreFunctions, o as CompositeStoreState } from "./composite-store-DyJc-XRA.js";
+import { a as PopoverStoreState, n as PopoverStoreFunctions, r as PopoverStoreOptions } from "./popover-store-Bc-l5VVO.js";
+import { t as TagStore } from "./tag-store-xANOvuGo.js";
+import { PickRequired } from "@ariakit/utils";
+import { Store } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/combobox/combobox-store";
+
+//#region src/combobox/combobox-store.d.ts
+declare function useComboboxStoreOptions<T extends Core.ComboboxStoreOptions>(props: T): {
+  id: string | undefined;
+} & T;
+declare function useComboboxStoreProps<T extends Core.ComboboxStore>(store: T, update: () => void, props: ComboboxStoreProps): T & {
+  disclosure: DisclosureStore | null | undefined;
+} & {
+  tag: TagStore | null | undefined;
+};
+/**
+ * Creates a combobox store to control the state of
+ * [Combobox](https://ariakit.com/components/combobox) components.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const combobox = useComboboxStore();
+ *
+ * <ComboboxProvider store={combobox}>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+declare function useComboboxStore<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue>(props: PickRequired<ComboboxStoreProps<T>, "selectedValue" | "defaultSelectedValue">): ComboboxStore<T>;
+declare function useComboboxStore(props?: ComboboxStoreProps): ComboboxStore;
+type ComboboxStoreSelectedValue = Core.ComboboxStoreSelectedValue;
+interface ComboboxStoreItem extends Core.ComboboxStoreItem {}
+interface ComboboxStoreState<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends Core.ComboboxStoreState<T>, CompositeStoreState<ComboboxStoreItem>, PopoverStoreState {}
+interface ComboboxStoreFunctions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends Pick<ComboboxStoreOptions<T>, "tag">, Omit<Core.ComboboxStoreFunctions<T>, "tag" | "disclosure">, CompositeStoreFunctions<ComboboxStoreItem>, PopoverStoreFunctions {}
+interface ComboboxStoreOptions<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends Omit<Core.ComboboxStoreOptions<T>, "tag" | "disclosure">, CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions {
+  /**
+   * A callback that gets called when the
+   * [`value`](https://ariakit.com/reference/combobox-provider#value) state
+   * changes.
+   *
+   * Live examples:
+   * - [Combobox with integrated
+   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)
+   * - [ComboboxGroup](https://ariakit.com/examples/combobox-group)
+   * - [Combobox with links](https://ariakit.com/examples/combobox-links)
+   * - [Multi-selectable
+   *   Combobox](https://ariakit.com/examples/combobox-multiple)
+   * - [Menu with Combobox](https://ariakit.com/examples/menu-combobox)
+   * - [Select with Combobox](https://ariakit.com/examples/select-combobox)
+   */
+  setValue?: (value: ComboboxStoreState<T>["value"]) => void;
+  /**
+   * A callback that's invoked when the
+   * [`selectedValue`](https://ariakit.com/reference/combobox-provider#selectedvalue)
+   * state changes, typically when the user selects an item. This can be used to
+   * implement behavior like `onSelect` or `onItemSelect`.
+   *
+   * Live examples:
+   * - [Multi-selectable
+   *   Combobox](https://ariakit.com/examples/combobox-multiple)
+   */
+  setSelectedValue?: (value: ComboboxStoreState<T>["selectedValue"]) => void;
+  /**
+   * A reference to a [tag store](https://ariakit.com/apis/use-tag-store). It's
+   * automatically set when rendering a combobox within a tag list.
+   */
+  tag?: TagStore | null;
+}
+interface ComboboxStoreProps<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends ComboboxStoreOptions<T>, Omit<Core.ComboboxStoreProps<T>, "tag" | "disclosure"> {}
+interface ComboboxStore<T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue> extends ComboboxStoreFunctions<T>, Omit<Store<Core.ComboboxStore<T>>, "tag" | "disclosure"> {}
+//#endregion
+export { ComboboxStoreProps as a, useComboboxStore as c, ComboboxStoreOptions as i, useComboboxStoreOptions as l, ComboboxStoreFunctions as n, ComboboxStoreSelectedValue as o, ComboboxStoreItem as r, ComboboxStoreState as s, ComboboxStore as t, useComboboxStoreProps as u };
+//# sourceMappingURL=combobox-store-DEVQ45mZ.d.ts.map

package/dist/combobox-store-DEVQ45mZ.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-store-DEVQ45mZ.d.ts","names":["Core","Store","PickRequired","CompositeStoreFunctions","CompositeStoreOptions","CompositeStoreState","PopoverStoreFunctions","PopoverStoreOptions","PopoverStoreState","TagStore","useComboboxStoreOptions","T","ComboboxStoreOptions","props","id","useComboboxStoreProps","ComboboxStore","ComboboxStoreProps","_$___disclosure_disclosure_store_ts0","DisclosureStore","store","update","disclosure","tag","useComboboxStore","ComboboxStoreSelectedValue","ComboboxStoreItem","ComboboxStoreState","ComboboxStoreFunctions","Pick","Omit","setValue","value","setSelectedValue"],"sources":["../src/combobox/combobox-store.d.ts"],"mappings":";;;;;;;;;iBAMwBU,uBAAAA,WAAkCV,IAAAA,CAAKY,oBAAAA,CAAAA,CAAsBC,KAAAA,EAAOF,CAAAA;EACxFG,EAAAA;AAAAA,IACAH,CAAAA;AAAAA,iBACoBI,qBAAAA,WAAgCf,IAAAA,CAAKgB,aAAAA,CAAAA,CAAeI,KAAAA,EAAOT,CAAAA,EAAGU,MAAAA,cAAoBR,KAAAA,EAAOI,kBAAAA,GAAqBN,CAAAA;EAClIW,UAAAA,EADmIJ,eAAAA;AAAAA;EAGnIK,GAAAA,EAAKd,QAAAA;AAAAA;;;;;;;;;;;;AAJJ;AACL;;;;;;iBAuBwBe,gBAAAA,WAA2BC,0BAAAA,GAA6BA,0BAAAA,CAAAA,CAA4BZ,KAAAA,EAAOX,YAAAA,CAAae,kBAAAA,CAAmBN,CAAAA,+CAAgDK,aAAAA,CAAcL,CAAAA;AAAAA,iBACzLa,gBAAAA,CAAiBX,KAAAA,GAAQI,kBAAAA,GAAqBD,aAAa;AAAA,KACvES,0BAAAA,GAA6BzB,IAAAA,CAAKyB,0BAA0B;AAAA,UACvDC,iBAAAA,SAA0B1B,IAAAA,CAAK0B,iBAAiB;AAAA,UAEhDC,kBAAAA,WAA6BF,0BAAAA,GAA6BA,0BAAAA,UAAoCzB,IAAAA,CAAK2B,kBAAAA,CAAmBhB,CAAAA,GAAIN,mBAAAA,CAAoBqB,iBAAAA,GAAoBlB,iBAAAA;AAAAA,UAElKoB,sBAAAA,WAAiCH,0BAAAA,GAA6BA,0BAAAA,UAAoCI,IAAAA,CAAKjB,oBAAAA,CAAqBD,CAAAA,WAAYmB,IAAAA,CAAK9B,IAAAA,CAAK4B,sBAAAA,CAAuBjB,CAAAA,0BAA2BR,uBAAAA,CAAwBuB,iBAAAA,GAAoBpB,qBAAAA;AAAAA,UAEhPM,oBAAAA,WAA+Ba,0BAAAA,GAA6BA,0BAAAA,UAAoCK,IAAAA,CAAK9B,IAAAA,CAAKY,oBAAAA,CAAqBD,CAAAA,0BAA2BP,qBAAAA,CAAsBsB,iBAAAA,GAAoBnB,mBAAAA;EAhC/Hc;;;;;;;;;AAGrE;AAoBjB;;;;;EAyBIU,QAAAA,IAAYC,KAAAA,EAAOL,kBAAAA,CAAmBhB,CAAAA;EAzBsFM;;;;;;;;;;EAoC5HgB,gBAAAA,IAAoBD,KAAAA,EAAOL,kBAAAA,CAAmBhB,CAAAA;EApCiGA;;;;EAyC/IY,GAAAA,GAAMd,QAAAA;AAAAA;AAAAA,UAEOQ,kBAAAA,WAA6BQ,0BAAAA,GAA6BA,0BAAAA,UAAoCb,oBAAAA,CAAqBD,CAAAA,GAAImB,IAAAA,CAAK9B,IAAAA,CAAKiB,kBAAAA,CAAmBN,CAAAA;AAAAA,UAEpJK,aAAAA,WAAwBS,0BAAAA,GAA6BA,0BAAAA,UAAoCG,sBAAAA,CAAuBjB,CAAAA,GAAImB,IAAAA,CAAK7B,KAAAA,CAAMD,IAAAA,CAAKgB,aAAAA,CAAcL,CAAAA"}

package/dist/command/command.d.ts

@@ -0,0 +1,2 @@
+import { i as useCommand, n as CommandOptions, r as CommandProps, t as Command } from "../command-DckndCUK.js";
+export { Command, CommandOptions, CommandProps, useCommand };