reka-ui 2.2.1 → 2.3.1

package/dist/Select/SelectContentImpl.cjs

@@ -1,9 +1,8 @@
 'use strict';
 
 const vue = require('vue');
-const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
-const Menu_utils = require('../Menu/utils.cjs');
 const core = require('@vueuse/core');
+const Menu_utils = require('../Menu/utils.cjs');
 const Select_SelectItemAlignedPosition = require('./SelectItemAlignedPosition.cjs');
 const Select_SelectPopperPosition = require('./SelectPopperPosition.cjs');
 const Collection_Collection = require('../Collection/Collection.cjs');
@@ -15,6 +14,7 @@ const shared_useHideOthers = require('../shared/useHideOthers.cjs');
 const shared_useTypeahead = require('../shared/useTypeahead.cjs');
 const shared_useForwardProps = require('../shared/useForwardProps.cjs');
 const FocusScope_FocusScope = require('../FocusScope/FocusScope.cjs');
+const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
 const Select_SelectRoot = require('./SelectRoot.cjs');
 
 const SelectContentDefaultContextValue = {

package/dist/Select/SelectContentImpl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContentImpl.cjs","sources":["../../src/Select/SelectContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PointerDownOutsideEvent } from '@/DismissableLayer'\nimport type { PopperContentProps } from '@/Popper'\nimport type { AcceptableValue } from '@/shared/types'\nimport type {\n  ComponentPublicInstance,\n  Ref,\n} from 'vue'\nimport { useCollection } from '@/Collection'\nimport {\n  createContext,\n  useFocusGuards,\n  useForwardProps,\n  useHideOthers,\n  useTypeahead,\n} from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\nimport { valueComparator } from './utils'\n\nexport interface SelectContentContext {\n  content?: Ref<HTMLElement | undefined>\n  viewport?: Ref<HTMLElement | undefined>\n  onViewportChange: (node: HTMLElement | undefined) => void\n  itemRefCallback: (\n    node: HTMLElement | undefined,\n    value: AcceptableValue,\n    disabled: boolean\n  ) => void\n  selectedItem?: Ref<HTMLElement | undefined>\n  onItemLeave?: () => void\n  itemTextRefCallback: (\n    node: HTMLElement | undefined,\n    value: AcceptableValue,\n    disabled: boolean\n  ) => void\n  focusSelectedItem?: () => void\n  selectedItemText?: Ref<HTMLElement | undefined>\n  position?: 'item-aligned' | 'popper'\n  isPositioned?: Ref<boolean>\n  searchRef?: Ref<string>\n}\n\nexport const SelectContentDefaultContextValue: SelectContentContext = {\n  onViewportChange: () => {},\n  itemTextRefCallback: () => {},\n  itemRefCallback: () => {},\n}\n\nexport type SelectContentImplEmits = {\n  closeAutoFocus: [event: Event]\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  escapeKeyDown: [event: KeyboardEvent]\n  /**\n   * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  pointerDownOutside: [event: PointerDownOutsideEvent]\n}\n\nexport interface SelectContentImplProps extends PopperContentProps {\n  /**\n   *  The positioning mode to use\n   *\n   *  `item-aligned (default)` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>\n   *  `popper` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.\n   */\n  position?: 'item-aligned' | 'popper'\n  /**\n   * The document.body will be lock, and scrolling will be disabled.\n   *\n   * @defaultValue true\n   */\n  bodyLock?: boolean\n}\n\nexport const [injectSelectContentContext, provideSelectContentContext]\n  = createContext<SelectContentContext>('SelectContent')\n</script>\n\n<script setup lang=\"ts\">\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { FocusScope } from '@/FocusScope'\nimport { focusFirst } from '@/Menu/utils'\nimport { unrefElement } from '@vueuse/core'\nimport {\n  computed,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'\nimport SelectPopperPosition from './SelectPopperPosition.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nconst props = withDefaults(defineProps<SelectContentImplProps>(), {\n  align: 'start',\n  position: 'item-aligned',\n  bodyLock: true,\n})\nconst emits = defineEmits<SelectContentImplEmits>()\n\nconst rootContext = injectSelectRootContext()\n\nuseFocusGuards()\nuseBodyScrollLock(props.bodyLock)\nconst { CollectionSlot, getItems } = useCollection()\n\nconst content = ref<HTMLElement>()\nuseHideOthers(content)\n\nconst { search, handleTypeaheadSearch } = useTypeahead()\n\nconst viewport = ref<HTMLElement>()\nconst selectedItem = ref<HTMLElement>()\nconst selectedItemText = ref<HTMLElement>()\nconst isPositioned = ref(false)\nconst firstValidItemFoundRef = ref(false)\nconst firstSelectedItemInArrayFoundRef = ref(false)\n\nfunction focusSelectedItem() {\n  if (selectedItem.value && content.value)\n    focusFirst([selectedItem.value, content.value])\n}\n\nwatch(isPositioned, () => {\n  focusSelectedItem()\n})\n\n// prevent selecting items on `pointerup` in some cases after opening from `pointerdown`\n// and close on `pointerup` outside.\nconst { onOpenChange, triggerPointerDownPosRef } = rootContext\nwatchEffect((cleanupFn) => {\n  if (!content.value)\n    return\n  let pointerMoveDelta = { x: 0, y: 0 }\n\n  const handlePointerMove = (event: PointerEvent) => {\n    pointerMoveDelta = {\n      x: Math.abs(\n        Math.round(event.pageX) - (triggerPointerDownPosRef.value?.x ?? 0),\n      ),\n      y: Math.abs(\n        Math.round(event.pageY) - (triggerPointerDownPosRef.value?.y ?? 0),\n      ),\n    }\n  }\n  const handlePointerUp = (event: PointerEvent) => {\n    // Prevent options from being untappable on touch devices\n    // https://github.com/unovue/reka-ui/issues/804\n    if (event.pointerType === 'touch')\n      return\n\n    // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.\n    if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {\n      event.preventDefault()\n    }\n    else {\n      // otherwise, if the event was outside the content, close.\n      if (!content.value?.contains(event.target as HTMLElement))\n        onOpenChange(false)\n    }\n    document.removeEventListener('pointermove', handlePointerMove)\n    triggerPointerDownPosRef.value = null\n  }\n\n  if (triggerPointerDownPosRef.value !== null) {\n    document.addEventListener('pointermove', handlePointerMove)\n    document.addEventListener('pointerup', handlePointerUp, {\n      capture: true,\n      once: true,\n    })\n  }\n\n  cleanupFn(() => {\n    document.removeEventListener('pointermove', handlePointerMove)\n    document.removeEventListener('pointerup', handlePointerUp, {\n      capture: true,\n    })\n  })\n})\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const isModifierKey = event.ctrlKey || event.altKey || event.metaKey\n\n  // select should not be navigated using tab key so we prevent it\n  if (event.key === 'Tab')\n    event.preventDefault()\n\n  if (!isModifierKey && event.key.length === 1)\n    handleTypeaheadSearch(event.key, getItems())\n\n  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n    const collectionItems = getItems().map(i => i.ref)\n    let candidateNodes = [...collectionItems]\n\n    if (['ArrowUp', 'End'].includes(event.key))\n      candidateNodes = candidateNodes.slice().reverse()\n\n    if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n      const currentElement = event.target as HTMLElement\n      const currentIndex = candidateNodes.indexOf(currentElement)\n      candidateNodes = candidateNodes.slice(currentIndex + 1)\n    }\n    setTimeout(() => focusFirst(candidateNodes))\n    event.preventDefault()\n  }\n}\n\nconst pickedProps = computed(() => {\n  if (props.position === 'popper')\n    return props\n  else return {}\n})\n\nconst forwardedProps = useForwardProps(pickedProps.value)\n\nprovideSelectContentContext({\n  content,\n  viewport,\n  onViewportChange: (node) => {\n    viewport.value = node\n  },\n  itemRefCallback: (node, value, disabled) => {\n    const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n    const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n    if (rootContext.multiple.value) {\n      if (firstSelectedItemInArrayFoundRef.value) {\n        return\n      }\n      if (isSelectedItem || isFirstValidItem) {\n        selectedItem.value = node\n\n        // make sure to keep the first item highlighted when `multiple`\n        if (isSelectedItem) {\n          firstSelectedItemInArrayFoundRef.value = true\n        }\n      }\n    }\n    else {\n      if (isSelectedItem || isFirstValidItem) {\n        selectedItem.value = node\n      }\n    }\n\n    if (isFirstValidItem) {\n      firstValidItemFoundRef.value = true\n    }\n  },\n  selectedItem,\n  selectedItemText,\n  onItemLeave: () => {\n    content.value?.focus()\n  },\n  itemTextRefCallback: (node, value, disabled) => {\n    const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n    const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n    if (isSelectedItem || isFirstValidItem)\n      selectedItemText.value = node\n  },\n  focusSelectedItem,\n  position: props.position,\n  isPositioned,\n  searchRef: search,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <FocusScope\n      as-child\n      @mount-auto-focus.prevent\n      @unmount-auto-focus=\"\n        (event) => {\n          emits('closeAutoFocus', event);\n          if (event.defaultPrevented) return;\n          rootContext.triggerElement.value?.focus({ preventScroll: true });\n          event.preventDefault();\n        }\n      \"\n    >\n      <DismissableLayer\n        as-child\n        disable-outside-pointer-events\n        @focus-outside.prevent\n        @dismiss=\"rootContext.onOpenChange(false)\"\n        @escape-key-down=\"emits('escapeKeyDown', $event)\"\n        @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n      >\n        <component\n          :is=\"\n            position === 'popper'\n              ? SelectPopperPosition\n              : SelectItemAlignedPosition\n          \"\n          v-bind=\"{ ...$attrs, ...forwardedProps }\"\n          :id=\"rootContext.contentId\"\n          :ref=\"\n            (vnode: ComponentPublicInstance) => {\n              content = unrefElement(vnode) as HTMLElement\n              return undefined\n            }\n          \"\n          role=\"listbox\"\n          :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n          :dir=\"rootContext.dir.value\"\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          }\"\n          @contextmenu.prevent\n          @placed=\"isPositioned = true\"\n          @keydown=\"(handleKeyDown as any)\"\n        >\n          <slot />\n        </component>\n      </DismissableLayer>\n    </FocusScope>\n  </CollectionSlot>\n</template>\n"],"names":["createContext","injectSelectRootContext","useFocusGuards","useBodyScrollLock","useCollection","ref","useHideOthers","useTypeahead","focusFirst","watch","watchEffect","computed","useForwardProps","valueComparator"],"mappings":";;;;;;;;;;;;;;;;;;;AA0CO,MAAM,gCAAyD,GAAA;AAAA,EACpE,kBAAkB,MAAM;AAAA,GAAC;AAAA,EACzB,qBAAqB,MAAM;AAAA,GAAC;AAAA,EAC5B,iBAAiB,MAAM;AAAA;AACzB;AAgCO,MAAM,CAAC,0BAAA,EAA4B,2BAA2B,CAAA,GACjEA,mCAAoC,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBvD,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAEd,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAeC,oCAAA,EAAA;AACf,IAAAC,0CAAA,CAAkB,MAAM,QAAQ,CAAA;AAChC,IAAA,MAAM,EAAE,cAAA,EAAgB,QAAS,EAAA,GAAIC,mCAAc,EAAA;AAEnD,IAAA,MAAM,UAAUC,OAAiB,EAAA;AACjC,IAAAC,kCAAA,CAAc,OAAO,CAAA;AAErB,IAAA,MAAM,EAAE,MAAA,EAAQ,qBAAsB,EAAA,GAAIC,gCAAa,EAAA;AAEvD,IAAA,MAAM,WAAWF,OAAiB,EAAA;AAClC,IAAA,MAAM,eAAeA,OAAiB,EAAA;AACtC,IAAA,MAAM,mBAAmBA,OAAiB,EAAA;AAC1C,IAAM,MAAA,YAAA,GAAeA,QAAI,KAAK,CAAA;AAC9B,IAAM,MAAA,sBAAA,GAAyBA,QAAI,KAAK,CAAA;AACxC,IAAM,MAAA,gCAAA,GAAmCA,QAAI,KAAK,CAAA;AAElD,IAAA,SAAS,iBAAoB,GAAA;AAC3B,MAAI,IAAA,YAAA,CAAa,SAAS,OAAQ,CAAA,KAAA;AAChC,QAAAG,qBAAA,CAAW,CAAC,YAAA,CAAa,KAAO,EAAA,OAAA,CAAQ,KAAK,CAAC,CAAA;AAAA;AAGlD,IAAAC,SAAA,CAAM,cAAc,MAAM;AACxB,MAAkB,iBAAA,EAAA;AAAA,KACnB,CAAA;AAID,IAAM,MAAA,EAAE,YAAc,EAAA,wBAAA,EAA6B,GAAA,WAAA;AACnD,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAA,IAAI,CAAC,OAAQ,CAAA,KAAA;AACX,QAAA;AACF,MAAA,IAAI,gBAAmB,GAAA,EAAE,CAAG,EAAA,CAAA,EAAG,GAAG,CAAE,EAAA;AAEpC,MAAM,MAAA,iBAAA,GAAoB,CAAC,KAAwB,KAAA;AACjD,QAAmB,gBAAA,GAAA;AAAA,UACjB,GAAG,IAAK,CAAA,GAAA;AAAA,YACN,KAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAK,IAAA,wBAAA,CAAyB,OAAO,CAAK,IAAA,CAAA;AAAA,WAClE;AAAA,UACA,GAAG,IAAK,CAAA,GAAA;AAAA,YACN,KAAK,KAAM,CAAA,KAAA,CAAM,KAAK,CAAK,IAAA,wBAAA,CAAyB,OAAO,CAAK,IAAA,CAAA;AAAA;AAClE,SACF;AAAA,OACF;AACA,MAAM,MAAA,eAAA,GAAkB,CAAC,KAAwB,KAAA;AAG/C,QAAA,IAAI,MAAM,WAAgB,KAAA,OAAA;AACxB,UAAA;AAGF,QAAA,IAAI,gBAAiB,CAAA,CAAA,IAAK,EAAM,IAAA,gBAAA,CAAiB,KAAK,EAAI,EAAA;AACxD,UAAA,KAAA,CAAM,cAAe,EAAA;AAAA,SAElB,MAAA;AAEH,UAAA,IAAI,CAAC,OAAA,CAAQ,KAAO,EAAA,QAAA,CAAS,MAAM,MAAqB,CAAA;AACtD,YAAA,YAAA,CAAa,KAAK,CAAA;AAAA;AAEtB,QAAS,QAAA,CAAA,mBAAA,CAAoB,eAAe,iBAAiB,CAAA;AAC7D,QAAA,wBAAA,CAAyB,KAAQ,GAAA,IAAA;AAAA,OACnC;AAEA,MAAI,IAAA,wBAAA,CAAyB,UAAU,IAAM,EAAA;AAC3C,QAAS,QAAA,CAAA,gBAAA,CAAiB,eAAe,iBAAiB,CAAA;AAC1D,QAAS,QAAA,CAAA,gBAAA,CAAiB,aAAa,eAAiB,EAAA;AAAA,UACtD,OAAS,EAAA,IAAA;AAAA,UACT,IAAM,EAAA;AAAA,SACP,CAAA;AAAA;AAGH,MAAA,SAAA,CAAU,MAAM;AACd,QAAS,QAAA,CAAA,mBAAA,CAAoB,eAAe,iBAAiB,CAAA;AAC7D,QAAS,QAAA,CAAA,mBAAA,CAAoB,aAAa,eAAiB,EAAA;AAAA,UACzD,OAAS,EAAA;AAAA,SACV,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAED,IAAA,SAAS,cAAc,KAAsB,EAAA;AAC3C,MAAA,MAAM,aAAgB,GAAA,KAAA,CAAM,OAAW,IAAA,KAAA,CAAM,UAAU,KAAM,CAAA,OAAA;AAG7D,MAAA,IAAI,MAAM,GAAQ,KAAA,KAAA;AAChB,QAAA,KAAA,CAAM,cAAe,EAAA;AAEvB,MAAA,IAAI,CAAC,aAAA,IAAiB,KAAM,CAAA,GAAA,CAAI,MAAW,KAAA,CAAA;AACzC,QAAsB,qBAAA,CAAA,KAAA,CAAM,GAAK,EAAA,QAAA,EAAU,CAAA;AAE7C,MAAI,IAAA,CAAC,WAAW,WAAa,EAAA,MAAA,EAAQ,KAAK,CAAE,CAAA,QAAA,CAAS,KAAM,CAAA,GAAG,CAAG,EAAA;AAC/D,QAAA,MAAM,kBAAkB,QAAS,EAAA,CAAE,GAAI,CAAA,CAAA,CAAA,KAAK,EAAE,GAAG,CAAA;AACjD,QAAI,IAAA,cAAA,GAAiB,CAAC,GAAG,eAAe,CAAA;AAExC,QAAA,IAAI,CAAC,SAAW,EAAA,KAAK,CAAE,CAAA,QAAA,CAAS,MAAM,GAAG,CAAA;AACvC,UAAiB,cAAA,GAAA,cAAA,CAAe,KAAM,EAAA,CAAE,OAAQ,EAAA;AAElD,QAAA,IAAI,CAAC,SAAW,EAAA,WAAW,EAAE,QAAS,CAAA,KAAA,CAAM,GAAG,CAAG,EAAA;AAChD,UAAA,MAAM,iBAAiB,KAAM,CAAA,MAAA;AAC7B,UAAM,MAAA,YAAA,GAAe,cAAe,CAAA,OAAA,CAAQ,cAAc,CAAA;AAC1D,UAAiB,cAAA,GAAA,cAAA,CAAe,KAAM,CAAA,YAAA,GAAe,CAAC,CAAA;AAAA;AAExD,QAAW,UAAA,CAAA,MAAMF,qBAAW,CAAA,cAAc,CAAC,CAAA;AAC3C,QAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AACvB;AAGF,IAAM,MAAA,WAAA,GAAcG,aAAS,MAAM;AACjC,MAAA,IAAI,MAAM,QAAa,KAAA,QAAA;AACrB,QAAO,OAAA,KAAA;AAAA,kBACG,EAAC;AAAA,KACd,CAAA;AAED,IAAM,MAAA,cAAA,GAAiBC,sCAAgB,CAAA,WAAA,CAAY,KAAK,CAAA;AAExD,IAA4B,2BAAA,CAAA;AAAA,MAC1B,OAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,IAAS,KAAA;AAC1B,QAAA,QAAA,CAAS,KAAQ,GAAA,IAAA;AAAA,OACnB;AAAA,MACA,eAAiB,EAAA,CAAC,IAAM,EAAA,KAAA,EAAO,QAAa,KAAA;AAC1C,QAAA,MAAM,gBAAmB,GAAA,CAAC,sBAAuB,CAAA,KAAA,IAAS,CAAC,QAAA;AAC3D,QAAA,MAAM,iBAAiBC,4BAAgB,CAAA,WAAA,CAAY,WAAW,KAAO,EAAA,KAAA,EAAO,YAAY,EAAE,CAAA;AAE1F,QAAI,IAAA,WAAA,CAAY,SAAS,KAAO,EAAA;AAC9B,UAAA,IAAI,iCAAiC,KAAO,EAAA;AAC1C,YAAA;AAAA;AAEF,UAAA,IAAI,kBAAkB,gBAAkB,EAAA;AACtC,YAAA,YAAA,CAAa,KAAQ,GAAA,IAAA;AAGrB,YAAA,IAAI,cAAgB,EAAA;AAClB,cAAA,gCAAA,CAAiC,KAAQ,GAAA,IAAA;AAAA;AAC3C;AACF,SAEG,MAAA;AACH,UAAA,IAAI,kBAAkB,gBAAkB,EAAA;AACtC,YAAA,YAAA,CAAa,KAAQ,GAAA,IAAA;AAAA;AACvB;AAGF,QAAA,IAAI,gBAAkB,EAAA;AACpB,UAAA,sBAAA,CAAuB,KAAQ,GAAA,IAAA;AAAA;AACjC,OACF;AAAA,MACA,YAAA;AAAA,MACA,gBAAA;AAAA,MACA,aAAa,MAAM;AACjB,QAAA,OAAA,CAAQ,OAAO,KAAM,EAAA;AAAA,OACvB;AAAA,MACA,mBAAqB,EAAA,CAAC,IAAM,EAAA,KAAA,EAAO,QAAa,KAAA;AAC9C,QAAA,MAAM,gBAAmB,GAAA,CAAC,sBAAuB,CAAA,KAAA,IAAS,CAAC,QAAA;AAC3D,QAAA,MAAM,iBAAiBA,4BAAgB,CAAA,WAAA,CAAY,WAAW,KAAO,EAAA,KAAA,EAAO,YAAY,EAAE,CAAA;AAE1F,QAAA,IAAI,cAAkB,IAAA,gBAAA;AACpB,UAAA,gBAAA,CAAiB,KAAQ,GAAA,IAAA;AAAA,OAC7B;AAAA,MACA,iBAAA;AAAA,MACA,UAAU,KAAM,CAAA,QAAA;AAAA,MAChB,YAAA;AAAA,MACA,SAAW,EAAA;AAAA,KACZ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectContentImpl.cjs","sources":["../../src/Select/SelectContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  ComponentPublicInstance,\n  Ref,\n} from 'vue'\nimport type { PointerDownOutsideEvent } from '@/DismissableLayer'\nimport type { PopperContentProps } from '@/Popper'\nimport type { AcceptableValue } from '@/shared/types'\nimport { useCollection } from '@/Collection'\nimport {\n  createContext,\n  useFocusGuards,\n  useForwardProps,\n  useHideOthers,\n  useTypeahead,\n} from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\nimport { valueComparator } from './utils'\n\nexport interface SelectContentContext {\n  content?: Ref<HTMLElement | undefined>\n  viewport?: Ref<HTMLElement | undefined>\n  onViewportChange: (node: HTMLElement | undefined) => void\n  itemRefCallback: (\n    node: HTMLElement | undefined,\n    value: AcceptableValue,\n    disabled: boolean\n  ) => void\n  selectedItem?: Ref<HTMLElement | undefined>\n  onItemLeave?: () => void\n  itemTextRefCallback: (\n    node: HTMLElement | undefined,\n    value: AcceptableValue,\n    disabled: boolean\n  ) => void\n  focusSelectedItem?: () => void\n  selectedItemText?: Ref<HTMLElement | undefined>\n  position?: 'item-aligned' | 'popper'\n  isPositioned?: Ref<boolean>\n  searchRef?: Ref<string>\n}\n\nexport const SelectContentDefaultContextValue: SelectContentContext = {\n  onViewportChange: () => {},\n  itemTextRefCallback: () => {},\n  itemRefCallback: () => {},\n}\n\nexport type SelectContentImplEmits = {\n  closeAutoFocus: [event: Event]\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  escapeKeyDown: [event: KeyboardEvent]\n  /**\n   * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  pointerDownOutside: [event: PointerDownOutsideEvent]\n}\n\nexport interface SelectContentImplProps extends PopperContentProps {\n  /**\n   *  The positioning mode to use\n   *\n   *  `item-aligned (default)` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>\n   *  `popper` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.\n   */\n  position?: 'item-aligned' | 'popper'\n  /**\n   * The document.body will be lock, and scrolling will be disabled.\n   *\n   * @defaultValue true\n   */\n  bodyLock?: boolean\n}\n\nexport const [injectSelectContentContext, provideSelectContentContext]\n  = createContext<SelectContentContext>('SelectContent')\n</script>\n\n<script setup lang=\"ts\">\nimport { unrefElement } from '@vueuse/core'\nimport {\n  computed,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { FocusScope } from '@/FocusScope'\nimport { focusFirst } from '@/Menu/utils'\nimport SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'\nimport SelectPopperPosition from './SelectPopperPosition.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nconst props = withDefaults(defineProps<SelectContentImplProps>(), {\n  align: 'start',\n  position: 'item-aligned',\n  bodyLock: true,\n})\nconst emits = defineEmits<SelectContentImplEmits>()\n\nconst rootContext = injectSelectRootContext()\n\nuseFocusGuards()\nuseBodyScrollLock(props.bodyLock)\nconst { CollectionSlot, getItems } = useCollection()\n\nconst content = ref<HTMLElement>()\nuseHideOthers(content)\n\nconst { search, handleTypeaheadSearch } = useTypeahead()\n\nconst viewport = ref<HTMLElement>()\nconst selectedItem = ref<HTMLElement>()\nconst selectedItemText = ref<HTMLElement>()\nconst isPositioned = ref(false)\nconst firstValidItemFoundRef = ref(false)\nconst firstSelectedItemInArrayFoundRef = ref(false)\n\nfunction focusSelectedItem() {\n  if (selectedItem.value && content.value)\n    focusFirst([selectedItem.value, content.value])\n}\n\nwatch(isPositioned, () => {\n  focusSelectedItem()\n})\n\n// prevent selecting items on `pointerup` in some cases after opening from `pointerdown`\n// and close on `pointerup` outside.\nconst { onOpenChange, triggerPointerDownPosRef } = rootContext\nwatchEffect((cleanupFn) => {\n  if (!content.value)\n    return\n  let pointerMoveDelta = { x: 0, y: 0 }\n\n  const handlePointerMove = (event: PointerEvent) => {\n    pointerMoveDelta = {\n      x: Math.abs(\n        Math.round(event.pageX) - (triggerPointerDownPosRef.value?.x ?? 0),\n      ),\n      y: Math.abs(\n        Math.round(event.pageY) - (triggerPointerDownPosRef.value?.y ?? 0),\n      ),\n    }\n  }\n  const handlePointerUp = (event: PointerEvent) => {\n    // Prevent options from being untappable on touch devices\n    // https://github.com/unovue/reka-ui/issues/804\n    if (event.pointerType === 'touch')\n      return\n\n    // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.\n    if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {\n      event.preventDefault()\n    }\n    else {\n      // otherwise, if the event was outside the content, close.\n      if (!content.value?.contains(event.target as HTMLElement))\n        onOpenChange(false)\n    }\n    document.removeEventListener('pointermove', handlePointerMove)\n    triggerPointerDownPosRef.value = null\n  }\n\n  if (triggerPointerDownPosRef.value !== null) {\n    document.addEventListener('pointermove', handlePointerMove)\n    document.addEventListener('pointerup', handlePointerUp, {\n      capture: true,\n      once: true,\n    })\n  }\n\n  cleanupFn(() => {\n    document.removeEventListener('pointermove', handlePointerMove)\n    document.removeEventListener('pointerup', handlePointerUp, {\n      capture: true,\n    })\n  })\n})\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const isModifierKey = event.ctrlKey || event.altKey || event.metaKey\n\n  // select should not be navigated using tab key so we prevent it\n  if (event.key === 'Tab')\n    event.preventDefault()\n\n  if (!isModifierKey && event.key.length === 1)\n    handleTypeaheadSearch(event.key, getItems())\n\n  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n    const collectionItems = getItems().map(i => i.ref)\n    let candidateNodes = [...collectionItems]\n\n    if (['ArrowUp', 'End'].includes(event.key))\n      candidateNodes = candidateNodes.slice().reverse()\n\n    if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n      const currentElement = event.target as HTMLElement\n      const currentIndex = candidateNodes.indexOf(currentElement)\n      candidateNodes = candidateNodes.slice(currentIndex + 1)\n    }\n    setTimeout(() => focusFirst(candidateNodes))\n    event.preventDefault()\n  }\n}\n\nconst pickedProps = computed(() => {\n  if (props.position === 'popper')\n    return props\n  else return {}\n})\n\nconst forwardedProps = useForwardProps(pickedProps.value)\n\nprovideSelectContentContext({\n  content,\n  viewport,\n  onViewportChange: (node) => {\n    viewport.value = node\n  },\n  itemRefCallback: (node, value, disabled) => {\n    const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n    const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n    if (rootContext.multiple.value) {\n      if (firstSelectedItemInArrayFoundRef.value) {\n        return\n      }\n      if (isSelectedItem || isFirstValidItem) {\n        selectedItem.value = node\n\n        // make sure to keep the first item highlighted when `multiple`\n        if (isSelectedItem) {\n          firstSelectedItemInArrayFoundRef.value = true\n        }\n      }\n    }\n    else {\n      if (isSelectedItem || isFirstValidItem) {\n        selectedItem.value = node\n      }\n    }\n\n    if (isFirstValidItem) {\n      firstValidItemFoundRef.value = true\n    }\n  },\n  selectedItem,\n  selectedItemText,\n  onItemLeave: () => {\n    content.value?.focus()\n  },\n  itemTextRefCallback: (node, value, disabled) => {\n    const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n    const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n    if (isSelectedItem || isFirstValidItem)\n      selectedItemText.value = node\n  },\n  focusSelectedItem,\n  position: props.position,\n  isPositioned,\n  searchRef: search,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <FocusScope\n      as-child\n      @mount-auto-focus.prevent\n      @unmount-auto-focus=\"\n        (event) => {\n          emits('closeAutoFocus', event);\n          if (event.defaultPrevented) return;\n          rootContext.triggerElement.value?.focus({ preventScroll: true });\n          event.preventDefault();\n        }\n      \"\n    >\n      <DismissableLayer\n        as-child\n        disable-outside-pointer-events\n        @focus-outside.prevent\n        @dismiss=\"rootContext.onOpenChange(false)\"\n        @escape-key-down=\"emits('escapeKeyDown', $event)\"\n        @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n      >\n        <component\n          :is=\"\n            position === 'popper'\n              ? SelectPopperPosition\n              : SelectItemAlignedPosition\n          \"\n          v-bind=\"{ ...$attrs, ...forwardedProps }\"\n          :id=\"rootContext.contentId\"\n          :ref=\"\n            (vnode: ComponentPublicInstance) => {\n              content = unrefElement(vnode) as HTMLElement\n              return undefined\n            }\n          \"\n          role=\"listbox\"\n          :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n          :dir=\"rootContext.dir.value\"\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          }\"\n          @contextmenu.prevent\n          @placed=\"isPositioned = true\"\n          @keydown=\"(handleKeyDown as any)\"\n        >\n          <slot />\n        </component>\n      </DismissableLayer>\n    </FocusScope>\n  </CollectionSlot>\n</template>\n"],"names":["createContext","injectSelectRootContext","useFocusGuards","useBodyScrollLock","useCollection","ref","useHideOthers","useTypeahead","focusFirst","watch","watchEffect","computed","useForwardProps","valueComparator"],"mappings":"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"}

package/dist/Select/SelectContentImpl.js

@@ -1,7 +1,6 @@
 import { defineComponent, ref, watch, watchEffect, computed, createBlock, openBlock, unref, withCtx, createVNode, withModifiers, resolveDynamicComponent, mergeProps, renderSlot } from 'vue';
-import { _ as _sfc_main$2 } from '../DismissableLayer/DismissableLayer.js';
-import { f as focusFirst } from '../Menu/utils.js';
 import { unrefElement } from '@vueuse/core';
+import { f as focusFirst } from '../Menu/utils.js';
 import { _ as _sfc_main$4 } from './SelectItemAlignedPosition.js';
 import { _ as _sfc_main$3 } from './SelectPopperPosition.js';
 import { u as useCollection } from '../Collection/Collection.js';
@@ -13,6 +12,7 @@ import { u as useHideOthers } from '../shared/useHideOthers.js';
 import { u as useTypeahead } from '../shared/useTypeahead.js';
 import { u as useForwardProps } from '../shared/useForwardProps.js';
 import { _ as _sfc_main$1 } from '../FocusScope/FocusScope.js';
+import { _ as _sfc_main$2 } from '../DismissableLayer/DismissableLayer.js';
 import { i as injectSelectRootContext } from './SelectRoot.js';
 
 const SelectContentDefaultContextValue = {

package/dist/Select/SelectContentImpl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContentImpl.js","sources":["../../src/Select/SelectContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PointerDownOutsideEvent } from '@/DismissableLayer'\nimport type { PopperContentProps } from '@/Popper'\nimport type { AcceptableValue } from '@/shared/types'\nimport type {\n  ComponentPublicInstance,\n  Ref,\n} from 'vue'\nimport { useCollection } from '@/Collection'\nimport {\n  createContext,\n  useFocusGuards,\n  useForwardProps,\n  useHideOthers,\n  useTypeahead,\n} from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\nimport { valueComparator } from './utils'\n\nexport interface SelectContentContext {\n  content?: Ref<HTMLElement | undefined>\n  viewport?: Ref<HTMLElement | undefined>\n  onViewportChange: (node: HTMLElement | undefined) => void\n  itemRefCallback: (\n    node: HTMLElement | undefined,\n    value: AcceptableValue,\n    disabled: boolean\n  ) => void\n  selectedItem?: Ref<HTMLElement | undefined>\n  onItemLeave?: () => void\n  itemTextRefCallback: (\n    node: HTMLElement | undefined,\n    value: AcceptableValue,\n    disabled: boolean\n  ) => void\n  focusSelectedItem?: () => void\n  selectedItemText?: Ref<HTMLElement | undefined>\n  position?: 'item-aligned' | 'popper'\n  isPositioned?: Ref<boolean>\n  searchRef?: Ref<string>\n}\n\nexport const SelectContentDefaultContextValue: SelectContentContext = {\n  onViewportChange: () => {},\n  itemTextRefCallback: () => {},\n  itemRefCallback: () => {},\n}\n\nexport type SelectContentImplEmits = {\n  closeAutoFocus: [event: Event]\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  escapeKeyDown: [event: KeyboardEvent]\n  /**\n   * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  pointerDownOutside: [event: PointerDownOutsideEvent]\n}\n\nexport interface SelectContentImplProps extends PopperContentProps {\n  /**\n   *  The positioning mode to use\n   *\n   *  `item-aligned (default)` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>\n   *  `popper` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.\n   */\n  position?: 'item-aligned' | 'popper'\n  /**\n   * The document.body will be lock, and scrolling will be disabled.\n   *\n   * @defaultValue true\n   */\n  bodyLock?: boolean\n}\n\nexport const [injectSelectContentContext, provideSelectContentContext]\n  = createContext<SelectContentContext>('SelectContent')\n</script>\n\n<script setup lang=\"ts\">\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { FocusScope } from '@/FocusScope'\nimport { focusFirst } from '@/Menu/utils'\nimport { unrefElement } from '@vueuse/core'\nimport {\n  computed,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'\nimport SelectPopperPosition from './SelectPopperPosition.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nconst props = withDefaults(defineProps<SelectContentImplProps>(), {\n  align: 'start',\n  position: 'item-aligned',\n  bodyLock: true,\n})\nconst emits = defineEmits<SelectContentImplEmits>()\n\nconst rootContext = injectSelectRootContext()\n\nuseFocusGuards()\nuseBodyScrollLock(props.bodyLock)\nconst { CollectionSlot, getItems } = useCollection()\n\nconst content = ref<HTMLElement>()\nuseHideOthers(content)\n\nconst { search, handleTypeaheadSearch } = useTypeahead()\n\nconst viewport = ref<HTMLElement>()\nconst selectedItem = ref<HTMLElement>()\nconst selectedItemText = ref<HTMLElement>()\nconst isPositioned = ref(false)\nconst firstValidItemFoundRef = ref(false)\nconst firstSelectedItemInArrayFoundRef = ref(false)\n\nfunction focusSelectedItem() {\n  if (selectedItem.value && content.value)\n    focusFirst([selectedItem.value, content.value])\n}\n\nwatch(isPositioned, () => {\n  focusSelectedItem()\n})\n\n// prevent selecting items on `pointerup` in some cases after opening from `pointerdown`\n// and close on `pointerup` outside.\nconst { onOpenChange, triggerPointerDownPosRef } = rootContext\nwatchEffect((cleanupFn) => {\n  if (!content.value)\n    return\n  let pointerMoveDelta = { x: 0, y: 0 }\n\n  const handlePointerMove = (event: PointerEvent) => {\n    pointerMoveDelta = {\n      x: Math.abs(\n        Math.round(event.pageX) - (triggerPointerDownPosRef.value?.x ?? 0),\n      ),\n      y: Math.abs(\n        Math.round(event.pageY) - (triggerPointerDownPosRef.value?.y ?? 0),\n      ),\n    }\n  }\n  const handlePointerUp = (event: PointerEvent) => {\n    // Prevent options from being untappable on touch devices\n    // https://github.com/unovue/reka-ui/issues/804\n    if (event.pointerType === 'touch')\n      return\n\n    // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.\n    if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {\n      event.preventDefault()\n    }\n    else {\n      // otherwise, if the event was outside the content, close.\n      if (!content.value?.contains(event.target as HTMLElement))\n        onOpenChange(false)\n    }\n    document.removeEventListener('pointermove', handlePointerMove)\n    triggerPointerDownPosRef.value = null\n  }\n\n  if (triggerPointerDownPosRef.value !== null) {\n    document.addEventListener('pointermove', handlePointerMove)\n    document.addEventListener('pointerup', handlePointerUp, {\n      capture: true,\n      once: true,\n    })\n  }\n\n  cleanupFn(() => {\n    document.removeEventListener('pointermove', handlePointerMove)\n    document.removeEventListener('pointerup', handlePointerUp, {\n      capture: true,\n    })\n  })\n})\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const isModifierKey = event.ctrlKey || event.altKey || event.metaKey\n\n  // select should not be navigated using tab key so we prevent it\n  if (event.key === 'Tab')\n    event.preventDefault()\n\n  if (!isModifierKey && event.key.length === 1)\n    handleTypeaheadSearch(event.key, getItems())\n\n  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n    const collectionItems = getItems().map(i => i.ref)\n    let candidateNodes = [...collectionItems]\n\n    if (['ArrowUp', 'End'].includes(event.key))\n      candidateNodes = candidateNodes.slice().reverse()\n\n    if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n      const currentElement = event.target as HTMLElement\n      const currentIndex = candidateNodes.indexOf(currentElement)\n      candidateNodes = candidateNodes.slice(currentIndex + 1)\n    }\n    setTimeout(() => focusFirst(candidateNodes))\n    event.preventDefault()\n  }\n}\n\nconst pickedProps = computed(() => {\n  if (props.position === 'popper')\n    return props\n  else return {}\n})\n\nconst forwardedProps = useForwardProps(pickedProps.value)\n\nprovideSelectContentContext({\n  content,\n  viewport,\n  onViewportChange: (node) => {\n    viewport.value = node\n  },\n  itemRefCallback: (node, value, disabled) => {\n    const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n    const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n    if (rootContext.multiple.value) {\n      if (firstSelectedItemInArrayFoundRef.value) {\n        return\n      }\n      if (isSelectedItem || isFirstValidItem) {\n        selectedItem.value = node\n\n        // make sure to keep the first item highlighted when `multiple`\n        if (isSelectedItem) {\n          firstSelectedItemInArrayFoundRef.value = true\n        }\n      }\n    }\n    else {\n      if (isSelectedItem || isFirstValidItem) {\n        selectedItem.value = node\n      }\n    }\n\n    if (isFirstValidItem) {\n      firstValidItemFoundRef.value = true\n    }\n  },\n  selectedItem,\n  selectedItemText,\n  onItemLeave: () => {\n    content.value?.focus()\n  },\n  itemTextRefCallback: (node, value, disabled) => {\n    const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n    const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n    if (isSelectedItem || isFirstValidItem)\n      selectedItemText.value = node\n  },\n  focusSelectedItem,\n  position: props.position,\n  isPositioned,\n  searchRef: search,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <FocusScope\n      as-child\n      @mount-auto-focus.prevent\n      @unmount-auto-focus=\"\n        (event) => {\n          emits('closeAutoFocus', event);\n          if (event.defaultPrevented) return;\n          rootContext.triggerElement.value?.focus({ preventScroll: true });\n          event.preventDefault();\n        }\n      \"\n    >\n      <DismissableLayer\n        as-child\n        disable-outside-pointer-events\n        @focus-outside.prevent\n        @dismiss=\"rootContext.onOpenChange(false)\"\n        @escape-key-down=\"emits('escapeKeyDown', $event)\"\n        @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n      >\n        <component\n          :is=\"\n            position === 'popper'\n              ? SelectPopperPosition\n              : SelectItemAlignedPosition\n          \"\n          v-bind=\"{ ...$attrs, ...forwardedProps }\"\n          :id=\"rootContext.contentId\"\n          :ref=\"\n            (vnode: ComponentPublicInstance) => {\n              content = unrefElement(vnode) as HTMLElement\n              return undefined\n            }\n          \"\n          role=\"listbox\"\n          :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n          :dir=\"rootContext.dir.value\"\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          }\"\n          @contextmenu.prevent\n          @placed=\"isPositioned = true\"\n          @keydown=\"(handleKeyDown as any)\"\n        >\n          <slot />\n        </component>\n      </DismissableLayer>\n    </FocusScope>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectContentImpl.js","sources":["../../src/Select/SelectContentImpl.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  ComponentPublicInstance,\n  Ref,\n} from 'vue'\nimport type { PointerDownOutsideEvent } from '@/DismissableLayer'\nimport type { PopperContentProps } from '@/Popper'\nimport type { AcceptableValue } from '@/shared/types'\nimport { useCollection } from '@/Collection'\nimport {\n  createContext,\n  useFocusGuards,\n  useForwardProps,\n  useHideOthers,\n  useTypeahead,\n} from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\nimport { valueComparator } from './utils'\n\nexport interface SelectContentContext {\n  content?: Ref<HTMLElement | undefined>\n  viewport?: Ref<HTMLElement | undefined>\n  onViewportChange: (node: HTMLElement | undefined) => void\n  itemRefCallback: (\n    node: HTMLElement | undefined,\n    value: AcceptableValue,\n    disabled: boolean\n  ) => void\n  selectedItem?: Ref<HTMLElement | undefined>\n  onItemLeave?: () => void\n  itemTextRefCallback: (\n    node: HTMLElement | undefined,\n    value: AcceptableValue,\n    disabled: boolean\n  ) => void\n  focusSelectedItem?: () => void\n  selectedItemText?: Ref<HTMLElement | undefined>\n  position?: 'item-aligned' | 'popper'\n  isPositioned?: Ref<boolean>\n  searchRef?: Ref<string>\n}\n\nexport const SelectContentDefaultContextValue: SelectContentContext = {\n  onViewportChange: () => {},\n  itemTextRefCallback: () => {},\n  itemRefCallback: () => {},\n}\n\nexport type SelectContentImplEmits = {\n  closeAutoFocus: [event: Event]\n  /**\n   * Event handler called when the escape key is down.\n   * Can be prevented.\n   */\n  escapeKeyDown: [event: KeyboardEvent]\n  /**\n   * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.\n   * Can be prevented.\n   */\n  pointerDownOutside: [event: PointerDownOutsideEvent]\n}\n\nexport interface SelectContentImplProps extends PopperContentProps {\n  /**\n   *  The positioning mode to use\n   *\n   *  `item-aligned (default)` - behaves similarly to a native MacOS menu by positioning content relative to the active item. <br>\n   *  `popper` - positions content in the same way as our other primitives, for example `Popover` or `DropdownMenu`.\n   */\n  position?: 'item-aligned' | 'popper'\n  /**\n   * The document.body will be lock, and scrolling will be disabled.\n   *\n   * @defaultValue true\n   */\n  bodyLock?: boolean\n}\n\nexport const [injectSelectContentContext, provideSelectContentContext]\n  = createContext<SelectContentContext>('SelectContent')\n</script>\n\n<script setup lang=\"ts\">\nimport { unrefElement } from '@vueuse/core'\nimport {\n  computed,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { FocusScope } from '@/FocusScope'\nimport { focusFirst } from '@/Menu/utils'\nimport SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'\nimport SelectPopperPosition from './SelectPopperPosition.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nconst props = withDefaults(defineProps<SelectContentImplProps>(), {\n  align: 'start',\n  position: 'item-aligned',\n  bodyLock: true,\n})\nconst emits = defineEmits<SelectContentImplEmits>()\n\nconst rootContext = injectSelectRootContext()\n\nuseFocusGuards()\nuseBodyScrollLock(props.bodyLock)\nconst { CollectionSlot, getItems } = useCollection()\n\nconst content = ref<HTMLElement>()\nuseHideOthers(content)\n\nconst { search, handleTypeaheadSearch } = useTypeahead()\n\nconst viewport = ref<HTMLElement>()\nconst selectedItem = ref<HTMLElement>()\nconst selectedItemText = ref<HTMLElement>()\nconst isPositioned = ref(false)\nconst firstValidItemFoundRef = ref(false)\nconst firstSelectedItemInArrayFoundRef = ref(false)\n\nfunction focusSelectedItem() {\n  if (selectedItem.value && content.value)\n    focusFirst([selectedItem.value, content.value])\n}\n\nwatch(isPositioned, () => {\n  focusSelectedItem()\n})\n\n// prevent selecting items on `pointerup` in some cases after opening from `pointerdown`\n// and close on `pointerup` outside.\nconst { onOpenChange, triggerPointerDownPosRef } = rootContext\nwatchEffect((cleanupFn) => {\n  if (!content.value)\n    return\n  let pointerMoveDelta = { x: 0, y: 0 }\n\n  const handlePointerMove = (event: PointerEvent) => {\n    pointerMoveDelta = {\n      x: Math.abs(\n        Math.round(event.pageX) - (triggerPointerDownPosRef.value?.x ?? 0),\n      ),\n      y: Math.abs(\n        Math.round(event.pageY) - (triggerPointerDownPosRef.value?.y ?? 0),\n      ),\n    }\n  }\n  const handlePointerUp = (event: PointerEvent) => {\n    // Prevent options from being untappable on touch devices\n    // https://github.com/unovue/reka-ui/issues/804\n    if (event.pointerType === 'touch')\n      return\n\n    // If the pointer hasn't moved by a certain threshold then we prevent selecting item on `pointerup`.\n    if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {\n      event.preventDefault()\n    }\n    else {\n      // otherwise, if the event was outside the content, close.\n      if (!content.value?.contains(event.target as HTMLElement))\n        onOpenChange(false)\n    }\n    document.removeEventListener('pointermove', handlePointerMove)\n    triggerPointerDownPosRef.value = null\n  }\n\n  if (triggerPointerDownPosRef.value !== null) {\n    document.addEventListener('pointermove', handlePointerMove)\n    document.addEventListener('pointerup', handlePointerUp, {\n      capture: true,\n      once: true,\n    })\n  }\n\n  cleanupFn(() => {\n    document.removeEventListener('pointermove', handlePointerMove)\n    document.removeEventListener('pointerup', handlePointerUp, {\n      capture: true,\n    })\n  })\n})\n\nfunction handleKeyDown(event: KeyboardEvent) {\n  const isModifierKey = event.ctrlKey || event.altKey || event.metaKey\n\n  // select should not be navigated using tab key so we prevent it\n  if (event.key === 'Tab')\n    event.preventDefault()\n\n  if (!isModifierKey && event.key.length === 1)\n    handleTypeaheadSearch(event.key, getItems())\n\n  if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n    const collectionItems = getItems().map(i => i.ref)\n    let candidateNodes = [...collectionItems]\n\n    if (['ArrowUp', 'End'].includes(event.key))\n      candidateNodes = candidateNodes.slice().reverse()\n\n    if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n      const currentElement = event.target as HTMLElement\n      const currentIndex = candidateNodes.indexOf(currentElement)\n      candidateNodes = candidateNodes.slice(currentIndex + 1)\n    }\n    setTimeout(() => focusFirst(candidateNodes))\n    event.preventDefault()\n  }\n}\n\nconst pickedProps = computed(() => {\n  if (props.position === 'popper')\n    return props\n  else return {}\n})\n\nconst forwardedProps = useForwardProps(pickedProps.value)\n\nprovideSelectContentContext({\n  content,\n  viewport,\n  onViewportChange: (node) => {\n    viewport.value = node\n  },\n  itemRefCallback: (node, value, disabled) => {\n    const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n    const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n    if (rootContext.multiple.value) {\n      if (firstSelectedItemInArrayFoundRef.value) {\n        return\n      }\n      if (isSelectedItem || isFirstValidItem) {\n        selectedItem.value = node\n\n        // make sure to keep the first item highlighted when `multiple`\n        if (isSelectedItem) {\n          firstSelectedItemInArrayFoundRef.value = true\n        }\n      }\n    }\n    else {\n      if (isSelectedItem || isFirstValidItem) {\n        selectedItem.value = node\n      }\n    }\n\n    if (isFirstValidItem) {\n      firstValidItemFoundRef.value = true\n    }\n  },\n  selectedItem,\n  selectedItemText,\n  onItemLeave: () => {\n    content.value?.focus()\n  },\n  itemTextRefCallback: (node, value, disabled) => {\n    const isFirstValidItem = !firstValidItemFoundRef.value && !disabled\n    const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by)\n\n    if (isSelectedItem || isFirstValidItem)\n      selectedItemText.value = node\n  },\n  focusSelectedItem,\n  position: props.position,\n  isPositioned,\n  searchRef: search,\n})\n</script>\n\n<template>\n  <CollectionSlot>\n    <FocusScope\n      as-child\n      @mount-auto-focus.prevent\n      @unmount-auto-focus=\"\n        (event) => {\n          emits('closeAutoFocus', event);\n          if (event.defaultPrevented) return;\n          rootContext.triggerElement.value?.focus({ preventScroll: true });\n          event.preventDefault();\n        }\n      \"\n    >\n      <DismissableLayer\n        as-child\n        disable-outside-pointer-events\n        @focus-outside.prevent\n        @dismiss=\"rootContext.onOpenChange(false)\"\n        @escape-key-down=\"emits('escapeKeyDown', $event)\"\n        @pointer-down-outside=\"emits('pointerDownOutside', $event)\"\n      >\n        <component\n          :is=\"\n            position === 'popper'\n              ? SelectPopperPosition\n              : SelectItemAlignedPosition\n          \"\n          v-bind=\"{ ...$attrs, ...forwardedProps }\"\n          :id=\"rootContext.contentId\"\n          :ref=\"\n            (vnode: ComponentPublicInstance) => {\n              content = unrefElement(vnode) as HTMLElement\n              return undefined\n            }\n          \"\n          role=\"listbox\"\n          :data-state=\"rootContext.open.value ? 'open' : 'closed'\"\n          :dir=\"rootContext.dir.value\"\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          }\"\n          @contextmenu.prevent\n          @placed=\"isPositioned = true\"\n          @keydown=\"(handleKeyDown as any)\"\n        >\n          <slot />\n        </component>\n      </DismissableLayer>\n    </FocusScope>\n  </CollectionSlot>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/Select/SelectItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.cjs","sources":["../../src/Select/SelectItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue } from '@/shared/types'\nimport type { Ref } from 'vue'\nimport { useCollection } from '@/Collection'\nimport { createContext, getActiveElement, handleAndDispatchCustomEvent, useForwardExpose, useId } from '@/shared'\n\ninterface SelectItemContext<T = AcceptableValue> {\n  value: T\n  textId: string\n  disabled: Ref<boolean>\n  isSelected: Ref<boolean>\n  onItemTextChange: (node: HTMLElement | undefined) => void\n}\n\nexport const [injectSelectItemContext, provideSelectItemContext]\n    = createContext<SelectItemContext>('SelectItem')\n\nexport type SelectEvent<T> = CustomEvent<{ originalEvent: PointerEvent | KeyboardEvent, value?: T }>\n\nexport type SelectItemEmits<T = AcceptableValue> = {\n  /** Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`. */\n  select: [event: SelectEvent<T>]\n}\n\nexport interface SelectItemProps<T = AcceptableValue> extends PrimitiveProps {\n  /** The value given as data when submitted with a `name`. */\n  value: T\n  /** When `true`, prevents the user from interacting with the item. */\n  disabled?: boolean\n  /**\n   * Optional text used for typeahead purposes.\n   *\n   * By default the typeahead behavior will use the `.textContent` of the `SelectItemText` part.\n   *\n   * Use this when the content is complex, or you have non-textual content inside.\n   */\n  textValue?: string\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { Primitive } from '@/Primitive'\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  toRefs,\n} from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { SELECTION_KEYS, valueComparator } from './utils'\n\nconst props = defineProps<SelectItemProps>()\nconst emits = defineEmits<SelectItemEmits<T>>()\nconst { disabled } = toRefs(props)\n\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext()\nconst { forwardRef, currentElement } = useForwardExpose()\nconst { CollectionItem } = useCollection()\n\nconst isSelected = computed(() => valueComparator(rootContext.modelValue?.value, props.value, rootContext.by))\nconst isFocused = ref(false)\nconst textValue = ref(props.textValue ?? '')\nconst textId = useId(undefined, 'reka-select-item-text')\n\nconst SELECT_SELECT = 'select.select'\n\nasync function handleSelectCustomEvent(ev: PointerEvent | KeyboardEvent) {\n  if (ev.defaultPrevented)\n    return\n\n  const eventDetail = { originalEvent: ev, value: props.value as T }\n  handleAndDispatchCustomEvent(SELECT_SELECT, handleSelect, eventDetail)\n}\n\nasync function handleSelect(ev: SelectEvent<T>) {\n  await nextTick()\n  emits('select', ev)\n  if (ev.defaultPrevented)\n    return\n\n  if (!disabled.value) {\n    rootContext.onValueChange(props.value)\n    if (!rootContext.multiple.value)\n      rootContext.onOpenChange(false)\n  }\n}\n\nasync function handlePointerMove(event: PointerEvent) {\n  await nextTick()\n  if (event.defaultPrevented)\n    return\n  if (disabled.value) {\n    contentContext.onItemLeave?.()\n  }\n  else {\n    // even though safari doesn't support this option, it's acceptable\n    // as it only means it might scroll a few pixels when using the pointer.\n    (event.currentTarget as HTMLElement | null)?.focus({ preventScroll: true })\n  }\n}\n\nasync function handlePointerLeave(event: PointerEvent) {\n  await nextTick()\n  if (event.defaultPrevented)\n    return\n  if (event.currentTarget === getActiveElement())\n    contentContext.onItemLeave?.()\n}\n\nasync function handleKeyDown(event: KeyboardEvent) {\n  await nextTick()\n  if (event.defaultPrevented)\n    return\n  const isTypingAhead = contentContext.searchRef?.value !== ''\n  if (isTypingAhead && event.key === ' ')\n    return\n  if (SELECTION_KEYS.includes(event.key))\n    handleSelectCustomEvent(event)\n  // prevent page scroll if using the space key to select an item\n  if (event.key === ' ')\n    event.preventDefault()\n}\n\nif (props.value === '') {\n  throw new Error(\n    'A <SelectItem /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.',\n  )\n}\n\nonMounted(() => {\n  if (!currentElement.value)\n    return\n  contentContext.itemRefCallback(\n    currentElement.value,\n    props.value,\n    props.disabled,\n  )\n})\n\nprovideSelectItemContext({\n  value: props.value,\n  disabled,\n  textId,\n  isSelected,\n  onItemTextChange: (node) => {\n    textValue.value = ((textValue.value || node?.textContent) ?? '').trim()\n  },\n})\n</script>\n\n<template>\n  <CollectionItem :value=\"{ textValue }\">\n    <Primitive\n      :ref=\"forwardRef\"\n      role=\"option\"\n      :aria-labelledby=\"textId\"\n      :data-highlighted=\"isFocused ? '' : undefined\"\n      :aria-selected=\"isSelected\"\n      :data-state=\"isSelected ? 'checked' : 'unchecked'\"\n      :aria-disabled=\"disabled || undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :tabindex=\"disabled ? undefined : -1\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      @focus=\"isFocused = true\"\n      @blur=\"isFocused = false\"\n      @pointerup=\"handleSelectCustomEvent\"\n      @pointerdown=\"(event) => {\n        (event.currentTarget as HTMLElement).focus({ preventScroll: true })\n      }\"\n      @touchend.prevent.stop\n      @pointermove=\"handlePointerMove\"\n      @pointerleave=\"handlePointerLeave\"\n      @keydown=\"handleKeyDown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n</template>\n"],"names":["createContext","toRefs","injectSelectRootContext","injectSelectContentContext","useForwardExpose","useCollection","computed","valueComparator","ref","useId","handleAndDispatchCustomEvent","nextTick","getActiveElement","SELECTION_KEYS","onMounted"],"mappings":"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"}
+{"version":3,"file":"SelectItem.cjs","sources":["../../src/Select/SelectItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue } from '@/shared/types'\nimport { useCollection } from '@/Collection'\nimport { createContext, getActiveElement, handleAndDispatchCustomEvent, useForwardExpose, useId } from '@/shared'\n\ninterface SelectItemContext<T = AcceptableValue> {\n  value: T\n  textId: string\n  disabled: Ref<boolean>\n  isSelected: Ref<boolean>\n  onItemTextChange: (node: HTMLElement | undefined) => void\n}\n\nexport const [injectSelectItemContext, provideSelectItemContext]\n    = createContext<SelectItemContext>('SelectItem')\n\nexport type SelectEvent<T> = CustomEvent<{ originalEvent: PointerEvent | KeyboardEvent, value?: T }>\n\nexport type SelectItemEmits<T = AcceptableValue> = {\n  /** Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`. */\n  select: [event: SelectEvent<T>]\n}\n\nexport interface SelectItemProps<T = AcceptableValue> extends PrimitiveProps {\n  /** The value given as data when submitted with a `name`. */\n  value: T\n  /** When `true`, prevents the user from interacting with the item. */\n  disabled?: boolean\n  /**\n   * Optional text used for typeahead purposes.\n   *\n   * By default the typeahead behavior will use the `.textContent` of the `SelectItemText` part.\n   *\n   * Use this when the content is complex, or you have non-textual content inside.\n   */\n  textValue?: string\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  toRefs,\n} from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { SELECTION_KEYS, valueComparator } from './utils'\n\nconst props = defineProps<SelectItemProps>()\nconst emits = defineEmits<SelectItemEmits<T>>()\nconst { disabled } = toRefs(props)\n\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext()\nconst { forwardRef, currentElement } = useForwardExpose()\nconst { CollectionItem } = useCollection()\n\nconst isSelected = computed(() => valueComparator(rootContext.modelValue?.value, props.value, rootContext.by))\nconst isFocused = ref(false)\nconst textValue = ref(props.textValue ?? '')\nconst textId = useId(undefined, 'reka-select-item-text')\n\nconst SELECT_SELECT = 'select.select'\n\nasync function handleSelectCustomEvent(ev: PointerEvent | KeyboardEvent) {\n  if (ev.defaultPrevented)\n    return\n\n  const eventDetail = { originalEvent: ev, value: props.value as T }\n  handleAndDispatchCustomEvent(SELECT_SELECT, handleSelect, eventDetail)\n}\n\nasync function handleSelect(ev: SelectEvent<T>) {\n  await nextTick()\n  emits('select', ev)\n  if (ev.defaultPrevented)\n    return\n\n  if (!disabled.value) {\n    rootContext.onValueChange(props.value)\n    if (!rootContext.multiple.value)\n      rootContext.onOpenChange(false)\n  }\n}\n\nasync function handlePointerMove(event: PointerEvent) {\n  await nextTick()\n  if (event.defaultPrevented)\n    return\n  if (disabled.value) {\n    contentContext.onItemLeave?.()\n  }\n  else {\n    // even though safari doesn't support this option, it's acceptable\n    // as it only means it might scroll a few pixels when using the pointer.\n    (event.currentTarget as HTMLElement | null)?.focus({ preventScroll: true })\n  }\n}\n\nasync function handlePointerLeave(event: PointerEvent) {\n  await nextTick()\n  if (event.defaultPrevented)\n    return\n  if (event.currentTarget === getActiveElement())\n    contentContext.onItemLeave?.()\n}\n\nasync function handleKeyDown(event: KeyboardEvent) {\n  await nextTick()\n  if (event.defaultPrevented)\n    return\n  const isTypingAhead = contentContext.searchRef?.value !== ''\n  if (isTypingAhead && event.key === ' ')\n    return\n  if (SELECTION_KEYS.includes(event.key))\n    handleSelectCustomEvent(event)\n  // prevent page scroll if using the space key to select an item\n  if (event.key === ' ')\n    event.preventDefault()\n}\n\nif (props.value === '') {\n  throw new Error(\n    'A <SelectItem /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.',\n  )\n}\n\nonMounted(() => {\n  if (!currentElement.value)\n    return\n  contentContext.itemRefCallback(\n    currentElement.value,\n    props.value,\n    props.disabled,\n  )\n})\n\nprovideSelectItemContext({\n  value: props.value,\n  disabled,\n  textId,\n  isSelected,\n  onItemTextChange: (node) => {\n    textValue.value = ((textValue.value || node?.textContent) ?? '').trim()\n  },\n})\n</script>\n\n<template>\n  <CollectionItem :value=\"{ textValue }\">\n    <Primitive\n      :ref=\"forwardRef\"\n      role=\"option\"\n      :aria-labelledby=\"textId\"\n      :data-highlighted=\"isFocused ? '' : undefined\"\n      :aria-selected=\"isSelected\"\n      :data-state=\"isSelected ? 'checked' : 'unchecked'\"\n      :aria-disabled=\"disabled || undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :tabindex=\"disabled ? undefined : -1\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      @focus=\"isFocused = true\"\n      @blur=\"isFocused = false\"\n      @pointerup=\"handleSelectCustomEvent\"\n      @pointerdown=\"(event) => {\n        (event.currentTarget as HTMLElement).focus({ preventScroll: true })\n      }\"\n      @touchend.prevent.stop\n      @pointermove=\"handlePointerMove\"\n      @pointerleave=\"handlePointerLeave\"\n      @keydown=\"handleKeyDown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n</template>\n"],"names":["createContext","toRefs","injectSelectRootContext","injectSelectContentContext","useForwardExpose","useCollection","computed","valueComparator","ref","useId","handleAndDispatchCustomEvent","nextTick","getActiveElement","SELECTION_KEYS","onMounted"],"mappings":"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"}

package/dist/Select/SelectItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItem.js","sources":["../../src/Select/SelectItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue } from '@/shared/types'\nimport type { Ref } from 'vue'\nimport { useCollection } from '@/Collection'\nimport { createContext, getActiveElement, handleAndDispatchCustomEvent, useForwardExpose, useId } from '@/shared'\n\ninterface SelectItemContext<T = AcceptableValue> {\n  value: T\n  textId: string\n  disabled: Ref<boolean>\n  isSelected: Ref<boolean>\n  onItemTextChange: (node: HTMLElement | undefined) => void\n}\n\nexport const [injectSelectItemContext, provideSelectItemContext]\n    = createContext<SelectItemContext>('SelectItem')\n\nexport type SelectEvent<T> = CustomEvent<{ originalEvent: PointerEvent | KeyboardEvent, value?: T }>\n\nexport type SelectItemEmits<T = AcceptableValue> = {\n  /** Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`. */\n  select: [event: SelectEvent<T>]\n}\n\nexport interface SelectItemProps<T = AcceptableValue> extends PrimitiveProps {\n  /** The value given as data when submitted with a `name`. */\n  value: T\n  /** When `true`, prevents the user from interacting with the item. */\n  disabled?: boolean\n  /**\n   * Optional text used for typeahead purposes.\n   *\n   * By default the typeahead behavior will use the `.textContent` of the `SelectItemText` part.\n   *\n   * Use this when the content is complex, or you have non-textual content inside.\n   */\n  textValue?: string\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport { Primitive } from '@/Primitive'\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  toRefs,\n} from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { SELECTION_KEYS, valueComparator } from './utils'\n\nconst props = defineProps<SelectItemProps>()\nconst emits = defineEmits<SelectItemEmits<T>>()\nconst { disabled } = toRefs(props)\n\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext()\nconst { forwardRef, currentElement } = useForwardExpose()\nconst { CollectionItem } = useCollection()\n\nconst isSelected = computed(() => valueComparator(rootContext.modelValue?.value, props.value, rootContext.by))\nconst isFocused = ref(false)\nconst textValue = ref(props.textValue ?? '')\nconst textId = useId(undefined, 'reka-select-item-text')\n\nconst SELECT_SELECT = 'select.select'\n\nasync function handleSelectCustomEvent(ev: PointerEvent | KeyboardEvent) {\n  if (ev.defaultPrevented)\n    return\n\n  const eventDetail = { originalEvent: ev, value: props.value as T }\n  handleAndDispatchCustomEvent(SELECT_SELECT, handleSelect, eventDetail)\n}\n\nasync function handleSelect(ev: SelectEvent<T>) {\n  await nextTick()\n  emits('select', ev)\n  if (ev.defaultPrevented)\n    return\n\n  if (!disabled.value) {\n    rootContext.onValueChange(props.value)\n    if (!rootContext.multiple.value)\n      rootContext.onOpenChange(false)\n  }\n}\n\nasync function handlePointerMove(event: PointerEvent) {\n  await nextTick()\n  if (event.defaultPrevented)\n    return\n  if (disabled.value) {\n    contentContext.onItemLeave?.()\n  }\n  else {\n    // even though safari doesn't support this option, it's acceptable\n    // as it only means it might scroll a few pixels when using the pointer.\n    (event.currentTarget as HTMLElement | null)?.focus({ preventScroll: true })\n  }\n}\n\nasync function handlePointerLeave(event: PointerEvent) {\n  await nextTick()\n  if (event.defaultPrevented)\n    return\n  if (event.currentTarget === getActiveElement())\n    contentContext.onItemLeave?.()\n}\n\nasync function handleKeyDown(event: KeyboardEvent) {\n  await nextTick()\n  if (event.defaultPrevented)\n    return\n  const isTypingAhead = contentContext.searchRef?.value !== ''\n  if (isTypingAhead && event.key === ' ')\n    return\n  if (SELECTION_KEYS.includes(event.key))\n    handleSelectCustomEvent(event)\n  // prevent page scroll if using the space key to select an item\n  if (event.key === ' ')\n    event.preventDefault()\n}\n\nif (props.value === '') {\n  throw new Error(\n    'A <SelectItem /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.',\n  )\n}\n\nonMounted(() => {\n  if (!currentElement.value)\n    return\n  contentContext.itemRefCallback(\n    currentElement.value,\n    props.value,\n    props.disabled,\n  )\n})\n\nprovideSelectItemContext({\n  value: props.value,\n  disabled,\n  textId,\n  isSelected,\n  onItemTextChange: (node) => {\n    textValue.value = ((textValue.value || node?.textContent) ?? '').trim()\n  },\n})\n</script>\n\n<template>\n  <CollectionItem :value=\"{ textValue }\">\n    <Primitive\n      :ref=\"forwardRef\"\n      role=\"option\"\n      :aria-labelledby=\"textId\"\n      :data-highlighted=\"isFocused ? '' : undefined\"\n      :aria-selected=\"isSelected\"\n      :data-state=\"isSelected ? 'checked' : 'unchecked'\"\n      :aria-disabled=\"disabled || undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :tabindex=\"disabled ? undefined : -1\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      @focus=\"isFocused = true\"\n      @blur=\"isFocused = false\"\n      @pointerup=\"handleSelectCustomEvent\"\n      @pointerdown=\"(event) => {\n        (event.currentTarget as HTMLElement).focus({ preventScroll: true })\n      }\"\n      @touchend.prevent.stop\n      @pointermove=\"handlePointerMove\"\n      @pointerleave=\"handlePointerLeave\"\n      @keydown=\"handleKeyDown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectItem.js","sources":["../../src/Select/SelectItem.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { AcceptableValue } from '@/shared/types'\nimport { useCollection } from '@/Collection'\nimport { createContext, getActiveElement, handleAndDispatchCustomEvent, useForwardExpose, useId } from '@/shared'\n\ninterface SelectItemContext<T = AcceptableValue> {\n  value: T\n  textId: string\n  disabled: Ref<boolean>\n  isSelected: Ref<boolean>\n  onItemTextChange: (node: HTMLElement | undefined) => void\n}\n\nexport const [injectSelectItemContext, provideSelectItemContext]\n    = createContext<SelectItemContext>('SelectItem')\n\nexport type SelectEvent<T> = CustomEvent<{ originalEvent: PointerEvent | KeyboardEvent, value?: T }>\n\nexport type SelectItemEmits<T = AcceptableValue> = {\n  /** Event handler called when the selecting item. <br> It can be prevented by calling `event.preventDefault`. */\n  select: [event: SelectEvent<T>]\n}\n\nexport interface SelectItemProps<T = AcceptableValue> extends PrimitiveProps {\n  /** The value given as data when submitted with a `name`. */\n  value: T\n  /** When `true`, prevents the user from interacting with the item. */\n  disabled?: boolean\n  /**\n   * Optional text used for typeahead purposes.\n   *\n   * By default the typeahead behavior will use the `.textContent` of the `SelectItemText` part.\n   *\n   * Use this when the content is complex, or you have non-textual content inside.\n   */\n  textValue?: string\n}\n</script>\n\n<script setup lang=\"ts\" generic=\"T extends AcceptableValue = AcceptableValue\">\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  toRefs,\n} from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { SELECTION_KEYS, valueComparator } from './utils'\n\nconst props = defineProps<SelectItemProps>()\nconst emits = defineEmits<SelectItemEmits<T>>()\nconst { disabled } = toRefs(props)\n\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext()\nconst { forwardRef, currentElement } = useForwardExpose()\nconst { CollectionItem } = useCollection()\n\nconst isSelected = computed(() => valueComparator(rootContext.modelValue?.value, props.value, rootContext.by))\nconst isFocused = ref(false)\nconst textValue = ref(props.textValue ?? '')\nconst textId = useId(undefined, 'reka-select-item-text')\n\nconst SELECT_SELECT = 'select.select'\n\nasync function handleSelectCustomEvent(ev: PointerEvent | KeyboardEvent) {\n  if (ev.defaultPrevented)\n    return\n\n  const eventDetail = { originalEvent: ev, value: props.value as T }\n  handleAndDispatchCustomEvent(SELECT_SELECT, handleSelect, eventDetail)\n}\n\nasync function handleSelect(ev: SelectEvent<T>) {\n  await nextTick()\n  emits('select', ev)\n  if (ev.defaultPrevented)\n    return\n\n  if (!disabled.value) {\n    rootContext.onValueChange(props.value)\n    if (!rootContext.multiple.value)\n      rootContext.onOpenChange(false)\n  }\n}\n\nasync function handlePointerMove(event: PointerEvent) {\n  await nextTick()\n  if (event.defaultPrevented)\n    return\n  if (disabled.value) {\n    contentContext.onItemLeave?.()\n  }\n  else {\n    // even though safari doesn't support this option, it's acceptable\n    // as it only means it might scroll a few pixels when using the pointer.\n    (event.currentTarget as HTMLElement | null)?.focus({ preventScroll: true })\n  }\n}\n\nasync function handlePointerLeave(event: PointerEvent) {\n  await nextTick()\n  if (event.defaultPrevented)\n    return\n  if (event.currentTarget === getActiveElement())\n    contentContext.onItemLeave?.()\n}\n\nasync function handleKeyDown(event: KeyboardEvent) {\n  await nextTick()\n  if (event.defaultPrevented)\n    return\n  const isTypingAhead = contentContext.searchRef?.value !== ''\n  if (isTypingAhead && event.key === ' ')\n    return\n  if (SELECTION_KEYS.includes(event.key))\n    handleSelectCustomEvent(event)\n  // prevent page scroll if using the space key to select an item\n  if (event.key === ' ')\n    event.preventDefault()\n}\n\nif (props.value === '') {\n  throw new Error(\n    'A <SelectItem /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.',\n  )\n}\n\nonMounted(() => {\n  if (!currentElement.value)\n    return\n  contentContext.itemRefCallback(\n    currentElement.value,\n    props.value,\n    props.disabled,\n  )\n})\n\nprovideSelectItemContext({\n  value: props.value,\n  disabled,\n  textId,\n  isSelected,\n  onItemTextChange: (node) => {\n    textValue.value = ((textValue.value || node?.textContent) ?? '').trim()\n  },\n})\n</script>\n\n<template>\n  <CollectionItem :value=\"{ textValue }\">\n    <Primitive\n      :ref=\"forwardRef\"\n      role=\"option\"\n      :aria-labelledby=\"textId\"\n      :data-highlighted=\"isFocused ? '' : undefined\"\n      :aria-selected=\"isSelected\"\n      :data-state=\"isSelected ? 'checked' : 'unchecked'\"\n      :aria-disabled=\"disabled || undefined\"\n      :data-disabled=\"disabled ? '' : undefined\"\n      :tabindex=\"disabled ? undefined : -1\"\n      :as=\"as\"\n      :as-child=\"asChild\"\n      @focus=\"isFocused = true\"\n      @blur=\"isFocused = false\"\n      @pointerup=\"handleSelectCustomEvent\"\n      @pointerdown=\"(event) => {\n        (event.currentTarget as HTMLElement).focus({ preventScroll: true })\n      }\"\n      @touchend.prevent.stop\n      @pointermove=\"handlePointerMove\"\n      @pointerleave=\"handlePointerLeave\"\n      @keydown=\"handleKeyDown\"\n    >\n      <slot />\n    </Primitive>\n  </CollectionItem>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;AAeO,MAAM,CAAC,uBAAA,EAAyB,wBAAwB,CAAA,GACzD,cAAiC,YAAY;;;;;;;;;;;;AAsCnD,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAA,MAAM,EAAE,QAAA,EAAa,GAAA,MAAA,CAAO,KAAK,CAAA;AAEjC,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,iBAAiB,0BAA2B,EAAA;AAClD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,gBAAiB,EAAA;AACxD,IAAM,MAAA,EAAE,cAAe,EAAA,GAAI,aAAc,EAAA;AAEzC,IAAM,MAAA,UAAA,GAAa,QAAS,CAAA,MAAM,eAAgB,CAAA,WAAA,CAAY,UAAY,EAAA,KAAA,EAAO,KAAM,CAAA,KAAA,EAAO,WAAY,CAAA,EAAE,CAAC,CAAA;AAC7G,IAAM,MAAA,SAAA,GAAY,IAAI,KAAK,CAAA;AAC3B,IAAA,MAAM,SAAY,GAAA,GAAA,CAAI,KAAM,CAAA,SAAA,IAAa,EAAE,CAAA;AAC3C,IAAM,MAAA,MAAA,GAAS,KAAM,CAAA,MAAA,EAAW,uBAAuB,CAAA;AAEvD,IAAA,MAAM,aAAgB,GAAA,eAAA;AAEtB,IAAA,eAAe,wBAAwB,EAAkC,EAAA;AACvE,MAAA,IAAI,EAAG,CAAA,gBAAA;AACL,QAAA;AAEF,MAAA,MAAM,cAAc,EAAE,aAAA,EAAe,EAAI,EAAA,KAAA,EAAO,MAAM,KAAW,EAAA;AACjE,MAA6B,4BAAA,CAAA,aAAA,EAAe,cAAc,WAAW,CAAA;AAAA;AAGvE,IAAA,eAAe,aAAa,EAAoB,EAAA;AAC9C,MAAA,MAAM,QAAS,EAAA;AACf,MAAA,KAAA,CAAM,UAAU,EAAE,CAAA;AAClB,MAAA,IAAI,EAAG,CAAA,gBAAA;AACL,QAAA;AAEF,MAAI,IAAA,CAAC,SAAS,KAAO,EAAA;AACnB,QAAY,WAAA,CAAA,aAAA,CAAc,MAAM,KAAK,CAAA;AACrC,QAAI,IAAA,CAAC,YAAY,QAAS,CAAA,KAAA;AACxB,UAAA,WAAA,CAAY,aAAa,KAAK,CAAA;AAAA;AAClC;AAGF,IAAA,eAAe,kBAAkB,KAAqB,EAAA;AACpD,MAAA,MAAM,QAAS,EAAA;AACf,MAAA,IAAI,KAAM,CAAA,gBAAA;AACR,QAAA;AACF,MAAA,IAAI,SAAS,KAAO,EAAA;AAClB,QAAA,cAAA,CAAe,WAAc,IAAA;AAAA,OAE1B,MAAA;AAGH,QAAC,MAAM,aAAsC,EAAA,KAAA,CAAM,EAAE,aAAA,EAAe,MAAM,CAAA;AAAA;AAC5E;AAGF,IAAA,eAAe,mBAAmB,KAAqB,EAAA;AACrD,MAAA,MAAM,QAAS,EAAA;AACf,MAAA,IAAI,KAAM,CAAA,gBAAA;AACR,QAAA;AACF,MAAI,IAAA,KAAA,CAAM,kBAAkB,gBAAiB,EAAA;AAC3C,QAAA,cAAA,CAAe,WAAc,IAAA;AAAA;AAGjC,IAAA,eAAe,cAAc,KAAsB,EAAA;AACjD,MAAA,MAAM,QAAS,EAAA;AACf,MAAA,IAAI,KAAM,CAAA,gBAAA;AACR,QAAA;AACF,MAAM,MAAA,aAAA,GAAgB,cAAe,CAAA,SAAA,EAAW,KAAU,KAAA,EAAA;AAC1D,MAAI,IAAA,aAAA,IAAiB,MAAM,GAAQ,KAAA,GAAA;AACjC,QAAA;AACF,MAAI,IAAA,cAAA,CAAe,QAAS,CAAA,KAAA,CAAM,GAAG,CAAA;AACnC,QAAA,uBAAA,CAAwB,KAAK,CAAA;AAE/B,MAAA,IAAI,MAAM,GAAQ,KAAA,GAAA;AAChB,QAAA,KAAA,CAAM,cAAe,EAAA;AAAA;AAGzB,IAAI,IAAA,KAAA,CAAM,UAAU,EAAI,EAAA;AACtB,MAAA,MAAM,IAAI,KAAA;AAAA,QACR;AAAA,OACF;AAAA;AAGF,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,cAAe,CAAA,KAAA;AAClB,QAAA;AACF,MAAe,cAAA,CAAA,eAAA;AAAA,QACb,cAAe,CAAA,KAAA;AAAA,QACf,KAAM,CAAA,KAAA;AAAA,QACN,KAAM,CAAA;AAAA,OACR;AAAA,KACD,CAAA;AAED,IAAyB,wBAAA,CAAA;AAAA,MACvB,OAAO,KAAM,CAAA,KAAA;AAAA,MACb,QAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,gBAAA,EAAkB,CAAC,IAAS,KAAA;AAC1B,QAAA,SAAA,CAAU,UAAU,SAAU,CAAA,KAAA,IAAS,IAAM,EAAA,WAAA,KAAgB,IAAI,IAAK,EAAA;AAAA;AACxE,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectItemAlignedPosition.cjs

@@ -2,8 +2,8 @@
 
 const vue = require('vue');
 const Select_utils = require('./utils.cjs');
-const Collection_Collection = require('../Collection/Collection.cjs');
 const core = require('@vueuse/core');
+const Collection_Collection = require('../Collection/Collection.cjs');
 const Select_SelectRoot = require('./SelectRoot.cjs');
 const Select_SelectContentImpl = require('./SelectContentImpl.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');

package/dist/Select/SelectItemAlignedPosition.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItemAlignedPosition.cjs","sources":["../../src/Select/SelectItemAlignedPosition.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Ref } from 'vue'\nimport { useCollection } from '@/Collection'\nimport { clamp, createContext, useForwardExpose } from '@/shared'\nimport { useResizeObserver } from '@vueuse/core'\n\ninterface SelectItemAlignedPositionContext {\n  contentWrapper?: Ref<HTMLElement | undefined>\n  shouldExpandOnScrollRef?: Ref<boolean>\n  onScrollButtonChange: (node: HTMLElement | undefined) => void\n}\n\nexport interface SelectItemAlignedPositionProps extends PrimitiveProps {}\n\nexport const [injectSelectItemAlignedPositionContext, provideSelectItemAlignedPositionContext]\n  = createContext<SelectItemAlignedPositionContext>('SelectItemAlignedPosition')\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { nextTick, onMounted, ref } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { CONTENT_MARGIN } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SelectItemAlignedPositionProps>()\nconst emits = defineEmits<{\n  placed: []\n}>()\n\nconst { getItems } = useCollection()\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext()\n\nconst shouldExpandOnScrollRef = ref(false)\nconst shouldRepositionRef = ref(true)\n\nconst contentWrapperElement = ref<HTMLElement>()\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n\nconst { viewport, selectedItem, selectedItemText, focusSelectedItem }\n  = contentContext!\n\nfunction position() {\n  if (\n    rootContext.triggerElement.value\n    && rootContext.valueElement.value\n    && contentWrapperElement.value\n    && contentElement.value\n    && viewport?.value\n    && selectedItem?.value\n    && selectedItemText?.value\n  ) {\n    const triggerRect = rootContext.triggerElement.value.getBoundingClientRect()\n\n    // -----------------------------------------------------------------------------------------\n    //  Horizontal positioning\n    // -----------------------------------------------------------------------------------------\n    const contentRect = contentElement.value.getBoundingClientRect()\n    const valueNodeRect = rootContext.valueElement.value.getBoundingClientRect()\n    const itemTextRect = selectedItemText.value.getBoundingClientRect()\n\n    if (rootContext.dir.value !== 'rtl') {\n      const itemTextOffset = itemTextRect.left - contentRect.left\n      const left = valueNodeRect.left - itemTextOffset\n      const leftDelta = triggerRect.left - left\n      const minContentWidth = triggerRect.width + leftDelta\n      const contentWidth = Math.max(minContentWidth, contentRect.width)\n      const rightEdge = window.innerWidth - CONTENT_MARGIN\n      const clampedLeft = clamp(left, CONTENT_MARGIN, Math.max(CONTENT_MARGIN, rightEdge - contentWidth))\n\n      contentWrapperElement.value.style.minWidth = `${minContentWidth}px`\n      contentWrapperElement.value.style.left = `${clampedLeft}px`\n    }\n    else {\n      const itemTextOffset = contentRect.right - itemTextRect.right\n      const right = window.innerWidth - valueNodeRect.right - itemTextOffset\n      const rightDelta = window.innerWidth - triggerRect.right - right\n      const minContentWidth = triggerRect.width + rightDelta\n      const contentWidth = Math.max(minContentWidth, contentRect.width)\n      const leftEdge = window.innerWidth - CONTENT_MARGIN\n      const clampedRight = clamp(\n        right,\n        CONTENT_MARGIN,\n        Math.max(CONTENT_MARGIN, leftEdge - contentWidth),\n      )\n\n      contentWrapperElement.value.style.minWidth = `${minContentWidth}px`\n      contentWrapperElement.value.style.right = `${clampedRight}px`\n    }\n\n    // -----------------------------------------------------------------------------------------\n    // Vertical positioning\n    // -----------------------------------------------------------------------------------------\n    const items = getItems().map(i => i.ref)\n    const availableHeight = window.innerHeight - CONTENT_MARGIN * 2\n    const itemsHeight = viewport.value.scrollHeight\n\n    const contentStyles = window.getComputedStyle(contentElement.value)\n    const contentBorderTopWidth = Number.parseInt(\n      contentStyles.borderTopWidth,\n      10,\n    )\n    const contentPaddingTop = Number.parseInt(contentStyles.paddingTop, 10)\n    const contentBorderBottomWidth = Number.parseInt(\n      contentStyles.borderBottomWidth,\n      10,\n    )\n    const contentPaddingBottom = Number.parseInt(\n      contentStyles.paddingBottom,\n      10,\n    )\n\n    const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth\n    const minContentHeight = Math.min(\n      selectedItem.value.offsetHeight * 5,\n      fullContentHeight,\n    )\n\n    const viewportStyles = window.getComputedStyle(viewport.value)\n    const viewportPaddingTop = Number.parseInt(viewportStyles.paddingTop, 10)\n    const viewportPaddingBottom = Number.parseInt(\n      viewportStyles.paddingBottom,\n      10,\n    )\n\n    const topEdgeToTriggerMiddle\n      = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN\n    const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle\n\n    const selectedItemHalfHeight = selectedItem.value.offsetHeight / 2\n    const itemOffsetMiddle\n      = selectedItem.value.offsetTop + selectedItemHalfHeight\n    const contentTopToItemMiddle\n      = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle\n    const itemMiddleToContentBottom\n      = fullContentHeight - contentTopToItemMiddle\n\n    const willAlignWithoutTopOverflow\n      = contentTopToItemMiddle <= topEdgeToTriggerMiddle\n\n    if (willAlignWithoutTopOverflow) {\n      const isLastItem = selectedItem.value === items[items.length - 1]\n      contentWrapperElement.value.style.bottom = `${0}px`\n      const viewportOffsetBottom\n        = contentElement.value.clientHeight\n          - viewport.value.offsetTop\n          - viewport.value.offsetHeight\n      const clampedTriggerMiddleToBottomEdge = Math.max(\n        triggerMiddleToBottomEdge,\n        selectedItemHalfHeight\n        // viewport might have padding bottom, include it to avoid a scrollable viewport\n        + (isLastItem ? viewportPaddingBottom : 0)\n        + viewportOffsetBottom\n        + contentBorderBottomWidth,\n      )\n      const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge\n      contentWrapperElement.value.style.height = `${height}px`\n    }\n    else {\n      const isFirstItem = selectedItem.value === items[0]\n      contentWrapperElement.value.style.top = `${0}px`\n      const clampedTopEdgeToTriggerMiddle = Math.max(\n        topEdgeToTriggerMiddle,\n        contentBorderTopWidth\n        + viewport.value.offsetTop\n        // viewport might have padding top, include it to avoid a scrollable viewport\n        + (isFirstItem ? viewportPaddingTop : 0)\n        + selectedItemHalfHeight,\n      )\n      const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom\n      contentWrapperElement.value.style.height = `${height}px`\n      viewport.value.scrollTop\n        = contentTopToItemMiddle\n          - topEdgeToTriggerMiddle\n          + viewport.value.offsetTop\n    }\n\n    contentWrapperElement.value.style.margin = `${CONTENT_MARGIN}px 0`\n    contentWrapperElement.value.style.minHeight = `${minContentHeight}px`\n    contentWrapperElement.value.style.maxHeight = `${availableHeight}px`\n    // -----------------------------------------------------------------------------------------\n\n    emits('placed')\n\n    // we don't want the initial scroll position adjustment to trigger \"expand on scroll\"\n    // so we explicitly turn it on only after they've registered.\n    requestAnimationFrame(() => (shouldExpandOnScrollRef.value = true))\n  }\n}\n\n// copy z-index from content to wrapper\nconst contentZIndex = ref('')\n\nonMounted(async () => {\n  await nextTick()\n  position()\n  if (contentElement.value)\n    contentZIndex.value = window.getComputedStyle(contentElement.value).zIndex\n})\n\n// When the viewport becomes scrollable at the top, the scroll up button will mount.\n// Because it is part of the normal flow, it will push down the viewport, thus throwing our\n// trigger => selectedItem alignment off by the amount the viewport was pushed down.\n// We wait for this to happen and then re-run the positining logic one more time to account for it.\nfunction handleScrollButtonChange(node: HTMLElement | undefined) {\n  if (node && shouldRepositionRef.value === true) {\n    position()\n    focusSelectedItem?.()\n    shouldRepositionRef.value = false\n  }\n}\n\n// Resize and position when trigger element changes\nuseResizeObserver(rootContext.triggerElement, () => {\n  position()\n})\n\nprovideSelectItemAlignedPositionContext({\n  contentWrapper: contentWrapperElement,\n  shouldExpandOnScrollRef,\n  onScrollButtonChange: handleScrollButtonChange,\n})\n</script>\n\n<template>\n  <div\n    ref=\"contentWrapperElement\"\n    :style=\"{\n      display: 'flex',\n      flexDirection: 'column',\n      position: 'fixed',\n      zIndex: contentZIndex,\n    }\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      :style=\"{\n        // When we get the height of the content, it includes borders. If we were to set\n        // the height without having `boxSizing: 'border-box'` it would be too big.\n        boxSizing: 'border-box',\n        // We need to ensure the content doesn't get taller than the wrapper\n        maxHeight: '100%',\n      }\"\n      v-bind=\"{ ...$attrs, ...props }\"\n    >\n      <slot />\n    </Primitive>\n  </div>\n</template>\n"],"names":["createContext","useCollection","injectSelectRootContext","injectSelectContentContext","ref","useForwardExpose","CONTENT_MARGIN","clamp","onMounted","nextTick","useResizeObserver"],"mappings":"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"}
+{"version":3,"file":"SelectItemAlignedPosition.cjs","sources":["../../src/Select/SelectItemAlignedPosition.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useResizeObserver } from '@vueuse/core'\nimport { useCollection } from '@/Collection'\nimport { clamp, createContext, useForwardExpose } from '@/shared'\n\ninterface SelectItemAlignedPositionContext {\n  contentWrapper?: Ref<HTMLElement | undefined>\n  shouldExpandOnScrollRef?: Ref<boolean>\n  onScrollButtonChange: (node: HTMLElement | undefined) => void\n}\n\nexport interface SelectItemAlignedPositionProps extends PrimitiveProps {}\n\nexport const [injectSelectItemAlignedPositionContext, provideSelectItemAlignedPositionContext]\n  = createContext<SelectItemAlignedPositionContext>('SelectItemAlignedPosition')\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted, ref } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { CONTENT_MARGIN } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SelectItemAlignedPositionProps>()\nconst emits = defineEmits<{\n  placed: []\n}>()\n\nconst { getItems } = useCollection()\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext()\n\nconst shouldExpandOnScrollRef = ref(false)\nconst shouldRepositionRef = ref(true)\n\nconst contentWrapperElement = ref<HTMLElement>()\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n\nconst { viewport, selectedItem, selectedItemText, focusSelectedItem }\n  = contentContext!\n\nfunction position() {\n  if (\n    rootContext.triggerElement.value\n    && rootContext.valueElement.value\n    && contentWrapperElement.value\n    && contentElement.value\n    && viewport?.value\n    && selectedItem?.value\n    && selectedItemText?.value\n  ) {\n    const triggerRect = rootContext.triggerElement.value.getBoundingClientRect()\n\n    // -----------------------------------------------------------------------------------------\n    //  Horizontal positioning\n    // -----------------------------------------------------------------------------------------\n    const contentRect = contentElement.value.getBoundingClientRect()\n    const valueNodeRect = rootContext.valueElement.value.getBoundingClientRect()\n    const itemTextRect = selectedItemText.value.getBoundingClientRect()\n\n    if (rootContext.dir.value !== 'rtl') {\n      const itemTextOffset = itemTextRect.left - contentRect.left\n      const left = valueNodeRect.left - itemTextOffset\n      const leftDelta = triggerRect.left - left\n      const minContentWidth = triggerRect.width + leftDelta\n      const contentWidth = Math.max(minContentWidth, contentRect.width)\n      const rightEdge = window.innerWidth - CONTENT_MARGIN\n      const clampedLeft = clamp(left, CONTENT_MARGIN, Math.max(CONTENT_MARGIN, rightEdge - contentWidth))\n\n      contentWrapperElement.value.style.minWidth = `${minContentWidth}px`\n      contentWrapperElement.value.style.left = `${clampedLeft}px`\n    }\n    else {\n      const itemTextOffset = contentRect.right - itemTextRect.right\n      const right = window.innerWidth - valueNodeRect.right - itemTextOffset\n      const rightDelta = window.innerWidth - triggerRect.right - right\n      const minContentWidth = triggerRect.width + rightDelta\n      const contentWidth = Math.max(minContentWidth, contentRect.width)\n      const leftEdge = window.innerWidth - CONTENT_MARGIN\n      const clampedRight = clamp(\n        right,\n        CONTENT_MARGIN,\n        Math.max(CONTENT_MARGIN, leftEdge - contentWidth),\n      )\n\n      contentWrapperElement.value.style.minWidth = `${minContentWidth}px`\n      contentWrapperElement.value.style.right = `${clampedRight}px`\n    }\n\n    // -----------------------------------------------------------------------------------------\n    // Vertical positioning\n    // -----------------------------------------------------------------------------------------\n    const items = getItems().map(i => i.ref)\n    const availableHeight = window.innerHeight - CONTENT_MARGIN * 2\n    const itemsHeight = viewport.value.scrollHeight\n\n    const contentStyles = window.getComputedStyle(contentElement.value)\n    const contentBorderTopWidth = Number.parseInt(\n      contentStyles.borderTopWidth,\n      10,\n    )\n    const contentPaddingTop = Number.parseInt(contentStyles.paddingTop, 10)\n    const contentBorderBottomWidth = Number.parseInt(\n      contentStyles.borderBottomWidth,\n      10,\n    )\n    const contentPaddingBottom = Number.parseInt(\n      contentStyles.paddingBottom,\n      10,\n    )\n\n    const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth\n    const minContentHeight = Math.min(\n      selectedItem.value.offsetHeight * 5,\n      fullContentHeight,\n    )\n\n    const viewportStyles = window.getComputedStyle(viewport.value)\n    const viewportPaddingTop = Number.parseInt(viewportStyles.paddingTop, 10)\n    const viewportPaddingBottom = Number.parseInt(\n      viewportStyles.paddingBottom,\n      10,\n    )\n\n    const topEdgeToTriggerMiddle\n      = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN\n    const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle\n\n    const selectedItemHalfHeight = selectedItem.value.offsetHeight / 2\n    const itemOffsetMiddle\n      = selectedItem.value.offsetTop + selectedItemHalfHeight\n    const contentTopToItemMiddle\n      = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle\n    const itemMiddleToContentBottom\n      = fullContentHeight - contentTopToItemMiddle\n\n    const willAlignWithoutTopOverflow\n      = contentTopToItemMiddle <= topEdgeToTriggerMiddle\n\n    if (willAlignWithoutTopOverflow) {\n      const isLastItem = selectedItem.value === items[items.length - 1]\n      contentWrapperElement.value.style.bottom = `${0}px`\n      const viewportOffsetBottom\n        = contentElement.value.clientHeight\n          - viewport.value.offsetTop\n          - viewport.value.offsetHeight\n      const clampedTriggerMiddleToBottomEdge = Math.max(\n        triggerMiddleToBottomEdge,\n        selectedItemHalfHeight\n        // viewport might have padding bottom, include it to avoid a scrollable viewport\n        + (isLastItem ? viewportPaddingBottom : 0)\n        + viewportOffsetBottom\n        + contentBorderBottomWidth,\n      )\n      const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge\n      contentWrapperElement.value.style.height = `${height}px`\n    }\n    else {\n      const isFirstItem = selectedItem.value === items[0]\n      contentWrapperElement.value.style.top = `${0}px`\n      const clampedTopEdgeToTriggerMiddle = Math.max(\n        topEdgeToTriggerMiddle,\n        contentBorderTopWidth\n        + viewport.value.offsetTop\n        // viewport might have padding top, include it to avoid a scrollable viewport\n        + (isFirstItem ? viewportPaddingTop : 0)\n        + selectedItemHalfHeight,\n      )\n      const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom\n      contentWrapperElement.value.style.height = `${height}px`\n      viewport.value.scrollTop\n        = contentTopToItemMiddle\n          - topEdgeToTriggerMiddle\n          + viewport.value.offsetTop\n    }\n\n    contentWrapperElement.value.style.margin = `${CONTENT_MARGIN}px 0`\n    contentWrapperElement.value.style.minHeight = `${minContentHeight}px`\n    contentWrapperElement.value.style.maxHeight = `${availableHeight}px`\n    // -----------------------------------------------------------------------------------------\n\n    emits('placed')\n\n    // we don't want the initial scroll position adjustment to trigger \"expand on scroll\"\n    // so we explicitly turn it on only after they've registered.\n    requestAnimationFrame(() => (shouldExpandOnScrollRef.value = true))\n  }\n}\n\n// copy z-index from content to wrapper\nconst contentZIndex = ref('')\n\nonMounted(async () => {\n  await nextTick()\n  position()\n  if (contentElement.value)\n    contentZIndex.value = window.getComputedStyle(contentElement.value).zIndex\n})\n\n// When the viewport becomes scrollable at the top, the scroll up button will mount.\n// Because it is part of the normal flow, it will push down the viewport, thus throwing our\n// trigger => selectedItem alignment off by the amount the viewport was pushed down.\n// We wait for this to happen and then re-run the positining logic one more time to account for it.\nfunction handleScrollButtonChange(node: HTMLElement | undefined) {\n  if (node && shouldRepositionRef.value === true) {\n    position()\n    focusSelectedItem?.()\n    shouldRepositionRef.value = false\n  }\n}\n\n// Resize and position when trigger element changes\nuseResizeObserver(rootContext.triggerElement, () => {\n  position()\n})\n\nprovideSelectItemAlignedPositionContext({\n  contentWrapper: contentWrapperElement,\n  shouldExpandOnScrollRef,\n  onScrollButtonChange: handleScrollButtonChange,\n})\n</script>\n\n<template>\n  <div\n    ref=\"contentWrapperElement\"\n    :style=\"{\n      display: 'flex',\n      flexDirection: 'column',\n      position: 'fixed',\n      zIndex: contentZIndex,\n    }\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      :style=\"{\n        // When we get the height of the content, it includes borders. If we were to set\n        // the height without having `boxSizing: 'border-box'` it would be too big.\n        boxSizing: 'border-box',\n        // We need to ensure the content doesn't get taller than the wrapper\n        maxHeight: '100%',\n      }\"\n      v-bind=\"{ ...$attrs, ...props }\"\n    >\n      <slot />\n    </Primitive>\n  </div>\n</template>\n"],"names":["createContext","useCollection","injectSelectRootContext","injectSelectContentContext","ref","useForwardExpose","CONTENT_MARGIN","clamp","onMounted","nextTick","useResizeObserver"],"mappings":"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"}

package/dist/Select/SelectItemAlignedPosition.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, onMounted, nextTick, createElementBlock, openBlock, normalizeStyle, createVNode, unref, mergeProps, withCtx, renderSlot } from 'vue';
 import { C as CONTENT_MARGIN } from './utils.js';
-import { u as useCollection } from '../Collection/Collection.js';
 import { useResizeObserver } from '@vueuse/core';
+import { u as useCollection } from '../Collection/Collection.js';
 import { i as injectSelectRootContext } from './SelectRoot.js';
 import { i as injectSelectContentContext } from './SelectContentImpl.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';

package/dist/Select/SelectItemAlignedPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItemAlignedPosition.js","sources":["../../src/Select/SelectItemAlignedPosition.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport type { Ref } from 'vue'\nimport { useCollection } from '@/Collection'\nimport { clamp, createContext, useForwardExpose } from '@/shared'\nimport { useResizeObserver } from '@vueuse/core'\n\ninterface SelectItemAlignedPositionContext {\n  contentWrapper?: Ref<HTMLElement | undefined>\n  shouldExpandOnScrollRef?: Ref<boolean>\n  onScrollButtonChange: (node: HTMLElement | undefined) => void\n}\n\nexport interface SelectItemAlignedPositionProps extends PrimitiveProps {}\n\nexport const [injectSelectItemAlignedPositionContext, provideSelectItemAlignedPositionContext]\n  = createContext<SelectItemAlignedPositionContext>('SelectItemAlignedPosition')\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { nextTick, onMounted, ref } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { CONTENT_MARGIN } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SelectItemAlignedPositionProps>()\nconst emits = defineEmits<{\n  placed: []\n}>()\n\nconst { getItems } = useCollection()\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext()\n\nconst shouldExpandOnScrollRef = ref(false)\nconst shouldRepositionRef = ref(true)\n\nconst contentWrapperElement = ref<HTMLElement>()\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n\nconst { viewport, selectedItem, selectedItemText, focusSelectedItem }\n  = contentContext!\n\nfunction position() {\n  if (\n    rootContext.triggerElement.value\n    && rootContext.valueElement.value\n    && contentWrapperElement.value\n    && contentElement.value\n    && viewport?.value\n    && selectedItem?.value\n    && selectedItemText?.value\n  ) {\n    const triggerRect = rootContext.triggerElement.value.getBoundingClientRect()\n\n    // -----------------------------------------------------------------------------------------\n    //  Horizontal positioning\n    // -----------------------------------------------------------------------------------------\n    const contentRect = contentElement.value.getBoundingClientRect()\n    const valueNodeRect = rootContext.valueElement.value.getBoundingClientRect()\n    const itemTextRect = selectedItemText.value.getBoundingClientRect()\n\n    if (rootContext.dir.value !== 'rtl') {\n      const itemTextOffset = itemTextRect.left - contentRect.left\n      const left = valueNodeRect.left - itemTextOffset\n      const leftDelta = triggerRect.left - left\n      const minContentWidth = triggerRect.width + leftDelta\n      const contentWidth = Math.max(minContentWidth, contentRect.width)\n      const rightEdge = window.innerWidth - CONTENT_MARGIN\n      const clampedLeft = clamp(left, CONTENT_MARGIN, Math.max(CONTENT_MARGIN, rightEdge - contentWidth))\n\n      contentWrapperElement.value.style.minWidth = `${minContentWidth}px`\n      contentWrapperElement.value.style.left = `${clampedLeft}px`\n    }\n    else {\n      const itemTextOffset = contentRect.right - itemTextRect.right\n      const right = window.innerWidth - valueNodeRect.right - itemTextOffset\n      const rightDelta = window.innerWidth - triggerRect.right - right\n      const minContentWidth = triggerRect.width + rightDelta\n      const contentWidth = Math.max(minContentWidth, contentRect.width)\n      const leftEdge = window.innerWidth - CONTENT_MARGIN\n      const clampedRight = clamp(\n        right,\n        CONTENT_MARGIN,\n        Math.max(CONTENT_MARGIN, leftEdge - contentWidth),\n      )\n\n      contentWrapperElement.value.style.minWidth = `${minContentWidth}px`\n      contentWrapperElement.value.style.right = `${clampedRight}px`\n    }\n\n    // -----------------------------------------------------------------------------------------\n    // Vertical positioning\n    // -----------------------------------------------------------------------------------------\n    const items = getItems().map(i => i.ref)\n    const availableHeight = window.innerHeight - CONTENT_MARGIN * 2\n    const itemsHeight = viewport.value.scrollHeight\n\n    const contentStyles = window.getComputedStyle(contentElement.value)\n    const contentBorderTopWidth = Number.parseInt(\n      contentStyles.borderTopWidth,\n      10,\n    )\n    const contentPaddingTop = Number.parseInt(contentStyles.paddingTop, 10)\n    const contentBorderBottomWidth = Number.parseInt(\n      contentStyles.borderBottomWidth,\n      10,\n    )\n    const contentPaddingBottom = Number.parseInt(\n      contentStyles.paddingBottom,\n      10,\n    )\n\n    const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth\n    const minContentHeight = Math.min(\n      selectedItem.value.offsetHeight * 5,\n      fullContentHeight,\n    )\n\n    const viewportStyles = window.getComputedStyle(viewport.value)\n    const viewportPaddingTop = Number.parseInt(viewportStyles.paddingTop, 10)\n    const viewportPaddingBottom = Number.parseInt(\n      viewportStyles.paddingBottom,\n      10,\n    )\n\n    const topEdgeToTriggerMiddle\n      = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN\n    const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle\n\n    const selectedItemHalfHeight = selectedItem.value.offsetHeight / 2\n    const itemOffsetMiddle\n      = selectedItem.value.offsetTop + selectedItemHalfHeight\n    const contentTopToItemMiddle\n      = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle\n    const itemMiddleToContentBottom\n      = fullContentHeight - contentTopToItemMiddle\n\n    const willAlignWithoutTopOverflow\n      = contentTopToItemMiddle <= topEdgeToTriggerMiddle\n\n    if (willAlignWithoutTopOverflow) {\n      const isLastItem = selectedItem.value === items[items.length - 1]\n      contentWrapperElement.value.style.bottom = `${0}px`\n      const viewportOffsetBottom\n        = contentElement.value.clientHeight\n          - viewport.value.offsetTop\n          - viewport.value.offsetHeight\n      const clampedTriggerMiddleToBottomEdge = Math.max(\n        triggerMiddleToBottomEdge,\n        selectedItemHalfHeight\n        // viewport might have padding bottom, include it to avoid a scrollable viewport\n        + (isLastItem ? viewportPaddingBottom : 0)\n        + viewportOffsetBottom\n        + contentBorderBottomWidth,\n      )\n      const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge\n      contentWrapperElement.value.style.height = `${height}px`\n    }\n    else {\n      const isFirstItem = selectedItem.value === items[0]\n      contentWrapperElement.value.style.top = `${0}px`\n      const clampedTopEdgeToTriggerMiddle = Math.max(\n        topEdgeToTriggerMiddle,\n        contentBorderTopWidth\n        + viewport.value.offsetTop\n        // viewport might have padding top, include it to avoid a scrollable viewport\n        + (isFirstItem ? viewportPaddingTop : 0)\n        + selectedItemHalfHeight,\n      )\n      const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom\n      contentWrapperElement.value.style.height = `${height}px`\n      viewport.value.scrollTop\n        = contentTopToItemMiddle\n          - topEdgeToTriggerMiddle\n          + viewport.value.offsetTop\n    }\n\n    contentWrapperElement.value.style.margin = `${CONTENT_MARGIN}px 0`\n    contentWrapperElement.value.style.minHeight = `${minContentHeight}px`\n    contentWrapperElement.value.style.maxHeight = `${availableHeight}px`\n    // -----------------------------------------------------------------------------------------\n\n    emits('placed')\n\n    // we don't want the initial scroll position adjustment to trigger \"expand on scroll\"\n    // so we explicitly turn it on only after they've registered.\n    requestAnimationFrame(() => (shouldExpandOnScrollRef.value = true))\n  }\n}\n\n// copy z-index from content to wrapper\nconst contentZIndex = ref('')\n\nonMounted(async () => {\n  await nextTick()\n  position()\n  if (contentElement.value)\n    contentZIndex.value = window.getComputedStyle(contentElement.value).zIndex\n})\n\n// When the viewport becomes scrollable at the top, the scroll up button will mount.\n// Because it is part of the normal flow, it will push down the viewport, thus throwing our\n// trigger => selectedItem alignment off by the amount the viewport was pushed down.\n// We wait for this to happen and then re-run the positining logic one more time to account for it.\nfunction handleScrollButtonChange(node: HTMLElement | undefined) {\n  if (node && shouldRepositionRef.value === true) {\n    position()\n    focusSelectedItem?.()\n    shouldRepositionRef.value = false\n  }\n}\n\n// Resize and position when trigger element changes\nuseResizeObserver(rootContext.triggerElement, () => {\n  position()\n})\n\nprovideSelectItemAlignedPositionContext({\n  contentWrapper: contentWrapperElement,\n  shouldExpandOnScrollRef,\n  onScrollButtonChange: handleScrollButtonChange,\n})\n</script>\n\n<template>\n  <div\n    ref=\"contentWrapperElement\"\n    :style=\"{\n      display: 'flex',\n      flexDirection: 'column',\n      position: 'fixed',\n      zIndex: contentZIndex,\n    }\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      :style=\"{\n        // When we get the height of the content, it includes borders. If we were to set\n        // the height without having `boxSizing: 'border-box'` it would be too big.\n        boxSizing: 'border-box',\n        // We need to ensure the content doesn't get taller than the wrapper\n        maxHeight: '100%',\n      }\"\n      v-bind=\"{ ...$attrs, ...props }\"\n    >\n      <slot />\n    </Primitive>\n  </div>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectItemAlignedPosition.js","sources":["../../src/Select/SelectItemAlignedPosition.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useResizeObserver } from '@vueuse/core'\nimport { useCollection } from '@/Collection'\nimport { clamp, createContext, useForwardExpose } from '@/shared'\n\ninterface SelectItemAlignedPositionContext {\n  contentWrapper?: Ref<HTMLElement | undefined>\n  shouldExpandOnScrollRef?: Ref<boolean>\n  onScrollButtonChange: (node: HTMLElement | undefined) => void\n}\n\nexport interface SelectItemAlignedPositionProps extends PrimitiveProps {}\n\nexport const [injectSelectItemAlignedPositionContext, provideSelectItemAlignedPositionContext]\n  = createContext<SelectItemAlignedPositionContext>('SelectItemAlignedPosition')\n</script>\n\n<script setup lang=\"ts\">\nimport { nextTick, onMounted, ref } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { CONTENT_MARGIN } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SelectItemAlignedPositionProps>()\nconst emits = defineEmits<{\n  placed: []\n}>()\n\nconst { getItems } = useCollection()\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext()\n\nconst shouldExpandOnScrollRef = ref(false)\nconst shouldRepositionRef = ref(true)\n\nconst contentWrapperElement = ref<HTMLElement>()\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n\nconst { viewport, selectedItem, selectedItemText, focusSelectedItem }\n  = contentContext!\n\nfunction position() {\n  if (\n    rootContext.triggerElement.value\n    && rootContext.valueElement.value\n    && contentWrapperElement.value\n    && contentElement.value\n    && viewport?.value\n    && selectedItem?.value\n    && selectedItemText?.value\n  ) {\n    const triggerRect = rootContext.triggerElement.value.getBoundingClientRect()\n\n    // -----------------------------------------------------------------------------------------\n    //  Horizontal positioning\n    // -----------------------------------------------------------------------------------------\n    const contentRect = contentElement.value.getBoundingClientRect()\n    const valueNodeRect = rootContext.valueElement.value.getBoundingClientRect()\n    const itemTextRect = selectedItemText.value.getBoundingClientRect()\n\n    if (rootContext.dir.value !== 'rtl') {\n      const itemTextOffset = itemTextRect.left - contentRect.left\n      const left = valueNodeRect.left - itemTextOffset\n      const leftDelta = triggerRect.left - left\n      const minContentWidth = triggerRect.width + leftDelta\n      const contentWidth = Math.max(minContentWidth, contentRect.width)\n      const rightEdge = window.innerWidth - CONTENT_MARGIN\n      const clampedLeft = clamp(left, CONTENT_MARGIN, Math.max(CONTENT_MARGIN, rightEdge - contentWidth))\n\n      contentWrapperElement.value.style.minWidth = `${minContentWidth}px`\n      contentWrapperElement.value.style.left = `${clampedLeft}px`\n    }\n    else {\n      const itemTextOffset = contentRect.right - itemTextRect.right\n      const right = window.innerWidth - valueNodeRect.right - itemTextOffset\n      const rightDelta = window.innerWidth - triggerRect.right - right\n      const minContentWidth = triggerRect.width + rightDelta\n      const contentWidth = Math.max(minContentWidth, contentRect.width)\n      const leftEdge = window.innerWidth - CONTENT_MARGIN\n      const clampedRight = clamp(\n        right,\n        CONTENT_MARGIN,\n        Math.max(CONTENT_MARGIN, leftEdge - contentWidth),\n      )\n\n      contentWrapperElement.value.style.minWidth = `${minContentWidth}px`\n      contentWrapperElement.value.style.right = `${clampedRight}px`\n    }\n\n    // -----------------------------------------------------------------------------------------\n    // Vertical positioning\n    // -----------------------------------------------------------------------------------------\n    const items = getItems().map(i => i.ref)\n    const availableHeight = window.innerHeight - CONTENT_MARGIN * 2\n    const itemsHeight = viewport.value.scrollHeight\n\n    const contentStyles = window.getComputedStyle(contentElement.value)\n    const contentBorderTopWidth = Number.parseInt(\n      contentStyles.borderTopWidth,\n      10,\n    )\n    const contentPaddingTop = Number.parseInt(contentStyles.paddingTop, 10)\n    const contentBorderBottomWidth = Number.parseInt(\n      contentStyles.borderBottomWidth,\n      10,\n    )\n    const contentPaddingBottom = Number.parseInt(\n      contentStyles.paddingBottom,\n      10,\n    )\n\n    const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth\n    const minContentHeight = Math.min(\n      selectedItem.value.offsetHeight * 5,\n      fullContentHeight,\n    )\n\n    const viewportStyles = window.getComputedStyle(viewport.value)\n    const viewportPaddingTop = Number.parseInt(viewportStyles.paddingTop, 10)\n    const viewportPaddingBottom = Number.parseInt(\n      viewportStyles.paddingBottom,\n      10,\n    )\n\n    const topEdgeToTriggerMiddle\n      = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN\n    const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle\n\n    const selectedItemHalfHeight = selectedItem.value.offsetHeight / 2\n    const itemOffsetMiddle\n      = selectedItem.value.offsetTop + selectedItemHalfHeight\n    const contentTopToItemMiddle\n      = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle\n    const itemMiddleToContentBottom\n      = fullContentHeight - contentTopToItemMiddle\n\n    const willAlignWithoutTopOverflow\n      = contentTopToItemMiddle <= topEdgeToTriggerMiddle\n\n    if (willAlignWithoutTopOverflow) {\n      const isLastItem = selectedItem.value === items[items.length - 1]\n      contentWrapperElement.value.style.bottom = `${0}px`\n      const viewportOffsetBottom\n        = contentElement.value.clientHeight\n          - viewport.value.offsetTop\n          - viewport.value.offsetHeight\n      const clampedTriggerMiddleToBottomEdge = Math.max(\n        triggerMiddleToBottomEdge,\n        selectedItemHalfHeight\n        // viewport might have padding bottom, include it to avoid a scrollable viewport\n        + (isLastItem ? viewportPaddingBottom : 0)\n        + viewportOffsetBottom\n        + contentBorderBottomWidth,\n      )\n      const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge\n      contentWrapperElement.value.style.height = `${height}px`\n    }\n    else {\n      const isFirstItem = selectedItem.value === items[0]\n      contentWrapperElement.value.style.top = `${0}px`\n      const clampedTopEdgeToTriggerMiddle = Math.max(\n        topEdgeToTriggerMiddle,\n        contentBorderTopWidth\n        + viewport.value.offsetTop\n        // viewport might have padding top, include it to avoid a scrollable viewport\n        + (isFirstItem ? viewportPaddingTop : 0)\n        + selectedItemHalfHeight,\n      )\n      const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom\n      contentWrapperElement.value.style.height = `${height}px`\n      viewport.value.scrollTop\n        = contentTopToItemMiddle\n          - topEdgeToTriggerMiddle\n          + viewport.value.offsetTop\n    }\n\n    contentWrapperElement.value.style.margin = `${CONTENT_MARGIN}px 0`\n    contentWrapperElement.value.style.minHeight = `${minContentHeight}px`\n    contentWrapperElement.value.style.maxHeight = `${availableHeight}px`\n    // -----------------------------------------------------------------------------------------\n\n    emits('placed')\n\n    // we don't want the initial scroll position adjustment to trigger \"expand on scroll\"\n    // so we explicitly turn it on only after they've registered.\n    requestAnimationFrame(() => (shouldExpandOnScrollRef.value = true))\n  }\n}\n\n// copy z-index from content to wrapper\nconst contentZIndex = ref('')\n\nonMounted(async () => {\n  await nextTick()\n  position()\n  if (contentElement.value)\n    contentZIndex.value = window.getComputedStyle(contentElement.value).zIndex\n})\n\n// When the viewport becomes scrollable at the top, the scroll up button will mount.\n// Because it is part of the normal flow, it will push down the viewport, thus throwing our\n// trigger => selectedItem alignment off by the amount the viewport was pushed down.\n// We wait for this to happen and then re-run the positining logic one more time to account for it.\nfunction handleScrollButtonChange(node: HTMLElement | undefined) {\n  if (node && shouldRepositionRef.value === true) {\n    position()\n    focusSelectedItem?.()\n    shouldRepositionRef.value = false\n  }\n}\n\n// Resize and position when trigger element changes\nuseResizeObserver(rootContext.triggerElement, () => {\n  position()\n})\n\nprovideSelectItemAlignedPositionContext({\n  contentWrapper: contentWrapperElement,\n  shouldExpandOnScrollRef,\n  onScrollButtonChange: handleScrollButtonChange,\n})\n</script>\n\n<template>\n  <div\n    ref=\"contentWrapperElement\"\n    :style=\"{\n      display: 'flex',\n      flexDirection: 'column',\n      position: 'fixed',\n      zIndex: contentZIndex,\n    }\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      :style=\"{\n        // When we get the height of the content, it includes borders. If we were to set\n        // the height without having `boxSizing: 'border-box'` it would be too big.\n        boxSizing: 'border-box',\n        // We need to ensure the content doesn't get taller than the wrapper\n        maxHeight: '100%',\n      }\"\n      v-bind=\"{ ...$attrs, ...props }\"\n    >\n      <slot />\n    </Primitive>\n  </div>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/Select/SelectItemText.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItemText.cjs","sources":["../../src/Select/SelectItemText.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nexport interface SelectItemTextProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { computed, onBeforeUnmount, onMounted } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectItemContext } from './SelectItem.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SelectItemTextProps>(), {\n  as: 'span',\n})\n\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext()\nconst itemContext = injectSelectItemContext()\n\nconst { forwardRef, currentElement: itemTextElement } = useForwardExpose()\n\nconst optionProps = computed(() => {\n  return {\n    value: itemContext.value,\n    disabled: itemContext.disabled.value,\n    textContent: itemTextElement.value?.textContent ?? itemContext.value?.toString() ?? '',\n  }\n})\n\nonMounted(() => {\n  if (!itemTextElement.value)\n    return\n  itemContext.onItemTextChange(itemTextElement.value)\n  contentContext.itemTextRefCallback(\n    itemTextElement.value,\n    itemContext.value,\n    itemContext.disabled.value,\n  )\n  rootContext.onOptionAdd(optionProps.value)\n})\n\nonBeforeUnmount(() => {\n  rootContext.onOptionRemove(optionProps.value)\n})\n</script>\n\n<template>\n  <Primitive\n    :id=\"itemContext.textId\"\n    :ref=\"forwardRef\"\n    v-bind=\"{ ...props, ...$attrs }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectSelectRootContext","injectSelectContentContext","injectSelectItemContext","useForwardExpose","computed","onMounted","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,iBAAiBC,mDAA2B,EAAA;AAClD,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,eAAA,KAAoBC,wCAAiB,EAAA;AAEzE,IAAM,MAAA,WAAA,GAAcC,aAAS,MAAM;AACjC,MAAO,OAAA;AAAA,QACL,OAAO,WAAY,CAAA,KAAA;AAAA,QACnB,QAAA,EAAU,YAAY,QAAS,CAAA,KAAA;AAAA,QAC/B,aAAa,eAAgB,CAAA,KAAA,EAAO,eAAe,WAAY,CAAA,KAAA,EAAO,UAAc,IAAA;AAAA,OACtF;AAAA,KACD,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,eAAgB,CAAA,KAAA;AACnB,QAAA;AACF,MAAY,WAAA,CAAA,gBAAA,CAAiB,gBAAgB,KAAK,CAAA;AAClD,MAAe,cAAA,CAAA,mBAAA;AAAA,QACb,eAAgB,CAAA,KAAA;AAAA,QAChB,WAAY,CAAA,KAAA;AAAA,QACZ,YAAY,QAAS,CAAA;AAAA,OACvB;AACA,MAAY,WAAA,CAAA,WAAA,CAAY,YAAY,KAAK,CAAA;AAAA,KAC1C,CAAA;AAED,IAAAC,mBAAA,CAAgB,MAAM;AACpB,MAAY,WAAA,CAAA,cAAA,CAAe,YAAY,KAAK,CAAA;AAAA,KAC7C,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectItemText.cjs","sources":["../../src/Select/SelectItemText.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nexport interface SelectItemTextProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectItemContext } from './SelectItem.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SelectItemTextProps>(), {\n  as: 'span',\n})\n\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext()\nconst itemContext = injectSelectItemContext()\n\nconst { forwardRef, currentElement: itemTextElement } = useForwardExpose()\n\nconst optionProps = computed(() => {\n  return {\n    value: itemContext.value,\n    disabled: itemContext.disabled.value,\n    textContent: itemTextElement.value?.textContent ?? itemContext.value?.toString() ?? '',\n  }\n})\n\nonMounted(() => {\n  if (!itemTextElement.value)\n    return\n  itemContext.onItemTextChange(itemTextElement.value)\n  contentContext.itemTextRefCallback(\n    itemTextElement.value,\n    itemContext.value,\n    itemContext.disabled.value,\n  )\n  rootContext.onOptionAdd(optionProps.value)\n})\n\nonBeforeUnmount(() => {\n  rootContext.onOptionRemove(optionProps.value)\n})\n</script>\n\n<template>\n  <Primitive\n    :id=\"itemContext.textId\"\n    :ref=\"forwardRef\"\n    v-bind=\"{ ...props, ...$attrs }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectSelectRootContext","injectSelectContentContext","injectSelectItemContext","useForwardExpose","computed","onMounted","onBeforeUnmount"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAA,MAAM,iBAAiBC,mDAA2B,EAAA;AAClD,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,eAAA,KAAoBC,wCAAiB,EAAA;AAEzE,IAAM,MAAA,WAAA,GAAcC,aAAS,MAAM;AACjC,MAAO,OAAA;AAAA,QACL,OAAO,WAAY,CAAA,KAAA;AAAA,QACnB,QAAA,EAAU,YAAY,QAAS,CAAA,KAAA;AAAA,QAC/B,aAAa,eAAgB,CAAA,KAAA,EAAO,eAAe,WAAY,CAAA,KAAA,EAAO,UAAc,IAAA;AAAA,OACtF;AAAA,KACD,CAAA;AAED,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,eAAgB,CAAA,KAAA;AACnB,QAAA;AACF,MAAY,WAAA,CAAA,gBAAA,CAAiB,gBAAgB,KAAK,CAAA;AAClD,MAAe,cAAA,CAAA,mBAAA;AAAA,QACb,eAAgB,CAAA,KAAA;AAAA,QAChB,WAAY,CAAA,KAAA;AAAA,QACZ,YAAY,QAAS,CAAA;AAAA,OACvB;AACA,MAAY,WAAA,CAAA,WAAA,CAAY,YAAY,KAAK,CAAA;AAAA,KAC1C,CAAA;AAED,IAAAC,mBAAA,CAAgB,MAAM;AACpB,MAAY,WAAA,CAAA,cAAA,CAAe,YAAY,KAAK,CAAA;AAAA,KAC7C,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectItemText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectItemText.js","sources":["../../src/Select/SelectItemText.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nexport interface SelectItemTextProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { computed, onBeforeUnmount, onMounted } from 'vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectItemContext } from './SelectItem.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SelectItemTextProps>(), {\n  as: 'span',\n})\n\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext()\nconst itemContext = injectSelectItemContext()\n\nconst { forwardRef, currentElement: itemTextElement } = useForwardExpose()\n\nconst optionProps = computed(() => {\n  return {\n    value: itemContext.value,\n    disabled: itemContext.disabled.value,\n    textContent: itemTextElement.value?.textContent ?? itemContext.value?.toString() ?? '',\n  }\n})\n\nonMounted(() => {\n  if (!itemTextElement.value)\n    return\n  itemContext.onItemTextChange(itemTextElement.value)\n  contentContext.itemTextRefCallback(\n    itemTextElement.value,\n    itemContext.value,\n    itemContext.disabled.value,\n  )\n  rootContext.onOptionAdd(optionProps.value)\n})\n\nonBeforeUnmount(() => {\n  rootContext.onOptionRemove(optionProps.value)\n})\n</script>\n\n<template>\n  <Primitive\n    :id=\"itemContext.textId\"\n    :ref=\"forwardRef\"\n    v-bind=\"{ ...props, ...$attrs }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,iBAAiB,0BAA2B,EAAA;AAClD,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,eAAA,KAAoB,gBAAiB,EAAA;AAEzE,IAAM,MAAA,WAAA,GAAc,SAAS,MAAM;AACjC,MAAO,OAAA;AAAA,QACL,OAAO,WAAY,CAAA,KAAA;AAAA,QACnB,QAAA,EAAU,YAAY,QAAS,CAAA,KAAA;AAAA,QAC/B,aAAa,eAAgB,CAAA,KAAA,EAAO,eAAe,WAAY,CAAA,KAAA,EAAO,UAAc,IAAA;AAAA,OACtF;AAAA,KACD,CAAA;AAED,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,eAAgB,CAAA,KAAA;AACnB,QAAA;AACF,MAAY,WAAA,CAAA,gBAAA,CAAiB,gBAAgB,KAAK,CAAA;AAClD,MAAe,cAAA,CAAA,mBAAA;AAAA,QACb,eAAgB,CAAA,KAAA;AAAA,QAChB,WAAY,CAAA,KAAA;AAAA,QACZ,YAAY,QAAS,CAAA;AAAA,OACvB;AACA,MAAY,WAAA,CAAA,WAAA,CAAY,YAAY,KAAK,CAAA;AAAA,KAC1C,CAAA;AAED,IAAA,eAAA,CAAgB,MAAM;AACpB,MAAY,WAAA,CAAA,cAAA,CAAe,YAAY,KAAK,CAAA;AAAA,KAC7C,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectItemText.js","sources":["../../src/Select/SelectItemText.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nexport interface SelectItemTextProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted } from 'vue'\nimport { Primitive } from '@/Primitive'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { injectSelectItemContext } from './SelectItem.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SelectItemTextProps>(), {\n  as: 'span',\n})\n\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext()\nconst itemContext = injectSelectItemContext()\n\nconst { forwardRef, currentElement: itemTextElement } = useForwardExpose()\n\nconst optionProps = computed(() => {\n  return {\n    value: itemContext.value,\n    disabled: itemContext.disabled.value,\n    textContent: itemTextElement.value?.textContent ?? itemContext.value?.toString() ?? '',\n  }\n})\n\nonMounted(() => {\n  if (!itemTextElement.value)\n    return\n  itemContext.onItemTextChange(itemTextElement.value)\n  contentContext.itemTextRefCallback(\n    itemTextElement.value,\n    itemContext.value,\n    itemContext.disabled.value,\n  )\n  rootContext.onOptionAdd(optionProps.value)\n})\n\nonBeforeUnmount(() => {\n  rootContext.onOptionRemove(optionProps.value)\n})\n</script>\n\n<template>\n  <Primitive\n    :id=\"itemContext.textId\"\n    :ref=\"forwardRef\"\n    v-bind=\"{ ...props, ...$attrs }\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAA,MAAM,iBAAiB,0BAA2B,EAAA;AAClD,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,eAAA,KAAoB,gBAAiB,EAAA;AAEzE,IAAM,MAAA,WAAA,GAAc,SAAS,MAAM;AACjC,MAAO,OAAA;AAAA,QACL,OAAO,WAAY,CAAA,KAAA;AAAA,QACnB,QAAA,EAAU,YAAY,QAAS,CAAA,KAAA;AAAA,QAC/B,aAAa,eAAgB,CAAA,KAAA,EAAO,eAAe,WAAY,CAAA,KAAA,EAAO,UAAc,IAAA;AAAA,OACtF;AAAA,KACD,CAAA;AAED,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,eAAgB,CAAA,KAAA;AACnB,QAAA;AACF,MAAY,WAAA,CAAA,gBAAA,CAAiB,gBAAgB,KAAK,CAAA;AAClD,MAAe,cAAA,CAAA,mBAAA;AAAA,QACb,eAAgB,CAAA,KAAA;AAAA,QAChB,WAAY,CAAA,KAAA;AAAA,QACZ,YAAY,QAAS,CAAA;AAAA,OACvB;AACA,MAAY,WAAA,CAAA,WAAA,CAAY,YAAY,KAAK,CAAA;AAAA,KAC1C,CAAA;AAED,IAAA,eAAA,CAAgB,MAAM;AACpB,MAAY,WAAA,CAAA,cAAA,CAAe,YAAY,KAAK,CAAA;AAAA,KAC7C,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectProvider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectProvider.cjs","sources":["../../src/Select/SelectProvider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AcceptableValue } from '@/shared/types'\nimport type { SelectRootContext } from './SelectRoot.vue'\nimport { provideSelectContentContext, SelectContentDefaultContextValue } from './SelectContentImpl.vue'\nimport { provideSelectRootContext } from './SelectRoot.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{\n  context: SelectRootContext<AcceptableValue>\n}>()\n\nprovideSelectRootContext(props.context)\nprovideSelectContentContext(SelectContentDefaultContextValue)\n</script>\n\n<template>\n  <slot />\n</template>\n"],"names":["provideSelectRootContext","provideSelectContentContext","SelectContentDefaultContextValue"],"mappings":";;;;;;;;;;;;;;;AAUA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAAA,0CAAA,CAAyB,MAAM,OAAO,CAAA;AACtC,IAAAC,oDAAA,CAA4BC,yDAAgC,CAAA;;;;;;;;;"}
+{"version":3,"file":"SelectProvider.cjs","sources":["../../src/Select/SelectProvider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectRootContext } from './SelectRoot.vue'\nimport type { AcceptableValue } from '@/shared/types'\nimport { provideSelectContentContext, SelectContentDefaultContextValue } from './SelectContentImpl.vue'\nimport { provideSelectRootContext } from './SelectRoot.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{\n  context: SelectRootContext<AcceptableValue>\n}>()\n\nprovideSelectRootContext(props.context)\nprovideSelectContentContext(SelectContentDefaultContextValue)\n</script>\n\n<template>\n  <slot />\n</template>\n"],"names":["provideSelectRootContext","provideSelectContentContext","SelectContentDefaultContextValue"],"mappings":";;;;;;;;;;;;;;;AAUA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAAA,0CAAA,CAAyB,MAAM,OAAO,CAAA;AACtC,IAAAC,oDAAA,CAA4BC,yDAAgC,CAAA;;;;;;;;;"}

package/dist/Select/SelectProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectProvider.js","sources":["../../src/Select/SelectProvider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { AcceptableValue } from '@/shared/types'\nimport type { SelectRootContext } from './SelectRoot.vue'\nimport { provideSelectContentContext, SelectContentDefaultContextValue } from './SelectContentImpl.vue'\nimport { provideSelectRootContext } from './SelectRoot.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{\n  context: SelectRootContext<AcceptableValue>\n}>()\n\nprovideSelectRootContext(props.context)\nprovideSelectContentContext(SelectContentDefaultContextValue)\n</script>\n\n<template>\n  <slot />\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAUA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,wBAAA,CAAyB,MAAM,OAAO,CAAA;AACtC,IAAA,2BAAA,CAA4B,gCAAgC,CAAA;;;;;;;;;"}
+{"version":3,"file":"SelectProvider.js","sources":["../../src/Select/SelectProvider.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { SelectRootContext } from './SelectRoot.vue'\nimport type { AcceptableValue } from '@/shared/types'\nimport { provideSelectContentContext, SelectContentDefaultContextValue } from './SelectContentImpl.vue'\nimport { provideSelectRootContext } from './SelectRoot.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{\n  context: SelectRootContext<AcceptableValue>\n}>()\n\nprovideSelectRootContext(props.context)\nprovideSelectContentContext(SelectContentDefaultContextValue)\n</script>\n\n<template>\n  <slot />\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;AAUA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAId,IAAA,wBAAA,CAAyB,MAAM,OAAO,CAAA;AACtC,IAAA,2BAAA,CAA4B,gCAAgC,CAAA;;;;;;;;;"}

package/dist/Select/SelectRoot.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
 const vue = require('vue');
-const Popper_PopperRoot = require('../Popper/PopperRoot.cjs');
 const core = require('@vueuse/core');
+const Popper_PopperRoot = require('../Popper/PopperRoot.cjs');
 const Select_BubbleSelect = require('./BubbleSelect.cjs');
 const Collection_Collection = require('../Collection/Collection.cjs');
 const Select_utils = require('./utils.cjs');
@@ -40,6 +40,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const emits = __emit;
     const { required, disabled, multiple, dir: propDir } = vue.toRefs(props);
     const modelValue = core.useVModel(props, "modelValue", emits, {
+      // @ts-expect-error Missing infer for AcceptableValue
       defaultValue: props.defaultValue ?? (multiple.value ? [] : void 0),
       passive: props.modelValue === void 0,
       deep: true
@@ -90,6 +91,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       modelValue,
       // @ts-expect-error Missing infer for AcceptableValue
       onValueChange: handleValueChange,
+      // @ts-expect-error Missing infer for AcceptableValue
       by: props.by,
       open,
       multiple,