@mantine/core/cjs/components/ScrollArea/ScrollAreaScrollbar/ScrollbarY.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"ScrollbarY.cjs","names":["useScrollAreaContext","Scrollbar","getThumbSize","isScrollingWithinScrollbarBounds","toInt"],"sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/ScrollbarY.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { ScrollAreaScrollbarAxisProps } from '../ScrollArea.types';\nimport { getThumbSize, isScrollingWithinScrollbarBounds, toInt } from '../utils';\nimport { Scrollbar } from './Scrollbar';\n\nexport function ScrollAreaScrollbarY(props: ScrollAreaScrollbarAxisProps) {\n  const { sizes, onSizesChange, style, ref: forwardedRef, ...others } = props;\n  const context = useScrollAreaContext();\n  const [computedStyle, setComputedStyle] = useState<CSSStyleDeclaration>();\n  const ref = useRef<HTMLDivElement>(null);\n  const composeRefs = useMergedRef(forwardedRef, ref, context.onScrollbarYChange);\n\n  useEffect(() => {\n    if (ref.current) {\n      setComputedStyle(window.getComputedStyle(ref.current));\n    }\n  }, []);\n\n  return (\n    <Scrollbar\n      {...others}\n      data-orientation=\"vertical\"\n      ref={composeRefs}\n      sizes={sizes}\n      style={{\n        ['--sa-thumb-height' as any]: `${getThumbSize(sizes)}px`,\n        ...style,\n      }}\n      onThumbPointerDown={(pointerPos) => props.onThumbPointerDown(pointerPos.y)}\n      onDragScroll={(pointerPos) => props.onDragScroll(pointerPos.y)}\n      onWheelScroll={(event, maxScrollPos) => {\n        if (context.viewport) {\n          const scrollPos = context.viewport.scrollTop + event.deltaY;\n          props.onWheelScroll(scrollPos);\n          if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {\n            event.preventDefault();\n          }\n        }\n      }}\n      onResize={() => {\n        if (ref.current && context.viewport && computedStyle) {\n          onSizesChange({\n            content: context.viewport.scrollHeight,\n            viewport: context.viewport.offsetHeight,\n            scrollbar: {\n              size: ref.current.clientHeight,\n              paddingStart: toInt(computedStyle.paddingTop),\n              paddingEnd: toInt(computedStyle.paddingBottom),\n            },\n          });\n        }\n      }}\n    />\n  );\n}\n\nScrollAreaScrollbarY.displayName = '@mantine/core/ScrollAreaScrollbarY';\n"],"mappings":";;;;;;;;;;;AAOA,SAAgB,qBAAqB,OAAqC;CACxE,MAAM,EAAE,OAAO,eAAe,OAAO,KAAK,cAAc,GAAG,WAAW;CACtE,MAAM,UAAUA,2BAAAA,sBAAsB;CACtC,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,WAAmD;CACzE,MAAM,OAAA,GAAA,MAAA,QAA6B,KAAK;CACxC,MAAM,eAAA,GAAA,eAAA,cAA2B,cAAc,KAAK,QAAQ,mBAAmB;AAE/E,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,IAAI,QACN,kBAAiB,OAAO,iBAAiB,IAAI,QAAQ,CAAC;IAEvD,EAAE,CAAC;AAEN,QACE,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;EACE,GAAI;EACJ,oBAAiB;EACjB,KAAK;EACE;EACP,OAAO;IACJ,sBAA6B,GAAGC,uBAAAA,aAAa,MAAM,CAAC;GACrD,GAAG;GACJ;EACD,qBAAqB,eAAe,MAAM,mBAAmB,WAAW,EAAE;EAC1E,eAAe,eAAe,MAAM,aAAa,WAAW,EAAE;EAC9D,gBAAgB,OAAO,iBAAiB;AACtC,OAAI,QAAQ,UAAU;IACpB,MAAM,YAAY,QAAQ,SAAS,YAAY,MAAM;AACrD,UAAM,cAAc,UAAU;AAC9B,QAAIC,6CAAAA,iCAAiC,WAAW,aAAa,CAC3D,OAAM,gBAAgB;;;EAI5B,gBAAgB;AACd,OAAI,IAAI,WAAW,QAAQ,YAAY,cACrC,eAAc;IACZ,SAAS,QAAQ,SAAS;IAC1B,UAAU,QAAQ,SAAS;IAC3B,WAAW;KACT,MAAM,IAAI,QAAQ;KAClB,cAAcC,eAAAA,MAAM,cAAc,WAAW;KAC7C,YAAYA,eAAAA,MAAM,cAAc,cAAc;KAC/C;IACF,CAAC;;EAGN,CAAA;;AAIN,qBAAqB,cAAc"}