@grafana/ui
Version:
Grafana Components Library
77 lines (74 loc) • 2.82 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { cx } from '@emotion/css';
import { useId } from 'react';
import { t } from '@grafana/i18n';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { IconButton } from '../IconButton/IconButton.mjs';
import { Stack } from '../Layout/Stack/Stack.mjs';
import { ModalBase } from './ModalBase.mjs';
import { ModalHeader } from './ModalHeader.mjs';
import { getModalStyles } from './getModalStyles.mjs';
;
function Modal(props) {
const {
title,
ariaLabel,
children,
isOpen = false,
closeOnEscape = true,
closeOnBackdropClick = true,
className,
contentClassName,
onDismiss,
onClickBackdrop,
trapFocus = true
} = props;
const styles = useStyles2(getModalStyles);
const titleId = useId();
const headerClass = cx(styles.modalHeader, typeof title !== "string" && styles.modalHeaderWithTabs);
return /* @__PURE__ */ jsxs(
ModalBase,
{
isOpen,
onDismiss,
closeOnEscape,
closeOnBackdropClick,
trapFocus,
className,
onClickBackdrop,
"aria-label": ariaLabel,
"aria-labelledby": typeof title === "string" ? titleId : void 0,
children: [
/* @__PURE__ */ jsxs("div", { className: headerClass, children: [
typeof title === "string" && /* @__PURE__ */ jsx(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__ */ jsx("div", { className: styles.modalHeaderClose, children: /* @__PURE__ */ jsx(
IconButton,
{
name: "times",
size: "xl",
onClick: onDismiss,
"aria-label": t("grafana-ui.modal.close-tooltip", "Close")
}
) })
] }),
/* @__PURE__ */ jsx("div", { className: cx(styles.modalContent, contentClassName), children })
]
}
);
}
function ModalButtonRow({ leftItems, children }) {
const styles = useStyles2(getModalStyles);
if (leftItems) {
return /* @__PURE__ */ jsx("div", { className: styles.modalButtonRow, children: /* @__PURE__ */ jsxs(Stack, { justifyContent: "space-between", children: [
/* @__PURE__ */ jsx(Stack, { justifyContent: "flex-start", gap: 2, children: leftItems }),
/* @__PURE__ */ jsx(Stack, { justifyContent: "flex-end", gap: 2, children })
] }) });
}
return /* @__PURE__ */ jsx("div", { className: styles.modalButtonRow, children: /* @__PURE__ */ jsx(Stack, { justifyContent: "flex-end", gap: 2, wrap: "wrap", children }) });
}
Modal.ButtonRow = ModalButtonRow;
export { Modal };
//# sourceMappingURL=Modal.mjs.map