@grafana/ui/dist/cjs/components/Modal/Modal.cjs.map

Grafana Components Library

{"version":3,"file":"Modal.cjs","sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { type PropsWithChildren, type ReactNode, useId, type JSX } from 'react';\n\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Stack } from '../Layout/Stack/Stack';\n\nimport { ModalBase } from './ModalBase';\nimport { ModalHeader } from './ModalHeader';\nimport { getModalStyles } from './getModalStyles';\n\ninterface BaseProps {\n  className?: string;\n  contentClassName?: string;\n  closeOnEscape?: boolean;\n  closeOnBackdropClick?: boolean;\n  trapFocus?: boolean;\n\n  isOpen?: boolean;\n  onDismiss?: () => void;\n\n  /** If not set will call onDismiss if that is set. */\n  onClickBackdrop?: () => void;\n}\n\ninterface WithStringTitleProps extends BaseProps {\n  /** Title for the modal or custom header element */\n  title: string;\n  ariaLabel?: never;\n}\n\ninterface WithCustomTitleProps extends BaseProps {\n  /** Title for the modal or custom header element */\n  title: JSX.Element;\n  /** aria-label for the dialog. only needed when passing a custom title element */\n  ariaLabel: string;\n}\n\nexport type Props = WithStringTitleProps | WithCustomTitleProps;\n\n/**\n * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-modal--docs\n */\nexport function Modal(props: PropsWithChildren<Props>) {\n  const {\n    title,\n    ariaLabel,\n    children,\n    isOpen = false,\n    closeOnEscape = true,\n    closeOnBackdropClick = true,\n    className,\n    contentClassName,\n    onDismiss,\n    onClickBackdrop,\n    trapFocus = true,\n  } = props;\n  const styles = useStyles2(getModalStyles);\n  const titleId = useId();\n\n  const headerClass = cx(styles.modalHeader, typeof title !== 'string' && styles.modalHeaderWithTabs);\n\n  return (\n    <ModalBase\n      isOpen={isOpen}\n      onDismiss={onDismiss}\n      closeOnEscape={closeOnEscape}\n      closeOnBackdropClick={closeOnBackdropClick}\n      trapFocus={trapFocus}\n      className={className}\n      onClickBackdrop={onClickBackdrop}\n      aria-label={ariaLabel}\n      aria-labelledby={typeof title === 'string' ? titleId : undefined}\n    >\n      <div className={headerClass}>\n        {typeof title === 'string' && <ModalHeader title={title} id={titleId} />}\n        {\n          // FIXME: custom title components won't get an accessible title.\n          // Do we really want to support them or shall we just limit this ModalTabsHeader?\n          typeof title !== 'string' && title\n        }\n        <div className={styles.modalHeaderClose}>\n          <IconButton\n            name=\"times\"\n            size=\"xl\"\n            onClick={onDismiss}\n            aria-label={t('grafana-ui.modal.close-tooltip', 'Close')}\n          />\n        </div>\n      </div>\n      <div className={cx(styles.modalContent, contentClassName)}>{children}</div>\n    </ModalBase>\n  );\n}\n\nfunction ModalButtonRow({ leftItems, children }: { leftItems?: ReactNode; children: ReactNode }) {\n  const styles = useStyles2(getModalStyles);\n\n  if (leftItems) {\n    return (\n      <div className={styles.modalButtonRow}>\n        <Stack justifyContent=\"space-between\">\n          <Stack justifyContent=\"flex-start\" gap={2}>\n            {leftItems}\n          </Stack>\n          <Stack justifyContent=\"flex-end\" gap={2}>\n            {children}\n          </Stack>\n        </Stack>\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles.modalButtonRow}>\n      <Stack justifyContent=\"flex-end\" gap={2} wrap=\"wrap\">\n        {children}\n      </Stack>\n    </div>\n  );\n}\n\nModal.ButtonRow = ModalButtonRow;\n"],"names":["useStyles2","getModalStyles","useId","cx","jsxs","ModalBase","jsx","ModalHeader","IconButton","t","Stack"],"mappings":";;;;;;;;;;;;;;;;AA6CO,SAAS,MAAM,KAAA,EAAiC;AACrD,EAAA,MAAM;AAAA,IACJ,KAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA,GAAS,KAAA;AAAA,IACT,aAAA,GAAgB,IAAA;AAAA,IAChB,oBAAA,GAAuB,IAAA;AAAA,IACvB,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,SAAA,GAAY;AAAA,GACd,GAAI,KAAA;AACJ,EAAA,MAAM,MAAA,GAASA,wBAAWC,6BAAc,CAAA;AACxC,EAAA,MAAM,UAAUC,WAAA,EAAM;AAEtB,EAAA,MAAM,WAAA,GAAcC,OAAG,MAAA,CAAO,WAAA,EAAa,OAAO,KAAA,KAAU,QAAA,IAAY,OAAO,mBAAmB,CAAA;AAElG,EAAA,uBACEC,eAAA;AAAA,IAACC,mBAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA,oBAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,iBAAA,EAAiB,OAAO,KAAA,KAAU,QAAA,GAAW,OAAA,GAAU,KAAA,CAAA;AAAA,MAEvD,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAAC,KAAA,EAAA,EAAI,WAAW,WAAA,EACb,QAAA,EAAA;AAAA,UAAA,OAAO,UAAU,QAAA,oBAAYE,cAAA,CAACC,uBAAA,EAAA,EAAY,KAAA,EAAc,IAAI,OAAA,EAAS,CAAA;AAAA;AAAA;AAAA,UAIpE,OAAO,UAAU,QAAA,IAAY,KAAA;AAAA,0BAE/BD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,gBAAA,EACrB,QAAA,kBAAAA,cAAA;AAAA,YAACE,qBAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,OAAA;AAAA,cACL,IAAA,EAAK,IAAA;AAAA,cACL,OAAA,EAAS,SAAA;AAAA,cACT,YAAA,EAAYC,MAAA,CAAE,gCAAA,EAAkC,OAAO;AAAA;AAAA,WACzD,EACF;AAAA,SAAA,EACF,CAAA;AAAA,wBACAH,cAAA,CAAC,SAAI,SAAA,EAAWH,MAAA,CAAG,OAAO,YAAA,EAAc,gBAAgB,GAAI,QAAA,EAAS;AAAA;AAAA;AAAA,GACvE;AAEJ;AAEA,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,QAAA,EAAS,EAAmD;AAC/F,EAAA,MAAM,MAAA,GAASH,wBAAWC,6BAAc,CAAA;AAExC,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,uBACEK,cAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,gBACrB,QAAA,kBAAAF,eAAA,CAACM,WAAA,EAAA,EAAM,gBAAe,eAAA,EACpB,QAAA,EAAA;AAAA,sBAAAJ,cAAA,CAACI,WAAA,EAAA,EAAM,cAAA,EAAe,YAAA,EAAa,GAAA,EAAK,GACrC,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,qCACCA,WAAA,EAAA,EAAM,cAAA,EAAe,UAAA,EAAW,GAAA,EAAK,GACnC,QAAA,EACH;AAAA,KAAA,EACF,CAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEJ,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,gBACrB,QAAA,kBAAAA,cAAA,CAACI,WAAA,EAAA,EAAM,cAAA,EAAe,UAAA,EAAW,GAAA,EAAK,CAAA,EAAG,IAAA,EAAK,MAAA,EAC3C,UACH,CAAA,EACF,CAAA;AAEJ;AAEA,KAAA,CAAM,SAAA,GAAY,cAAA;;;;"}