reka-ui 2.1.1 → 2.2.1

package/dist/ScrollArea/ScrollAreaScrollbarImpl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaScrollbarImpl.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarImpl.vue"],"sourcesContent":["<script lang=\"ts\">\ntype ScrollbarAreaScrollbarImplEmits = {\n  onDragScroll: [payload: { x: number, y: number }]\n  onWheelScroll: [payload: { x: number, y: number }]\n  onThumbPointerDown: [payload: { x: number, y: number }]\n}\n\nexport interface ScrollAreaScrollbarImplProps {\n  isHorizontal: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport { toInt } from './utils'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = defineProps<ScrollAreaScrollbarImplProps>()\nconst emit = defineEmits<ScrollbarAreaScrollbarImplEmits>()\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\n\nconst { forwardRef, currentElement: scrollbar } = useForwardExpose()\nconst prevWebkitUserSelectRef = ref('')\nconst rectRef = ref<DOMRect>()\n\nfunction handleDragScroll(event: MouseEvent) {\n  if (rectRef.value) {\n    const x = event.clientX - rectRef.value?.left\n    const y = event.clientY - rectRef.value?.top\n    emit('onDragScroll', { x, y })\n  }\n}\n\nfunction handlePointerDown(event: PointerEvent) {\n  const mainPointer = 0\n  if (event.button === mainPointer) {\n    const element = event.target as HTMLElement\n    element.setPointerCapture(event.pointerId)\n    rectRef.value = scrollbar.value!.getBoundingClientRect()\n\n    // pointer capture doesn't prevent text selection in Safari\n    // so we remove text selection manually when scrolling\n    prevWebkitUserSelectRef.value = document.body.style.webkitUserSelect\n    document.body.style.webkitUserSelect = 'none'\n    if (rootContext.viewport)\n      rootContext.viewport.value!.style.scrollBehavior = 'auto'\n\n    handleDragScroll(event)\n  }\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n  handleDragScroll(event)\n}\n\nfunction handlePointerUp(event: PointerEvent) {\n  const element = event.target as HTMLElement\n  if (element.hasPointerCapture(event.pointerId))\n    element.releasePointerCapture(event.pointerId)\n\n  document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value\n  if (rootContext.viewport)\n    rootContext.viewport.value!.style.scrollBehavior = ''\n\n  rectRef.value = undefined\n}\n\nfunction handleWheel(event: WheelEvent) {\n  const element = event.target as HTMLElement\n  const isScrollbarWheel = scrollbar.value?.contains(element)\n  const maxScrollPos\n    = scrollbarVisibleContext.sizes.value.content\n    - scrollbarVisibleContext.sizes.value.viewport\n  if (isScrollbarWheel)\n    scrollbarVisibleContext.handleWheelScroll(event, maxScrollPos)\n}\n\nonMounted(() => {\n  document.addEventListener('wheel', handleWheel, { passive: false })\n})\nonUnmounted(() => {\n  document.removeEventListener('wheel', handleWheel)\n})\n\nfunction handleSizeChange() {\n  if (!scrollbar.value)\n    return\n  if (props.isHorizontal) {\n    scrollbarVisibleContext.handleSizeChange({\n      content: rootContext.viewport.value?.scrollWidth ?? 0,\n      viewport: rootContext.viewport.value?.offsetWidth ?? 0,\n      scrollbar: {\n        size: scrollbar.value.clientWidth ?? 0,\n        paddingStart: toInt(getComputedStyle(scrollbar.value).paddingLeft),\n        paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingRight),\n      },\n    })\n  }\n  else {\n    scrollbarVisibleContext.handleSizeChange({\n      content: rootContext.viewport.value?.scrollHeight ?? 0,\n      viewport: rootContext.viewport.value?.offsetHeight ?? 0,\n      scrollbar: {\n        size: scrollbar.value?.clientHeight ?? 0,\n        paddingStart: toInt(getComputedStyle(scrollbar.value!).paddingLeft),\n        paddingEnd: toInt(getComputedStyle(scrollbar.value!).paddingRight),\n      },\n    })\n  }\n}\n\nuseResizeObserver(scrollbar, handleSizeChange)\nuseResizeObserver(rootContext.content, handleSizeChange)\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    style=\"position: absolute\"\n    data-scrollbarimpl\n    :as=\"scrollbarContext.as.value\"\n    :as-child=\"scrollbarContext.asChild.value\"\n    @pointerdown=\"handlePointerDown\"\n    @pointermove=\"handlePointerMove\"\n    @pointerup=\"handlePointerUp\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarVisibleContext","injectScrollAreaScrollbarContext","useForwardExpose","ref","onMounted","onUnmounted","toInt","useResizeObserver"],"mappings":"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"}
+{"version":3,"file":"ScrollAreaScrollbarImpl.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarImpl.vue"],"sourcesContent":["<script lang=\"ts\">\ntype ScrollbarAreaScrollbarImplEmits = {\n  onDragScroll: [payload: { x: number, y: number }]\n  onWheelScroll: [payload: { x: number, y: number }]\n  onThumbPointerDown: [payload: { x: number, y: number }]\n}\n\nexport interface ScrollAreaScrollbarImplProps {\n  isHorizontal: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useResizeObserver } from '@vueuse/core'\nimport { onMounted, onUnmounted, ref } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { toInt } from './utils'\n\nconst props = defineProps<ScrollAreaScrollbarImplProps>()\nconst emit = defineEmits<ScrollbarAreaScrollbarImplEmits>()\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\n\nconst { forwardRef, currentElement: scrollbar } = useForwardExpose()\nconst prevWebkitUserSelectRef = ref('')\nconst rectRef = ref<DOMRect>()\n\nfunction handleDragScroll(event: MouseEvent) {\n  if (rectRef.value) {\n    const x = event.clientX - rectRef.value?.left\n    const y = event.clientY - rectRef.value?.top\n    emit('onDragScroll', { x, y })\n  }\n}\n\nfunction handlePointerDown(event: PointerEvent) {\n  const mainPointer = 0\n  if (event.button === mainPointer) {\n    const element = event.target as HTMLElement\n    element.setPointerCapture(event.pointerId)\n    rectRef.value = scrollbar.value!.getBoundingClientRect()\n\n    // pointer capture doesn't prevent text selection in Safari\n    // so we remove text selection manually when scrolling\n    prevWebkitUserSelectRef.value = document.body.style.webkitUserSelect\n    document.body.style.webkitUserSelect = 'none'\n    if (rootContext.viewport)\n      rootContext.viewport.value!.style.scrollBehavior = 'auto'\n\n    handleDragScroll(event)\n  }\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n  handleDragScroll(event)\n}\n\nfunction handlePointerUp(event: PointerEvent) {\n  const element = event.target as HTMLElement\n  if (element.hasPointerCapture(event.pointerId))\n    element.releasePointerCapture(event.pointerId)\n\n  document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value\n  if (rootContext.viewport)\n    rootContext.viewport.value!.style.scrollBehavior = ''\n\n  rectRef.value = undefined\n}\n\nfunction handleWheel(event: WheelEvent) {\n  const element = event.target as HTMLElement\n  const isScrollbarWheel = scrollbar.value?.contains(element)\n  const maxScrollPos\n    = scrollbarVisibleContext.sizes.value.content\n      - scrollbarVisibleContext.sizes.value.viewport\n  if (isScrollbarWheel)\n    scrollbarVisibleContext.handleWheelScroll(event, maxScrollPos)\n}\n\nonMounted(() => {\n  document.addEventListener('wheel', handleWheel, { passive: false })\n})\nonUnmounted(() => {\n  document.removeEventListener('wheel', handleWheel)\n})\n\nfunction handleSizeChange() {\n  if (!scrollbar.value)\n    return\n  if (props.isHorizontal) {\n    scrollbarVisibleContext.handleSizeChange({\n      content: rootContext.viewport.value?.scrollWidth ?? 0,\n      viewport: rootContext.viewport.value?.offsetWidth ?? 0,\n      scrollbar: {\n        size: scrollbar.value.clientWidth ?? 0,\n        paddingStart: toInt(getComputedStyle(scrollbar.value).paddingLeft),\n        paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingRight),\n      },\n    })\n  }\n  else {\n    scrollbarVisibleContext.handleSizeChange({\n      content: rootContext.viewport.value?.scrollHeight ?? 0,\n      viewport: rootContext.viewport.value?.offsetHeight ?? 0,\n      scrollbar: {\n        size: scrollbar.value?.clientHeight ?? 0,\n        paddingStart: toInt(getComputedStyle(scrollbar.value!).paddingLeft),\n        paddingEnd: toInt(getComputedStyle(scrollbar.value!).paddingRight),\n      },\n    })\n  }\n}\n\nuseResizeObserver(scrollbar, handleSizeChange)\nuseResizeObserver(rootContext.content, handleSizeChange)\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    style=\"position: absolute\"\n    data-scrollbarimpl\n    :as=\"scrollbarContext.as.value\"\n    :as-child=\"scrollbarContext.asChild.value\"\n    @pointerdown=\"handlePointerDown\"\n    @pointermove=\"handlePointerMove\"\n    @pointerup=\"handlePointerUp\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarVisibleContext","injectScrollAreaScrollbarContext","useForwardExpose","ref","onMounted","onUnmounted","toInt","useResizeObserver"],"mappings":"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"}

package/dist/ScrollArea/ScrollAreaScrollbarImpl.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, onUnmounted, openBlock, createBlock, unref, withCtx, renderSlot } from 'vue';
+import { defineComponent, ref, onMounted, onUnmounted, createBlock, openBlock, unref, withCtx, renderSlot } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
 import { t as toInt } from './utils.js';
 import { i as injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.js';
@@ -52,7 +52,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value;
       if (rootContext.viewport)
         rootContext.viewport.value.style.scrollBehavior = "";
-      rectRef.value = undefined;
+      rectRef.value = void 0;
     }
     function handleWheel(event) {
       const element = event.target;

package/dist/ScrollArea/ScrollAreaScrollbarImpl.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaScrollbarImpl.js","sources":["../../src/ScrollArea/ScrollAreaScrollbarImpl.vue"],"sourcesContent":["<script lang=\"ts\">\ntype ScrollbarAreaScrollbarImplEmits = {\n  onDragScroll: [payload: { x: number, y: number }]\n  onWheelScroll: [payload: { x: number, y: number }]\n  onThumbPointerDown: [payload: { x: number, y: number }]\n}\n\nexport interface ScrollAreaScrollbarImplProps {\n  isHorizontal: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted, ref } from 'vue'\nimport { useResizeObserver } from '@vueuse/core'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport { toInt } from './utils'\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nconst props = defineProps<ScrollAreaScrollbarImplProps>()\nconst emit = defineEmits<ScrollbarAreaScrollbarImplEmits>()\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\n\nconst { forwardRef, currentElement: scrollbar } = useForwardExpose()\nconst prevWebkitUserSelectRef = ref('')\nconst rectRef = ref<DOMRect>()\n\nfunction handleDragScroll(event: MouseEvent) {\n  if (rectRef.value) {\n    const x = event.clientX - rectRef.value?.left\n    const y = event.clientY - rectRef.value?.top\n    emit('onDragScroll', { x, y })\n  }\n}\n\nfunction handlePointerDown(event: PointerEvent) {\n  const mainPointer = 0\n  if (event.button === mainPointer) {\n    const element = event.target as HTMLElement\n    element.setPointerCapture(event.pointerId)\n    rectRef.value = scrollbar.value!.getBoundingClientRect()\n\n    // pointer capture doesn't prevent text selection in Safari\n    // so we remove text selection manually when scrolling\n    prevWebkitUserSelectRef.value = document.body.style.webkitUserSelect\n    document.body.style.webkitUserSelect = 'none'\n    if (rootContext.viewport)\n      rootContext.viewport.value!.style.scrollBehavior = 'auto'\n\n    handleDragScroll(event)\n  }\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n  handleDragScroll(event)\n}\n\nfunction handlePointerUp(event: PointerEvent) {\n  const element = event.target as HTMLElement\n  if (element.hasPointerCapture(event.pointerId))\n    element.releasePointerCapture(event.pointerId)\n\n  document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value\n  if (rootContext.viewport)\n    rootContext.viewport.value!.style.scrollBehavior = ''\n\n  rectRef.value = undefined\n}\n\nfunction handleWheel(event: WheelEvent) {\n  const element = event.target as HTMLElement\n  const isScrollbarWheel = scrollbar.value?.contains(element)\n  const maxScrollPos\n    = scrollbarVisibleContext.sizes.value.content\n    - scrollbarVisibleContext.sizes.value.viewport\n  if (isScrollbarWheel)\n    scrollbarVisibleContext.handleWheelScroll(event, maxScrollPos)\n}\n\nonMounted(() => {\n  document.addEventListener('wheel', handleWheel, { passive: false })\n})\nonUnmounted(() => {\n  document.removeEventListener('wheel', handleWheel)\n})\n\nfunction handleSizeChange() {\n  if (!scrollbar.value)\n    return\n  if (props.isHorizontal) {\n    scrollbarVisibleContext.handleSizeChange({\n      content: rootContext.viewport.value?.scrollWidth ?? 0,\n      viewport: rootContext.viewport.value?.offsetWidth ?? 0,\n      scrollbar: {\n        size: scrollbar.value.clientWidth ?? 0,\n        paddingStart: toInt(getComputedStyle(scrollbar.value).paddingLeft),\n        paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingRight),\n      },\n    })\n  }\n  else {\n    scrollbarVisibleContext.handleSizeChange({\n      content: rootContext.viewport.value?.scrollHeight ?? 0,\n      viewport: rootContext.viewport.value?.offsetHeight ?? 0,\n      scrollbar: {\n        size: scrollbar.value?.clientHeight ?? 0,\n        paddingStart: toInt(getComputedStyle(scrollbar.value!).paddingLeft),\n        paddingEnd: toInt(getComputedStyle(scrollbar.value!).paddingRight),\n      },\n    })\n  }\n}\n\nuseResizeObserver(scrollbar, handleSizeChange)\nuseResizeObserver(rootContext.content, handleSizeChange)\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    style=\"position: absolute\"\n    data-scrollbarimpl\n    :as=\"scrollbarContext.as.value\"\n    :as-child=\"scrollbarContext.asChild.value\"\n    @pointerdown=\"handlePointerDown\"\n    @pointermove=\"handlePointerMove\"\n    @pointerup=\"handlePointerUp\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAsBA,IAAA,MAAM,KAAQ,GAAA,OAAA;AACd,IAAA,MAAM,IAAO,GAAA,MAAA;AACb,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0B,uCAAwC,EAAA;AACxE,IAAA,MAAM,mBAAmB,gCAAiC,EAAA;AAE1D,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,SAAA,KAAc,gBAAiB,EAAA;AACnE,IAAM,MAAA,uBAAA,GAA0B,IAAI,EAAE,CAAA;AACtC,IAAA,MAAM,UAAU,GAAa,EAAA;AAE7B,IAAA,SAAS,iBAAiB,KAAmB,EAAA;AAC3C,MAAA,IAAI,QAAQ,KAAO,EAAA;AACjB,QAAA,MAAM,CAAI,GAAA,KAAA,CAAM,OAAU,GAAA,OAAA,CAAQ,KAAO,EAAA,IAAA;AACzC,QAAA,MAAM,CAAI,GAAA,KAAA,CAAM,OAAU,GAAA,OAAA,CAAQ,KAAO,EAAA,GAAA;AACzC,QAAA,IAAA,CAAK,cAAgB,EAAA,EAAE,CAAG,EAAA,CAAA,EAAG,CAAA;AAAA;AAC/B;AAGF,IAAA,SAAS,kBAAkB,KAAqB,EAAA;AAC9C,MAAA,MAAM,WAAc,GAAA,CAAA;AACpB,MAAI,IAAA,KAAA,CAAM,WAAW,WAAa,EAAA;AAChC,QAAA,MAAM,UAAU,KAAM,CAAA,MAAA;AACtB,QAAQ,OAAA,CAAA,iBAAA,CAAkB,MAAM,SAAS,CAAA;AACzC,QAAQ,OAAA,CAAA,KAAA,GAAQ,SAAU,CAAA,KAAA,CAAO,qBAAsB,EAAA;AAIvD,QAAwB,uBAAA,CAAA,KAAA,GAAQ,QAAS,CAAA,IAAA,CAAK,KAAM,CAAA,gBAAA;AACpD,QAAS,QAAA,CAAA,IAAA,CAAK,MAAM,gBAAmB,GAAA,MAAA;AACvC,QAAA,IAAI,WAAY,CAAA,QAAA;AACd,UAAY,WAAA,CAAA,QAAA,CAAS,KAAO,CAAA,KAAA,CAAM,cAAiB,GAAA,MAAA;AAErD,QAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA;AACxB;AAGF,IAAA,SAAS,kBAAkB,KAAqB,EAAA;AAC9C,MAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA;AAGxB,IAAA,SAAS,gBAAgB,KAAqB,EAAA;AAC5C,MAAA,MAAM,UAAU,KAAM,CAAA,MAAA;AACtB,MAAI,IAAA,OAAA,CAAQ,iBAAkB,CAAA,KAAA,CAAM,SAAS,CAAA;AAC3C,QAAQ,OAAA,CAAA,qBAAA,CAAsB,MAAM,SAAS,CAAA;AAE/C,MAAS,QAAA,CAAA,IAAA,CAAK,KAAM,CAAA,gBAAA,GAAmB,uBAAwB,CAAA,KAAA;AAC/D,MAAA,IAAI,WAAY,CAAA,QAAA;AACd,QAAY,WAAA,CAAA,QAAA,CAAS,KAAO,CAAA,KAAA,CAAM,cAAiB,GAAA,EAAA;AAErD,MAAA,OAAA,CAAQ,KAAQ,GAAA,SAAA;AAAA;AAGlB,IAAA,SAAS,YAAY,KAAmB,EAAA;AACtC,MAAA,MAAM,UAAU,KAAM,CAAA,MAAA;AACtB,MAAA,MAAM,gBAAmB,GAAA,SAAA,CAAU,KAAO,EAAA,QAAA,CAAS,OAAO,CAAA;AAC1D,MAAA,MAAM,eACF,uBAAwB,CAAA,KAAA,CAAM,MAAM,OACpC,GAAA,uBAAA,CAAwB,MAAM,KAAM,CAAA,QAAA;AACxC,MAAI,IAAA,gBAAA;AACF,QAAwB,uBAAA,CAAA,iBAAA,CAAkB,OAAO,YAAY,CAAA;AAAA;AAGjE,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,QAAA,CAAS,iBAAiB,OAAS,EAAA,WAAA,EAAa,EAAE,OAAA,EAAS,OAAO,CAAA;AAAA,KACnE,CAAA;AACD,IAAA,WAAA,CAAY,MAAM;AAChB,MAAS,QAAA,CAAA,mBAAA,CAAoB,SAAS,WAAW,CAAA;AAAA,KAClD,CAAA;AAED,IAAA,SAAS,gBAAmB,GAAA;AAC1B,MAAA,IAAI,CAAC,SAAU,CAAA,KAAA;AACb,QAAA;AACF,MAAA,IAAI,MAAM,YAAc,EAAA;AACtB,QAAA,uBAAA,CAAwB,gBAAiB,CAAA;AAAA,UACvC,OAAS,EAAA,WAAA,CAAY,QAAS,CAAA,KAAA,EAAO,WAAe,IAAA,CAAA;AAAA,UACpD,QAAU,EAAA,WAAA,CAAY,QAAS,CAAA,KAAA,EAAO,WAAe,IAAA,CAAA;AAAA,UACrD,SAAW,EAAA;AAAA,YACT,IAAA,EAAM,SAAU,CAAA,KAAA,CAAM,WAAe,IAAA,CAAA;AAAA,YACrC,cAAc,KAAM,CAAA,gBAAA,CAAiB,SAAU,CAAA,KAAK,EAAE,WAAW,CAAA;AAAA,YACjE,YAAY,KAAM,CAAA,gBAAA,CAAiB,SAAU,CAAA,KAAK,EAAE,YAAY;AAAA;AAClE,SACD,CAAA;AAAA,OAEE,MAAA;AACH,QAAA,uBAAA,CAAwB,gBAAiB,CAAA;AAAA,UACvC,OAAS,EAAA,WAAA,CAAY,QAAS,CAAA,KAAA,EAAO,YAAgB,IAAA,CAAA;AAAA,UACrD,QAAU,EAAA,WAAA,CAAY,QAAS,CAAA,KAAA,EAAO,YAAgB,IAAA,CAAA;AAAA,UACtD,SAAW,EAAA;AAAA,YACT,IAAA,EAAM,SAAU,CAAA,KAAA,EAAO,YAAgB,IAAA,CAAA;AAAA,YACvC,cAAc,KAAM,CAAA,gBAAA,CAAiB,SAAU,CAAA,KAAM,EAAE,WAAW,CAAA;AAAA,YAClE,YAAY,KAAM,CAAA,gBAAA,CAAiB,SAAU,CAAA,KAAM,EAAE,YAAY;AAAA;AACnE,SACD,CAAA;AAAA;AACH;AAGF,IAAA,iBAAA,CAAkB,WAAW,gBAAgB,CAAA;AAC7C,IAAkB,iBAAA,CAAA,WAAA,CAAY,SAAS,gBAAgB,CAAA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ScrollAreaScrollbarImpl.js","sources":["../../src/ScrollArea/ScrollAreaScrollbarImpl.vue"],"sourcesContent":["<script lang=\"ts\">\ntype ScrollbarAreaScrollbarImplEmits = {\n  onDragScroll: [payload: { x: number, y: number }]\n  onWheelScroll: [payload: { x: number, y: number }]\n  onThumbPointerDown: [payload: { x: number, y: number }]\n}\n\nexport interface ScrollAreaScrollbarImplProps {\n  isHorizontal: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\nimport { useResizeObserver } from '@vueuse/core'\nimport { onMounted, onUnmounted, ref } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { toInt } from './utils'\n\nconst props = defineProps<ScrollAreaScrollbarImplProps>()\nconst emit = defineEmits<ScrollbarAreaScrollbarImplEmits>()\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\n\nconst { forwardRef, currentElement: scrollbar } = useForwardExpose()\nconst prevWebkitUserSelectRef = ref('')\nconst rectRef = ref<DOMRect>()\n\nfunction handleDragScroll(event: MouseEvent) {\n  if (rectRef.value) {\n    const x = event.clientX - rectRef.value?.left\n    const y = event.clientY - rectRef.value?.top\n    emit('onDragScroll', { x, y })\n  }\n}\n\nfunction handlePointerDown(event: PointerEvent) {\n  const mainPointer = 0\n  if (event.button === mainPointer) {\n    const element = event.target as HTMLElement\n    element.setPointerCapture(event.pointerId)\n    rectRef.value = scrollbar.value!.getBoundingClientRect()\n\n    // pointer capture doesn't prevent text selection in Safari\n    // so we remove text selection manually when scrolling\n    prevWebkitUserSelectRef.value = document.body.style.webkitUserSelect\n    document.body.style.webkitUserSelect = 'none'\n    if (rootContext.viewport)\n      rootContext.viewport.value!.style.scrollBehavior = 'auto'\n\n    handleDragScroll(event)\n  }\n}\n\nfunction handlePointerMove(event: PointerEvent) {\n  handleDragScroll(event)\n}\n\nfunction handlePointerUp(event: PointerEvent) {\n  const element = event.target as HTMLElement\n  if (element.hasPointerCapture(event.pointerId))\n    element.releasePointerCapture(event.pointerId)\n\n  document.body.style.webkitUserSelect = prevWebkitUserSelectRef.value\n  if (rootContext.viewport)\n    rootContext.viewport.value!.style.scrollBehavior = ''\n\n  rectRef.value = undefined\n}\n\nfunction handleWheel(event: WheelEvent) {\n  const element = event.target as HTMLElement\n  const isScrollbarWheel = scrollbar.value?.contains(element)\n  const maxScrollPos\n    = scrollbarVisibleContext.sizes.value.content\n      - scrollbarVisibleContext.sizes.value.viewport\n  if (isScrollbarWheel)\n    scrollbarVisibleContext.handleWheelScroll(event, maxScrollPos)\n}\n\nonMounted(() => {\n  document.addEventListener('wheel', handleWheel, { passive: false })\n})\nonUnmounted(() => {\n  document.removeEventListener('wheel', handleWheel)\n})\n\nfunction handleSizeChange() {\n  if (!scrollbar.value)\n    return\n  if (props.isHorizontal) {\n    scrollbarVisibleContext.handleSizeChange({\n      content: rootContext.viewport.value?.scrollWidth ?? 0,\n      viewport: rootContext.viewport.value?.offsetWidth ?? 0,\n      scrollbar: {\n        size: scrollbar.value.clientWidth ?? 0,\n        paddingStart: toInt(getComputedStyle(scrollbar.value).paddingLeft),\n        paddingEnd: toInt(getComputedStyle(scrollbar.value).paddingRight),\n      },\n    })\n  }\n  else {\n    scrollbarVisibleContext.handleSizeChange({\n      content: rootContext.viewport.value?.scrollHeight ?? 0,\n      viewport: rootContext.viewport.value?.offsetHeight ?? 0,\n      scrollbar: {\n        size: scrollbar.value?.clientHeight ?? 0,\n        paddingStart: toInt(getComputedStyle(scrollbar.value!).paddingLeft),\n        paddingEnd: toInt(getComputedStyle(scrollbar.value!).paddingRight),\n      },\n    })\n  }\n}\n\nuseResizeObserver(scrollbar, handleSizeChange)\nuseResizeObserver(rootContext.content, handleSizeChange)\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    style=\"position: absolute\"\n    data-scrollbarimpl\n    :as=\"scrollbarContext.as.value\"\n    :as-child=\"scrollbarContext.asChild.value\"\n    @pointerdown=\"handlePointerDown\"\n    @pointermove=\"handlePointerMove\"\n    @pointerup=\"handlePointerUp\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/ScrollArea/ScrollAreaScrollbarScroll.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaScrollbarScroll.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarScroll.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ScrollAreaScrollbarScrollProps {\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { watchEffect } from 'vue'\nimport { useDebounceFn } from '@vueuse/core'\nimport { useStateMachine } from '../shared/useStateMachine'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'\nimport { Presence } from '@/Presence'\nimport { useForwardExpose } from '@/shared'\n\ndefineProps<ScrollAreaScrollbarScrollProps>()\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\n\nconst { forwardRef } = useForwardExpose()\n\nconst { state, dispatch } = useStateMachine('hidden', {\n  hidden: {\n    SCROLL: 'scrolling',\n  },\n  scrolling: {\n    SCROLL_END: 'idle',\n    POINTER_ENTER: 'interacting',\n  },\n  interacting: {\n    SCROLL: 'interacting',\n    POINTER_LEAVE: 'idle',\n  },\n  idle: {\n    HIDE: 'hidden',\n    SCROLL: 'scrolling',\n    POINTER_ENTER: 'interacting',\n  },\n})\n\nwatchEffect((onCleanup) => {\n  if (state.value === 'idle') {\n    const timeId = window.setTimeout(\n      () => dispatch('HIDE'),\n      rootContext.scrollHideDelay.value,\n    )\n\n    onCleanup(() => {\n      window.clearTimeout(timeId)\n    })\n  }\n})\n\nconst debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)\n\nwatchEffect((onCleanup) => {\n  const viewport = rootContext.viewport.value\n  const scrollDirection = scrollbarContext.isHorizontal.value\n    ? 'scrollLeft'\n    : 'scrollTop'\n\n  if (viewport) {\n    let prevScrollPos = viewport[scrollDirection]\n    const handleScroll = () => {\n      const scrollPos = viewport[scrollDirection]\n      const hasScrollInDirectionChanged = prevScrollPos !== scrollPos\n      if (hasScrollInDirectionChanged) {\n        dispatch('SCROLL')\n        debounceScrollEnd()\n      }\n      prevScrollPos = scrollPos\n    }\n    viewport.addEventListener('scroll', handleScroll)\n\n    onCleanup(() => {\n      viewport.removeEventListener('scroll', handleScroll)\n    })\n  }\n})\n</script>\n\n<template>\n  <Presence :present=\"forceMount || state !== 'hidden'\">\n    <ScrollAreaScrollbarVisible\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n    >\n      <slot />\n    </ScrollAreaScrollbarVisible>\n  </Presence>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarContext","useForwardExpose","useStateMachine","watchEffect","useDebounceFn"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,cAAcA,qDAA4B,EAAA;AAChD,IAAA,MAAM,mBAAmBC,+DAAiC,EAAA;AAE1D,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAA,EAAO,QAAS,EAAA,GAAIC,uCAAgB,QAAU,EAAA;AAAA,MACpD,MAAQ,EAAA;AAAA,QACN,MAAQ,EAAA;AAAA,OACV;AAAA,MACA,SAAW,EAAA;AAAA,QACT,UAAY,EAAA,MAAA;AAAA,QACZ,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,WAAa,EAAA;AAAA,QACX,MAAQ,EAAA,aAAA;AAAA,QACR,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,IAAM,EAAA,QAAA;AAAA,QACN,MAAQ,EAAA,WAAA;AAAA,QACR,aAAe,EAAA;AAAA;AACjB,KACD,CAAA;AAED,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAI,IAAA,KAAA,CAAM,UAAU,MAAQ,EAAA;AAC1B,QAAA,MAAM,SAAS,MAAO,CAAA,UAAA;AAAA,UACpB,MAAM,SAAS,MAAM,CAAA;AAAA,UACrB,YAAY,eAAgB,CAAA;AAAA,SAC9B;AAEA,QAAA,SAAA,CAAU,MAAM;AACd,UAAA,MAAA,CAAO,aAAa,MAAM,CAAA;AAAA,SAC3B,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,MAAM,oBAAoBC,kBAAc,CAAA,MAAM,QAAS,CAAA,YAAY,GAAG,GAAG,CAAA;AAEzE,IAAAD,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAM,MAAA,QAAA,GAAW,YAAY,QAAS,CAAA,KAAA;AACtC,MAAA,MAAM,eAAkB,GAAA,gBAAA,CAAiB,YAAa,CAAA,KAAA,GAClD,YACA,GAAA,WAAA;AAEJ,MAAA,IAAI,QAAU,EAAA;AACZ,QAAI,IAAA,aAAA,GAAgB,SAAS,eAAe,CAAA;AAC5C,QAAA,MAAM,eAAe,MAAM;AACzB,UAAM,MAAA,SAAA,GAAY,SAAS,eAAe,CAAA;AAC1C,UAAA,MAAM,8BAA8B,aAAkB,KAAA,SAAA;AACtD,UAAA,IAAI,2BAA6B,EAAA;AAC/B,YAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,YAAkB,iBAAA,EAAA;AAAA;AAEpB,UAAgB,aAAA,GAAA,SAAA;AAAA,SAClB;AACA,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM;AACd,UAAS,QAAA,CAAA,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,SACpD,CAAA;AAAA;AACH,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ScrollAreaScrollbarScroll.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarScroll.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ScrollAreaScrollbarScrollProps {\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport { useForwardExpose } from '@/shared'\nimport { useDebounceFn } from '@vueuse/core'\nimport { watchEffect } from 'vue'\nimport { useStateMachine } from '../shared/useStateMachine'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'\n\ndefineProps<ScrollAreaScrollbarScrollProps>()\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\n\nconst { forwardRef } = useForwardExpose()\n\nconst { state, dispatch } = useStateMachine('hidden', {\n  hidden: {\n    SCROLL: 'scrolling',\n  },\n  scrolling: {\n    SCROLL_END: 'idle',\n    POINTER_ENTER: 'interacting',\n  },\n  interacting: {\n    SCROLL: 'interacting',\n    POINTER_LEAVE: 'idle',\n  },\n  idle: {\n    HIDE: 'hidden',\n    SCROLL: 'scrolling',\n    POINTER_ENTER: 'interacting',\n  },\n})\n\nwatchEffect((onCleanup) => {\n  if (state.value === 'idle') {\n    const timeId = window.setTimeout(\n      () => dispatch('HIDE'),\n      rootContext.scrollHideDelay.value,\n    )\n\n    onCleanup(() => {\n      window.clearTimeout(timeId)\n    })\n  }\n})\n\nconst debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)\n\nwatchEffect((onCleanup) => {\n  const viewport = rootContext.viewport.value\n  const scrollDirection = scrollbarContext.isHorizontal.value\n    ? 'scrollLeft'\n    : 'scrollTop'\n\n  if (viewport) {\n    let prevScrollPos = viewport[scrollDirection]\n    const handleScroll = () => {\n      const scrollPos = viewport[scrollDirection]\n      const hasScrollInDirectionChanged = prevScrollPos !== scrollPos\n      if (hasScrollInDirectionChanged) {\n        dispatch('SCROLL')\n        debounceScrollEnd()\n      }\n      prevScrollPos = scrollPos\n    }\n    viewport.addEventListener('scroll', handleScroll)\n\n    onCleanup(() => {\n      viewport.removeEventListener('scroll', handleScroll)\n    })\n  }\n})\n</script>\n\n<template>\n  <Presence :present=\"forceMount || state !== 'hidden'\">\n    <ScrollAreaScrollbarVisible\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n    >\n      <slot />\n    </ScrollAreaScrollbarVisible>\n  </Presence>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarContext","useForwardExpose","useStateMachine","watchEffect","useDebounceFn"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,cAAcA,qDAA4B,EAAA;AAChD,IAAA,MAAM,mBAAmBC,+DAAiC,EAAA;AAE1D,IAAM,MAAA,EAAE,UAAW,EAAA,GAAIC,wCAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAA,EAAO,QAAS,EAAA,GAAIC,uCAAgB,QAAU,EAAA;AAAA,MACpD,MAAQ,EAAA;AAAA,QACN,MAAQ,EAAA;AAAA,OACV;AAAA,MACA,SAAW,EAAA;AAAA,QACT,UAAY,EAAA,MAAA;AAAA,QACZ,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,WAAa,EAAA;AAAA,QACX,MAAQ,EAAA,aAAA;AAAA,QACR,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,IAAM,EAAA,QAAA;AAAA,QACN,MAAQ,EAAA,WAAA;AAAA,QACR,aAAe,EAAA;AAAA;AACjB,KACD,CAAA;AAED,IAAAC,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAI,IAAA,KAAA,CAAM,UAAU,MAAQ,EAAA;AAC1B,QAAA,MAAM,SAAS,MAAO,CAAA,UAAA;AAAA,UACpB,MAAM,SAAS,MAAM,CAAA;AAAA,UACrB,YAAY,eAAgB,CAAA;AAAA,SAC9B;AAEA,QAAA,SAAA,CAAU,MAAM;AACd,UAAA,MAAA,CAAO,aAAa,MAAM,CAAA;AAAA,SAC3B,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,MAAM,oBAAoBC,kBAAc,CAAA,MAAM,QAAS,CAAA,YAAY,GAAG,GAAG,CAAA;AAEzE,IAAAD,eAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAM,MAAA,QAAA,GAAW,YAAY,QAAS,CAAA,KAAA;AACtC,MAAA,MAAM,eAAkB,GAAA,gBAAA,CAAiB,YAAa,CAAA,KAAA,GAClD,YACA,GAAA,WAAA;AAEJ,MAAA,IAAI,QAAU,EAAA;AACZ,QAAI,IAAA,aAAA,GAAgB,SAAS,eAAe,CAAA;AAC5C,QAAA,MAAM,eAAe,MAAM;AACzB,UAAM,MAAA,SAAA,GAAY,SAAS,eAAe,CAAA;AAC1C,UAAA,MAAM,8BAA8B,aAAkB,KAAA,SAAA;AACtD,UAAA,IAAI,2BAA6B,EAAA;AAC/B,YAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,YAAkB,iBAAA,EAAA;AAAA;AAEpB,UAAgB,aAAA,GAAA,SAAA;AAAA,SAClB;AACA,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM;AACd,UAAS,QAAA,CAAA,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,SACpD,CAAA;AAAA;AACH,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ScrollArea/ScrollAreaScrollbarScroll.js

@@ -1,4 +1,4 @@
-import { defineComponent, watchEffect, openBlock, createBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
+import { defineComponent, watchEffect, createBlock, openBlock, unref, withCtx, createVNode, mergeProps, renderSlot } from 'vue';
 import { useDebounceFn } from '@vueuse/core';
 import { u as useStateMachine } from '../shared/useStateMachine.js';
 import { _ as _sfc_main$1 } from './ScrollAreaScrollbarVisible.js';

package/dist/ScrollArea/ScrollAreaScrollbarScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaScrollbarScroll.js","sources":["../../src/ScrollArea/ScrollAreaScrollbarScroll.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ScrollAreaScrollbarScrollProps {\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { watchEffect } from 'vue'\nimport { useDebounceFn } from '@vueuse/core'\nimport { useStateMachine } from '../shared/useStateMachine'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'\nimport { Presence } from '@/Presence'\nimport { useForwardExpose } from '@/shared'\n\ndefineProps<ScrollAreaScrollbarScrollProps>()\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\n\nconst { forwardRef } = useForwardExpose()\n\nconst { state, dispatch } = useStateMachine('hidden', {\n  hidden: {\n    SCROLL: 'scrolling',\n  },\n  scrolling: {\n    SCROLL_END: 'idle',\n    POINTER_ENTER: 'interacting',\n  },\n  interacting: {\n    SCROLL: 'interacting',\n    POINTER_LEAVE: 'idle',\n  },\n  idle: {\n    HIDE: 'hidden',\n    SCROLL: 'scrolling',\n    POINTER_ENTER: 'interacting',\n  },\n})\n\nwatchEffect((onCleanup) => {\n  if (state.value === 'idle') {\n    const timeId = window.setTimeout(\n      () => dispatch('HIDE'),\n      rootContext.scrollHideDelay.value,\n    )\n\n    onCleanup(() => {\n      window.clearTimeout(timeId)\n    })\n  }\n})\n\nconst debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)\n\nwatchEffect((onCleanup) => {\n  const viewport = rootContext.viewport.value\n  const scrollDirection = scrollbarContext.isHorizontal.value\n    ? 'scrollLeft'\n    : 'scrollTop'\n\n  if (viewport) {\n    let prevScrollPos = viewport[scrollDirection]\n    const handleScroll = () => {\n      const scrollPos = viewport[scrollDirection]\n      const hasScrollInDirectionChanged = prevScrollPos !== scrollPos\n      if (hasScrollInDirectionChanged) {\n        dispatch('SCROLL')\n        debounceScrollEnd()\n      }\n      prevScrollPos = scrollPos\n    }\n    viewport.addEventListener('scroll', handleScroll)\n\n    onCleanup(() => {\n      viewport.removeEventListener('scroll', handleScroll)\n    })\n  }\n})\n</script>\n\n<template>\n  <Presence :present=\"forceMount || state !== 'hidden'\">\n    <ScrollAreaScrollbarVisible\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n    >\n      <slot />\n    </ScrollAreaScrollbarVisible>\n  </Presence>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,mBAAmB,gCAAiC,EAAA;AAE1D,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAA,EAAO,QAAS,EAAA,GAAI,gBAAgB,QAAU,EAAA;AAAA,MACpD,MAAQ,EAAA;AAAA,QACN,MAAQ,EAAA;AAAA,OACV;AAAA,MACA,SAAW,EAAA;AAAA,QACT,UAAY,EAAA,MAAA;AAAA,QACZ,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,WAAa,EAAA;AAAA,QACX,MAAQ,EAAA,aAAA;AAAA,QACR,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,IAAM,EAAA,QAAA;AAAA,QACN,MAAQ,EAAA,WAAA;AAAA,QACR,aAAe,EAAA;AAAA;AACjB,KACD,CAAA;AAED,IAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAI,IAAA,KAAA,CAAM,UAAU,MAAQ,EAAA;AAC1B,QAAA,MAAM,SAAS,MAAO,CAAA,UAAA;AAAA,UACpB,MAAM,SAAS,MAAM,CAAA;AAAA,UACrB,YAAY,eAAgB,CAAA;AAAA,SAC9B;AAEA,QAAA,SAAA,CAAU,MAAM;AACd,UAAA,MAAA,CAAO,aAAa,MAAM,CAAA;AAAA,SAC3B,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,MAAM,oBAAoB,aAAc,CAAA,MAAM,QAAS,CAAA,YAAY,GAAG,GAAG,CAAA;AAEzE,IAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAM,MAAA,QAAA,GAAW,YAAY,QAAS,CAAA,KAAA;AACtC,MAAA,MAAM,eAAkB,GAAA,gBAAA,CAAiB,YAAa,CAAA,KAAA,GAClD,YACA,GAAA,WAAA;AAEJ,MAAA,IAAI,QAAU,EAAA;AACZ,QAAI,IAAA,aAAA,GAAgB,SAAS,eAAe,CAAA;AAC5C,QAAA,MAAM,eAAe,MAAM;AACzB,UAAM,MAAA,SAAA,GAAY,SAAS,eAAe,CAAA;AAC1C,UAAA,MAAM,8BAA8B,aAAkB,KAAA,SAAA;AACtD,UAAA,IAAI,2BAA6B,EAAA;AAC/B,YAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,YAAkB,iBAAA,EAAA;AAAA;AAEpB,UAAgB,aAAA,GAAA,SAAA;AAAA,SAClB;AACA,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM;AACd,UAAS,QAAA,CAAA,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,SACpD,CAAA;AAAA;AACH,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ScrollAreaScrollbarScroll.js","sources":["../../src/ScrollArea/ScrollAreaScrollbarScroll.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ScrollAreaScrollbarScrollProps {\n  forceMount?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { Presence } from '@/Presence'\nimport { useForwardExpose } from '@/shared'\nimport { useDebounceFn } from '@vueuse/core'\nimport { watchEffect } from 'vue'\nimport { useStateMachine } from '../shared/useStateMachine'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport ScrollAreaScrollbarVisible from './ScrollAreaScrollbarVisible.vue'\n\ndefineProps<ScrollAreaScrollbarScrollProps>()\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\n\nconst { forwardRef } = useForwardExpose()\n\nconst { state, dispatch } = useStateMachine('hidden', {\n  hidden: {\n    SCROLL: 'scrolling',\n  },\n  scrolling: {\n    SCROLL_END: 'idle',\n    POINTER_ENTER: 'interacting',\n  },\n  interacting: {\n    SCROLL: 'interacting',\n    POINTER_LEAVE: 'idle',\n  },\n  idle: {\n    HIDE: 'hidden',\n    SCROLL: 'scrolling',\n    POINTER_ENTER: 'interacting',\n  },\n})\n\nwatchEffect((onCleanup) => {\n  if (state.value === 'idle') {\n    const timeId = window.setTimeout(\n      () => dispatch('HIDE'),\n      rootContext.scrollHideDelay.value,\n    )\n\n    onCleanup(() => {\n      window.clearTimeout(timeId)\n    })\n  }\n})\n\nconst debounceScrollEnd = useDebounceFn(() => dispatch('SCROLL_END'), 100)\n\nwatchEffect((onCleanup) => {\n  const viewport = rootContext.viewport.value\n  const scrollDirection = scrollbarContext.isHorizontal.value\n    ? 'scrollLeft'\n    : 'scrollTop'\n\n  if (viewport) {\n    let prevScrollPos = viewport[scrollDirection]\n    const handleScroll = () => {\n      const scrollPos = viewport[scrollDirection]\n      const hasScrollInDirectionChanged = prevScrollPos !== scrollPos\n      if (hasScrollInDirectionChanged) {\n        dispatch('SCROLL')\n        debounceScrollEnd()\n      }\n      prevScrollPos = scrollPos\n    }\n    viewport.addEventListener('scroll', handleScroll)\n\n    onCleanup(() => {\n      viewport.removeEventListener('scroll', handleScroll)\n    })\n  }\n})\n</script>\n\n<template>\n  <Presence :present=\"forceMount || state !== 'hidden'\">\n    <ScrollAreaScrollbarVisible\n      v-bind=\"$attrs\"\n      :ref=\"forwardRef\"\n    >\n      <slot />\n    </ScrollAreaScrollbarVisible>\n  </Presence>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkBA,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,mBAAmB,gCAAiC,EAAA;AAE1D,IAAM,MAAA,EAAE,UAAW,EAAA,GAAI,gBAAiB,EAAA;AAExC,IAAA,MAAM,EAAE,KAAA,EAAO,QAAS,EAAA,GAAI,gBAAgB,QAAU,EAAA;AAAA,MACpD,MAAQ,EAAA;AAAA,QACN,MAAQ,EAAA;AAAA,OACV;AAAA,MACA,SAAW,EAAA;AAAA,QACT,UAAY,EAAA,MAAA;AAAA,QACZ,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,WAAa,EAAA;AAAA,QACX,MAAQ,EAAA,aAAA;AAAA,QACR,aAAe,EAAA;AAAA,OACjB;AAAA,MACA,IAAM,EAAA;AAAA,QACJ,IAAM,EAAA,QAAA;AAAA,QACN,MAAQ,EAAA,WAAA;AAAA,QACR,aAAe,EAAA;AAAA;AACjB,KACD,CAAA;AAED,IAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAI,IAAA,KAAA,CAAM,UAAU,MAAQ,EAAA;AAC1B,QAAA,MAAM,SAAS,MAAO,CAAA,UAAA;AAAA,UACpB,MAAM,SAAS,MAAM,CAAA;AAAA,UACrB,YAAY,eAAgB,CAAA;AAAA,SAC9B;AAEA,QAAA,SAAA,CAAU,MAAM;AACd,UAAA,MAAA,CAAO,aAAa,MAAM,CAAA;AAAA,SAC3B,CAAA;AAAA;AACH,KACD,CAAA;AAED,IAAA,MAAM,oBAAoB,aAAc,CAAA,MAAM,QAAS,CAAA,YAAY,GAAG,GAAG,CAAA;AAEzE,IAAA,WAAA,CAAY,CAAC,SAAc,KAAA;AACzB,MAAM,MAAA,QAAA,GAAW,YAAY,QAAS,CAAA,KAAA;AACtC,MAAA,MAAM,eAAkB,GAAA,gBAAA,CAAiB,YAAa,CAAA,KAAA,GAClD,YACA,GAAA,WAAA;AAEJ,MAAA,IAAI,QAAU,EAAA;AACZ,QAAI,IAAA,aAAA,GAAgB,SAAS,eAAe,CAAA;AAC5C,QAAA,MAAM,eAAe,MAAM;AACzB,UAAM,MAAA,SAAA,GAAY,SAAS,eAAe,CAAA;AAC1C,UAAA,MAAM,8BAA8B,aAAkB,KAAA,SAAA;AACtD,UAAA,IAAI,2BAA6B,EAAA;AAC/B,YAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,YAAkB,iBAAA,EAAA;AAAA;AAEpB,UAAgB,aAAA,GAAA,SAAA;AAAA,SAClB;AACA,QAAS,QAAA,CAAA,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAEhD,QAAA,SAAA,CAAU,MAAM;AACd,UAAS,QAAA,CAAA,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,SACpD,CAAA;AAAA;AACH,KACD,CAAA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ScrollArea/ScrollAreaScrollbarVisible.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaScrollbarVisible.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarVisible.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { createContext, useForwardExpose } from '@/shared'\nimport type { Direction, Sizes } from './types'\n\nexport interface ScrollAreaScrollbarVisibleContext {\n  sizes: Ref<Sizes>\n  hasThumb: Ref<boolean>\n  handleWheelScroll: (event: WheelEvent, payload: number) => void\n  handleThumbDown: (\n    event: MouseEvent,\n    payload: { x: number, y: number }\n  ) => void\n  handleThumbUp: (event: MouseEvent) => void\n  handleSizeChange: (payload: Sizes) => void\n  onThumbPositionChange: () => void\n  onDragScroll: (payload: number) => void\n  onThumbChange: (element: HTMLElement) => void\n}\n\nexport const [injectScrollAreaScrollbarVisibleContext, provideScrollAreaScrollbarVisibleContext]\n  = createContext<ScrollAreaScrollbarVisibleContext>('ScrollAreaScrollbarVisible')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport ScrollAreaScrollbarX from './ScrollAreaScrollbarX.vue'\nimport ScrollAreaScrollbarY from './ScrollAreaScrollbarY.vue'\nimport {\n  getScrollPositionFromPointer,\n  getThumbOffsetFromScroll,\n  getThumbRatio,\n  isScrollingWithinScrollbarBounds,\n} from './utils'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\nconst { forwardRef } = useForwardExpose()\n\nconst sizes = ref<Sizes>({\n  content: 0,\n  viewport: 0,\n  scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },\n})\n\nconst hasThumb = computed(() => {\n  const thumbRatio = getThumbRatio(sizes.value.viewport, sizes.value.content)\n  return Boolean(thumbRatio > 0 && thumbRatio < 1)\n})\n\nconst thumbRef = ref<HTMLElement>()\nconst pointerOffset = ref(0)\n\nfunction handleWheelScroll(event: WheelEvent, payload: number) {\n  if (isShowingScrollbarX.value) {\n    const scrollPos = rootContext.viewport.value!.scrollLeft + event.deltaY\n\n    rootContext.viewport.value!.scrollLeft = scrollPos\n    // prevent window scroll when wheeling on scrollbar\n    if (isScrollingWithinScrollbarBounds(scrollPos, payload))\n      event.preventDefault()\n  }\n  else {\n    const scrollPos = rootContext.viewport.value!.scrollTop + event.deltaY\n\n    rootContext.viewport.value!.scrollTop = scrollPos\n    // prevent window scroll when wheeling on scrollbar\n    if (isScrollingWithinScrollbarBounds(scrollPos, payload))\n      event.preventDefault()\n  }\n}\n\nfunction handleThumbDown(event: MouseEvent, payload: { x: number, y: number }) {\n  if (isShowingScrollbarX.value)\n    pointerOffset.value = payload.x\n  else pointerOffset.value = payload.y\n}\nfunction handleThumbUp(event: MouseEvent) {\n  pointerOffset.value = 0\n}\n\nfunction handleSizeChange(payload: Sizes) {\n  sizes.value = payload\n}\n\nfunction getScrollPosition(pointerPos: number, dir?: Direction) {\n  return getScrollPositionFromPointer(\n    pointerPos,\n    pointerOffset.value,\n    sizes.value,\n    dir,\n  )\n}\n\nconst isShowingScrollbarX = computed(\n  () => scrollbarContext.isHorizontal.value,\n)\n\nfunction onDragScroll(payload: number) {\n  if (isShowingScrollbarX.value) {\n    rootContext.viewport.value!.scrollLeft = getScrollPosition(\n      payload,\n      rootContext.dir.value,\n    )\n  }\n  else {\n    rootContext.viewport.value!.scrollTop = getScrollPosition(payload)\n  }\n}\n\nfunction onThumbPositionChange() {\n  if (isShowingScrollbarX.value) {\n    if (rootContext.viewport.value && thumbRef.value) {\n      const scrollPos = rootContext.viewport.value.scrollLeft\n      const offset = getThumbOffsetFromScroll(\n        scrollPos,\n        sizes.value,\n        rootContext.dir.value,\n      )\n      thumbRef.value.style.transform = `translate3d(${offset}px, 0, 0)`\n    }\n  }\n  else {\n    if (rootContext.viewport.value && thumbRef.value) {\n      const scrollPos = rootContext.viewport.value.scrollTop\n      const offset = getThumbOffsetFromScroll(scrollPos, sizes.value)\n      thumbRef.value.style.transform = `translate3d(0, ${offset}px, 0)`\n    }\n  }\n}\nfunction onThumbChange(element: HTMLElement) {\n  thumbRef.value = element\n}\n\nprovideScrollAreaScrollbarVisibleContext({\n  sizes,\n  hasThumb,\n  handleWheelScroll,\n  handleThumbDown,\n  handleThumbUp,\n  handleSizeChange,\n  onThumbPositionChange,\n  onThumbChange,\n  onDragScroll,\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbarX\n    v-if=\"isShowingScrollbarX\"\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </ScrollAreaScrollbarX>\n  <ScrollAreaScrollbarY\n    v-else\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </ScrollAreaScrollbarY>\n</template>\n"],"names":["createContext","injectScrollAreaRootContext","injectScrollAreaScrollbarContext","useForwardExpose","ref","computed","getThumbRatio","isScrollingWithinScrollbarBounds","getScrollPositionFromPointer","getThumbOffsetFromScroll"],"mappings":"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"}
+{"version":3,"file":"ScrollAreaScrollbarVisible.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarVisible.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Direction, Sizes } from './types'\nimport { createContext, useForwardExpose } from '@/shared'\n\nexport interface ScrollAreaScrollbarVisibleContext {\n  sizes: Ref<Sizes>\n  hasThumb: Ref<boolean>\n  handleWheelScroll: (event: WheelEvent, payload: number) => void\n  handleThumbDown: (\n    event: MouseEvent,\n    payload: { x: number, y: number }\n  ) => void\n  handleThumbUp: (event: MouseEvent) => void\n  handleSizeChange: (payload: Sizes) => void\n  onThumbPositionChange: () => void\n  onDragScroll: (payload: number) => void\n  onThumbChange: (element: HTMLElement) => void\n}\n\nexport const [injectScrollAreaScrollbarVisibleContext, provideScrollAreaScrollbarVisibleContext]\n  = createContext<ScrollAreaScrollbarVisibleContext>('ScrollAreaScrollbarVisible')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport ScrollAreaScrollbarX from './ScrollAreaScrollbarX.vue'\nimport ScrollAreaScrollbarY from './ScrollAreaScrollbarY.vue'\nimport {\n  getScrollPositionFromPointer,\n  getThumbOffsetFromScroll,\n  getThumbRatio,\n  isScrollingWithinScrollbarBounds,\n} from './utils'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\nconst { forwardRef } = useForwardExpose()\n\nconst sizes = ref<Sizes>({\n  content: 0,\n  viewport: 0,\n  scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },\n})\n\nconst hasThumb = computed(() => {\n  const thumbRatio = getThumbRatio(sizes.value.viewport, sizes.value.content)\n  return Boolean(thumbRatio > 0 && thumbRatio < 1)\n})\n\nconst thumbRef = ref<HTMLElement>()\nconst pointerOffset = ref(0)\n\nfunction handleWheelScroll(event: WheelEvent, payload: number) {\n  if (isShowingScrollbarX.value) {\n    const scrollPos = rootContext.viewport.value!.scrollLeft + event.deltaY\n\n    rootContext.viewport.value!.scrollLeft = scrollPos\n    // prevent window scroll when wheeling on scrollbar\n    if (isScrollingWithinScrollbarBounds(scrollPos, payload))\n      event.preventDefault()\n  }\n  else {\n    const scrollPos = rootContext.viewport.value!.scrollTop + event.deltaY\n\n    rootContext.viewport.value!.scrollTop = scrollPos\n    // prevent window scroll when wheeling on scrollbar\n    if (isScrollingWithinScrollbarBounds(scrollPos, payload))\n      event.preventDefault()\n  }\n}\n\nfunction handleThumbDown(event: MouseEvent, payload: { x: number, y: number }) {\n  if (isShowingScrollbarX.value)\n    pointerOffset.value = payload.x\n  else pointerOffset.value = payload.y\n}\nfunction handleThumbUp(event: MouseEvent) {\n  pointerOffset.value = 0\n}\n\nfunction handleSizeChange(payload: Sizes) {\n  sizes.value = payload\n}\n\nfunction getScrollPosition(pointerPos: number, dir?: Direction) {\n  return getScrollPositionFromPointer(\n    pointerPos,\n    pointerOffset.value,\n    sizes.value,\n    dir,\n  )\n}\n\nconst isShowingScrollbarX = computed(\n  () => scrollbarContext.isHorizontal.value,\n)\n\nfunction onDragScroll(payload: number) {\n  if (isShowingScrollbarX.value) {\n    rootContext.viewport.value!.scrollLeft = getScrollPosition(\n      payload,\n      rootContext.dir.value,\n    )\n  }\n  else {\n    rootContext.viewport.value!.scrollTop = getScrollPosition(payload)\n  }\n}\n\nfunction onThumbPositionChange() {\n  if (isShowingScrollbarX.value) {\n    if (rootContext.viewport.value && thumbRef.value) {\n      const scrollPos = rootContext.viewport.value.scrollLeft\n      const offset = getThumbOffsetFromScroll(\n        scrollPos,\n        sizes.value,\n        rootContext.dir.value,\n      )\n      thumbRef.value.style.transform = `translate3d(${offset}px, 0, 0)`\n    }\n  }\n  else {\n    if (rootContext.viewport.value && thumbRef.value) {\n      const scrollPos = rootContext.viewport.value.scrollTop\n      const offset = getThumbOffsetFromScroll(scrollPos, sizes.value)\n      thumbRef.value.style.transform = `translate3d(0, ${offset}px, 0)`\n    }\n  }\n}\nfunction onThumbChange(element: HTMLElement) {\n  thumbRef.value = element\n}\n\nprovideScrollAreaScrollbarVisibleContext({\n  sizes,\n  hasThumb,\n  handleWheelScroll,\n  handleThumbDown,\n  handleThumbUp,\n  handleSizeChange,\n  onThumbPositionChange,\n  onThumbChange,\n  onDragScroll,\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbarX\n    v-if=\"isShowingScrollbarX\"\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </ScrollAreaScrollbarX>\n  <ScrollAreaScrollbarY\n    v-else\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </ScrollAreaScrollbarY>\n</template>\n"],"names":["createContext","injectScrollAreaRootContext","injectScrollAreaScrollbarContext","useForwardExpose","ref","computed","getThumbRatio","isScrollingWithinScrollbarBounds","getScrollPositionFromPointer","getThumbOffsetFromScroll"],"mappings":"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"}

package/dist/ScrollArea/ScrollAreaScrollbarVisible.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, openBlock, createBlock, mergeProps, unref, withCtx, renderSlot } from 'vue';
+import { defineComponent, ref, computed, createBlock, openBlock, mergeProps, unref, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from './ScrollAreaScrollbarX.js';
 import { _ as _sfc_main$2 } from './ScrollAreaScrollbarY.js';
 import { g as getThumbRatio, i as isScrollingWithinScrollbarBounds, a as getThumbOffsetFromScroll, b as getScrollPositionFromPointer } from './utils.js';

package/dist/ScrollArea/ScrollAreaScrollbarVisible.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaScrollbarVisible.js","sources":["../../src/ScrollArea/ScrollAreaScrollbarVisible.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport { createContext, useForwardExpose } from '@/shared'\nimport type { Direction, Sizes } from './types'\n\nexport interface ScrollAreaScrollbarVisibleContext {\n  sizes: Ref<Sizes>\n  hasThumb: Ref<boolean>\n  handleWheelScroll: (event: WheelEvent, payload: number) => void\n  handleThumbDown: (\n    event: MouseEvent,\n    payload: { x: number, y: number }\n  ) => void\n  handleThumbUp: (event: MouseEvent) => void\n  handleSizeChange: (payload: Sizes) => void\n  onThumbPositionChange: () => void\n  onDragScroll: (payload: number) => void\n  onThumbChange: (element: HTMLElement) => void\n}\n\nexport const [injectScrollAreaScrollbarVisibleContext, provideScrollAreaScrollbarVisibleContext]\n  = createContext<ScrollAreaScrollbarVisibleContext>('ScrollAreaScrollbarVisible')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport ScrollAreaScrollbarX from './ScrollAreaScrollbarX.vue'\nimport ScrollAreaScrollbarY from './ScrollAreaScrollbarY.vue'\nimport {\n  getScrollPositionFromPointer,\n  getThumbOffsetFromScroll,\n  getThumbRatio,\n  isScrollingWithinScrollbarBounds,\n} from './utils'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\nconst { forwardRef } = useForwardExpose()\n\nconst sizes = ref<Sizes>({\n  content: 0,\n  viewport: 0,\n  scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },\n})\n\nconst hasThumb = computed(() => {\n  const thumbRatio = getThumbRatio(sizes.value.viewport, sizes.value.content)\n  return Boolean(thumbRatio > 0 && thumbRatio < 1)\n})\n\nconst thumbRef = ref<HTMLElement>()\nconst pointerOffset = ref(0)\n\nfunction handleWheelScroll(event: WheelEvent, payload: number) {\n  if (isShowingScrollbarX.value) {\n    const scrollPos = rootContext.viewport.value!.scrollLeft + event.deltaY\n\n    rootContext.viewport.value!.scrollLeft = scrollPos\n    // prevent window scroll when wheeling on scrollbar\n    if (isScrollingWithinScrollbarBounds(scrollPos, payload))\n      event.preventDefault()\n  }\n  else {\n    const scrollPos = rootContext.viewport.value!.scrollTop + event.deltaY\n\n    rootContext.viewport.value!.scrollTop = scrollPos\n    // prevent window scroll when wheeling on scrollbar\n    if (isScrollingWithinScrollbarBounds(scrollPos, payload))\n      event.preventDefault()\n  }\n}\n\nfunction handleThumbDown(event: MouseEvent, payload: { x: number, y: number }) {\n  if (isShowingScrollbarX.value)\n    pointerOffset.value = payload.x\n  else pointerOffset.value = payload.y\n}\nfunction handleThumbUp(event: MouseEvent) {\n  pointerOffset.value = 0\n}\n\nfunction handleSizeChange(payload: Sizes) {\n  sizes.value = payload\n}\n\nfunction getScrollPosition(pointerPos: number, dir?: Direction) {\n  return getScrollPositionFromPointer(\n    pointerPos,\n    pointerOffset.value,\n    sizes.value,\n    dir,\n  )\n}\n\nconst isShowingScrollbarX = computed(\n  () => scrollbarContext.isHorizontal.value,\n)\n\nfunction onDragScroll(payload: number) {\n  if (isShowingScrollbarX.value) {\n    rootContext.viewport.value!.scrollLeft = getScrollPosition(\n      payload,\n      rootContext.dir.value,\n    )\n  }\n  else {\n    rootContext.viewport.value!.scrollTop = getScrollPosition(payload)\n  }\n}\n\nfunction onThumbPositionChange() {\n  if (isShowingScrollbarX.value) {\n    if (rootContext.viewport.value && thumbRef.value) {\n      const scrollPos = rootContext.viewport.value.scrollLeft\n      const offset = getThumbOffsetFromScroll(\n        scrollPos,\n        sizes.value,\n        rootContext.dir.value,\n      )\n      thumbRef.value.style.transform = `translate3d(${offset}px, 0, 0)`\n    }\n  }\n  else {\n    if (rootContext.viewport.value && thumbRef.value) {\n      const scrollPos = rootContext.viewport.value.scrollTop\n      const offset = getThumbOffsetFromScroll(scrollPos, sizes.value)\n      thumbRef.value.style.transform = `translate3d(0, ${offset}px, 0)`\n    }\n  }\n}\nfunction onThumbChange(element: HTMLElement) {\n  thumbRef.value = element\n}\n\nprovideScrollAreaScrollbarVisibleContext({\n  sizes,\n  hasThumb,\n  handleWheelScroll,\n  handleThumbDown,\n  handleThumbUp,\n  handleSizeChange,\n  onThumbPositionChange,\n  onThumbChange,\n  onDragScroll,\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbarX\n    v-if=\"isShowingScrollbarX\"\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </ScrollAreaScrollbarX>\n  <ScrollAreaScrollbarY\n    v-else\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </ScrollAreaScrollbarY>\n</template>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScrollAreaScrollbarVisible.js","sources":["../../src/ScrollArea/ScrollAreaScrollbarVisible.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { Ref } from 'vue'\nimport type { Direction, Sizes } from './types'\nimport { createContext, useForwardExpose } from '@/shared'\n\nexport interface ScrollAreaScrollbarVisibleContext {\n  sizes: Ref<Sizes>\n  hasThumb: Ref<boolean>\n  handleWheelScroll: (event: WheelEvent, payload: number) => void\n  handleThumbDown: (\n    event: MouseEvent,\n    payload: { x: number, y: number }\n  ) => void\n  handleThumbUp: (event: MouseEvent) => void\n  handleSizeChange: (payload: Sizes) => void\n  onThumbPositionChange: () => void\n  onDragScroll: (payload: number) => void\n  onThumbChange: (element: HTMLElement) => void\n}\n\nexport const [injectScrollAreaScrollbarVisibleContext, provideScrollAreaScrollbarVisibleContext]\n  = createContext<ScrollAreaScrollbarVisibleContext>('ScrollAreaScrollbarVisible')\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarContext } from './ScrollAreaScrollbar.vue'\nimport ScrollAreaScrollbarX from './ScrollAreaScrollbarX.vue'\nimport ScrollAreaScrollbarY from './ScrollAreaScrollbarY.vue'\nimport {\n  getScrollPositionFromPointer,\n  getThumbOffsetFromScroll,\n  getThumbRatio,\n  isScrollingWithinScrollbarBounds,\n} from './utils'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContext = injectScrollAreaScrollbarContext()\nconst { forwardRef } = useForwardExpose()\n\nconst sizes = ref<Sizes>({\n  content: 0,\n  viewport: 0,\n  scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },\n})\n\nconst hasThumb = computed(() => {\n  const thumbRatio = getThumbRatio(sizes.value.viewport, sizes.value.content)\n  return Boolean(thumbRatio > 0 && thumbRatio < 1)\n})\n\nconst thumbRef = ref<HTMLElement>()\nconst pointerOffset = ref(0)\n\nfunction handleWheelScroll(event: WheelEvent, payload: number) {\n  if (isShowingScrollbarX.value) {\n    const scrollPos = rootContext.viewport.value!.scrollLeft + event.deltaY\n\n    rootContext.viewport.value!.scrollLeft = scrollPos\n    // prevent window scroll when wheeling on scrollbar\n    if (isScrollingWithinScrollbarBounds(scrollPos, payload))\n      event.preventDefault()\n  }\n  else {\n    const scrollPos = rootContext.viewport.value!.scrollTop + event.deltaY\n\n    rootContext.viewport.value!.scrollTop = scrollPos\n    // prevent window scroll when wheeling on scrollbar\n    if (isScrollingWithinScrollbarBounds(scrollPos, payload))\n      event.preventDefault()\n  }\n}\n\nfunction handleThumbDown(event: MouseEvent, payload: { x: number, y: number }) {\n  if (isShowingScrollbarX.value)\n    pointerOffset.value = payload.x\n  else pointerOffset.value = payload.y\n}\nfunction handleThumbUp(event: MouseEvent) {\n  pointerOffset.value = 0\n}\n\nfunction handleSizeChange(payload: Sizes) {\n  sizes.value = payload\n}\n\nfunction getScrollPosition(pointerPos: number, dir?: Direction) {\n  return getScrollPositionFromPointer(\n    pointerPos,\n    pointerOffset.value,\n    sizes.value,\n    dir,\n  )\n}\n\nconst isShowingScrollbarX = computed(\n  () => scrollbarContext.isHorizontal.value,\n)\n\nfunction onDragScroll(payload: number) {\n  if (isShowingScrollbarX.value) {\n    rootContext.viewport.value!.scrollLeft = getScrollPosition(\n      payload,\n      rootContext.dir.value,\n    )\n  }\n  else {\n    rootContext.viewport.value!.scrollTop = getScrollPosition(payload)\n  }\n}\n\nfunction onThumbPositionChange() {\n  if (isShowingScrollbarX.value) {\n    if (rootContext.viewport.value && thumbRef.value) {\n      const scrollPos = rootContext.viewport.value.scrollLeft\n      const offset = getThumbOffsetFromScroll(\n        scrollPos,\n        sizes.value,\n        rootContext.dir.value,\n      )\n      thumbRef.value.style.transform = `translate3d(${offset}px, 0, 0)`\n    }\n  }\n  else {\n    if (rootContext.viewport.value && thumbRef.value) {\n      const scrollPos = rootContext.viewport.value.scrollTop\n      const offset = getThumbOffsetFromScroll(scrollPos, sizes.value)\n      thumbRef.value.style.transform = `translate3d(0, ${offset}px, 0)`\n    }\n  }\n}\nfunction onThumbChange(element: HTMLElement) {\n  thumbRef.value = element\n}\n\nprovideScrollAreaScrollbarVisibleContext({\n  sizes,\n  hasThumb,\n  handleWheelScroll,\n  handleThumbDown,\n  handleThumbUp,\n  handleSizeChange,\n  onThumbPositionChange,\n  onThumbChange,\n  onDragScroll,\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbarX\n    v-if=\"isShowingScrollbarX\"\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </ScrollAreaScrollbarX>\n  <ScrollAreaScrollbarY\n    v-else\n    v-bind=\"$attrs\"\n    :ref=\"forwardRef\"\n  >\n    <slot />\n  </ScrollAreaScrollbarY>\n</template>\n"],"names":[],"mappings":"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"}

package/dist/ScrollArea/ScrollAreaScrollbarX.cjs

@@ -27,7 +27,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           bottom: 0,
           left: vue.unref(rootContext).dir.value === "rtl" ? "var(--reka-scroll-area-corner-width)" : 0,
           right: vue.unref(rootContext).dir.value === "ltr" ? "var(--reka-scroll-area-corner-width)" : 0,
-          ["--reka-scroll-area-thumb-width"]: sizes.value ? `${vue.unref(ScrollArea_utils.getThumbSize)(sizes.value)}px` : undefined
+          ["--reka-scroll-area-thumb-width"]: sizes.value ? `${vue.unref(ScrollArea_utils.getThumbSize)(sizes.value)}px` : void 0
         }),
         onOnDragScroll: _cache[0] || (_cache[0] = ($event) => vue.unref(scrollbarVisibleContext).onDragScroll($event.x))
       }, {

package/dist/ScrollArea/ScrollAreaScrollbarX.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaScrollbarX.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarX.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'\nimport { getThumbSize } from './utils'\nimport { useForwardExpose } from '@/shared'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\n\nconst { forwardRef, currentElement: scrollbarElement } = useForwardExpose()\n\nonMounted(() => {\n  if (scrollbarElement.value)\n    rootContext.onScrollbarXChange(scrollbarElement.value)\n})\nconst sizes = computed(() => scrollbarVisibleContext.sizes.value)\n</script>\n\n<template>\n  <ScrollAreaScrollbarImpl\n    :ref=\"forwardRef\"\n    :is-horizontal=\"true\"\n    data-orientation=\"horizontal\"\n    :style=\"{\n      bottom: 0,\n      left: rootContext.dir.value === 'rtl' ? 'var(--reka-scroll-area-corner-width)' : 0,\n      right: rootContext.dir.value === 'ltr' ? 'var(--reka-scroll-area-corner-width)' : 0,\n      ['--reka-scroll-area-thumb-width' as any]: sizes ? `${getThumbSize(sizes)}px` : undefined,\n    }\"\n    @on-drag-scroll=\"scrollbarVisibleContext.onDragScroll($event.x)\"\n  >\n    <slot />\n  </ScrollAreaScrollbarImpl>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarVisibleContext","useForwardExpose","onMounted","computed"],"mappings":";;;;;;;;;;;;AAQA,IAAA,MAAM,cAAcA,qDAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0BC,6EAAwC,EAAA;AAExE,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,gBAAA,KAAqBC,wCAAiB,EAAA;AAE1E,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAiB,CAAA,KAAA;AACnB,QAAY,WAAA,CAAA,kBAAA,CAAmB,iBAAiB,KAAK,CAAA;AAAA,KACxD,CAAA;AACD,IAAA,MAAM,KAAQ,GAAAC,YAAA,CAAS,MAAM,uBAAA,CAAwB,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ScrollAreaScrollbarX.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarX.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useForwardExpose } from '@/shared'\nimport { computed, onMounted } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { getThumbSize } from './utils'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\n\nconst { forwardRef, currentElement: scrollbarElement } = useForwardExpose()\n\nonMounted(() => {\n  if (scrollbarElement.value)\n    rootContext.onScrollbarXChange(scrollbarElement.value)\n})\nconst sizes = computed(() => scrollbarVisibleContext.sizes.value)\n</script>\n\n<template>\n  <ScrollAreaScrollbarImpl\n    :ref=\"forwardRef\"\n    :is-horizontal=\"true\"\n    data-orientation=\"horizontal\"\n    :style=\"{\n      bottom: 0,\n      left: rootContext.dir.value === 'rtl' ? 'var(--reka-scroll-area-corner-width)' : 0,\n      right: rootContext.dir.value === 'ltr' ? 'var(--reka-scroll-area-corner-width)' : 0,\n      ['--reka-scroll-area-thumb-width' as any]: sizes ? `${getThumbSize(sizes)}px` : undefined,\n    }\"\n    @on-drag-scroll=\"scrollbarVisibleContext.onDragScroll($event.x)\"\n  >\n    <slot />\n  </ScrollAreaScrollbarImpl>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarVisibleContext","useForwardExpose","onMounted","computed"],"mappings":";;;;;;;;;;;;AAQA,IAAA,MAAM,cAAcA,qDAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0BC,6EAAwC,EAAA;AAExE,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,gBAAA,KAAqBC,wCAAiB,EAAA;AAE1E,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAiB,CAAA,KAAA;AACnB,QAAY,WAAA,CAAA,kBAAA,CAAmB,iBAAiB,KAAK,CAAA;AAAA,KACxD,CAAA;AACD,IAAA,MAAM,KAAQ,GAAAC,YAAA,CAAS,MAAM,uBAAA,CAAwB,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ScrollArea/ScrollAreaScrollbarX.js

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, computed, openBlock, createBlock, unref, normalizeStyle, withCtx, renderSlot } from 'vue';
+import { defineComponent, onMounted, computed, createBlock, openBlock, unref, normalizeStyle, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from './ScrollAreaScrollbarImpl.js';
 import { c as getThumbSize } from './utils.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
@@ -25,7 +25,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           bottom: 0,
           left: unref(rootContext).dir.value === "rtl" ? "var(--reka-scroll-area-corner-width)" : 0,
           right: unref(rootContext).dir.value === "ltr" ? "var(--reka-scroll-area-corner-width)" : 0,
-          ["--reka-scroll-area-thumb-width"]: sizes.value ? `${unref(getThumbSize)(sizes.value)}px` : undefined
+          ["--reka-scroll-area-thumb-width"]: sizes.value ? `${unref(getThumbSize)(sizes.value)}px` : void 0
         }),
         onOnDragScroll: _cache[0] || (_cache[0] = ($event) => unref(scrollbarVisibleContext).onDragScroll($event.x))
       }, {

package/dist/ScrollArea/ScrollAreaScrollbarX.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaScrollbarX.js","sources":["../../src/ScrollArea/ScrollAreaScrollbarX.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'\nimport { getThumbSize } from './utils'\nimport { useForwardExpose } from '@/shared'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\n\nconst { forwardRef, currentElement: scrollbarElement } = useForwardExpose()\n\nonMounted(() => {\n  if (scrollbarElement.value)\n    rootContext.onScrollbarXChange(scrollbarElement.value)\n})\nconst sizes = computed(() => scrollbarVisibleContext.sizes.value)\n</script>\n\n<template>\n  <ScrollAreaScrollbarImpl\n    :ref=\"forwardRef\"\n    :is-horizontal=\"true\"\n    data-orientation=\"horizontal\"\n    :style=\"{\n      bottom: 0,\n      left: rootContext.dir.value === 'rtl' ? 'var(--reka-scroll-area-corner-width)' : 0,\n      right: rootContext.dir.value === 'ltr' ? 'var(--reka-scroll-area-corner-width)' : 0,\n      ['--reka-scroll-area-thumb-width' as any]: sizes ? `${getThumbSize(sizes)}px` : undefined,\n    }\"\n    @on-drag-scroll=\"scrollbarVisibleContext.onDragScroll($event.x)\"\n  >\n    <slot />\n  </ScrollAreaScrollbarImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;AAQA,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0B,uCAAwC,EAAA;AAExE,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,gBAAA,KAAqB,gBAAiB,EAAA;AAE1E,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAiB,CAAA,KAAA;AACnB,QAAY,WAAA,CAAA,kBAAA,CAAmB,iBAAiB,KAAK,CAAA;AAAA,KACxD,CAAA;AACD,IAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,MAAM,uBAAA,CAAwB,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ScrollAreaScrollbarX.js","sources":["../../src/ScrollArea/ScrollAreaScrollbarX.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useForwardExpose } from '@/shared'\nimport { computed, onMounted } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { getThumbSize } from './utils'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\n\nconst { forwardRef, currentElement: scrollbarElement } = useForwardExpose()\n\nonMounted(() => {\n  if (scrollbarElement.value)\n    rootContext.onScrollbarXChange(scrollbarElement.value)\n})\nconst sizes = computed(() => scrollbarVisibleContext.sizes.value)\n</script>\n\n<template>\n  <ScrollAreaScrollbarImpl\n    :ref=\"forwardRef\"\n    :is-horizontal=\"true\"\n    data-orientation=\"horizontal\"\n    :style=\"{\n      bottom: 0,\n      left: rootContext.dir.value === 'rtl' ? 'var(--reka-scroll-area-corner-width)' : 0,\n      right: rootContext.dir.value === 'ltr' ? 'var(--reka-scroll-area-corner-width)' : 0,\n      ['--reka-scroll-area-thumb-width' as any]: sizes ? `${getThumbSize(sizes)}px` : undefined,\n    }\"\n    @on-drag-scroll=\"scrollbarVisibleContext.onDragScroll($event.x)\"\n  >\n    <slot />\n  </ScrollAreaScrollbarImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;AAQA,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0B,uCAAwC,EAAA;AAExE,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,gBAAA,KAAqB,gBAAiB,EAAA;AAE1E,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAiB,CAAA,KAAA;AACnB,QAAY,WAAA,CAAA,kBAAA,CAAmB,iBAAiB,KAAK,CAAA;AAAA,KACxD,CAAA;AACD,IAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,MAAM,uBAAA,CAAwB,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ScrollArea/ScrollAreaScrollbarY.cjs

@@ -25,10 +25,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         "data-orientation": "vertical",
         style: vue.normalizeStyle({
           top: 0,
-          right: vue.unref(rootContext).dir.value === "ltr" ? 0 : undefined,
-          left: vue.unref(rootContext).dir.value === "rtl" ? 0 : undefined,
+          right: vue.unref(rootContext).dir.value === "ltr" ? 0 : void 0,
+          left: vue.unref(rootContext).dir.value === "rtl" ? 0 : void 0,
           bottom: "var(--reka-scroll-area-corner-height)",
-          ["--reka-scroll-area-thumb-height"]: sizes.value ? `${vue.unref(ScrollArea_utils.getThumbSize)(sizes.value)}px` : undefined
+          ["--reka-scroll-area-thumb-height"]: sizes.value ? `${vue.unref(ScrollArea_utils.getThumbSize)(sizes.value)}px` : void 0
         }),
         onOnDragScroll: _cache[0] || (_cache[0] = ($event) => vue.unref(scrollbarVisibleContext).onDragScroll($event.y))
       }, {

package/dist/ScrollArea/ScrollAreaScrollbarY.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaScrollbarY.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarY.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'\nimport { getThumbSize } from './utils'\nimport { useForwardExpose } from '@/shared'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\n\nconst { forwardRef, currentElement: scrollbarElement } = useForwardExpose()\n\nonMounted(() => {\n  if (scrollbarElement.value)\n    rootContext.onScrollbarYChange(scrollbarElement.value)\n})\n\nconst sizes = computed(() => scrollbarVisibleContext.sizes.value)\n</script>\n\n<template>\n  <ScrollAreaScrollbarImpl\n    :ref=\"forwardRef\"\n    :is-horizontal=\"false\"\n    data-orientation=\"vertical\"\n    :style=\"{\n      top: 0,\n      right: rootContext.dir.value === 'ltr' ? 0 : undefined,\n      left: rootContext.dir.value === 'rtl' ? 0 : undefined,\n      bottom: 'var(--reka-scroll-area-corner-height)',\n      ['--reka-scroll-area-thumb-height' as any]: sizes ? `${getThumbSize(sizes)}px` : undefined,\n    }\"\n    @on-drag-scroll=\"scrollbarVisibleContext.onDragScroll($event.y)\"\n  >\n    <slot />\n  </ScrollAreaScrollbarImpl>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarVisibleContext","useForwardExpose","onMounted","computed"],"mappings":";;;;;;;;;;;;AAQA,IAAA,MAAM,cAAcA,qDAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0BC,6EAAwC,EAAA;AAExE,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,gBAAA,KAAqBC,wCAAiB,EAAA;AAE1E,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAiB,CAAA,KAAA;AACnB,QAAY,WAAA,CAAA,kBAAA,CAAmB,iBAAiB,KAAK,CAAA;AAAA,KACxD,CAAA;AAED,IAAA,MAAM,KAAQ,GAAAC,YAAA,CAAS,MAAM,uBAAA,CAAwB,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ScrollAreaScrollbarY.cjs","sources":["../../src/ScrollArea/ScrollAreaScrollbarY.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useForwardExpose } from '@/shared'\nimport { computed, onMounted } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { getThumbSize } from './utils'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\n\nconst { forwardRef, currentElement: scrollbarElement } = useForwardExpose()\n\nonMounted(() => {\n  if (scrollbarElement.value)\n    rootContext.onScrollbarYChange(scrollbarElement.value)\n})\n\nconst sizes = computed(() => scrollbarVisibleContext.sizes.value)\n</script>\n\n<template>\n  <ScrollAreaScrollbarImpl\n    :ref=\"forwardRef\"\n    :is-horizontal=\"false\"\n    data-orientation=\"vertical\"\n    :style=\"{\n      top: 0,\n      right: rootContext.dir.value === 'ltr' ? 0 : undefined,\n      left: rootContext.dir.value === 'rtl' ? 0 : undefined,\n      bottom: 'var(--reka-scroll-area-corner-height)',\n      ['--reka-scroll-area-thumb-height' as any]: sizes ? `${getThumbSize(sizes)}px` : undefined,\n    }\"\n    @on-drag-scroll=\"scrollbarVisibleContext.onDragScroll($event.y)\"\n  >\n    <slot />\n  </ScrollAreaScrollbarImpl>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarVisibleContext","useForwardExpose","onMounted","computed"],"mappings":";;;;;;;;;;;;AAQA,IAAA,MAAM,cAAcA,qDAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0BC,6EAAwC,EAAA;AAExE,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,gBAAA,KAAqBC,wCAAiB,EAAA;AAE1E,IAAAC,aAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAiB,CAAA,KAAA;AACnB,QAAY,WAAA,CAAA,kBAAA,CAAmB,iBAAiB,KAAK,CAAA;AAAA,KACxD,CAAA;AAED,IAAA,MAAM,KAAQ,GAAAC,YAAA,CAAS,MAAM,uBAAA,CAAwB,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ScrollArea/ScrollAreaScrollbarY.js

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, computed, openBlock, createBlock, unref, normalizeStyle, withCtx, renderSlot } from 'vue';
+import { defineComponent, onMounted, computed, createBlock, openBlock, unref, normalizeStyle, withCtx, renderSlot } from 'vue';
 import { _ as _sfc_main$1 } from './ScrollAreaScrollbarImpl.js';
 import { c as getThumbSize } from './utils.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';
@@ -23,10 +23,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "data-orientation": "vertical",
         style: normalizeStyle({
           top: 0,
-          right: unref(rootContext).dir.value === "ltr" ? 0 : undefined,
-          left: unref(rootContext).dir.value === "rtl" ? 0 : undefined,
+          right: unref(rootContext).dir.value === "ltr" ? 0 : void 0,
+          left: unref(rootContext).dir.value === "rtl" ? 0 : void 0,
           bottom: "var(--reka-scroll-area-corner-height)",
-          ["--reka-scroll-area-thumb-height"]: sizes.value ? `${unref(getThumbSize)(sizes.value)}px` : undefined
+          ["--reka-scroll-area-thumb-height"]: sizes.value ? `${unref(getThumbSize)(sizes.value)}px` : void 0
         }),
         onOnDragScroll: _cache[0] || (_cache[0] = ($event) => unref(scrollbarVisibleContext).onDragScroll($event.y))
       }, {

package/dist/ScrollArea/ScrollAreaScrollbarY.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaScrollbarY.js","sources":["../../src/ScrollArea/ScrollAreaScrollbarY.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted } from 'vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'\nimport { getThumbSize } from './utils'\nimport { useForwardExpose } from '@/shared'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\n\nconst { forwardRef, currentElement: scrollbarElement } = useForwardExpose()\n\nonMounted(() => {\n  if (scrollbarElement.value)\n    rootContext.onScrollbarYChange(scrollbarElement.value)\n})\n\nconst sizes = computed(() => scrollbarVisibleContext.sizes.value)\n</script>\n\n<template>\n  <ScrollAreaScrollbarImpl\n    :ref=\"forwardRef\"\n    :is-horizontal=\"false\"\n    data-orientation=\"vertical\"\n    :style=\"{\n      top: 0,\n      right: rootContext.dir.value === 'ltr' ? 0 : undefined,\n      left: rootContext.dir.value === 'rtl' ? 0 : undefined,\n      bottom: 'var(--reka-scroll-area-corner-height)',\n      ['--reka-scroll-area-thumb-height' as any]: sizes ? `${getThumbSize(sizes)}px` : undefined,\n    }\"\n    @on-drag-scroll=\"scrollbarVisibleContext.onDragScroll($event.y)\"\n  >\n    <slot />\n  </ScrollAreaScrollbarImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;AAQA,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0B,uCAAwC,EAAA;AAExE,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,gBAAA,KAAqB,gBAAiB,EAAA;AAE1E,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAiB,CAAA,KAAA;AACnB,QAAY,WAAA,CAAA,kBAAA,CAAmB,iBAAiB,KAAK,CAAA;AAAA,KACxD,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,MAAM,uBAAA,CAAwB,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ScrollAreaScrollbarY.js","sources":["../../src/ScrollArea/ScrollAreaScrollbarY.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useForwardExpose } from '@/shared'\nimport { computed, onMounted } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport ScrollAreaScrollbarImpl from './ScrollAreaScrollbarImpl.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { getThumbSize } from './utils'\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarVisibleContext = injectScrollAreaScrollbarVisibleContext()\n\nconst { forwardRef, currentElement: scrollbarElement } = useForwardExpose()\n\nonMounted(() => {\n  if (scrollbarElement.value)\n    rootContext.onScrollbarYChange(scrollbarElement.value)\n})\n\nconst sizes = computed(() => scrollbarVisibleContext.sizes.value)\n</script>\n\n<template>\n  <ScrollAreaScrollbarImpl\n    :ref=\"forwardRef\"\n    :is-horizontal=\"false\"\n    data-orientation=\"vertical\"\n    :style=\"{\n      top: 0,\n      right: rootContext.dir.value === 'ltr' ? 0 : undefined,\n      left: rootContext.dir.value === 'rtl' ? 0 : undefined,\n      bottom: 'var(--reka-scroll-area-corner-height)',\n      ['--reka-scroll-area-thumb-height' as any]: sizes ? `${getThumbSize(sizes)}px` : undefined,\n    }\"\n    @on-drag-scroll=\"scrollbarVisibleContext.onDragScroll($event.y)\"\n  >\n    <slot />\n  </ScrollAreaScrollbarImpl>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;AAQA,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0B,uCAAwC,EAAA;AAExE,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,gBAAA,KAAqB,gBAAiB,EAAA;AAE1E,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAiB,CAAA,KAAA;AACnB,QAAY,WAAA,CAAA,kBAAA,CAAmB,iBAAiB,KAAK,CAAA;AAAA,KACxD,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,MAAM,uBAAA,CAAwB,MAAM,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ScrollArea/ScrollAreaThumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaThumb.cjs","sources":["../../src/ScrollArea/ScrollAreaThumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ScrollAreaThumbProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref } from 'vue'\nimport { watchOnce } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\nimport { addUnlinkedScrollListener } from './utils'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\n\nconst props = defineProps<ScrollAreaThumbProps>()\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContextVisible = injectScrollAreaScrollbarVisibleContext()\n\nfunction handlePointerDown(event: MouseEvent) {\n  const thumb = event.target as HTMLElement\n  const thumbRect = thumb.getBoundingClientRect()\n  const x = event.clientX - thumbRect.left\n  const y = event.clientY - thumbRect.top\n  scrollbarContextVisible.handleThumbDown(event, { x, y })\n}\n\nfunction handlePointerUp(event: MouseEvent) {\n  scrollbarContextVisible.handleThumbUp(event)\n}\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\nconst removeUnlinkedScrollListenerRef = ref<() => void>()\nconst viewport = computed(() => rootContext.viewport.value)\n\nfunction handleScroll() {\n  if (!removeUnlinkedScrollListenerRef.value) {\n    const listener = addUnlinkedScrollListener(\n      viewport.value!,\n      scrollbarContextVisible.onThumbPositionChange,\n    )\n    removeUnlinkedScrollListenerRef.value = listener\n    scrollbarContextVisible.onThumbPositionChange()\n  }\n}\n\nconst sizes = computed(() => scrollbarContextVisible.sizes.value)\n\nwatchOnce(sizes, () => {\n  scrollbarContextVisible.onThumbChange(thumbElement.value!)\n  if (viewport.value) {\n    /**\n     * We only bind to native scroll event so we know when scroll starts and ends.\n     * When scroll starts we start a requestAnimationFrame loop that checks for\n     * changes to scroll position. That rAF loop triggers our thumb position change\n     * when relevant to avoid scroll-linked effects. We cancel the loop when scroll ends.\n     * https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects\n     */\n    scrollbarContextVisible.onThumbPositionChange()\n    viewport.value.addEventListener('scroll', handleScroll)\n  }\n})\n\nonUnmounted(() => {\n  viewport.value!.removeEventListener('scroll', handleScroll)\n  rootContext.viewport.value?.removeEventListener('scroll', handleScroll)\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :data-state=\"scrollbarContextVisible.hasThumb ? 'visible' : 'hidden'\"\n    :style=\"{\n      width: 'var(--reka-scroll-area-thumb-width)',\n      height: 'var(--reka-scroll-area-thumb-height)',\n    }\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    @pointerdown=\"handlePointerDown\"\n    @pointerup=\"handlePointerUp\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarVisibleContext","useForwardExpose","ref","computed","addUnlinkedScrollListener","watchOnce","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;AAeA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAcA,qDAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0BC,6EAAwC,EAAA;AAExE,IAAA,SAAS,kBAAkB,KAAmB,EAAA;AAC5C,MAAA,MAAM,QAAQ,KAAM,CAAA,MAAA;AACpB,MAAM,MAAA,SAAA,GAAY,MAAM,qBAAsB,EAAA;AAC9C,MAAM,MAAA,CAAA,GAAI,KAAM,CAAA,OAAA,GAAU,SAAU,CAAA,IAAA;AACpC,MAAM,MAAA,CAAA,GAAI,KAAM,CAAA,OAAA,GAAU,SAAU,CAAA,GAAA;AACpC,MAAA,uBAAA,CAAwB,eAAgB,CAAA,KAAA,EAAO,EAAE,CAAA,EAAG,GAAG,CAAA;AAAA;AAGzD,IAAA,SAAS,gBAAgB,KAAmB,EAAA;AAC1C,MAAA,uBAAA,CAAwB,cAAc,KAAK,CAAA;AAAA;AAG7C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiBC,wCAAiB,EAAA;AACtE,IAAA,MAAM,kCAAkCC,OAAgB,EAAA;AACxD,IAAA,MAAM,QAAW,GAAAC,YAAA,CAAS,MAAM,WAAA,CAAY,SAAS,KAAK,CAAA;AAE1D,IAAA,SAAS,YAAe,GAAA;AACtB,MAAI,IAAA,CAAC,gCAAgC,KAAO,EAAA;AAC1C,QAAA,MAAM,QAAW,GAAAC,0CAAA;AAAA,UACf,QAAS,CAAA,KAAA;AAAA,UACT,uBAAwB,CAAA;AAAA,SAC1B;AACA,QAAA,+BAAA,CAAgC,KAAQ,GAAA,QAAA;AACxC,QAAA,uBAAA,CAAwB,qBAAsB,EAAA;AAAA;AAChD;AAGF,IAAA,MAAM,KAAQ,GAAAD,YAAA,CAAS,MAAM,uBAAA,CAAwB,MAAM,KAAK,CAAA;AAEhE,IAAAE,cAAA,CAAU,OAAO,MAAM;AACrB,MAAwB,uBAAA,CAAA,aAAA,CAAc,aAAa,KAAM,CAAA;AACzD,MAAA,IAAI,SAAS,KAAO,EAAA;AAQlB,QAAA,uBAAA,CAAwB,qBAAsB,EAAA;AAC9C,QAAS,QAAA,CAAA,KAAA,CAAM,gBAAiB,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA;AACxD,KACD,CAAA;AAED,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAS,QAAA,CAAA,KAAA,CAAO,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAA;AAC1D,MAAA,WAAA,CAAY,QAAS,CAAA,KAAA,EAAO,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,KACvE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ScrollAreaThumb.cjs","sources":["../../src/ScrollArea/ScrollAreaThumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ScrollAreaThumbProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { watchOnce } from '@vueuse/core'\nimport { computed, onUnmounted, ref } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { addUnlinkedScrollListener } from './utils'\n\nconst props = defineProps<ScrollAreaThumbProps>()\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContextVisible = injectScrollAreaScrollbarVisibleContext()\n\nfunction handlePointerDown(event: MouseEvent) {\n  const thumb = event.target as HTMLElement\n  const thumbRect = thumb.getBoundingClientRect()\n  const x = event.clientX - thumbRect.left\n  const y = event.clientY - thumbRect.top\n  scrollbarContextVisible.handleThumbDown(event, { x, y })\n}\n\nfunction handlePointerUp(event: MouseEvent) {\n  scrollbarContextVisible.handleThumbUp(event)\n}\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\nconst removeUnlinkedScrollListenerRef = ref<() => void>()\nconst viewport = computed(() => rootContext.viewport.value)\n\nfunction handleScroll() {\n  if (!removeUnlinkedScrollListenerRef.value) {\n    const listener = addUnlinkedScrollListener(\n      viewport.value!,\n      scrollbarContextVisible.onThumbPositionChange,\n    )\n    removeUnlinkedScrollListenerRef.value = listener\n    scrollbarContextVisible.onThumbPositionChange()\n  }\n}\n\nconst sizes = computed(() => scrollbarContextVisible.sizes.value)\n\nwatchOnce(sizes, () => {\n  scrollbarContextVisible.onThumbChange(thumbElement.value!)\n  if (viewport.value) {\n    /**\n     * We only bind to native scroll event so we know when scroll starts and ends.\n     * When scroll starts we start a requestAnimationFrame loop that checks for\n     * changes to scroll position. That rAF loop triggers our thumb position change\n     * when relevant to avoid scroll-linked effects. We cancel the loop when scroll ends.\n     * https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects\n     */\n    scrollbarContextVisible.onThumbPositionChange()\n    viewport.value.addEventListener('scroll', handleScroll)\n  }\n})\n\nonUnmounted(() => {\n  viewport.value!.removeEventListener('scroll', handleScroll)\n  rootContext.viewport.value?.removeEventListener('scroll', handleScroll)\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :data-state=\"scrollbarContextVisible.hasThumb ? 'visible' : 'hidden'\"\n    :style=\"{\n      width: 'var(--reka-scroll-area-thumb-width)',\n      height: 'var(--reka-scroll-area-thumb-height)',\n    }\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    @pointerdown=\"handlePointerDown\"\n    @pointerup=\"handlePointerUp\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":["injectScrollAreaRootContext","injectScrollAreaScrollbarVisibleContext","useForwardExpose","ref","computed","addUnlinkedScrollListener","watchOnce","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;AAeA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAcA,qDAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0BC,6EAAwC,EAAA;AAExE,IAAA,SAAS,kBAAkB,KAAmB,EAAA;AAC5C,MAAA,MAAM,QAAQ,KAAM,CAAA,MAAA;AACpB,MAAM,MAAA,SAAA,GAAY,MAAM,qBAAsB,EAAA;AAC9C,MAAM,MAAA,CAAA,GAAI,KAAM,CAAA,OAAA,GAAU,SAAU,CAAA,IAAA;AACpC,MAAM,MAAA,CAAA,GAAI,KAAM,CAAA,OAAA,GAAU,SAAU,CAAA,GAAA;AACpC,MAAA,uBAAA,CAAwB,eAAgB,CAAA,KAAA,EAAO,EAAE,CAAA,EAAG,GAAG,CAAA;AAAA;AAGzD,IAAA,SAAS,gBAAgB,KAAmB,EAAA;AAC1C,MAAA,uBAAA,CAAwB,cAAc,KAAK,CAAA;AAAA;AAG7C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiBC,wCAAiB,EAAA;AACtE,IAAA,MAAM,kCAAkCC,OAAgB,EAAA;AACxD,IAAA,MAAM,QAAW,GAAAC,YAAA,CAAS,MAAM,WAAA,CAAY,SAAS,KAAK,CAAA;AAE1D,IAAA,SAAS,YAAe,GAAA;AACtB,MAAI,IAAA,CAAC,gCAAgC,KAAO,EAAA;AAC1C,QAAA,MAAM,QAAW,GAAAC,0CAAA;AAAA,UACf,QAAS,CAAA,KAAA;AAAA,UACT,uBAAwB,CAAA;AAAA,SAC1B;AACA,QAAA,+BAAA,CAAgC,KAAQ,GAAA,QAAA;AACxC,QAAA,uBAAA,CAAwB,qBAAsB,EAAA;AAAA;AAChD;AAGF,IAAA,MAAM,KAAQ,GAAAD,YAAA,CAAS,MAAM,uBAAA,CAAwB,MAAM,KAAK,CAAA;AAEhE,IAAAE,cAAA,CAAU,OAAO,MAAM;AACrB,MAAwB,uBAAA,CAAA,aAAA,CAAc,aAAa,KAAM,CAAA;AACzD,MAAA,IAAI,SAAS,KAAO,EAAA;AAQlB,QAAA,uBAAA,CAAwB,qBAAsB,EAAA;AAC9C,QAAS,QAAA,CAAA,KAAA,CAAM,gBAAiB,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA;AACxD,KACD,CAAA;AAED,IAAAC,eAAA,CAAY,MAAM;AAChB,MAAS,QAAA,CAAA,KAAA,CAAO,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAA;AAC1D,MAAA,WAAA,CAAY,QAAS,CAAA,KAAA,EAAO,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,KACvE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ScrollArea/ScrollAreaThumb.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, onUnmounted, openBlock, createBlock, unref, withCtx, renderSlot } from 'vue';
+import { defineComponent, ref, computed, onUnmounted, createBlock, openBlock, unref, withCtx, renderSlot } from 'vue';
 import { watchOnce } from '@vueuse/core';
 import { d as addUnlinkedScrollListener } from './utils.js';
 import { u as useForwardExpose } from '../shared/useForwardExpose.js';

package/dist/ScrollArea/ScrollAreaThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaThumb.js","sources":["../../src/ScrollArea/ScrollAreaThumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ScrollAreaThumbProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed, onUnmounted, ref } from 'vue'\nimport { watchOnce } from '@vueuse/core'\nimport { Primitive } from '@/Primitive'\nimport { addUnlinkedScrollListener } from './utils'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\n\nconst props = defineProps<ScrollAreaThumbProps>()\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContextVisible = injectScrollAreaScrollbarVisibleContext()\n\nfunction handlePointerDown(event: MouseEvent) {\n  const thumb = event.target as HTMLElement\n  const thumbRect = thumb.getBoundingClientRect()\n  const x = event.clientX - thumbRect.left\n  const y = event.clientY - thumbRect.top\n  scrollbarContextVisible.handleThumbDown(event, { x, y })\n}\n\nfunction handlePointerUp(event: MouseEvent) {\n  scrollbarContextVisible.handleThumbUp(event)\n}\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\nconst removeUnlinkedScrollListenerRef = ref<() => void>()\nconst viewport = computed(() => rootContext.viewport.value)\n\nfunction handleScroll() {\n  if (!removeUnlinkedScrollListenerRef.value) {\n    const listener = addUnlinkedScrollListener(\n      viewport.value!,\n      scrollbarContextVisible.onThumbPositionChange,\n    )\n    removeUnlinkedScrollListenerRef.value = listener\n    scrollbarContextVisible.onThumbPositionChange()\n  }\n}\n\nconst sizes = computed(() => scrollbarContextVisible.sizes.value)\n\nwatchOnce(sizes, () => {\n  scrollbarContextVisible.onThumbChange(thumbElement.value!)\n  if (viewport.value) {\n    /**\n     * We only bind to native scroll event so we know when scroll starts and ends.\n     * When scroll starts we start a requestAnimationFrame loop that checks for\n     * changes to scroll position. That rAF loop triggers our thumb position change\n     * when relevant to avoid scroll-linked effects. We cancel the loop when scroll ends.\n     * https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects\n     */\n    scrollbarContextVisible.onThumbPositionChange()\n    viewport.value.addEventListener('scroll', handleScroll)\n  }\n})\n\nonUnmounted(() => {\n  viewport.value!.removeEventListener('scroll', handleScroll)\n  rootContext.viewport.value?.removeEventListener('scroll', handleScroll)\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :data-state=\"scrollbarContextVisible.hasThumb ? 'visible' : 'hidden'\"\n    :style=\"{\n      width: 'var(--reka-scroll-area-thumb-width)',\n      height: 'var(--reka-scroll-area-thumb-height)',\n    }\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    @pointerdown=\"handlePointerDown\"\n    @pointerup=\"handlePointerUp\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAeA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0B,uCAAwC,EAAA;AAExE,IAAA,SAAS,kBAAkB,KAAmB,EAAA;AAC5C,MAAA,MAAM,QAAQ,KAAM,CAAA,MAAA;AACpB,MAAM,MAAA,SAAA,GAAY,MAAM,qBAAsB,EAAA;AAC9C,MAAM,MAAA,CAAA,GAAI,KAAM,CAAA,OAAA,GAAU,SAAU,CAAA,IAAA;AACpC,MAAM,MAAA,CAAA,GAAI,KAAM,CAAA,OAAA,GAAU,SAAU,CAAA,GAAA;AACpC,MAAA,uBAAA,CAAwB,eAAgB,CAAA,KAAA,EAAO,EAAE,CAAA,EAAG,GAAG,CAAA;AAAA;AAGzD,IAAA,SAAS,gBAAgB,KAAmB,EAAA;AAC1C,MAAA,uBAAA,CAAwB,cAAc,KAAK,CAAA;AAAA;AAG7C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiB,gBAAiB,EAAA;AACtE,IAAA,MAAM,kCAAkC,GAAgB,EAAA;AACxD,IAAA,MAAM,QAAW,GAAA,QAAA,CAAS,MAAM,WAAA,CAAY,SAAS,KAAK,CAAA;AAE1D,IAAA,SAAS,YAAe,GAAA;AACtB,MAAI,IAAA,CAAC,gCAAgC,KAAO,EAAA;AAC1C,QAAA,MAAM,QAAW,GAAA,yBAAA;AAAA,UACf,QAAS,CAAA,KAAA;AAAA,UACT,uBAAwB,CAAA;AAAA,SAC1B;AACA,QAAA,+BAAA,CAAgC,KAAQ,GAAA,QAAA;AACxC,QAAA,uBAAA,CAAwB,qBAAsB,EAAA;AAAA;AAChD;AAGF,IAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,MAAM,uBAAA,CAAwB,MAAM,KAAK,CAAA;AAEhE,IAAA,SAAA,CAAU,OAAO,MAAM;AACrB,MAAwB,uBAAA,CAAA,aAAA,CAAc,aAAa,KAAM,CAAA;AACzD,MAAA,IAAI,SAAS,KAAO,EAAA;AAQlB,QAAA,uBAAA,CAAwB,qBAAsB,EAAA;AAC9C,QAAS,QAAA,CAAA,KAAA,CAAM,gBAAiB,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA;AACxD,KACD,CAAA;AAED,IAAA,WAAA,CAAY,MAAM;AAChB,MAAS,QAAA,CAAA,KAAA,CAAO,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAA;AAC1D,MAAA,WAAA,CAAY,QAAS,CAAA,KAAA,EAAO,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,KACvE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ScrollAreaThumb.js","sources":["../../src/ScrollArea/ScrollAreaThumb.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { PrimitiveProps } from '@/Primitive'\nimport { useForwardExpose } from '@/shared'\n\nexport interface ScrollAreaThumbProps extends PrimitiveProps {}\n</script>\n\n<script setup lang=\"ts\">\nimport { Primitive } from '@/Primitive'\nimport { watchOnce } from '@vueuse/core'\nimport { computed, onUnmounted, ref } from 'vue'\nimport { injectScrollAreaRootContext } from './ScrollAreaRoot.vue'\nimport { injectScrollAreaScrollbarVisibleContext } from './ScrollAreaScrollbarVisible.vue'\nimport { addUnlinkedScrollListener } from './utils'\n\nconst props = defineProps<ScrollAreaThumbProps>()\n\nconst rootContext = injectScrollAreaRootContext()\nconst scrollbarContextVisible = injectScrollAreaScrollbarVisibleContext()\n\nfunction handlePointerDown(event: MouseEvent) {\n  const thumb = event.target as HTMLElement\n  const thumbRect = thumb.getBoundingClientRect()\n  const x = event.clientX - thumbRect.left\n  const y = event.clientY - thumbRect.top\n  scrollbarContextVisible.handleThumbDown(event, { x, y })\n}\n\nfunction handlePointerUp(event: MouseEvent) {\n  scrollbarContextVisible.handleThumbUp(event)\n}\n\nconst { forwardRef, currentElement: thumbElement } = useForwardExpose()\nconst removeUnlinkedScrollListenerRef = ref<() => void>()\nconst viewport = computed(() => rootContext.viewport.value)\n\nfunction handleScroll() {\n  if (!removeUnlinkedScrollListenerRef.value) {\n    const listener = addUnlinkedScrollListener(\n      viewport.value!,\n      scrollbarContextVisible.onThumbPositionChange,\n    )\n    removeUnlinkedScrollListenerRef.value = listener\n    scrollbarContextVisible.onThumbPositionChange()\n  }\n}\n\nconst sizes = computed(() => scrollbarContextVisible.sizes.value)\n\nwatchOnce(sizes, () => {\n  scrollbarContextVisible.onThumbChange(thumbElement.value!)\n  if (viewport.value) {\n    /**\n     * We only bind to native scroll event so we know when scroll starts and ends.\n     * When scroll starts we start a requestAnimationFrame loop that checks for\n     * changes to scroll position. That rAF loop triggers our thumb position change\n     * when relevant to avoid scroll-linked effects. We cancel the loop when scroll ends.\n     * https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects\n     */\n    scrollbarContextVisible.onThumbPositionChange()\n    viewport.value.addEventListener('scroll', handleScroll)\n  }\n})\n\nonUnmounted(() => {\n  viewport.value!.removeEventListener('scroll', handleScroll)\n  rootContext.viewport.value?.removeEventListener('scroll', handleScroll)\n})\n</script>\n\n<template>\n  <Primitive\n    :ref=\"forwardRef\"\n    :data-state=\"scrollbarContextVisible.hasThumb ? 'visible' : 'hidden'\"\n    :style=\"{\n      width: 'var(--reka-scroll-area-thumb-width)',\n      height: 'var(--reka-scroll-area-thumb-height)',\n    }\"\n    :as-child=\"props.asChild\"\n    :as=\"as\"\n    @pointerdown=\"handlePointerDown\"\n    @pointerup=\"handlePointerUp\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAeA,IAAA,MAAM,KAAQ,GAAA,OAAA;AAEd,IAAA,MAAM,cAAc,2BAA4B,EAAA;AAChD,IAAA,MAAM,0BAA0B,uCAAwC,EAAA;AAExE,IAAA,SAAS,kBAAkB,KAAmB,EAAA;AAC5C,MAAA,MAAM,QAAQ,KAAM,CAAA,MAAA;AACpB,MAAM,MAAA,SAAA,GAAY,MAAM,qBAAsB,EAAA;AAC9C,MAAM,MAAA,CAAA,GAAI,KAAM,CAAA,OAAA,GAAU,SAAU,CAAA,IAAA;AACpC,MAAM,MAAA,CAAA,GAAI,KAAM,CAAA,OAAA,GAAU,SAAU,CAAA,GAAA;AACpC,MAAA,uBAAA,CAAwB,eAAgB,CAAA,KAAA,EAAO,EAAE,CAAA,EAAG,GAAG,CAAA;AAAA;AAGzD,IAAA,SAAS,gBAAgB,KAAmB,EAAA;AAC1C,MAAA,uBAAA,CAAwB,cAAc,KAAK,CAAA;AAAA;AAG7C,IAAA,MAAM,EAAE,UAAA,EAAY,cAAgB,EAAA,YAAA,KAAiB,gBAAiB,EAAA;AACtE,IAAA,MAAM,kCAAkC,GAAgB,EAAA;AACxD,IAAA,MAAM,QAAW,GAAA,QAAA,CAAS,MAAM,WAAA,CAAY,SAAS,KAAK,CAAA;AAE1D,IAAA,SAAS,YAAe,GAAA;AACtB,MAAI,IAAA,CAAC,gCAAgC,KAAO,EAAA;AAC1C,QAAA,MAAM,QAAW,GAAA,yBAAA;AAAA,UACf,QAAS,CAAA,KAAA;AAAA,UACT,uBAAwB,CAAA;AAAA,SAC1B;AACA,QAAA,+BAAA,CAAgC,KAAQ,GAAA,QAAA;AACxC,QAAA,uBAAA,CAAwB,qBAAsB,EAAA;AAAA;AAChD;AAGF,IAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,MAAM,uBAAA,CAAwB,MAAM,KAAK,CAAA;AAEhE,IAAA,SAAA,CAAU,OAAO,MAAM;AACrB,MAAwB,uBAAA,CAAA,aAAA,CAAc,aAAa,KAAM,CAAA;AACzD,MAAA,IAAI,SAAS,KAAO,EAAA;AAQlB,QAAA,uBAAA,CAAwB,qBAAsB,EAAA;AAC9C,QAAS,QAAA,CAAA,KAAA,CAAM,gBAAiB,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA;AACxD,KACD,CAAA;AAED,IAAA,WAAA,CAAY,MAAM;AAChB,MAAS,QAAA,CAAA,KAAA,CAAO,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAA;AAC1D,MAAA,WAAA,CAAY,QAAS,CAAA,KAAA,EAAO,mBAAoB,CAAA,QAAA,EAAU,YAAY,CAAA;AAAA,KACvE,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/ScrollArea/ScrollAreaViewport.cjs

@@ -2,9 +2,9 @@
 
 const vue = require('vue');
 const shared_useNonce = require('../shared/useNonce.cjs');
-const ScrollArea_ScrollAreaRoot = require('./ScrollAreaRoot.cjs');
 const shared_useForwardExpose = require('../shared/useForwardExpose.cjs');
 const Primitive_Primitive = require('../Primitive/Primitive.cjs');
+const ScrollArea_ScrollAreaRoot = require('./ScrollAreaRoot.cjs');
 
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -62,7 +62,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                * When horizontal scrollbar is NOT visible: this element's width should
                * be constrained by the parent container to enable `text-overflow: ellipsis`
                */
-              minWidth: vue.unref(rootContext).scrollbarXEnabled.value ? "fit-content" : undefined
+              minWidth: vue.unref(rootContext).scrollbarXEnabled.value ? "fit-content" : void 0
             }),
             "as-child": props.asChild,
             as: _ctx.as

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, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, unref, createVNode, normalizeStyle, withCtx, renderSlot, createTextVNode } from 'vue';
+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({
   ...{
@@ -60,7 +60,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                * When horizontal scrollbar is NOT visible: this element's width should
                * be constrained by the parent container to enable `text-overflow: ellipsis`
                */
-              minWidth: unref(rootContext).scrollbarXEnabled.value ? "fit-content" : undefined
+              minWidth: unref(rootContext).scrollbarXEnabled.value ? "fit-content" : void 0
             }),
             "as-child": props.asChild,
             as: _ctx.as

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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"}