@grafana/ui/dist/cjs/components/Layout/Layout.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');

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";
var Orientation = /* @__PURE__ */ ((Orientation2) => {
  Orientation2[Orientation2["Horizontal"] = 0] = "Horizontal";
  Orientation2[Orientation2["Vertical"] = 1] = "Vertical";
  return Orientation2;
})(Orientation || {});
const Layout = ({
  children,
  orientation = 0 /* Horizontal */,
  spacing = "sm",
  justify = "flex-start",
  align = "normal",
  wrap = false,
  width = "100%",
  height = "100%",
  ...rest
}) => {
  const styles = ThemeContext.useStyles2(getStyles, orientation, spacing, justify, align, wrap);
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.layout, style: { width, height }, ...rest, children: React__namespace.Children.toArray(children).filter(Boolean).map((child, index) => {
    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.childWrapper, children: child }, index);
  }) });
};
const HorizontalGroup = ({
  children,
  spacing,
  justify,
  align = "center",
  wrap,
  width,
  height
}) => /* @__PURE__ */ jsxRuntime.jsx(
  Layout,
  {
    spacing,
    justify,
    orientation: 0 /* Horizontal */,
    align,
    width,
    height,
    wrap,
    children
  }
);
const VerticalGroup = ({
  children,
  spacing,
  justify,
  align,
  width,
  height
}) => /* @__PURE__ */ jsxRuntime.jsx(
  Layout,
  {
    spacing,
    justify,
    orientation: 1 /* Vertical */,
    align,
    width,
    height,
    children
  }
);
const Container = ({ children, padding, margin, grow, shrink }) => {
  const styles = ThemeContext.useStyles2(getContainerStyles, padding, margin);
  return /* @__PURE__ */ jsxRuntime.jsx(
    "div",
    {
      className: css.cx(
        styles.wrapper,
        grow !== void 0 && css.css({ flexGrow: grow }),
        shrink !== void 0 && css.css({ flexShrink: shrink })
      ),
      children
    }
  );
};
const getStyles = (theme, orientation, spacing, justify, align, wrap) => {
  const finalSpacing = spacing !== "none" ? theme.spacing(spacingToNumber[spacing]) : 0;
  const marginCompensation = orientation === 0 /* Horizontal */ && !wrap || orientation === 1 /* Vertical */ ? 0 : `-${finalSpacing}`;
  const label = orientation === 1 /* Vertical */ ? "vertical-group" : "horizontal-group";
  return {
    layout: css.css({
      label,
      display: "flex",
      flexDirection: orientation === 1 /* Vertical */ ? "column" : "row",
      flexWrap: wrap ? "wrap" : "nowrap",
      justifyContent: justify,
      alignItems: align,
      height: "100%",
      maxWidth: "100%",
      // compensate for last row margin when wrapped, horizontal layout
      marginBottom: marginCompensation
    }),
    childWrapper: css.css({
      label: "layoutChildrenWrapper",
      marginBottom: orientation === 0 /* Horizontal */ && !wrap ? 0 : finalSpacing,
      marginRight: orientation === 0 /* Horizontal */ ? finalSpacing : 0,
      display: "flex",
      alignItems: align,
      "&:last-child": {
        marginBottom: orientation === 1 /* Vertical */ ? 0 : void 0,
        marginRight: orientation === 0 /* Horizontal */ ? 0 : void 0
      }
    })
  };
};
const spacingToNumber = {
  none: 0,
  xs: 0.5,
  sm: 1,
  md: 2,
  lg: 3
};
const getContainerStyles = (theme, padding, margin) => {
  const paddingSize = padding && padding !== "none" && theme.spacing(spacingToNumber[padding]) || 0;
  const marginSize = margin && margin !== "none" && theme.spacing(spacingToNumber[margin]) || 0;
  return {
    wrapper: css.css({
      label: "container",
      margin: marginSize,
      padding: paddingSize
    })
  };
};

exports.Container = Container;
exports.HorizontalGroup = HorizontalGroup;
exports.Layout = Layout;
exports.VerticalGroup = VerticalGroup;
//# sourceMappingURL=Layout.cjs.map