{"version":3,"file":"ScrollIndicators.cjs","sources":["../../../../src/components/CustomScrollbar/ScrollIndicators.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { useEffect, useRef, useState } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport const ScrollIndicators = ({ children }: React.PropsWithChildren<{}>) => {\n  const [showScrollTopIndicator, setShowTopScrollIndicator] = useState(false);\n  const [showScrollBottomIndicator, setShowBottomScrollIndicator] = useState(false);\n  const scrollTopMarker = useRef<HTMLDivElement>(null);\n  const scrollBottomMarker = useRef<HTMLDivElement>(null);\n  const styles = useStyles2(getStyles);\n\n  // Here we observe the top and bottom markers to determine if we should show the scroll indicators\n  useEffect(() => {\n    const intersectionObserver = new IntersectionObserver((entries) => {\n      entries.forEach((entry) => {\n        if (entry.target === scrollTopMarker.current) {\n          setShowTopScrollIndicator(!entry.isIntersecting);\n        } else if (entry.target === scrollBottomMarker.current) {\n          setShowBottomScrollIndicator(!entry.isIntersecting);\n        }\n      });\n    });\n    [scrollTopMarker, scrollBottomMarker].forEach((ref) => {\n      if (ref.current) {\n        intersectionObserver.observe(ref.current);\n      }\n    });\n    return () => intersectionObserver.disconnect();\n  }, []);\n\n  return (\n    <>\n      <div\n        className={cx(styles.scrollIndicator, styles.scrollTopIndicator, {\n          [styles.scrollIndicatorVisible]: showScrollTopIndicator,\n        })}\n      />\n      <div className={styles.scrollContent}>\n        <div ref={scrollTopMarker} />\n        {children}\n        <div ref={scrollBottomMarker} />\n      </div>\n      <div\n        className={cx(styles.scrollIndicator, styles.scrollBottomIndicator, {\n          [styles.scrollIndicatorVisible]: showScrollBottomIndicator,\n        })}\n      />\n    </>\n  );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    scrollContent: css({\n      flex: 1,\n      position: 'relative',\n    }),\n    scrollIndicator: css({\n      height: theme.spacing(6),\n      left: 0,\n      opacity: 0,\n      pointerEvents: 'none',\n      position: 'absolute',\n      right: 0,\n      [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n        transition: theme.transitions.create('opacity'),\n      },\n      zIndex: 1,\n    }),\n    scrollTopIndicator: css({\n      background: `linear-gradient(0deg, transparent, ${theme.colors.background.canvas})`,\n      top: 0,\n    }),\n    scrollBottomIndicator: css({\n      background: `linear-gradient(180deg, transparent, ${theme.colors.background.canvas})`,\n      bottom: 0,\n    }),\n    scrollIndicatorVisible: css({\n      opacity: 1,\n    }),\n  };\n};\n"],"names":["useState","useRef","useStyles2","useEffect","jsxs","Fragment","jsx","cx","css"],"mappings":"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"}