@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, setScrollbar);\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            /* oxlint-disable typescript/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          /* oxlint-enable typescript/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,qBAAqB;CACrC,MAAM,CAAC,WAAW,iBAAA,GAAA,MAAA,UAAgD,IAAI;CACtE,MAAM,eAAA,GAAA,eAAA,cAA2B,KAAK,YAAY;CAClD,MAAM,WAAA,GAAA,MAAA,QAAiC,IAAI;CAC3C,MAAM,2BAAA,GAAA,MAAA,QAAyC,EAAE;CACjD,MAAM,EAAE,aAAa;CACrB,MAAM,eAAe,MAAM,UAAU,MAAM;CAC3C,MAAM,qBAAA,GAAA,MAAA,gBAAmC,aAAa;CACtD,MAAM,6BAAA,GAAA,eAAA,gBAA2C,qBAAqB;CACtE,MAAM,gBAAA,GAAA,eAAA,sBAAoC,UAAU,EAAE;CAEtD,MAAM,oBAAoB,UAA2C;EACnE,IAAI,QAAQ,SAGV,aAAa;GAAE,GAFL,MAAM,UAAU,QAAQ,QAAQ;GAExB,GADR,MAAM,UAAU,QAAQ,QAAQ;EACtB,CAAC;CAEzB;CAEA,CAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,eAAe,UAAsB;GACzC,MAAM,UAAU,MAAM;GAEtB,IADyB,WAAW,SAAS,OAAO,GAElD,kBAAkB,OAAO,YAAY;EAEzC;EACA,SAAS,iBAAiB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAC;EAClE,aAAa,SAAS,oBAAoB,SAAS,aAAa,EAAE,SAAS,MAAM,CAAQ;CAC3F,GAAG;EAAC;EAAU;EAAW;CAAY,CAAC;CAEtC,CAAA,GAAA,MAAA,WAAU,2BAA2B,CAAC,OAAO,yBAAyB,CAAC;CAEvE,4BAAA,kBAAkB,WAAW,YAAY;CACzC,4BAAA,kBAAkB,QAAQ,SAAS,YAAY;CAE/C,OACE,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,mBAAD;EACE,OAAO;GACL;GACA;GACA,gBAAA,GAAA,eAAA,gBAA8B,aAAa;GAC3C,mBAAA,GAAA,eAAA,gBAAiC,gBAAgB;GACjD,uBAAuB;GACvB,qBAAA,GAAA,eAAA,gBAAmC,kBAAkB;EACvD;YAEA,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,GAAI;GACJ,KAAK;GACL,0BAAA;GACA,OAAO;IAAE,UAAU;IAAY,GAAG,eAAe;GAAM;GACvD,eAAeC,+BAAAA,qBAAqB,MAAM,gBAAgB,UAAU;IAClE,MAAM,eAAe;IAGrB,IAAI,MAAM,WAAW,GAAa;KAEhC,MADsB,OACd,kBAAkB,MAAM,SAAS;KACzC,QAAQ,UAAU,UAAW,sBAAsB;KAEnD,wBAAwB,UAAU,SAAS,KAAK,MAAM;KACtD,SAAS,KAAK,MAAM,mBAAmB;KACvC,iBAAiB,KAAK;IACxB;GACF,CAAC;GACD,eAAeA,+BAAAA,qBAAqB,MAAM,eAAe,gBAAgB;GACzE,aAAaA,+BAAAA,qBAAqB,MAAM,cAAc,UAAU;IAC9D,MAAM,UAAU,MAAM;IACtB,IAAI,QAAQ,kBAAkB,MAAM,SAAS,GAAG;KAC9C,MAAM,eAAe;KACrB,QAAQ,sBAAsB,MAAM,SAAS;IAC/C;GACF,CAAC;GACD,4BAA4B;IAC1B,SAAS,KAAK,MAAM,mBAAmB,wBAAwB;IAE/D,QAAQ,UAAU;GACpB;EACD,CAAA;CACgB,CAAA;AAEvB"}