@grafana/ui/dist/esm/components/Modal/Modal.mjs.map

Grafana Components Library

{"version":3,"file":"Modal.mjs","sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { useDialog } from '@react-aria/dialog';\nimport { FocusScope } from '@react-aria/focus';\nimport { OverlayContainer, useOverlay } from '@react-aria/overlays';\nimport { PropsWithChildren, useRef } from 'react';\nimport * as React from 'react';\n\nimport { t } from '@grafana/i18n';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { IconName } from '../../types/icon';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Stack } from '../Layout/Stack/Stack';\n\nimport { ModalHeader } from './ModalHeader';\nimport { getModalStyles } from './getModalStyles';\n\nexport interface Props {\n  /** @deprecated no longer used */\n  icon?: IconName;\n  /** @deprecated no longer used */\n  iconTooltip?: string;\n  /** Title for the modal or custom header element */\n  title: string | JSX.Element;\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\nexport function Modal(props: PropsWithChildren<Props>) {\n  const {\n    title,\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\n  const ref = useRef<HTMLDivElement>(null);\n\n  // Handle interacting outside the dialog and pressing\n  // the Escape key to close the modal.\n  const { overlayProps, underlayProps } = useOverlay(\n    { isKeyboardDismissDisabled: !closeOnEscape, isOpen, onClose: onDismiss },\n    ref\n  );\n\n  // Get props for the dialog and its title\n  const { dialogProps, titleProps } = useDialog({}, ref);\n\n  if (!isOpen) {\n    return null;\n  }\n\n  const headerClass = cx(styles.modalHeader, typeof title !== 'string' && styles.modalHeaderWithTabs);\n\n  return (\n    <OverlayContainer>\n      <div\n        role=\"presentation\"\n        className={styles.modalBackdrop}\n        onClick={onClickBackdrop || (closeOnBackdropClick ? onDismiss : undefined)}\n        {...underlayProps}\n      />\n      <FocusScope contain={trapFocus} autoFocus restoreFocus>\n        <div className={cx(styles.modal, className)} ref={ref} {...overlayProps} {...dialogProps}>\n          <div className={headerClass}>\n            {typeof title === 'string' && <DefaultModalHeader {...props} title={title} id={titleProps.id} />}\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        </div>\n      </FocusScope>\n    </OverlayContainer>\n  );\n}\n\nfunction ModalButtonRow({ leftItems, children }: { leftItems?: React.ReactNode; children: React.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\ninterface DefaultModalHeaderProps {\n  id?: string;\n  title: string;\n  icon?: IconName;\n  iconTooltip?: string;\n}\n\nfunction DefaultModalHeader({ icon, iconTooltip, title, id }: DefaultModalHeaderProps): JSX.Element {\n  return <ModalHeader icon={icon} iconTooltip={iconTooltip} title={title} id={id} />;\n}\n"],"names":[],"mappings":"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"}