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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"ScrollAreaScrollbarScroll.cjs","names":["useScrollAreaContext","ScrollAreaScrollbarVisible","composeEventHandlers"],"sources":["../../../../src/components/ScrollArea/ScrollAreaScrollbar/ScrollAreaScrollbarScroll.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport { useScrollAreaContext } from '../ScrollArea.context';\nimport { composeEventHandlers } from '../utils';\nimport {\n  ScrollAreaScrollbarVisible,\n  ScrollAreaScrollbarVisibleProps,\n} from './ScrollAreaScrollbarVisible';\n\ninterface ScrollAreaScrollbarScrollProps extends ScrollAreaScrollbarVisibleProps {\n  forceMount?: true;\n}\n\nexport function ScrollAreaScrollbarScroll(props: ScrollAreaScrollbarScrollProps) {\n  const { forceMount, ...scrollbarProps } = props;\n  const context = useScrollAreaContext();\n  const isHorizontal = props.orientation === 'horizontal';\n  const [state, setState] = useState<'hidden' | 'idle' | 'interacting' | 'scrolling'>('hidden');\n  const debounceScrollEnd = useDebouncedCallback(() => setState('idle'), 100);\n\n  useEffect(() => {\n    if (state === 'idle') {\n      const hideTimer = window.setTimeout(() => setState('hidden'), context.scrollHideDelay);\n      return () => window.clearTimeout(hideTimer);\n    }\n\n    return undefined;\n  }, [state, context.scrollHideDelay]);\n\n  useEffect(() => {\n    const { viewport } = context;\n    const scrollDirection = isHorizontal ? 'scrollLeft' : 'scrollTop';\n\n    if (viewport) {\n      let prevScrollPos = viewport[scrollDirection];\n      const handleScroll = () => {\n        const scrollPos = viewport[scrollDirection];\n        const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;\n        if (hasScrollInDirectionChanged) {\n          setState('scrolling');\n          debounceScrollEnd();\n        }\n        prevScrollPos = scrollPos;\n      };\n      viewport.addEventListener('scroll', handleScroll);\n      return () => viewport.removeEventListener('scroll', handleScroll);\n    }\n\n    return undefined;\n  }, [context.viewport, isHorizontal, debounceScrollEnd]);\n\n  if (forceMount || state !== 'hidden') {\n    return (\n      <ScrollAreaScrollbarVisible\n        data-state={state === 'hidden' ? 'hidden' : 'visible'}\n        {...scrollbarProps}\n        onPointerEnter={composeEventHandlers(props.onPointerEnter, () => setState('interacting'))}\n        onPointerLeave={composeEventHandlers(props.onPointerLeave, () => setState('idle'))}\n      />\n    );\n  }\n\n  return null;\n}\n"],"mappings":";;;;;;;;;AAaA,SAAgB,0BAA0B,OAAuC;CAC/E,MAAM,EAAE,YAAY,GAAG,mBAAmB;CAC1C,MAAM,UAAUA,2BAAAA,qBAAqB;CACrC,MAAM,eAAe,MAAM,gBAAgB;CAC3C,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAsE,QAAQ;CAC5F,MAAM,qBAAA,GAAA,eAAA,4BAA+C,SAAS,MAAM,GAAG,GAAG;CAE1E,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,UAAU,QAAQ;GACpB,MAAM,YAAY,OAAO,iBAAiB,SAAS,QAAQ,GAAG,QAAQ,eAAe;GACrF,aAAa,OAAO,aAAa,SAAS;EAC5C;CAGF,GAAG,CAAC,OAAO,QAAQ,eAAe,CAAC;CAEnC,CAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,EAAE,aAAa;EACrB,MAAM,kBAAkB,eAAe,eAAe;EAEtD,IAAI,UAAU;GACZ,IAAI,gBAAgB,SAAS;GAC7B,MAAM,qBAAqB;IACzB,MAAM,YAAY,SAAS;IAE3B,IADoC,kBAAkB,WACrB;KAC/B,SAAS,WAAW;KACpB,kBAAkB;IACpB;IACA,gBAAgB;GAClB;GACA,SAAS,iBAAiB,UAAU,YAAY;GAChD,aAAa,SAAS,oBAAoB,UAAU,YAAY;EAClE;CAGF,GAAG;EAAC,QAAQ;EAAU;EAAc;CAAiB,CAAC;CAEtD,IAAI,cAAc,UAAU,UAC1B,OACE,iBAAA,GAAA,kBAAA,KAACC,mCAAAA,4BAAD;EACE,cAAY,UAAU,WAAW,WAAW;EAC5C,GAAI;EACJ,gBAAgBC,+BAAAA,qBAAqB,MAAM,sBAAsB,SAAS,aAAa,CAAC;EACxF,gBAAgBA,+BAAAA,qBAAqB,MAAM,sBAAsB,SAAS,MAAM,CAAC;CAClF,CAAA;CAIL,OAAO;AACT"}