mongodb-chatbot-ui/build/es/ModalView.js

UI React components for the MongoDB Chatbot Framework

import { j as O } from "./jsx-runtime.js";
import { s as kt, a as wt, c as jt } from "./Transition.js";
import { m as a, M as I, h as D, F as s, b as y, i as Ot, d as it, I as Ct, R as L, x as Et, o as C, j as It, y as Dt, N as Nt, t as $t } from "./index2.js";
import c, { useState as Mt, useCallback as St, lazy as zt, Suspense as Ft } from "react";
import { f as Pt } from "./focus-trap-react.js";
import { l as Lt } from "./X.js";
import { u as Rt, J as At } from "./index9.js";
import { useChatbotContext as Bt } from "./useChatbotContext.js";
import "react-dom";
import "./index8.js";
import "./index10.js";
import "./ChatbotProvider.js";
var R, A = "lg-modal", B = { root: A, close: "".concat(A, "-close_button") };
function Wt(t) {
  var n = function(e, o) {
    if (typeof e != "object" || !e)
      return e;
    var r = e[Symbol.toPrimitive];
    if (r !== void 0) {
      var d = r.call(e, o);
      if (typeof d != "object")
        return d;
      throw new TypeError("@@toPrimitive must return a primitive value.");
    }
    return String(e);
  }(t, "string");
  return typeof n == "symbol" ? n : n + "";
}
function u(t, n, e) {
  return (n = Wt(n)) in t ? Object.defineProperty(t, n, { value: e, enumerable: !0, configurable: !0, writable: !0 }) : t[n] = e, t;
}
function x() {
  return x = Object.assign ? Object.assign.bind() : function(t) {
    for (var n = 1; n < arguments.length; n++) {
      var e = arguments[n];
      for (var o in e)
        Object.prototype.hasOwnProperty.call(e, o) && (t[o] = e[o]);
    }
    return t;
  }, x.apply(this, arguments);
}
function _t(t, n) {
  if (t == null)
    return {};
  var e, o, r = function(p, b) {
    if (p == null)
      return {};
    var f, l, m = {}, g = Object.keys(p);
    for (l = 0; l < g.length; l++)
      f = g[l], b.indexOf(f) >= 0 || (m[f] = p[f]);
    return m;
  }(t, n);
  if (Object.getOwnPropertySymbols) {
    var d = Object.getOwnPropertySymbols(t);
    for (o = 0; o < d.length; o++)
      e = d[o], n.indexOf(e) >= 0 || Object.prototype.propertyIsEnumerable.call(t, e) && (r[e] = t[e]);
  }
  return r;
}
function i(t, n) {
  return n || (n = t.slice(0)), Object.freeze(Object.defineProperties(t, { raw: { value: Object.freeze(n) } }));
}
function Tt(t, n) {
  return function(e) {
    if (Array.isArray(e))
      return e;
  }(t) || function(e, o) {
    var r = e == null ? null : typeof Symbol < "u" && e[Symbol.iterator] || e["@@iterator"];
    if (r != null) {
      var d, p, b, f, l = [], m = !0, g = !1;
      try {
        if (b = (r = r.call(e)).next, o !== 0)
          for (; !(m = (d = b.call(r)).done) && (l.push(d.value), l.length !== o); m = !0)
            ;
      } catch (v) {
        g = !0, p = v;
      } finally {
        try {
          if (!m && r.return != null && (f = r.return(), Object(f) !== f))
            return;
        } finally {
          if (g)
            throw p;
        }
      }
      return l;
    }
  }(t, n) || function(e, o) {
    if (e) {
      if (typeof e == "string")
        return W(e, o);
      var r = Object.prototype.toString.call(e).slice(8, -1);
      if (r === "Object" && e.constructor && (r = e.constructor.name), r === "Map" || r === "Set")
        return Array.from(e);
      if (r === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))
        return W(e, o);
    }
  }(t, n) || function() {
    throw new TypeError(`Invalid attempt to destructure non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`);
  }();
}
function W(t, n) {
  n > t.length && (n = t.length);
  for (var e = 0, o = new Array(n); e < n; e++)
    o[e] = t[e];
  return o;
}
a(R || (R = i([`
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: right;
  flex-direction: row-reverse;
  padding: 24px 35px 35px;
`])));
var _, T, J, V, U, q, G, H, K, Q, X, Y, Z, tt, et, nt, ot, rt, at, h = { Default: "default", Dark: "dark", Light: "light" }, E = { Small: "small", Default: "default", Large: "large" }, Jt = "".concat($t.Desktop + 1, "px"), Vt = a(_ || (_ = i([`
  overflow-y: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity `, `ms ease-in-out;
`])), I.default), Ut = u(u({}, y.Light, a(T || (T = i([`
    background-color: `, `;
  `])), D(0.4, s.black))), y.Dark, a(J || (J = i([`
    background-color: `, `;
  `])), D(0.4, s.gray.dark2))), qt = a(V || (V = i([`
  opacity: 1;
`]))), Gt = a(U || (U = i([`
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding: `, "px ", `px;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
`])), 64, 18), Ht = a(q || (q = i([`
  font-family: `, `;
  transition: transform `, `ms ease-in-out,
    opacity `, `ms ease-in-out;
  margin: auto;
  max-height: calc(100% - `, `px);
  position: relative;
  pointer-events: all;
  transform: translate3d(0, -16px, 0);
  opacity: 0;
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0px 8px 20px -8px `, `;

  &:focus {
    outline: none;
  }
`])), Ot.default, I.default, I.default, 64, D(0.4, s.black)), Kt = u(u({}, y.Light, a(G || (G = i([`
    color: `, `;
    background-color: `, `;
  `])), s.black, s.white)), y.Dark, a(H || (H = i([`
    color: `, `;
    background-color: `, `;
  `])), s.gray.light2, s.black)), Qt = a(K || (K = i([`
  transform: translate3d(0, 0, 0);
  opacity: 1;
`]))), Xt = { small: a(Q || (Q = i([`
    width: 400px;
  `]))), default: a(X || (X = i([`
    width: 600px;
  `]))), large: a(Y || (Y = i([`
    width: 720px;

    @media only screen and (min-width: `, `) {
      width: 960px;
    }
  `])), Jt) }, Yt = a(Z || (Z = i([`
  position: absolute;
  cursor: pointer;
  // x-icon should be 24px from edge. IconButton is 28x28 and Icon is 16x16
  // so there's already (28 - 16) / 2 = 6px of spacing. 24 - 6 = 18.
  right: 18px;
  top: 18px;
`]))), Zt = u(u({}, y.Light, u(u(u({}, h.Default, a(tt || (tt = i([`
      color: `, `;
    `])), s.gray.dark1)), h.Dark, a(et || (et = i([`
      color: `, `;
    `])), s.black)), h.Light, a(nt || (nt = i([`
      color: `, `;
    `])), s.gray.light2))), y.Dark, u(u(u({}, h.Default, a(ot || (ot = i([`
      color: `, `;
    `])), s.gray.base)), h.Dark, a(rt || (rt = i([`
      color: `, `;
    `])), s.black)), h.Light, a(at || (at = i([`
      color: `, `;
    `])), s.gray.light2))), te = ["open", "size", "setOpen", "shouldClose", "closeIconColor", "darkMode", "id", "children", "className", "contentClassName", "initialFocus"], lt = c.forwardRef(function(t, n) {
  var e = t.open, o = e !== void 0 && e, r = t.size, d = r === void 0 ? E.Default : r, p = t.setOpen, b = p === void 0 ? function() {
  } : p, f = t.shouldClose, l = f === void 0 ? function() {
    return !0;
  } : f, m = t.closeIconColor, g = m === void 0 ? h.Default : m, v = t.darkMode, st = t.id, ut = t.children, dt = t.className, ft = t.contentClassName, N = t.initialFocus, pt = _t(t, te), $ = it(v), k = $.theme, mt = $.darkMode, M = c.useRef(null), bt = n ?? M, S = Tt(Mt(null), 2), z = S[0], gt = S[1], ht = Ct().isPopoverOpen, F = St(function() {
    b && l() && b(!1);
  }, [b, l]), P = L({ prefix: "modal", id: st }), w = L({ prefix: "modal" });
  Et(F, { enabled: o && !ht });
  var yt = N ? { initialFocus: "#".concat(P, " ").concat(N), fallbackFocus: "#".concat(w), escapeDeactivates: !1 } : { fallbackFocus: "#".concat(w), escapeDeactivates: !1 }, xt = Object.values(E).includes(d) ? d : E.Default;
  return c.createElement(kt, { in: o, timeout: 150, mountOnEnter: !0, unmountOnExit: !0, nodeRef: M }, function(j) {
    return c.createElement(Rt, null, c.createElement("div", x({}, pt, { id: P, ref: bt, className: C(dt, Vt, Ut[k], u({}, qt, j === "entered")) }), c.createElement(It, { darkMode: mt }, c.createElement(Pt, { active: j === "entered", focusTrapOptions: yt }, c.createElement("div", { className: Gt, ref: function(vt) {
      return gt(vt);
    } }, c.createElement("div", { "data-testid": B.root, "aria-modal": "true", role: "dialog", tabIndex: -1, className: C(Ht, Kt[k], Xt[xt], u({}, Qt, j === "entered"), ft) }, c.createElement(Dt, { popover: { portalContainer: z, scrollContainer: z } }, ut, c.createElement(At, { id: w, "data-testid": B.close, onClick: F, "aria-label": "Close modal", className: C(Yt, Zt[k][g]) }, c.createElement(Lt, null)))))))));
  });
});
lt.displayName = "ModalView";
var ct = c.forwardRef(function(t, n) {
  return c.createElement(Nt, null, c.createElement(lt, x({}, t, { ref: n })));
});
ct.displayName = "Modal";
const ee = {
  modal_container: ({ darkMode: t }) => jt`
    z-index: 100;

    & * {
      box-sizing: border-box;
    }

    > div {
      padding: unset;
    }

    & div[role="dialog"] {
      padding: 0;
      background: ${t ? s.black : s.gray.light3};

      > button {
        top: 14px;
      }
    }

    @media screen and (max-width: 1024px) {
      & div[role="dialog"] {
        width: 100%;
      }

      & > div {
        padding: 32px 18px;
      }
    }
  `
}, ne = zt(
  () => import("./ChatWindow.js").then((t) => ({ default: t.ChatWindow }))
);
function be(t) {
  const { darkMode: n } = it(t.darkMode), { className: e, inputBarId: o, ...r } = t, { closeChat: d, open: p, conversation: b } = Bt(), f = () => {
    var m;
    return ((m = t.shouldClose) == null ? void 0 : m.call(t)) ?? !0 ? (d(), !0) : !1;
  }, l = o ?? "chatbot-modal-input-bar";
  return console.log("chatWindowInputBarId", l), /* @__PURE__ */ O.jsx(Ft, { fallback: null, children: p ? /* @__PURE__ */ O.jsx(
    ct,
    {
      className: wt(ee.modal_container({ darkMode: n }), e),
      open: p,
      size: "large",
      initialFocus: b.error ? void 0 : `#${l}`,
      shouldClose: f,
      children: /* @__PURE__ */ O.jsx(ne, { inputBarId: l, ...r })
    }
  ) : null });
}
export {
  be as ModalView
};