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

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

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