@grafana/ui/dist/esm/components/ScrollContainer/ScrollContainer.mjs.map

Grafana Components Library

{"version":3,"file":"ScrollContainer.mjs","sources":["../../../../src/components/ScrollContainer/ScrollContainer.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { Property } from 'csstype';\nimport { forwardRef, PropsWithChildren, UIEventHandler } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Box, BoxProps } from '../Layout/Box/Box';\n\nimport { ScrollIndicators } from './ScrollIndicators';\n\ninterface Props extends Omit<BoxProps, 'display' | 'direction' | 'element' | 'flex' | 'position'> {\n  showScrollIndicators?: boolean;\n  onScroll?: UIEventHandler<HTMLDivElement>;\n  overflowX?: Property.OverflowX;\n  overflowY?: Property.OverflowY;\n  scrollbarWidth?: Property.ScrollbarWidth;\n}\n\n/**\n * This component is used to create a scrollable container. It uses native scrollbars, has an option to show scroll indicators, and supports most `Box` properties.\n *\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-scrollcontainer--docs\n */\nexport const ScrollContainer = forwardRef<HTMLDivElement, PropsWithChildren<Props>>(\n  (\n    {\n      children,\n      showScrollIndicators = false,\n      onScroll,\n      overflowX = 'auto',\n      overflowY = 'auto',\n      scrollbarWidth = 'thin',\n      ...rest\n    },\n    ref\n  ) => {\n    const styles = useStyles2(getStyles, scrollbarWidth, overflowY, overflowX);\n    const defaults: Partial<BoxProps> = {\n      maxHeight: '100%',\n      minHeight: 0,\n      minWidth: 0,\n    };\n    const boxProps = { ...defaults, ...rest };\n\n    return (\n      <Box {...boxProps} display=\"flex\" direction=\"column\" flex={1} position=\"relative\">\n        {/* scrollable containers need tabindex set so keyboard users can focus them to scroll */}\n        {/* see https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/a7d1a12a6198d546c4a06477b385b4fde03b762e/docs/rules/no-noninteractive-tabindex.md#:~:text=If%20you%20know,scroll%20containers%22. */}\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\n        <div tabIndex={0} onScroll={onScroll} className={styles.scroller} ref={ref}>\n          {showScrollIndicators ? <ScrollIndicators>{children}</ScrollIndicators> : children}\n        </div>\n      </Box>\n    );\n  }\n);\nScrollContainer.displayName = 'ScrollContainer';\n\nconst getStyles = (\n  theme: GrafanaTheme2,\n  scrollbarWidth: Props['scrollbarWidth'],\n  overflowY: Props['overflowY'],\n  overflowX: Props['overflowX']\n) => ({\n  scroller: css({\n    display: 'flex',\n    flex: 1,\n    flexDirection: 'column',\n    overflowX,\n    overflowY,\n    scrollbarWidth,\n  }),\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,eAAA,GAAkB,UAAA;AAAA,EAC7B,CACE;AAAA,IACE,QAAA;AAAA,IACA,oBAAA,GAAuB,KAAA;AAAA,IACvB,QAAA;AAAA,IACA,SAAA,GAAY,MAAA;AAAA,IACZ,SAAA,GAAY,MAAA;AAAA,IACZ,cAAA,GAAiB,MAAA;AAAA,IACjB,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,MAAA,GAAS,UAAA,CAAW,SAAA,EAAW,cAAA,EAAgB,WAAW,SAAS,CAAA;AACzE,IAAA,MAAM,QAAA,GAA8B;AAAA,MAClC,SAAA,EAAW,MAAA;AAAA,MACX,SAAA,EAAW,CAAA;AAAA,MACX,QAAA,EAAU;AAAA,KACZ;AACA,IAAA,MAAM,QAAA,GAAW,EAAE,GAAG,QAAA,EAAU,GAAG,IAAA,EAAK;AAExC,IAAA,uBACE,GAAA,CAAC,GAAA,EAAA,EAAK,GAAG,QAAA,EAAU,OAAA,EAAQ,MAAA,EAAO,SAAA,EAAU,QAAA,EAAS,IAAA,EAAM,CAAA,EAAG,QAAA,EAAS,UAAA,EAIrE,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,QAAA,EAAU,CAAA,EAAG,QAAA,EAAoB,SAAA,EAAW,MAAA,CAAO,QAAA,EAAU,GAAA,EAC/D,QAAA,EAAA,oBAAA,mBAAuB,GAAA,CAAC,gBAAA,EAAA,EAAkB,QAAA,EAAS,CAAA,GAAsB,QAAA,EAC5E,CAAA,EACF,CAAA;AAAA,EAEJ;AACF;AACA,eAAA,CAAgB,WAAA,GAAc,iBAAA;AAE9B,MAAM,SAAA,GAAY,CAChB,KAAA,EACA,cAAA,EACA,WACA,SAAA,MACI;AAAA,EACJ,UAAU,GAAA,CAAI;AAAA,IACZ,OAAA,EAAS,MAAA;AAAA,IACT,IAAA,EAAM,CAAA;AAAA,IACN,aAAA,EAAe,QAAA;AAAA,IACf,SAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACD;AACH,CAAA,CAAA;;;;"}