@grafana/ui/dist/cjs/components/Modal/ModalBase.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('@floating-ui/react');
var overlays = require('@react-aria/overlays');
var React = require('react');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Portal = require('../Portal/Portal.cjs');
var getModalStyles = require('./getModalStyles.cjs');

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

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