@grafana/ui/dist/cjs/components/ScrollContainer/ScrollContainer.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Box = require('../Layout/Box/Box.cjs');
var ScrollIndicators = require('./ScrollIndicators.cjs');

"use strict";
const ScrollContainer = React.forwardRef(
  ({
    children,
    showScrollIndicators = false,
    onScroll,
    overflowX = "auto",
    overflowY = "auto",
    scrollbarWidth = "thin",
    ...rest
  }, ref) => {
    const styles = ThemeContext.useStyles2(getStyles, scrollbarWidth, overflowY, overflowX);
    const defaults = {
      maxHeight: "100%",
      minHeight: 0,
      minWidth: 0
    };
    const boxProps = { ...defaults, ...rest };
    return /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { ...boxProps, display: "flex", direction: "column", flex: 1, position: "relative", children: /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: 0, onScroll, className: styles.scroller, ref, children: showScrollIndicators ? /* @__PURE__ */ jsxRuntime.jsx(ScrollIndicators.ScrollIndicators, { children }) : children }) });
  }
);
ScrollContainer.displayName = "ScrollContainer";
const getStyles = (theme, scrollbarWidth, overflowY, overflowX) => ({
  scroller: css.css({
    display: "flex",
    flex: 1,
    flexDirection: "column",
    overflowX,
    overflowY,
    scrollbarWidth,
    "&:focus-visible": {
      outline: `2px solid ${theme.colors.accent.main}`,
      outlineOffset: "-2px"
    }
  })
});

exports.ScrollContainer = ScrollContainer;
//# sourceMappingURL=ScrollContainer.cjs.map