@ariakit/react-components 0.1.0 → 0.1.2

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-popover.js","names":[],"sources":["../../src/combobox/combobox-popover.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getDocument, invariant, isFalsyBooleanCallback } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useRef } from \"react\";\nimport { createDialogComponent } from \"../dialog/dialog.tsx\";\nimport type { PopoverOptions } from \"../popover/popover.tsx\";\nimport { usePopover } from \"../popover/popover.tsx\";\nimport { useComboboxProviderContext } from \"./combobox-context.tsx\";\nimport type { ComboboxListOptions } from \"./combobox-list.tsx\";\nimport { useComboboxList } from \"./combobox-list.tsx\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\nfunction isController(\n  target: EventTarget | Element | null,\n  ...ids: Array<string | undefined>\n) {\n  if (!target) return false;\n  if (\"id\" in target) {\n    const selector = ids\n      .filter(Boolean)\n      .map((id) => `[aria-controls~=\"${id}\"]`)\n      .join(\", \");\n    if (!selector) return false;\n    return target.matches(selector);\n  }\n  return false;\n}\n\n/**\n * Returns props to create a `ComboboxPopover` component.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxPopover({ 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 useComboboxPopover = createHook<TagName, ComboboxPopoverOptions>(\n  function useComboboxPopover({\n    store,\n    modal,\n    tabIndex,\n    alwaysVisible,\n    autoFocusOnHide = true,\n    hideOnInteractOutside = true,\n    ...props\n  }) {\n    const context = useComboboxProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"ComboboxPopover must receive a `store` prop or be wrapped in a ComboboxProvider component.\",\n    );\n\n    const baseElement = useStoreState(store, \"baseElement\");\n    const hiddenByClickOutsideRef = useRef(false);\n\n    // When new tags are rendered while the combobox popover is open, they will\n    // be considered nested popups, and therefore the popover won't hide when\n    // interacting with them. We use the treeSnapshotKey to force the popover to\n    // take a new snapshot of the tree when new items are rendered.\n    const treeSnapshotKey = useStoreState(\n      store.tag,\n      (state) => state?.renderedItems.length,\n    );\n\n    props = useComboboxList({ store, alwaysVisible, ...props });\n\n    props = usePopover({\n      store,\n      modal,\n      alwaysVisible,\n      backdrop: false,\n      autoFocusOnShow: false,\n      finalFocus: baseElement,\n      preserveTabOrderAnchor: null,\n      unstable_treeSnapshotKey: treeSnapshotKey,\n      ...props,\n      // When the combobox popover is modal, we make sure to include the\n      // combobox input and all the combobox controls (cancel, disclosure) in\n      // the list of persistent elements so they make part of the modal context,\n      // allowing users to tab through them.\n      getPersistentElements() {\n        const elements = props.getPersistentElements?.() || [];\n        if (!modal) return elements;\n        if (!store) return elements;\n        const { contentElement, baseElement } = store.getState();\n        if (!baseElement) return elements;\n        const doc = getDocument(baseElement);\n        const selectors: string[] = [];\n        if (contentElement?.id) {\n          selectors.push(`[aria-controls~=\"${contentElement.id}\"]`);\n        }\n        if (baseElement?.id) {\n          selectors.push(`[aria-controls~=\"${baseElement.id}\"]`);\n        }\n        if (!selectors.length) return [...elements, baseElement];\n        const selector = selectors.join(\",\");\n        const controlElements = doc.querySelectorAll<HTMLElement>(selector);\n        return [...elements, ...controlElements];\n      },\n      // The combobox popover should focus on the combobox input when it hides,\n      // unless the event was triggered by a click outside the popover, in which\n      // case the input shouldn't be re-focused.\n      autoFocusOnHide(element) {\n        if (isFalsyBooleanCallback(autoFocusOnHide, element)) return false;\n        if (hiddenByClickOutsideRef.current) {\n          hiddenByClickOutsideRef.current = false;\n          return false;\n        }\n        return true;\n      },\n      // Make sure we don't hide the popover when the user interacts with the\n      // combobox cancel or the combobox disclosure buttons. They will have the\n      // aria-controls attribute pointing to either the combobox input or the\n      // combobox popover elements.\n      hideOnInteractOutside(event: Event) {\n        const state = store?.getState();\n        const contentId = state?.contentElement?.id;\n        const baseId = state?.baseElement?.id;\n        if (isController(event.target, contentId, baseId)) return false;\n        const result =\n          typeof hideOnInteractOutside === \"function\"\n            ? hideOnInteractOutside(event)\n            : hideOnInteractOutside;\n        if (result) {\n          hiddenByClickOutsideRef.current = event.type === \"click\";\n        }\n        return result;\n      },\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a combobox popover. The `role` prop is set to `listbox` by default,\n * but can be overriden by any other valid combobox popup role (`listbox`,\n * `menu`, `tree`, `grid` or `dialog`).\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {3-7}\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 ComboboxPopover = createDialogComponent(\n  forwardRef(function ComboboxPopover(props: ComboboxPopoverProps) {\n    const htmlProps = useComboboxPopover(props);\n    return createElement(TagName, htmlProps);\n  }),\n  useComboboxProviderContext,\n);\n\nexport interface ComboboxPopoverOptions<T extends ElementType = TagName>\n  extends ComboboxListOptions<T>, Omit<PopoverOptions<T>, \"store\"> {}\n\nexport type ComboboxPopoverProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxPopoverOptions<T>\n>;\n"],"mappings":";;;;;;;;;;AAgBA,MAAA,UAAS;SAIF,aAAe,QAAA,GAAA,KAAA;CACpB,IAAI,CAAA,QAAQ,OAAQ;KAClB,QAAM,QAAW;EAIjB,MAAK,WAAU,IAAA,OAAO,OAAA,EAAA,KAAA,OAAA,oBAAA,GAAA,GAAA,EAAA,KAAA,IAAA;EACtB,IAAA,CAAA,UAAc,OAAQ;EACxB,OAAA,OAAA,QAAA,QAAA;CACA;CACF,OAAA;;;;;;;;;;;;;;;;MA0BI,qBAAgB,WAAA,SAA2B,mBAAA,EAAA,OAAA,OAAA,UAAA,eAAA,kBAAA,MAAA,wBAAA,MAAA,GAAA,SAAA;CAC3C,MAAA,UAAQ,2BAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAA,4FAAgD;CACtD,MAAM,cAAA,cAA0B,OAAO,aAAK;CAM5C,MAAM,0BAAkB,OACtB,KAAM;CAIR,MAAA,kBAAwB,cAAA,MAAA,MAAA,UAAA,OAAA,cAAA,MAAA;SAAE,gBAAA;EAAO;EAAe;EAAU,GAAA;CAE1D,CAAA;SACE,WAAA;EACA;EACA;EACA;EACA,UAAA;EACA,iBAAY;EACZ,YAAA;EACA,wBAAA;EACA,0BAAG;EAKH,GAAA;0BACyB;GACvB,MAAK,WAAO,MAAO,wBAAA,KAAA,CAAA;GACnB,IAAI,CAAC,OAAO,OAAO;GACnB,IAAA,CAAA,OAAQ,OAAA;GACR,MAAK,EAAA,gBAAa,gBAAO,MAAA,SAAA;GACzB,IAAA,CAAA,aAAY,OAAY;GACxB,MAAM,MAAA,YAAuB,WAAA;GAC7B,MAAI,YAAA,CAAA;GAGJ,IAAI,gBAAa,IACf,UAAU,KAAK,oBAAoB,eAAkB,GAAA,GAAA;GAEvD,IAAI,aAAW,IAAA,UAAgB,KAAG,oBAAqB,YAAA,GAAA,GAAA;GACvD,IAAA,CAAA,UAAM,QAAW,OAAU,CAAA,GAAK,UAAG,WAAA;GACnC,MAAM,WAAA,UAAkB,KAAI,GAAA;GAC5B,MAAA,kBAAwB,IAAA,iBAAe,QAAA;GACzC,OAAA,CAAA,GAAA,UAAA,GAAA,eAAA;EAIA;kBACM,SAAA;GACJ,IAAI,uBAAA,iBAAiC,OAAA,GAAA,OAAA;OACnC,wBAAwB,SAAU;IAClC,wBAAO,UAAA;IACT,OAAA;GACA;GACF,OAAA;EAKA;wBACuB,OAAA;GACrB,MAAM,QAAA,OAAY,SAAO;GACzB,MAAM,YAAS,OAAO,gBAAa;GACnC,MAAI,SAAA,OAAa,aAAc;GAC/B,IAAA,aACE,MAAO,QAAA,WAAA,MAA0B,GAAA,OAAA;GAGnC,MAAI,SACF,OAAA,0BAAkC,aAAe,sBAAA,KAAA,IAAA;GAEnD,IAAA,QAAO,wBAAA,UAAA,MAAA,SAAA;GACT,OAAA;EACD;CAED,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;MAsBI,kBAAqB,sBADH,WACqB,SAAA,gBAAA,OAAA;CACxC,OACD,cAAA,SACF,mBAAA,KAAA,CAAA"}
+{"version":3,"file":"combobox-popover.js","names":[],"sources":["../../src/combobox/combobox-popover.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getDocument, invariant, isFalsyBooleanCallback } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useRef } from \"react\";\nimport { createDialogComponent } from \"../dialog/dialog.tsx\";\nimport type { PopoverOptions } from \"../popover/popover.tsx\";\nimport { usePopover } from \"../popover/popover.tsx\";\nimport { useComboboxProviderContext } from \"./combobox-context.tsx\";\nimport type { ComboboxListOptions } from \"./combobox-list.tsx\";\nimport { useComboboxList } from \"./combobox-list.tsx\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\nfunction isController(\n  target: EventTarget | Element | null,\n  ...ids: Array<string | undefined>\n) {\n  if (!target) return false;\n  if (\"id\" in target) {\n    const selector = ids\n      .filter(Boolean)\n      .map((id) => `[aria-controls~=\"${id}\"]`)\n      .join(\", \");\n    if (!selector) return false;\n    return target.matches(selector);\n  }\n  return false;\n}\n\n/**\n * Returns props to create a `ComboboxPopover` component.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxPopover({ 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 useComboboxPopover = createHook<TagName, ComboboxPopoverOptions>(\n  function useComboboxPopover({\n    store,\n    modal,\n    tabIndex,\n    alwaysVisible,\n    autoFocusOnHide = true,\n    hideOnInteractOutside = true,\n    ...props\n  }) {\n    const context = useComboboxProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"ComboboxPopover must receive a `store` prop or be wrapped in a ComboboxProvider component.\",\n    );\n\n    const baseElement = useStoreState(store, \"baseElement\");\n    const hiddenByClickOutsideRef = useRef(false);\n\n    // When new tags are rendered while the combobox popover is open, they will\n    // be considered nested popups, and therefore the popover won't hide when\n    // interacting with them. We use the treeSnapshotKey to force the popover to\n    // take a new snapshot of the tree when new items are rendered.\n    const treeSnapshotKey = useStoreState(\n      store.tag,\n      (state) => state?.renderedItems.length,\n    );\n\n    props = useComboboxList({ store, alwaysVisible, ...props });\n\n    props = usePopover({\n      store,\n      modal,\n      alwaysVisible,\n      backdrop: false,\n      autoFocusOnShow: false,\n      finalFocus: baseElement,\n      preserveTabOrderAnchor: null,\n      unstable_treeSnapshotKey: treeSnapshotKey,\n      ...props,\n      // When the combobox popover is modal, we make sure to include the\n      // combobox input and all the combobox controls (cancel, disclosure) in\n      // the list of persistent elements so they make part of the modal context,\n      // allowing users to tab through them.\n      getPersistentElements() {\n        const elements = props.getPersistentElements?.() || [];\n        if (!modal) return elements;\n        if (!store) return elements;\n        const { contentElement, baseElement } = store.getState();\n        if (!baseElement) return elements;\n        const doc = getDocument(baseElement);\n        const selectors: string[] = [];\n        if (contentElement?.id) {\n          selectors.push(`[aria-controls~=\"${contentElement.id}\"]`);\n        }\n        if (baseElement?.id) {\n          selectors.push(`[aria-controls~=\"${baseElement.id}\"]`);\n        }\n        if (!selectors.length) return [...elements, baseElement];\n        const selector = selectors.join(\",\");\n        const controlElements = doc.querySelectorAll<HTMLElement>(selector);\n        return [...elements, ...controlElements];\n      },\n      // The combobox popover should focus on the combobox input when it hides,\n      // unless the event was triggered by a click outside the popover, in which\n      // case the input shouldn't be re-focused.\n      autoFocusOnHide(element) {\n        if (isFalsyBooleanCallback(autoFocusOnHide, element)) return false;\n        if (hiddenByClickOutsideRef.current) {\n          hiddenByClickOutsideRef.current = false;\n          return false;\n        }\n        return true;\n      },\n      // Make sure we don't hide the popover when the user interacts with the\n      // combobox cancel or the combobox disclosure buttons. They will have the\n      // aria-controls attribute pointing to either the combobox input or the\n      // combobox popover elements.\n      hideOnInteractOutside(event: Event) {\n        const state = store?.getState();\n        const contentId = state?.contentElement?.id;\n        const baseId = state?.baseElement?.id;\n        if (isController(event.target, contentId, baseId)) return false;\n        const result =\n          typeof hideOnInteractOutside === \"function\"\n            ? hideOnInteractOutside(event)\n            : hideOnInteractOutside;\n        if (result) {\n          hiddenByClickOutsideRef.current = event.type === \"click\";\n        }\n        return result;\n      },\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a combobox popover. The `role` prop is set to `listbox` by default,\n * but can be overriden by any other valid combobox popup role (`listbox`,\n * `menu`, `tree`, `grid` or `dialog`).\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {3-7}\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 ComboboxPopover = createDialogComponent(\n  forwardRef(function ComboboxPopover(props: ComboboxPopoverProps) {\n    const htmlProps = useComboboxPopover(props);\n    return createElement(TagName, htmlProps);\n  }),\n  useComboboxProviderContext,\n);\n\nexport interface ComboboxPopoverOptions<T extends ElementType = TagName>\n  extends ComboboxListOptions<T>, Omit<PopoverOptions<T>, \"store\"> {}\n\nexport type ComboboxPopoverProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxPopoverOptions<T>\n>;\n"],"mappings":";;;;;;;;;;AAgBA,MAAA,UAAS;SAIF,aAAe,QAAA,GAAA,KAAA;CACpB,IAAI,CAAA,QAAQ,OAAQ;KAClB,QAAM,QAAW;EAIjB,MAAK,WAAU,IAAA,OAAO,OAAA,EAAA,KAAA,OAAA,oBAAA,GAAA,GAAA,EAAA,KAAA,IAAA;EACtB,IAAA,CAAA,UAAc,OAAQ;EACxB,OAAA,OAAA,QAAA,QAAA;CACA;CACF,OAAA;;;;;;;;;;;;;;;;MA0BI,qBAAgB,WAAA,SAA2B,mBAAA,EAAA,OAAA,OAAA,UAAA,eAAA,kBAAA,MAAA,wBAAA,MAAA,GAAA,SAAA;CAC3C,MAAA,UAAQ,2BAAS;CAEjB,QAAA,SAEE;CAIF,UAAM,OAAA,QAAc,IAAA,aAAqB,gBAAa,4FAAA;CACtD,MAAM,cAAA,cAA0B,OAAO,aAAK;CAM5C,MAAM,0BAAkB,OACtB,KAAM;CAIR,MAAA,kBAAwB,cAAA,MAAA,MAAA,UAAA,OAAA,cAAA,MAAA;SAAE,gBAAA;EAAO;EAAe;EAAU,GAAA;CAE1D,CAAA;SACE,WAAA;EACA;EACA;EACA;EACA,UAAA;EACA,iBAAY;EACZ,YAAA;EACA,wBAAA;EACA,0BAAG;EAKH,GAAA;0BACyB;GACvB,MAAK,WAAO,MAAO,wBAAA,KAAA,CAAA;GACnB,IAAI,CAAC,OAAO,OAAO;GACnB,IAAA,CAAA,OAAQ,OAAA;GACR,MAAK,EAAA,gBAAa,gBAAO,MAAA,SAAA;GACzB,IAAA,CAAA,aAAY,OAAY;GACxB,MAAM,MAAA,YAAuB,WAAA;GAC7B,MAAI,YAAA,CAAA;GAGJ,IAAI,gBAAa,IACf,UAAU,KAAK,oBAAoB,eAAkB,GAAA,GAAA;GAEvD,IAAI,aAAW,IAAA,UAAgB,KAAG,oBAAqB,YAAA,GAAA,GAAA;GACvD,IAAA,CAAA,UAAM,QAAW,OAAU,CAAA,GAAK,UAAG,WAAA;GACnC,MAAM,WAAA,UAAkB,KAAI,GAAA;GAC5B,MAAA,kBAAwB,IAAA,iBAAe,QAAA;GACzC,OAAA,CAAA,GAAA,UAAA,GAAA,eAAA;EAIA;kBACM,SAAA;GACJ,IAAI,uBAAA,iBAAiC,OAAA,GAAA,OAAA;OACnC,wBAAwB,SAAU;IAClC,wBAAO,UAAA;IACT,OAAA;GACA;GACF,OAAA;EAKA;wBACuB,OAAA;GACrB,MAAM,QAAA,OAAY,SAAO;GACzB,MAAM,YAAS,OAAO,gBAAa;GACnC,MAAI,SAAA,OAAa,aAAc;GAC/B,IAAA,aACE,MAAO,QAAA,WAAA,MAA0B,GAAA,OAAA;GAGnC,MAAI,SACF,OAAA,0BAAkC,aAAe,sBAAA,KAAA,IAAA;GAEnD,IAAA,QAAO,wBAAA,UAAA,MAAA,SAAA;GACT,OAAA;EACD;CAED,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;MAsBI,kBAAqB,sBADH,WACqB,SAAA,gBAAA,OAAA;CACxC,OACD,cAAA,SACF,mBAAA,KAAA,CAAA"}

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

@@ -48,7 +48,7 @@ declare const useComboboxRow: import("@ariakit/react-utils").Hook<"div", Combobo
  * </ComboboxProvider>
  * ```
  */
-declare const ComboboxRow: (props: ComboboxRowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const ComboboxRow: (props: ComboboxRowProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface ComboboxRowOptions<T extends ElementType = TagName> extends CompositeRowOptions<T> {
   /**
    * Object returned by the

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-row.d.ts","names":["Props","ElementType","CompositeRowOptions","ComboboxStore","TagName","useComboboxRow","ComboboxRowOptions","Hook","ComboboxRow","ComboboxRowProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/combobox/combobox-row.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAiB7B;;;;AAAkG;AA0BlG;AA7CyD,cAmBpCC,cAAAA,iCAA+CE,IAAAA,QAAYD,kBAAkB;;;;;;;;AA0B6C;AAC/I;;;;;;;;;;;;;;;;;cADqBE,WAAAA,GAAcE,KAAAA,EAAOD,gBAAgB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACzGN,kBAAAA,WAA6BL,WAAAA,GAAcG,OAAAA,UAAiBF,mBAAAA,CAAoBW,CAAAA;EAWrFJ;;;;;;;;EAFRK,KAAAA,GAAQX,aAAAA;AAAAA;AAAAA,KAEAM,gBAAAA,WAA2BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,kBAAAA,CAAmBO,CAAAA"}
+{"version":3,"file":"combobox-row.d.ts","names":["Props","ElementType","CompositeRowOptions","ComboboxStore","TagName","useComboboxRow","ComboboxRowOptions","Hook","ComboboxRow","ComboboxRowProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/combobox/combobox-row.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAiB7B;;;;AAAkG;AA0BlG;AA7CyD,cAmBpCC,cAAAA,iCAA+CE,IAAAA,QAAYD,kBAAkB;;;;;;;;AA0BiD;AACnJ;;;;;;;;;;;;;;;;;cADqBE,WAAAA,GAAcE,KAAAA,EAAOD,gBAAgB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UAC7GN,kBAAAA,WAA6BL,WAAAA,GAAcG,OAAAA,UAAiBF,mBAAAA,CAAoBW,CAAAA;EAWrFJ;;;;;;;;EAFRK,KAAAA,GAAQX,aAAAA;AAAAA;AAAAA,KAEAM,gBAAAA,WAA2BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,kBAAAA,CAAmBO,CAAAA"}

package/dist/combobox/combobox-row.js

@@ -25,7 +25,7 @@ const TagName = "div";
 const useComboboxRow = createHook(function useComboboxRow({ store, ...props }) {
 	const context = useComboboxScopedContext();
 	store = store || context;
-	invariant(store, "ComboboxRow must be wrapped in a ComboboxList or ComboboxPopover component");
+	invariant(store, process.env.NODE_ENV !== "production" && "ComboboxRow must be wrapped in a ComboboxList or ComboboxPopover component");
 	props = {
 		role: getPopupRole(useStoreState(store, "contentElement")) === "grid" ? "row" : "presentation",
 		...props

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-row.js","names":[],"sources":["../../src/combobox/combobox-row.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getPopupRole, invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { CompositeRowOptions } from \"../composite/composite-row.tsx\";\nimport { useCompositeRow } from \"../composite/composite-row.tsx\";\nimport { useComboboxScopedContext } from \"./combobox-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `ComboboxRow` component.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxRow({ store });\n * <ComboboxPopover store={store}>\n *   <Role {...props}>\n *     <ComboboxItem value=\"Item 1\" />\n *     <ComboboxItem value=\"Item 2\" />\n *     <ComboboxItem value=\"Item 3\" />\n *   </Role>\n * </ComboboxPopover>\n * ```\n */\nexport const useComboboxRow = createHook<TagName, ComboboxRowOptions>(\n  function useComboboxRow({ store, ...props }) {\n    const context = useComboboxScopedContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"ComboboxRow must be wrapped in a ComboboxList or ComboboxPopover component\",\n    );\n\n    const contentElement = useStoreState(store, \"contentElement\");\n    const popupRole = getPopupRole(contentElement);\n    const role = popupRole === \"grid\" ? \"row\" : \"presentation\";\n\n    props = { role, ...props };\n\n    props = useCompositeRow({ store, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a combobox row that allows two-dimensional arrow key navigation.\n * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements\n * wrapped within this component will automatically receive a\n * [`rowId`](https://ariakit.com/reference/combobox-item#rowid) prop.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {4-13}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxRow>\n *       <ComboboxItem value=\"Item 1.1\" />\n *       <ComboboxItem value=\"Item 1.2\" />\n *       <ComboboxItem value=\"Item 1.3\" />\n *     </ComboboxRow>\n *     <ComboboxRow>\n *       <ComboboxItem value=\"Item 2.1\" />\n *       <ComboboxItem value=\"Item 2.2\" />\n *       <ComboboxItem value=\"Item 2.3\" />\n *     </ComboboxRow>\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxRow = forwardRef(function ComboboxRow(\n  props: ComboboxRowProps,\n) {\n  const htmlProps = useComboboxRow(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxRowOptions<\n  T extends ElementType = TagName,\n> extends CompositeRowOptions<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  store?: ComboboxStore;\n}\n\nexport type ComboboxRowProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxRowOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;MA+BI,iBAAgB,WAAA,SAAyB,eAAA,EAAA,OAAA,GAAA,SAAA;CACzC,MAAA,UAAQ,yBAAS;CAEjB,QAAA,SAGI;CAOJ,UAAQ,OAAA,4EAAA;SAHU;EAGF,MAAG,aAAA,cAAA,OAAA,gBAAA,CAAA,MAAA,SAAA,QAAA;EAAM,GAAA;CAEzB;SAA0B,gBAAA;EAAO;EAAU,GAAA;CAE3C,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BE,cAAO,WADW,SAAA,YACqB,OAAA;CACxC,OAAA,cAAA,SAAA,eAAA,KAAA,CAAA"}
+{"version":3,"file":"combobox-row.js","names":[],"sources":["../../src/combobox/combobox-row.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getPopupRole, invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { CompositeRowOptions } from \"../composite/composite-row.tsx\";\nimport { useCompositeRow } from \"../composite/composite-row.tsx\";\nimport { useComboboxScopedContext } from \"./combobox-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `ComboboxRow` component.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxRow({ store });\n * <ComboboxPopover store={store}>\n *   <Role {...props}>\n *     <ComboboxItem value=\"Item 1\" />\n *     <ComboboxItem value=\"Item 2\" />\n *     <ComboboxItem value=\"Item 3\" />\n *   </Role>\n * </ComboboxPopover>\n * ```\n */\nexport const useComboboxRow = createHook<TagName, ComboboxRowOptions>(\n  function useComboboxRow({ store, ...props }) {\n    const context = useComboboxScopedContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"ComboboxRow must be wrapped in a ComboboxList or ComboboxPopover component\",\n    );\n\n    const contentElement = useStoreState(store, \"contentElement\");\n    const popupRole = getPopupRole(contentElement);\n    const role = popupRole === \"grid\" ? \"row\" : \"presentation\";\n\n    props = { role, ...props };\n\n    props = useCompositeRow({ store, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a combobox row that allows two-dimensional arrow key navigation.\n * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements\n * wrapped within this component will automatically receive a\n * [`rowId`](https://ariakit.com/reference/combobox-item#rowid) prop.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {4-13}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxRow>\n *       <ComboboxItem value=\"Item 1.1\" />\n *       <ComboboxItem value=\"Item 1.2\" />\n *       <ComboboxItem value=\"Item 1.3\" />\n *     </ComboboxRow>\n *     <ComboboxRow>\n *       <ComboboxItem value=\"Item 2.1\" />\n *       <ComboboxItem value=\"Item 2.2\" />\n *       <ComboboxItem value=\"Item 2.3\" />\n *     </ComboboxRow>\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxRow = forwardRef(function ComboboxRow(\n  props: ComboboxRowProps,\n) {\n  const htmlProps = useComboboxRow(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxRowOptions<\n  T extends ElementType = TagName,\n> extends CompositeRowOptions<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  store?: ComboboxStore;\n}\n\nexport type ComboboxRowProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxRowOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;MA+BI,iBAAgB,WAAA,SAAyB,eAAA,EAAA,OAAA,GAAA,SAAA;CACzC,MAAA,UAAQ,yBAAS;CAEjB,QAAA,SAEE;CAQF,UAAQ,OAAA,QAAA,IAAA,aAAA,gBAAA,4EAAA;SAHU;EAGF,MAAG,aAAA,cAAA,OAAA,gBAAA,CAAA,MAAA,SAAA,QAAA;EAAM,GAAA;CAEzB;SAA0B,gBAAA;EAAO;EAAU,GAAA;CAE3C,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BE,cAAO,WADW,SAAA,YACqB,OAAA;CACxC,OAAA,cAAA,SAAA,eAAA,KAAA,CAAA"}

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

@@ -43,7 +43,7 @@ declare const useComboboxSeparator: import("@ariakit/react-utils").Hook<"hr", Co
  * </ComboboxProvider>
  * ```
  */
-declare const ComboboxSeparator: (props: ComboboxSeparatorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const ComboboxSeparator: (props: ComboboxSeparatorProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface ComboboxSeparatorOptions<T extends ElementType = TagName> extends CompositeSeparatorOptions<T> {
   /**
    * Object returned by the

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-separator.d.ts","names":["Props","ElementType","CompositeSeparatorOptions","ComboboxStore","TagName","useComboboxSeparator","ComboboxSeparatorOptions","Hook","ComboboxSeparator","ComboboxSeparatorProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/combobox/combobox-separator.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAiB7B;;;;AAA6G;AAqB7G;AAxCyD,cAmBpCC,oBAAAA,iCAAqDE,IAAAA,OAAWD,wBAAwB;;;;;;;;AAqB8C;AAC3J;;;;;;;;;;;;cADqBE,iBAAAA,GAAoBE,KAAAA,EAAOD,sBAAsB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrHN,wBAAAA,WAAmCL,WAAAA,GAAcG,OAAAA,UAAiBF,yBAAAA,CAA0BW,CAAAA;EAAAA;;;;AASpF;AAEzB;;;EAFIC,KAAAA,GAAQX,aAAAA;AAAAA;AAAAA,KAEAM,sBAAAA,WAAiCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,wBAAAA,CAAyBO,CAAAA"}
+{"version":3,"file":"combobox-separator.d.ts","names":["Props","ElementType","CompositeSeparatorOptions","ComboboxStore","TagName","useComboboxSeparator","ComboboxSeparatorOptions","Hook","ComboboxSeparator","ComboboxSeparatorProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/combobox/combobox-separator.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAiB7B;;;;AAA6G;AAqB7G;AAxCyD,cAmBpCC,oBAAAA,iCAAqDE,IAAAA,OAAWD,wBAAwB;;;;;;;;AAqBkD;AAC/J;;;;;;;;;;;;cADqBE,iBAAAA,GAAoBE,KAAAA,EAAOD,sBAAsB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACzHN,wBAAAA,WAAmCL,WAAAA,GAAcG,OAAAA,UAAiBF,yBAAAA,CAA0BW,CAAAA;EAAAA;;;;AASpF;AAEzB;;;EAFIC,KAAAA,GAAQX,aAAAA;AAAAA;AAAAA,KAEAM,sBAAAA,WAAiCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,wBAAAA,CAAyBO,CAAAA"}

package/dist/combobox/combobox-separator.js

@@ -24,7 +24,7 @@ const TagName = "hr";
 const useComboboxSeparator = createHook(function useComboboxSeparator({ store, ...props }) {
 	const context = useComboboxScopedContext();
 	store = store || context;
-	invariant(store, "ComboboxSeparator must be wrapped in a ComboboxList or ComboboxPopover component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "ComboboxSeparator must be wrapped in a ComboboxList or ComboboxPopover component.");
 	props = useCompositeSeparator({
 		store,
 		...props

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-separator.js","names":[],"sources":["../../src/combobox/combobox-separator.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { CompositeSeparatorOptions } from \"../composite/composite-separator.tsx\";\nimport { useCompositeSeparator } from \"../composite/composite-separator.tsx\";\nimport { useComboboxScopedContext } from \"./combobox-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nconst TagName = \"hr\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props a `ComboboxSeparator` component for combobox items.\n * @deprecated Use `useComboboxGroup` with CSS borders instead.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxSeparator({ store });\n * <ComboboxPopover store={store}>\n *   <ComboboxItem value=\"Item 1\" />\n *   <Role {...props} />\n *   <ComboboxItem value=\"Item 2\" />\n *   <ComboboxItem value=\"Item 3\" />\n * </ComboboxPopover>\n * ```\n */\nexport const useComboboxSeparator = createHook<\n  TagName,\n  ComboboxSeparatorOptions\n>(function useComboboxSeparator({ store, ...props }) {\n  const context = useComboboxScopedContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"ComboboxSeparator must be wrapped in a ComboboxList or ComboboxPopover component.\",\n  );\n\n  props = useCompositeSeparator({ store, ...props });\n  return props;\n});\n\n/**\n * Renders a divider between\n * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements.\n * @deprecated Use\n * [`ComboboxGroup`](https://ariakit.com/reference/combobox-group) with CSS\n * borders instead.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {5}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxItem value=\"Item 1\" />\n *     <ComboboxSeparator />\n *     <ComboboxItem value=\"Item 2\" />\n *     <ComboboxItem value=\"Item 3\" />\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxSeparator = forwardRef(function ComboboxSeparator(\n  props: ComboboxSeparatorProps,\n) {\n  const htmlProps = useComboboxSeparator(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxSeparatorOptions<\n  T extends ElementType = TagName,\n> extends CompositeSeparatorOptions<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  store?: ComboboxStore;\n}\n\nexport type ComboboxSeparatorProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxSeparatorOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MAgCE,uBAAgB,WAAA,SAAyB,qBAAA,EAAA,OAAA,GAAA,SAAA;CACzC,MAAA,UAAQ,yBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAQ,OAAA,mFAAsB;SAAE,sBAAA;EAAO;EAAU,GAAA;CACjD,CAAA;CACD,OAAA;;;;;;;;;;;;;;;;;;;;;;MA0BC,oBAAqB,WADH,SAAA,kBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,qBAAA,KAAA,CAAA"}
+{"version":3,"file":"combobox-separator.js","names":[],"sources":["../../src/combobox/combobox-separator.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { CompositeSeparatorOptions } from \"../composite/composite-separator.tsx\";\nimport { useCompositeSeparator } from \"../composite/composite-separator.tsx\";\nimport { useComboboxScopedContext } from \"./combobox-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nconst TagName = \"hr\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props a `ComboboxSeparator` component for combobox items.\n * @deprecated Use `useComboboxGroup` with CSS borders instead.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxSeparator({ store });\n * <ComboboxPopover store={store}>\n *   <ComboboxItem value=\"Item 1\" />\n *   <Role {...props} />\n *   <ComboboxItem value=\"Item 2\" />\n *   <ComboboxItem value=\"Item 3\" />\n * </ComboboxPopover>\n * ```\n */\nexport const useComboboxSeparator = createHook<\n  TagName,\n  ComboboxSeparatorOptions\n>(function useComboboxSeparator({ store, ...props }) {\n  const context = useComboboxScopedContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"ComboboxSeparator must be wrapped in a ComboboxList or ComboboxPopover component.\",\n  );\n\n  props = useCompositeSeparator({ store, ...props });\n  return props;\n});\n\n/**\n * Renders a divider between\n * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements.\n * @deprecated Use\n * [`ComboboxGroup`](https://ariakit.com/reference/combobox-group) with CSS\n * borders instead.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {5}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxItem value=\"Item 1\" />\n *     <ComboboxSeparator />\n *     <ComboboxItem value=\"Item 2\" />\n *     <ComboboxItem value=\"Item 3\" />\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxSeparator = forwardRef(function ComboboxSeparator(\n  props: ComboboxSeparatorProps,\n) {\n  const htmlProps = useComboboxSeparator(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxSeparatorOptions<\n  T extends ElementType = TagName,\n> extends CompositeSeparatorOptions<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  store?: ComboboxStore;\n}\n\nexport type ComboboxSeparatorProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxSeparatorOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MAgCE,uBAAgB,WAAA,SAAyB,qBAAA,EAAA,OAAA,GAAA,SAAA;CACzC,MAAA,UAAQ,yBAAS;CAEjB,QAAA,SAEE;CAIF,UAAQ,OAAA,QAAA,IAAA,aAAsB,gBAAA,mFAAA;SAAE,sBAAA;EAAO;EAAU,GAAA;CACjD,CAAA;CACD,OAAA;;;;;;;;;;;;;;;;;;;;;;MA0BC,oBAAqB,WADH,SAAA,kBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,qBAAA,KAAA,CAAA"}

package/dist/combobox/combobox-value.js

@@ -29,7 +29,7 @@ import { useStoreState } from "@ariakit/react-store";
 function ComboboxValue({ store, children } = {}) {
 	const context = useComboboxContext();
 	store = store || context;
-	invariant(store, "ComboboxValue must receive a `store` prop or be wrapped in a ComboboxProvider component.");
+	invariant(store, process.env.NODE_ENV !== "production" && "ComboboxValue must receive a `store` prop or be wrapped in a ComboboxProvider component.");
 	const value = useStoreState(store, "value");
 	if (children) return children(value);
 	return value;

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

@@ -1 +1 @@
-{"version":3,"file":"combobox-value.js","names":[],"sources":["../../src/combobox/combobox-value.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ReactNode } from \"react\";\nimport { useComboboxContext } from \"./combobox-context.tsx\";\nimport type { ComboboxStore, ComboboxStoreState } from \"./combobox-store.ts\";\n\n/**\n * Renders the current\n * [`value`](https://ariakit.com/reference/use-combobox-store#value) state in\n * the [combobox store](https://ariakit.com/reference/use-combobox-store).\n *\n * As a value component, it doesn't render any DOM elements and therefore\n * doesn't accept HTML props.\n *\n * It takes a\n * [`children`](https://ariakit.com/reference/combobox-value#children) function\n * that gets called with the current value as an argument. This can be used as\n * an uncontrolled API to render the combobox value in a custom way.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {3-5}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxValue>\n *     {(value) => `Current value: ${value}`}\n *   </ComboboxValue>\n * </ComboboxProvider>\n * ```\n */\nexport function ComboboxValue({ store, children }: ComboboxValueProps = {}) {\n  const context = useComboboxContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"ComboboxValue must receive a `store` prop or be wrapped in a ComboboxProvider component.\",\n  );\n\n  const value = useStoreState(store, \"value\");\n\n  if (children) {\n    return children(value);\n  }\n\n  return value;\n}\n\nexport interface ComboboxValueProps {\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   * A function that gets called with the current value as an argument. It can\n   * be used to render the combobox value in a custom way.\n   */\n  children?: (value: ComboboxStoreState[\"value\"]) => ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;SA8BQ,cAAU,EAAA,OAAA,aAAmB,CAAA,GAAA;CACnC,MAAA,UAAQ,mBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAQ,0FAA4B;CAE1C,MAAI,QACF,cAAO,OAAc,OAAA;CAGvB,IAAA,UAAO,OAAA,SAAA,KAAA;CACT,OAAA"}
+{"version":3,"file":"combobox-value.js","names":[],"sources":["../../src/combobox/combobox-value.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ReactNode } from \"react\";\nimport { useComboboxContext } from \"./combobox-context.tsx\";\nimport type { ComboboxStore, ComboboxStoreState } from \"./combobox-store.ts\";\n\n/**\n * Renders the current\n * [`value`](https://ariakit.com/reference/use-combobox-store#value) state in\n * the [combobox store](https://ariakit.com/reference/use-combobox-store).\n *\n * As a value component, it doesn't render any DOM elements and therefore\n * doesn't accept HTML props.\n *\n * It takes a\n * [`children`](https://ariakit.com/reference/combobox-value#children) function\n * that gets called with the current value as an argument. This can be used as\n * an uncontrolled API to render the combobox value in a custom way.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {3-5}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxValue>\n *     {(value) => `Current value: ${value}`}\n *   </ComboboxValue>\n * </ComboboxProvider>\n * ```\n */\nexport function ComboboxValue({ store, children }: ComboboxValueProps = {}) {\n  const context = useComboboxContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"ComboboxValue must receive a `store` prop or be wrapped in a ComboboxProvider component.\",\n  );\n\n  const value = useStoreState(store, \"value\");\n\n  if (children) {\n    return children(value);\n  }\n\n  return value;\n}\n\nexport interface ComboboxValueProps {\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   * A function that gets called with the current value as an argument. It can\n   * be used to render the combobox value in a custom way.\n   */\n  children?: (value: ComboboxStoreState[\"value\"]) => ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;SA8BQ,cAAU,EAAA,OAAA,aAAmB,CAAA,GAAA;CACnC,MAAA,UAAQ,mBAAS;CAEjB,QAAA,SAEE;CAIF,UAAM,OAAQ,QAAA,IAAc,aAAc,gBAAA,0FAAA;CAE1C,MAAI,QACF,cAAO,OAAc,OAAA;CAGvB,IAAA,UAAO,OAAA,SAAA,KAAA;CACT,OAAA"}

package/dist/combobox/combobox.d.ts

@@ -1,6 +1,6 @@
 import { s as ComboboxStoreState, t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
-import { n as CompositeOptions } from "../composite-DLvyFHMq.js";
-import { n as PopoverAnchorOptions } from "../popover-anchor-PgfeXyzs.js";
+import { n as CompositeOptions } from "../composite-KBhCGLEy.js";
+import { n as PopoverAnchorOptions } from "../popover-anchor-W18KUmuM.js";
 import { Props } from "@ariakit/react-utils";
 import { AriaAttributes, ChangeEvent, ElementType, KeyboardEvent, MouseEvent } from "react";
 import { BooleanOrCallback, StringWithValue } from "@ariakit/utils";
@@ -39,7 +39,7 @@ declare const useCombobox: import("@ariakit/react-utils").Hook<"input", Combobox
  * </ComboboxProvider>
  * ```
  */
-declare const Combobox: (props: ComboboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const Combobox: (props: ComboboxProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface ComboboxOptions<T extends ElementType = TagName> extends CompositeOptions<T>, PopoverAnchorOptions<T> {
   /**
    * Object returned by the

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

@@ -1 +1 @@
-{"version":3,"file":"combobox.d.ts","names":["Props","BooleanOrCallback","StringWithValue","AriaAttributes","ChangeEvent","ElementType","MouseEvent","KeyboardEvent","ReactKeyboardEvent","CompositeOptions","PopoverAnchorOptions","ComboboxStore","ComboboxStoreState","TagName","useCombobox","ComboboxOptions","Hook","Combobox","ComboboxProps","props","ReactElement","JSXElementConstructor","T","Required","HTMLElement","store","autoSelect","getAutoSelectId","renderedItems","autoComplete","blurActiveItemOnClick","showMinLength","showOnChange","showOnMouseDown","showOnClick","showOnKeyDown","showOnKeyPress","setValueOnChange","setValueOnClick"],"sources":["../../src/combobox/combobox.d.ts"],"mappings":";;;;;;;;cAMca,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgD;;;;AACxD;AAAA;;;;AACQ;AAgB7B;;;;AAA8F;AAlBjB,cAkBxDC,WAAAA,iCAA4CE,IAAAA,UAAcD,eAAe;;;;;;;;;AAgB2C;AACzI;;;;;;cADqBE,QAAAA,GAAWE,KAAAA,EAAOD,aAAa,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACnGN,eAAAA,WAA0BV,WAAAA,GAAcQ,OAAAA,UAAiBJ,gBAAAA,CAAiBa,CAAAA,GAAIZ,oBAAAA,CAAqBY,CAAAA;EAoE9EV;;;;;;;EA5DlCa,KAAAA,GAAQd,aAAAA;EAqIyBP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAnGjCsB,UAAAA;EA0BAC;;;;;;;;;;;;;;;;;;;;;;;;;EAAAA,eAAAA,IAAmBC,aAAAA,EAAehB,kBAAAA;EA6GAJ;;;;;;;;;;;;;;;AA2CwB;AAE9D;;;;;;;;;;;;;EA5HIqB,YAAAA,GAAe3B,eAAAA,CAAgBqB,QAAAA,CAASpB,cAAAA;EA4HiBH;;;;;AAA0B;;EApHnF8B,qBAAAA,GAAwB7B,iBAAAA,CAAkBK,UAAAA,CAAWkB,WAAAA;;;;;;;;;;;;;;;;;;;;EAoBrDO,aAAAA;;;;;;;;;;;;;;;EAeAC,YAAAA,GAAe/B,iBAAAA,CAAkBG,WAAAA,CAAYoB,WAAAA;;;;;;;;;;EAU7CS,eAAAA,GAAkBhC,iBAAAA,CAAkBK,UAAAA,CAAWkB,WAAAA;;;;;;;;;;;;;;;EAe/CU,WAAAA,GAAcjC,iBAAAA,CAAkBK,UAAAA,CAAWkB,WAAAA;;;;;;;;;;;EAW3CW,aAAAA,GAAgBlC,iBAAAA,CAAkBO,aAAAA,CAAmBgB,WAAAA;;;;;;;;;;;;;;;;EAgBrDY,cAAAA,GAAiBnC,iBAAAA,CAAkBO,aAAAA,CAAmBgB,WAAAA;;;;;;;;;;;;;;EActDa,gBAAAA,GAAmBpC,iBAAAA,CAAkBG,WAAAA,CAAYoB,WAAAA;;;;;;;;;;;;;EAajDc,eAAAA,GAAkBrC,iBAAAA,CAAkBK,UAAAA,CAAWkB,WAAAA;AAAAA;AAAAA,KAEvCN,aAAAA,WAAwBb,WAAAA,GAAcQ,OAAAA,IAAWb,KAAAA,CAAMsB,CAAAA,EAAGP,eAAAA,CAAgBO,CAAAA"}
+{"version":3,"file":"combobox.d.ts","names":["Props","BooleanOrCallback","StringWithValue","AriaAttributes","ChangeEvent","ElementType","MouseEvent","KeyboardEvent","ReactKeyboardEvent","CompositeOptions","PopoverAnchorOptions","ComboboxStore","ComboboxStoreState","TagName","useCombobox","ComboboxOptions","Hook","Combobox","ComboboxProps","props","ReactElement","JSXElementConstructor","T","Required","HTMLElement","store","autoSelect","getAutoSelectId","renderedItems","autoComplete","blurActiveItemOnClick","showMinLength","showOnChange","showOnMouseDown","showOnClick","showOnKeyDown","showOnKeyPress","setValueOnChange","setValueOnClick"],"sources":["../../src/combobox/combobox.d.ts"],"mappings":";;;;;;;;cAMca,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgD;;;;AACxD;AAAA;;;;AACQ;AAgB7B;;;;AAA8F;AAlBjB,cAkBxDC,WAAAA,iCAA4CE,IAAAA,UAAcD,eAAe;;;;;;;;;AAgB+C;AAC7I;;;;;;cADqBE,QAAAA,GAAWE,KAAAA,EAAOD,aAAa,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACvGN,eAAAA,WAA0BV,WAAAA,GAAcQ,OAAAA,UAAiBJ,gBAAAA,CAAiBa,CAAAA,GAAIZ,oBAAAA,CAAqBY,CAAAA;EAoE9EV;;;;;;;EA5DlCa,KAAAA,GAAQd,aAAAA;EAqIyBP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAnGjCsB,UAAAA;EA0BAC;;;;;;;;;;;;;;;;;;;;;;;;;EAAAA,eAAAA,IAAmBC,aAAAA,EAAehB,kBAAAA;EA6GAJ;;;;;;;;;;;;;;;AA2CwB;AAE9D;;;;;;;;;;;;;EA5HIqB,YAAAA,GAAe3B,eAAAA,CAAgBqB,QAAAA,CAASpB,cAAAA;EA4HiBH;;;;;AAA0B;;EApHnF8B,qBAAAA,GAAwB7B,iBAAAA,CAAkBK,UAAAA,CAAWkB,WAAAA;;;;;;;;;;;;;;;;;;;;EAoBrDO,aAAAA;;;;;;;;;;;;;;;EAeAC,YAAAA,GAAe/B,iBAAAA,CAAkBG,WAAAA,CAAYoB,WAAAA;;;;;;;;;;EAU7CS,eAAAA,GAAkBhC,iBAAAA,CAAkBK,UAAAA,CAAWkB,WAAAA;;;;;;;;;;;;;;;EAe/CU,WAAAA,GAAcjC,iBAAAA,CAAkBK,UAAAA,CAAWkB,WAAAA;;;;;;;;;;;EAW3CW,aAAAA,GAAgBlC,iBAAAA,CAAkBO,aAAAA,CAAmBgB,WAAAA;;;;;;;;;;;;;;;;EAgBrDY,cAAAA,GAAiBnC,iBAAAA,CAAkBO,aAAAA,CAAmBgB,WAAAA;;;;;;;;;;;;;;EActDa,gBAAAA,GAAmBpC,iBAAAA,CAAkBG,WAAAA,CAAYoB,WAAAA;;;;;;;;;;;;;EAajDc,eAAAA,GAAkBrC,iBAAAA,CAAkBK,UAAAA,CAAWkB,WAAAA;AAAAA;AAAAA,KAEvCN,aAAAA,WAAwBb,WAAAA,GAAcQ,OAAAA,IAAWb,KAAAA,CAAMsB,CAAAA,EAAGP,eAAAA,CAAgBO,CAAAA"}

package/dist/combobox/combobox.js

@@ -49,7 +49,7 @@ function getDefaultAutoSelectId(items) {
 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.");
+	invariant(store, process.env.NODE_ENV !== "production" && "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);
@@ -140,6 +140,7 @@ const useCombobox = createHook(function useCombobox({ store, focusable = true, a
 	const scrollingElementRef = useRef(null);
 	const getAutoSelectIdProp = useEvent(getAutoSelectId);
 	const autoSelectIdRef = useRef(null);
+	const autoSelectMovedRef = useRef(void 0);
 	const userScrolledRef = useRef(false);
 	const isAutoScrollingRef = useRef(false);
 	useEffect(() => {
@@ -188,6 +189,10 @@ const useCombobox = createHook(function useCombobox({ store, focusable = true, a
 		if (autoSelect !== "always" && open) return;
 		canAutoSelectRef.current = open;
 	}, [autoSelect, open]);
+	useSafeLayoutEffect(() => {
+		if (open) return;
+		autoSelectMovedRef.current = void 0;
+	}, [open]);
 	const resetValueOnSelect = useStoreState(store, "resetValueOnSelect");
 	useUpdateEffect(() => {
 		const canAutoSelect = canAutoSelectRef.current;
@@ -205,7 +210,16 @@ const useCombobox = createHook(function useCombobox({ store, focusable = true, a
 			const userAutoSelectId = getAutoSelectIdProp(items);
 			const autoSelectId = userAutoSelectId !== void 0 ? userAutoSelectId : getDefaultAutoSelectId(items) ?? store.first();
 			autoSelectIdRef.current = autoSelectId;
-			store.move(autoSelectId ?? null);
+			const nextActiveId = autoSelectId ?? null;
+			const nextActiveValue = store.item(nextActiveId)?.value;
+			const moved = autoSelectMovedRef.current;
+			if (nextActiveId !== activeId || moved?.id !== nextActiveId || moved?.value !== nextActiveValue) {
+				autoSelectMovedRef.current = {
+					id: nextActiveId,
+					value: nextActiveValue
+				};
+				store.move(nextActiveId);
+			} else store.setState("activeValue", nextActiveValue);
 		} else {
 			const element = store.item(activeId || store.first())?.element;
 			if (element && "scrollIntoView" in element) {

package/dist/combobox/combobox.js.map

@@ -1 +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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"}
+{"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    // Tracks the item (id and value) the autoSelect behavior last moved focus\n    // to, so we can tell an already-focused item apart from one that only looks\n    // the same, such as a different value under the same id (e.g. an index-keyed\n    // list after filtering) or an item that became active without focus. This is\n    // distinct from autoSelectIdRef above, which tracks the current target for\n    // the scroll guard. Reset when the popover closes so reopening re-focuses.\n    const autoSelectMovedRef = useRef<{\n      id: string | null;\n      value?: string;\n    }>(undefined);\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    // Reset the auto-moved item when the popover closes so reopening re-focuses\n    // the auto-selected item.\n    useSafeLayoutEffect(() => {\n      if (open) return;\n      autoSelectMovedRef.current = undefined;\n    }, [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        const nextActiveId = autoSelectId ?? null;\n        const nextActiveValue = store.item(nextActiveId)?.value;\n        const moved = autoSelectMovedRef.current;\n        // Move when the auto-select target changes: a different active item, a\n        // different target id, or the same id now holding a different value\n        // (for example, a list keyed by index whose first item's value changes\n        // after filtering, or asynchronously loaded items). We avoid re-moving\n        // to the exact item we already moved to, because store.move() always\n        // increments the `moves` counter, which makes the Composite component\n        // re-focus the active item. Re-focusing when only the rendered items\n        // changed (for example, a virtualized list resizing because a mobile\n        // keyboard's autocomplete bar changed the available height) would bounce\n        // focus off the input and back and drop characters as the user types.\n        // See https://github.com/ariakit/ariakit/issues/3837\n        if (\n          nextActiveId !== activeId ||\n          moved?.id !== nextActiveId ||\n          moved?.value !== nextActiveValue\n        ) {\n          autoSelectMovedRef.current = {\n            id: nextActiveId,\n            value: nextActiveValue,\n          };\n          store.move(nextActiveId);\n        } else {\n          // The same item is already the focused active item, so we skip the\n          // move to avoid re-focusing it. Keep activeValue in sync (a no-op\n          // here since the value is unchanged) the way store.move() would.\n          store.setState(\"activeValue\", nextActiveValue);\n        }\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/command/command.d.ts

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

package/dist/{command-DckndCUK.d.ts → command-B9C8p3_S.d.ts}

@@ -1,4 +1,4 @@
-import { n as FocusableOptions } from "./focusable-B00tOxtB.js";
+import { n as FocusableOptions } from "./focusable-dBZH13-T.js";
 import { Props } from "@ariakit/react-utils";
 import { ElementType } from "react";
 
@@ -34,7 +34,7 @@ declare const useCommand: import("@ariakit/react-utils").Hook<"button", CommandO
  * <Command>Button</Command>
  * ```
  */
-declare const Command: (props: CommandProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const Command: (props: CommandProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface CommandOptions<T extends ElementType = TagName> extends FocusableOptions<T> {
   /**
    * If set to `true`, pressing the enter key while this element is focused will
@@ -56,4 +56,4 @@ interface CommandOptions<T extends ElementType = TagName> extends FocusableOptio
 type CommandProps<T extends ElementType = TagName> = Props<T, CommandOptions<T>>;
 //#endregion
 export { useCommand as i, CommandOptions as n, CommandProps as r, Command as t };
-//# sourceMappingURL=command-DckndCUK.d.ts.map
+//# sourceMappingURL=command-B9C8p3_S.d.ts.map

package/dist/{command-DckndCUK.d.ts.map → command-B9C8p3_S.d.ts.map}

@@ -1 +1 @@
-{"version":3,"file":"command-DckndCUK.d.ts","names":["Props","ElementType","FocusableOptions","TagName","useCommand","CommandOptions","Hook","Command","CommandProps","props","ReactElement","JSXElementConstructor","T","clickOnEnter","clickOnSpace"],"sources":["../src/command/command.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFsC;;;;AAC9C;AAAA;;;;AACQ;AAY7B;AAdmE,cAc9CC,UAAAA,iCAA2CE,IAAAA,WAAeD,cAAc;;;AAAA;AAkB7F;;;;;;;;;AAAuI;AACvI;;;;cADqBE,OAAAA,GAAUE,KAAAA,EAAOD,YAAY,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACjGN,cAAAA,WAAyBJ,WAAAA,GAAcE,OAAAA,UAAiBD,gBAAAA,CAAiBU,CAAAA;EAAjBV;;;;;;;EAQrEW,YAAAA;EAAAA;;;AAQY;AAEhB;;;EAFIC,YAAAA;AAAAA;AAAAA,KAEQN,YAAAA,WAAuBP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,cAAAA,CAAeO,CAAAA"}
+{"version":3,"file":"command-B9C8p3_S.d.ts","names":["Props","ElementType","FocusableOptions","TagName","useCommand","CommandOptions","Hook","Command","CommandProps","props","ReactElement","JSXElementConstructor","T","clickOnEnter","clickOnSpace"],"sources":["../src/command/command.d.ts"],"mappings":";;;;;cAGcG,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFsC;;;;AAC9C;AAAA;;;;AACQ;AAY7B;AAdmE,cAc9CC,UAAAA,iCAA2CE,IAAAA,WAAeD,cAAc;;;AAAA;AAkB7F;;;;;;;;;AAA2I;AAC3I;;;;cADqBE,OAAAA,GAAUE,KAAAA,EAAOD,YAAY,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UACrGN,cAAAA,WAAyBJ,WAAAA,GAAcE,OAAAA,UAAiBD,gBAAAA,CAAiBU,CAAAA;EAAjBV;;;;;;;EAQrEW,YAAAA;EAAAA;;;AAQY;AAEhB;;;EAFIC,YAAAA;AAAAA;AAAAA,KAEQN,YAAAA,WAAuBP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMY,CAAAA,EAAGP,cAAAA,CAAeO,CAAAA"}

package/dist/composite/composite-container.d.ts

@@ -41,7 +41,7 @@ declare const useCompositeContainer: import("@ariakit/react-utils").Hook<"div",
  * </CompositeProvider>
  * ```
  */
-declare const CompositeContainer: (props: CompositeContainerProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const CompositeContainer: (props: CompositeContainerProps) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 interface CompositeContainerOptions<_T extends ElementType = TagName> extends Options {
   /**
    * Object returned by the

package/dist/composite/composite-container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"composite-container.d.ts","names":["Options","Props","ElementType","CompositeStore","TagName","useCompositeContainer","CompositeContainerOptions","Hook","CompositeContainer","CompositeContainerProps","props","ReactElement","JSXElementConstructor","_T","store","T"],"sources":["../../src/composite/composite-container.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAkB7B;;;;AAAgH;AAmBhH;;AAvC2D,cAoBtCC,qBAAAA,iCAAsDE,IAAAA,QAAYD,yBAAyB;;;;;;;AAmB6C;AAC7J;;;;;;;;;;;cADqBE,kBAAAA,GAAqBE,KAAAA,EAAOD,uBAAuB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACvHN,yBAAAA,YAAqCJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EASjFc;;;AAAsB;AAE1B;;;;EAFIA,KAAAA,GAAQX,cAAAA;AAAAA;AAAAA,KAEAM,uBAAAA,WAAkCP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMc,CAAAA,EAAGT,yBAAAA,CAA0BS,CAAAA"}
+{"version":3,"file":"composite-container.d.ts","names":["Options","Props","ElementType","CompositeStore","TagName","useCompositeContainer","CompositeContainerOptions","Hook","CompositeContainer","CompositeContainerProps","props","ReactElement","JSXElementConstructor","_T","store","T"],"sources":["../../src/composite/composite-container.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF8B;;;;AACtC;AAAA;;;;AACQ;AAkB7B;;;;AAAgH;AAmBhH;;AAvC2D,cAoBtCC,qBAAAA,iCAAsDE,IAAAA,QAAYD,yBAAyB;;;;;;;AAmBiD;AACjK;;;;;;;;;;;cADqBE,kBAAAA,GAAqBE,KAAAA,EAAOD,uBAAuB,qBAAqBE,YAAAA,mCAA+CC,qBAAAA;AAAAA,UAC3HN,yBAAAA,YAAqCJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EASjFc;;;AAAsB;AAE1B;;;;EAFIA,KAAAA,GAAQX,cAAAA;AAAAA;AAAAA,KAEAM,uBAAAA,WAAkCP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMc,CAAAA,EAAGT,yBAAAA,CAA0BS,CAAAA"}

package/dist/composite/composite-container.js

@@ -1,5 +1,5 @@
 "use client";
-import { useCompositeContext } from "./composite-context.js";
+import { useCompositeScopedContext } from "./composite-context.js";
 import { selectTextField } from "./utils.js";
 import { createElement, createHook, forwardRef, useEvent, useMergeRefs } from "@ariakit/react-utils";
 import { disableFocusIn, getFirstTabbableIn, isButton, isFocusEventOutside, isSelfTarget, isTextField, removeUndefinedValues, restoreFocusIn } from "@ariakit/utils";
@@ -31,7 +31,7 @@ function getFirstTabbable(container) {
 * ```
 */
 const useCompositeContainer = createHook(function useCompositeContainer({ store, ...props }) {
-	const context = useCompositeContext();
+	const context = useCompositeScopedContext();
 	store = store || context;
 	const ref = useRef(null);
 	const isOpenRef = useRef(false);