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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"ScrollbarX.cjs","names":["useScrollAreaContext","Scrollbar","getThumbSize","isScrollingWithinScrollbarBounds","toInt"],"sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/ScrollbarX.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 const ScrollAreaScrollbarX = (props: ScrollAreaScrollbarAxisProps) => {\n  const { sizes, onSizesChange, style, ref: forwardedRef, ...others } = props;\n  const ctx = useScrollAreaContext();\n  const [computedStyle, setComputedStyle] = useState<CSSStyleDeclaration>();\n  const ref = useRef<HTMLDivElement>(null);\n  const composeRefs = useMergedRef(forwardedRef, ref, ctx.onScrollbarXChange);\n\n  useEffect(() => {\n    if (ref.current) {\n      setComputedStyle(getComputedStyle(ref.current));\n    }\n  }, [ref]);\n\n  return (\n    <Scrollbar\n      data-orientation=\"horizontal\"\n      {...others}\n      ref={composeRefs}\n      sizes={sizes}\n      style={{\n        ...style,\n        ['--sa-thumb-width' as any]: `${getThumbSize(sizes)}px`,\n      }}\n      onThumbPointerDown={(pointerPos) => props.onThumbPointerDown(pointerPos.x)}\n      onDragScroll={(pointerPos) => props.onDragScroll(pointerPos.x)}\n      onWheelScroll={(event, maxScrollPos) => {\n        if (ctx.viewport) {\n          const scrollPos = ctx.viewport.scrollLeft + event.deltaX;\n          props.onWheelScroll(scrollPos);\n          if (isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) {\n            event.preventDefault();\n          }\n        }\n      }}\n      onResize={() => {\n        if (ref.current && ctx.viewport && computedStyle) {\n          onSizesChange({\n            content: ctx.viewport.scrollWidth,\n            viewport: ctx.viewport.offsetWidth,\n            scrollbar: {\n              size: ref.current.clientWidth,\n              paddingStart: toInt(computedStyle.paddingLeft),\n              paddingEnd: toInt(computedStyle.paddingRight),\n            },\n          });\n        }\n      }}\n    />\n  );\n};\n\nScrollAreaScrollbarX.displayName = '@mantine/core/ScrollAreaScrollbarX';\n"],"mappings":";;;;;;;;;;;AAOA,MAAa,wBAAwB,UAAwC;CAC3E,MAAM,EAAE,OAAO,eAAe,OAAO,KAAK,cAAc,GAAG,WAAW;CACtE,MAAM,MAAMA,2BAAAA,qBAAqB;CACjC,MAAM,CAAC,eAAe,qBAAA,GAAA,MAAA,UAAkD;CACxE,MAAM,OAAA,GAAA,MAAA,QAA6B,IAAI;CACvC,MAAM,eAAA,GAAA,eAAA,cAA2B,cAAc,KAAK,IAAI,kBAAkB;CAE1E,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,IAAI,SACN,iBAAiB,iBAAiB,IAAI,OAAO,CAAC;CAElD,GAAG,CAAC,GAAG,CAAC;CAER,OACE,iBAAA,GAAA,kBAAA,KAACC,kBAAAA,WAAD;EACE,oBAAiB;EACjB,GAAI;EACJ,KAAK;EACE;EACP,OAAO;GACL,GAAG;IACF,qBAA4B,GAAGC,uBAAAA,aAAa,KAAK,EAAE;EACtD;EACA,qBAAqB,eAAe,MAAM,mBAAmB,WAAW,CAAC;EACzE,eAAe,eAAe,MAAM,aAAa,WAAW,CAAC;EAC7D,gBAAgB,OAAO,iBAAiB;GACtC,IAAI,IAAI,UAAU;IAChB,MAAM,YAAY,IAAI,SAAS,aAAa,MAAM;IAClD,MAAM,cAAc,SAAS;IAC7B,IAAIC,6CAAAA,iCAAiC,WAAW,YAAY,GAC1D,MAAM,eAAe;GAEzB;EACF;EACA,gBAAgB;GACd,IAAI,IAAI,WAAW,IAAI,YAAY,eACjC,cAAc;IACZ,SAAS,IAAI,SAAS;IACtB,UAAU,IAAI,SAAS;IACvB,WAAW;KACT,MAAM,IAAI,QAAQ;KAClB,cAAcC,eAAAA,MAAM,cAAc,WAAW;KAC7C,YAAYA,eAAAA,MAAM,cAAc,YAAY;IAC9C;GACF,CAAC;EAEL;CACD,CAAA;AAEL;AAEA,qBAAqB,cAAc"}