@dotss/tictoccroc 0.4.1 → 0.5.0

package/dist/shared/components/ChatKit/Message/Message.mjs

@@ -1,278 +1,180 @@
-import { jsxs as n, jsx as e, Fragment as q } from "react/jsx-runtime";
-import { useRef as y, useImperativeHandle as J, useEffect as v } from "react";
-import { Flexbox as d, Typography as I, Button as Q, Icon as C, Menu as X, MenuBlock as T, CircularProgressIndicator as Y } from "@dotss/ui";
-import Z from "@dotss/ui/core/useTheme";
+import e from "../../../hooks/useInView/index.mjs";
+import t from "../../Image/index.mjs";
+import { useEffect as n, useImperativeHandle as r, useRef as i } from "react";
+import { Button as a, CircularProgressIndicator as o, Flexbox as s, Icon as c, Menu as l, MenuBlock as u, Typography as d } from "@dotss/ui";
+import f from "@dotss/ui/core/useTheme";
+import p from "dayjs";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 import { useCheckHoverPossible as _ } from "@dotss/ui/hooks";
-import { MenuButton as A } from "@dotss/ui/Menu";
-import V from "dayjs";
-import U from "../../Image/Image.mjs";
-import M from "../../../hooks/useInView/useInView.mjs";
-function de({
-  id: k,
-  content: u = "",
-  mine: i = !1,
-  avatarUrl: h = "",
-  unreadUserCount: g = 0,
-  regDatetime: $,
-  status: l,
-  onView: m,
-  openMenu: S,
-  onClickAvatar: a,
-  onCloseMenu: t,
-  onClickMenu: z,
-  onResend: b,
-  onDelete: x,
-  onViewAll: B,
-  showAvatar: w,
-  showTime: R,
-  ref: j,
-  inlineCSS: G,
-  ...H
-}) {
-  const {
-    palette: { brand: p, grey: c, etc: K },
-    spacing: E
-  } = Z(), { isHoverPossible: D } = _(), o = y(null), F = y(null), s = y(null);
-  J(j, () => o.current);
-  const L = M(o), N = 300, f = l === "FAILED", P = u.length > N, O = (r) => {
-    r === "resend" ? (t == null || t(), s.current = setTimeout(() => {
-      b == null || b();
-    }, 200)) : r === "delete" && (t == null || t(), s.current = setTimeout(() => {
-      x == null || x();
-    }, 200));
-  }, W = (r) => {
-    (r.key === "Enter" || r.key === " ") && (r.preventDefault(), r.currentTarget.click());
-  };
-  return v(() => {
-    L && (m == null || m());
-  }, [L, m]), v(() => {
-    var r;
-    f && ((r = o == null ? void 0 : o.current) == null || r.scrollIntoView());
-  }, [f]), v(() => () => {
-    s.current && clearTimeout(s.current);
-  }, []), /* @__PURE__ */ n(
-    d,
-    {
-      ref: o,
-      alignItems: "flex-end",
-      flexDirection: i ? "row-reverse" : "row",
-      pl: 4,
-      pr: 4,
-      gap: 1,
-      "aria-busy": l === "PENDING",
-      ...H,
-      inlineCSS: {
-        cursor: l === "PENDING" ? "wait" : "default",
-        overflowAnchor: "none",
-        ...G
-      },
-      children: [
-        /* @__PURE__ */ n(d, { alignItems: "flex-start", gap: 2.5, children: [
-          !i && w && h && /* @__PURE__ */ e(
-            d,
-            {
-              role: typeof a == "function" ? "button" : void 0,
-              tabIndex: typeof a == "function" ? 0 : -1,
-              onClick: a,
-              onKeyDown: W,
-              "aria-label": typeof a == "function" ? "선생님 프로필 보기" : void 0,
-              inlineCSS: {
-                position: "relative",
-                overflow: "hidden",
-                minWidth: 32,
-                cursor: typeof a == "function" ? "pointer" : void 0
-              },
-              children: /* @__PURE__ */ e(
-                U,
-                {
-                  src: h,
-                  width: 32,
-                  height: 32,
-                  borderRadius: "50%",
-                  alt: "선생님 프로필 사진",
-                  role: "presentation",
-                  enableFallback: !0,
-                  style: {
-                    objectFit: "cover"
-                  }
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ n(
-            d,
-            {
-              pt: 2,
-              pb: 2,
-              pl: 3,
-              pr: 3,
-              ml: !i && !w && h ? 10.5 : void 0,
-              flexDirection: "column",
-              gap: 2.5,
-              inlineCSS: {
-                borderRadius: 12,
-                backgroundColor: i ? p.primary.pageControl : c[10]
-              },
-              children: [
-                /* @__PURE__ */ e(
-                  I,
-                  {
-                    tag: "p",
-                    variant: "b3R",
-                    inlineCSS: {
-                      whiteSpace: "pre-wrap",
-                      wordBreak: "break-all",
-                      userSelect: "text",
-                      "& *": {
-                        userSelect: "text"
-                      }
-                    },
-                    children: P ? u.slice(0, N) + "..." : u
-                  }
-                ),
-                P && /* @__PURE__ */ e(
-                  Q,
-                  {
-                    variant: "text",
-                    size: "xSmall",
-                    endAdornment: /* @__PURE__ */ e(C, { name: "ChevronRightLine" }),
-                    onClick: B,
-                    inlineCSS: {
-                      marginLeft: "auto",
-                      '&:active:not([aria-disabled="true"])': {
-                        backgroundColor: p.primary.main
-                      },
-                      ...D && {
-                        '&:hover:not([aria-disabled="true"])': {
-                          backgroundColor: p.primary.main
-                        }
-                      }
-                    },
-                    children: "전체보기"
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
-        f && /* @__PURE__ */ n(q, { children: [
-          /* @__PURE__ */ n(
-            A,
-            {
-              ref: F,
-              isMenuOpen: !!S,
-              menuId: `message-${k}-menu`,
-              onClick: z,
-              size: "xSmall",
-              inlineCSS: {
-                padding: E.content(0.5),
-                gap: E.content(0.5),
-                borderRadius: 200,
-                backgroundColor: S ? c[10] : "transparent",
-                cursor: "pointer",
-                ...D && {
-                  "&:hover": {
-                    backgroundColor: `${c[10]} !important`
-                  }
-                },
-                "&:active": {
-                  backgroundColor: `${c[10]} !important`
-                }
-              },
-              children: [
-                /* @__PURE__ */ e(
-                  C,
-                  {
-                    name: "ResetLine",
-                    size: "xSmall",
-                    color: "grey.70",
-                    inlineCSS: {
-                      color: `${c[70]} !important`
-                    }
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  C,
-                  {
-                    name: "CloseLine",
-                    size: "xSmall",
-                    color: "etc.red",
-                    inlineCSS: {
-                      color: `${K.red} !important`
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ n(
-            X,
-            {
-              id: `message-${k}-menu`,
-              anchorRef: F,
-              open: S,
-              onClose: t,
-              onChange: O,
-              width: 160,
-              placement: "bottom-left",
-              children: [
-                /* @__PURE__ */ e(T, { value: "resend", children: "재전송" }),
-                /* @__PURE__ */ e(T, { value: "delete", children: "삭제" })
-              ]
-            }
-          )
-        ] }),
-        !f && /* @__PURE__ */ n(
-          d,
-          {
-            flexDirection: "column",
-            alignItems: i ? "flex-end" : "flex-start",
-            inlineCSS: {
-              whiteSpace: "nowrap"
-            },
-            children: [
-              i && g > 0 && l === "SUCCEEDED" && /* @__PURE__ */ e(
-                I,
-                {
-                  tag: "span",
-                  variant: "c5B",
-                  "aria-hidden": !0,
-                  inlineCSS: {
-                    color: p.primary.text
-                  },
-                  children: g
-                }
-              ),
-              i && g > 0 && l === "PENDING" && /* @__PURE__ */ e(
-                Y,
-                {
-                  size: "small",
-                  loop: !0,
-                  inlineCSS: {
-                    width: 12,
-                    height: 12
-                  }
-                }
-              ),
-              /* @__PURE__ */ e(
-                I,
-                {
-                  tag: "span",
-                  variant: "c5R",
-                  color: "etc.dimmed01",
-                  inlineCSS: {
-                    display: R ? void 0 : "none"
-                  },
-                  children: V($).format("A h:mm")
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
+import { MenuButton as v } from "@dotss/ui/Menu";
+//#region shared/components/ChatKit/Message/Message.tsx
+function y({ id: y, content: b = "", mine: x = !1, avatarUrl: S = "", unreadUserCount: C = 0, regDatetime: w, status: T, onView: E, openMenu: D, onClickAvatar: O, onCloseMenu: k, onClickMenu: A, onResend: j, onDelete: M, onViewAll: N, showAvatar: P, showTime: F, ref: I, inlineCSS: L, ...R }) {
+	let { palette: { brand: z, grey: B, etc: V }, spacing: H } = f(), { isHoverPossible: U } = _(), W = i(null), G = i(null), K = i(null);
+	r(I, () => W.current);
+	let q = e(W), J = T === "FAILED", Y = b.length > 300, X = (e) => {
+		e === "resend" ? (k?.(), K.current = setTimeout(() => {
+			j?.();
+		}, 200)) : e === "delete" && (k?.(), K.current = setTimeout(() => {
+			M?.();
+		}, 200));
+	}, Z = (e) => {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.currentTarget.click());
+	};
+	return n(() => {
+		q && E?.();
+	}, [q, E]), n(() => {
+		J && W?.current?.scrollIntoView();
+	}, [J]), n(() => () => {
+		K.current && clearTimeout(K.current);
+	}, []), /* @__PURE__ */ g(s, {
+		ref: W,
+		alignItems: "flex-end",
+		flexDirection: x ? "row-reverse" : "row",
+		pl: 4,
+		pr: 4,
+		gap: 1,
+		"aria-busy": T === "PENDING",
+		...R,
+		inlineCSS: {
+			cursor: T === "PENDING" ? "wait" : "default",
+			overflowAnchor: "none",
+			...L
+		},
+		children: [
+			/* @__PURE__ */ g(s, {
+				alignItems: "flex-start",
+				gap: 2.5,
+				children: [!x && P && S && /* @__PURE__ */ h(s, {
+					role: typeof O == "function" ? "button" : void 0,
+					tabIndex: typeof O == "function" ? 0 : -1,
+					onClick: O,
+					onKeyDown: Z,
+					"aria-label": typeof O == "function" ? "선생님 프로필 보기" : void 0,
+					inlineCSS: {
+						position: "relative",
+						overflow: "hidden",
+						minWidth: 32,
+						cursor: typeof O == "function" ? "pointer" : void 0
+					},
+					children: /* @__PURE__ */ h(t, {
+						src: S,
+						width: 32,
+						height: 32,
+						borderRadius: "50%",
+						alt: "선생님 프로필 사진",
+						role: "presentation",
+						enableFallback: !0,
+						style: { objectFit: "cover" }
+					})
+				}), /* @__PURE__ */ g(s, {
+					pt: 2,
+					pb: 2,
+					pl: 3,
+					pr: 3,
+					ml: !x && !P && S ? 10.5 : void 0,
+					flexDirection: "column",
+					gap: 2.5,
+					inlineCSS: {
+						borderRadius: 12,
+						backgroundColor: x ? z.primary.pageControl : B[10]
+					},
+					children: [/* @__PURE__ */ h(d, {
+						tag: "p",
+						variant: "b3R",
+						inlineCSS: {
+							whiteSpace: "pre-wrap",
+							wordBreak: "break-all",
+							userSelect: "text",
+							"& *": { userSelect: "text" }
+						},
+						children: Y ? b.slice(0, 300) + "..." : b
+					}), Y && /* @__PURE__ */ h(a, {
+						variant: "text",
+						size: "xSmall",
+						endAdornment: /* @__PURE__ */ h(c, { name: "ChevronRightLine" }),
+						onClick: N,
+						inlineCSS: {
+							marginLeft: "auto",
+							"&:active:not([aria-disabled=\"true\"])": { backgroundColor: z.primary.main },
+							...U && { "&:hover:not([aria-disabled=\"true\"])": { backgroundColor: z.primary.main } }
+						},
+						children: "전체보기"
+					})]
+				})]
+			}),
+			J && /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ g(v, {
+				ref: G,
+				isMenuOpen: !!D,
+				menuId: `message-${y}-menu`,
+				onClick: A,
+				size: "xSmall",
+				inlineCSS: {
+					padding: H.content(.5),
+					gap: H.content(.5),
+					borderRadius: 200,
+					backgroundColor: D ? B[10] : "transparent",
+					cursor: "pointer",
+					...U && { "&:hover": { backgroundColor: `${B[10]} !important` } },
+					"&:active": { backgroundColor: `${B[10]} !important` }
+				},
+				children: [/* @__PURE__ */ h(c, {
+					name: "ResetLine",
+					size: "xSmall",
+					color: "grey.70",
+					inlineCSS: { color: `${B[70]} !important` }
+				}), /* @__PURE__ */ h(c, {
+					name: "CloseLine",
+					size: "xSmall",
+					color: "etc.red",
+					inlineCSS: { color: `${V.red} !important` }
+				})]
+			}), /* @__PURE__ */ g(l, {
+				id: `message-${y}-menu`,
+				anchorRef: G,
+				open: D,
+				onClose: k,
+				onChange: X,
+				width: 160,
+				placement: "bottom-left",
+				children: [/* @__PURE__ */ h(u, {
+					value: "resend",
+					children: "재전송"
+				}), /* @__PURE__ */ h(u, {
+					value: "delete",
+					children: "삭제"
+				})]
+			})] }),
+			!J && /* @__PURE__ */ g(s, {
+				flexDirection: "column",
+				alignItems: x ? "flex-end" : "flex-start",
+				inlineCSS: { whiteSpace: "nowrap" },
+				children: [
+					x && C > 0 && T === "SUCCEEDED" && /* @__PURE__ */ h(d, {
+						tag: "span",
+						variant: "c5B",
+						"aria-hidden": !0,
+						inlineCSS: { color: z.primary.text },
+						children: C
+					}),
+					x && C > 0 && T === "PENDING" && /* @__PURE__ */ h(o, {
+						size: "small",
+						loop: !0,
+						inlineCSS: {
+							width: 12,
+							height: 12
+						}
+					}),
+					/* @__PURE__ */ h(d, {
+						tag: "span",
+						variant: "c5R",
+						color: "etc.dimmed01",
+						inlineCSS: { display: F ? void 0 : "none" },
+						children: p(w).format("A h:mm")
+					})
+				]
+			})
+		]
+	});
 }
-export {
-  de as default
-};
+//#endregion
+export { y as default };

package/dist/shared/components/ChatKit/Message/Message.utils.mjs

@@ -1,33 +1,22 @@
-import w from "dayjs";
-function h(a) {
-  return a.map(([c, s]) => {
-    const r = /* @__PURE__ */ new Map(), e = /* @__PURE__ */ new Map(), I = /* @__PURE__ */ new Map(), u = /* @__PURE__ */ new Map();
-    for (let t = 0; t < s.length; t += 1) {
-      const n = s[t], d = n.senderId, i = s[t - 1], o = s[t + 1];
-      d == null || n.status === "FAILED" || n.type !== "USER" || (i && (i == null ? void 0 : i.senderId) !== d && u.set(`${d}-${n.id}`, n.id), o && (o == null ? void 0 : o.senderId) !== d && I.set(`${d}-${n.id}`, n.id), r.has(d) || r.set(d, n.id), e.set(d, n.id));
-    }
-    const f = new Set(r.values()), l = new Set(e.values()), p = new Set(I.values()), $ = new Set(u.values());
-    return [
-      c,
-      s.map((t) => ({
-        ...t,
-        // 역방향 스크롤에 따른 역순 처리
-        isFirstInGroup: l.has(t.id) || p.has(t.id),
-        isLastInGroup: f.has(t.id) || $.has(t.id)
-      }))
-    ];
-  });
+import e from "dayjs";
+//#region shared/components/ChatKit/Message/Message.utils.ts
+function t(e) {
+	return e.map(([e, t]) => {
+		let n = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ new Map(), a = /* @__PURE__ */ new Map();
+		for (let e = 0; e < t.length; e += 1) {
+			let o = t[e], s = o.senderId, c = t[e - 1], l = t[e + 1];
+			s == null || o.status === "FAILED" || o.type !== "USER" || (c && c?.senderId !== s && a.set(`${s}-${o.id}`, o.id), l && l?.senderId !== s && i.set(`${s}-${o.id}`, o.id), n.has(s) || n.set(s, o.id), r.set(s, o.id));
+		}
+		let o = new Set(n.values()), s = new Set(r.values()), c = new Set(i.values()), l = new Set(a.values());
+		return [e, t.map((e) => ({
+			...e,
+			isFirstInGroup: s.has(e.id) || c.has(e.id),
+			isLastInGroup: o.has(e.id) || l.has(e.id)
+		}))];
+	});
 }
-function E({
-  mine: a,
-  status: c,
-  unreadUserCount: s,
-  content: r,
-  regDatetime: e
-}) {
-  return `${a ? "나" : "상대방"}, ${r}, ${s && s > 0 ? "읽지 않음" : "읽음"}, ${c === "SUCCEEDED" ? "전송됨" : "전송 실패"}, ${w(e).format("YYYY년 MM월 DD일 A h:mm")}`;
+function n({ mine: t, status: n, unreadUserCount: r, content: i, regDatetime: a }) {
+	return `${t ? "나" : "상대방"}, ${i}, ${r && r > 0 ? "읽지 않음" : "읽음"}, ${n === "SUCCEEDED" ? "전송됨" : "전송 실패"}, ${e(a).format("YYYY년 MM월 DD일 A h:mm")}`;
 }
-export {
-  E as getMessageLabel,
-  h as markMessageGroupBoundaries
-};
+//#endregion
+export { n as getMessageLabel, t as markMessageGroupBoundaries };

package/dist/shared/components/ChatKit/Message/index.mjs

@@ -1,9 +1,7 @@
-import a from "./Message.mjs";
-import { default as o } from "./Message.fallback.mjs";
-import { getMessageLabel as f, markMessageGroupBoundaries as g } from "./Message.utils.mjs";
-export {
-  o as MessageFallback,
-  a as default,
-  f as getMessageLabel,
-  g as markMessageGroupBoundaries
-};
+import e from "./Message.mjs";
+import t from "./Message.fallback.mjs";
+import { getMessageLabel as n, markMessageGroupBoundaries as r } from "./Message.utils.mjs";
+//#region shared/components/ChatKit/Message/index.ts
+var i = e;
+//#endregion
+export { t as MessageFallback, i as default, n as getMessageLabel, r as markMessageGroupBoundaries };

package/dist/shared/components/ChatKit/Seperator/Seperator.mjs

@@ -1,29 +1,33 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Flexbox as o, Typography as i } from "@dotss/ui";
+import { Flexbox as e, Typography as t } from "@dotss/ui";
 import n from "@dotss/ui/core/useTheme";
-import p from "dayjs";
-function f({ date: t, ...e }) {
-  const {
-    palette: { grey: a }
-  } = n();
-  return /* @__PURE__ */ r(o, { role: "separator", ...e, children: /* @__PURE__ */ r(
-    o,
-    {
-      pt: 0.5,
-      pb: 0.5,
-      pl: 2,
-      pr: 2,
-      inlineCSS: {
-        maxWidth: "fit-content",
-        marginLeft: "auto",
-        marginRight: "auto",
-        borderRadius: 20,
-        backgroundColor: a[10]
-      },
-      children: /* @__PURE__ */ r(i, { tag: "p", variant: "c3M", color: "grey.70", children: p(t).format("YYYY년 M월 D일 dddd") })
-    }
-  ) });
+import r from "dayjs";
+import { jsx as i } from "react/jsx-runtime";
+//#region shared/components/ChatKit/Seperator/Seperator.tsx
+function a({ date: a, ...o }) {
+	let { palette: { grey: s } } = n();
+	return /* @__PURE__ */ i(e, {
+		role: "separator",
+		...o,
+		children: /* @__PURE__ */ i(e, {
+			pt: .5,
+			pb: .5,
+			pl: 2,
+			pr: 2,
+			inlineCSS: {
+				maxWidth: "fit-content",
+				marginLeft: "auto",
+				marginRight: "auto",
+				borderRadius: 20,
+				backgroundColor: s[10]
+			},
+			children: /* @__PURE__ */ i(t, {
+				tag: "p",
+				variant: "c3M",
+				color: "grey.70",
+				children: r(a).format("YYYY년 M월 D일 dddd")
+			})
+		})
+	});
 }
-export {
-  f as default
-};
+//#endregion
+export { a as default };

package/dist/shared/components/ChatKit/Seperator/index.mjs

@@ -1,4 +1,5 @@
 import e from "./Seperator.mjs";
-export {
-  e as default
-};
+//#region shared/components/ChatKit/Seperator/index.ts
+var t = e;
+//#endregion
+export { t as default };