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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"ScrollAreaScrollbarVisible.cjs","names":["useDirection","useScrollAreaContext","getThumbRatio","getScrollPositionFromPointer","ScrollAreaScrollbarX","getThumbOffsetFromScroll","ScrollAreaScrollbarY"],"sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarVisible.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { useDirection } from '../../../core';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport {\n  ScrollAreaScrollbarAxisPrivateProps,\n  ScrollAreaScrollbarAxisProps,\n  Sizes,\n} from '../ScrollArea.types';\nimport { getScrollPositionFromPointer, getThumbOffsetFromScroll, getThumbRatio } from '../utils';\nimport { ScrollAreaScrollbarX } from './ScrollbarX';\nimport { ScrollAreaScrollbarY } from './ScrollbarY';\n\nexport interface ScrollAreaScrollbarVisibleProps extends Omit<\n  ScrollAreaScrollbarAxisProps,\n  keyof ScrollAreaScrollbarAxisPrivateProps\n> {\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport function ScrollAreaScrollbarVisible(props: ScrollAreaScrollbarVisibleProps) {\n  const { orientation = 'vertical', ...scrollbarProps } = props;\n  const { dir } = useDirection();\n  const context = useScrollAreaContext();\n  const thumbRef = useRef<HTMLDivElement | null>(null);\n  const pointerOffsetRef = useRef(0);\n  const [sizes, setSizes] = useState<Sizes>({\n    content: 0,\n    viewport: 0,\n    scrollbar: { size: 0, paddingStart: 0, paddingEnd: 0 },\n  });\n\n  const thumbRatio = getThumbRatio(sizes.viewport, sizes.content);\n\n  const commonProps: Omit<\n    ScrollAreaScrollbarAxisPrivateProps,\n    'onThumbPositionChange' | 'onDragScroll' | 'onWheelScroll'\n  > = {\n    ...scrollbarProps,\n    sizes,\n    onSizesChange: setSizes,\n    hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),\n    onThumbChange: (thumb) => {\n      thumbRef.current = thumb;\n    },\n    onThumbPointerUp: () => {\n      pointerOffsetRef.current = 0;\n    },\n    onThumbPointerDown: (pointerPos) => {\n      pointerOffsetRef.current = pointerPos;\n    },\n  };\n\n  const getScrollPosition = (pointerPos: number, direction?: 'ltr' | 'rtl') =>\n    getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, direction);\n\n  if (orientation === 'horizontal') {\n    return (\n      <ScrollAreaScrollbarX\n        {...commonProps}\n        onThumbPositionChange={() => {\n          if (context.viewport && thumbRef.current) {\n            const scrollPos = context.viewport.scrollLeft;\n            const offset = getThumbOffsetFromScroll(scrollPos, sizes, dir);\n            thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;\n          }\n        }}\n        onWheelScroll={(scrollPos) => {\n          if (context.viewport) {\n            context.viewport.scrollLeft = scrollPos;\n          }\n        }}\n        onDragScroll={(pointerPos) => {\n          if (context.viewport) {\n            context.viewport.scrollLeft = getScrollPosition(pointerPos, dir);\n          }\n        }}\n      />\n    );\n  }\n\n  if (orientation === 'vertical') {\n    return (\n      <ScrollAreaScrollbarY\n        {...commonProps}\n        onThumbPositionChange={() => {\n          if (context.viewport && thumbRef.current) {\n            const scrollPos = context.viewport.scrollTop;\n            const offset = getThumbOffsetFromScroll(scrollPos, sizes);\n            if (sizes.scrollbar.size === 0) {\n              thumbRef.current.style.setProperty('--thumb-opacity', '0');\n            } else {\n              thumbRef.current.style.setProperty('--thumb-opacity', '1');\n            }\n            thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;\n          }\n        }}\n        onWheelScroll={(scrollPos) => {\n          if (context.viewport) {\n            context.viewport.scrollTop = scrollPos;\n          }\n        }}\n        onDragScroll={(pointerPos) => {\n          if (context.viewport) {\n            context.viewport.scrollTop = getScrollPosition(pointerPos);\n          }\n        }}\n      />\n    );\n  }\n\n  return null;\n}\n\nScrollAreaScrollbarVisible.displayName = '@mantine/core/ScrollAreaScrollbarVisible';\n"],"mappings":";;;;;;;;;;;;AAmBA,SAAgB,2BAA2B,OAAwC;CACjF,MAAM,EAAE,cAAc,YAAY,GAAG,mBAAmB;CACxD,MAAM,EAAE,QAAQA,0BAAAA,cAAc;CAC9B,MAAM,UAAUC,2BAAAA,sBAAsB;CACtC,MAAM,YAAA,GAAA,MAAA,QAAyC,KAAK;CACpD,MAAM,oBAAA,GAAA,MAAA,QAA0B,EAAE;CAClC,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAA4B;EACxC,SAAS;EACT,UAAU;EACV,WAAW;GAAE,MAAM;GAAG,cAAc;GAAG,YAAY;GAAG;EACvD,CAAC;CAEF,MAAM,aAAaC,wBAAAA,cAAc,MAAM,UAAU,MAAM,QAAQ;CAE/D,MAAM,cAGF;EACF,GAAG;EACH;EACA,eAAe;EACf,UAAU,QAAQ,aAAa,KAAK,aAAa,EAAE;EACnD,gBAAgB,UAAU;AACxB,YAAS,UAAU;;EAErB,wBAAwB;AACtB,oBAAiB,UAAU;;EAE7B,qBAAqB,eAAe;AAClC,oBAAiB,UAAU;;EAE9B;CAED,MAAM,qBAAqB,YAAoB,cAC7CC,yCAAAA,6BAA6B,YAAY,iBAAiB,SAAS,OAAO,UAAU;AAEtF,KAAI,gBAAgB,aAClB,QACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,sBAAD;EACE,GAAI;EACJ,6BAA6B;AAC3B,OAAI,QAAQ,YAAY,SAAS,SAAS;IACxC,MAAM,YAAY,QAAQ,SAAS;IACnC,MAAM,SAASC,qCAAAA,yBAAyB,WAAW,OAAO,IAAI;AAC9D,aAAS,QAAQ,MAAM,YAAY,eAAe,OAAO;;;EAG7D,gBAAgB,cAAc;AAC5B,OAAI,QAAQ,SACV,SAAQ,SAAS,aAAa;;EAGlC,eAAe,eAAe;AAC5B,OAAI,QAAQ,SACV,SAAQ,SAAS,aAAa,kBAAkB,YAAY,IAAI;;EAGpE,CAAA;AAIN,KAAI,gBAAgB,WAClB,QACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,sBAAD;EACE,GAAI;EACJ,6BAA6B;AAC3B,OAAI,QAAQ,YAAY,SAAS,SAAS;IACxC,MAAM,YAAY,QAAQ,SAAS;IACnC,MAAM,SAASD,qCAAAA,yBAAyB,WAAW,MAAM;AACzD,QAAI,MAAM,UAAU,SAAS,EAC3B,UAAS,QAAQ,MAAM,YAAY,mBAAmB,IAAI;QAE1D,UAAS,QAAQ,MAAM,YAAY,mBAAmB,IAAI;AAE5D,aAAS,QAAQ,MAAM,YAAY,kBAAkB,OAAO;;;EAGhE,gBAAgB,cAAc;AAC5B,OAAI,QAAQ,SACV,SAAQ,SAAS,YAAY;;EAGjC,eAAe,eAAe;AAC5B,OAAI,QAAQ,SACV,SAAQ,SAAS,YAAY,kBAAkB,WAAW;;EAG9D,CAAA;AAIN,QAAO;;AAGT,2BAA2B,cAAc"}