@dotss/tictoccroc 0.0.25 → 0.0.26

package/dist/shared/components/Carousel/Carousel.mjs

@@ -1,20 +1,20 @@
 import { jsxs as le, jsx as A } from "react/jsx-runtime";
-import { useState as I, useRef as p, Children as Q, isValidElement as ue, useCallback as fe, useEffect as T, cloneElement as de } from "react";
+import { useState as I, useRef as p, Children as Z, isValidElement as ue, useCallback as fe, useEffect as T, cloneElement as de } from "react";
 import { Flexbox as P } from "@dotss/ui";
 import he from "@dotss/ui/core/useTheme";
 import me from "./CarouselSlide/CarouselSlide.mjs";
 const ge = 5;
 function ye({
-  children: Z,
+  children: z,
   spacing: K = 2,
   edgeSpacing: O = 4,
   rowCount: a = 2,
   step: W = 1,
-  renderPagination: z,
+  renderPagination: $,
   ...C
 }) {
-  const { spacing: $ } = he(), [l, Y] = I(1), [w, ee] = I(1), [te, ne] = I(0), L = p(null), c = p(null), u = p(null), X = p(0), F = p(0), b = p(0), S = p(!1), D = p(!0), k = p(0), v = $.content(K), E = $.content(O), N = Q.toArray(Z).filter(ue).filter((e) => e.type === me), x = N.length, j = (e, t) => {
-    X.current = e, F.current = t;
+  const { spacing: Y } = he(), [l, X] = I(1), [w, ee] = I(1), [te, ne] = I(0), L = p(null), c = p(null), u = p(null), F = p(0), N = p(0), b = p(0), S = p(!1), D = p(!0), k = p(0), v = Y.content(K), E = Y.content(O), j = Z.toArray(z).filter(ue).filter((e) => e.type === me), x = j.length, H = (e, t) => {
+    F.current = e, N.current = t;
   }, M = () => {
     var o;
     if (!c.current || !S.current) return;
@@ -26,30 +26,30 @@ function ye({
     (e, t = 0) => {
       var h, g, y;
       if (!c.current) return;
-      Y(e);
+      X(e);
       const n = e === 1, f = e === w, s = (((h = L.current) == null ? void 0 : h.offsetWidth) || 0) - E, o = (((y = (g = u.current) == null ? void 0 : g.children[0]) == null ? void 0 : y.clientWidth) || 0) + v, i = (s - o * Math.floor(s / o) - v) / 2, d = o * (e - 1) - i;
       n ? c.current.style.transform = `translate3d(${t}px, 0, 0)` : f ? c.current.style.transform = `translate3d(${-(d - i) + t}px, 0, 0)` : c.current.style.transform = `translate3d(${-d + t}px, 0, 0)`;
     },
     [E, v, w]
-  ), re = (e) => j(e.touches[0].clientX, e.touches[0].clientY), se = (e) => {
-    S.current = !0, j(e.clientX, e.clientY);
+  ), re = (e) => H(e.touches[0].clientX, e.touches[0].clientY), se = (e) => {
+    S.current = !0, H(e.clientX, e.clientY);
   }, oe = (e) => {
     c.current && (c.current.style.transition = "transform 0.2s", c.current.style.cursor = "grab", R(e));
   }, ce = (e) => (t) => {
-    var U, q, G, V, _, B;
+    var q, G, V, _, B, J;
     t.stopPropagation();
-    const n = Array.from(((U = u.current) == null ? void 0 : U.children) || []).indexOf(t.currentTarget), f = (((q = L.current) == null ? void 0 : q.offsetWidth) || 0) - E * 2, s = (((V = (G = u.current) == null ? void 0 : G.children[0]) == null ? void 0 : V.clientWidth) || 0) + v, i = Math.floor(f / (s / W)) * a, d = (l - 1) * i, h = d + i - 1, g = ((_ = u.current) == null ? void 0 : _.children.length) || 0, y = n % a, H = Math.floor(n / a);
+    const n = Array.from(((q = u.current) == null ? void 0 : q.children) || []).indexOf(t.currentTarget), f = (((G = L.current) == null ? void 0 : G.offsetWidth) || 0) - E * 2, s = (((_ = (V = u.current) == null ? void 0 : V.children[0]) == null ? void 0 : _.clientWidth) || 0) + v, i = Math.floor(f / (s / W)) * a, d = (l - 1) * i, h = d + i - 1, g = ((B = u.current) == null ? void 0 : B.children.length) || 0, y = n % a, U = Math.floor(n / a);
     let m = n;
     switch (t.key) {
       case "ArrowRight": {
         t.preventDefault();
-        const r = (H + 1) * a + y;
+        const r = (U + 1) * a + y;
         r < g && (m = r);
         break;
       }
       case "ArrowLeft": {
         t.preventDefault();
-        const r = (H - 1) * a + y;
+        const r = (U - 1) * a + y;
         r >= 0 && (m = r);
         break;
       }
@@ -74,13 +74,13 @@ function ye({
         return;
     }
     if (m >= d && m <= h) {
-      const r = (B = u.current) == null ? void 0 : B.children[m];
+      const r = (J = u.current) == null ? void 0 : J.children[m];
       r == null || r.focus();
       return;
     }
     m >= 0 && m < g && (k.current = requestAnimationFrame(() => {
-      var J;
-      const r = (J = u.current) == null ? void 0 : J.children[m];
+      var Q;
+      const r = (Q = u.current) == null ? void 0 : Q.children[m];
       r == null || r.focus();
     })), e == null || e(t);
   }, ie = (e) => {
@@ -98,16 +98,16 @@ function ye({
     const e = () => {
       var i, d, h;
       const t = (((i = L.current) == null ? void 0 : i.offsetWidth) || 0) - E * 2, n = (((h = (d = u.current) == null ? void 0 : d.children[0]) == null ? void 0 : h.clientWidth) || 0) + v, f = Math.floor(t / (n / W)), s = Math.ceil(x / (a || 1)), o = Math.max(s - (f - 1), 1);
-      Y((g) => g > o ? o : g), ee(o);
+      X((g) => g > o ? o : g), ee(o);
     };
     return e(), window.addEventListener("resize", e), () => {
       window.removeEventListener("resize", e);
     };
-  }, [E, v, x, W, a]), T(() => {
+  }, [E, v, x, W, a, z]), T(() => {
     const e = c.current, t = (s, o, i) => {
       if (!e || w <= 1) return;
-      e.style.transition = "none", e.style.cursor = "grabbing", b.current = s - X.current;
-      const d = o - F.current, h = 5;
+      e.style.transition = "none", e.style.cursor = "grabbing", b.current = s - F.current;
+      const d = o - N.current, h = 5;
       S.current = S.current || Math.abs(b.current) > h && Math.abs(d) < h * 2, S.current && (i.cancelable && (i.stopPropagation(), i.preventDefault()), e.style.transition = "none", e.style.cursor = "grabbing", R(l, b.current));
     }, n = (s) => t(s.touches[0].clientX, s.touches[0].clientY, s), f = (s) => {
       S.current && t(s.clientX, s.clientY, s);
@@ -174,8 +174,8 @@ function ye({
                       gridTemplateRows: "min-content",
                       transform: "translate3d(0, 0, 0)"
                     },
-                    children: Q.map(
-                      N,
+                    children: Z.map(
+                      j,
                       (e, t) => {
                         var n;
                         return de(e, {
@@ -201,7 +201,7 @@ function ye({
             )
           }
         ),
-        typeof z == "function" && z({ page: l, totalPages: w, onChange: oe })
+        typeof $ == "function" && $({ page: l, totalPages: w, onChange: oe })
       ]
     }
   );

package/dist/shared/components/ChatKit/BotMessage/BotMessage.d.ts

@@ -30,7 +30,7 @@ export interface BotMessageProps extends Omit<FlexboxProps, 'id' | 'title'> {
         botMessageType: BotMessageType;
         ctaType?: BotMessageCtaType | null;
         ctaTargetId?: number | null;
-        ctaTargetTable?: string | null;
+        ctaTargetTable?: BotMessageCtaTargetTable | null;
         subCtaTargetTable?: BotMessageSubCtaTargetTable | null;
         subCtaTargetId?: number | null;
     }) => void;

package/dist/shared/components/ChatKit/Message/Message.d.ts

@@ -11,6 +11,7 @@ export type BaseMessageProps = {
     showAvatar?: boolean;
     showTime?: boolean;
     openMenu?: never;
+    onClickAvatar?: () => void;
     onCloseMenu?: never;
     onClickMenu?: never;
     onView?: () => void;
@@ -28,6 +29,7 @@ export type BaseMessageProps = {
     showAvatar?: never;
     showTime?: never;
     openMenu?: boolean;
+    onClickAvatar?: () => void;
     onCloseMenu?: () => void;
     onClickMenu?: () => void;
     onView?: never;
@@ -36,5 +38,5 @@ export type BaseMessageProps = {
     onViewAll?: () => void;
 };
 export type MessageProps = Omit<FlexboxProps, 'id' | 'title'> & BaseMessageProps;
-declare function Message({ id, content, mine, avatarUrl, unreadUserCount, regDatetime, status, onView, openMenu, onCloseMenu, onClickMenu, onResend, onDelete, onViewAll, showAvatar, showTime, ref, inlineCSS, ...props }: MessageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function Message({ id, content, mine, avatarUrl, unreadUserCount, regDatetime, status, onView, openMenu, onClickAvatar, onCloseMenu, onClickMenu, onResend, onDelete, onViewAll, showAvatar, showTime, ref, inlineCSS, ...props }: MessageProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default Message;

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dotss/tictoccroc",
   "type": "module",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "description": "Tictoccroc shared components, hooks, utils, and APIs for Dotss",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",