@grafana/ui/dist/cjs/components/Modal/Modal.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 i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var IconButton = require('../IconButton/IconButton.cjs');
var Stack = require('../Layout/Stack/Stack.cjs');
var ModalBase = require('./ModalBase.cjs');
var ModalHeader = require('./ModalHeader.cjs');
var getModalStyles = require('./getModalStyles.cjs');

"use strict";
function Modal(props) {
  const {
    title,
    ariaLabel,
    children,
    isOpen = false,
    closeOnEscape = true,
    closeOnBackdropClick = true,
    className,
    contentClassName,
    onDismiss,
    onClickBackdrop,
    trapFocus = true
  } = props;
  const styles = ThemeContext.useStyles2(getModalStyles.getModalStyles);
  const titleId = React.useId();
  const headerClass = css.cx(styles.modalHeader, typeof title !== "string" && styles.modalHeaderWithTabs);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    ModalBase.ModalBase,
    {
      isOpen,
      onDismiss,
      closeOnEscape,
      closeOnBackdropClick,
      trapFocus,
      className,
      onClickBackdrop,
      "aria-label": ariaLabel,
      "aria-labelledby": typeof title === "string" ? titleId : void 0,
      children: [
        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headerClass, children: [
          typeof title === "string" && /* @__PURE__ */ jsxRuntime.jsx(ModalHeader.ModalHeader, { title, id: titleId }),
          // FIXME: custom title components won't get an accessible title.
          // Do we really want to support them or shall we just limit this ModalTabsHeader?
          typeof title !== "string" && title,
          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.modalHeaderClose, children: /* @__PURE__ */ jsxRuntime.jsx(
            IconButton.IconButton,
            {
              name: "times",
              size: "xl",
              onClick: onDismiss,
              "aria-label": i18n.t("grafana-ui.modal.close-tooltip", "Close")
            }
          ) })
        ] }),
        /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(styles.modalContent, contentClassName), children })
      ]
    }
  );
}
function ModalButtonRow({ leftItems, children }) {
  const styles = ThemeContext.useStyles2(getModalStyles.getModalStyles);
  if (leftItems) {
    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.modalButtonRow, children: /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { justifyContent: "space-between", children: [
      /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { justifyContent: "flex-start", gap: 2, children: leftItems }),
      /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { justifyContent: "flex-end", gap: 2, children })
    ] }) });
  }
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.modalButtonRow, children: /* @__PURE__ */ jsxRuntime.jsx(Stack.Stack, { justifyContent: "flex-end", gap: 2, wrap: "wrap", children }) });
}
Modal.ButtonRow = ModalButtonRow;

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