{"version":3,"file":"ComboboxContentImpl.js","sources":["../../src/Combobox/ComboboxContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { DismissableLayerEmits, DismissableLayerProps } from '@/DismissableLayer'\nimport type { PopperContentProps } from '@/Popper'\n\nimport { createContext, useForwardExpose, useForwardProps, useHideOthers } from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\n\nexport type ComboboxContentImplEmits = DismissableLayerEmits\n\nexport interface ComboboxContentImplProps extends PopperContentProps, DismissableLayerProps {\n  /**\n   * The positioning mode to use, <br>\n   * `inline` is the default and you can control the position using CSS. <br>\n   * `popper` positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.\n   */\n  position?: 'inline' | 'popper'\n  /** The document.body will be lock, and scrolling will be disabled. */\n  bodyLock?: boolean\n}\n\nexport const [injectComboboxContentContext, provideComboboxContentContext]\n  = createContext<{\n    position: Ref<'inline' | 'popper'>\n  }>('ComboboxContent')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, toRefs } from 'vue'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { ListboxContent } from '@/Listbox'\nimport { PopperContent } from '@/Popper'\nimport { Primitive } from '@/Primitive'\nimport { injectComboboxRootContext } from './ComboboxRoot.vue'\n\nconst props = withDefaults(defineProps<ComboboxContentImplProps>(), {\n  position: 'inline',\n})\nconst emits = defineEmits<ComboboxContentImplEmits>()\n\nconst { position } = toRefs(props)\nconst rootContext = injectComboboxRootContext()\n\nconst { forwardRef, currentElement } = useForwardExpose()\nuseBodyScrollLock(props.bodyLock)\nuseHideOthers(rootContext.parentElement)\n\nconst pickedProps = computed(() => {\n  if (props.position === 'popper')\n    return props\n  else return {}\n})\n\nconst forwardedProps = useForwardProps(pickedProps.value)\n\nconst popperStyle = {\n  // Ensure border-box for floating-ui calculations\n  'boxSizing': 'border-box',\n  '--reka-combobox-content-transform-origin':\n        'var(--reka-popper-transform-origin)',\n  '--reka-combobox-content-available-width':\n        'var(--reka-popper-available-width)',\n  '--reka-combobox-content-available-height':\n        'var(--reka-popper-available-height)',\n  '--reka-combobox-trigger-width': 'var(--reka-popper-anchor-width)',\n  '--reka-combobox-trigger-height': 'var(--reka-popper-anchor-height)',\n}\n\nprovideComboboxContentContext({ position })\n\n// Handle case where input position within the content\nconst isInputWithinContent = ref(false)\nonMounted(() => {\n  if (rootContext.inputElement.value) {\n    isInputWithinContent.value = currentElement.value.contains(rootContext.inputElement.value)\n    if (isInputWithinContent.value) {\n      rootContext.inputElement.value.focus()\n    }\n  }\n})\n\nonUnmounted(() => {\n  if (isInputWithinContent.value) {\n    rootContext.triggerElement.value?.focus()\n  }\n})\n</script>\n\n<template>\n  <ListboxContent as-child>\n    <DismissableLayer\n      as-child\n      :disable-outside-pointer-events=\"disableOutsidePointerEvents\"\n      @dismiss=\"rootContext.onOpenChange(false)\"\n      @focus-outside=\"(ev) => {\n        // if clicking inside the combobox, prevent dismiss\n        if (rootContext.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()\n        emits('focusOutside', ev)\n      }\"\n      @interact-outside=\"emits('interactOutside', $event)\"\n      @escape-key-down=\"emits('escapeKeyDown', $event)\"\n      @pointer-down-outside=\"(ev) => {\n        // if clicking inside the combobox, prevent dismiss\n        if (rootContext.parentElement.value?.contains(ev.target as Node)) ev.preventDefault()\n        emits('pointerDownOutside', ev)\n      }\"\n    >\n      <component\n        :is=\"position === 'popper' ? PopperContent : Primitive\"\n        v-bind=\"{ ...$attrs, ...forwardedProps }\"\n        :id=\"rootContext.contentId\"\n        :ref=\"forwardRef\"\n        :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n        :style=\"{\n          // flex layout so we can place the scroll buttons properly\n          display: 'flex',\n          flexDirection: 'column',\n          // reset the outline by default as the content MAY get focused\n          outline: 'none',\n          ...(position === 'popper' ? popperStyle : {}),\n        }\"\n      >\n        <slot />\n      </component>\n    </DismissableLayer>\n  </ListboxContent>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAqBO,MAAM,CAAC,4BAAA,EAA8B,6BAA6B,CAAA,GACrE,cAEC,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWtB,IAAA,MAAM,KAAQ,GAAA,OAAA;AAGd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,EAAE,QAAA,EAAa,GAAA,MAAA,CAAO,KAAK,CAAA;AACjC,IAAA,MAAM,cAAc,yBAA0B,EAAA;AAE9C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AACxD,IAAA,iBAAA,CAAkB,MAAM,QAAQ,CAAA;AAChC,IAAA,aAAA,CAAc,YAAY,aAAa,CAAA;AAEvC,IAAM,MAAA,WAAA,GAAc,SAAS,MAAM;AACjC,MAAA,IAAI,MAAM,QAAa,KAAA,QAAA;AACrB,QAAO,OAAA,KAAA;AAAA,kBACG,EAAC;AAAA,KACd,CAAA;AAED,IAAM,MAAA,cAAA,GAAiB,eAAgB,CAAA,WAAA,CAAY,KAAK,CAAA;AAExD,IAAA,MAAM,WAAc,GAAA;AAAA;AAAA,MAElB,WAAa,EAAA,YAAA;AAAA,MACb,0CACM,EAAA,qCAAA;AAAA,MACN,yCACM,EAAA,oCAAA;AAAA,MACN,0CACM,EAAA,qCAAA;AAAA,MACN,+BAAiC,EAAA,iCAAA;AAAA,MACjC,gCAAkC,EAAA;AAAA,KACpC;AAEA,IAA8B,6BAAA,CAAA,EAAE,UAAU,CAAA;AAG1C,IAAM,MAAA,oBAAA,GAAuB,IAAI,KAAK,CAAA;AACtC,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,WAAA,CAAY,aAAa,KAAO,EAAA;AAClC,QAAA,oBAAA,CAAqB,QAAQ,cAAe,CAAA,KAAA,CAAM,QAAS,CAAA,WAAA,CAAY,aAAa,KAAK,CAAA;AACzF,QAAA,IAAI,qBAAqB,KAAO,EAAA;AAC9B,UAAY,WAAA,CAAA,YAAA,CAAa,MAAM,KAAM,EAAA;AAAA;AACvC;AACF,KACD,CAAA;AAED,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,IAAI,qBAAqB,KAAO,EAAA;AAC9B,QAAY,WAAA,CAAA,cAAA,CAAe,OAAO,KAAM,EAAA;AAAA;AAC1C,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}