reka-ui 2.3.1 → 2.3.2

package/dist/Accordion/AccordionItem.cjs

@@ -50,7 +50,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         return null;
       shared_useArrowNavigation.useArrowNavigation(
         e,
-        currentElement.value,
+        target,
         rootContext.parentElement.value,
         {
           arrowKeyOptions: rootContext.orientation,

package/dist/Accordion/AccordionItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.cjs","sources":["../../src/Accordion/AccordionItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, VNodeRef } from 'vue'\nimport type { CollapsibleRootProps } from '../Collapsible'\nimport { createContext, useArrowNavigation, useForwardExpose } from '@/shared'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\n\nenum AccordionItemState {\n  Open = 'open',\n  Closed = 'closed',\n}\n\nexport interface AccordionItemProps\n  extends Omit<CollapsibleRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> {\n  /**\n   * Whether or not an accordion item is disabled from user interaction.\n   * When `true`, prevents the user from interacting with the item.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n  /**\n   * A string value for the accordion item. All items within an accordion should use a unique value.\n   */\n  value: string\n}\n\ninterface AccordionItemContext {\n  open: ComputedRef<boolean>\n  dataState: ComputedRef<AccordionItemState>\n  disabled: ComputedRef<boolean>\n  dataDisabled: ComputedRef<'' | undefined>\n  triggerId: string\n  currentRef: VNodeRef\n  currentElement: ComputedRef<HTMLElement | undefined>\n  value: ComputedRef<string>\n}\n\nexport const [injectAccordionItemContext, provideAccordionItemContext]\n  = createContext<AccordionItemContext>('AccordionItem')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { CollapsibleRoot } from '@/Collapsible'\n\nconst props = defineProps<AccordionItemProps>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst rootContext = injectAccordionRootContext()\n\nconst open = computed(() =>\n  rootContext.isSingle.value\n    ? props.value === rootContext.modelValue.value\n    : Array.isArray(rootContext.modelValue.value)\n      && rootContext.modelValue.value.includes(props.value),\n)\n\nconst disabled = computed(() => {\n  return (rootContext.disabled.value || props.disabled)\n})\n\nconst dataDisabled = computed(() => (disabled.value ? '' : undefined))\n\nconst dataState = computed(() =>\n  open.value ? AccordionItemState.Open : AccordionItemState.Closed,\n)\n\ndefineExpose({ open, dataDisabled })\nconst { currentRef, currentElement } = useForwardExpose()\n\nprovideAccordionItemContext({\n  open,\n  dataState,\n  disabled,\n  dataDisabled,\n  triggerId: '',\n  currentRef,\n  currentElement,\n  value: computed(() => props.value),\n})\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  const target = e.target as HTMLElement\n  const allCollectionItems: HTMLElement[] = Array.from(rootContext.parentElement.value?.querySelectorAll('[data-reka-collection-item]') ?? [])\n\n  const collectionItemIndex = allCollectionItems.findIndex(item => item === target)\n  if (collectionItemIndex === -1)\n    return null\n\n  useArrowNavigation(\n    e,\n    currentElement.value,\n    rootContext.parentElement.value!,\n    {\n      arrowKeyOptions: rootContext.orientation,\n      dir: rootContext.direction.value,\n      focus: true,\n    },\n  )\n}\n</script>\n\n<template>\n  <CollapsibleRoot\n    :data-orientation=\"rootContext.orientation\"\n    :data-disabled=\"dataDisabled\"\n    :data-state=\"dataState\"\n    :disabled=\"disabled\"\n    :open=\"open\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :unmount-on-hide=\"rootContext.unmountOnHide.value\"\n    @keydown.up.down.left.right.home.end=\"handleArrowKey\"\n  >\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"],"names":["createContext","injectAccordionRootContext","computed","useForwardExpose","useArrowNavigation"],"mappings":";;;;;;;;;AAqCO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjEA,mCAAoC,eAAe;;;;;;;;;;;AAOvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AASd,IAAA,MAAM,cAAcC,kDAA2B,EAAA;AAE/C,IAAA,MAAM,IAAO,GAAAC,YAAA;AAAA,MAAS,MACpB,YAAY,QAAS,CAAA,KAAA,GACjB,MAAM,KAAU,KAAA,WAAA,CAAY,WAAW,KACvC,GAAA,KAAA,CAAM,QAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CACvC,IAAA,WAAA,CAAY,WAAW,KAAM,CAAA,QAAA,CAAS,MAAM,KAAK;AAAA,KAC1D;AAEA,IAAM,MAAA,QAAA,GAAWA,aAAS,MAAM;AAC9B,MAAQ,OAAA,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,KAAM,CAAA,QAAA;AAAA,KAC7C,CAAA;AAED,IAAA,MAAM,eAAeA,YAAS,CAAA,MAAO,QAAS,CAAA,KAAA,GAAQ,KAAK,MAAU,CAAA;AAErE,IAAA,MAAM,SAAY,GAAAA,YAAA;AAAA,MAAS,MACzB,IAAK,CAAA,KAAA,GAAQ,MAA0B,cAAA,QAAA;AAAA,KACzC;AAEA,IAAa,QAAA,CAAA,EAAE,IAAM,EAAA,YAAA,EAAc,CAAA;AACnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,UAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAO,EAAAD,YAAA,CAAS,MAAM,KAAA,CAAM,KAAK;AAAA,KAClC,CAAA;AAED,IAAA,SAAS,eAAe,CAAkB,EAAA;AACxC,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA;AACjB,MAAM,MAAA,kBAAA,GAAoC,KAAM,CAAA,IAAA,CAAK,WAAY,CAAA,aAAA,CAAc,OAAO,gBAAiB,CAAA,6BAA6B,CAAK,IAAA,EAAE,CAAA;AAE3I,MAAA,MAAM,mBAAsB,GAAA,kBAAA,CAAmB,SAAU,CAAA,CAAA,IAAA,KAAQ,SAAS,MAAM,CAAA;AAChF,MAAA,IAAI,mBAAwB,KAAA,EAAA;AAC1B,QAAO,OAAA,IAAA;AAET,MAAAE,4CAAA;AAAA,QACE,CAAA;AAAA,QACA,cAAe,CAAA,KAAA;AAAA,QACf,YAAY,aAAc,CAAA,KAAA;AAAA,QAC1B;AAAA,UACE,iBAAiB,WAAY,CAAA,WAAA;AAAA,UAC7B,GAAA,EAAK,YAAY,SAAU,CAAA,KAAA;AAAA,UAC3B,KAAO,EAAA;AAAA;AACT,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AccordionItem.cjs","sources":["../../src/Accordion/AccordionItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, VNodeRef } from 'vue'\nimport type { CollapsibleRootProps } from '../Collapsible'\nimport { createContext, useArrowNavigation, useForwardExpose } from '@/shared'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\n\nenum AccordionItemState {\n  Open = 'open',\n  Closed = 'closed',\n}\n\nexport interface AccordionItemProps\n  extends Omit<CollapsibleRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> {\n  /**\n   * Whether or not an accordion item is disabled from user interaction.\n   * When `true`, prevents the user from interacting with the item.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n  /**\n   * A string value for the accordion item. All items within an accordion should use a unique value.\n   */\n  value: string\n}\n\ninterface AccordionItemContext {\n  open: ComputedRef<boolean>\n  dataState: ComputedRef<AccordionItemState>\n  disabled: ComputedRef<boolean>\n  dataDisabled: ComputedRef<'' | undefined>\n  triggerId: string\n  currentRef: VNodeRef\n  currentElement: ComputedRef<HTMLElement | undefined>\n  value: ComputedRef<string>\n}\n\nexport const [injectAccordionItemContext, provideAccordionItemContext]\n  = createContext<AccordionItemContext>('AccordionItem')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { CollapsibleRoot } from '@/Collapsible'\n\nconst props = defineProps<AccordionItemProps>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst rootContext = injectAccordionRootContext()\n\nconst open = computed(() =>\n  rootContext.isSingle.value\n    ? props.value === rootContext.modelValue.value\n    : Array.isArray(rootContext.modelValue.value)\n      && rootContext.modelValue.value.includes(props.value),\n)\n\nconst disabled = computed(() => {\n  return (rootContext.disabled.value || props.disabled)\n})\n\nconst dataDisabled = computed(() => (disabled.value ? '' : undefined))\n\nconst dataState = computed(() =>\n  open.value ? AccordionItemState.Open : AccordionItemState.Closed,\n)\n\ndefineExpose({ open, dataDisabled })\nconst { currentRef, currentElement } = useForwardExpose()\n\nprovideAccordionItemContext({\n  open,\n  dataState,\n  disabled,\n  dataDisabled,\n  triggerId: '',\n  currentRef,\n  currentElement,\n  value: computed(() => props.value),\n})\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  const target = e.target as HTMLElement\n  const allCollectionItems: HTMLElement[] = Array.from(rootContext.parentElement.value?.querySelectorAll('[data-reka-collection-item]') ?? [])\n\n  const collectionItemIndex = allCollectionItems.findIndex(item => item === target)\n  if (collectionItemIndex === -1)\n    return null\n\n  useArrowNavigation(\n    e,\n    target,\n    rootContext.parentElement.value!,\n    {\n      arrowKeyOptions: rootContext.orientation,\n      dir: rootContext.direction.value,\n      focus: true,\n    },\n  )\n}\n</script>\n\n<template>\n  <CollapsibleRoot\n    :data-orientation=\"rootContext.orientation\"\n    :data-disabled=\"dataDisabled\"\n    :data-state=\"dataState\"\n    :disabled=\"disabled\"\n    :open=\"open\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :unmount-on-hide=\"rootContext.unmountOnHide.value\"\n    @keydown.up.down.left.right.home.end=\"handleArrowKey\"\n  >\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"],"names":["createContext","injectAccordionRootContext","computed","useForwardExpose","useArrowNavigation"],"mappings":";;;;;;;;;AAqCO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjEA,mCAAoC,eAAe;;;;;;;;;;;AAOvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AASd,IAAA,MAAM,cAAcC,kDAA2B,EAAA;AAE/C,IAAA,MAAM,IAAO,GAAAC,YAAA;AAAA,MAAS,MACpB,YAAY,QAAS,CAAA,KAAA,GACjB,MAAM,KAAU,KAAA,WAAA,CAAY,WAAW,KACvC,GAAA,KAAA,CAAM,QAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CACvC,IAAA,WAAA,CAAY,WAAW,KAAM,CAAA,QAAA,CAAS,MAAM,KAAK;AAAA,KAC1D;AAEA,IAAM,MAAA,QAAA,GAAWA,aAAS,MAAM;AAC9B,MAAQ,OAAA,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,KAAM,CAAA,QAAA;AAAA,KAC7C,CAAA;AAED,IAAA,MAAM,eAAeA,YAAS,CAAA,MAAO,QAAS,CAAA,KAAA,GAAQ,KAAK,MAAU,CAAA;AAErE,IAAA,MAAM,SAAY,GAAAA,YAAA;AAAA,MAAS,MACzB,IAAK,CAAA,KAAA,GAAQ,MAA0B,cAAA,QAAA;AAAA,KACzC;AAEA,IAAa,QAAA,CAAA,EAAE,IAAM,EAAA,YAAA,EAAc,CAAA;AACnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,UAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAO,EAAAD,YAAA,CAAS,MAAM,KAAA,CAAM,KAAK;AAAA,KAClC,CAAA;AAED,IAAA,SAAS,eAAe,CAAkB,EAAA;AACxC,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA;AACjB,MAAM,MAAA,kBAAA,GAAoC,KAAM,CAAA,IAAA,CAAK,WAAY,CAAA,aAAA,CAAc,OAAO,gBAAiB,CAAA,6BAA6B,CAAK,IAAA,EAAE,CAAA;AAE3I,MAAA,MAAM,mBAAsB,GAAA,kBAAA,CAAmB,SAAU,CAAA,CAAA,IAAA,KAAQ,SAAS,MAAM,CAAA;AAChF,MAAA,IAAI,mBAAwB,KAAA,EAAA;AAC1B,QAAO,OAAA,IAAA;AAET,MAAAE,4CAAA;AAAA,QACE,CAAA;AAAA,QACA,MAAA;AAAA,QACA,YAAY,aAAc,CAAA,KAAA;AAAA,QAC1B;AAAA,UACE,iBAAiB,WAAY,CAAA,WAAA;AAAA,UAC7B,GAAA,EAAK,YAAY,SAAU,CAAA,KAAA;AAAA,UAC3B,KAAO,EAAA;AAAA;AACT,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Accordion/AccordionItem.js

@@ -48,7 +48,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         return null;
       useArrowNavigation(
         e,
-        currentElement.value,
+        target,
         rootContext.parentElement.value,
         {
           arrowKeyOptions: rootContext.orientation,

package/dist/Accordion/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sources":["../../src/Accordion/AccordionItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, VNodeRef } from 'vue'\nimport type { CollapsibleRootProps } from '../Collapsible'\nimport { createContext, useArrowNavigation, useForwardExpose } from '@/shared'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\n\nenum AccordionItemState {\n  Open = 'open',\n  Closed = 'closed',\n}\n\nexport interface AccordionItemProps\n  extends Omit<CollapsibleRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> {\n  /**\n   * Whether or not an accordion item is disabled from user interaction.\n   * When `true`, prevents the user from interacting with the item.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n  /**\n   * A string value for the accordion item. All items within an accordion should use a unique value.\n   */\n  value: string\n}\n\ninterface AccordionItemContext {\n  open: ComputedRef<boolean>\n  dataState: ComputedRef<AccordionItemState>\n  disabled: ComputedRef<boolean>\n  dataDisabled: ComputedRef<'' | undefined>\n  triggerId: string\n  currentRef: VNodeRef\n  currentElement: ComputedRef<HTMLElement | undefined>\n  value: ComputedRef<string>\n}\n\nexport const [injectAccordionItemContext, provideAccordionItemContext]\n  = createContext<AccordionItemContext>('AccordionItem')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { CollapsibleRoot } from '@/Collapsible'\n\nconst props = defineProps<AccordionItemProps>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst rootContext = injectAccordionRootContext()\n\nconst open = computed(() =>\n  rootContext.isSingle.value\n    ? props.value === rootContext.modelValue.value\n    : Array.isArray(rootContext.modelValue.value)\n      && rootContext.modelValue.value.includes(props.value),\n)\n\nconst disabled = computed(() => {\n  return (rootContext.disabled.value || props.disabled)\n})\n\nconst dataDisabled = computed(() => (disabled.value ? '' : undefined))\n\nconst dataState = computed(() =>\n  open.value ? AccordionItemState.Open : AccordionItemState.Closed,\n)\n\ndefineExpose({ open, dataDisabled })\nconst { currentRef, currentElement } = useForwardExpose()\n\nprovideAccordionItemContext({\n  open,\n  dataState,\n  disabled,\n  dataDisabled,\n  triggerId: '',\n  currentRef,\n  currentElement,\n  value: computed(() => props.value),\n})\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  const target = e.target as HTMLElement\n  const allCollectionItems: HTMLElement[] = Array.from(rootContext.parentElement.value?.querySelectorAll('[data-reka-collection-item]') ?? [])\n\n  const collectionItemIndex = allCollectionItems.findIndex(item => item === target)\n  if (collectionItemIndex === -1)\n    return null\n\n  useArrowNavigation(\n    e,\n    currentElement.value,\n    rootContext.parentElement.value!,\n    {\n      arrowKeyOptions: rootContext.orientation,\n      dir: rootContext.direction.value,\n      focus: true,\n    },\n  )\n}\n</script>\n\n<template>\n  <CollapsibleRoot\n    :data-orientation=\"rootContext.orientation\"\n    :data-disabled=\"dataDisabled\"\n    :data-state=\"dataState\"\n    :disabled=\"disabled\"\n    :open=\"open\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :unmount-on-hide=\"rootContext.unmountOnHide.value\"\n    @keydown.up.down.left.right.home.end=\"handleArrowKey\"\n  >\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;AAqCO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjE,cAAoC,eAAe;;;;;;;;;;;AAOvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AASd,IAAA,MAAM,cAAc,0BAA2B,EAAA;AAE/C,IAAA,MAAM,IAAO,GAAA,QAAA;AAAA,MAAS,MACpB,YAAY,QAAS,CAAA,KAAA,GACjB,MAAM,KAAU,KAAA,WAAA,CAAY,WAAW,KACvC,GAAA,KAAA,CAAM,QAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CACvC,IAAA,WAAA,CAAY,WAAW,KAAM,CAAA,QAAA,CAAS,MAAM,KAAK;AAAA,KAC1D;AAEA,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAQ,OAAA,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,KAAM,CAAA,QAAA;AAAA,KAC7C,CAAA;AAED,IAAA,MAAM,eAAe,QAAS,CAAA,MAAO,QAAS,CAAA,KAAA,GAAQ,KAAK,MAAU,CAAA;AAErE,IAAA,MAAM,SAAY,GAAA,QAAA;AAAA,MAAS,MACzB,IAAK,CAAA,KAAA,GAAQ,MAA0B,cAAA,QAAA;AAAA,KACzC;AAEA,IAAa,QAAA,CAAA,EAAE,IAAM,EAAA,YAAA,EAAc,CAAA;AACnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,UAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAO,EAAA,QAAA,CAAS,MAAM,KAAA,CAAM,KAAK;AAAA,KAClC,CAAA;AAED,IAAA,SAAS,eAAe,CAAkB,EAAA;AACxC,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA;AACjB,MAAM,MAAA,kBAAA,GAAoC,KAAM,CAAA,IAAA,CAAK,WAAY,CAAA,aAAA,CAAc,OAAO,gBAAiB,CAAA,6BAA6B,CAAK,IAAA,EAAE,CAAA;AAE3I,MAAA,MAAM,mBAAsB,GAAA,kBAAA,CAAmB,SAAU,CAAA,CAAA,IAAA,KAAQ,SAAS,MAAM,CAAA;AAChF,MAAA,IAAI,mBAAwB,KAAA,EAAA;AAC1B,QAAO,OAAA,IAAA;AAET,MAAA,kBAAA;AAAA,QACE,CAAA;AAAA,QACA,cAAe,CAAA,KAAA;AAAA,QACf,YAAY,aAAc,CAAA,KAAA;AAAA,QAC1B;AAAA,UACE,iBAAiB,WAAY,CAAA,WAAA;AAAA,UAC7B,GAAA,EAAK,YAAY,SAAU,CAAA,KAAA;AAAA,UAC3B,KAAO,EAAA;AAAA;AACT,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AccordionItem.js","sources":["../../src/Accordion/AccordionItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ComputedRef, VNodeRef } from 'vue'\nimport type { CollapsibleRootProps } from '../Collapsible'\nimport { createContext, useArrowNavigation, useForwardExpose } from '@/shared'\nimport { injectAccordionRootContext } from './AccordionRoot.vue'\n\nenum AccordionItemState {\n  Open = 'open',\n  Closed = 'closed',\n}\n\nexport interface AccordionItemProps\n  extends Omit<CollapsibleRootProps, 'open' | 'defaultOpen' | 'onOpenChange'> {\n  /**\n   * Whether or not an accordion item is disabled from user interaction.\n   * When `true`, prevents the user from interacting with the item.\n   *\n   * @defaultValue false\n   */\n  disabled?: boolean\n  /**\n   * A string value for the accordion item. All items within an accordion should use a unique value.\n   */\n  value: string\n}\n\ninterface AccordionItemContext {\n  open: ComputedRef<boolean>\n  dataState: ComputedRef<AccordionItemState>\n  disabled: ComputedRef<boolean>\n  dataDisabled: ComputedRef<'' | undefined>\n  triggerId: string\n  currentRef: VNodeRef\n  currentElement: ComputedRef<HTMLElement | undefined>\n  value: ComputedRef<string>\n}\n\nexport const [injectAccordionItemContext, provideAccordionItemContext]\n  = createContext<AccordionItemContext>('AccordionItem')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { CollapsibleRoot } from '@/Collapsible'\n\nconst props = defineProps<AccordionItemProps>()\n\ndefineSlots<{\n  default?: (props: {\n    /** Current open state */\n    open: typeof open.value\n  }) => any\n}>()\n\nconst rootContext = injectAccordionRootContext()\n\nconst open = computed(() =>\n  rootContext.isSingle.value\n    ? props.value === rootContext.modelValue.value\n    : Array.isArray(rootContext.modelValue.value)\n      && rootContext.modelValue.value.includes(props.value),\n)\n\nconst disabled = computed(() => {\n  return (rootContext.disabled.value || props.disabled)\n})\n\nconst dataDisabled = computed(() => (disabled.value ? '' : undefined))\n\nconst dataState = computed(() =>\n  open.value ? AccordionItemState.Open : AccordionItemState.Closed,\n)\n\ndefineExpose({ open, dataDisabled })\nconst { currentRef, currentElement } = useForwardExpose()\n\nprovideAccordionItemContext({\n  open,\n  dataState,\n  disabled,\n  dataDisabled,\n  triggerId: '',\n  currentRef,\n  currentElement,\n  value: computed(() => props.value),\n})\n\nfunction handleArrowKey(e: KeyboardEvent) {\n  const target = e.target as HTMLElement\n  const allCollectionItems: HTMLElement[] = Array.from(rootContext.parentElement.value?.querySelectorAll('[data-reka-collection-item]') ?? [])\n\n  const collectionItemIndex = allCollectionItems.findIndex(item => item === target)\n  if (collectionItemIndex === -1)\n    return null\n\n  useArrowNavigation(\n    e,\n    target,\n    rootContext.parentElement.value!,\n    {\n      arrowKeyOptions: rootContext.orientation,\n      dir: rootContext.direction.value,\n      focus: true,\n    },\n  )\n}\n</script>\n\n<template>\n  <CollapsibleRoot\n    :data-orientation=\"rootContext.orientation\"\n    :data-disabled=\"dataDisabled\"\n    :data-state=\"dataState\"\n    :disabled=\"disabled\"\n    :open=\"open\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :unmount-on-hide=\"rootContext.unmountOnHide.value\"\n    @keydown.up.down.left.right.home.end=\"handleArrowKey\"\n  >\n    <slot :open=\"open\" />\n  </CollapsibleRoot>\n</template>\n"],"names":[],"mappings":";;;;;;;AAqCO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjE,cAAoC,eAAe;;;;;;;;;;;AAOvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AASd,IAAA,MAAM,cAAc,0BAA2B,EAAA;AAE/C,IAAA,MAAM,IAAO,GAAA,QAAA;AAAA,MAAS,MACpB,YAAY,QAAS,CAAA,KAAA,GACjB,MAAM,KAAU,KAAA,WAAA,CAAY,WAAW,KACvC,GAAA,KAAA,CAAM,QAAQ,WAAY,CAAA,UAAA,CAAW,KAAK,CACvC,IAAA,WAAA,CAAY,WAAW,KAAM,CAAA,QAAA,CAAS,MAAM,KAAK;AAAA,KAC1D;AAEA,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAQ,OAAA,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,KAAM,CAAA,QAAA;AAAA,KAC7C,CAAA;AAED,IAAA,MAAM,eAAe,QAAS,CAAA,MAAO,QAAS,CAAA,KAAA,GAAQ,KAAK,MAAU,CAAA;AAErE,IAAA,MAAM,SAAY,GAAA,QAAA;AAAA,MAAS,MACzB,IAAK,CAAA,KAAA,GAAQ,MAA0B,cAAA,QAAA;AAAA,KACzC;AAEA,IAAa,QAAA,CAAA,EAAE,IAAM,EAAA,YAAA,EAAc,CAAA;AACnC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AAExD,IAA4B,2BAAA,CAAA;AAAA,MAC1B,IAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAW,EAAA,EAAA;AAAA,MACX,UAAA;AAAA,MACA,cAAA;AAAA,MACA,KAAO,EAAA,QAAA,CAAS,MAAM,KAAA,CAAM,KAAK;AAAA,KAClC,CAAA;AAED,IAAA,SAAS,eAAe,CAAkB,EAAA;AACxC,MAAA,MAAM,SAAS,CAAE,CAAA,MAAA;AACjB,MAAM,MAAA,kBAAA,GAAoC,KAAM,CAAA,IAAA,CAAK,WAAY,CAAA,aAAA,CAAc,OAAO,gBAAiB,CAAA,6BAA6B,CAAK,IAAA,EAAE,CAAA;AAE3I,MAAA,MAAM,mBAAsB,GAAA,kBAAA,CAAmB,SAAU,CAAA,CAAA,IAAA,KAAQ,SAAS,MAAM,CAAA;AAChF,MAAA,IAAI,mBAAwB,KAAA,EAAA;AAC1B,QAAO,OAAA,IAAA;AAET,MAAA,kBAAA;AAAA,QACE,CAAA;AAAA,QACA,MAAA;AAAA,QACA,YAAY,aAAc,CAAA,KAAA;AAAA,QAC1B;AAAA,UACE,iBAAiB,WAAY,CAAA,WAAA;AAAA,UAC7B,GAAA,EAAK,YAAY,SAAU,CAAA,KAAA;AAAA,UAC3B,KAAO,EAAA;AAAA;AACT,OACF;AAAA;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AlertDialog/AlertDialogContent.cjs

@@ -11,7 +11,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "AlertDialogContent",
   props: {
     forceMount: { type: Boolean },
-    trapFocus: { type: Boolean },
     disableOutsidePointerEvents: { type: Boolean },
     asChild: { type: Boolean },
     as: {}

package/dist/AlertDialog/AlertDialogContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogContent.cjs","sources":["../../src/AlertDialog/AlertDialogContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogContentEmits,\n  DialogContentProps,\n} from '@/Dialog'\nimport { createContext, useEmitAsProps, useForwardExpose } from '@/shared'\n\ninterface AlertDialogContentContext {\n  onCancelElementChange: (el: HTMLElement | undefined) => void\n}\n\nexport const [injectAlertDialogContentContext, provideAlertDialogContentContext]\n  = createContext<AlertDialogContentContext>('AlertDialogContent')\n\nexport type AlertDialogContentEmits = DialogContentEmits\nexport interface AlertDialogContentProps extends DialogContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, ref } from 'vue'\nimport { DialogContent } from '@/Dialog'\n\nconst props = defineProps<AlertDialogContentProps>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\nuseForwardExpose()\n\nconst cancelElement = ref<HTMLElement | undefined>()\n\nprovideAlertDialogContentContext({\n  onCancelElementChange: (el) => {\n    cancelElement.value = el\n  },\n})\n</script>\n\n<template>\n  <DialogContent\n    v-bind=\"{ ...props, ...emitsAsProps }\"\n    role=\"alertdialog\"\n    @pointer-down-outside.prevent\n    @interact-outside.prevent\n    @open-auto-focus=\"\n      () => {\n        nextTick(() => {\n          cancelElement?.focus({\n            preventScroll: true,\n          });\n        });\n      }\n    \"\n  >\n    <slot />\n  </DialogContent>\n</template>\n"],"names":["createContext","useEmitAsProps","useForwardExpose","ref"],"mappings":";;;;;;;;AAWO,MAAM,CAAC,+BAAA,EAAiC,gCAAgC,CAAA,GAC3EA,mCAAyC,oBAAoB;;;;;;;;;;;;AAUjE,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,YAAA,GAAeC,qCAAe,KAAK,CAAA;AACzC,IAAiBC,wCAAA,EAAA;AAEjB,IAAA,MAAM,gBAAgBC,OAA6B,EAAA;AAEnD,IAAiC,gCAAA,CAAA;AAAA,MAC/B,qBAAA,EAAuB,CAAC,EAAO,KAAA;AAC7B,QAAA,aAAA,CAAc,KAAQ,GAAA,EAAA;AAAA;AACxB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AlertDialogContent.cjs","sources":["../../src/AlertDialog/AlertDialogContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogContentEmits,\n  DialogContentProps,\n} from '@/Dialog'\nimport { createContext, useEmitAsProps, useForwardExpose } from '@/shared'\n\ninterface AlertDialogContentContext {\n  onCancelElementChange: (el: HTMLElement | undefined) => void\n}\n\nexport const [injectAlertDialogContentContext, provideAlertDialogContentContext]\n  = createContext<AlertDialogContentContext>('AlertDialogContent')\n\nexport type AlertDialogContentEmits = DialogContentEmits\nexport interface AlertDialogContentProps extends DialogContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, ref } from 'vue'\nimport { DialogContent } from '@/Dialog'\n\nconst props = defineProps<AlertDialogContentProps>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\nuseForwardExpose()\n\nconst cancelElement = ref<HTMLElement | undefined>()\n\nprovideAlertDialogContentContext({\n  onCancelElementChange: (el) => {\n    cancelElement.value = el\n  },\n})\n</script>\n\n<template>\n  <DialogContent\n    v-bind=\"{ ...props, ...emitsAsProps }\"\n    role=\"alertdialog\"\n    @pointer-down-outside.prevent\n    @interact-outside.prevent\n    @open-auto-focus=\"\n      () => {\n        nextTick(() => {\n          cancelElement?.focus({\n            preventScroll: true,\n          });\n        });\n      }\n    \"\n  >\n    <slot />\n  </DialogContent>\n</template>\n"],"names":["createContext","useEmitAsProps","useForwardExpose","ref"],"mappings":";;;;;;;;AAWO,MAAM,CAAC,+BAAA,EAAiC,gCAAgC,CAAA,GAC3EA,mCAAyC,oBAAoB;;;;;;;;;;;AAUjE,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,YAAA,GAAeC,qCAAe,KAAK,CAAA;AACzC,IAAiBC,wCAAA,EAAA;AAEjB,IAAA,MAAM,gBAAgBC,OAA6B,EAAA;AAEnD,IAAiC,gCAAA,CAAA;AAAA,MAC/B,qBAAA,EAAuB,CAAC,EAAO,KAAA;AAC7B,QAAA,aAAA,CAAc,KAAQ,GAAA,EAAA;AAAA;AACxB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/AlertDialog/AlertDialogContent.js

@@ -9,7 +9,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "AlertDialogContent",
   props: {
     forceMount: { type: Boolean },
-    trapFocus: { type: Boolean },
     disableOutsidePointerEvents: { type: Boolean },
     asChild: { type: Boolean },
     as: {}

package/dist/AlertDialog/AlertDialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialogContent.js","sources":["../../src/AlertDialog/AlertDialogContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogContentEmits,\n  DialogContentProps,\n} from '@/Dialog'\nimport { createContext, useEmitAsProps, useForwardExpose } from '@/shared'\n\ninterface AlertDialogContentContext {\n  onCancelElementChange: (el: HTMLElement | undefined) => void\n}\n\nexport const [injectAlertDialogContentContext, provideAlertDialogContentContext]\n  = createContext<AlertDialogContentContext>('AlertDialogContent')\n\nexport type AlertDialogContentEmits = DialogContentEmits\nexport interface AlertDialogContentProps extends DialogContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, ref } from 'vue'\nimport { DialogContent } from '@/Dialog'\n\nconst props = defineProps<AlertDialogContentProps>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\nuseForwardExpose()\n\nconst cancelElement = ref<HTMLElement | undefined>()\n\nprovideAlertDialogContentContext({\n  onCancelElementChange: (el) => {\n    cancelElement.value = el\n  },\n})\n</script>\n\n<template>\n  <DialogContent\n    v-bind=\"{ ...props, ...emitsAsProps }\"\n    role=\"alertdialog\"\n    @pointer-down-outside.prevent\n    @interact-outside.prevent\n    @open-auto-focus=\"\n      () => {\n        nextTick(() => {\n          cancelElement?.focus({\n            preventScroll: true,\n          });\n        });\n      }\n    \"\n  >\n    <slot />\n  </DialogContent>\n</template>\n"],"names":[],"mappings":";;;;;;AAWO,MAAM,CAAC,+BAAA,EAAiC,gCAAgC,CAAA,GAC3E,cAAyC,oBAAoB;;;;;;;;;;;;AAUjE,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,YAAA,GAAe,eAAe,KAAK,CAAA;AACzC,IAAiB,gBAAA,EAAA;AAEjB,IAAA,MAAM,gBAAgB,GAA6B,EAAA;AAEnD,IAAiC,gCAAA,CAAA;AAAA,MAC/B,qBAAA,EAAuB,CAAC,EAAO,KAAA;AAC7B,QAAA,aAAA,CAAc,KAAQ,GAAA,EAAA;AAAA;AACxB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"AlertDialogContent.js","sources":["../../src/AlertDialog/AlertDialogContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  DialogContentEmits,\n  DialogContentProps,\n} from '@/Dialog'\nimport { createContext, useEmitAsProps, useForwardExpose } from '@/shared'\n\ninterface AlertDialogContentContext {\n  onCancelElementChange: (el: HTMLElement | undefined) => void\n}\n\nexport const [injectAlertDialogContentContext, provideAlertDialogContentContext]\n  = createContext<AlertDialogContentContext>('AlertDialogContent')\n\nexport type AlertDialogContentEmits = DialogContentEmits\nexport interface AlertDialogContentProps extends DialogContentProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, ref } from 'vue'\nimport { DialogContent } from '@/Dialog'\n\nconst props = defineProps<AlertDialogContentProps>()\nconst emits = defineEmits<AlertDialogContentEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\nuseForwardExpose()\n\nconst cancelElement = ref<HTMLElement | undefined>()\n\nprovideAlertDialogContentContext({\n  onCancelElementChange: (el) => {\n    cancelElement.value = el\n  },\n})\n</script>\n\n<template>\n  <DialogContent\n    v-bind=\"{ ...props, ...emitsAsProps }\"\n    role=\"alertdialog\"\n    @pointer-down-outside.prevent\n    @interact-outside.prevent\n    @open-auto-focus=\"\n      () => {\n        nextTick(() => {\n          cancelElement?.focus({\n            preventScroll: true,\n          });\n        });\n      }\n    \"\n  >\n    <slot />\n  </DialogContent>\n</template>\n"],"names":[],"mappings":";;;;;;AAWO,MAAM,CAAC,+BAAA,EAAiC,gCAAgC,CAAA,GAC3E,cAAyC,oBAAoB;;;;;;;;;;;AAUjE,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,YAAA,GAAe,eAAe,KAAK,CAAA;AACzC,IAAiB,gBAAA,EAAA;AAEjB,IAAA,MAAM,gBAAgB,GAA6B,EAAA;AAEnD,IAAiC,gCAAA,CAAA;AAAA,MAC/B,qBAAA,EAAuB,CAAC,EAAO,KAAA;AAC7B,QAAA,aAAA,CAAc,KAAQ,GAAA,EAAA;AAAA;AACxB,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Combobox/ComboboxCancel.cjs

@@ -16,7 +16,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     shared_useForwardExpose.useForwardExpose();
     const rootContext = Combobox_ComboboxRoot.injectComboboxRootContext();
     function handleClick() {
-      rootContext.filterState.search = "";
+      rootContext.filterSearch.value = "";
       if (rootContext.inputElement.value) {
         rootContext.inputElement.value.value = "";
         rootContext.inputElement.value.focus();

package/dist/Combobox/ComboboxCancel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxCancel.cjs","sources":["../../src/Combobox/ComboboxCancel.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface ComboboxCancelProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nconst props = withDefaults(defineProps<ComboboxCancelProps>(), {\n  as: 'button',\n})\n\nuseForwardExpose()\nconst rootContext = injectComboboxRootContext()\n\nfunction handleClick() {\n  // Reset the search to show all options.\n  rootContext.filterState.search = ''\n\n  if (rootContext.inputElement.value) {\n    rootContext.inputElement.value.value = ''\n    rootContext.inputElement.value.focus()\n  }\n}\n</script>\n\n<template>\n  <Primitive\n    :type=\"as === 'button' ? 'button' : undefined\"\n    v-bind=\"props\"\n    tabindex=\"-1\"\n    @click=\"handleClick\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["useForwardExpose","injectComboboxRootContext"],"mappings":";;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAiBA,wCAAA,EAAA;AACjB,IAAA,MAAM,cAAcC,+CAA0B,EAAA;AAE9C,IAAA,SAAS,WAAc,GAAA;AAErB,MAAA,WAAA,CAAY,YAAY,MAAS,GAAA,EAAA;AAEjC,MAAI,IAAA,WAAA,CAAY,aAAa,KAAO,EAAA;AAClC,QAAY,WAAA,CAAA,YAAA,CAAa,MAAM,KAAQ,GAAA,EAAA;AACvC,QAAY,WAAA,CAAA,YAAA,CAAa,MAAM,KAAM,EAAA;AAAA;AACvC;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ComboboxCancel.cjs","sources":["../../src/Combobox/ComboboxCancel.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface ComboboxCancelProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nconst props = withDefaults(defineProps<ComboboxCancelProps>(), {\n  as: 'button',\n})\n\nuseForwardExpose()\nconst rootContext = injectComboboxRootContext()\n\nfunction handleClick() {\n  // Reset the search to show all options.\n  rootContext.filterSearch.value = ''\n\n  if (rootContext.inputElement.value) {\n    rootContext.inputElement.value.value = ''\n    rootContext.inputElement.value.focus()\n  }\n}\n</script>\n\n<template>\n  <Primitive\n    :type=\"as === 'button' ? 'button' : undefined\"\n    v-bind=\"props\"\n    tabindex=\"-1\"\n    @click=\"handleClick\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["useForwardExpose","injectComboboxRootContext"],"mappings":";;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAiBA,wCAAA,EAAA;AACjB,IAAA,MAAM,cAAcC,+CAA0B,EAAA;AAE9C,IAAA,SAAS,WAAc,GAAA;AAErB,MAAA,WAAA,CAAY,aAAa,KAAQ,GAAA,EAAA;AAEjC,MAAI,IAAA,WAAA,CAAY,aAAa,KAAO,EAAA;AAClC,QAAY,WAAA,CAAA,YAAA,CAAa,MAAM,KAAQ,GAAA,EAAA;AACvC,QAAY,WAAA,CAAA,YAAA,CAAa,MAAM,KAAM,EAAA;AAAA;AACvC;;;;;;;;;;;;;;;;;;;"}

package/dist/Combobox/ComboboxCancel.js

@@ -14,7 +14,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     useForwardExpose();
     const rootContext = injectComboboxRootContext();
     function handleClick() {
-      rootContext.filterState.search = "";
+      rootContext.filterSearch.value = "";
       if (rootContext.inputElement.value) {
         rootContext.inputElement.value.value = "";
         rootContext.inputElement.value.focus();

package/dist/Combobox/ComboboxCancel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxCancel.js","sources":["../../src/Combobox/ComboboxCancel.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface ComboboxCancelProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nconst props = withDefaults(defineProps<ComboboxCancelProps>(), {\n  as: 'button',\n})\n\nuseForwardExpose()\nconst rootContext = injectComboboxRootContext()\n\nfunction handleClick() {\n  // Reset the search to show all options.\n  rootContext.filterState.search = ''\n\n  if (rootContext.inputElement.value) {\n    rootContext.inputElement.value.value = ''\n    rootContext.inputElement.value.focus()\n  }\n}\n</script>\n\n<template>\n  <Primitive\n    :type=\"as === 'button' ? 'button' : undefined\"\n    v-bind=\"props\"\n    tabindex=\"-1\"\n    @click=\"handleClick\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAE9C,IAAA,SAAS,WAAc,GAAA;AAErB,MAAA,WAAA,CAAY,YAAY,MAAS,GAAA,EAAA;AAEjC,MAAI,IAAA,WAAA,CAAY,aAAa,KAAO,EAAA;AAClC,QAAY,WAAA,CAAA,YAAA,CAAa,MAAM,KAAQ,GAAA,EAAA;AACvC,QAAY,WAAA,CAAA,YAAA,CAAa,MAAM,KAAM,EAAA;AAAA;AACvC;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ComboboxCancel.js","sources":["../../src/Combobox/ComboboxCancel.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\n\nexport interface ComboboxCancelProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nconst props = withDefaults(defineProps<ComboboxCancelProps>(), {\n  as: 'button',\n})\n\nuseForwardExpose()\nconst rootContext = injectComboboxRootContext()\n\nfunction handleClick() {\n  // Reset the search to show all options.\n  rootContext.filterSearch.value = ''\n\n  if (rootContext.inputElement.value) {\n    rootContext.inputElement.value.value = ''\n    rootContext.inputElement.value.focus()\n  }\n}\n</script>\n\n<template>\n  <Primitive\n    :type=\"as === 'button' ? 'button' : undefined\"\n    v-bind=\"props\"\n    tabindex=\"-1\"\n    @click=\"handleClick\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAiB,gBAAA,EAAA;AACjB,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAE9C,IAAA,SAAS,WAAc,GAAA;AAErB,MAAA,WAAA,CAAY,aAAa,KAAQ,GAAA,EAAA;AAEjC,MAAI,IAAA,WAAA,CAAY,aAAa,KAAO,EAAA;AAClC,QAAY,WAAA,CAAA,YAAA,CAAa,MAAM,KAAQ,GAAA,EAAA;AACvC,QAAY,WAAA,CAAA,YAAA,CAAa,MAAM,KAAM,EAAA;AAAA;AACvC;;;;;;;;;;;;;;;;;;;"}

package/dist/Combobox/ComboboxEmpty.cjs

@@ -14,7 +14,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const rootContext = Combobox_ComboboxRoot.injectComboboxRootContext();
     const isRender = vue.computed(
-      () => rootContext.ignoreFilter.value ? rootContext.allItems.value.size === 0 : !!rootContext.filterState.search && rootContext.filterState.filtered.count === 0
+      () => rootContext.ignoreFilter.value ? rootContext.allItems.value.size === 0 : rootContext.filterState.value.count === 0
     );
     return (_ctx, _cache) => {
       return isRender.value ? (vue.openBlock(), vue.createBlock(vue.unref(Primitive_Primitive.Primitive), vue.normalizeProps(vue.mergeProps({ key: 0 }, props)), {

package/dist/Combobox/ComboboxEmpty.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxEmpty.cjs","sources":["../../src/Combobox/ComboboxEmpty.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { computed } from 'vue'\n\nexport interface ComboboxEmptyProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nconst props = defineProps<ComboboxEmptyProps>()\nconst rootContext = injectComboboxRootContext()\n\nconst isRender = computed(() => rootContext.ignoreFilter.value\n  ? rootContext.allItems.value.size === 0\n  : !!rootContext.filterState.search && rootContext.filterState.filtered.count === 0,\n)\n</script>\n\n<template>\n  <Primitive\n    v-if=\"isRender\"\n    v-bind=\"props\"\n  >\n    <slot>No options</slot>\n  </Primitive>\n</template>\n"],"names":["injectComboboxRootContext","computed"],"mappings":";;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,cAAcA,+CAA0B,EAAA;AAE9C,IAAA,MAAM,QAAW,GAAAC,YAAA;AAAA,MAAS,MAAM,WAAY,CAAA,YAAA,CAAa,KACrD,GAAA,WAAA,CAAY,SAAS,KAAM,CAAA,IAAA,KAAS,CACpC,GAAA,CAAC,CAAC,WAAY,CAAA,WAAA,CAAY,UAAU,WAAY,CAAA,WAAA,CAAY,SAAS,KAAU,KAAA;AAAA,KACnF;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ComboboxEmpty.cjs","sources":["../../src/Combobox/ComboboxEmpty.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { computed } from 'vue'\n\nexport interface ComboboxEmptyProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nconst props = defineProps<ComboboxEmptyProps>()\nconst rootContext = injectComboboxRootContext()\n\nconst isRender = computed(() => rootContext.ignoreFilter.value\n  ? rootContext.allItems.value.size === 0\n  : rootContext.filterState.value.count === 0,\n)\n</script>\n\n<template>\n  <Primitive\n    v-if=\"isRender\"\n    v-bind=\"props\"\n  >\n    <slot>No options</slot>\n  </Primitive>\n</template>\n"],"names":["injectComboboxRootContext","computed"],"mappings":";;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,cAAcA,+CAA0B,EAAA;AAE9C,IAAA,MAAM,QAAW,GAAAC,YAAA;AAAA,MAAS,MAAM,WAAA,CAAY,YAAa,CAAA,KAAA,GACrD,WAAY,CAAA,QAAA,CAAS,KAAM,CAAA,IAAA,KAAS,CACpC,GAAA,WAAA,CAAY,WAAY,CAAA,KAAA,CAAM,KAAU,KAAA;AAAA,KAC5C;;;;;;;;;;;;;;;;"}

package/dist/Combobox/ComboboxEmpty.js

@@ -12,7 +12,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const rootContext = injectComboboxRootContext();
     const isRender = computed(
-      () => rootContext.ignoreFilter.value ? rootContext.allItems.value.size === 0 : !!rootContext.filterState.search && rootContext.filterState.filtered.count === 0
+      () => rootContext.ignoreFilter.value ? rootContext.allItems.value.size === 0 : rootContext.filterState.value.count === 0
     );
     return (_ctx, _cache) => {
       return isRender.value ? (openBlock(), createBlock(unref(Primitive), normalizeProps(mergeProps({ key: 0 }, props)), {

package/dist/Combobox/ComboboxEmpty.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxEmpty.js","sources":["../../src/Combobox/ComboboxEmpty.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { computed } from 'vue'\n\nexport interface ComboboxEmptyProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nconst props = defineProps<ComboboxEmptyProps>()\nconst rootContext = injectComboboxRootContext()\n\nconst isRender = computed(() => rootContext.ignoreFilter.value\n  ? rootContext.allItems.value.size === 0\n  : !!rootContext.filterState.search && rootContext.filterState.filtered.count === 0,\n)\n</script>\n\n<template>\n  <Primitive\n    v-if=\"isRender\"\n    v-bind=\"props\"\n  >\n    <slot>No options</slot>\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAE9C,IAAA,MAAM,QAAW,GAAA,QAAA;AAAA,MAAS,MAAM,WAAY,CAAA,YAAA,CAAa,KACrD,GAAA,WAAA,CAAY,SAAS,KAAM,CAAA,IAAA,KAAS,CACpC,GAAA,CAAC,CAAC,WAAY,CAAA,WAAA,CAAY,UAAU,WAAY,CAAA,WAAA,CAAY,SAAS,KAAU,KAAA;AAAA,KACnF;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ComboboxEmpty.js","sources":["../../src/Combobox/ComboboxEmpty.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { computed } from 'vue'\n\nexport interface ComboboxEmptyProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nconst props = defineProps<ComboboxEmptyProps>()\nconst rootContext = injectComboboxRootContext()\n\nconst isRender = computed(() => rootContext.ignoreFilter.value\n  ? rootContext.allItems.value.size === 0\n  : rootContext.filterState.value.count === 0,\n)\n</script>\n\n<template>\n  <Primitive\n    v-if=\"isRender\"\n    v-bind=\"props\"\n  >\n    <slot>No options</slot>\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAE9C,IAAA,MAAM,QAAW,GAAA,QAAA;AAAA,MAAS,MAAM,WAAA,CAAY,YAAa,CAAA,KAAA,GACrD,WAAY,CAAA,QAAA,CAAS,KAAM,CAAA,IAAA,KAAS,CACpC,GAAA,WAAA,CAAY,WAAY,CAAA,KAAA,CAAM,KAAU,KAAA;AAAA,KAC5C;;;;;;;;;;;;;;;;"}

package/dist/Combobox/ComboboxGroup.cjs

@@ -17,7 +17,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const id = shared_useId.useId(void 0, "reka-combobox-group");
     const rootContext = Combobox_ComboboxRoot.injectComboboxRootContext();
-    const isRender = vue.computed(() => rootContext.ignoreFilter.value ? true : !rootContext.filterState.search ? true : rootContext.filterState.filtered.groups.has(id));
+    const isRender = vue.computed(() => rootContext.ignoreFilter.value ? true : !rootContext.filterSearch.value ? true : rootContext.filterState.value.groups.has(id));
     const context = provideComboboxGroupContext({
       id,
       labelId: ""

package/dist/Combobox/ComboboxGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxGroup.cjs","sources":["../../src/Combobox/ComboboxGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ListboxGroupProps } from '@/Listbox'\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport { createContext, useId } from '@/shared'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nexport interface ComboboxGroupProps extends ListboxGroupProps {}\n\ntype ComboboxGroupContext = {\n  id: string\n  labelId: string\n}\n\nexport const [injectComboboxGroupContext, provideComboboxGroupContext]\n  = createContext<ComboboxGroupContext>('ComboboxGroup')\n</script>\n\n<script setup lang=\"ts\">\nimport { ListboxGroup } from '@/Listbox'\n\nconst props = defineProps<ComboboxGroupProps>()\nconst id = useId(undefined, 'reka-combobox-group')\nconst rootContext = injectComboboxRootContext()\n\nconst isRender = computed(() => rootContext.ignoreFilter.value ? true : !rootContext.filterState.search ? true : rootContext.filterState.filtered.groups.has(id))\n\nconst context = provideComboboxGroupContext({\n  id,\n  labelId: '',\n})\n\nonMounted(() => {\n  if (!rootContext.allGroups.value.has(id))\n    rootContext.allGroups.value.set(id, new Set())\n})\nonUnmounted(() => {\n  rootContext.allGroups.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxGroup\n    :id=\"id\"\n    :aria-labelledby=\"context.labelId\"\n    v-bind=\"props\"\n    :hidden=\"isRender ? undefined : true\"\n  >\n    <slot />\n  </ListboxGroup>\n</template>\n"],"names":["createContext","useId","injectComboboxRootContext","computed","onMounted","onUnmounted"],"mappings":";;;;;;;;AAaO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjEA,mCAAoC,eAAe;;;;;;;;AAMvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAM,MAAA,EAAA,GAAKC,kBAAM,CAAA,MAAA,EAAW,qBAAqB,CAAA;AACjD,IAAA,MAAM,cAAcC,+CAA0B,EAAA;AAE9C,IAAA,MAAM,WAAWC,YAAS,CAAA,MAAM,YAAY,YAAa,CAAA,KAAA,GAAQ,OAAO,CAAC,WAAA,CAAY,WAAY,CAAA,MAAA,GAAS,OAAO,WAAY,CAAA,WAAA,CAAY,SAAS,MAAO,CAAA,GAAA,CAAI,EAAE,CAAC,CAAA;AAEhK,IAAA,MAAM,UAAU,2BAA4B,CAAA;AAAA,MAC1C,EAAA;AAAA,MACA,OAAS,EAAA;AAAA,KACV,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,WAAA,CAAY,SAAU,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AACrC,QAAA,WAAA,CAAY,UAAU,KAAM,CAAA,GAAA,CAAI,EAAI,kBAAA,IAAI,KAAK,CAAA;AAAA,KAChD,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAY,WAAA,CAAA,SAAA,CAAU,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,KACtC,CAAA;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ComboboxGroup.cjs","sources":["../../src/Combobox/ComboboxGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ListboxGroupProps } from '@/Listbox'\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport { createContext, useId } from '@/shared'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nexport interface ComboboxGroupProps extends ListboxGroupProps {}\n\ntype ComboboxGroupContext = {\n  id: string\n  labelId: string\n}\n\nexport const [injectComboboxGroupContext, provideComboboxGroupContext]\n  = createContext<ComboboxGroupContext>('ComboboxGroup')\n</script>\n\n<script setup lang=\"ts\">\nimport { ListboxGroup } from '@/Listbox'\n\nconst props = defineProps<ComboboxGroupProps>()\nconst id = useId(undefined, 'reka-combobox-group')\nconst rootContext = injectComboboxRootContext()\n\nconst isRender = computed(() => rootContext.ignoreFilter.value ? true : !rootContext.filterSearch.value ? true : rootContext.filterState.value.groups.has(id))\n\nconst context = provideComboboxGroupContext({\n  id,\n  labelId: '',\n})\n\nonMounted(() => {\n  if (!rootContext.allGroups.value.has(id))\n    rootContext.allGroups.value.set(id, new Set())\n})\nonUnmounted(() => {\n  rootContext.allGroups.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxGroup\n    :id=\"id\"\n    :aria-labelledby=\"context.labelId\"\n    v-bind=\"props\"\n    :hidden=\"isRender ? undefined : true\"\n  >\n    <slot />\n  </ListboxGroup>\n</template>\n"],"names":["createContext","useId","injectComboboxRootContext","computed","onMounted","onUnmounted"],"mappings":";;;;;;;;AAaO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjEA,mCAAoC,eAAe;;;;;;;;AAMvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAM,MAAA,EAAA,GAAKC,kBAAM,CAAA,MAAA,EAAW,qBAAqB,CAAA;AACjD,IAAA,MAAM,cAAcC,+CAA0B,EAAA;AAE9C,IAAA,MAAM,WAAWC,YAAS,CAAA,MAAM,YAAY,YAAa,CAAA,KAAA,GAAQ,OAAO,CAAC,WAAA,CAAY,YAAa,CAAA,KAAA,GAAQ,OAAO,WAAY,CAAA,WAAA,CAAY,MAAM,MAAO,CAAA,GAAA,CAAI,EAAE,CAAC,CAAA;AAE7J,IAAA,MAAM,UAAU,2BAA4B,CAAA;AAAA,MAC1C,EAAA;AAAA,MACA,OAAS,EAAA;AAAA,KACV,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,WAAA,CAAY,SAAU,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AACrC,QAAA,WAAA,CAAY,UAAU,KAAM,CAAA,GAAA,CAAI,EAAI,kBAAA,IAAI,KAAK,CAAA;AAAA,KAChD,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAY,WAAA,CAAA,SAAA,CAAU,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,KACtC,CAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/Combobox/ComboboxGroup.js

@@ -15,7 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const props = __props;
     const id = useId(void 0, "reka-combobox-group");
     const rootContext = injectComboboxRootContext();
-    const isRender = computed(() => rootContext.ignoreFilter.value ? true : !rootContext.filterState.search ? true : rootContext.filterState.filtered.groups.has(id));
+    const isRender = computed(() => rootContext.ignoreFilter.value ? true : !rootContext.filterSearch.value ? true : rootContext.filterState.value.groups.has(id));
     const context = provideComboboxGroupContext({
       id,
       labelId: ""

package/dist/Combobox/ComboboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxGroup.js","sources":["../../src/Combobox/ComboboxGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ListboxGroupProps } from '@/Listbox'\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport { createContext, useId } from '@/shared'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nexport interface ComboboxGroupProps extends ListboxGroupProps {}\n\ntype ComboboxGroupContext = {\n  id: string\n  labelId: string\n}\n\nexport const [injectComboboxGroupContext, provideComboboxGroupContext]\n  = createContext<ComboboxGroupContext>('ComboboxGroup')\n</script>\n\n<script setup lang=\"ts\">\nimport { ListboxGroup } from '@/Listbox'\n\nconst props = defineProps<ComboboxGroupProps>()\nconst id = useId(undefined, 'reka-combobox-group')\nconst rootContext = injectComboboxRootContext()\n\nconst isRender = computed(() => rootContext.ignoreFilter.value ? true : !rootContext.filterState.search ? true : rootContext.filterState.filtered.groups.has(id))\n\nconst context = provideComboboxGroupContext({\n  id,\n  labelId: '',\n})\n\nonMounted(() => {\n  if (!rootContext.allGroups.value.has(id))\n    rootContext.allGroups.value.set(id, new Set())\n})\nonUnmounted(() => {\n  rootContext.allGroups.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxGroup\n    :id=\"id\"\n    :aria-labelledby=\"context.labelId\"\n    v-bind=\"props\"\n    :hidden=\"isRender ? undefined : true\"\n  >\n    <slot />\n  </ListboxGroup>\n</template>\n"],"names":[],"mappings":";;;;;;AAaO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjE,cAAoC,eAAe;;;;;;;;AAMvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAM,MAAA,EAAA,GAAK,KAAM,CAAA,MAAA,EAAW,qBAAqB,CAAA;AACjD,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAE9C,IAAA,MAAM,WAAW,QAAS,CAAA,MAAM,YAAY,YAAa,CAAA,KAAA,GAAQ,OAAO,CAAC,WAAA,CAAY,WAAY,CAAA,MAAA,GAAS,OAAO,WAAY,CAAA,WAAA,CAAY,SAAS,MAAO,CAAA,GAAA,CAAI,EAAE,CAAC,CAAA;AAEhK,IAAA,MAAM,UAAU,2BAA4B,CAAA;AAAA,MAC1C,EAAA;AAAA,MACA,OAAS,EAAA;AAAA,KACV,CAAA;AAED,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,WAAA,CAAY,SAAU,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AACrC,QAAA,WAAA,CAAY,UAAU,KAAM,CAAA,GAAA,CAAI,EAAI,kBAAA,IAAI,KAAK,CAAA;AAAA,KAChD,CAAA;AACD,IAAA,WAAA,CAAY,MAAM;AAChB,MAAY,WAAA,CAAA,SAAA,CAAU,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,KACtC,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ComboboxGroup.js","sources":["../../src/Combobox/ComboboxGroup.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ListboxGroupProps } from '@/Listbox'\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport { createContext, useId } from '@/shared'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nexport interface ComboboxGroupProps extends ListboxGroupProps {}\n\ntype ComboboxGroupContext = {\n  id: string\n  labelId: string\n}\n\nexport const [injectComboboxGroupContext, provideComboboxGroupContext]\n  = createContext<ComboboxGroupContext>('ComboboxGroup')\n</script>\n\n<script setup lang=\"ts\">\nimport { ListboxGroup } from '@/Listbox'\n\nconst props = defineProps<ComboboxGroupProps>()\nconst id = useId(undefined, 'reka-combobox-group')\nconst rootContext = injectComboboxRootContext()\n\nconst isRender = computed(() => rootContext.ignoreFilter.value ? true : !rootContext.filterSearch.value ? true : rootContext.filterState.value.groups.has(id))\n\nconst context = provideComboboxGroupContext({\n  id,\n  labelId: '',\n})\n\nonMounted(() => {\n  if (!rootContext.allGroups.value.has(id))\n    rootContext.allGroups.value.set(id, new Set())\n})\nonUnmounted(() => {\n  rootContext.allGroups.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxGroup\n    :id=\"id\"\n    :aria-labelledby=\"context.labelId\"\n    v-bind=\"props\"\n    :hidden=\"isRender ? undefined : true\"\n  >\n    <slot />\n  </ListboxGroup>\n</template>\n"],"names":[],"mappings":";;;;;;AAaO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjE,cAAoC,eAAe;;;;;;;;AAMvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAM,MAAA,EAAA,GAAK,KAAM,CAAA,MAAA,EAAW,qBAAqB,CAAA;AACjD,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAE9C,IAAA,MAAM,WAAW,QAAS,CAAA,MAAM,YAAY,YAAa,CAAA,KAAA,GAAQ,OAAO,CAAC,WAAA,CAAY,YAAa,CAAA,KAAA,GAAQ,OAAO,WAAY,CAAA,WAAA,CAAY,MAAM,MAAO,CAAA,GAAA,CAAI,EAAE,CAAC,CAAA;AAE7J,IAAA,MAAM,UAAU,2BAA4B,CAAA;AAAA,MAC1C,EAAA;AAAA,MACA,OAAS,EAAA;AAAA,KACV,CAAA;AAED,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,WAAA,CAAY,SAAU,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AACrC,QAAA,WAAA,CAAY,UAAU,KAAM,CAAA,GAAA,CAAI,EAAI,kBAAA,IAAI,KAAK,CAAA;AAAA,KAChD,CAAA;AACD,IAAA,WAAA,CAAY,MAAM;AAChB,MAAY,WAAA,CAAA,SAAA,CAAU,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,KACtC,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/Combobox/ComboboxInput.cjs

@@ -41,12 +41,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         rootContext.onOpenChange(true);
         vue.nextTick(() => {
           if (target.value) {
-            rootContext.filterState.search = target.value;
-            listboxContext.highlightFirstItem(event);
+            rootContext.filterSearch.value = target.value;
+            listboxContext.highlightFirstItem();
           }
         });
       } else {
-        rootContext.filterState.search = target.value;
+        rootContext.filterSearch.value = target.value;
       }
     }
     function resetSearchTerm() {
@@ -71,14 +71,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (!rootContext.isUserInputted.value && rootContext.resetSearchTermOnSelect.value)
         resetSearchTerm();
     }, { immediate: true, deep: true });
-    vue.watch(
-      () => props.modelValue,
-      () => {
-        if (props.modelValue !== void 0) {
-          rootContext.filterState.search = props.modelValue;
-        }
+    vue.watch(rootContext.filterState, () => {
+      if (!rootContext.isVirtual.value) {
+        listboxContext.highlightFirstItem();
       }
-    );
+    });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(Listbox_ListboxFilter._sfc_main), {
         ref_key: "primitiveElement",

package/dist/Combobox/ComboboxInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.cjs","sources":["../../src/Combobox/ComboboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ListboxFilterEmits, ListboxFilterProps } from '@/Listbox'\nimport { useVModel } from '@vueuse/core'\nimport { nextTick, onMounted, watch } from 'vue'\nimport { usePrimitiveElement } from '@/Primitive'\n\nexport type ComboboxInputEmits = ListboxFilterEmits\nexport interface ComboboxInputProps extends ListboxFilterProps {\n  /** The display value of input for selected item. Does not work with `multiple`. */\n  displayValue?: (val: any) => string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ListboxFilter } from '@/Listbox'\nimport { injectListboxRootContext } from '@/Listbox/ListboxRoot.vue'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nconst props = withDefaults(defineProps<ComboboxInputProps>(), {\n  as: 'input',\n})\nconst emits = defineEmits<ComboboxInputEmits>()\n\nconst rootContext = injectComboboxRootContext()\nconst listboxContext = injectListboxRootContext()\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: (props.modelValue === undefined) as false,\n})\n\nonMounted(() => {\n  if (currentElement.value)\n    rootContext.onInputElementChange(currentElement.value as HTMLInputElement)\n})\n\nfunction handleKeyDown(ev: KeyboardEvent) {\n  if (!rootContext.open.value)\n    rootContext.onOpenChange(true)\n}\n\nfunction handleInput(event: InputEvent) {\n  const target = event.target as HTMLInputElement\n  if (!rootContext.open.value) {\n    rootContext.onOpenChange(true)\n    nextTick(() => {\n      if (target.value) {\n        rootContext.filterState.search = target.value\n        listboxContext.highlightFirstItem(event)\n      }\n    })\n  }\n  else {\n    rootContext.filterState.search = target.value\n  }\n}\n\nfunction resetSearchTerm() {\n  const rootModelValue = rootContext.modelValue.value\n\n  if (props.displayValue) {\n    modelValue.value = props.displayValue(rootModelValue)\n  }\n  else if (!rootContext.multiple.value && rootModelValue && !Array.isArray(rootModelValue)) {\n    if (typeof rootModelValue !== 'object')\n      modelValue.value = rootModelValue.toString()\n    else modelValue.value = ''\n  }\n  else {\n    modelValue.value = ''\n  }\n\n  nextTick(() => {\n    // Temporary force reassign\n    // eslint-disable-next-line no-self-assign\n    modelValue.value = modelValue.value\n  })\n}\n\nrootContext.onResetSearchTerm(() => {\n  resetSearchTerm()\n})\n\nwatch(rootContext.modelValue, async () => {\n  if (!rootContext.isUserInputted.value && rootContext.resetSearchTermOnSelect.value)\n    resetSearchTerm()\n}, { immediate: true, deep: true })\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (props.modelValue !== undefined) {\n      rootContext.filterState.search = props.modelValue\n    }\n  },\n)\n</script>\n\n<template>\n  <ListboxFilter\n    ref=\"primitiveElement\"\n    v-model=\"modelValue\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :auto-focus=\"autoFocus\"\n    :aria-expanded=\"rootContext.open.value\"\n    :aria-controls=\"rootContext.contentId\"\n    aria-autocomplete=\"list\"\n    role=\"combobox\"\n    autocomplete=\"false\"\n    @input=\"handleInput\"\n    @keydown.down.up.prevent=\"handleKeyDown\"\n  >\n    <slot />\n  </ListboxFilter>\n</template>\n"],"names":["injectComboboxRootContext","injectListboxRootContext","usePrimitiveElement","useVModel","onMounted","nextTick","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAcA,+CAA0B,EAAA;AAC9C,IAAA,MAAM,iBAAiBC,4CAAyB,EAAA;AAChD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AAEjE,IAAA,MAAM,UAAa,GAAAC,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAY,WAAA,CAAA,oBAAA,CAAqB,eAAe,KAAyB,CAAA;AAAA,KAC5E,CAAA;AAED,IAAA,SAAS,cAAc,EAAmB,EAAA;AACxC,MAAI,IAAA,CAAC,YAAY,IAAK,CAAA,KAAA;AACpB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAAA;AAGjC,IAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AACrB,MAAI,IAAA,CAAC,WAAY,CAAA,IAAA,CAAK,KAAO,EAAA;AAC3B,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAC7B,QAAAC,YAAA,CAAS,MAAM;AACb,UAAA,IAAI,OAAO,KAAO,EAAA;AAChB,YAAY,WAAA,CAAA,WAAA,CAAY,SAAS,MAAO,CAAA,KAAA;AACxC,YAAA,cAAA,CAAe,mBAAmB,KAAK,CAAA;AAAA;AACzC,SACD,CAAA;AAAA,OAEE,MAAA;AACH,QAAY,WAAA,CAAA,WAAA,CAAY,SAAS,MAAO,CAAA,KAAA;AAAA;AAC1C;AAGF,IAAA,SAAS,eAAkB,GAAA;AACzB,MAAM,MAAA,cAAA,GAAiB,YAAY,UAAW,CAAA,KAAA;AAE9C,MAAA,IAAI,MAAM,YAAc,EAAA;AACtB,QAAW,UAAA,CAAA,KAAA,GAAQ,KAAM,CAAA,YAAA,CAAa,cAAc,CAAA;AAAA,OACtD,MAAA,IACS,CAAC,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,kBAAkB,CAAC,KAAA,CAAM,OAAQ,CAAA,cAAc,CAAG,EAAA;AACxF,QAAA,IAAI,OAAO,cAAmB,KAAA,QAAA;AAC5B,UAAW,UAAA,CAAA,KAAA,GAAQ,eAAe,QAAS,EAAA;AAAA,wBAC7B,KAAQ,GAAA,EAAA;AAAA,OAErB,MAAA;AACH,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AAGrB,MAAAA,YAAA,CAAS,MAAM;AAGb,QAAA,UAAA,CAAW,QAAQ,UAAW,CAAA,KAAA;AAAA,OAC/B,CAAA;AAAA;AAGH,IAAA,WAAA,CAAY,kBAAkB,MAAM;AAClC,MAAgB,eAAA,EAAA;AAAA,KACjB,CAAA;AAED,IAAMC,SAAA,CAAA,WAAA,CAAY,YAAY,YAAY;AACxC,MAAA,IAAI,CAAC,WAAA,CAAY,cAAe,CAAA,KAAA,IAAS,YAAY,uBAAwB,CAAA,KAAA;AAC3E,QAAgB,eAAA,EAAA;AAAA,OACjB,EAAE,SAAA,EAAW,IAAM,EAAA,IAAA,EAAM,MAAM,CAAA;AAElC,IAAAA,SAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,MAAM;AACJ,QAAI,IAAA,KAAA,CAAM,eAAe,MAAW,EAAA;AAClC,UAAY,WAAA,CAAA,WAAA,CAAY,SAAS,KAAM,CAAA,UAAA;AAAA;AACzC;AACF,KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ComboboxInput.cjs","sources":["../../src/Combobox/ComboboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ListboxFilterEmits, ListboxFilterProps } from '@/Listbox'\nimport { useVModel } from '@vueuse/core'\nimport { nextTick, onMounted, watch } from 'vue'\nimport { usePrimitiveElement } from '@/Primitive'\n\nexport type ComboboxInputEmits = ListboxFilterEmits\nexport interface ComboboxInputProps extends ListboxFilterProps {\n  /** The display value of input for selected item. Does not work with `multiple`. */\n  displayValue?: (val: any) => string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ListboxFilter } from '@/Listbox'\nimport { injectListboxRootContext } from '@/Listbox/ListboxRoot.vue'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nconst props = withDefaults(defineProps<ComboboxInputProps>(), {\n  as: 'input',\n})\nconst emits = defineEmits<ComboboxInputEmits>()\n\nconst rootContext = injectComboboxRootContext()\nconst listboxContext = injectListboxRootContext()\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: (props.modelValue === undefined) as false,\n})\n\nonMounted(() => {\n  if (currentElement.value)\n    rootContext.onInputElementChange(currentElement.value as HTMLInputElement)\n})\n\nfunction handleKeyDown(ev: KeyboardEvent) {\n  if (!rootContext.open.value)\n    rootContext.onOpenChange(true)\n}\n\nfunction handleInput(event: InputEvent) {\n  const target = event.target as HTMLInputElement\n  if (!rootContext.open.value) {\n    rootContext.onOpenChange(true)\n    nextTick(() => {\n      if (target.value) {\n        rootContext.filterSearch.value = target.value\n        listboxContext.highlightFirstItem()\n      }\n    })\n  }\n  else {\n    rootContext.filterSearch.value = target.value\n  }\n}\n\nfunction resetSearchTerm() {\n  const rootModelValue = rootContext.modelValue.value\n\n  if (props.displayValue) {\n    modelValue.value = props.displayValue(rootModelValue)\n  }\n  else if (!rootContext.multiple.value && rootModelValue && !Array.isArray(rootModelValue)) {\n    if (typeof rootModelValue !== 'object')\n      modelValue.value = rootModelValue.toString()\n    else modelValue.value = ''\n  }\n  else {\n    modelValue.value = ''\n  }\n\n  nextTick(() => {\n    // Temporary force reassign\n    // eslint-disable-next-line no-self-assign\n    modelValue.value = modelValue.value\n  })\n}\n\nrootContext.onResetSearchTerm(() => {\n  resetSearchTerm()\n})\n\nwatch(rootContext.modelValue, async () => {\n  if (!rootContext.isUserInputted.value && rootContext.resetSearchTermOnSelect.value)\n    resetSearchTerm()\n}, { immediate: true, deep: true })\n\nwatch(rootContext.filterState, () => {\n  // we exclude virtualized list as the state would be constantly updated\n  if (!rootContext.isVirtual.value) {\n    listboxContext.highlightFirstItem()\n  }\n})\n</script>\n\n<template>\n  <ListboxFilter\n    ref=\"primitiveElement\"\n    v-model=\"modelValue\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :auto-focus=\"autoFocus\"\n    :aria-expanded=\"rootContext.open.value\"\n    :aria-controls=\"rootContext.contentId\"\n    aria-autocomplete=\"list\"\n    role=\"combobox\"\n    autocomplete=\"false\"\n    @input=\"handleInput\"\n    @keydown.down.up.prevent=\"handleKeyDown\"\n  >\n    <slot />\n  </ListboxFilter>\n</template>\n"],"names":["injectComboboxRootContext","injectListboxRootContext","usePrimitiveElement","useVModel","onMounted","nextTick","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAcA,+CAA0B,EAAA;AAC9C,IAAA,MAAM,iBAAiBC,4CAAyB,EAAA;AAChD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AAEjE,IAAA,MAAM,UAAa,GAAAC,cAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAY,WAAA,CAAA,oBAAA,CAAqB,eAAe,KAAyB,CAAA;AAAA,KAC5E,CAAA;AAED,IAAA,SAAS,cAAc,EAAmB,EAAA;AACxC,MAAI,IAAA,CAAC,YAAY,IAAK,CAAA,KAAA;AACpB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAAA;AAGjC,IAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AACrB,MAAI,IAAA,CAAC,WAAY,CAAA,IAAA,CAAK,KAAO,EAAA;AAC3B,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAC7B,QAAAC,YAAA,CAAS,MAAM;AACb,UAAA,IAAI,OAAO,KAAO,EAAA;AAChB,YAAY,WAAA,CAAA,YAAA,CAAa,QAAQ,MAAO,CAAA,KAAA;AACxC,YAAA,cAAA,CAAe,kBAAmB,EAAA;AAAA;AACpC,SACD,CAAA;AAAA,OAEE,MAAA;AACH,QAAY,WAAA,CAAA,YAAA,CAAa,QAAQ,MAAO,CAAA,KAAA;AAAA;AAC1C;AAGF,IAAA,SAAS,eAAkB,GAAA;AACzB,MAAM,MAAA,cAAA,GAAiB,YAAY,UAAW,CAAA,KAAA;AAE9C,MAAA,IAAI,MAAM,YAAc,EAAA;AACtB,QAAW,UAAA,CAAA,KAAA,GAAQ,KAAM,CAAA,YAAA,CAAa,cAAc,CAAA;AAAA,OACtD,MAAA,IACS,CAAC,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,kBAAkB,CAAC,KAAA,CAAM,OAAQ,CAAA,cAAc,CAAG,EAAA;AACxF,QAAA,IAAI,OAAO,cAAmB,KAAA,QAAA;AAC5B,UAAW,UAAA,CAAA,KAAA,GAAQ,eAAe,QAAS,EAAA;AAAA,wBAC7B,KAAQ,GAAA,EAAA;AAAA,OAErB,MAAA;AACH,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AAGrB,MAAAA,YAAA,CAAS,MAAM;AAGb,QAAA,UAAA,CAAW,QAAQ,UAAW,CAAA,KAAA;AAAA,OAC/B,CAAA;AAAA;AAGH,IAAA,WAAA,CAAY,kBAAkB,MAAM;AAClC,MAAgB,eAAA,EAAA;AAAA,KACjB,CAAA;AAED,IAAMC,SAAA,CAAA,WAAA,CAAY,YAAY,YAAY;AACxC,MAAA,IAAI,CAAC,WAAA,CAAY,cAAe,CAAA,KAAA,IAAS,YAAY,uBAAwB,CAAA,KAAA;AAC3E,QAAgB,eAAA,EAAA;AAAA,OACjB,EAAE,SAAA,EAAW,IAAM,EAAA,IAAA,EAAM,MAAM,CAAA;AAElC,IAAMA,SAAA,CAAA,WAAA,CAAY,aAAa,MAAM;AAEnC,MAAI,IAAA,CAAC,WAAY,CAAA,SAAA,CAAU,KAAO,EAAA;AAChC,QAAA,cAAA,CAAe,kBAAmB,EAAA;AAAA;AACpC,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Combobox/ComboboxInput.js

@@ -39,12 +39,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         rootContext.onOpenChange(true);
         nextTick(() => {
           if (target.value) {
-            rootContext.filterState.search = target.value;
-            listboxContext.highlightFirstItem(event);
+            rootContext.filterSearch.value = target.value;
+            listboxContext.highlightFirstItem();
           }
         });
       } else {
-        rootContext.filterState.search = target.value;
+        rootContext.filterSearch.value = target.value;
       }
     }
     function resetSearchTerm() {
@@ -69,14 +69,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!rootContext.isUserInputted.value && rootContext.resetSearchTermOnSelect.value)
         resetSearchTerm();
     }, { immediate: true, deep: true });
-    watch(
-      () => props.modelValue,
-      () => {
-        if (props.modelValue !== void 0) {
-          rootContext.filterState.search = props.modelValue;
-        }
+    watch(rootContext.filterState, () => {
+      if (!rootContext.isVirtual.value) {
+        listboxContext.highlightFirstItem();
       }
-    );
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(_sfc_main$1), {
         ref_key: "primitiveElement",

package/dist/Combobox/ComboboxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.js","sources":["../../src/Combobox/ComboboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ListboxFilterEmits, ListboxFilterProps } from '@/Listbox'\nimport { useVModel } from '@vueuse/core'\nimport { nextTick, onMounted, watch } from 'vue'\nimport { usePrimitiveElement } from '@/Primitive'\n\nexport type ComboboxInputEmits = ListboxFilterEmits\nexport interface ComboboxInputProps extends ListboxFilterProps {\n  /** The display value of input for selected item. Does not work with `multiple`. */\n  displayValue?: (val: any) => string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ListboxFilter } from '@/Listbox'\nimport { injectListboxRootContext } from '@/Listbox/ListboxRoot.vue'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nconst props = withDefaults(defineProps<ComboboxInputProps>(), {\n  as: 'input',\n})\nconst emits = defineEmits<ComboboxInputEmits>()\n\nconst rootContext = injectComboboxRootContext()\nconst listboxContext = injectListboxRootContext()\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: (props.modelValue === undefined) as false,\n})\n\nonMounted(() => {\n  if (currentElement.value)\n    rootContext.onInputElementChange(currentElement.value as HTMLInputElement)\n})\n\nfunction handleKeyDown(ev: KeyboardEvent) {\n  if (!rootContext.open.value)\n    rootContext.onOpenChange(true)\n}\n\nfunction handleInput(event: InputEvent) {\n  const target = event.target as HTMLInputElement\n  if (!rootContext.open.value) {\n    rootContext.onOpenChange(true)\n    nextTick(() => {\n      if (target.value) {\n        rootContext.filterState.search = target.value\n        listboxContext.highlightFirstItem(event)\n      }\n    })\n  }\n  else {\n    rootContext.filterState.search = target.value\n  }\n}\n\nfunction resetSearchTerm() {\n  const rootModelValue = rootContext.modelValue.value\n\n  if (props.displayValue) {\n    modelValue.value = props.displayValue(rootModelValue)\n  }\n  else if (!rootContext.multiple.value && rootModelValue && !Array.isArray(rootModelValue)) {\n    if (typeof rootModelValue !== 'object')\n      modelValue.value = rootModelValue.toString()\n    else modelValue.value = ''\n  }\n  else {\n    modelValue.value = ''\n  }\n\n  nextTick(() => {\n    // Temporary force reassign\n    // eslint-disable-next-line no-self-assign\n    modelValue.value = modelValue.value\n  })\n}\n\nrootContext.onResetSearchTerm(() => {\n  resetSearchTerm()\n})\n\nwatch(rootContext.modelValue, async () => {\n  if (!rootContext.isUserInputted.value && rootContext.resetSearchTermOnSelect.value)\n    resetSearchTerm()\n}, { immediate: true, deep: true })\n\nwatch(\n  () => props.modelValue,\n  () => {\n    if (props.modelValue !== undefined) {\n      rootContext.filterState.search = props.modelValue\n    }\n  },\n)\n</script>\n\n<template>\n  <ListboxFilter\n    ref=\"primitiveElement\"\n    v-model=\"modelValue\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :auto-focus=\"autoFocus\"\n    :aria-expanded=\"rootContext.open.value\"\n    :aria-controls=\"rootContext.contentId\"\n    aria-autocomplete=\"list\"\n    role=\"combobox\"\n    autocomplete=\"false\"\n    @input=\"handleInput\"\n    @keydown.down.up.prevent=\"handleKeyDown\"\n  >\n    <slot />\n  </ListboxFilter>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAC9C,IAAA,MAAM,iBAAiB,wBAAyB,EAAA;AAChD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AAEjE,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAY,WAAA,CAAA,oBAAA,CAAqB,eAAe,KAAyB,CAAA;AAAA,KAC5E,CAAA;AAED,IAAA,SAAS,cAAc,EAAmB,EAAA;AACxC,MAAI,IAAA,CAAC,YAAY,IAAK,CAAA,KAAA;AACpB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAAA;AAGjC,IAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AACrB,MAAI,IAAA,CAAC,WAAY,CAAA,IAAA,CAAK,KAAO,EAAA;AAC3B,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAC7B,QAAA,QAAA,CAAS,MAAM;AACb,UAAA,IAAI,OAAO,KAAO,EAAA;AAChB,YAAY,WAAA,CAAA,WAAA,CAAY,SAAS,MAAO,CAAA,KAAA;AACxC,YAAA,cAAA,CAAe,mBAAmB,KAAK,CAAA;AAAA;AACzC,SACD,CAAA;AAAA,OAEE,MAAA;AACH,QAAY,WAAA,CAAA,WAAA,CAAY,SAAS,MAAO,CAAA,KAAA;AAAA;AAC1C;AAGF,IAAA,SAAS,eAAkB,GAAA;AACzB,MAAM,MAAA,cAAA,GAAiB,YAAY,UAAW,CAAA,KAAA;AAE9C,MAAA,IAAI,MAAM,YAAc,EAAA;AACtB,QAAW,UAAA,CAAA,KAAA,GAAQ,KAAM,CAAA,YAAA,CAAa,cAAc,CAAA;AAAA,OACtD,MAAA,IACS,CAAC,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,kBAAkB,CAAC,KAAA,CAAM,OAAQ,CAAA,cAAc,CAAG,EAAA;AACxF,QAAA,IAAI,OAAO,cAAmB,KAAA,QAAA;AAC5B,UAAW,UAAA,CAAA,KAAA,GAAQ,eAAe,QAAS,EAAA;AAAA,wBAC7B,KAAQ,GAAA,EAAA;AAAA,OAErB,MAAA;AACH,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AAGrB,MAAA,QAAA,CAAS,MAAM;AAGb,QAAA,UAAA,CAAW,QAAQ,UAAW,CAAA,KAAA;AAAA,OAC/B,CAAA;AAAA;AAGH,IAAA,WAAA,CAAY,kBAAkB,MAAM;AAClC,MAAgB,eAAA,EAAA;AAAA,KACjB,CAAA;AAED,IAAM,KAAA,CAAA,WAAA,CAAY,YAAY,YAAY;AACxC,MAAA,IAAI,CAAC,WAAA,CAAY,cAAe,CAAA,KAAA,IAAS,YAAY,uBAAwB,CAAA,KAAA;AAC3E,QAAgB,eAAA,EAAA;AAAA,OACjB,EAAE,SAAA,EAAW,IAAM,EAAA,IAAA,EAAM,MAAM,CAAA;AAElC,IAAA,KAAA;AAAA,MACE,MAAM,KAAM,CAAA,UAAA;AAAA,MACZ,MAAM;AACJ,QAAI,IAAA,KAAA,CAAM,eAAe,MAAW,EAAA;AAClC,UAAY,WAAA,CAAA,WAAA,CAAY,SAAS,KAAM,CAAA,UAAA;AAAA;AACzC;AACF,KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ComboboxInput.js","sources":["../../src/Combobox/ComboboxInput.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ListboxFilterEmits, ListboxFilterProps } from '@/Listbox'\nimport { useVModel } from '@vueuse/core'\nimport { nextTick, onMounted, watch } from 'vue'\nimport { usePrimitiveElement } from '@/Primitive'\n\nexport type ComboboxInputEmits = ListboxFilterEmits\nexport interface ComboboxInputProps extends ListboxFilterProps {\n  /** The display value of input for selected item. Does not work with `multiple`. */\n  displayValue?: (val: any) => string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ListboxFilter } from '@/Listbox'\nimport { injectListboxRootContext } from '@/Listbox/ListboxRoot.vue'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nconst props = withDefaults(defineProps<ComboboxInputProps>(), {\n  as: 'input',\n})\nconst emits = defineEmits<ComboboxInputEmits>()\n\nconst rootContext = injectComboboxRootContext()\nconst listboxContext = injectListboxRootContext()\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n  passive: (props.modelValue === undefined) as false,\n})\n\nonMounted(() => {\n  if (currentElement.value)\n    rootContext.onInputElementChange(currentElement.value as HTMLInputElement)\n})\n\nfunction handleKeyDown(ev: KeyboardEvent) {\n  if (!rootContext.open.value)\n    rootContext.onOpenChange(true)\n}\n\nfunction handleInput(event: InputEvent) {\n  const target = event.target as HTMLInputElement\n  if (!rootContext.open.value) {\n    rootContext.onOpenChange(true)\n    nextTick(() => {\n      if (target.value) {\n        rootContext.filterSearch.value = target.value\n        listboxContext.highlightFirstItem()\n      }\n    })\n  }\n  else {\n    rootContext.filterSearch.value = target.value\n  }\n}\n\nfunction resetSearchTerm() {\n  const rootModelValue = rootContext.modelValue.value\n\n  if (props.displayValue) {\n    modelValue.value = props.displayValue(rootModelValue)\n  }\n  else if (!rootContext.multiple.value && rootModelValue && !Array.isArray(rootModelValue)) {\n    if (typeof rootModelValue !== 'object')\n      modelValue.value = rootModelValue.toString()\n    else modelValue.value = ''\n  }\n  else {\n    modelValue.value = ''\n  }\n\n  nextTick(() => {\n    // Temporary force reassign\n    // eslint-disable-next-line no-self-assign\n    modelValue.value = modelValue.value\n  })\n}\n\nrootContext.onResetSearchTerm(() => {\n  resetSearchTerm()\n})\n\nwatch(rootContext.modelValue, async () => {\n  if (!rootContext.isUserInputted.value && rootContext.resetSearchTermOnSelect.value)\n    resetSearchTerm()\n}, { immediate: true, deep: true })\n\nwatch(rootContext.filterState, () => {\n  // we exclude virtualized list as the state would be constantly updated\n  if (!rootContext.isVirtual.value) {\n    listboxContext.highlightFirstItem()\n  }\n})\n</script>\n\n<template>\n  <ListboxFilter\n    ref=\"primitiveElement\"\n    v-model=\"modelValue\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :auto-focus=\"autoFocus\"\n    :aria-expanded=\"rootContext.open.value\"\n    :aria-controls=\"rootContext.contentId\"\n    aria-autocomplete=\"list\"\n    role=\"combobox\"\n    autocomplete=\"false\"\n    @input=\"handleInput\"\n    @keydown.down.up.prevent=\"handleKeyDown\"\n  >\n    <slot />\n  </ListboxFilter>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAC9C,IAAA,MAAM,iBAAiB,wBAAyB,EAAA;AAChD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AAEjE,IAAA,MAAM,UAAa,GAAA,SAAA,CAAU,KAAO,EAAA,YAAA,EAAc,KAAO,EAAA;AAAA,MACvD,OAAA,EAAU,MAAM,UAAe,KAAA;AAAA,KAChC,CAAA;AAED,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,cAAe,CAAA,KAAA;AACjB,QAAY,WAAA,CAAA,oBAAA,CAAqB,eAAe,KAAyB,CAAA;AAAA,KAC5E,CAAA;AAED,IAAA,SAAS,cAAc,EAAmB,EAAA;AACxC,MAAI,IAAA,CAAC,YAAY,IAAK,CAAA,KAAA;AACpB,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAAA;AAGjC,IAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA;AACrB,MAAI,IAAA,CAAC,WAAY,CAAA,IAAA,CAAK,KAAO,EAAA;AAC3B,QAAA,WAAA,CAAY,aAAa,IAAI,CAAA;AAC7B,QAAA,QAAA,CAAS,MAAM;AACb,UAAA,IAAI,OAAO,KAAO,EAAA;AAChB,YAAY,WAAA,CAAA,YAAA,CAAa,QAAQ,MAAO,CAAA,KAAA;AACxC,YAAA,cAAA,CAAe,kBAAmB,EAAA;AAAA;AACpC,SACD,CAAA;AAAA,OAEE,MAAA;AACH,QAAY,WAAA,CAAA,YAAA,CAAa,QAAQ,MAAO,CAAA,KAAA;AAAA;AAC1C;AAGF,IAAA,SAAS,eAAkB,GAAA;AACzB,MAAM,MAAA,cAAA,GAAiB,YAAY,UAAW,CAAA,KAAA;AAE9C,MAAA,IAAI,MAAM,YAAc,EAAA;AACtB,QAAW,UAAA,CAAA,KAAA,GAAQ,KAAM,CAAA,YAAA,CAAa,cAAc,CAAA;AAAA,OACtD,MAAA,IACS,CAAC,WAAA,CAAY,QAAS,CAAA,KAAA,IAAS,kBAAkB,CAAC,KAAA,CAAM,OAAQ,CAAA,cAAc,CAAG,EAAA;AACxF,QAAA,IAAI,OAAO,cAAmB,KAAA,QAAA;AAC5B,UAAW,UAAA,CAAA,KAAA,GAAQ,eAAe,QAAS,EAAA;AAAA,wBAC7B,KAAQ,GAAA,EAAA;AAAA,OAErB,MAAA;AACH,QAAA,UAAA,CAAW,KAAQ,GAAA,EAAA;AAAA;AAGrB,MAAA,QAAA,CAAS,MAAM;AAGb,QAAA,UAAA,CAAW,QAAQ,UAAW,CAAA,KAAA;AAAA,OAC/B,CAAA;AAAA;AAGH,IAAA,WAAA,CAAY,kBAAkB,MAAM;AAClC,MAAgB,eAAA,EAAA;AAAA,KACjB,CAAA;AAED,IAAM,KAAA,CAAA,WAAA,CAAY,YAAY,YAAY;AACxC,MAAA,IAAI,CAAC,WAAA,CAAY,cAAe,CAAA,KAAA,IAAS,YAAY,uBAAwB,CAAA,KAAA;AAC3E,QAAgB,eAAA,EAAA;AAAA,OACjB,EAAE,SAAA,EAAW,IAAM,EAAA,IAAA,EAAM,MAAM,CAAA;AAElC,IAAM,KAAA,CAAA,WAAA,CAAY,aAAa,MAAM;AAEnC,MAAI,IAAA,CAAC,WAAY,CAAA,SAAA,CAAU,KAAO,EAAA;AAChC,QAAA,cAAA,CAAe,kBAAmB,EAAA;AAAA;AACpC,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Combobox/ComboboxItem.cjs

@@ -30,10 +30,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       );
     }
     const isRender = vue.computed(() => {
-      if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterState.search) {
+      if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterSearch.value) {
         return true;
       } else {
-        const filteredCurrentItem = rootContext.filterState.filtered.items.get(id);
+        const filteredCurrentItem = rootContext.filterState.value.items.get(id);
         if (filteredCurrentItem === void 0) {
           return true;
         }

package/dist/Combobox/ComboboxItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxItem.cjs","sources":["../../src/Combobox/ComboboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ListboxItemEmits, ListboxItemProps } from '@/Listbox'\nimport type { AcceptableValue } from '@/shared/types'\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport { usePrimitiveElement } from '@/Primitive'\nimport { useId } from '@/shared'\nimport { injectComboboxGroupContext } from './ComboboxGroup.vue'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nexport { injectListboxItemContext as injectComboboxItemContext } from '@/Listbox'\n\nexport type ComboboxItemEmits<T = AcceptableValue> = ListboxItemEmits<T>\nexport interface ComboboxItemProps<T = AcceptableValue> extends ListboxItemProps<T> {\n  /**\n   * A string representation of the item contents.\n   *\n   * If the children are not plain text, then the `textValue` prop must also be set to a plain text representation, which will be used for autocomplete in the ComboBox.\n   */\n  textValue?: string\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { ListboxItem } from '@/Listbox'\n\nconst props = defineProps<ComboboxItemProps<T>>()\nconst emits = defineEmits<ComboboxItemEmits<T>>()\n\nconst id = useId(undefined, 'reka-combobox-item')\nconst rootContext = injectComboboxRootContext()\nconst groupContext = injectComboboxGroupContext(null)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nif (props.value === '') {\n  throw new Error(\n    'A <ComboboxItem /> must have a value prop that is not an empty string. This is because the Combobox value can be set to an empty string to clear the selection and show the placeholder.',\n  )\n}\n\nconst isRender = computed(() => {\n  if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterState.search) {\n    return true\n  }\n  else {\n    const filteredCurrentItem = rootContext.filterState.filtered.items.get(id)\n    // If the filtered items is undefined means not in the all times map yet\n    // Do the first render to add into the map\n    if (filteredCurrentItem === undefined) {\n      return true\n    }\n\n    // Check with filter\n    return filteredCurrentItem > 0\n  }\n})\n\nonMounted(() => {\n  // textValue to perform filter\n  rootContext.allItems.value.set(id, props.textValue || currentElement.value.textContent || currentElement.value.innerText)\n\n  const groupId = groupContext?.id\n  if (groupId) {\n    if (!rootContext.allGroups.value.has(groupId)) {\n      rootContext.allGroups.value.set(groupId, new Set([id]))\n    }\n    else {\n      rootContext.allGroups.value.get(groupId)?.add(id)\n    }\n  }\n})\nonUnmounted(() => {\n  rootContext.allItems.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxItem\n    v-if=\"isRender\"\n    v-bind=\"props\"\n    :id=\"id\"\n    ref=\"primitiveElement\"\n    :disabled=\"rootContext.disabled.value || disabled\"\n    @select=\"(event) => {\n      emits('select', event as any)\n      if (event.defaultPrevented)\n        return\n\n      if (!rootContext.multiple.value && !disabled && !rootContext.disabled.value) {\n        event.preventDefault()\n        rootContext.onOpenChange(false)\n        rootContext.modelValue.value = props.value\n      }\n    }\"\n  >\n    <slot>{{ value }}</slot>\n  </ListboxItem>\n</template>\n"],"names":["useId","injectComboboxRootContext","injectComboboxGroupContext","usePrimitiveElement","computed","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,EAAA,GAAKA,kBAAM,CAAA,MAAA,EAAW,oBAAoB,CAAA;AAChD,IAAA,MAAM,cAAcC,+CAA0B,EAAA;AAC9C,IAAM,MAAA,YAAA,GAAeC,kDAA2B,IAAI,CAAA;AAEpD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AAEjE,IAAI,IAAA,KAAA,CAAM,UAAU,EAAI,EAAA;AACtB,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAGF,IAAM,MAAA,QAAA,GAAWC,aAAS,MAAM;AAC9B,MAAI,IAAA,WAAA,CAAY,UAAU,KAAS,IAAA,WAAA,CAAY,aAAa,KAAS,IAAA,CAAC,WAAY,CAAA,WAAA,CAAY,MAAQ,EAAA;AACpG,QAAO,OAAA,IAAA;AAAA,OAEJ,MAAA;AACH,QAAA,MAAM,sBAAsB,WAAY,CAAA,WAAA,CAAY,QAAS,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAGzE,QAAA,IAAI,wBAAwB,MAAW,EAAA;AACrC,UAAO,OAAA,IAAA;AAAA;AAIT,QAAA,OAAO,mBAAsB,GAAA,CAAA;AAAA;AAC/B,KACD,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM;AAEd,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,GAAA,CAAI,EAAI,EAAA,KAAA,CAAM,SAAa,IAAA,cAAA,CAAe,KAAM,CAAA,WAAA,IAAe,cAAe,CAAA,KAAA,CAAM,SAAS,CAAA;AAExH,MAAA,MAAM,UAAU,YAAc,EAAA,EAAA;AAC9B,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,IAAI,CAAC,WAAY,CAAA,SAAA,CAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAG,EAAA;AAC7C,UAAY,WAAA,CAAA,SAAA,CAAU,MAAM,GAAI,CAAA,OAAA,sBAAa,GAAI,CAAA,CAAC,EAAE,CAAC,CAAC,CAAA;AAAA,SAEnD,MAAA;AACH,UAAA,WAAA,CAAY,UAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAA,EAAG,IAAI,EAAE,CAAA;AAAA;AAClD;AACF,KACD,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,KACrC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ComboboxItem.cjs","sources":["../../src/Combobox/ComboboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ListboxItemEmits, ListboxItemProps } from '@/Listbox'\nimport type { AcceptableValue } from '@/shared/types'\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport { usePrimitiveElement } from '@/Primitive'\nimport { useId } from '@/shared'\nimport { injectComboboxGroupContext } from './ComboboxGroup.vue'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nexport { injectListboxItemContext as injectComboboxItemContext } from '@/Listbox'\n\nexport type ComboboxItemEmits<T = AcceptableValue> = ListboxItemEmits<T>\nexport interface ComboboxItemProps<T = AcceptableValue> extends ListboxItemProps<T> {\n  /**\n   * A string representation of the item contents.\n   *\n   * If the children are not plain text, then the `textValue` prop must also be set to a plain text representation, which will be used for autocomplete in the ComboBox.\n   */\n  textValue?: string\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { ListboxItem } from '@/Listbox'\n\nconst props = defineProps<ComboboxItemProps<T>>()\nconst emits = defineEmits<ComboboxItemEmits<T>>()\n\nconst id = useId(undefined, 'reka-combobox-item')\nconst rootContext = injectComboboxRootContext()\nconst groupContext = injectComboboxGroupContext(null)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nif (props.value === '') {\n  throw new Error(\n    'A <ComboboxItem /> must have a value prop that is not an empty string. This is because the Combobox value can be set to an empty string to clear the selection and show the placeholder.',\n  )\n}\n\nconst isRender = computed(() => {\n  if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterSearch.value) {\n    return true\n  }\n  else {\n    const filteredCurrentItem = rootContext.filterState.value.items.get(id)\n    // If the filtered items is undefined means not in the all times map yet\n    // Do the first render to add into the map\n    if (filteredCurrentItem === undefined) {\n      return true\n    }\n\n    // Check with filter\n    return filteredCurrentItem > 0\n  }\n})\n\nonMounted(() => {\n  // textValue to perform filter\n  rootContext.allItems.value.set(id, props.textValue || currentElement.value.textContent || currentElement.value.innerText)\n\n  const groupId = groupContext?.id\n  if (groupId) {\n    if (!rootContext.allGroups.value.has(groupId)) {\n      rootContext.allGroups.value.set(groupId, new Set([id]))\n    }\n    else {\n      rootContext.allGroups.value.get(groupId)?.add(id)\n    }\n  }\n})\nonUnmounted(() => {\n  rootContext.allItems.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxItem\n    v-if=\"isRender\"\n    v-bind=\"props\"\n    :id=\"id\"\n    ref=\"primitiveElement\"\n    :disabled=\"rootContext.disabled.value || disabled\"\n    @select=\"(event) => {\n      emits('select', event as any)\n      if (event.defaultPrevented)\n        return\n\n      if (!rootContext.multiple.value && !disabled && !rootContext.disabled.value) {\n        event.preventDefault()\n        rootContext.onOpenChange(false)\n        rootContext.modelValue.value = props.value\n      }\n    }\"\n  >\n    <slot>{{ value }}</slot>\n  </ListboxItem>\n</template>\n"],"names":["useId","injectComboboxRootContext","injectComboboxGroupContext","usePrimitiveElement","computed","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,EAAA,GAAKA,kBAAM,CAAA,MAAA,EAAW,oBAAoB,CAAA;AAChD,IAAA,MAAM,cAAcC,+CAA0B,EAAA;AAC9C,IAAM,MAAA,YAAA,GAAeC,kDAA2B,IAAI,CAAA;AAEpD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAIC,iDAAoB,EAAA;AAEjE,IAAI,IAAA,KAAA,CAAM,UAAU,EAAI,EAAA;AACtB,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAGF,IAAM,MAAA,QAAA,GAAWC,aAAS,MAAM;AAC9B,MAAI,IAAA,WAAA,CAAY,UAAU,KAAS,IAAA,WAAA,CAAY,aAAa,KAAS,IAAA,CAAC,WAAY,CAAA,YAAA,CAAa,KAAO,EAAA;AACpG,QAAO,OAAA,IAAA;AAAA,OAEJ,MAAA;AACH,QAAA,MAAM,sBAAsB,WAAY,CAAA,WAAA,CAAY,KAAM,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAGtE,QAAA,IAAI,wBAAwB,MAAW,EAAA;AACrC,UAAO,OAAA,IAAA;AAAA;AAIT,QAAA,OAAO,mBAAsB,GAAA,CAAA;AAAA;AAC/B,KACD,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM;AAEd,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,GAAA,CAAI,EAAI,EAAA,KAAA,CAAM,SAAa,IAAA,cAAA,CAAe,KAAM,CAAA,WAAA,IAAe,cAAe,CAAA,KAAA,CAAM,SAAS,CAAA;AAExH,MAAA,MAAM,UAAU,YAAc,EAAA,EAAA;AAC9B,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,IAAI,CAAC,WAAY,CAAA,SAAA,CAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAG,EAAA;AAC7C,UAAY,WAAA,CAAA,SAAA,CAAU,MAAM,GAAI,CAAA,OAAA,sBAAa,GAAI,CAAA,CAAC,EAAE,CAAC,CAAC,CAAA;AAAA,SAEnD,MAAA;AACH,UAAA,WAAA,CAAY,UAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAA,EAAG,IAAI,EAAE,CAAA;AAAA;AAClD;AACF,KACD,CAAA;AACD,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,KACrC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Combobox/ComboboxItem.js

@@ -28,10 +28,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       );
     }
     const isRender = computed(() => {
-      if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterState.search) {
+      if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterSearch.value) {
         return true;
       } else {
-        const filteredCurrentItem = rootContext.filterState.filtered.items.get(id);
+        const filteredCurrentItem = rootContext.filterState.value.items.get(id);
         if (filteredCurrentItem === void 0) {
           return true;
         }

package/dist/Combobox/ComboboxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxItem.js","sources":["../../src/Combobox/ComboboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ListboxItemEmits, ListboxItemProps } from '@/Listbox'\nimport type { AcceptableValue } from '@/shared/types'\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport { usePrimitiveElement } from '@/Primitive'\nimport { useId } from '@/shared'\nimport { injectComboboxGroupContext } from './ComboboxGroup.vue'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nexport { injectListboxItemContext as injectComboboxItemContext } from '@/Listbox'\n\nexport type ComboboxItemEmits<T = AcceptableValue> = ListboxItemEmits<T>\nexport interface ComboboxItemProps<T = AcceptableValue> extends ListboxItemProps<T> {\n  /**\n   * A string representation of the item contents.\n   *\n   * If the children are not plain text, then the `textValue` prop must also be set to a plain text representation, which will be used for autocomplete in the ComboBox.\n   */\n  textValue?: string\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { ListboxItem } from '@/Listbox'\n\nconst props = defineProps<ComboboxItemProps<T>>()\nconst emits = defineEmits<ComboboxItemEmits<T>>()\n\nconst id = useId(undefined, 'reka-combobox-item')\nconst rootContext = injectComboboxRootContext()\nconst groupContext = injectComboboxGroupContext(null)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nif (props.value === '') {\n  throw new Error(\n    'A <ComboboxItem /> must have a value prop that is not an empty string. This is because the Combobox value can be set to an empty string to clear the selection and show the placeholder.',\n  )\n}\n\nconst isRender = computed(() => {\n  if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterState.search) {\n    return true\n  }\n  else {\n    const filteredCurrentItem = rootContext.filterState.filtered.items.get(id)\n    // If the filtered items is undefined means not in the all times map yet\n    // Do the first render to add into the map\n    if (filteredCurrentItem === undefined) {\n      return true\n    }\n\n    // Check with filter\n    return filteredCurrentItem > 0\n  }\n})\n\nonMounted(() => {\n  // textValue to perform filter\n  rootContext.allItems.value.set(id, props.textValue || currentElement.value.textContent || currentElement.value.innerText)\n\n  const groupId = groupContext?.id\n  if (groupId) {\n    if (!rootContext.allGroups.value.has(groupId)) {\n      rootContext.allGroups.value.set(groupId, new Set([id]))\n    }\n    else {\n      rootContext.allGroups.value.get(groupId)?.add(id)\n    }\n  }\n})\nonUnmounted(() => {\n  rootContext.allItems.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxItem\n    v-if=\"isRender\"\n    v-bind=\"props\"\n    :id=\"id\"\n    ref=\"primitiveElement\"\n    :disabled=\"rootContext.disabled.value || disabled\"\n    @select=\"(event) => {\n      emits('select', event as any)\n      if (event.defaultPrevented)\n        return\n\n      if (!rootContext.multiple.value && !disabled && !rootContext.disabled.value) {\n        event.preventDefault()\n        rootContext.onOpenChange(false)\n        rootContext.modelValue.value = props.value\n      }\n    }\"\n  >\n    <slot>{{ value }}</slot>\n  </ListboxItem>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,EAAA,GAAK,KAAM,CAAA,MAAA,EAAW,oBAAoB,CAAA;AAChD,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAC9C,IAAM,MAAA,YAAA,GAAe,2BAA2B,IAAI,CAAA;AAEpD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AAEjE,IAAI,IAAA,KAAA,CAAM,UAAU,EAAI,EAAA;AACtB,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAGF,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAI,IAAA,WAAA,CAAY,UAAU,KAAS,IAAA,WAAA,CAAY,aAAa,KAAS,IAAA,CAAC,WAAY,CAAA,WAAA,CAAY,MAAQ,EAAA;AACpG,QAAO,OAAA,IAAA;AAAA,OAEJ,MAAA;AACH,QAAA,MAAM,sBAAsB,WAAY,CAAA,WAAA,CAAY,QAAS,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAGzE,QAAA,IAAI,wBAAwB,MAAW,EAAA;AACrC,UAAO,OAAA,IAAA;AAAA;AAIT,QAAA,OAAO,mBAAsB,GAAA,CAAA;AAAA;AAC/B,KACD,CAAA;AAED,IAAA,SAAA,CAAU,MAAM;AAEd,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,GAAA,CAAI,EAAI,EAAA,KAAA,CAAM,SAAa,IAAA,cAAA,CAAe,KAAM,CAAA,WAAA,IAAe,cAAe,CAAA,KAAA,CAAM,SAAS,CAAA;AAExH,MAAA,MAAM,UAAU,YAAc,EAAA,EAAA;AAC9B,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,IAAI,CAAC,WAAY,CAAA,SAAA,CAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAG,EAAA;AAC7C,UAAY,WAAA,CAAA,SAAA,CAAU,MAAM,GAAI,CAAA,OAAA,sBAAa,GAAI,CAAA,CAAC,EAAE,CAAC,CAAC,CAAA;AAAA,SAEnD,MAAA;AACH,UAAA,WAAA,CAAY,UAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAA,EAAG,IAAI,EAAE,CAAA;AAAA;AAClD;AACF,KACD,CAAA;AACD,IAAA,WAAA,CAAY,MAAM;AAChB,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,KACrC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ComboboxItem.js","sources":["../../src/Combobox/ComboboxItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ListboxItemEmits, ListboxItemProps } from '@/Listbox'\nimport type { AcceptableValue } from '@/shared/types'\nimport { computed, onMounted, onUnmounted } from 'vue'\nimport { usePrimitiveElement } from '@/Primitive'\nimport { useId } from '@/shared'\nimport { injectComboboxGroupContext } from './ComboboxGroup.vue'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nexport { injectListboxItemContext as injectComboboxItemContext } from '@/Listbox'\n\nexport type ComboboxItemEmits<T = AcceptableValue> = ListboxItemEmits<T>\nexport interface ComboboxItemProps<T = AcceptableValue> extends ListboxItemProps<T> {\n  /**\n   * A string representation of the item contents.\n   *\n   * If the children are not plain text, then the `textValue` prop must also be set to a plain text representation, which will be used for autocomplete in the ComboBox.\n   */\n  textValue?: string\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { ListboxItem } from '@/Listbox'\n\nconst props = defineProps<ComboboxItemProps<T>>()\nconst emits = defineEmits<ComboboxItemEmits<T>>()\n\nconst id = useId(undefined, 'reka-combobox-item')\nconst rootContext = injectComboboxRootContext()\nconst groupContext = injectComboboxGroupContext(null)\n\nconst { primitiveElement, currentElement } = usePrimitiveElement()\n\nif (props.value === '') {\n  throw new Error(\n    'A <ComboboxItem /> must have a value prop that is not an empty string. This is because the Combobox value can be set to an empty string to clear the selection and show the placeholder.',\n  )\n}\n\nconst isRender = computed(() => {\n  if (rootContext.isVirtual.value || rootContext.ignoreFilter.value || !rootContext.filterSearch.value) {\n    return true\n  }\n  else {\n    const filteredCurrentItem = rootContext.filterState.value.items.get(id)\n    // If the filtered items is undefined means not in the all times map yet\n    // Do the first render to add into the map\n    if (filteredCurrentItem === undefined) {\n      return true\n    }\n\n    // Check with filter\n    return filteredCurrentItem > 0\n  }\n})\n\nonMounted(() => {\n  // textValue to perform filter\n  rootContext.allItems.value.set(id, props.textValue || currentElement.value.textContent || currentElement.value.innerText)\n\n  const groupId = groupContext?.id\n  if (groupId) {\n    if (!rootContext.allGroups.value.has(groupId)) {\n      rootContext.allGroups.value.set(groupId, new Set([id]))\n    }\n    else {\n      rootContext.allGroups.value.get(groupId)?.add(id)\n    }\n  }\n})\nonUnmounted(() => {\n  rootContext.allItems.value.delete(id)\n})\n</script>\n\n<template>\n  <ListboxItem\n    v-if=\"isRender\"\n    v-bind=\"props\"\n    :id=\"id\"\n    ref=\"primitiveElement\"\n    :disabled=\"rootContext.disabled.value || disabled\"\n    @select=\"(event) => {\n      emits('select', event as any)\n      if (event.defaultPrevented)\n        return\n\n      if (!rootContext.multiple.value && !disabled && !rootContext.disabled.value) {\n        event.preventDefault()\n        rootContext.onOpenChange(false)\n        rootContext.modelValue.value = props.value\n      }\n    }\"\n  >\n    <slot>{{ value }}</slot>\n  </ListboxItem>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAM,MAAA,EAAA,GAAK,KAAM,CAAA,MAAA,EAAW,oBAAoB,CAAA;AAChD,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAC9C,IAAM,MAAA,YAAA,GAAe,2BAA2B,IAAI,CAAA;AAEpD,IAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,mBAAoB,EAAA;AAEjE,IAAI,IAAA,KAAA,CAAM,UAAU,EAAI,EAAA;AACtB,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAGF,IAAM,MAAA,QAAA,GAAW,SAAS,MAAM;AAC9B,MAAI,IAAA,WAAA,CAAY,UAAU,KAAS,IAAA,WAAA,CAAY,aAAa,KAAS,IAAA,CAAC,WAAY,CAAA,YAAA,CAAa,KAAO,EAAA;AACpG,QAAO,OAAA,IAAA;AAAA,OAEJ,MAAA;AACH,QAAA,MAAM,sBAAsB,WAAY,CAAA,WAAA,CAAY,KAAM,CAAA,KAAA,CAAM,IAAI,EAAE,CAAA;AAGtE,QAAA,IAAI,wBAAwB,MAAW,EAAA;AACrC,UAAO,OAAA,IAAA;AAAA;AAIT,QAAA,OAAO,mBAAsB,GAAA,CAAA;AAAA;AAC/B,KACD,CAAA;AAED,IAAA,SAAA,CAAU,MAAM;AAEd,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,GAAA,CAAI,EAAI,EAAA,KAAA,CAAM,SAAa,IAAA,cAAA,CAAe,KAAM,CAAA,WAAA,IAAe,cAAe,CAAA,KAAA,CAAM,SAAS,CAAA;AAExH,MAAA,MAAM,UAAU,YAAc,EAAA,EAAA;AAC9B,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,IAAI,CAAC,WAAY,CAAA,SAAA,CAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAG,EAAA;AAC7C,UAAY,WAAA,CAAA,SAAA,CAAU,MAAM,GAAI,CAAA,OAAA,sBAAa,GAAI,CAAA,CAAC,EAAE,CAAC,CAAC,CAAA;AAAA,SAEnD,MAAA;AACH,UAAA,WAAA,CAAY,UAAU,KAAM,CAAA,GAAA,CAAI,OAAO,CAAA,EAAG,IAAI,EAAE,CAAA;AAAA;AAClD;AACF,KACD,CAAA;AACD,IAAA,WAAA,CAAY,MAAM;AAChB,MAAY,WAAA,CAAA,QAAA,CAAS,KAAM,CAAA,MAAA,CAAO,EAAE,CAAA;AAAA,KACrC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Combobox/ComboboxRoot.cjs

@@ -48,7 +48,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     });
     async function onOpenChange(val) {
       open.value = val;
-      filterState.search = "";
+      filterSearch.value = "";
       if (val) {
         await vue.nextTick();
         primitiveElement.value?.highlightSelected();
@@ -71,49 +71,38 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const allItems = vue.ref(/* @__PURE__ */ new Map());
     const allGroups = vue.ref(/* @__PURE__ */ new Map());
     const { contains } = shared_useFilter.useFilter({ sensitivity: "base" });
-    const filterState = vue.reactive({
-      search: "",
-      filtered: {
-        /** The count of all visible items. */
-        count: 0,
-        /** Map from visible item id to its search score. */
-        items: /* @__PURE__ */ new Map(),
-        /** Set of groups with at least one visible item. */
-        groups: /* @__PURE__ */ new Set()
+    const filterSearch = vue.ref("");
+    const filterState = vue.computed((oldValue) => {
+      if (!filterSearch.value || props.ignoreFilter || isVirtual.value) {
+        return {
+          count: allItems.value.size,
+          items: oldValue?.items ?? /* @__PURE__ */ new Map(),
+          groups: oldValue?.groups ?? new Set(allGroups.value.keys())
+        };
       }
-    });
-    function filterItems() {
-      if (!filterState.search || props.ignoreFilter || isVirtual.value) {
-        filterState.filtered.count = allItems.value.size;
-        return;
-      }
-      filterState.filtered.groups = /* @__PURE__ */ new Set();
       let itemCount = 0;
+      const filteredItems = /* @__PURE__ */ new Map();
+      const filteredGroups = /* @__PURE__ */ new Set();
       for (const [id, value] of allItems.value) {
-        const score = contains(value, filterState.search);
-        filterState.filtered.items.set(id, score ? 1 : 0);
+        const score = contains(value, filterSearch.value);
+        filteredItems.set(id, score ? 1 : 0);
         if (score)
           itemCount++;
       }
       for (const [groupId, group] of allGroups.value) {
         for (const itemId of group) {
-          if (filterState.filtered.items.get(itemId) > 0) {
-            filterState.filtered.groups.add(groupId);
+          if (filteredItems.get(itemId) > 0) {
+            filteredGroups.add(groupId);
             break;
           }
         }
       }
-      filterState.filtered.count = itemCount;
-    }
-    vue.watch([() => filterState.search, () => allItems.value.size], () => {
-      filterItems();
-    }, { immediate: true });
-    vue.watch(() => open.value, () => {
-      vue.nextTick(() => {
-        if (open.value)
-          filterItems();
-      });
-    }, { flush: "post" });
+      return {
+        count: itemCount,
+        items: filteredItems,
+        groups: filteredGroups
+      };
+    });
     const inst = vue.getCurrentInstance();
     vue.onMounted(() => {
       if (inst?.exposed) {
@@ -123,7 +112,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       }
     });
     __expose({
-      filtered: vue.computed(() => filterState.filtered),
+      filtered: filterState,
       highlightedElement,
       highlightItem: primitiveElement.value?.highlightItem,
       highlightFirstItem: primitiveElement.value?.highlightFirstItem,
@@ -148,6 +137,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       onResetSearchTerm: resetSearchTerm.on,
       allItems,
       allGroups,
+      filterSearch,
       filterState,
       ignoreFilter
     });