react-box-tools/dist/modal.js

Box tools react components, utils and hooks

import { jsx as o, Fragment as w, jsxs as p } from "react/jsx-runtime";
import { c as t } from "./clsx-DG-5vF7T.js";
import { M as x, S as F } from "./shakeElement-DSHg08bY.js";
import { useRef as M, useState as f, useEffect as R } from "react";
const S = (e) => {
  const {
    show: s,
    backdrop: u = !0,
    shakeClass: r,
    movable: h,
    onFirstOpen: l,
    onOpen: n,
    onClose: a,
    keepMount: v = !1,
    className: N,
    size: b = "md",
    position: $ = "center",
    children: y,
    ...O
  } = e, c = M(null), [d, i] = f(!1), [m, k] = f(!1);
  return R(() => {
    !m && s && (k(!0), l && l()), s && !d && (document.body.style.overflow = "hidden", i(!0), n && n()), !s && d && (document.querySelectorAll(".modal.show").length <= 1 && (document.body.style.overflow = "visible"), i(!1), a && a());
  }, [s, d, m, n, a, l]), !v && !s || !m && !s ? /* @__PURE__ */ o(w, {}) : /* @__PURE__ */ p(
    "div",
    {
      className: t(
        `modal ${s && "show"} ${u && "backdrop"} ${N}`
      ),
      children: [
        /* @__PURE__ */ o(
          "div",
          {
            ...O,
            ref: c,
            className: t(`modal-content ${b} ${$}`),
            children: y
          }
        ),
        //@ts-ignore
        h && s && /* @__PURE__ */ o(x, { elementRef: c }),
        r && s && //@ts-ignore
        /* @__PURE__ */ o(F, { className: r, elementRef: c })
      ]
    }
  );
}, g = (e) => /* @__PURE__ */ o("div", { ...e, className: t(`modal-head ${e.className}`), children: e.children }), j = (e) => /* @__PURE__ */ o("div", { ...e, className: t(`modal-body ${e.className}`), children: e.children }), C = (e) => /* @__PURE__ */ o("div", { ...e, className: t(`modal-foot ${e.className}`), children: e.children }), H = Object.assign(S, {
  Head: g,
  Body: j,
  Foot: C
});
export {
  S as Component,
  H as Modal
};