@layers-app/shared 0.4.7 → 0.4.9

package/dist/components/CommentComposer/index.js

@@ -1,22 +1,22 @@
-import { jsx as r, jsxs as C } from "react/jsx-runtime";
-import { useState as Z, useRef as v, useMemo as U, useCallback as ee, useEffect as A } from "react";
-import { useTranslation as te } from "react-i18next";
-import { Attachment02Icon as oe, Sent02Icon as ne } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as $ } from "@hugeicons/react";
-import { Stack as re, Box as se, Group as B, FileButton as ie, ActionIcon as P, UnstyledButton as le, Text as ae, Button as ce, Popover as L } from "@mantine/core";
-import { getMaxUploadSize as de } from "../../config/envConfig.js";
-import { showErrorNotification as W } from "../../helpers/showNotifications.js";
-import { AttachmentsPreview as me } from "../AttachmentsPreview/AttachmentsPreview.js";
-import { CommentEditorHandler as ue } from "./CommentEditorHotkeys.js";
-import { useVirtualAnchor as fe } from "./useVirtualAnchor.js";
-import y from "./CommentComposer.module.css.js";
-function j(n) {
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import { memo as re, useState as ne, useRef as b, useMemo as U, useCallback as se, useEffect as A } from "react";
+import { useTranslation as ie } from "react-i18next";
+import { Attachment02Icon as le, Sent02Icon as ae } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as B } from "@hugeicons/react";
+import { Stack as ce, Box as de, Group as P, FileButton as me, ActionIcon as W, UnstyledButton as ue, Text as fe, Button as pe, Popover as L } from "@mantine/core";
+import { getMaxUploadSize as he } from "../../config/envConfig.js";
+import { showErrorNotification as j } from "../../helpers/showNotifications.js";
+import { AttachmentsPreview as ge } from "../AttachmentsPreview/AttachmentsPreview.js";
+import { CommentEditorHandler as xe } from "./CommentEditorHotkeys.js";
+import { useVirtualAnchor as ye } from "./useVirtualAnchor.js";
+import p from "./CommentComposer.module.css.js";
+function k(n) {
   return "id" in n;
 }
-function pe(n) {
+function Ee(n) {
   return typeof n == "object" && "isTemp" in n;
 }
-function he(n) {
+function be(n) {
   const c = URL.createObjectURL(n);
   return {
     id: `temp-${crypto.randomUUID()}`,
@@ -30,324 +30,344 @@ function he(n) {
     raw: n
   };
 }
-const M = () => de() ?? 5 * 1024 * 1024, ge = 10;
-function xe(n, c) {
+const M = () => he() ?? 5 * 1024 * 1024, we = 10;
+function Ce(n, c) {
   return n(`composer.${c}`, { defaultValue: "" }) || n(`editor.composer.${c}`);
 }
-const Ne = ({
-  children: n,
-  onSubmit: c,
-  initialDraft: d,
-  updateLocation: N,
-  onBlur: k,
-  setEdit: R,
-  ns: S = "comments"
-}) => {
-  const [m, _] = Z({
-    text: d?.text ?? "",
-    files: d?.files ?? []
-  }), { t: h } = te(S), G = h(S === "comments" ? "composer.placeholder" : "editor.composer.placeholder"), g = v(null), u = typeof d?.text < "u", a = {
-    text: m.text,
-    files: m.files
-  }, X = v(null), p = v(null), Y = U(
-    () => ({
-      container: document.createElement("div"),
-      elements: []
-    }),
-    []
-  ), V = v(null), f = !!N, q = fe({
-    isFloat: f,
-    updateLocation: N,
-    selectionRef: V,
-    selectionState: Y
-  }), I = 10 * 30 * 0.7, b = ee(() => {
-    if (!p.current) return;
-    const e = p.current, t = e.querySelector(
-      '[class*="editorWrapper"]'
-    ), s = t?.scrollHeight || 0, o = s > I, l = s > 35, i = e.closest(
-      '[class*="commentComposerFloat"]'
-    ) || e;
-    f && l ? i.setAttribute("data-multiline", "true") : i.removeAttribute("data-multiline"), o && t ? (t.style.maxHeight = `${I}px`, t.style.overflowY = "auto", t.style.scrollbarWidth = "thin", i.setAttribute("data-editor-constrained", "true")) : t && (t.style.maxHeight = "", t.style.overflowY = "", t.style.scrollbarWidth = "", i.removeAttribute("data-editor-constrained"));
-  }, [p, f, I]);
-  A(() => {
-    b();
-  }, [b]), A(() => {
-    if (!p.current) return;
-    const e = new ResizeObserver(() => {
-      b();
-    });
-    return e.observe(p.current), () => {
-      e.disconnect();
-    };
-  }, [b]), A(() => {
-    const e = document.querySelector("main");
-    if (e && f) {
-      const t = e.style.overflow;
-      return e.style.overflow = "hidden", () => {
-        e.style.overflow = t;
+const Ue = re(
+  ({
+    children: n,
+    onSubmit: c,
+    initialDraft: d,
+    updateLocation: R,
+    onBlur: G,
+    setEdit: N,
+    ns: S = "comments",
+    compact: X = !1,
+    placeholder: Y,
+    autoFocus: V
+  }) => {
+    const [m, _] = ne({
+      text: d?.text ?? "",
+      files: d?.files ?? []
+    }), { t: g } = ie(S), q = Y ?? g(S === "comments" ? "composer.placeholder" : "editor.composer.placeholder"), x = b(null), u = typeof d?.text < "u", a = {
+      text: m.text,
+      files: m.files
+    }, J = b(null), h = b(null), O = b(null), K = U(
+      () => ({
+        container: document.createElement("div"),
+        elements: []
+      }),
+      []
+    ), D = b(null), f = !!R, Q = ye({
+      isFloat: f,
+      updateLocation: R,
+      selectionRef: D,
+      selectionState: K
+    }), I = 10 * 30 * 0.7, w = se(() => {
+      if (!h.current) return;
+      const e = h.current, t = e.querySelector(
+        '[class*="editorWrapper"]'
+      ), s = t?.scrollHeight || 0, o = s > I, l = s > 35, i = e.closest(
+        '[class*="commentComposerFloat"]'
+      ) || e;
+      f && l ? i.setAttribute("data-multiline", "true") : i.removeAttribute("data-multiline"), o && t ? (t.style.maxHeight = `${I}px`, t.style.overflowY = "auto", t.style.scrollbarWidth = "thin", i.setAttribute("data-editor-constrained", "true")) : t && (t.style.maxHeight = "", t.style.overflowY = "", t.style.scrollbarWidth = "", i.removeAttribute("data-editor-constrained"));
+    }, [h, f, I]);
+    A(() => {
+      w();
+    }, [w]), A(() => {
+      if (!h.current) return;
+      const e = new ResizeObserver(() => {
+        w();
+      });
+      return e.observe(h.current), () => {
+        e.disconnect();
       };
-    }
-  }, [f]);
-  const { textChanged: J, newFiles: K, deletedFiles: D, hasChanges: F } = U(() => {
-    const e = d?.files || [], t = m.files, s = d?.text !== a.text, o = t.filter((i) => i.isTemp), x = new Set(
-      t.filter(
-        (i) => j(i)
-      ).map((i) => i.id)
-    ), l = e.filter(j).filter((i) => !x.has(i.id)), E = u ? JSON.stringify(d) === JSON.stringify(m) : a.text.trim().length > 0 || o.length > 0 || l.length > 0;
-    return {
-      textChanged: s,
-      newFiles: o,
-      deletedFiles: l,
-      hasChanges: E
-    };
-  }, [u, d, m, a.text]), H = () => {
-    R ? R({
-      id: "",
-      text: "",
-      files: []
-    }) : k?.();
-  }, T = (e, t = !1) => {
-    _((s) => {
-      if (t)
-        return { text: "", files: [] };
-      const o = typeof e == "function" ? e(s) : e;
+    }, [w]), A(() => {
+      const e = document.querySelector("main");
+      if (e && f) {
+        const t = e.style.overflow;
+        return e.style.overflow = "hidden", () => {
+          e.style.overflow = t;
+        };
+      }
+    }, [f]);
+    const { textChanged: Z, newFiles: ee, deletedFiles: te, hasChanges: F } = U(() => {
+      const e = d?.files || [], t = m.files, s = d?.text !== a.text, o = t.filter((i) => i.isTemp), y = new Set(
+        t.filter(
+          (i) => k(i)
+        ).map((i) => i.id)
+      ), l = e.filter(k).filter((i) => !y.has(i.id)), E = u ? JSON.stringify(d) === JSON.stringify(m) : a.text.trim().length > 0 || o.length > 0 || l.length > 0;
       return {
-        text: o.text,
-        files: o.files
+        textChanged: s,
+        newFiles: o,
+        deletedFiles: l,
+        hasChanges: E
       };
-    });
-  }, Q = (e, t) => {
-    e && t((s) => {
-      const o = s.files, x = ge - o.length, l = [], E = [];
-      e.forEach((z) => {
-        z.size > M() ? E.push(z) : l.push(z);
-      }), E.length > 0 && W({
-        message: h("composer.uploadErrors.fileTooLarge", {
-          defaultValue: h("editor.composer.uploadErrors.fileTooLarge", { maxSize: Math.round(M() / (1024 * 1024)) }),
-          maxSize: Math.round(M() / (1024 * 1024))
-        })
-      }), l.length > x && W({
-        message: xe(h, "uploadErrors.tooManyFiles")
+    }, [u, d, m, a.text]), H = () => {
+      N ? N({
+        id: "",
+        text: "",
+        files: []
+      }) : G?.();
+    }, T = (e, t = !1) => {
+      _((s) => {
+        if (t)
+          return { text: "", files: [] };
+        const o = typeof e == "function" ? e(s) : e;
+        return {
+          text: o.text,
+          files: o.files
+        };
       });
-      const i = l.slice(0, x);
-      return {
-        ...s,
-        files: [...o, ...i.map(he)]
-      };
-    });
-  }, w = async () => {
-    try {
-      u ? await c({
-        mode: "edit",
-        data: {
-          textChanged: J,
-          newFiles: K,
-          deletedFiles: D,
-          newText: a.text
-        }
-      }) : await c({
-        mode: "create",
-        data: {
-          text: a.text,
-          files: m.files.filter(pe)
-        }
+    }, oe = (e, t) => {
+      e && t((s) => {
+        const o = s.files, y = we - o.length, l = [], E = [];
+        e.forEach((z) => {
+          z.size > M() ? E.push(z) : l.push(z);
+        }), E.length > 0 && j({
+          message: g("composer.uploadErrors.fileTooLarge", {
+            defaultValue: g("editor.composer.uploadErrors.fileTooLarge", {
+              maxSize: Math.round(M() / (1024 * 1024))
+            }),
+            maxSize: Math.round(M() / (1024 * 1024))
+          })
+        }), l.length > y && j({
+          message: Ce(g, "uploadErrors.tooManyFiles")
+        });
+        const i = l.slice(0, y);
+        return {
+          ...s,
+          files: [...o, ...i.map(be)]
+        };
       });
-    } catch {
-      return;
-    }
-    H(), g.current && g.current.update(() => {
-      const e = g.current._editorState._nodeMap.get("root");
-      if (!e) return;
-      e.clear();
-      const t = g.current._nodes.get("paragraph");
-      if (!t) return;
-      const s = new t.klass();
-      e.append(s), s.select();
-    }), T({ text: "", files: [] }, !0);
-  }, O = /* @__PURE__ */ r(
-    re,
-    {
-      ref: p,
-      className: `
-      ${y.commentComposerWrapper}
-      ${u ? y.editMode : ""}
-      ${f ? y.commentComposerFloat : ""}
+    }, C = async () => {
+      try {
+        u ? await c({
+          mode: "edit",
+          data: {
+            textChanged: Z,
+            newFiles: ee,
+            deletedFiles: te,
+            newText: a.text
+          }
+        }) : await c({
+          mode: "create",
+          data: {
+            text: a.text,
+            files: m.files.filter(Ee)
+          }
+        });
+      } catch {
+        return;
+      }
+      H(), x.current && x.current.update(() => {
+        const e = x.current._editorState._nodeMap.get("root");
+        if (!e) return;
+        e.clear();
+        const t = x.current._nodes.get("paragraph");
+        if (!t) return;
+        const s = new t.klass();
+        e.append(s), s.select();
+      }), T({ text: "", files: [] }, !0);
+    }, $ = /* @__PURE__ */ r(
+      ce,
+      {
+        ref: h,
+        className: `
+      ${p.commentComposerWrapper}
+      ${u ? p.editMode : ""}
+      ${f ? p.commentComposerFloat : ""}
+      ${X ? p.compact : ""}
   `,
-      children: /* @__PURE__ */ C(
-        "div",
-        {
-          className: y.composerContainer,
-          style: {
-            "--placeholder-text": `"${G}"`
-          },
-          children: [
-            /* @__PURE__ */ r("div", { className: y.editorWrapper, children: /* @__PURE__ */ r(
-              ue,
-              {
-                onSubmit: w,
-                editorRef: g,
-                inputContainerRef: p,
-                commentDraft: a,
-                onBlur: H,
-                isEdit: u,
-                isFloat: f,
-                hasChanges: F,
-                ns: S,
-                children: n?.({
-                  onSubmit: w,
-                  handleBlur: () => {
-                  },
-                  setCommentDraft: T,
+        children: /* @__PURE__ */ v(
+          "div",
+          {
+            className: p.composerContainer,
+            style: {
+              "--placeholder-text": `"${q}"`
+            },
+            children: [
+              /* @__PURE__ */ r("div", { className: p.editorWrapper, children: /* @__PURE__ */ r(
+                xe,
+                {
+                  onSubmit: C,
+                  editorRef: x,
+                  inputContainerRef: h,
                   commentDraft: a,
-                  editorRef: g,
-                  initialContent: d?.text ?? ""
-                })
-              }
-            ) }),
-            /* @__PURE__ */ r(se, { h: 10, "data-editor-spacer": !0, tabIndex: 0, style: { width: "100%" } }),
-            /* @__PURE__ */ r(
-              me,
-              {
-                files: m.files,
-                mode: "draft",
-                onRemove: (e) => _((t) => ({
-                  ...t,
-                  files: t.files.filter((s, o) => o !== e)
-                }))
-              }
-            ),
-            /* @__PURE__ */ C(
-              B,
-              {
-                justify: u ? "space-between" : "flex-end",
-                "data-comment-footer": !0,
-                align: "center",
-                w: "unset",
-                mt: m.files.length ? "xs" : 0,
-                tabIndex: 0,
-                gap: "4px",
-                children: [
-                  /* @__PURE__ */ r(
-                    ie,
-                    {
-                      onChange: (e) => Q(e, T),
-                      multiple: !0,
-                      children: (e) => /* @__PURE__ */ r(P, { ...e, variant: "subtle", size: "lg", color: "gray", children: /* @__PURE__ */ r(
-                        $,
-                        {
-                          style: { transform: "rotate(35deg)" },
-                          icon: oe,
-                          size: 20
-                        }
-                      ) })
-                    }
-                  ),
-                  u ? /* @__PURE__ */ C(B, { gap: "8px", children: [
+                  onBlur: H,
+                  isEdit: u,
+                  isFloat: f,
+                  hasChanges: F,
+                  ns: S,
+                  forceAutoFocus: V,
+                  children: n?.({
+                    onSubmit: C,
+                    handleBlur: () => {
+                    },
+                    setCommentDraft: T,
+                    commentDraft: a,
+                    editorRef: x,
+                    initialContent: d?.text ?? ""
+                  })
+                }
+              ) }),
+              /* @__PURE__ */ r(
+                de,
+                {
+                  h: 10,
+                  "data-editor-spacer": !0,
+                  tabIndex: 0,
+                  style: { width: "100%" }
+                }
+              ),
+              /* @__PURE__ */ r("div", { className: p.attachmentsSlot, children: /* @__PURE__ */ r(
+                ge,
+                {
+                  files: m.files,
+                  mode: "draft",
+                  onRemove: (e) => _((t) => ({
+                    ...t,
+                    files: t.files.filter((s, o) => o !== e)
+                  }))
+                }
+              ) }),
+              /* @__PURE__ */ v(
+                P,
+                {
+                  justify: u ? "space-between" : "flex-end",
+                  "data-comment-footer": !0,
+                  align: "center",
+                  w: "unset",
+                  mt: m.files.length ? "xs" : 0,
+                  tabIndex: 0,
+                  gap: "4px",
+                  children: [
                     /* @__PURE__ */ r(
-                      le,
+                      me,
                       {
-                        onClick: H,
-                        "data-no-focus": !0,
-                        style: {
-                          cursor: "pointer",
-                          padding: 0,
-                          margin: 0,
-                          background: "none",
-                          border: "none"
+                        resetRef: O,
+                        onChange: (e) => {
+                          oe(e, T), O.current?.();
                         },
-                        children: /* @__PURE__ */ r(ae, { size: "sm", c: "dimmed", children: h("composer.cancel") })
+                        multiple: !0,
+                        children: (e) => /* @__PURE__ */ r(W, { ...e, variant: "subtle", size: "lg", color: "gray", children: /* @__PURE__ */ r(
+                          B,
+                          {
+                            style: { transform: "rotate(35deg)" },
+                            icon: le,
+                            size: 20
+                          }
+                        ) })
                       }
                     ),
-                    /* @__PURE__ */ r(
-                      ce,
+                    u ? /* @__PURE__ */ v(P, { gap: "8px", children: [
+                      /* @__PURE__ */ r(
+                        ue,
+                        {
+                          onClick: H,
+                          "data-no-focus": !0,
+                          style: {
+                            cursor: "pointer",
+                            padding: 0,
+                            margin: 0,
+                            background: "none",
+                            border: "none"
+                          },
+                          children: /* @__PURE__ */ r(fe, { size: "sm", c: "dimmed", children: g("composer.cancel") })
+                        }
+                      ),
+                      /* @__PURE__ */ r(
+                        pe,
+                        {
+                          size: "xs",
+                          radius: "md",
+                          onClick: C,
+                          disabled: u ? F : !F,
+                          children: g("composer.save")
+                        }
+                      )
+                    ] }) : /* @__PURE__ */ r(
+                      W,
                       {
-                        size: "xs",
-                        radius: "md",
-                        onClick: w,
-                        disabled: u ? F : !F,
-                        children: h("composer.save")
+                        size: "lg",
+                        "data-comment-submit-button": !0,
+                        variant: "filled",
+                        onClick: C,
+                        disabled: !a.text.trim() && a.files.length === 0,
+                        children: /* @__PURE__ */ r(B, { icon: ae, size: 20 })
                       }
                     )
-                  ] }) : /* @__PURE__ */ r(
-                    P,
-                    {
-                      size: "lg",
-                      "data-comment-submit-button": !0,
-                      variant: "filled",
-                      onClick: w,
-                      disabled: !a.text.trim() && a.files.length === 0,
-                      children: /* @__PURE__ */ r($, { icon: ne, size: 20 })
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-  return f ? /* @__PURE__ */ C(
-    L,
-    {
-      opened: !0,
-      position: "bottom-start",
-      offset: 10,
-      withinPortal: !1,
-      floatingStrategy: "fixed",
-      zIndex: 300,
-      middlewares: {
-        flip: { padding: 8 },
-        shift: { padding: 8 },
-        size: {
-          padding: 8,
-          apply: ({ availableHeight: e, rects: t, elements: s }) => {
-            const o = s.floating;
-            if (!o) return;
-            if (e < t.floating.height) {
-              const l = Math.max(e, 120);
-              Object.assign(o.style, {
-                maxHeight: `${l}px`,
-                overflowY: "auto"
-              }), o.setAttribute("data-constrained", "true");
-            } else
-              o.style.maxHeight = "", o.style.overflowY = "", o.removeAttribute("data-constrained");
+                  ]
+                }
+              )
+            ]
           }
-        }
-      },
-      styles: {
-        dropdown: {
-          padding: 0
-        }
-      },
-      children: [
-        /* @__PURE__ */ r(L.Target, { children: /* @__PURE__ */ r(
-          "div",
-          {
-            ref: q,
-            style: {
-              position: "fixed",
-              width: "5px",
-              height: "5px",
-              pointerEvents: "none",
-              visibility: "hidden",
-              top: 0,
-              left: 0
+        )
+      }
+    );
+    return f ? /* @__PURE__ */ v(
+      L,
+      {
+        opened: !0,
+        position: "bottom-start",
+        offset: 10,
+        withinPortal: !1,
+        floatingStrategy: "fixed",
+        zIndex: 300,
+        middlewares: {
+          flip: { padding: 8 },
+          shift: { padding: 8 },
+          size: {
+            padding: 8,
+            apply: ({ availableHeight: e, rects: t, elements: s }) => {
+              const o = s.floating;
+              if (!o) return;
+              if (e < t.floating.height) {
+                const l = Math.max(e, 120);
+                Object.assign(o.style, {
+                  maxHeight: `${l}px`,
+                  overflowY: "auto"
+                }), o.setAttribute("data-constrained", "true");
+              } else
+                o.style.maxHeight = "", o.style.overflowY = "", o.removeAttribute("data-constrained");
             }
           }
-        ) }),
-        /* @__PURE__ */ r(
-          L.Dropdown,
-          {
-            ref: X,
-            className: y.commentComposerFloat,
-            children: O
+        },
+        styles: {
+          dropdown: {
+            padding: 0
           }
-        )
-      ]
-    }
-  ) : O;
-};
+        },
+        children: [
+          /* @__PURE__ */ r(L.Target, { children: /* @__PURE__ */ r(
+            "div",
+            {
+              ref: Q,
+              style: {
+                position: "fixed",
+                width: "5px",
+                height: "5px",
+                pointerEvents: "none",
+                visibility: "hidden",
+                top: 0,
+                left: 0
+              }
+            }
+          ) }),
+          /* @__PURE__ */ r(
+            L.Dropdown,
+            {
+              ref: J,
+              className: p.commentComposerFloat,
+              children: $
+            }
+          )
+        ]
+      }
+    ) : $;
+  }
+);
 export {
-  Ne as CommentComposer
+  Ue as CommentComposer
 };