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

Grafana Components Library

import { jsxs, jsx } from 'react/jsx-runtime';
import { cx } from '@emotion/css';
import { useFloating, useDismiss, useRole, useInteractions, FloatingFocusManager } from '@floating-ui/react';
import { OverlayContainer } from '@react-aria/overlays';
import { useRef } from 'react';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { getPortalContainer } from '../Portal/Portal.mjs';
import { getModalStyles } from './getModalStyles.mjs';

"use strict";
function ModalBase({
  children,
  className,
  isOpen = false,
  closeOnEscape = true,
  closeOnBackdropClick = false,
  trapFocus = true,
  onDismiss,
  onClickBackdrop,
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledBy
}) {
  const styles = useStyles2(getModalStyles);
  const { context, refs } = useFloating({
    open: isOpen,
    onOpenChange: (open) => {
      if (!open) {
        onDismiss == null ? void 0 : onDismiss();
      }
    }
  });
  const backdropRef = useRef(null);
  const dismiss = useDismiss(context, {
    escapeKey: closeOnEscape,
    outsidePress: (event) => {
      var _a;
      const target = event.target instanceof Node ? event.target : null;
      const portalContainer = getPortalContainer();
      if (target && portalContainer !== document.body && portalContainer.contains(target) && !((_a = backdropRef.current) == null ? void 0 : _a.contains(target))) {
        return false;
      }
      if (onClickBackdrop) {
        onClickBackdrop();
        return false;
      }
      return closeOnBackdropClick;
    }
  });
  const role = useRole(context, {
    role: "dialog"
  });
  const { getFloatingProps } = useInteractions([dismiss, role]);
  if (!isOpen) {
    return null;
  }
  return /* @__PURE__ */ jsxs(OverlayContainer, { children: [
    /* @__PURE__ */ jsx("div", { role: "presentation", ref: backdropRef, className: styles.modalBackdrop }),
    /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: trapFocus, getInsideElements: () => [getPortalContainer()], children: /* @__PURE__ */ jsx(
      "div",
      {
        className: cx(styles.modal, className),
        ref: refs.setFloating,
        "aria-label": ariaLabel,
        "aria-labelledby": ariaLabelledBy,
        ...getFloatingProps(),
        children
      }
    ) })
  ] });
}

export { ModalBase };
//# sourceMappingURL=ModalBase.mjs.map