reka-ui/dist/Select/SelectViewport.cjs.map

Vue port for Radix UI Primitives.

{"version":3,"file":"SelectViewport.cjs","sources":["../../src/Select/SelectViewport.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useNonce } from '@/shared/useNonce'\n\nexport interface SelectViewportProps 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 { injectSelectContentContext } from './SelectContentImpl.vue'\nimport { CONTENT_MARGIN } from './utils'\nimport {\n  Primitive,\n} from '@/Primitive'\nimport { injectSelectItemAlignedPositionContext } from './SelectItemAlignedPosition.vue'\n\nconst props = defineProps<SelectViewportProps>()\nconst { nonce: propNonce } = toRefs(props)\nconst nonce = useNonce(propNonce)\n\nconst contentContext = injectSelectContentContext()\nconst alignedPositionContext\n  = contentContext.position === 'item-aligned'\n    ? injectSelectItemAlignedPositionContext()\n    : undefined\n\nconst { forwardRef, currentElement } = useForwardExpose()\n\nonMounted(() => {\n  contentContext?.onViewportChange(currentElement.value)\n})\n\nconst prevScrollTopRef = ref(0)\n\nfunction handleScroll(event: WheelEvent) {\n  const viewport = event.currentTarget as HTMLElement\n  const { shouldExpandOnScrollRef, contentWrapper } = alignedPositionContext ?? {}\n  if (shouldExpandOnScrollRef?.value && contentWrapper?.value) {\n    const scrolledBy = Math.abs(prevScrollTopRef.value - viewport.scrollTop)\n    if (scrolledBy > 0) {\n      const availableHeight = window.innerHeight - CONTENT_MARGIN * 2\n      const cssMinHeight = Number.parseFloat(\n        contentWrapper.value.style.minHeight,\n      )\n      const cssHeight = Number.parseFloat(contentWrapper.value.style.height)\n      const prevHeight = Math.max(cssMinHeight, cssHeight)\n\n      if (prevHeight < availableHeight) {\n        const nextHeight = prevHeight + scrolledBy\n        const clampedNextHeight = Math.min(availableHeight, nextHeight)\n        const heightDiff = nextHeight - clampedNextHeight\n\n        contentWrapper.value.style.height = `${clampedNextHeight}px`\n        if (contentWrapper.value.style.bottom === '0px') {\n          viewport.scrollTop = heightDiff > 0 ? heightDiff : 0\n          // ensure the content stays pinned to the bottom\n          contentWrapper.value.style.justifyContent = 'flex-end'\n        }\n      }\n    }\n  }\n  prevScrollTopRef.value = viewport.scrollTop\n}\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    data-reka-select-viewport\n    role=\"presentation\"\n    v-bind=\"{ ...$attrs, ...props }\"\n    :style=\"{\n      // we use position: 'relative' here on the `viewport` so that when we call\n      // `selectedItem.offsetTop` in calculations, the offset is relative to the viewport\n      // (independent of the scrollUpButton).\n      position: 'relative',\n      flex: 1,\n      overflow: 'hidden auto',\n    }\"\n    @scroll=\"handleScroll\"\n  >\n    <slot />\n  </Primitive>\n  <Primitive\n    as=\"style\"\n    :nonce=\"nonce\"\n  >\n    /* Hide scrollbars cross-browser and enable momentum scroll for touch\n    devices */ [data-reka-select-viewport] { scrollbar-width:none; -ms-overflow-style: none;\n    -webkit-overflow-scrolling: touch; }\n    [data-reka-select-viewport]::-webkit-scrollbar { display: none; }\n  </Primitive>\n</template>\n"],"names":["toRefs","useNonce","injectSelectContentContext","injectSelectItemAlignedPositionContext","useForwardExpose","onMounted","ref","CONTENT_MARGIN"],"mappings":";;;;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,EAAE,KAAA,EAAO,SAAU,EAAA,GAAIA,WAAO,KAAK,CAAA;AACzC,IAAM,MAAA,KAAA,GAAQC,yBAAS,SAAS,CAAA;AAEhC,IAAA,MAAM,iBAAiBC,mDAA2B,EAAA;AAClD,IAAA,MAAM,sBACF,GAAA,cAAA,CAAe,QAAa,KAAA,cAAA,GAC1BC,yEACA,GAAA,MAAA;AAEN,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAIC,wCAAiB,EAAA;AAExD,IAAAC,aAAA,CAAU,MAAM;AACd,MAAgB,cAAA,EAAA,gBAAA,CAAiB,eAAe,KAAK,CAAA;AAAA,KACtD,CAAA;AAED,IAAM,MAAA,gBAAA,GAAmBC,QAAI,CAAC,CAAA;AAE9B,IAAA,SAAS,aAAa,KAAmB,EAAA;AACvC,MAAA,MAAM,WAAW,KAAM,CAAA,aAAA;AACvB,MAAA,MAAM,EAAE,uBAAA,EAAyB,cAAe,EAAA,GAAI,0BAA0B,EAAC;AAC/E,MAAI,IAAA,uBAAA,EAAyB,KAAS,IAAA,cAAA,EAAgB,KAAO,EAAA;AAC3D,QAAA,MAAM,aAAa,IAAK,CAAA,GAAA,CAAI,gBAAiB,CAAA,KAAA,GAAQ,SAAS,SAAS,CAAA;AACvE,QAAA,IAAI,aAAa,CAAG,EAAA;AAClB,UAAM,MAAA,eAAA,GAAkB,MAAO,CAAA,WAAA,GAAcC,2BAAiB,GAAA,CAAA;AAC9D,UAAA,MAAM,eAAe,MAAO,CAAA,UAAA;AAAA,YAC1B,cAAA,CAAe,MAAM,KAAM,CAAA;AAAA,WAC7B;AACA,UAAA,MAAM,YAAY,MAAO,CAAA,UAAA,CAAW,cAAe,CAAA,KAAA,CAAM,MAAM,MAAM,CAAA;AACrE,UAAA,MAAM,UAAa,GAAA,IAAA,CAAK,GAAI,CAAA,YAAA,EAAc,SAAS,CAAA;AAEnD,UAAA,IAAI,aAAa,eAAiB,EAAA;AAChC,YAAA,MAAM,aAAa,UAAa,GAAA,UAAA;AAChC,YAAA,MAAM,iBAAoB,GAAA,IAAA,CAAK,GAAI,CAAA,eAAA,EAAiB,UAAU,CAAA;AAC9D,YAAA,MAAM,aAAa,UAAa,GAAA,iBAAA;AAEhC,YAAA,cAAA,CAAe,KAAM,CAAA,KAAA,CAAM,MAAS,GAAA,CAAA,EAAG,iBAAiB,CAAA,EAAA,CAAA;AACxD,YAAA,IAAI,cAAe,CAAA,KAAA,CAAM,KAAM,CAAA,MAAA,KAAW,KAAO,EAAA;AAC/C,cAAS,QAAA,CAAA,SAAA,GAAY,UAAa,GAAA,CAAA,GAAI,UAAa,GAAA,CAAA;AAEnD,cAAe,cAAA,CAAA,KAAA,CAAM,MAAM,cAAiB,GAAA,UAAA;AAAA;AAC9C;AACF;AACF;AAEF,MAAA,gBAAA,CAAiB,QAAQ,QAAS,CAAA,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}