linear-react-components-ui 1.1.26-beta.4 → 1.1.26-beta.6

package/lib/chunks/index.CM1aLH2W.js

@@ -0,0 +1,205 @@
+import { j as n } from "./jsx-runtime.C7wFtzyj.js";
+import b, { useContext as w, createContext as H, useRef as F, useState as P, useLayoutEffect as X, useEffect as k } from "react";
+import Y from "react-dom";
+import _ from "../dialog/base/Content.js";
+import { r as G, u as J } from "./v1.Ds1rkxUj.js";
+import $ from "../icons/index.js";
+import Q from "../buttons/button_container/index.js";
+import "../buttons/DefaultButton.js";
+import '../assets/button.css';/* empty css                */
+import V from "../dialog/base/Footer.js";
+import Z from "../spinner/index.js";
+import ee, { FormSecurityContext as te } from "../form/withFormSecurity.js";
+const ne = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), A = { randomUUID: ne };
+function oe(e, a, i) {
+  e = e || {};
+  const r = e.random ?? e.rng?.() ?? G();
+  if (r.length < 16)
+    throw new Error("Random bytes length must be >= 16");
+  return r[6] = r[6] & 15 | 64, r[8] = r[8] & 63 | 128, J(r);
+}
+function re(e, a, i) {
+  return A.randomUUID && !e ? A.randomUUID() : oe(e);
+}
+const se = (e) => ({
+  height: e.height,
+  maxHeight: "100%",
+  width: e.width,
+  textAlign: e.textAlign
+}), ae = (e) => /* @__PURE__ */ n.jsx(
+  "button",
+  {
+    id: "botao-fechar-modal-cabecalho",
+    className: "close-button",
+    onClick: e,
+    children: /* @__PURE__ */ n.jsx($, { name: "cancel2" })
+  }
+), ie = (e, a) => a || (e ? /* @__PURE__ */ n.jsx($, { name: e, color: "#000" }) : null), le = ({
+  showCloseButton: e = !0,
+  handlerClose: a,
+  title: i,
+  icon: r,
+  titleIcon: l
+}) => {
+  const f = w(B), h = w(W), g = a || h.handleClose;
+  return /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      role: "button",
+      tabIndex: -1,
+      onFocus: () => {
+      },
+      onBlur: () => {
+      },
+      ref: f?.headerRef,
+      className: "dialog-header",
+      children: [
+        /* @__PURE__ */ n.jsx("div", { className: `${r !== null || l !== null ? "left" : ""}`, children: ie(l, r) }),
+        /* @__PURE__ */ n.jsxs("div", { className: "right", children: [
+          /* @__PURE__ */ n.jsx("h5", { className: "modal-title", children: i }),
+          e && ae(g)
+        ] })
+      ]
+    }
+  );
+}, B = H({}), ce = (e) => {
+  const {
+    showFooter: a = !0,
+    isWaiting: i = !1,
+    width: r = "50%",
+    height: l = "50%",
+    content: f,
+    children: h,
+    className: g = "",
+    wrapperClassName: j = "",
+    contentClassName: c = ""
+  } = e, d = F(null), C = w(te), x = i ? { opacity: 0.4, pointerEvent: "none" } : {}, E = () => i ? /* @__PURE__ */ n.jsx("div", { className: "waitingspinner", children: /* @__PURE__ */ n.jsx(Z, { style: { width: 60 }, delayTime: 0 }) }) : null;
+  return /* @__PURE__ */ n.jsx(B.Provider, { value: { headerRef: d }, children: /* @__PURE__ */ n.jsxs(
+    ue,
+    {
+      width: r,
+      height: l,
+      ...e,
+      className: g,
+      wrapperClassName: `dialog-form-wrapper ${j}`,
+      children: [
+        e.title && /* @__PURE__ */ n.jsx("div", { className: "header-form", children: /* @__PURE__ */ n.jsx(
+          le,
+          {
+            title: e.title,
+            handlerClose: e.handlerClose,
+            icon: e.icon
+          }
+        ) }),
+        /* @__PURE__ */ n.jsx(
+          _,
+          {
+            styleForContent: { ...e.styleForContent, ...x },
+            className: c,
+            children: f || h
+          }
+        ),
+        E(),
+        a && e.buttons && /* @__PURE__ */ n.jsx(V, { children: /* @__PURE__ */ n.jsx(Q, { ...e, style: { ...x }, children: b.Children.toArray(e.buttons.map((t) => C && C.securityBeforeUnload && t && t.type && t.type.name === "CancelButton" ? b.cloneElement(t, { onClick: e.handlerClose }) : b.cloneElement(t))) }) })
+      ]
+    }
+  ) });
+}, De = ee(ce), W = H({}), { body: de } = document, ue = (e) => {
+  const a = re(), {
+    id: i = a,
+    overlay: r = !0,
+    closeOnEsc: l,
+    closeOnOutsideClick: f,
+    wrapperClassName: h = "",
+    className: g = "",
+    children: j,
+    open: c,
+    onOpenChange: d,
+    zIndex: C = 0,
+    handlerClose: x
+  } = e, { headerRef: E } = w(B), t = F(null), U = F(null), [p, R] = P(!1), [u = !0, I] = P(c);
+  c !== void 0 && c !== u && I(c);
+  const D = () => {
+    c !== void 0 && d ? d(!1) : (x && x(), d && d(!1));
+  }, T = (o) => {
+    if (!f) return;
+    const s = o.target;
+    o.stopPropagation(), t !== null && t.current !== null && !p && !t.current.contains(s) && D();
+  }, O = (o) => {
+    o?.key === "Escape" && (o.stopPropagation(), D());
+  }, q = (o) => {
+    const s = !U.current?.contains(o.relatedTarget), y = t.current?.querySelector("#modal-dialog-content")?.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    if (s && y?.length) {
+      const v = y[0];
+      setTimeout(() => {
+        v.focus();
+      }, 150);
+    }
+  }, z = ({
+    positionX: o,
+    positionY: s
+  }) => {
+    if (t.current) {
+      const { width: m, height: y } = t.current.getBoundingClientRect();
+      let v = o <= 0 ? 0 : o, N = s <= 0 ? 0 : s;
+      v + m >= window.innerWidth && (v = window.innerWidth - m), N + y >= window.innerHeight && (N = window.innerHeight - y), t.current.style.transform = `translate(${v}px, ${N}px)`, t.current.style.transition = "none", t.current.style.left = "0", t.current.style.top = "0", t.current.style.position = "absolute";
+    }
+  }, S = (o) => {
+    if (t.current && p) {
+      const { left: s, top: m } = t.current.getBoundingClientRect();
+      z({
+        positionX: o.movementX + s,
+        positionY: o.movementY + m
+      });
+    }
+  }, L = (o) => {
+    const s = o.target, m = E?.current?.contains(s);
+    t.current && m && R(!0);
+  }, M = () => {
+    t.current && R(!1);
+  }, K = /* @__PURE__ */ n.jsxs(
+    "div",
+    {
+      id: i,
+      ref: U,
+      onBlur: q,
+      className: "modalcontainer",
+      onMouseDown: T,
+      style: { zIndex: 99999 + Number(C) },
+      children: [
+        r && /* @__PURE__ */ n.jsx("div", { className: "modal-overlay", "data-testid": "modal-overlay" }),
+        /* @__PURE__ */ n.jsx("div", { className: `dialog ${g}`, "data-testid": "dialog-component", children: /* @__PURE__ */ n.jsx(
+          "div",
+          {
+            className: h,
+            "data-testid": "dialog-wrapper",
+            style: se(e),
+            ref: t,
+            children: j
+          }
+        ) })
+      ]
+    }
+  );
+  return X(() => {
+    const { activeElement: o } = document, s = o;
+    return () => {
+      s?.focus();
+    };
+  }, []), k(() => (u && l && document.addEventListener("keydown", O), () => {
+    document.removeEventListener("keydown", O);
+  }), [u, l]), k(() => (u && (document.addEventListener("mousedown", L), document.addEventListener("mouseup", M), p && document.addEventListener("mousemove", S)), () => {
+    document.removeEventListener("mousedown", L), document.removeEventListener("mouseup", M), document.removeEventListener("mousemove", S);
+  }), [p, u]), u ? /* @__PURE__ */ n.jsx(W.Provider, { value: {
+    handleClose: D,
+    open: u,
+    onOpenChange: d || I
+  }, children: Y.createPortal(K, de) }) : null;
+};
+export {
+  ue as B,
+  W as D,
+  De as F,
+  le as H,
+  B as a
+};