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

React component library

import { jsx as t, Fragment as L, jsxs as D } from "react/jsx-runtime";
import { forwardRef as z, useRef as X, useState as V, useImperativeHandle as q, useEffect as J } from "react";
import { P as o } from "./index-S5Cd7WrG.js";
import { n as C } from "./emotion-styled.browser.esm-CjCaF13H.js";
import K from "./Icon.js";
import { b as w } from "./utils-DtRLzzTZ.js";
import { r as Q } from "./index-64mXPFBC.js";
import { m as M } from "./motion-Ckekul_K.js";
import { u as Y } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { A as R } from "./index-D-c5IxDk.js";
const f = "5rem", h = "3.8rem", a = "1.5rem", Z = (e, n, r) => n && r ? e == "FULL" ? `calc(100dvh - ${h} - ${f})` : `calc(100dvh - ${h} - ${f} - ${a})` : n ? e == "FULL" ? `calc(100dvh - ${h})` : `calc(100dvh - ${h} - ${a})` : r ? e == "FULL" ? `calc(100dvh - ${f})` : `calc(100dvh - ${f} - ${a})` : e == "FULL" ? "100dvh" : `calc(100dvh - ${a})`, P = (e) => e == "FULL" ? "100vw" : `calc(100vw - ${a})`, ee = (e, n, r) => e == "FULL" ? "0" : `${n ? "0" : "16px"} 0 ${r ? "0" : "16px"} 0`, oe = 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;
`, te = 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) => le[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: ${a} ${a} 0 ${a};
  }
  & .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 ${a} 0 ${a};
  }
`, ne = 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"
)};
  }
`, re = 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;
`, ae = z((e, n) => {
  const {
    portalElement: r = document.body,
    isOpen: c = !1,
    header: d,
    footer: l,
    scrollOverlay: i = !1,
    overlay: s = !0,
    overlayColor: m = "rgba(0, 0, 0, 0.3)",
    showCloseButton: p = !0,
    onOpen: g = () => {
    },
    onClose: x = () => {
    },
    zIndex: U = 1e3,
    size: y = "fluid",
    clickOutsideToClose: $ = !0,
    className: v = "",
    style: G = {},
    overlayProps: F,
    overlayAnimation: k = {
      animate: { opacity: 1 },
      exit: { opacity: 0 },
      initial: {
        opacity: 0
      },
      transition: { type: "spring", duration: 0.6 }
    },
    modalAnimation: B = {
      animate: { opacity: 1 },
      exit: { opacity: 0 },
      initial: {
        opacity: 0
      },
      transition: { type: "spring", duration: 0.6 }
    },
    onFinishOpen: _ = () => {
    },
    children: T,
    rest: I
  } = e, E = X(), [b, N] = V(c);
  let j = { theme: Y(), size: y, zIndex: U, className: v, style: G };
  const A = (u) => {
    u.target === u.currentTarget && $ && O(u);
  };
  q(n, () => ({
    open() {
      W();
    },
    close() {
      O();
    },
    isOpen() {
      return b;
    }
  }));
  const W = (u) => {
    N(!0), g(u);
  }, O = (u) => {
    N(!1), x(u);
  };
  return J(() => {
    b === !0 && _();
  }, [b]), /* @__PURE__ */ t(L, { children: b && /* @__PURE__ */ t(L, { children: r ? /* @__PURE__ */ t(L, { children: Q.createPortal(
    /* @__PURE__ */ t(
      H,
      {
        ref: E,
        overlay: s,
        scrollOverlay: i,
        onClickOutsideModal: A,
        overlayColor: m,
        overlayProps: F,
        overlayAnimation: k,
        modalAnimation: B,
        themeProps: j,
        showCloseButton: p,
        close: O,
        header: d,
        footer: l,
        isOpen: c,
        ...I,
        children: T
      }
    ),
    r
  ) }) : /* @__PURE__ */ t(
    H,
    {
      ref: E,
      overlay: s,
      scrollOverlay: i,
      onClickOutsideModal: A,
      overlayColor: m,
      overlayProps: F,
      overlayAnimation: k,
      modalAnimation: B,
      themeProps: j,
      showCloseButton: p,
      close: O,
      header: d,
      footer: l,
      isOpen: c,
      ...I,
      children: T
    }
  ) }) });
}), H = z(
  ({
    overlay: e,
    scrollOverlay: n,
    onClickOutsideModal: r,
    overlayColor: c,
    overlayProps: d,
    overlayAnimation: l,
    modalAnimation: i,
    themeProps: s,
    showCloseButton: m,
    header: p,
    footer: g,
    close: x,
    isOpen: U,
    children: y,
    ...$
  }, v) => /* @__PURE__ */ t(R, { children: e ? /* @__PURE__ */ D(L, { children: [
    /* @__PURE__ */ t(
      re,
      {
        scrollOverlay: n,
        onClick: r,
        overlayColor: c,
        ...d,
        ...l
      }
    ),
    /* @__PURE__ */ t(
      oe,
      {
        ...s,
        onClick: r,
        scrollOverlay: n,
        overlayColor: c,
        isOpen: U,
        ...d,
        ...l,
        children: /* @__PURE__ */ t(
          S,
          {
            ref: v,
            themeProps: s,
            scrollOverlay: n,
            modalAnimation: i,
            showCloseButton: m,
            close: x,
            header: p,
            footer: g,
            ...$,
            children: y
          }
        )
      }
    )
  ] }) : /* @__PURE__ */ t(
    S,
    {
      ref: v,
      themeProps: s,
      modalAnimation: i,
      showCloseButton: m,
      close: x,
      header: p,
      footer: g,
      ...$,
      children: y
    }
  ) })
), S = z(
  ({
    themeProps: e,
    scrollOverlay: n,
    modalAnimation: r,
    showCloseButton: c,
    close: d,
    header: l,
    footer: i,
    children: s,
    ...m
  }, p) => /* @__PURE__ */ t(R, { children: /* @__PURE__ */ D(
    te,
    {
      ref: p,
      ...e,
      ...r,
      header: l,
      footer: i,
      scrollOverlay: n,
      ...m,
      className: `modal-lnc-container ${e == null ? void 0 : e.className}`,
      children: [
        c && /* @__PURE__ */ t(
          ne,
          {
            ...e,
            className: "modal-lnc-times",
            onClick: d,
            children: /* @__PURE__ */ t(K, { icon: "times" })
          }
        ),
        l && /* @__PURE__ */ t("div", { className: "lnc-modal-header", children: l }),
        /* @__PURE__ */ t("div", { className: "lnc-modal-content", children: s }),
        i && /* @__PURE__ */ t("div", { className: "lnc-modal-footer", children: i })
      ]
    }
  ) })
);
ae.propTypes = {
  /**
   * If the value is given modal will use createPortal to be rendered in portalElement
   */
  portalElement: o.any,
  /**
   * Is modal open by default
   */
  isOpen: o.bool,
  header: o.oneOfType([o.string, o.element]),
  footer: o.oneOfType([o.string, o.element]),
  showCloseButton: o.bool,
  overlay: o.bool,
  /**
   * when scrollOverlay=false whole modal contetn will be shown inside viewport and modal content will be scrollable,
   * when scrollOverlay=true modal content won't be scrollable it will be fully shown inside overlay which will be scrollable
   * to use this prop `overlay` must be set to `true`
   * Make sure when setting `scrollOverlay={true} that the parent element has `position: relative`;
   */
  scrollOverlay: o.bool,
  onOpen: o.func,
  onClose: o.func,
  zIndex: o.number,
  clickOutsideToClose: o.bool,
  overlayColor: o.string,
  overlayAnimation: o.object,
  modalAnimation: o.object,
  className: o.string,
  style: o.object,
  size: o.oneOf(["fluid", "xs", "s", "m", "l", "xl", "full"]),
  overlayProps: o.any
};
const le = {
  FLUID: "max-content",
  XS: "320px",
  S: "412px",
  M: "672px",
  L: "1112px",
  XL: "1376px",
  FULL: "100vw"
};
export {
  ae as default
};