@lanaco/lnc-react-ui/dist/Modal.js

React component library

import { jsx as t, Fragment as L, jsxs as T } from "react/jsx-runtime";
import { forwardRef as U, useRef as X, useState as V, useImperativeHandle as q, useEffect as J } from "react";
import { s as C } from "./emotion-styled.browser.esm-DfbrHHed.js";
import K from "./Icon.js";
import { c as w } from "./utils-BUdHa0nB.js";
import { r as Q } from "./index-B2yaYXE2.js";
import { m as M } from "./motion-Ckekul_K.js";
import { u as Y } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { A } from "./index-D-c5IxDk.js";
const f = "5rem", h = "3.8rem", n = "1.5rem", Z = (e, r, a) => r && a ? e == "FULL" ? `calc(100dvh - ${h} - ${f})` : `calc(100dvh - ${h} - ${f} - ${n})` : r ? e == "FULL" ? `calc(100dvh - ${h})` : `calc(100dvh - ${h} - ${n})` : a ? e == "FULL" ? `calc(100dvh - ${f})` : `calc(100dvh - ${f} - ${n})` : e == "FULL" ? "100dvh" : `calc(100dvh - ${n})`, P = (e) => e == "FULL" ? "100vw" : `calc(100vw - ${n})`, ee = (e, r, a) => e == "FULL" ? "0" : `${r ? "0" : "16px"} 0 ${a ? "0" : "16px"} 0`, te = C(M.div)`
  position: ${(e) => e.scrollOverlay == !0 ? "absolute" : "fixed"};
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: ${(e) => e.scrollOverlay === !0 ? "transparent" : e.overlayColor};
  z-index: ${(e) => e.zIndex};
  display: flex;
`, oe = C(M.div)`
  position: relative;
  width: 50%;
  background-color: white;
  ${(e) => e.scrollOverlay == !1 ? "position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" : "height: fit-content; margin-right: auto; margin-left: auto;"}
  background-color: ${(e) => w(e.theme, "Modal", "default", "enabled", "bg")};
  z-index: ${(e) => e.zIndex};
  width: ${(e) => ne[e.size.toUpperCase()]};
  max-width: ${(e) => P(e.size.toUpperCase())};
  box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
    0px 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-radius: ${(e) => e.size.toUpperCase() != "FULL" ? "16px" : "0"};
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  & .lnc-modal-header {
    max-height: ${h};
    overflow: hidden;
    padding: ${n} ${n} 0 ${n};
  }
  & .lnc-modal-header > h1,
  h2,
  h3 {
    margin: 0;
  }
  & .lnc-modal-footer {
    max-height: ${f};
    overflow: hidden;
    padding-top: 1rem;
  }
  ${(e) => e.size.toUpperCase() == "FULL" && "height: 100dvh"};

  & .lnc-modal-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    scrollbar-width: thin;
    ${(e) => e.scrollOverlay == !1 && `max-height: ${Z(
  e.size.toUpperCase(),
  e.header,
  e.footer
)};`}
    overflow: auto;
    margin: ${(e) => ee(e.size, e.header, e.footer)};
    padding: 0 ${n} 0 ${n};
  }
`, re = C.div`
  position: absolute;
  cursor: pointer;
  top: 1.375rem;
  right: 1.375rem;
  color: ${(e) => w(
  e.theme,
  "Modal",
  "primary",
  "enabled",
  "cancelButton"
)};
  height: 1.5rem;
  width: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  & i {
    font-size: 1.125rem;
  }

  &:hover {
    background-color: ${(e) => w(
  e.theme,
  "Modal",
  "primary",
  "hover",
  "cancelBtnBg",
  "cancelBtnBgOpacity"
)};
  }
  &:focus {
    background-color: ${(e) => w(
  e.theme,
  "Modal",
  "primary",
  "focus",
  "cancelBtnBg",
  "cancelBtnBgOpacity"
)};
  }
`, ae = C(M.div)`
  display: ${(e) => e.scrollOverlay === !0 ? "block" : "none"};
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: ${(e) => e.overlayColor};
  z-index: 3;
`, ge = U((e, r) => {
  const {
    preventDefault: a = !1,
    portalElement: d = document.body,
    isOpen: c = !1,
    header: i,
    footer: l,
    scrollOverlay: s = !1,
    overlay: m = !0,
    overlayColor: p = "rgba(0, 0, 0, 0.3)",
    showCloseButton: u = !0,
    onOpen: g = () => {
    },
    onClose: O = () => {
    },
    zIndex: x = 1e3,
    size: $ = "fluid",
    clickOutsideToClose: y = !0,
    className: j = "",
    style: G = {},
    overlayProps: F,
    overlayAnimation: z = {
      animate: { opacity: 1 },
      exit: { opacity: 0 },
      initial: {
        opacity: 0
      },
      transition: { type: "spring", duration: 0.6 }
    },
    modalAnimation: k = {
      animate: { opacity: 1 },
      exit: { opacity: 0 },
      initial: {
        opacity: 0
      },
      transition: { type: "spring", duration: 0.6 }
    },
    onFinishOpen: _ = () => {
    },
    children: B,
    rest: I
  } = e, D = X(), [v, E] = V(c);
  let N = { theme: Y(), size: $, zIndex: x, className: j, style: G };
  const H = (o) => {
    a && (o == null || o.preventDefault(), o == null || o.stopPropagation()), o.target === o.currentTarget && y && b(o);
  };
  q(r, () => ({
    open() {
      W();
    },
    close() {
      b();
    },
    isOpen() {
      return v;
    }
  }));
  const W = (o) => {
    E(!0), g(o);
  }, b = (o) => {
    E(!1), O(o);
  };
  return J(() => {
    v === !0 && _();
  }, [v]), /* @__PURE__ */ t(L, { children: v && /* @__PURE__ */ t(L, { children: d ? /* @__PURE__ */ t(L, { children: Q.createPortal(
    /* @__PURE__ */ t(
      R,
      {
        ref: D,
        overlay: m,
        scrollOverlay: s,
        onClickOutsideModal: H,
        overlayColor: p,
        overlayProps: F,
        overlayAnimation: z,
        modalAnimation: k,
        themeProps: N,
        showCloseButton: u,
        close: b,
        header: i,
        footer: l,
        isOpen: c,
        ...I,
        children: B
      }
    ),
    d
  ) }) : /* @__PURE__ */ t(
    R,
    {
      ref: D,
      overlay: m,
      scrollOverlay: s,
      onClickOutsideModal: H,
      overlayColor: p,
      overlayProps: F,
      overlayAnimation: z,
      modalAnimation: k,
      themeProps: N,
      showCloseButton: u,
      close: b,
      header: i,
      footer: l,
      isOpen: c,
      ...I,
      children: B
    }
  ) }) });
}), R = U(
  ({
    overlay: e,
    scrollOverlay: r,
    onClickOutsideModal: a,
    overlayColor: d,
    overlayProps: c,
    overlayAnimation: i,
    modalAnimation: l,
    themeProps: s,
    showCloseButton: m,
    header: p,
    footer: u,
    close: g,
    isOpen: O,
    children: x,
    ...$
  }, y) => /* @__PURE__ */ t(A, { children: e ? /* @__PURE__ */ T(L, { children: [
    /* @__PURE__ */ t(
      ae,
      {
        scrollOverlay: r,
        onClick: a,
        overlayColor: d,
        ...c,
        ...i
      }
    ),
    /* @__PURE__ */ t(
      te,
      {
        ...s,
        onClick: a,
        scrollOverlay: r,
        overlayColor: d,
        isOpen: O,
        ...c,
        ...i,
        children: /* @__PURE__ */ t(
          S,
          {
            ref: y,
            themeProps: s,
            scrollOverlay: r,
            modalAnimation: l,
            showCloseButton: m,
            close: g,
            header: p,
            footer: u,
            ...$,
            children: x
          }
        )
      }
    )
  ] }) : /* @__PURE__ */ t(
    S,
    {
      ref: y,
      themeProps: s,
      modalAnimation: l,
      showCloseButton: m,
      close: g,
      header: p,
      footer: u,
      ...$,
      children: x
    }
  ) })
), S = U(
  ({
    themeProps: e,
    scrollOverlay: r,
    modalAnimation: a,
    showCloseButton: d,
    close: c,
    header: i,
    footer: l,
    children: s,
    ...m
  }, p) => /* @__PURE__ */ t(A, { children: /* @__PURE__ */ T(
    oe,
    {
      ref: p,
      ...e,
      ...a,
      header: i,
      footer: l,
      scrollOverlay: r,
      ...m,
      className: `modal-lnc-container ${e == null ? void 0 : e.className}`,
      children: [
        d && /* @__PURE__ */ t(
          re,
          {
            ...e,
            className: "modal-lnc-times",
            onClick: c,
            children: /* @__PURE__ */ t(K, { icon: "times" })
          }
        ),
        i && /* @__PURE__ */ t("div", { className: "lnc-modal-header", children: i }),
        /* @__PURE__ */ t("div", { className: "lnc-modal-content", children: s }),
        l && /* @__PURE__ */ t("div", { className: "lnc-modal-footer", children: l })
      ]
    }
  ) })
), ne = {
  FLUID: "max-content",
  XS: "320px",
  S: "412px",
  M: "672px",
  L: "1112px",
  XL: "1376px",
  FULL: "100vw"
};
export {
  ge as default
};