reka-ui 2.2.0 → 2.2.1

package/dist/ScrollArea/ScrollAreaViewport.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaViewport.cjs","sources":["../../src/ScrollArea/ScrollAreaViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useNonce } from '@/shared/useNonce'\n\nexport interface ScrollAreaViewportProps extends PrimitiveProps {\n  /**\n   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.\n   */\n  nonce?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, ref, toRefs } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { Primitive } from '@/Primitive'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ScrollAreaViewportProps>()\n\nconst { nonce: propNonce } = toRefs(props)\nconst nonce = useNonce(propNonce)\n\nconst rootContext = injectScrollAreaRootContext()\n\nconst viewportElement = ref<HTMLElement>()\n\nonMounted(() => {\n  rootContext.onViewportChange(viewportElement.value!)\n  rootContext.onContentChange(contentElement.value!)\n})\n\ndefineExpose({\n  viewportElement,\n})\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n</script>\n\n<template>\n  <div\n    ref=\"viewportElement\"\n    data-reka-scroll-area-viewport=\"\"\n    :style=\"{\n      /**\n       * We don't support `visible` because the intention is to have at least one scrollbar\n       * if this component is used and `visible` will behave like `auto` in that case\n       * https://developer.mozilla.org/en-US/docs/Web/CSS/overflowed#description\n       *\n       * We don't handle `auto` because the intention is for the native implementation\n       * to be hidden if using this component. We just want to ensure the node is scrollable\n       * so could have used either `scroll` or `auto` here. We picked `scroll` to prevent\n       * the browser from having to work out whether to render native scrollbars or not,\n       * we tell it to with the intention of hiding them in CSS.\n       */\n      overflowX: rootContext.scrollbarXEnabled.value ? 'scroll' : 'hidden',\n      overflowY: rootContext.scrollbarYEnabled.value ? 'scroll' : 'hidden',\n    }\"\n    v-bind=\"$attrs\"\n    :tabindex=\"0\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      :style=\"{\n        /**\n         * When horizontal scrollbar is visible: this element should be at least\n         * as wide as its children for size calculations to work correctly.\n         *\n         * When horizontal scrollbar is NOT visible: this element's width should\n         * be constrained by the parent container to enable `text-overflow: ellipsis`\n         */\n        minWidth: rootContext.scrollbarXEnabled.value ? 'fit-content' : undefined,\n      }\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n    >\n      <slot />\n    </Primitive>\n  </div>\n  <Primitive\n    as=\"style\"\n    :nonce=\"nonce\"\n  >\n    /* Hide scrollbars cross-browser and enable momentum scroll for touch\n    devices */\n    [data-reka-scroll-area-viewport] {\n    scrollbar-width:none;\n    -ms-overflow-style:none;\n    -webkit-overflow-scrolling:touch;\n    }\n\n    [data-reka-scroll-area-viewport]::-webkit-scrollbar {\n    display:none;\n    }\n  </Primitive>\n</template>\n"],"names":["toRefs","useNonce","injectScrollAreaRootContext","ref","onMounted","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,EAAE,KAAA,EAAO,SAAU,EAAA,GAAIA,WAAO,KAAK,CAAA;AACzC,IAAM,MAAA,KAAA,GAAQC,yBAAS,SAAS,CAAA;AAEhC,IAAA,MAAM,cAAcC,qDAA4B,EAAA;AAEhD,IAAA,MAAM,kBAAkBC,OAAiB,EAAA;AAEzC,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,gBAAA,CAAiB,gBAAgB,KAAM,CAAA;AACnD,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAM,CAAA;AAAA,KAClD,CAAA;AAED,IAAa,QAAA,CAAA;AAAA,MACX;AAAA,KACD,CAAA;AACD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ScrollAreaViewport.cjs","sources":["../../src/ScrollArea/ScrollAreaViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useNonce } from '@/shared/useNonce'\n\nexport interface ScrollAreaViewportProps extends PrimitiveProps {\n  /**\n   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.\n   */\n  nonce?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { onMounted, ref, toRefs } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ScrollAreaViewportProps>()\n\nconst { nonce: propNonce } = toRefs(props)\nconst nonce = useNonce(propNonce)\n\nconst rootContext = injectScrollAreaRootContext()\n\nconst viewportElement = ref<HTMLElement>()\n\nonMounted(() => {\n  rootContext.onViewportChange(viewportElement.value!)\n  rootContext.onContentChange(contentElement.value!)\n})\n\ndefineExpose({\n  viewportElement,\n})\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n</script>\n\n<template>\n  <div\n    ref=\"viewportElement\"\n    data-reka-scroll-area-viewport=\"\"\n    :style=\"{\n      /**\n       * We don't support `visible` because the intention is to have at least one scrollbar\n       * if this component is used and `visible` will behave like `auto` in that case\n       * https://developer.mozilla.org/en-US/docs/Web/CSS/overflowed#description\n       *\n       * We don't handle `auto` because the intention is for the native implementation\n       * to be hidden if using this component. We just want to ensure the node is scrollable\n       * so could have used either `scroll` or `auto` here. We picked `scroll` to prevent\n       * the browser from having to work out whether to render native scrollbars or not,\n       * we tell it to with the intention of hiding them in CSS.\n       */\n      overflowX: rootContext.scrollbarXEnabled.value ? 'scroll' : 'hidden',\n      overflowY: rootContext.scrollbarYEnabled.value ? 'scroll' : 'hidden',\n    }\"\n    v-bind=\"$attrs\"\n    :tabindex=\"0\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      :style=\"{\n        /**\n         * When horizontal scrollbar is visible: this element should be at least\n         * as wide as its children for size calculations to work correctly.\n         *\n         * When horizontal scrollbar is NOT visible: this element's width should\n         * be constrained by the parent container to enable `text-overflow: ellipsis`\n         */\n        minWidth: rootContext.scrollbarXEnabled.value ? 'fit-content' : undefined,\n      }\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n    >\n      <slot />\n    </Primitive>\n  </div>\n  <Primitive\n    as=\"style\"\n    :nonce=\"nonce\"\n  >\n    /* Hide scrollbars cross-browser and enable momentum scroll for touch\n    devices */\n    [data-reka-scroll-area-viewport] {\n    scrollbar-width:none;\n    -ms-overflow-style:none;\n    -webkit-overflow-scrolling:touch;\n    }\n\n    [data-reka-scroll-area-viewport]::-webkit-scrollbar {\n    display:none;\n    }\n  </Primitive>\n</template>\n"],"names":["toRefs","useNonce","injectScrollAreaRootContext","ref","onMounted","useForwardExpose"],"mappings":";;;;;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,EAAE,KAAA,EAAO,SAAU,EAAA,GAAIA,WAAO,KAAK,CAAA;AACzC,IAAM,MAAA,KAAA,GAAQC,yBAAS,SAAS,CAAA;AAEhC,IAAA,MAAM,cAAcC,qDAA4B,EAAA;AAEhD,IAAA,MAAM,kBAAkBC,OAAiB,EAAA;AAEzC,IAAAC,aAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,gBAAA,CAAiB,gBAAgB,KAAM,CAAA;AACnD,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAM,CAAA;AAAA,KAClD,CAAA;AAED,IAAa,QAAA,CAAA;AAAA,MACX;AAAA,KACD,CAAA;AACD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmBC,wCAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ScrollArea/ScrollAreaViewport.js

@@ -1,8 +1,8 @@
 import { defineComponent, toRefs, ref, onMounted, createElementBlock, openBlock, Fragment, createElementVNode, createVNode, mergeProps, unref, normalizeStyle, withCtx, renderSlot, createTextVNode } from 'vue';
 import { u as useNonce } from '../shared/useNonce.js';
-import { i as injectScrollAreaRootContext } from './ScrollAreaRoot.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
 import { P as Primitive } from '../Primitive/Primitive.js';
+import { i as injectScrollAreaRootContext } from './ScrollAreaRoot.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{

package/dist/ScrollArea/ScrollAreaViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaViewport.js","sources":["../../src/ScrollArea/ScrollAreaViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useNonce } from '@/shared/useNonce'\n\nexport interface ScrollAreaViewportProps extends PrimitiveProps {\n  /**\n   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.\n   */\n  nonce?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, ref, toRefs } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { Primitive } from '@/Primitive'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ScrollAreaViewportProps>()\n\nconst { nonce: propNonce } = toRefs(props)\nconst nonce = useNonce(propNonce)\n\nconst rootContext = injectScrollAreaRootContext()\n\nconst viewportElement = ref<HTMLElement>()\n\nonMounted(() => {\n  rootContext.onViewportChange(viewportElement.value!)\n  rootContext.onContentChange(contentElement.value!)\n})\n\ndefineExpose({\n  viewportElement,\n})\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n</script>\n\n<template>\n  <div\n    ref=\"viewportElement\"\n    data-reka-scroll-area-viewport=\"\"\n    :style=\"{\n      /**\n       * We don't support `visible` because the intention is to have at least one scrollbar\n       * if this component is used and `visible` will behave like `auto` in that case\n       * https://developer.mozilla.org/en-US/docs/Web/CSS/overflowed#description\n       *\n       * We don't handle `auto` because the intention is for the native implementation\n       * to be hidden if using this component. We just want to ensure the node is scrollable\n       * so could have used either `scroll` or `auto` here. We picked `scroll` to prevent\n       * the browser from having to work out whether to render native scrollbars or not,\n       * we tell it to with the intention of hiding them in CSS.\n       */\n      overflowX: rootContext.scrollbarXEnabled.value ? 'scroll' : 'hidden',\n      overflowY: rootContext.scrollbarYEnabled.value ? 'scroll' : 'hidden',\n    }\"\n    v-bind=\"$attrs\"\n    :tabindex=\"0\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      :style=\"{\n        /**\n         * When horizontal scrollbar is visible: this element should be at least\n         * as wide as its children for size calculations to work correctly.\n         *\n         * When horizontal scrollbar is NOT visible: this element's width should\n         * be constrained by the parent container to enable `text-overflow: ellipsis`\n         */\n        minWidth: rootContext.scrollbarXEnabled.value ? 'fit-content' : undefined,\n      }\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n    >\n      <slot />\n    </Primitive>\n  </div>\n  <Primitive\n    as=\"style\"\n    :nonce=\"nonce\"\n  >\n    /* Hide scrollbars cross-browser and enable momentum scroll for touch\n    devices */\n    [data-reka-scroll-area-viewport] {\n    scrollbar-width:none;\n    -ms-overflow-style:none;\n    -webkit-overflow-scrolling:touch;\n    }\n\n    [data-reka-scroll-area-viewport]::-webkit-scrollbar {\n    display:none;\n    }\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,EAAE,KAAA,EAAO,SAAU,EAAA,GAAI,OAAO,KAAK,CAAA;AACzC,IAAM,MAAA,KAAA,GAAQ,SAAS,SAAS,CAAA;AAEhC,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAEhD,IAAA,MAAM,kBAAkB,GAAiB,EAAA;AAEzC,IAAA,SAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,gBAAA,CAAiB,gBAAgB,KAAM,CAAA;AACnD,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAM,CAAA;AAAA,KAClD,CAAA;AAED,IAAa,QAAA,CAAA;AAAA,MACX;AAAA,KACD,CAAA;AACD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ScrollAreaViewport.js","sources":["../../src/ScrollArea/ScrollAreaViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useNonce } from '@/shared/useNonce'\n\nexport interface ScrollAreaViewportProps extends PrimitiveProps {\n  /**\n   * Will add `nonce` attribute to the style tag which can be used by Content Security Policy. <br> If omitted, inherits globally from `ConfigProvider`.\n   */\n  nonce?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { onMounted, ref, toRefs } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<ScrollAreaViewportProps>()\n\nconst { nonce: propNonce } = toRefs(props)\nconst nonce = useNonce(propNonce)\n\nconst rootContext = injectScrollAreaRootContext()\n\nconst viewportElement = ref<HTMLElement>()\n\nonMounted(() => {\n  rootContext.onViewportChange(viewportElement.value!)\n  rootContext.onContentChange(contentElement.value!)\n})\n\ndefineExpose({\n  viewportElement,\n})\nconst { forwardRef, currentElement: contentElement } = useForwardExpose()\n</script>\n\n<template>\n  <div\n    ref=\"viewportElement\"\n    data-reka-scroll-area-viewport=\"\"\n    :style=\"{\n      /**\n       * We don't support `visible` because the intention is to have at least one scrollbar\n       * if this component is used and `visible` will behave like `auto` in that case\n       * https://developer.mozilla.org/en-US/docs/Web/CSS/overflowed#description\n       *\n       * We don't handle `auto` because the intention is for the native implementation\n       * to be hidden if using this component. We just want to ensure the node is scrollable\n       * so could have used either `scroll` or `auto` here. We picked `scroll` to prevent\n       * the browser from having to work out whether to render native scrollbars or not,\n       * we tell it to with the intention of hiding them in CSS.\n       */\n      overflowX: rootContext.scrollbarXEnabled.value ? 'scroll' : 'hidden',\n      overflowY: rootContext.scrollbarYEnabled.value ? 'scroll' : 'hidden',\n    }\"\n    v-bind=\"$attrs\"\n    :tabindex=\"0\"\n  >\n    <Primitive\n      :ref=\"forwardRef\"\n      :style=\"{\n        /**\n         * When horizontal scrollbar is visible: this element should be at least\n         * as wide as its children for size calculations to work correctly.\n         *\n         * When horizontal scrollbar is NOT visible: this element's width should\n         * be constrained by the parent container to enable `text-overflow: ellipsis`\n         */\n        minWidth: rootContext.scrollbarXEnabled.value ? 'fit-content' : undefined,\n      }\"\n      :as-child=\"props.asChild\"\n      :as=\"as\"\n    >\n      <slot />\n    </Primitive>\n  </div>\n  <Primitive\n    as=\"style\"\n    :nonce=\"nonce\"\n  >\n    /* Hide scrollbars cross-browser and enable momentum scroll for touch\n    devices */\n    [data-reka-scroll-area-viewport] {\n    scrollbar-width:none;\n    -ms-overflow-style:none;\n    -webkit-overflow-scrolling:touch;\n    }\n\n    [data-reka-scroll-area-viewport]::-webkit-scrollbar {\n    display:none;\n    }\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,EAAE,KAAA,EAAO,SAAU,EAAA,GAAI,OAAO,KAAK,CAAA;AACzC,IAAM,MAAA,KAAA,GAAQ,SAAS,SAAS,CAAA;AAEhC,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAEhD,IAAA,MAAM,kBAAkB,GAAiB,EAAA;AAEzC,IAAA,SAAA,CAAU,MAAM;AACd,MAAY,WAAA,CAAA,gBAAA,CAAiB,gBAAgB,KAAM,CAAA;AACnD,MAAY,WAAA,CAAA,eAAA,CAAgB,eAAe,KAAM,CAAA;AAAA,KAClD,CAAA;AAED,IAAa,QAAA,CAAA;AAAA,MACX;AAAA,KACD,CAAA;AACD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ScrollArea/utils.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs","sources":["../../src/ScrollArea/utils.ts"],"sourcesContent":["import { clamp } from '@/shared'\nimport type { Direction, Sizes } from './types'\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nfunction linearScale(\n  input: readonly [number, number],\n  output: readonly [number, number],\n) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1])\n      return output[0]\n    const ratio = (output[1] - output[0]) / (input[1] - input[0])\n    return output[0] + ratio * (value - input[0])\n  }\n}\n\nexport function getThumbSize(sizes: Sizes) {\n  const ratio = getThumbRatio(sizes.viewport, sizes.content)\n  const scrollbarPadding\n    = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd\n  const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio\n  // minimum of 18 matches macOS minimum\n  return Math.max(thumbSize, 18)\n}\n\nexport function getThumbRatio(viewportSize: number, contentSize: number) {\n  const ratio = viewportSize / contentSize\n  return Number.isNaN(ratio) ? 0 : ratio\n}\n\n// Custom scroll handler to avoid scroll-linked effects\n// https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects\nexport function addUnlinkedScrollListener(\n  node: HTMLElement,\n  handler = () => {},\n) {\n  let prevPosition = { left: node.scrollLeft, top: node.scrollTop }\n  let rAF = 0;\n  (function loop() {\n    const position = { left: node.scrollLeft, top: node.scrollTop }\n    const isHorizontalScroll = prevPosition.left !== position.left\n    const isVerticalScroll = prevPosition.top !== position.top\n    if (isHorizontalScroll || isVerticalScroll)\n      handler()\n    prevPosition = position\n    rAF = window.requestAnimationFrame(loop)\n  })()\n  return () => window.cancelAnimationFrame(rAF)\n}\n\nexport function getThumbOffsetFromScroll(\n  scrollPos: number,\n  sizes: Sizes,\n  dir: Direction = 'ltr',\n) {\n  const thumbSizePx = getThumbSize(sizes)\n  const scrollbarPadding\n    = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd\n  const scrollbar = sizes.scrollbar.size - scrollbarPadding\n  const maxScrollPos = sizes.content - sizes.viewport\n  const maxThumbPos = scrollbar - thumbSizePx\n  const scrollClampRange\n    = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0]\n  const scrollWithoutMomentum = clamp(\n    scrollPos,\n    scrollClampRange[0],\n    scrollClampRange[1],\n  )\n  const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos])\n  return interpolate(scrollWithoutMomentum)\n}\n\nexport function toInt(value?: string) {\n  return value ? Number.parseInt(value, 10) : 0\n}\n\nexport function getScrollPositionFromPointer(\n  pointerPos: number,\n  pointerOffset: number,\n  sizes: Sizes,\n  dir: Direction = 'ltr',\n) {\n  const thumbSizePx = getThumbSize(sizes)\n  const thumbCenter = thumbSizePx / 2\n  const offset = pointerOffset || thumbCenter\n  const thumbOffsetFromEnd = thumbSizePx - offset\n  const minPointerPos = sizes.scrollbar.paddingStart + offset\n  const maxPointerPos\n    = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd\n  const maxScrollPos = sizes.content - sizes.viewport\n  const scrollRange\n    = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0]\n  const interpolate = linearScale(\n    [minPointerPos, maxPointerPos],\n    scrollRange as [number, number],\n  )\n  return interpolate(pointerPos)\n}\n\nexport function isScrollingWithinScrollbarBounds(\n  scrollPos: number,\n  maxScrollPos: number,\n) {\n  return scrollPos > 0 && scrollPos < maxScrollPos\n}\n"],"names":["clamp"],"mappings":"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"}
+{"version":3,"file":"utils.cjs","sources":["../../src/ScrollArea/utils.ts"],"sourcesContent":["import type { Direction, Sizes } from './types'\nimport { clamp } from '@/shared'\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nfunction linearScale(\n  input: readonly [number, number],\n  output: readonly [number, number],\n) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1])\n      return output[0]\n    const ratio = (output[1] - output[0]) / (input[1] - input[0])\n    return output[0] + ratio * (value - input[0])\n  }\n}\n\nexport function getThumbSize(sizes: Sizes) {\n  const ratio = getThumbRatio(sizes.viewport, sizes.content)\n  const scrollbarPadding\n    = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd\n  const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio\n  // minimum of 18 matches macOS minimum\n  return Math.max(thumbSize, 18)\n}\n\nexport function getThumbRatio(viewportSize: number, contentSize: number) {\n  const ratio = viewportSize / contentSize\n  return Number.isNaN(ratio) ? 0 : ratio\n}\n\n// Custom scroll handler to avoid scroll-linked effects\n// https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects\nexport function addUnlinkedScrollListener(\n  node: HTMLElement,\n  handler = () => {},\n) {\n  let prevPosition = { left: node.scrollLeft, top: node.scrollTop }\n  let rAF = 0;\n  (function loop() {\n    const position = { left: node.scrollLeft, top: node.scrollTop }\n    const isHorizontalScroll = prevPosition.left !== position.left\n    const isVerticalScroll = prevPosition.top !== position.top\n    if (isHorizontalScroll || isVerticalScroll)\n      handler()\n    prevPosition = position\n    rAF = window.requestAnimationFrame(loop)\n  })()\n  return () => window.cancelAnimationFrame(rAF)\n}\n\nexport function getThumbOffsetFromScroll(\n  scrollPos: number,\n  sizes: Sizes,\n  dir: Direction = 'ltr',\n) {\n  const thumbSizePx = getThumbSize(sizes)\n  const scrollbarPadding\n    = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd\n  const scrollbar = sizes.scrollbar.size - scrollbarPadding\n  const maxScrollPos = sizes.content - sizes.viewport\n  const maxThumbPos = scrollbar - thumbSizePx\n  const scrollClampRange\n    = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0]\n  const scrollWithoutMomentum = clamp(\n    scrollPos,\n    scrollClampRange[0],\n    scrollClampRange[1],\n  )\n  const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos])\n  return interpolate(scrollWithoutMomentum)\n}\n\nexport function toInt(value?: string) {\n  return value ? Number.parseInt(value, 10) : 0\n}\n\nexport function getScrollPositionFromPointer(\n  pointerPos: number,\n  pointerOffset: number,\n  sizes: Sizes,\n  dir: Direction = 'ltr',\n) {\n  const thumbSizePx = getThumbSize(sizes)\n  const thumbCenter = thumbSizePx / 2\n  const offset = pointerOffset || thumbCenter\n  const thumbOffsetFromEnd = thumbSizePx - offset\n  const minPointerPos = sizes.scrollbar.paddingStart + offset\n  const maxPointerPos\n    = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd\n  const maxScrollPos = sizes.content - sizes.viewport\n  const scrollRange\n    = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0]\n  const interpolate = linearScale(\n    [minPointerPos, maxPointerPos],\n    scrollRange as [number, number],\n  )\n  return interpolate(pointerPos)\n}\n\nexport function isScrollingWithinScrollbarBounds(\n  scrollPos: number,\n  maxScrollPos: number,\n) {\n  return scrollPos > 0 && scrollPos < maxScrollPos\n}\n"],"names":["clamp"],"mappings":"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"}

package/dist/ScrollArea/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../src/ScrollArea/utils.ts"],"sourcesContent":["import { clamp } from '@/shared'\nimport type { Direction, Sizes } from './types'\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nfunction linearScale(\n  input: readonly [number, number],\n  output: readonly [number, number],\n) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1])\n      return output[0]\n    const ratio = (output[1] - output[0]) / (input[1] - input[0])\n    return output[0] + ratio * (value - input[0])\n  }\n}\n\nexport function getThumbSize(sizes: Sizes) {\n  const ratio = getThumbRatio(sizes.viewport, sizes.content)\n  const scrollbarPadding\n    = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd\n  const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio\n  // minimum of 18 matches macOS minimum\n  return Math.max(thumbSize, 18)\n}\n\nexport function getThumbRatio(viewportSize: number, contentSize: number) {\n  const ratio = viewportSize / contentSize\n  return Number.isNaN(ratio) ? 0 : ratio\n}\n\n// Custom scroll handler to avoid scroll-linked effects\n// https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects\nexport function addUnlinkedScrollListener(\n  node: HTMLElement,\n  handler = () => {},\n) {\n  let prevPosition = { left: node.scrollLeft, top: node.scrollTop }\n  let rAF = 0;\n  (function loop() {\n    const position = { left: node.scrollLeft, top: node.scrollTop }\n    const isHorizontalScroll = prevPosition.left !== position.left\n    const isVerticalScroll = prevPosition.top !== position.top\n    if (isHorizontalScroll || isVerticalScroll)\n      handler()\n    prevPosition = position\n    rAF = window.requestAnimationFrame(loop)\n  })()\n  return () => window.cancelAnimationFrame(rAF)\n}\n\nexport function getThumbOffsetFromScroll(\n  scrollPos: number,\n  sizes: Sizes,\n  dir: Direction = 'ltr',\n) {\n  const thumbSizePx = getThumbSize(sizes)\n  const scrollbarPadding\n    = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd\n  const scrollbar = sizes.scrollbar.size - scrollbarPadding\n  const maxScrollPos = sizes.content - sizes.viewport\n  const maxThumbPos = scrollbar - thumbSizePx\n  const scrollClampRange\n    = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0]\n  const scrollWithoutMomentum = clamp(\n    scrollPos,\n    scrollClampRange[0],\n    scrollClampRange[1],\n  )\n  const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos])\n  return interpolate(scrollWithoutMomentum)\n}\n\nexport function toInt(value?: string) {\n  return value ? Number.parseInt(value, 10) : 0\n}\n\nexport function getScrollPositionFromPointer(\n  pointerPos: number,\n  pointerOffset: number,\n  sizes: Sizes,\n  dir: Direction = 'ltr',\n) {\n  const thumbSizePx = getThumbSize(sizes)\n  const thumbCenter = thumbSizePx / 2\n  const offset = pointerOffset || thumbCenter\n  const thumbOffsetFromEnd = thumbSizePx - offset\n  const minPointerPos = sizes.scrollbar.paddingStart + offset\n  const maxPointerPos\n    = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd\n  const maxScrollPos = sizes.content - sizes.viewport\n  const scrollRange\n    = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0]\n  const interpolate = linearScale(\n    [minPointerPos, maxPointerPos],\n    scrollRange as [number, number],\n  )\n  return interpolate(pointerPos)\n}\n\nexport function isScrollingWithinScrollbarBounds(\n  scrollPos: number,\n  maxScrollPos: number,\n) {\n  return scrollPos > 0 && scrollPos < maxScrollPos\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../src/ScrollArea/utils.ts"],"sourcesContent":["import type { Direction, Sizes } from './types'\nimport { clamp } from '@/shared'\n\n// https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js\nfunction linearScale(\n  input: readonly [number, number],\n  output: readonly [number, number],\n) {\n  return (value: number) => {\n    if (input[0] === input[1] || output[0] === output[1])\n      return output[0]\n    const ratio = (output[1] - output[0]) / (input[1] - input[0])\n    return output[0] + ratio * (value - input[0])\n  }\n}\n\nexport function getThumbSize(sizes: Sizes) {\n  const ratio = getThumbRatio(sizes.viewport, sizes.content)\n  const scrollbarPadding\n    = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd\n  const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio\n  // minimum of 18 matches macOS minimum\n  return Math.max(thumbSize, 18)\n}\n\nexport function getThumbRatio(viewportSize: number, contentSize: number) {\n  const ratio = viewportSize / contentSize\n  return Number.isNaN(ratio) ? 0 : ratio\n}\n\n// Custom scroll handler to avoid scroll-linked effects\n// https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects\nexport function addUnlinkedScrollListener(\n  node: HTMLElement,\n  handler = () => {},\n) {\n  let prevPosition = { left: node.scrollLeft, top: node.scrollTop }\n  let rAF = 0;\n  (function loop() {\n    const position = { left: node.scrollLeft, top: node.scrollTop }\n    const isHorizontalScroll = prevPosition.left !== position.left\n    const isVerticalScroll = prevPosition.top !== position.top\n    if (isHorizontalScroll || isVerticalScroll)\n      handler()\n    prevPosition = position\n    rAF = window.requestAnimationFrame(loop)\n  })()\n  return () => window.cancelAnimationFrame(rAF)\n}\n\nexport function getThumbOffsetFromScroll(\n  scrollPos: number,\n  sizes: Sizes,\n  dir: Direction = 'ltr',\n) {\n  const thumbSizePx = getThumbSize(sizes)\n  const scrollbarPadding\n    = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd\n  const scrollbar = sizes.scrollbar.size - scrollbarPadding\n  const maxScrollPos = sizes.content - sizes.viewport\n  const maxThumbPos = scrollbar - thumbSizePx\n  const scrollClampRange\n    = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0]\n  const scrollWithoutMomentum = clamp(\n    scrollPos,\n    scrollClampRange[0],\n    scrollClampRange[1],\n  )\n  const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos])\n  return interpolate(scrollWithoutMomentum)\n}\n\nexport function toInt(value?: string) {\n  return value ? Number.parseInt(value, 10) : 0\n}\n\nexport function getScrollPositionFromPointer(\n  pointerPos: number,\n  pointerOffset: number,\n  sizes: Sizes,\n  dir: Direction = 'ltr',\n) {\n  const thumbSizePx = getThumbSize(sizes)\n  const thumbCenter = thumbSizePx / 2\n  const offset = pointerOffset || thumbCenter\n  const thumbOffsetFromEnd = thumbSizePx - offset\n  const minPointerPos = sizes.scrollbar.paddingStart + offset\n  const maxPointerPos\n    = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd\n  const maxScrollPos = sizes.content - sizes.viewport\n  const scrollRange\n    = dir === 'ltr' ? [0, maxScrollPos] : [maxScrollPos * -1, 0]\n  const interpolate = linearScale(\n    [minPointerPos, maxPointerPos],\n    scrollRange as [number, number],\n  )\n  return interpolate(pointerPos)\n}\n\nexport function isScrollingWithinScrollbarBounds(\n  scrollPos: number,\n  maxScrollPos: number,\n) {\n  return scrollPos > 0 && scrollPos < maxScrollPos\n}\n"],"names":[],"mappings":"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"}

package/dist/Select/BubbleSelect.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleSelect.cjs","sources":["../../src/Select/BubbleSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\nimport { VisuallyHidden } from '@/VisuallyHidden'\n\ninterface BubbleSelectProps {\n  autocomplete?: string\n  autofocus?: boolean\n  disabled?: boolean\n  form?: string\n  multiple?: boolean\n  name?: string\n  required?: boolean\n  size?: number\n  value?: any\n}\n\nconst props = defineProps<BubbleSelectProps>()\nconst selectElement = ref<HTMLElement>()\n\n// This would bubble \"change\" event to form, with the target as Select element.\nwatch(() => props.value, (cur, prev) => {\n  const selectProto = window.HTMLSelectElement.prototype\n  const descriptor = Object.getOwnPropertyDescriptor(\n    selectProto,\n    'value',\n  ) as PropertyDescriptor\n  const setValue = descriptor.set\n  if (cur !== prev && setValue && selectElement.value) {\n    const event = new Event('change', { bubbles: true })\n    setValue.call(selectElement.value, cur)\n    selectElement.value.dispatchEvent(event)\n  }\n})\n\n/**\n * We purposefully use a `select` here to support form autofill as much\n * as possible.\n *\n * We purposefully do not add the `value` attribute here to allow the value\n * to be set programmatically and bubble to any parent form `onChange` event.\n *\n * We use `VisuallyHidden` rather than `display: \"none\"` because Safari autofill\n * won't work otherwise.\n */\n</script>\n\n<template>\n  <VisuallyHidden as-child>\n    <select\n      ref=\"selectElement\"\n      v-bind=\"props\"\n    >\n      <slot />\n    </select>\n  </VisuallyHidden>\n</template>\n"],"names":["ref","watch"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,gBAAgBA,OAAiB,EAAA;AAGvC,IAAAC,SAAA,CAAM,MAAM,KAAA,CAAM,KAAO,EAAA,CAAC,KAAK,IAAS,KAAA;AACtC,MAAM,MAAA,WAAA,GAAc,OAAO,iBAAkB,CAAA,SAAA;AAC7C,MAAA,MAAM,aAAa,MAAO,CAAA,wBAAA;AAAA,QACxB,WAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,MAAM,WAAW,UAAW,CAAA,GAAA;AAC5B,MAAA,IAAI,GAAQ,KAAA,IAAA,IAAQ,QAAY,IAAA,aAAA,CAAc,KAAO,EAAA;AACnD,QAAA,MAAM,QAAQ,IAAI,KAAA,CAAM,UAAU,EAAE,OAAA,EAAS,MAAM,CAAA;AACnD,QAAS,QAAA,CAAA,IAAA,CAAK,aAAc,CAAA,KAAA,EAAO,GAAG,CAAA;AACtC,QAAc,aAAA,CAAA,KAAA,CAAM,cAAc,KAAK,CAAA;AAAA;AACzC,KACD,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BubbleSelect.cjs","sources":["../../src/Select/BubbleSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { VisuallyHidden } from '@/VisuallyHidden'\nimport { ref, watch } from 'vue'\n\ninterface BubbleSelectProps {\n  autocomplete?: string\n  autofocus?: boolean\n  disabled?: boolean\n  form?: string\n  multiple?: boolean\n  name?: string\n  required?: boolean\n  size?: number\n  value?: any\n}\n\nconst props = defineProps<BubbleSelectProps>()\nconst selectElement = ref<HTMLElement>()\n\n// This would bubble \"change\" event to form, with the target as Select element.\nwatch(() => props.value, (cur, prev) => {\n  const selectProto = window.HTMLSelectElement.prototype\n  const descriptor = Object.getOwnPropertyDescriptor(\n    selectProto,\n    'value',\n  ) as PropertyDescriptor\n  const setValue = descriptor.set\n  if (cur !== prev && setValue && selectElement.value) {\n    const event = new Event('change', { bubbles: true })\n    setValue.call(selectElement.value, cur)\n    selectElement.value.dispatchEvent(event)\n  }\n})\n\n/**\n * We purposefully use a `select` here to support form autofill as much\n * as possible.\n *\n * We purposefully do not add the `value` attribute here to allow the value\n * to be set programmatically and bubble to any parent form `onChange` event.\n *\n * We use `VisuallyHidden` rather than `display: \"none\"` because Safari autofill\n * won't work otherwise.\n */\n</script>\n\n<template>\n  <VisuallyHidden as-child>\n    <select\n      ref=\"selectElement\"\n      v-bind=\"props\"\n    >\n      <slot />\n    </select>\n  </VisuallyHidden>\n</template>\n"],"names":["ref","watch"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,gBAAgBA,OAAiB,EAAA;AAGvC,IAAAC,SAAA,CAAM,MAAM,KAAA,CAAM,KAAO,EAAA,CAAC,KAAK,IAAS,KAAA;AACtC,MAAM,MAAA,WAAA,GAAc,OAAO,iBAAkB,CAAA,SAAA;AAC7C,MAAA,MAAM,aAAa,MAAO,CAAA,wBAAA;AAAA,QACxB,WAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,MAAM,WAAW,UAAW,CAAA,GAAA;AAC5B,MAAA,IAAI,GAAQ,KAAA,IAAA,IAAQ,QAAY,IAAA,aAAA,CAAc,KAAO,EAAA;AACnD,QAAA,MAAM,QAAQ,IAAI,KAAA,CAAM,UAAU,EAAE,OAAA,EAAS,MAAM,CAAA;AACnD,QAAS,QAAA,CAAA,IAAA,CAAK,aAAc,CAAA,KAAA,EAAO,GAAG,CAAA;AACtC,QAAc,aAAA,CAAA,KAAA,CAAM,cAAc,KAAK,CAAA;AAAA;AACzC,KACD,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/BubbleSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleSelect.js","sources":["../../src/Select/BubbleSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\nimport { VisuallyHidden } from '@/VisuallyHidden'\n\ninterface BubbleSelectProps {\n  autocomplete?: string\n  autofocus?: boolean\n  disabled?: boolean\n  form?: string\n  multiple?: boolean\n  name?: string\n  required?: boolean\n  size?: number\n  value?: any\n}\n\nconst props = defineProps<BubbleSelectProps>()\nconst selectElement = ref<HTMLElement>()\n\n// This would bubble \"change\" event to form, with the target as Select element.\nwatch(() => props.value, (cur, prev) => {\n  const selectProto = window.HTMLSelectElement.prototype\n  const descriptor = Object.getOwnPropertyDescriptor(\n    selectProto,\n    'value',\n  ) as PropertyDescriptor\n  const setValue = descriptor.set\n  if (cur !== prev && setValue && selectElement.value) {\n    const event = new Event('change', { bubbles: true })\n    setValue.call(selectElement.value, cur)\n    selectElement.value.dispatchEvent(event)\n  }\n})\n\n/**\n * We purposefully use a `select` here to support form autofill as much\n * as possible.\n *\n * We purposefully do not add the `value` attribute here to allow the value\n * to be set programmatically and bubble to any parent form `onChange` event.\n *\n * We use `VisuallyHidden` rather than `display: \"none\"` because Safari autofill\n * won't work otherwise.\n */\n</script>\n\n<template>\n  <VisuallyHidden as-child>\n    <select\n      ref=\"selectElement\"\n      v-bind=\"props\"\n    >\n      <slot />\n    </select>\n  </VisuallyHidden>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,gBAAgB,GAAiB,EAAA;AAGvC,IAAA,KAAA,CAAM,MAAM,KAAA,CAAM,KAAO,EAAA,CAAC,KAAK,IAAS,KAAA;AACtC,MAAM,MAAA,WAAA,GAAc,OAAO,iBAAkB,CAAA,SAAA;AAC7C,MAAA,MAAM,aAAa,MAAO,CAAA,wBAAA;AAAA,QACxB,WAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,MAAM,WAAW,UAAW,CAAA,GAAA;AAC5B,MAAA,IAAI,GAAQ,KAAA,IAAA,IAAQ,QAAY,IAAA,aAAA,CAAc,KAAO,EAAA;AACnD,QAAA,MAAM,QAAQ,IAAI,KAAA,CAAM,UAAU,EAAE,OAAA,EAAS,MAAM,CAAA;AACnD,QAAS,QAAA,CAAA,IAAA,CAAK,aAAc,CAAA,KAAA,EAAO,GAAG,CAAA;AACtC,QAAc,aAAA,CAAA,KAAA,CAAM,cAAc,KAAK,CAAA;AAAA;AACzC,KACD,CAAA;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"BubbleSelect.js","sources":["../../src/Select/BubbleSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { VisuallyHidden } from '@/VisuallyHidden'\nimport { ref, watch } from 'vue'\n\ninterface BubbleSelectProps {\n  autocomplete?: string\n  autofocus?: boolean\n  disabled?: boolean\n  form?: string\n  multiple?: boolean\n  name?: string\n  required?: boolean\n  size?: number\n  value?: any\n}\n\nconst props = defineProps<BubbleSelectProps>()\nconst selectElement = ref<HTMLElement>()\n\n// This would bubble \"change\" event to form, with the target as Select element.\nwatch(() => props.value, (cur, prev) => {\n  const selectProto = window.HTMLSelectElement.prototype\n  const descriptor = Object.getOwnPropertyDescriptor(\n    selectProto,\n    'value',\n  ) as PropertyDescriptor\n  const setValue = descriptor.set\n  if (cur !== prev && setValue && selectElement.value) {\n    const event = new Event('change', { bubbles: true })\n    setValue.call(selectElement.value, cur)\n    selectElement.value.dispatchEvent(event)\n  }\n})\n\n/**\n * We purposefully use a `select` here to support form autofill as much\n * as possible.\n *\n * We purposefully do not add the `value` attribute here to allow the value\n * to be set programmatically and bubble to any parent form `onChange` event.\n *\n * We use `VisuallyHidden` rather than `display: \"none\"` because Safari autofill\n * won't work otherwise.\n */\n</script>\n\n<template>\n  <VisuallyHidden as-child>\n    <select\n      ref=\"selectElement\"\n      v-bind=\"props\"\n    >\n      <slot />\n    </select>\n  </VisuallyHidden>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,gBAAgB,GAAiB,EAAA;AAGvC,IAAA,KAAA,CAAM,MAAM,KAAA,CAAM,KAAO,EAAA,CAAC,KAAK,IAAS,KAAA;AACtC,MAAM,MAAA,WAAA,GAAc,OAAO,iBAAkB,CAAA,SAAA;AAC7C,MAAA,MAAM,aAAa,MAAO,CAAA,wBAAA;AAAA,QACxB,WAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,MAAM,WAAW,UAAW,CAAA,GAAA;AAC5B,MAAA,IAAI,GAAQ,KAAA,IAAA,IAAQ,QAAY,IAAA,aAAA,CAAc,KAAO,EAAA;AACnD,QAAA,MAAM,QAAQ,IAAI,KAAA,CAAM,UAAU,EAAE,OAAA,EAAS,MAAM,CAAA;AACnD,QAAS,QAAA,CAAA,IAAA,CAAK,aAAc,CAAA,KAAA,EAAO,GAAG,CAAA;AACtC,QAAc,aAAA,CAAA,KAAA,CAAM,cAAc,KAAK,CAAA;AAAA;AACzC,KACD,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectArrow.cjs

@@ -2,8 +2,8 @@
 
 const vue = require('vue');
 const Popper_PopperArrow = require('../Popper/PopperArrow.cjs');
-const Select_SelectRoot = require('./SelectRoot.cjs');
 const Select_SelectContentImpl = require('./SelectContentImpl.cjs');
+const Select_SelectRoot = require('./SelectRoot.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "SelectArrow",

package/dist/Select/SelectArrow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectArrow.cjs","sources":["../../src/Select/SelectArrow.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PopperArrowProps } from '@/Popper'\n\nexport interface SelectArrowProps extends PopperArrowProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'\nimport { PopperArrow } from '@/Popper'\n\nconst props = withDefaults(defineProps<SelectArrowProps>(), {\n  width: 10,\n  height: 5,\n  as: 'svg',\n})\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext(SelectContentDefaultContextValue)\n</script>\n\n<template>\n  <PopperArrow\n    v-if=\"rootContext.open.value && contentContext.position === 'popper'\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </PopperArrow>\n</template>\n"],"names":["injectSelectRootContext","injectSelectContentContext","SelectContentDefaultContextValue"],"mappings":";;;;;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAM,MAAA,cAAA,GAAiBC,oDAA2BC,yDAAgC,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectArrow.cjs","sources":["../../src/Select/SelectArrow.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PopperArrowProps } from '@/Popper'\n\nexport interface SelectArrowProps extends PopperArrowProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { PopperArrow } from '@/Popper'\nimport { injectSelectContentContext, SelectContentDefaultContextValue } from './SelectContentImpl.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nconst props = withDefaults(defineProps<SelectArrowProps>(), {\n  width: 10,\n  height: 5,\n  as: 'svg',\n})\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext(SelectContentDefaultContextValue)\n</script>\n\n<template>\n  <PopperArrow\n    v-if=\"rootContext.open.value && contentContext.position === 'popper'\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </PopperArrow>\n</template>\n"],"names":["injectSelectRootContext","injectSelectContentContext","SelectContentDefaultContextValue"],"mappings":";;;;;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,cAAcA,yCAAwB,EAAA;AAC5C,IAAM,MAAA,cAAA,GAAiBC,oDAA2BC,yDAAgC,CAAA;;;;;;;;;;;;;;"}

package/dist/Select/SelectArrow.js

@@ -1,7 +1,7 @@
 import { defineComponent, createBlock, createCommentVNode, unref, openBlock, normalizeProps, mergeProps, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from '../Popper/PopperArrow.js';
-import { i as injectSelectRootContext } from './SelectRoot.js';
 import { i as injectSelectContentContext, S as SelectContentDefaultContextValue } from './SelectContentImpl.js';
+import { i as injectSelectRootContext } from './SelectRoot.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "SelectArrow",

package/dist/Select/SelectArrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectArrow.js","sources":["../../src/Select/SelectArrow.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PopperArrowProps } from '@/Popper'\n\nexport interface SelectArrowProps extends PopperArrowProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { SelectContentDefaultContextValue, injectSelectContentContext } from './SelectContentImpl.vue'\nimport { PopperArrow } from '@/Popper'\n\nconst props = withDefaults(defineProps<SelectArrowProps>(), {\n  width: 10,\n  height: 5,\n  as: 'svg',\n})\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext(SelectContentDefaultContextValue)\n</script>\n\n<template>\n  <PopperArrow\n    v-if=\"rootContext.open.value && contentContext.position === 'popper'\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </PopperArrow>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAM,MAAA,cAAA,GAAiB,2BAA2B,gCAAgC,CAAA;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectArrow.js","sources":["../../src/Select/SelectArrow.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PopperArrowProps } from '@/Popper'\n\nexport interface SelectArrowProps extends PopperArrowProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { PopperArrow } from '@/Popper'\nimport { injectSelectContentContext, SelectContentDefaultContextValue } from './SelectContentImpl.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\nconst props = withDefaults(defineProps<SelectArrowProps>(), {\n  width: 10,\n  height: 5,\n  as: 'svg',\n})\nconst rootContext = injectSelectRootContext()\nconst contentContext = injectSelectContentContext(SelectContentDefaultContextValue)\n</script>\n\n<template>\n  <PopperArrow\n    v-if=\"rootContext.open.value && contentContext.position === 'popper'\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </PopperArrow>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAWA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAKd,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAC5C,IAAM,MAAA,cAAA,GAAiB,2BAA2B,gCAAgC,CAAA;;;;;;;;;;;;;;"}

package/dist/Select/SelectContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.cjs","sources":["../../src/Select/SelectContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  SelectContentImplEmits,\n  SelectContentImplProps,\n} from './SelectContentImpl.vue'\n\nexport type SelectContentEmits = SelectContentImplEmits\n\nexport interface SelectContentProps extends SelectContentImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\nimport SelectContentImpl from './SelectContentImpl.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { Presence } from '@/Presence'\nimport { useForwardPropsEmits } from '@/shared'\nimport SelectProvider from './SelectProvider.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SelectContentProps>()\n\nconst emits = defineEmits<SelectContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\n\nconst rootContext = injectSelectRootContext()\n\nconst fragment = ref<DocumentFragment>()\nonMounted(() => {\n  fragment.value = new DocumentFragment()\n})\n\nconst presenceRef = ref<InstanceType<typeof Presence>>()\nconst renderPresence = computed(() => props.forceMount || rootContext.open.value)\n</script>\n\n<template>\n  <Presence\n    v-if=\"renderPresence\"\n    ref=\"presenceRef\"\n    :present=\"true\"\n  >\n    <SelectContentImpl v-bind=\"{ ...forwarded, ...$attrs }\">\n      <slot />\n    </SelectContentImpl>\n  </Presence>\n\n  <div v-else-if=\"!presenceRef?.present && fragment\">\n    <Teleport :to=\"fragment\">\n      <SelectProvider :context=\"rootContext\">\n        <slot />\n      </SelectProvider>\n    </Teleport>\n  </div>\n</template>\n"],"names":["useForwardPropsEmits","injectSelectRootContext","ref","onMounted","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AAEnD,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAA,MAAM,WAAWC,OAAsB,EAAA;AACvC,IAAAC,aAAA,CAAU,MAAM;AACd,MAAS,QAAA,CAAA,KAAA,GAAQ,IAAI,gBAAiB,EAAA;AAAA,KACvC,CAAA;AAED,IAAA,MAAM,cAAcD,OAAmC,EAAA;AACvD,IAAA,MAAM,iBAAiBE,YAAS,CAAA,MAAM,MAAM,UAAc,IAAA,WAAA,CAAY,KAAK,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectContent.cjs","sources":["../../src/Select/SelectContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  SelectContentImplEmits,\n  SelectContentImplProps,\n} from './SelectContentImpl.vue'\n\nexport type SelectContentEmits = SelectContentImplEmits\n\nexport interface SelectContentProps extends SelectContentImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport { useForwardPropsEmits } from '@/shared'\nimport { computed, onMounted, ref } from 'vue'\nimport SelectContentImpl from './SelectContentImpl.vue'\nimport SelectProvider from './SelectProvider.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SelectContentProps>()\n\nconst emits = defineEmits<SelectContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\n\nconst rootContext = injectSelectRootContext()\n\nconst fragment = ref<DocumentFragment>()\nonMounted(() => {\n  fragment.value = new DocumentFragment()\n})\n\nconst presenceRef = ref<InstanceType<typeof Presence>>()\nconst renderPresence = computed(() => props.forceMount || rootContext.open.value)\n</script>\n\n<template>\n  <Presence\n    v-if=\"renderPresence\"\n    ref=\"presenceRef\"\n    :present=\"true\"\n  >\n    <SelectContentImpl v-bind=\"{ ...forwarded, ...$attrs }\">\n      <slot />\n    </SelectContentImpl>\n  </Presence>\n\n  <div v-else-if=\"!presenceRef?.present && fragment\">\n    <Teleport :to=\"fragment\">\n      <SelectProvider :context=\"rootContext\">\n        <slot />\n      </SelectProvider>\n    </Teleport>\n  </div>\n</template>\n"],"names":["useForwardPropsEmits","injectSelectRootContext","ref","onMounted","computed"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAYA,gDAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AAEnD,IAAA,MAAM,cAAcC,yCAAwB,EAAA;AAE5C,IAAA,MAAM,WAAWC,OAAsB,EAAA;AACvC,IAAAC,aAAA,CAAU,MAAM;AACd,MAAS,QAAA,CAAA,KAAA,GAAQ,IAAI,gBAAiB,EAAA;AAAA,KACvC,CAAA;AAED,IAAA,MAAM,cAAcD,OAAmC,EAAA;AACvD,IAAA,MAAM,iBAAiBE,YAAS,CAAA,MAAM,MAAM,UAAc,IAAA,WAAA,CAAY,KAAK,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectContent.js","sources":["../../src/Select/SelectContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  SelectContentImplEmits,\n  SelectContentImplProps,\n} from './SelectContentImpl.vue'\n\nexport type SelectContentEmits = SelectContentImplEmits\n\nexport interface SelectContentProps extends SelectContentImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\nimport SelectContentImpl from './SelectContentImpl.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport { Presence } from '@/Presence'\nimport { useForwardPropsEmits } from '@/shared'\nimport SelectProvider from './SelectProvider.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SelectContentProps>()\n\nconst emits = defineEmits<SelectContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\n\nconst rootContext = injectSelectRootContext()\n\nconst fragment = ref<DocumentFragment>()\nonMounted(() => {\n  fragment.value = new DocumentFragment()\n})\n\nconst presenceRef = ref<InstanceType<typeof Presence>>()\nconst renderPresence = computed(() => props.forceMount || rootContext.open.value)\n</script>\n\n<template>\n  <Presence\n    v-if=\"renderPresence\"\n    ref=\"presenceRef\"\n    :present=\"true\"\n  >\n    <SelectContentImpl v-bind=\"{ ...forwarded, ...$attrs }\">\n      <slot />\n    </SelectContentImpl>\n  </Presence>\n\n  <div v-else-if=\"!presenceRef?.present && fragment\">\n    <Teleport :to=\"fragment\">\n      <SelectProvider :context=\"rootContext\">\n        <slot />\n      </SelectProvider>\n    </Teleport>\n  </div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AAEnD,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAA,MAAM,WAAW,GAAsB,EAAA;AACvC,IAAA,SAAA,CAAU,MAAM;AACd,MAAS,QAAA,CAAA,KAAA,GAAQ,IAAI,gBAAiB,EAAA;AAAA,KACvC,CAAA;AAED,IAAA,MAAM,cAAc,GAAmC,EAAA;AACvD,IAAA,MAAM,iBAAiB,QAAS,CAAA,MAAM,MAAM,UAAc,IAAA,WAAA,CAAY,KAAK,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectContent.js","sources":["../../src/Select/SelectContent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type {\n  SelectContentImplEmits,\n  SelectContentImplProps,\n} from './SelectContentImpl.vue'\n\nexport type SelectContentEmits = SelectContentImplEmits\n\nexport interface SelectContentProps extends SelectContentImplProps {\n  /**\n   * Used to force mounting when more control is needed. Useful when\n   * controlling animation with Vue animation libraries.\n   */\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport { useForwardPropsEmits } from '@/shared'\nimport { computed, onMounted, ref } from 'vue'\nimport SelectContentImpl from './SelectContentImpl.vue'\nimport SelectProvider from './SelectProvider.vue'\nimport { injectSelectRootContext } from './SelectRoot.vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<SelectContentProps>()\n\nconst emits = defineEmits<SelectContentEmits>()\nconst forwarded = useForwardPropsEmits(props, emits)\n\nconst rootContext = injectSelectRootContext()\n\nconst fragment = ref<DocumentFragment>()\nonMounted(() => {\n  fragment.value = new DocumentFragment()\n})\n\nconst presenceRef = ref<InstanceType<typeof Presence>>()\nconst renderPresence = computed(() => props.forceMount || rootContext.open.value)\n</script>\n\n<template>\n  <Presence\n    v-if=\"renderPresence\"\n    ref=\"presenceRef\"\n    :present=\"true\"\n  >\n    <SelectContentImpl v-bind=\"{ ...forwarded, ...$attrs }\">\n      <slot />\n    </SelectContentImpl>\n  </Presence>\n\n  <div v-else-if=\"!presenceRef?.present && fragment\">\n    <Teleport :to=\"fragment\">\n      <SelectProvider :context=\"rootContext\">\n        <slot />\n      </SelectProvider>\n    </Teleport>\n  </div>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,KAAQ,GAAA,MAAA;AACd,IAAM,MAAA,SAAA,GAAY,oBAAqB,CAAA,KAAA,EAAO,KAAK,CAAA;AAEnD,IAAA,MAAM,cAAc,uBAAwB,EAAA;AAE5C,IAAA,MAAM,WAAW,GAAsB,EAAA;AACvC,IAAA,SAAA,CAAU,MAAM;AACd,MAAS,QAAA,CAAA,KAAA,GAAQ,IAAI,gBAAiB,EAAA;AAAA,KACvC,CAAA;AAED,IAAA,MAAM,cAAc,GAAmC,EAAA;AACvD,IAAA,MAAM,iBAAiB,QAAS,CAAA,MAAM,MAAM,UAAc,IAAA,WAAA,CAAY,KAAK,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Select/SelectContentImpl.cjs

@@ -1,19 +1,19 @@
 '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 Select_SelectItemAlignedPosition = require('./SelectItemAlignedPosition.cjs');
 const Select_SelectPopperPosition = require('./SelectPopperPosition.cjs');
-const DismissableLayer_DismissableLayer = require('../DismissableLayer/DismissableLayer.cjs');
-const Menu_utils = require('../Menu/utils.cjs');
+const Collection_Collection = require('../Collection/Collection.cjs');
 const shared_useBodyScrollLock = require('../shared/useBodyScrollLock.cjs');
 const Select_utils = require('./utils.cjs');
-const Collection_Collection = require('../Collection/Collection.cjs');
+const shared_createContext = require('../shared/createContext.cjs');
 const shared_useFocusGuards = require('../shared/useFocusGuards.cjs');
 const shared_useHideOthers = require('../shared/useHideOthers.cjs');
 const shared_useTypeahead = require('../shared/useTypeahead.cjs');
 const shared_useForwardProps = require('../shared/useForwardProps.cjs');
-const shared_createContext = require('../shared/createContext.cjs');
 const FocusScope_FocusScope = require('../FocusScope/FocusScope.cjs');
 const Select_SelectRoot = require('./SelectRoot.cjs');
 

package/dist/Select/SelectContentImpl.cjs.map

@@ -1 +1 @@
-{"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 { PopperContentProps } from '@/Popper'\nimport type { PointerDownOutsideEvent } from '@/DismissableLayer'\nimport {\n  createContext,\n  useFocusGuards,\n  useForwardProps,\n  useHideOthers,\n  useTypeahead,\n} from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\nimport type { AcceptableValue } from '@/shared/types'\nimport { valueComparator } from './utils'\nimport { useCollection } from '@/Collection'\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 {\n  computed,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'\nimport SelectPopperPosition from './SelectPopperPosition.vue'\nimport { FocusScope } from '@/FocusScope'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { focusFirst } from '@/Menu/utils'\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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"}
+{"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":"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"}

package/dist/Select/SelectContentImpl.js

@@ -1,17 +1,17 @@
 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 { _ as _sfc_main$4 } from './SelectItemAlignedPosition.js';
 import { _ as _sfc_main$3 } from './SelectPopperPosition.js';
-import { _ as _sfc_main$2 } from '../DismissableLayer/DismissableLayer.js';
-import { f as focusFirst } from '../Menu/utils.js';
+import { u as useCollection } from '../Collection/Collection.js';
 import { u as useBodyScrollLock } from '../shared/useBodyScrollLock.js';
 import { v as valueComparator } from './utils.js';
-import { u as useCollection } from '../Collection/Collection.js';
+import { c as createContext } from '../shared/createContext.js';
 import { u as useFocusGuards } from '../shared/useFocusGuards.js';
 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 { c as createContext } from '../shared/createContext.js';
 import { _ as _sfc_main$1 } from '../FocusScope/FocusScope.js';
 import { i as injectSelectRootContext } from './SelectRoot.js';
 

package/dist/Select/SelectContentImpl.js.map

@@ -1 +1 @@
-{"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 { PopperContentProps } from '@/Popper'\nimport type { PointerDownOutsideEvent } from '@/DismissableLayer'\nimport {\n  createContext,\n  useFocusGuards,\n  useForwardProps,\n  useHideOthers,\n  useTypeahead,\n} from '@/shared'\nimport { useBodyScrollLock } from '@/shared/useBodyScrollLock'\nimport type { AcceptableValue } from '@/shared/types'\nimport { valueComparator } from './utils'\nimport { useCollection } from '@/Collection'\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 {\n  computed,\n  ref,\n  watch,\n  watchEffect,\n} from 'vue'\nimport { unrefElement } from '@vueuse/core'\nimport { injectSelectRootContext } from './SelectRoot.vue'\nimport SelectItemAlignedPosition from './SelectItemAlignedPosition.vue'\nimport SelectPopperPosition from './SelectPopperPosition.vue'\nimport { FocusScope } from '@/FocusScope'\nimport { DismissableLayer } from '@/DismissableLayer'\nimport { focusFirst } from '@/Menu/utils'\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 { 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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"}

package/dist/Select/SelectItem.cjs

@@ -60,7 +60,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       if (disabled.value) {
         contentContext.onItemLeave?.();
       } else {
-        event.currentTarget.focus({ preventScroll: true });
+        event.currentTarget?.focus({ preventScroll: true });
       }
     }
     async function handlePointerLeave(event) {

package/dist/Select/SelectItem.cjs.map

@@ -1 +1 @@
-{"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 { createContext, getActiveElement, handleAndDispatchCustomEvent, useForwardExpose, useId } from '@/shared'\nimport type { AcceptableValue } from '@/shared/types'\nimport { useCollection } from '@/Collection'\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 { injectSelectRootContext } from './SelectRoot.vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { SELECTION_KEYS, valueComparator } from './utils'\nimport { Primitive } from '@/Primitive'\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).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 { 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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"}

package/dist/Select/SelectItem.js

@@ -58,7 +58,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (disabled.value) {
         contentContext.onItemLeave?.();
       } else {
-        event.currentTarget.focus({ preventScroll: true });
+        event.currentTarget?.focus({ preventScroll: true });
       }
     }
     async function handlePointerLeave(event) {

package/dist/Select/SelectItem.js.map

@@ -1 +1 @@
-{"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 { createContext, getActiveElement, handleAndDispatchCustomEvent, useForwardExpose, useId } from '@/shared'\nimport type { AcceptableValue } from '@/shared/types'\nimport { useCollection } from '@/Collection'\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 { injectSelectRootContext } from './SelectRoot.vue'\nimport { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { SELECTION_KEYS, valueComparator } from './utils'\nimport { Primitive } from '@/Primitive'\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).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 { 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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"}

package/dist/Select/SelectItemAlignedPosition.cjs

@@ -4,11 +4,11 @@ const vue = require('vue');
 const Select_utils = require('./utils.cjs');
 const Collection_Collection = require('../Collection/Collection.cjs');
 const core = require('@vueuse/core');
+const Select_SelectRoot = require('./SelectRoot.cjs');
 const Select_SelectContentImpl = require('./SelectContentImpl.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const shared_createContext = require('../shared/createContext.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
-const Select_SelectRoot = require('./SelectRoot.cjs');
 const shared_clamp = require('../shared/clamp.cjs');
 
 const [injectSelectItemAlignedPositionContext, provideSelectItemAlignedPositionContext] = shared_createContext.createContext("SelectItemAlignedPosition");