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

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

import { t as F } from "./x-KjMYhcCb.js";
import { t as k } from "./dist-EV-1XXQr.js";
import { t as h } from "./utils-COaoD3PI.js";
import { t as w } from "./Combination-DFcElBFt.js";
import { t as A } from "./proxy-Cx8v8fok.js";
import { Body as N } from "./components/Modal/components/Body/Body.js";
import { Footer as R } from "./components/Modal/components/Footer/Footer.js";
import { Header as x } from "./components/Modal/components/Header/Header.js";
import { buttonCloseVariants as B, modalVariants as C } from "./components/Modal/components/Wrapper/Wrapper.variants.js";
import { Children as m, isValidElement as l, useEffect as g, useRef as E, useState as H } from "react";
import { createPortal as V } from "react-dom";
import { Fragment as j, jsx as a, jsxs as c } from "react/jsx-runtime";
var D = ({ buttonCloseClassName: f, children: r, className: n, containerClassName: s, showCloseButton: p = !0, theme: i, transition: u, onClose: d }) => {
  const o = m.toArray(r).find((t) => l(t) && t.type === e.Header), y = m.toArray(r).find((t) => l(t) && t.type === e.Body), b = m.toArray(r).find((t) => l(t) && t.type === e.Footer), v = m.toArray(r).filter((t) => !l(t) || ![
    e.Header,
    e.Body,
    e.Footer
  ].includes(t.type));
  return /* @__PURE__ */ a(w, { children: /* @__PURE__ */ c("div", {
    className: h("fixed inset-0 grid place-content-center", s),
    "data-theme": i,
    children: [/* @__PURE__ */ a("div", {
      className: "absolute inset-0 bg-black opacity-70 dark:opacity-85 animate-in fade-in-0",
      onClick: d,
      role: "presentation"
    }), /* @__PURE__ */ c(A.div, {
      className: h(C({ className: n })),
      role: "dialog",
      "aria-modal": "true",
      layout: "size",
      transition: u ?? {
        duration: 0.25,
        ease: "easeInOut"
      },
      children: [
        o,
        p && /* @__PURE__ */ c("button", {
          className: h(B({ className: f })),
          onClick: d,
          children: [/* @__PURE__ */ a(F, {}), /* @__PURE__ */ a(k, { children: "Dismiss modal" })]
        }),
        y ?? v,
        b
      ]
    })]
  }) });
}, e = ({ isOpen: f, onClose: r, container: n, theme: s, ...p }) => {
  const i = E(null), [u, d] = H(null);
  return g(() => {
    if (!i.current || s || n) return;
    const o = i.current.closest("[data-theme]");
    o && d(o);
  }, [s, n]), g(() => {
    const o = new AbortController(), y = (b) => {
      b.code === "Escape" && r?.();
    };
    return window.addEventListener("keydown", y, { signal: o.signal }), () => {
      o.abort();
    };
  }, [r]), /* @__PURE__ */ c(j, { children: [/* @__PURE__ */ a("span", {
    ref: i,
    "data-testid": "modal-anchor",
    hidden: !0
  }), f && V(/* @__PURE__ */ a(D, {
    ...p,
    theme: s,
    onClose: r
  }), n || u || document.body)] });
};
e.Header = x;
e.Body = N;
e.Footer = R;
export {
  D as n,
  e as t
};