@konstructio/ui/dist/Modal-CrG0m703.js

A set of reusable and customizable React components built for konstruct.io

import { Body as b } from "./components/Modal/components/Body/Body.js";
import { Footer as g } from "./components/Modal/components/Footer/Footer.js";
import { Header as v } from "./components/Modal/components/Header/Header.js";
import { jsx as a, jsxs as l } from "react/jsx-runtime";
import { Children as s, isValidElement as m, useEffect as w } from "react";
import { r as x } from "./index-BCGvACM9.js";
import { R as A } from "./index--EmNlyHx.js";
import { R as E } from "./Combination-VYaRRJBZ.js";
import { cn as p } from "./utils/index.js";
import { buttonCloseVariants as N, modalVariants as R } from "./components/Modal/components/Wrapper/Wrapper.variants.js";
import { X as k } from "./x-BPcqkRZd.js";
const B = ({
  children: e,
  theme: o,
  className: d,
  buttonCloseClassName: i,
  onClose: n
}) => {
  const c = s.toArray(e).find(
    (r) => m(r) && r.type === t.Header
  ), f = s.toArray(e).find(
    (r) => m(r) && r.type === t.Body
  ), y = s.toArray(e).find(
    (r) => m(r) && r.type === t.Footer
  ), u = s.toArray(e).filter(
    (r) => !m(r) || ![t.Header, t.Body, t.Footer].includes(
      r.type
    )
  );
  return /* @__PURE__ */ a(E, { children: /* @__PURE__ */ l(
    "div",
    {
      className: "fixed inset-0 grid place-content-center",
      "data-theme": o,
      children: [
        /* @__PURE__ */ a(
          "div",
          {
            className: "absolute inset-0 bg-black opacity-75 animate-in fade-in-0",
            onClick: n,
            role: "presentation"
          }
        ),
        /* @__PURE__ */ l(
          "div",
          {
            className: p(
              R({
                className: d
              })
            ),
            role: "dialog",
            "aria-modal": "true",
            children: [
              c,
              /* @__PURE__ */ l(
                "button",
                {
                  className: p(
                    N({
                      className: i
                    })
                  ),
                  onClick: n,
                  children: [
                    /* @__PURE__ */ a(k, {}),
                    /* @__PURE__ */ a(A, { children: "Dismiss modal" })
                  ]
                }
              ),
              f ?? u,
              y
            ]
          }
        )
      ]
    }
  ) });
}, t = ({ isOpen: e, onClose: o, ...d }) => (w(() => {
  const i = new AbortController(), n = (c) => {
    c.code === "Escape" && (o == null || o());
  };
  return window.addEventListener("keydown", n, {
    signal: i.signal
  }), () => {
    i.abort();
  };
}, [o]), e ? x.createPortal(
  /* @__PURE__ */ a(B, { ...d, onClose: o }),
  document.body
) : null);
t.Header = v;
t.Body = b;
t.Footer = g;
export {
  t as M,
  B as W
};