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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Scrollbar.cjs","names":["useScrollAreaContext","ScrollbarProvider","composeEventHandlers"],"sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/Scrollbar.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { useCallbackRef, useDebouncedCallback, useMergedRef } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { Sizes } from '../ScrollArea.types';\nimport { useResizeObserver } from '../use-resize-observer';\nimport { composeEventHandlers } from '../utils';\nimport { ScrollbarContextValue, ScrollbarProvider } from './Scrollbar.context';\n\nexport interface ScrollbarPrivateProps {\n  sizes: Sizes;\n  hasThumb: boolean;\n  onThumbChange: ScrollbarContextValue['onThumbChange'];\n  onThumbPointerUp: ScrollbarContextValue['onThumbPointerUp'];\n  onThumbPointerDown: ScrollbarContextValue['onThumbPointerDown'];\n  onThumbPositionChange: ScrollbarContextValue['onThumbPositionChange'];\n  onWheelScroll: (event: WheelEvent, maxScrollPos: number) => void;\n  onDragScroll: (pointerPos: { x: number; y: number }) => void;\n  onResize: () => void;\n}\n\ninterface ScrollbarProps\n  extends ScrollbarPrivateProps, Omit<React.ComponentProps<'div'>, 'onResize'> {}\n\nexport function Scrollbar(props: ScrollbarProps) {\n  const {\n    sizes,\n    hasThumb,\n    onThumbChange,\n    onThumbPointerUp,\n    onThumbPointerDown,\n    onThumbPositionChange,\n    onDragScroll,\n    onWheelScroll,\n    onResize,\n    ref,\n    ...scrollbarProps\n  } = props;\n  const context = useScrollAreaContext();\n  const [scrollbar, setScrollbar] = useState<HTMLDivElement | null>(null);\n  const composeRefs = useMergedRef(ref, (node) => setScrollbar(node));\n  const rectRef = useRef<DOMRect | null>(null);\n  const prevWebkitUserSelectRef = useRef<string>('');\n  const { viewport } = context;\n  const maxScrollPos = sizes.content - sizes.viewport;\n  const handleWheelScroll = useEffectEvent(onWheelScroll);\n  const handleThumbPositionChange = useCallbackRef(onThumbPositionChange);\n  const handleResize = useDebouncedCallback(onResize, 10);\n\n  const handleDragScroll = (event: React.PointerEvent<HTMLElement>) => {\n    if (rectRef.current) {\n      const x = event.clientX - rectRef.current.left;\n      const y = event.clientY - rectRef.current.top;\n      onDragScroll({ x, y });\n    }\n  };\n\n  useEffect(() => {\n    const handleWheel = (event: WheelEvent) => {\n      const element = event.target as HTMLElement;\n      const isScrollbarWheel = scrollbar?.contains(element);\n      if (isScrollbarWheel) {\n        handleWheelScroll(event, maxScrollPos);\n      }\n    };\n    document.addEventListener('wheel', handleWheel, { passive: false });\n    return () => document.removeEventListener('wheel', handleWheel, { passive: false } as any);\n  }, [viewport, scrollbar, maxScrollPos]);\n\n  useEffect(handleThumbPositionChange, [sizes, handleThumbPositionChange]);\n\n  useResizeObserver(scrollbar, handleResize);\n  useResizeObserver(context.content, handleResize);\n\n  return (\n    <ScrollbarProvider\n      value={{\n        scrollbar,\n        hasThumb,\n        onThumbChange: useCallbackRef(onThumbChange),\n        onThumbPointerUp: useCallbackRef(onThumbPointerUp),\n        onThumbPositionChange: handleThumbPositionChange,\n        onThumbPointerDown: useCallbackRef(onThumbPointerDown),\n      }}\n    >\n      <div\n        {...scrollbarProps}\n        ref={composeRefs}\n        data-mantine-scrollbar\n        style={{ position: 'absolute', ...scrollbarProps.style }}\n        onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {\n          event.preventDefault();\n\n          const mainPointer = 0;\n          if (event.button === mainPointer) {\n            const element = event.target as HTMLElement;\n            element.setPointerCapture(event.pointerId);\n            rectRef.current = scrollbar!.getBoundingClientRect();\n            /* eslint-disable @typescript-eslint/no-deprecated */\n            prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;\n            document.body.style.webkitUserSelect = 'none';\n            handleDragScroll(event);\n          }\n        })}\n        onPointerMove={composeEventHandlers(props.onPointerMove, handleDragScroll)}\n        onPointerUp={composeEventHandlers(props.onPointerUp, (event) => {\n          const element = event.target as HTMLElement;\n          if (element.hasPointerCapture(event.pointerId)) {\n            event.preventDefault();\n            element.releasePointerCapture(event.pointerId);\n          }\n        })}\n        onLostPointerCapture={() => {\n          document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;\n          /* eslint-enable @typescript-eslint/no-deprecated */\n          rectRef.current = null;\n        }}\n      />\n    </ScrollbarProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;AAuBA,SAAgB,UAAU,OAAuB;CAC/C,MAAM,EACJ,OACA,UACA,eACA,kBACA,oBACA,uBACA,cACA,eACA,UACA,KACA,GAAG,mBACD;CACJ,MAAM,UAAUA,2BAAAA,sBAAsB;CACtC,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAgD,KAAK;CACvE,MAAM,eAAA,GAAA,eAAA,cAA2B,MAAM,SAAS,aAAa,KAAK,CAAC;CACnE,MAAM,WAAA,GAAA,MAAA,QAAiC,KAAK;CAC5C,MAAM,2BAAA,GAAA,MAAA,QAAyC,GAAG;CAClD,MAAM,EAAE,aAAa;CACrB,MAAM,eAAe,MAAM,UAAU,MAAM;CAC3C,MAAM,qBAAA,GAAA,MAAA,gBAAmC,cAAc;CACvD,MAAM,6BAAA,GAAA,eAAA,gBAA2C,sBAAsB;CACvE,MAAM,gBAAA,GAAA,eAAA,sBAAoC,UAAU,GAAG;CAEvD,MAAM,oBAAoB,UAA2C;AACnE,MAAI,QAAQ,QAGV,cAAa;GAAE,GAFL,MAAM,UAAU,QAAQ,QAAQ;GAExB,GADR,MAAM,UAAU,QAAQ,QAAQ;GACrB,CAAC;;AAI1B,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,eAAe,UAAsB;GACzC,MAAM,UAAU,MAAM;AAEtB,OADyB,WAAW,SAAS,QAAQ,CAEnD,mBAAkB,OAAO,aAAa;;AAG1C,WAAS,iBAAiB,SAAS,aAAa,EAAE,SAAS,OAAO,CAAC;AACnE,eAAa,SAAS,oBAAoB,SAAS,aAAa,EAAE,SAAS,OAAO,CAAQ;IACzF;EAAC;EAAU;EAAW;EAAa,CAAC;AAEvC,EAAA,GAAA,MAAA,WAAU,2BAA2B,CAAC,OAAO,0BAA0B,CAAC;AAExE,6BAAA,kBAAkB,WAAW,aAAa;AAC1C,6BAAA,kBAAkB,QAAQ,SAAS,aAAa;AAEhD,QACE,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,mBAAD;EACE,OAAO;GACL;GACA;GACA,gBAAA,GAAA,eAAA,gBAA8B,cAAc;GAC5C,mBAAA,GAAA,eAAA,gBAAiC,iBAAiB;GAClD,uBAAuB;GACvB,qBAAA,GAAA,eAAA,gBAAmC,mBAAmB;GACvD;YAED,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,0BAAA;GACA,OAAO;IAAE,UAAU;IAAY,GAAG,eAAe;IAAO;GACxD,eAAeC,+BAAAA,qBAAqB,MAAM,gBAAgB,UAAU;AAClE,UAAM,gBAAgB;AAGtB,QAAI,MAAM,WADU,GACc;AAChB,WAAM,OACd,kBAAkB,MAAM,UAAU;AAC1C,aAAQ,UAAU,UAAW,uBAAuB;AAEpD,6BAAwB,UAAU,SAAS,KAAK,MAAM;AACtD,cAAS,KAAK,MAAM,mBAAmB;AACvC,sBAAiB,MAAM;;KAEzB;GACF,eAAeA,+BAAAA,qBAAqB,MAAM,eAAe,iBAAiB;GAC1E,aAAaA,+BAAAA,qBAAqB,MAAM,cAAc,UAAU;IAC9D,MAAM,UAAU,MAAM;AACtB,QAAI,QAAQ,kBAAkB,MAAM,UAAU,EAAE;AAC9C,WAAM,gBAAgB;AACtB,aAAQ,sBAAsB,MAAM,UAAU;;KAEhD;GACF,4BAA4B;AAC1B,aAAS,KAAK,MAAM,mBAAmB,wBAAwB;AAE/D,YAAQ,UAAU;;GAEpB,CAAA;EACgB,CAAA"}