@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,aAAa;CAC7B,MAAM,UAAUC,2BAAAA,qBAAqB;CACrC,MAAM,YAAA,GAAA,MAAA,QAAyC,IAAI;CACnD,MAAM,oBAAA,GAAA,MAAA,QAA0B,CAAC;CACjC,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAA4B;EACxC,SAAS;EACT,UAAU;EACV,WAAW;GAAE,MAAM;GAAG,cAAc;GAAG,YAAY;EAAE;CACvD,CAAC;CAED,MAAM,aAAaC,wBAAAA,cAAc,MAAM,UAAU,MAAM,OAAO;CAE9D,MAAM,cAGF;EACF,GAAG;EACH;EACA,eAAe;EACf,UAAU,QAAQ,aAAa,KAAK,aAAa,CAAC;EAClD,gBAAgB,UAAU;GACxB,SAAS,UAAU;EACrB;EACA,wBAAwB;GACtB,iBAAiB,UAAU;EAC7B;EACA,qBAAqB,eAAe;GAClC,iBAAiB,UAAU;EAC7B;CACF;CAEA,MAAM,qBAAqB,YAAoB,cAC7CC,yCAAAA,6BAA6B,YAAY,iBAAiB,SAAS,OAAO,SAAS;CAErF,IAAI,gBAAgB,cAClB,OACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,sBAAD;EACE,GAAI;EACJ,6BAA6B;GAC3B,IAAI,QAAQ,YAAY,SAAS,SAAS;IACxC,MAAM,YAAY,QAAQ,SAAS;IACnC,MAAM,SAASC,qCAAAA,yBAAyB,WAAW,OAAO,GAAG;IAC7D,SAAS,QAAQ,MAAM,YAAY,eAAe,OAAO;GAC3D;EACF;EACA,gBAAgB,cAAc;GAC5B,IAAI,QAAQ,UACV,QAAQ,SAAS,aAAa;EAElC;EACA,eAAe,eAAe;GAC5B,IAAI,QAAQ,UACV,QAAQ,SAAS,aAAa,kBAAkB,YAAY,GAAG;EAEnE;CACD,CAAA;CAIL,IAAI,gBAAgB,YAClB,OACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,sBAAD;EACE,GAAI;EACJ,6BAA6B;GAC3B,IAAI,QAAQ,YAAY,SAAS,SAAS;IACxC,MAAM,YAAY,QAAQ,SAAS;IACnC,MAAM,SAASD,qCAAAA,yBAAyB,WAAW,KAAK;IACxD,IAAI,MAAM,UAAU,SAAS,GAC3B,SAAS,QAAQ,MAAM,YAAY,mBAAmB,GAAG;SAEzD,SAAS,QAAQ,MAAM,YAAY,mBAAmB,GAAG;IAE3D,SAAS,QAAQ,MAAM,YAAY,kBAAkB,OAAO;GAC9D;EACF;EACA,gBAAgB,cAAc;GAC5B,IAAI,QAAQ,UACV,QAAQ,SAAS,YAAY;EAEjC;EACA,eAAe,eAAe;GAC5B,IAAI,QAAQ,UACV,QAAQ,SAAS,YAAY,kBAAkB,UAAU;EAE7D;CACD,CAAA;CAIL,OAAO;AACT;AAEA,2BAA2B,cAAc"}