@grafana/ui/dist/cjs/components/Layout/Stack/Stack.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 responsiveness = require('../utils/responsiveness.cjs');
var styles = require('../utils/styles.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

"use strict";
const Stack = React__namespace.forwardRef((props, ref) => {
  const {
    gap = 1,
    rowGap,
    columnGap,
    alignItems,
    justifyContent,
    direction,
    wrap,
    children,
    grow,
    shrink,
    basis,
    flex,
    width,
    minWidth,
    maxWidth,
    height,
    minHeight,
    maxHeight,
    ...rest
  } = props;
  const styles$1 = ThemeContext.useStyles2(
    getStyles,
    gap,
    rowGap,
    columnGap,
    alignItems,
    justifyContent,
    direction,
    wrap,
    grow,
    shrink,
    basis,
    flex
  );
  const sizeStyles = ThemeContext.useStyles2(styles.getSizeStyles, width, minWidth, maxWidth, height, minHeight, maxHeight);
  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: css.cx(styles$1.flex, sizeStyles), ...rest, children });
});
Stack.displayName = "Stack";
const getStyles = (theme, gap, rowGap, columnGap, alignItems, justifyContent, direction, wrap, grow, shrink, basis, flex) => {
  return {
    flex: css.css([
      {
        display: "flex"
      },
      responsiveness.getResponsiveStyle(theme, direction, (val) => ({
        flexDirection: val
      })),
      responsiveness.getResponsiveStyle(theme, wrap, (val) => ({
        flexWrap: typeof val === "boolean" ? val ? "wrap" : "nowrap" : val
      })),
      responsiveness.getResponsiveStyle(theme, alignItems, (val) => ({
        alignItems: val
      })),
      responsiveness.getResponsiveStyle(theme, justifyContent, (val) => ({
        justifyContent: val
      })),
      responsiveness.getResponsiveStyle(theme, gap, (val) => ({
        gap: theme.spacing(val)
      })),
      responsiveness.getResponsiveStyle(theme, rowGap, (val) => ({
        rowGap: theme.spacing(val)
      })),
      responsiveness.getResponsiveStyle(theme, columnGap, (val) => ({
        columnGap: theme.spacing(val)
      })),
      responsiveness.getResponsiveStyle(theme, grow, (val) => ({
        flexGrow: val
      })),
      responsiveness.getResponsiveStyle(theme, shrink, (val) => ({
        flexShrink: val
      })),
      responsiveness.getResponsiveStyle(theme, basis, (val) => ({
        flexBasis: val
      })),
      responsiveness.getResponsiveStyle(theme, flex, (val) => ({
        flex: val
      }))
    ])
  };
};

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