@layers-app/shared 0.4.6 → 0.4.8

package/dist/components/ColorPicker/ColorPicker.js

@@ -1,35 +1,37 @@
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import { forwardRef as k, useState as g } from "react";
-import { useTranslation as j } from "react-i18next";
-import { Tick02Icon as A } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as E } from "@hugeicons/react";
-import { useMantineTheme as z, getThemeColor as R, Flex as x, Tooltip as D, ColorSwatch as F, parseThemeColor as H, ColorInput as M, ActionIcon as y } from "@mantine/core";
-import { IconPalette as U, IconPencil as V } from "@tabler/icons-react";
-import q from "styled-components";
-import { DEFAULT_VALUES as w } from "../../constants.js";
-import { ColorPickerList as _ } from "./ColorPickerList.js";
-import { ColorPickerToolbar as B } from "./ColorPickerToolbar.js";
-import { resolveColorLabel as G, normalizeColorItem as J } from "./types.js";
-const K = k(
+import { jsx as e, jsxs as v } from "react/jsx-runtime";
+import { forwardRef as z, useState as y } from "react";
+import { useTranslation as E } from "react-i18next";
+import { Tick02Icon as R } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as D } from "@hugeicons/react";
+import { useMantineTheme as I, getThemeColor as F, Flex as x, Tooltip as H, ColorSwatch as M, parseThemeColor as U, ColorInput as V, ActionIcon as w } from "@mantine/core";
+import { IconPalette as q, IconPencil as _ } from "@tabler/icons-react";
+import B from "styled-components";
+import { DEFAULT_VALUES as k } from "../../constants.js";
+import { ColorPickerList as G } from "./ColorPickerList.js";
+import { ColorPickerToolbar as J } from "./ColorPickerToolbar.js";
+import { resolveColorLabel as K, normalizeColorItem as N } from "./types.js";
+const Q = z(
   ({
     value: o,
     onChange: l,
     allowCustomColor: n,
     colors: s,
-    swatchShape: c = "circle",
-    swatchVariant: m = "filled",
-    withTick: d = !1,
-    fullWidth: p = !1,
-    swatchSize: i = 30,
-    ...u
-  }, f) => {
-    const h = z(), r = H({
-      color: o || w.COLORS[0],
-      theme: h
-    }), [t, C] = g(r.value), [L, v] = g(!1);
-    return L ? /* @__PURE__ */ b(x, { align: "center", mih: 30, children: [
+    swatchShape: m = "circle",
+    swatchVariant: d = "filled",
+    withTick: p = !1,
+    fullWidth: u = !1,
+    swatchSize: f = 30,
+    wrapperHeight: i,
+    customSizes: a,
+    ...h
+  }, C) => {
+    const r = I(), t = U({
+      color: o || k.COLORS[0],
+      theme: r
+    }), [b, O] = y(t.value), [T, g] = y(!1);
+    return T ? /* @__PURE__ */ v(x, { align: "center", mih: 30, children: [
       /* @__PURE__ */ e(
-        M,
+        V,
         {
           w: "100%",
           popoverProps: {
@@ -39,62 +41,64 @@ const K = k(
           maxLength: 7,
           withEyeDropper: !1,
           size: "xs",
-          value: t,
-          onChange: C,
+          value: b,
+          onChange: O,
           onChangeEnd: l,
           placeholder: "Select custom color"
         }
       ),
       /* @__PURE__ */ e(
-        y,
+        w,
         {
           radius: "xl",
           variant: "default",
           color: "gray",
-          onClick: () => v(!1),
-          children: /* @__PURE__ */ e(U, { size: 16 })
+          onClick: () => g(!1),
+          children: /* @__PURE__ */ e(q, { size: 16 })
         }
       )
-    ] }, 1) : /* @__PURE__ */ b(
+    ] }, 1) : /* @__PURE__ */ v(
       x,
       {
-        ref: f,
-        ...u,
-        justify: p ? "space-between" : "flex-start",
+        ref: C,
+        ...h,
+        justify: u ? "space-between" : "flex-start",
         align: "center",
+        mih: a && i || 32,
         children: [
-          (s || w.COLORS).map((O, T) => {
+          (s || k.COLORS).map((P, S) => {
             const {
-              value: a,
-              border: P,
-              bg: S,
-              label: $
-            } = J(O);
+              value: c,
+              border: $,
+              bg: j,
+              label: A
+            } = N(P);
             return /* @__PURE__ */ e(
-              N,
+              W,
               {
-                value: a,
-                label: $,
-                isActive: a === o,
-                size: i - 4,
-                swatchShape: c,
-                swatchVariant: m,
-                withTick: d,
-                borderColor: P,
-                bgColor: S,
-                onClick: () => l?.(a)
+                value: c,
+                label: A,
+                isActive: c === o,
+                size: f - 4,
+                swatchShape: m,
+                swatchVariant: d,
+                withTick: p,
+                borderColor: $,
+                bgColor: j,
+                onClick: () => l?.(c),
+                swatchSize: a ? f : void 0
               },
-              a || T
+              c || S
             );
           }),
           n && /* @__PURE__ */ e(
-            y,
+            w,
             {
               radius: "xl",
               variant: "default",
               color: "gray",
-              onClick: () => v(!0),
-              children: /* @__PURE__ */ e(V, { size: 16 })
+              onClick: () => g(!0),
+              children: /* @__PURE__ */ e(_, { size: 16 })
             }
           )
         ]
@@ -102,19 +106,20 @@ const K = k(
       2
     );
   }
-), I = k(
+), L = z(
   ({
     value: o,
     label: l,
     isActive: n,
     swatchShape: s,
-    swatchVariant: c = "filled",
-    withTick: m,
-    borderColor: d,
-    bgColor: p,
+    swatchVariant: m = "filled",
+    withTick: d,
+    borderColor: p,
+    bgColor: u,
+    swatchSize: f,
     ...i
-  }, u) => {
-    const f = z(), { t: h } = j("ui"), r = o ? R(o, f) : "", t = c === "outline", C = G(h, o, l);
+  }, a) => {
+    const h = I(), { t: C } = E("ui"), r = o ? F(o, h) : "", t = m === "outline", b = K(C, o, l);
     return /* @__PURE__ */ e(
       x,
       {
@@ -123,10 +128,10 @@ const K = k(
         justify: "center",
         align: "center",
         style: { position: "relative" },
-        children: /* @__PURE__ */ e(D, { label: C, withArrow: !0, zIndex: 300, children: /* @__PURE__ */ b(
-          F,
+        children: /* @__PURE__ */ e(H, { label: b, withArrow: !0, children: /* @__PURE__ */ v(
+          M,
           {
-            ref: u,
+            ref: a,
             color: t ? "transparent" : r,
             radius: s === "circle" ? "xl" : "sm",
             styles: t ? {
@@ -136,8 +141,8 @@ const K = k(
             style: {
               cursor: "pointer",
               color: "var(--mantine-color-white)",
-              background: t ? p || `var(--mantine-color-${o}-light, ${r}20)` : void 0,
-              border: t ? `2px solid ${d || `var(--mantine-color-${o}-outline, ${r})`}` : void 0
+              background: t ? u || `var(--mantine-color-${o}-light, ${r}20)` : void 0,
+              border: t ? `2px solid ${p || `var(--mantine-color-${o}-outline, ${r})`}` : void 0
             },
             ...i,
             children: [
@@ -157,23 +162,23 @@ const K = k(
                   }
                 }
               ),
-              m && n && /* @__PURE__ */ e(E, { size: 20, icon: A })
+              d && n && /* @__PURE__ */ e(D, { size: 20, icon: R })
             ]
           }
         ) })
       }
     );
   }
-), N = q(I)`
+), W = B(L)`
   .mantine-ColorSwatch-colorOverlay {
     border-radius: ${({ swatchShape: o }) => o === "square" ? "3px" : "50%"};
   }
-`, ao = Object.assign(K, {
-  ColorCircle: I,
-  List: _,
-  Toolbar: B
+`, mo = Object.assign(Q, {
+  ColorCircle: L,
+  List: G,
+  Toolbar: J
 });
 export {
-  I as ColorCircle,
-  ao as ColorPicker
+  L as ColorCircle,
+  mo as ColorPicker
 };

package/dist/components/ColorPicker/ColorPickerToolbar.d.ts

@@ -8,6 +8,7 @@ export interface ColorPickerToolbarProps {
     maxRecentColors?: number;
     disabled?: boolean;
     recentColorsLabel?: string;
+    tooltipZIndex?: number;
 }
 export declare const ColorPickerToolbar: import("react").ForwardRefExoticComponent<ColorPickerToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=ColorPickerToolbar.d.ts.map

package/dist/components/ColorPicker/ColorPickerToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerToolbar.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAYjE;6DAC6D;AAC7D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAsCD,eAAO,MAAM,kBAAkB,oHA0M9B,CAAC"}
+{"version":3,"file":"ColorPickerToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPickerToolbar.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAYjE;6DAC6D;AAC7D,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,YAAY,EAAE,CAAC;IACzB,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAwCD,eAAO,MAAM,kBAAkB,oHA+M9B,CAAC"}

package/dist/components/ColorPicker/ColorPickerToolbar.js

@@ -1,112 +1,116 @@
-import { jsxs as k, jsx as t } from "react/jsx-runtime";
-import { forwardRef as y, useState as M, useCallback as g, useMemo as O } from "react";
-import { useTranslation as j } from "react-i18next";
-import { useComputedColorScheme as P, Box as u, Flex as I, Tooltip as U, UnstyledButton as _ } from "@mantine/core";
-import { TextColorIcon as K, HighlightSwatch as A } from "./icons.js";
-import { normalizeColorItem as w, resolveColorLabel as B, isDefaultColor as q, RECENT_COLOR_HOTKEY as V, colorsEqual as Y } from "./types.js";
-import { useRecentColors as G } from "./useRecentColors.js";
-import r from "./ColorPicker.module.css.js";
-function v({
-  isActive: m,
-  round: d,
-  disabled: h,
-  onClick: f,
+import { jsxs as v, jsx as r } from "react/jsx-runtime";
+import { forwardRef as M, useState as O, useCallback as w, useMemo as j } from "react";
+import { useTranslation as P } from "react-i18next";
+import { useComputedColorScheme as U, Box as m, Flex as A, Tooltip as _, UnstyledButton as q } from "@mantine/core";
+import { TextColorIcon as B, HighlightSwatch as E } from "./icons.js";
+import { normalizeColorItem as L, resolveColorLabel as z, isDefaultColor as V, RECENT_COLOR_HOTKEY as Y, colorsEqual as G } from "./types.js";
+import { useRecentColors as J } from "./useRecentColors.js";
+import t from "./ColorPicker.module.css.js";
+function S({
+  isActive: h,
+  round: f,
+  disabled: d,
+  onClick: b,
   children: i,
-  tooltipLabel: p
+  tooltipLabel: p,
+  tooltipZIndex: a
 }) {
-  const b = /* @__PURE__ */ t(
-    _,
+  const C = /* @__PURE__ */ r(
+    q,
     {
       type: "button",
-      className: `${r.inlineSwatch}${d ? ` ${r.inlineSwatchRound}` : ""}${m ? ` ${r.inlineSwatchActive}` : ""}`,
-      onMouseDown: (a) => a.preventDefault(),
-      onClick: f,
-      disabled: h,
+      className: `${t.inlineSwatch}${f ? ` ${t.inlineSwatchRound}` : ""}${h ? ` ${t.inlineSwatchActive}` : ""}`,
+      onMouseDown: (s) => s.preventDefault(),
+      onClick: b,
+      disabled: d,
       children: i
     }
   );
-  return p ? /* @__PURE__ */ t(U, { label: p, withArrow: !0, zIndex: 400, children: b }) : b;
+  return p ? /* @__PURE__ */ r(_, { label: p, withArrow: !0, zIndex: a, children: C }) : C;
 }
-const re = y(
+const ce = M(
   ({
-    sections: m,
-    onChange: d,
-    withRecentColors: h,
-    maxRecentColors: f = 10,
+    sections: h,
+    onChange: f,
+    withRecentColors: d,
+    maxRecentColors: b = 10,
     disabled: i,
-    recentColorsLabel: p
-  }, b) => {
-    const { t: a } = j("ui"), E = p ?? a("colorPicker.recentlyUsed"), L = P("light", {
+    recentColorsLabel: p,
+    tooltipZIndex: a = 400
+  }, C) => {
+    const { t: s } = P("ui"), D = p ?? s("colorPicker.recentlyUsed"), $ = U("light", {
       getInitialValueInEffect: !0
-    }) === "dark", { recentColors: z, addRecent: x } = G({
-      maxItems: f
-    }), [$, D] = M(z), C = g(
-      (e, o, c) => {
-        h && (x(e, o, c), D((l) => {
-          const n = l.filter(
-            (s) => !(s.value === e && s.sectionKey === o)
+    }) === "dark", { recentColors: H, addRecent: N } = J({
+      maxItems: b
+    }), [R, y] = O(H), k = w(
+      (e, o, n) => {
+        d && (N(e, o, n), y((l) => {
+          const c = l.filter(
+            (u) => !(u.value === e && u.sectionKey === o)
           );
-          return [{ value: e, sectionKey: o, border: c }, ...n].slice(
+          return [{ value: e, sectionKey: o, border: n }, ...c].slice(
             0,
-            f
+            b
           );
-        })), d(e, o);
+        })), f(e, o);
       },
-      [d, h, x]
-    ), S = O(() => {
+      [f, d, N]
+    ), g = j(() => {
       const e = {};
-      for (const o of m) e[o.key] = o;
+      for (const o of h) e[o.key] = o;
       return e;
-    }, [m]), H = g(
+    }, [h]), I = w(
       (e, o) => {
-        const l = (o ? S[o] : void 0)?.colors.find(
-          (s) => w(s).value === e
-        ), n = l ? w(l).label : void 0;
-        return B(a, e, n);
+        const l = (o ? g[o] : void 0)?.colors.find(
+          (u) => L(u).value === e
+        ), c = l ? L(l).label : void 0;
+        return z(s, e, c);
       },
-      [S, a]
-    ), N = g(
-      (e) => q(e) ? L ? "#FFFFFF" : "#000000" : e,
-      [L]
+      [g, s]
+    ), x = w(
+      (e) => V(e) ? $ ? "#FFFFFF" : "#000000" : e,
+      [$]
     );
-    return /* @__PURE__ */ k(u, { ref: b, children: [
-      h && $.length > 0 && /* @__PURE__ */ k(u, { className: r.inlineSection, children: [
-        /* @__PURE__ */ k(u, { className: r.inlineSectionLabelRow, children: [
-          /* @__PURE__ */ t(u, { className: r.inlineSectionLabel, children: E }),
-          /* @__PURE__ */ t("span", { className: r.inlineSectionCaption, children: V })
+    return /* @__PURE__ */ v(m, { ref: C, children: [
+      d && R.length > 0 && /* @__PURE__ */ v(m, { className: t.inlineSection, children: [
+        /* @__PURE__ */ v(m, { className: t.inlineSectionLabelRow, children: [
+          /* @__PURE__ */ r(m, { className: t.inlineSectionLabel, children: D }),
+          /* @__PURE__ */ r("span", { className: t.inlineSectionCaption, children: Y })
         ] }),
-        /* @__PURE__ */ t(I, { className: r.inlineRow, gap: 2, children: $.map((e, o) => {
-          const c = e.sectionKey ? S[e.sectionKey] : void 0, l = c?.key === "textColor" || c?.key === "color" || e.sectionKey === "color", n = H(
+        /* @__PURE__ */ r(A, { className: t.inlineRow, gap: 2, children: R.map((e, o) => {
+          const n = e.sectionKey ? g[e.sectionKey] : void 0, l = n?.key === "textColor" || n?.key === "color" || e.sectionKey === "color", c = I(
             e.value,
             e.sectionKey
           );
-          return l ? /* @__PURE__ */ t(
-            v,
+          return l ? /* @__PURE__ */ r(
+            S,
             {
               isActive: !1,
               disabled: i,
-              tooltipLabel: n,
-              onClick: () => C(e.value, e.sectionKey ?? ""),
-              children: /* @__PURE__ */ t(
-                K,
+              tooltipZIndex: a,
+              tooltipLabel: c,
+              onClick: () => k(e.value, e.sectionKey ?? ""),
+              children: /* @__PURE__ */ r(
+                B,
                 {
                   size: 20,
-                  color: N(e.value),
+                  color: x(e.value),
                   showBorder: !0
                 }
               )
             },
             `${e.sectionKey}-${e.value}-${o}`
-          ) : /* @__PURE__ */ t(
-            v,
+          ) : /* @__PURE__ */ r(
+            S,
             {
               isActive: !1,
               round: !0,
               disabled: i,
-              tooltipLabel: n,
-              onClick: () => C(e.value, e.sectionKey ?? ""),
-              children: /* @__PURE__ */ t(
-                A,
+              tooltipZIndex: a,
+              tooltipLabel: c,
+              onClick: () => k(e.value, e.sectionKey ?? ""),
+              children: /* @__PURE__ */ r(
+                E,
                 {
                   bgColor: e.value,
                   borderColor: e.border || "var(--mantine-color-default-border)"
@@ -117,37 +121,39 @@ const re = y(
           );
         }) })
       ] }),
-      m.map((e) => {
+      h.map((e) => {
         const o = e.key === "highlight" || e.key === "background" || e.key === "textHighlight";
-        return /* @__PURE__ */ k(u, { className: r.inlineSection, children: [
-          e.label && /* @__PURE__ */ t(u, { className: r.inlineSectionLabel, children: e.label }),
-          /* @__PURE__ */ t(I, { className: r.inlineRow, gap: 2, children: e.colors.map((c) => {
-            const { value: l, border: n, label: s } = w(c), R = Y(l, e.value), F = N(l), T = B(a, l, s);
-            return o ? /* @__PURE__ */ t(
-              v,
+        return /* @__PURE__ */ v(m, { className: t.inlineSection, children: [
+          e.label && /* @__PURE__ */ r(m, { className: t.inlineSectionLabel, children: e.label }),
+          /* @__PURE__ */ r(A, { className: t.inlineRow, gap: 2, children: e.colors.map((n) => {
+            const { value: l, border: c, label: u } = L(n), F = G(l, e.value), T = x(l), K = z(s, l, u);
+            return o ? /* @__PURE__ */ r(
+              S,
               {
-                isActive: R,
+                isActive: F,
                 round: !0,
                 disabled: i,
-                tooltipLabel: T,
-                onClick: () => C(l, e.key, n),
-                children: /* @__PURE__ */ t(
-                  A,
+                tooltipZIndex: a,
+                tooltipLabel: K,
+                onClick: () => k(l, e.key, c),
+                children: /* @__PURE__ */ r(
+                  E,
                   {
                     bgColor: l,
-                    borderColor: n || F
+                    borderColor: c || T
                   }
                 )
               },
               l
-            ) : /* @__PURE__ */ t(
-              v,
+            ) : /* @__PURE__ */ r(
+              S,
               {
-                isActive: R,
+                isActive: F,
                 disabled: i,
-                tooltipLabel: T,
-                onClick: () => C(l, e.key),
-                children: /* @__PURE__ */ t(K, { size: 20, color: F, showBorder: !0 })
+                tooltipZIndex: a,
+                tooltipLabel: K,
+                onClick: () => k(l, e.key),
+                children: /* @__PURE__ */ r(B, { size: 20, color: T, showBorder: !0 })
               },
               l
             );
@@ -158,5 +164,5 @@ const re = y(
   }
 );
 export {
-  re as ColorPickerToolbar
+  ce as ColorPickerToolbar
 };

package/dist/components/CommentComposer/CommentEditorHotkeys.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CommentComposerTypes } from './types';
-export declare const CommentEditorHandler: ({ children, onSubmit, editorRef, commentDraft, onBlur, inputContainerRef, isFloat, isEdit, hasChanges, ns, }: {
+export declare const CommentEditorHandler: ({ children, onSubmit, editorRef, commentDraft, onBlur, inputContainerRef, isFloat, isEdit, hasChanges, ns, forceAutoFocus, }: {
     children: React.ReactNode;
     onSubmit: () => void;
     editorRef: React.MutableRefObject<any>;
@@ -14,5 +14,6 @@ export declare const CommentEditorHandler: ({ children, onSubmit, editorRef, com
     isEdit: boolean;
     hasChanges: boolean;
     ns: string;
+    forceAutoFocus?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CommentEditorHotkeys.d.ts.map

package/dist/components/CommentComposer/CommentEditorHotkeys.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentEditorHotkeys.d.ts","sourceRoot":"","sources":["../../../src/components/CommentComposer/CommentEditorHotkeys.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAI/C,eAAO,MAAM,oBAAoB,GAAI,8GAWlC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACvC,iBAAiB,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC/C,YAAY,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,EAAE,CAAC;KACjD,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;CACZ,4CA2KA,CAAC"}
+{"version":3,"file":"CommentEditorHotkeys.d.ts","sourceRoot":"","sources":["../../../src/components/CommentComposer/CommentEditorHotkeys.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAI/C,eAAO,MAAM,oBAAoB,GAAI,8HAYlC;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IACvC,iBAAiB,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC/C,YAAY,EAAE;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,EAAE,CAAC;KACjD,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,OAAO,CAAC;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,4CA6KA,CAAC"}

package/dist/components/CommentComposer/CommentEditorHotkeys.js

@@ -1,55 +1,58 @@
-import { jsx as S } from "react/jsx-runtime";
-import { useRef as C, useEffect as u } from "react";
+import { jsx as C } from "react/jsx-runtime";
+import { useRef as T, useEffect as u } from "react";
 import { useTranslation as k } from "react-i18next";
 import { openRemoveConfirmModal as P } from "../modals/RemoveConfirmModal.js";
-import w from "./CommentComposer.module.css.js";
-const M = ({
+import v from "./CommentComposer.module.css.js";
+const W = ({
   children: b,
   onSubmit: E,
-  editorRef: m,
+  editorRef: a,
   commentDraft: f,
   onBlur: c,
   inputContainerRef: p,
-  isFloat: v,
+  isFloat: w,
   isEdit: i,
   hasChanges: s,
-  ns: y
+  ns: L,
+  forceAutoFocus: S
 }) => {
-  const d = C(null), L = i || v, { t: r } = k(y);
+  const d = T(null), g = i || w || S, { t: r } = k(L);
   return u(() => {
     const t = (e) => {
       if (e.code === "Enter" && !e.shiftKey) {
-        if (e.stopPropagation(), i ? s : !s) return;
+        if (document.querySelector('[id^="mention-item-"]') || (e.stopPropagation(), i ? s : !s)) return;
         d.current && d.current.contains(document.activeElement) && (e.preventDefault(), E());
       }
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
   }, [E, i, s]), u(() => {
-    if (!L) return;
-    const t = m.current;
-    t && setTimeout(() => {
+    if (!g) return;
+    const t = a.current;
+    if (!t) return;
+    const e = window.setTimeout(() => {
       t.focus(() => ({ defaultSelection: "rootEnd" }));
     }, 100);
-  }, []), u(() => {
-    const t = m.current;
+    return () => window.clearTimeout(e);
+  }, [g]), u(() => {
+    const t = a.current;
     if (!t) return;
     const e = () => setTimeout(() => {
       t.focus(() => ({ defaultSelection: "rootEnd" }));
-    }, 0), o = (a) => {
-      const n = a.target;
+    }, 0), o = (m) => {
+      const n = m.target;
       if (!n || n.closest("button") || n.closest("[data-no-focus]")) return;
       if (n.closest("[data-editor-spacer='true']")) {
         e();
         return;
       }
-      const l = n.closest(`.${w.commentComposerWrapper}`);
+      const l = n.closest(`.${v.commentComposerWrapper}`);
       if (!l) return;
-      const g = l.querySelector("[data-comment-footer]");
-      if (!g || !g.contains(n)) return;
-      l.querySelector(`.${w.imagePreviewWrapper}`) || l.querySelector(`.${w.filePreviewWrapper}`) || e();
+      const y = l.querySelector("[data-comment-footer]");
+      if (!y || !y.contains(n)) return;
+      l.querySelector(`.${v.imagePreviewWrapper}`) || l.querySelector(`.${v.filePreviewWrapper}`) || e();
     };
     return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
-  }, [m]), u(() => {
+  }, [a]), u(() => {
     const t = d.current;
     if (!t) return;
     const e = () => {
@@ -62,8 +65,8 @@ const M = ({
     const t = (e) => {
       const o = e.target;
       if (!o) return;
-      const a = p.current;
-      if (a && !a.contains(o) && !(o.closest(".mantine-Modal-root") || o.closest(".floating-text-format-popup") || o.closest('[data-test-id="floating-link-dropdown"]'))) {
+      const m = p.current;
+      if (m && !m.contains(o) && !(o.closest(".mantine-Modal-root") || o.closest(".floating-text-format-popup") || o.closest('[data-test-id="floating-link-dropdown"]'))) {
         if (i) {
           if (!s) {
             e.stopPropagation(), e.preventDefault(), P({
@@ -84,7 +87,7 @@ const M = ({
           c?.();
           return;
         }
-        if (v) {
+        if (w) {
           if (f.text.trim() !== "" || (f.files?.length ?? 0) > 0) {
             e.stopPropagation(), e.preventDefault(), P({
               title: r("editor.composer.discardCommentTitle"),
@@ -106,8 +109,8 @@ const M = ({
       }
     };
     return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
-  }, [i, v, s, f, c]), /* @__PURE__ */ S("div", { ref: d, children: b });
+  }, [i, w, s, f, c]), /* @__PURE__ */ C("div", { ref: d, children: b });
 };
 export {
-  M as CommentEditorHandler
+  W as CommentEditorHandler
 };

package/dist/components/CommentComposer/index.d.ts

@@ -1,3 +1,3 @@
 import { CommentComposerProps } from './types';
-export declare const CommentComposer: ({ children, onSubmit, initialDraft, updateLocation, onBlur, setEdit, ns, }: CommentComposerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CommentComposer: ({ children, onSubmit, initialDraft, updateLocation, onBlur, setEdit, ns, autoFocus, }: CommentComposerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=index.d.ts.map