@layers-app/shared 0.4.6 → 0.4.8

package/dist/components/Chat/MessageList/index.js

@@ -1,159 +1,211 @@
-import { jsxs as T, jsx as l } from "react/jsx-runtime";
-import { forwardRef as D, useRef as i, useState as P, useEffect as u, useCallback as W, useImperativeHandle as k } from "react";
-import { ArrowDown01Icon as C } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon as G } from "@hugeicons/react";
-import { ScrollArea as J, ActionIcon as K } from "@mantine/core";
-import s from "./MessageList.module.css.js";
-const Q = D(
-  function({
-    children: L,
-    className: y,
-    style: E,
-    stickToBottom: f,
-    unreadCount: v = 0,
-    onStickChange: h,
-    resetKey: F,
-    onReachTop: g,
-    floatingTopAction: N,
-    bottomOffset: M = 0
-  }, $) {
-    const r = i(null), B = i(null), n = i(!0), w = i(0), [A, q] = P(!1), H = i(h), b = i(g), x = i(!1);
-    u(() => {
-      H.current = h;
-    }, [h]), u(() => {
-      b.current = g;
-    }, [g]), u(() => {
-      const e = r.current, o = B.current;
-      if (!e || !o) return;
-      const t = new IntersectionObserver(
-        (m) => {
-          if (!m[0]?.isIntersecting || x.current || !b.current || n.current) return;
-          x.current = !0;
-          const p = e.scrollHeight, c = e.scrollTop;
-          Promise.resolve(b.current()).then(() => {
-            requestAnimationFrame(() => {
-              const a = r.current;
-              if (!a) return;
-              const d = a.scrollHeight - p;
-              d > 0 && (a.scrollTop = c + d);
-            });
-          }).finally(() => {
-            x.current = !1;
-          });
-        },
-        { root: e, rootMargin: "300px 0px 0px 0px" }
-      );
-      return t.observe(o), () => t.disconnect();
-    }, []);
-    const z = W(() => {
-      r.current && r.current.scrollTo({
-        top: r.current.scrollHeight,
-        behavior: "smooth"
-      });
-    }, []);
-    k(
-      $,
-      () => ({
-        scrollToBottom: () => {
-          const e = r.current;
-          if (!e) return;
-          n.current = !0, H.current?.(!0), e.scrollTop = e.scrollHeight;
-          const o = () => {
-            const t = r.current;
-            t && (t.scrollTop = t.scrollHeight, n.current = !0);
+import { jsxs as U, jsx as s } from "react/jsx-runtime";
+import { forwardRef as se, useRef as a, useState as B, useEffect as p, useCallback as v, useLayoutEffect as Y, useImperativeHandle as ce } from "react";
+import { ArrowDown01Icon as ie } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as ae } from "@hugeicons/react";
+import { ScrollArea as ue, ActionIcon as de } from "@mantine/core";
+import { useVirtualizer as fe } from "@tanstack/react-virtual";
+import l from "./MessageList.module.css.js";
+const he = 300, me = 100;
+function pe({
+  items: t,
+  renderItem: N,
+  getItemKey: f,
+  estimateItemSize: g = 64,
+  className: O,
+  style: G,
+  contentStyle: J,
+  stickToBottom: w,
+  unreadCount: T = 0,
+  onStickChange: x,
+  onReachTop: b,
+  floatingTopAction: z,
+  bottomOffset: K = 0,
+  contentBottomPad: F = 0
+}, Q) {
+  const u = a(null), S = a(null), n = a(!0), [I, X] = B(!1), [q, D] = B(0), [M, V] = B(null), h = a(null), m = a(x), y = a(b), $ = a(!1);
+  p(() => {
+    m.current = x;
+  }, [x]), p(() => {
+    y.current = b;
+  }, [b]);
+  const o = t.length > me, Z = v(
+    (e) => typeof g == "function" ? g(t[e], e) : g,
+    [g, t]
+  ), d = fe({
+    count: t.length,
+    // Only let the virtualizer drive the scroll element while virtualizing, so
+    // the flow path owns scrolling outright (no competing scroll math).
+    getScrollElement: v(
+      () => o ? u.current : null,
+      [o]
+    ),
+    estimateSize: Z,
+    getItemKey: v(
+      (e) => f(t[e], e),
+      [t, f]
+    ),
+    overscan: 12
+  }), _ = d.getTotalSize(), C = o ? d.getVirtualItems() : [], j = o ? Math.max(0, q - _) : 0, k = j + _ + F, c = v(() => {
+    const e = u.current;
+    e && (e.scrollTop = e.scrollHeight);
+  }, []);
+  Y(() => {
+    !w || !n.current || c();
+  }, [k, t, w, c]), p(() => {
+    const e = S.current;
+    if (!e || !w) return;
+    const r = new ResizeObserver(() => {
+      n.current && c();
+    });
+    return r.observe(e), () => r.disconnect();
+  }, [w, c]);
+  const W = v(
+    (e) => {
+      const r = t.findIndex((i, R) => f(i, R) === e);
+      r < 0 || (n.current = !1, o ? (d.scrollToIndex(r, { align: "center" }), requestAnimationFrame(
+        () => d.scrollToIndex(r, { align: "center" })
+      )) : S.current?.querySelector(`[data-index="${r}"]`)?.scrollIntoView({ block: "center" }), V(e), h.current && window.clearTimeout(h.current), h.current = window.setTimeout(
+        () => V(null),
+        1600
+      ));
+    },
+    [t, f, o, d]
+  );
+  ce(
+    Q,
+    () => ({
+      scrollToBottom: () => {
+        n.current = !0, m.current?.(!0), c();
+      },
+      scrollToKey: W
+    }),
+    [c, W]
+  ), p(
+    () => () => {
+      h.current && window.clearTimeout(h.current);
+    },
+    []
+  ), Y(() => {
+    const e = u.current;
+    if (!e) return;
+    const r = new ResizeObserver(() => D(e.clientHeight));
+    return r.observe(e), D(e.clientHeight), () => r.disconnect();
+  }, []), p(() => {
+    const e = u.current;
+    if (!e) return;
+    let r = !1, i = e.scrollTop;
+    const R = () => {
+      const { scrollTop: H, scrollHeight: te, clientHeight: oe } = e, P = te - H - oe, ne = H < i;
+      i = H, P < 40 ? n.current || (n.current = !0, m.current?.(!0)) : ne && n.current && (n.current = !1, m.current?.(!1));
+      const E = P > 200;
+      if (E !== r && (r = E, X(E)), H < he && !n.current && !$.current && y.current) {
+        $.current = !0;
+        const le = e.scrollHeight - e.scrollTop;
+        Promise.resolve(y.current()).then(() => {
+          const L = () => {
+            const A = u.current;
+            A && (A.scrollTop = A.scrollHeight - le);
           };
           requestAnimationFrame(() => {
-            o(), requestAnimationFrame(o);
+            L(), requestAnimationFrame(() => {
+              L(), requestAnimationFrame(L);
+            });
           });
-        }
-      }),
-      []
-    ), u(() => {
-      !f || !r.current || (n.current = !0, w.current = r.current.scrollHeight, r.current.scrollTop = r.current.scrollHeight);
-    }, [f, F]), u(() => {
-      const e = r.current;
-      if (!f || !e) return;
-      const o = new ResizeObserver(() => {
-        const c = e.scrollHeight;
-        c !== w.current && n.current && (e.scrollTop = c), w.current = c;
-      }), t = e.firstElementChild;
-      t && o.observe(t);
-      let m = !1;
-      const p = () => {
-        const { scrollTop: c, scrollHeight: a, clientHeight: d } = e, I = a - c - d, S = I < 40;
-        S !== n.current && (n.current = S, H.current?.(S));
-        const R = I > 200;
-        R !== m && (m = R, q(R));
-      };
-      return e.addEventListener("scroll", p, { passive: !0 }), () => {
-        o.disconnect(), e.removeEventListener("scroll", p);
-      };
-    }, [f]);
-    const O = v > 999 ? "999+" : v, j = v > 0;
-    return /* @__PURE__ */ T(
-      "div",
-      {
-        className: s.container,
-        style: { "--ml-bottom-offset": `${M}px` },
-        children: [
-          /* @__PURE__ */ l(
-            J,
-            {
-              className: `${s.root}${y ? ` ${y}` : ""}`,
-              style: E,
-              type: "auto",
-              scrollbars: "y",
-              viewportRef: r,
-              "data-testid": "message-list",
-              styles: {
-                content: {
-                  display: "flex",
-                  flexDirection: "column",
-                  minHeight: "100%"
-                }
-              },
-              children: /* @__PURE__ */ T("div", { className: s.wrapper, children: [
-                /* @__PURE__ */ l(
+        }).finally(() => {
+          $.current = !1;
+        });
+      }
+    };
+    return e.addEventListener("scroll", R, { passive: !0 }), () => e.removeEventListener("scroll", R);
+  }, []);
+  const ee = T > 999 ? "999+" : T, re = T > 0;
+  return /* @__PURE__ */ U(
+    "div",
+    {
+      className: l.container,
+      style: { "--ml-bottom-offset": `${K}px` },
+      children: [
+        /* @__PURE__ */ s(
+          ue,
+          {
+            className: `${l.root}${O ? ` ${O}` : ""}`,
+            style: G,
+            type: "auto",
+            scrollbars: "y",
+            viewportRef: u,
+            "data-testid": "message-list",
+            children: /* @__PURE__ */ s(
+              "div",
+              {
+                ref: S,
+                className: l.virtualRoot,
+                "data-testid": "message-list-items",
+                "data-flow": !o || void 0,
+                style: {
+                  height: o ? k : void 0,
+                  // Fill the viewport (real px — a `%` doesn't resolve through Mantine
+                  // ScrollArea's content wrapper) so the leading margin-top:auto can
+                  // push a short chat to the bottom edge.
+                  minHeight: o ? void 0 : q || void 0,
+                  paddingBottom: o ? void 0 : F,
+                  ...J
+                },
+                children: o ? C.map((e) => /* @__PURE__ */ s(
                   "div",
                   {
-                    ref: B,
-                    className: s.top,
-                    "data-testid": "message-list-top"
-                  }
-                ),
-                /* @__PURE__ */ l("div", { className: s.items, "data-testid": "message-list-items", children: L })
-              ] })
-            }
-          ),
-          A && /* @__PURE__ */ T("div", { className: s.scrollToBottomWrap, children: [
-            /* @__PURE__ */ l(
-              K,
-              {
-                variant: "default",
-                radius: "xl",
-                size: 34,
-                onClick: z,
-                "aria-label": "Scroll to bottom",
-                "data-testid": "scroll-to-bottom",
-                children: /* @__PURE__ */ l(G, { icon: C, size: 18 })
+                    "data-index": e.index,
+                    ref: d.measureElement,
+                    className: `${l.virtualRow}${e.key === M ? ` ${l.highlightRow}` : ""}`,
+                    style: { transform: `translateY(${j + e.start}px)` },
+                    children: N(t[e.index], e.index)
+                  },
+                  e.key
+                )) : t.map((e, r) => {
+                  const i = f(e, r);
+                  return /* @__PURE__ */ s(
+                    "div",
+                    {
+                      "data-index": r,
+                      className: `${l.flowRow}${i === M ? ` ${l.highlightRow}` : ""}`,
+                      children: N(e, r)
+                    },
+                    i
+                  );
+                })
               }
-            ),
-            j && /* @__PURE__ */ l("span", { className: s.scrollToBottomBadge, children: O })
-          ] }),
-          N && /* @__PURE__ */ l(
-            "div",
+            )
+          }
+        ),
+        I && /* @__PURE__ */ U("div", { className: l.scrollToBottomWrap, children: [
+          /* @__PURE__ */ s(
+            de,
             {
-              className: s.floatingTopAction,
-              "data-raised": A || void 0,
-              children: N
+              variant: "default",
+              radius: "xl",
+              size: 34,
+              onClick: () => {
+                n.current = !0, m.current?.(!0), c();
+              },
+              "aria-label": "Scroll to bottom",
+              "data-testid": "scroll-to-bottom",
+              children: /* @__PURE__ */ s(ae, { icon: ie, size: 18 })
             }
-          )
-        ]
-      }
-    );
-  }
-);
-Q.displayName = "MessageList";
+          ),
+          re && /* @__PURE__ */ s("span", { className: l.scrollToBottomBadge, children: ee })
+        ] }),
+        z && /* @__PURE__ */ s(
+          "div",
+          {
+            className: l.floatingTopAction,
+            "data-raised": I || void 0,
+            children: z
+          }
+        )
+      ]
+    }
+  );
+}
+const be = se(pe);
 export {
-  Q as MessageList
+  be as MessageList
 };

package/dist/components/Chat/MessageMeta/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/MessageMeta/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,2CAelB;yBAxBe,WAAW"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/MessageMeta/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,2CAgBlB;yBAzBe,WAAW"}

package/dist/components/Chat/MessageMeta/index.js

@@ -1,33 +1,35 @@
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { jsxs as l, jsx as s } from "react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
 import e from "./MessageMeta.module.css.js";
-function l({
+function g({
   time: t,
   edited: i,
-  views: s,
-  outgoing: d,
-  inReactions: o,
-  children: n,
-  className: r,
-  style: m
+  views: a,
+  outgoing: o,
+  inReactions: d,
+  children: m,
+  className: n,
+  style: r
 }) {
-  return /* @__PURE__ */ c(
+  const { t: c } = p("meet");
+  return /* @__PURE__ */ l(
     "div",
     {
-      className: `${e.root} ${r || ""}`,
-      style: m,
-      "data-outgoing": d || void 0,
-      "data-in-reactions": o || void 0,
+      className: `${e.root} ${n || ""}`,
+      style: r,
+      "data-outgoing": o || void 0,
+      "data-in-reactions": d || void 0,
       "data-testid": "message-meta",
       children: [
-        i && /* @__PURE__ */ a("span", { className: e.edited, children: "edited" }),
-        s !== void 0 && /* @__PURE__ */ a("span", { className: e.views, children: s }),
-        /* @__PURE__ */ a("span", { className: e.time, children: t }),
-        n
+        i && /* @__PURE__ */ s("span", { className: e.edited, children: c("message.edited") }),
+        a !== void 0 && /* @__PURE__ */ s("span", { className: e.views, children: a }),
+        /* @__PURE__ */ s("span", { className: e.time, children: t }),
+        m
       ]
     }
   );
 }
-l.displayName = "MessageMeta";
+g.displayName = "MessageMeta";
 export {
-  l as MessageMeta
+  g as MessageMeta
 };

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

@@ -11,6 +11,8 @@ type ColorPickerProps = {
     withTick?: boolean;
     fullWidth?: boolean;
     swatchSize?: number;
+    wrapperHeight?: number;
+    customSizes?: boolean;
 } & Omit<FlexProps, 'onChange'>;
 interface ColorCircleProps extends Omit<ColorSwatchProps, 'color'>, Omit<React.ComponentPropsWithoutRef<'div'>, keyof Omit<ColorSwatchProps, 'color'>> {
     value?: string | null;
@@ -21,6 +23,7 @@ interface ColorCircleProps extends Omit<ColorSwatchProps, 'color'>, Omit<React.C
     withTick?: boolean;
     borderColor?: string;
     bgColor?: string;
+    swatchSize?: number;
 }
 export declare const ColorCircle: import("react").ForwardRefExoticComponent<ColorCircleProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ColorPicker: import("react").ForwardRefExoticComponent<Omit<ColorPickerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAIL,gBAAgB,EAEhB,SAAS,EAKV,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAyGhC,UAAU,gBACR,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,EACrC,IAAI,CACF,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EACrC,MAAM,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CACtC;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,6GAiFvB,CAAC;AASF,eAAO,MAAM,WAAW;;;;CAItB,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAIL,gBAAgB,EAEhB,SAAS,EAKV,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IACrB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AA6GhC,UAAU,gBACR,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,EACrC,IAAI,CACF,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EACrC,MAAM,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CACtC;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAClC,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,6GAkFvB,CAAC;AASF,eAAO,MAAM,WAAW;;;;CAItB,CAAC"}