@tencentcloud/chat-uikit-react 3.4.8 → 4.5.1

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [4.5.1] (2025-12-16)
+
+### feat
+* Add ImagePreview component with zoom and drag functionality for viewing images in modal
+* Add @ mention feature in text editor
+* Add maxLength property to MessageInput for controlling input length
+
+### refactor
+* Refactor editor core code to optimize extension management and content conversion
+* Optimize input handling logic in MessageInputState to improve message processing flow
+
 ## [3.4.8] (2025-12-08)
 
 ### feat

package/dist/components/Chat/Chat.js

@@ -1,22 +1,22 @@
-import { jsx as s } from "react/jsx-runtime";
-import { a as i, V as n } from "../../index-BLFl-K0_-DzfAZFZt.js";
-import { c as m } from "../../external_modules/classnames-HRMVOjAa.js";
+import { jsx as r } from "react/jsx-runtime";
+import { c as i } from "../../external_modules/classnames-HRMVOjAa.js";
+import { useConversationListState as n, View as m } from "tuikit-atomicx-react/chat";
 import { ChatProvider as l } from "../../context/ChatContext.js";
 import '../../styles/Chat.css';const h = "uikit-chat", p = {
   chat: h
-}, y = (r) => {
+}, y = (s) => {
   const {
     PlaceholderEmpty: o = null,
-    className: a,
-    style: c,
-    children: e
-  } = r, { activeConversation: t } = i();
-  return t != null && t.conversationID ? /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(
-    n,
+    className: c,
+    style: e,
+    children: a
+  } = s, { activeConversation: t } = n();
+  return t != null && t.conversationID ? /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(
+    m,
     {
-      className: m(p.chat, a),
-      style: c,
-      children: e
+      className: i(p.chat, c),
+      style: e,
+      children: a
     }
   ) }) : o;
 };

package/dist/components/ChatHeader/AudioCallPicker/AudioCallPicker.js

@@ -1,8 +1,8 @@
-import { jsx as s, Fragment as V, jsxs as B } from "react/jsx-runtime";
+import { jsx as s, Fragment as B, jsxs as V } from "react/jsx-runtime";
 import { useState as j, useRef as z, useMemo as n, useCallback as r } from "react";
 import { useUIKit as K, IconCallFilled as X, Dialog as Y } from "@tencentcloud/uikit-base-component-react";
 import { c as Z } from "../../../external_modules/classnames-HRMVOjAa.js";
-import { b as $, a as q, c as H, C as h, s as y, V as J, U as Q } from "../../../index-BLFl-K0_-DzfAZFZt.js";
+import { useLoginState as $, useConversationListState as q, useGroupSettingState as H, ConversationType as h, startCall as y, View as J, UserPicker as Q } from "tuikit-atomicx-react/chat";
 import '../../../styles/AudioCallPicker.css';const u = {
   "audio-call-picker__button": "uikit-audio-call-picker__button",
   "audio-call-picker__button--disabled": "uikit-audio-call-picker__button--disabled",
@@ -16,7 +16,7 @@ import '../../../styles/AudioCallPicker.css';const u = {
     className: L,
     style: P,
     children: E
-  } = G, { t: p } = K(), { loginUserInfo: c } = $(), { activeConversation: e } = q(), { allMembers: t, getGroupMemberList: _, memberCount: g } = H(), [U, b] = j(!1), d = z(null), k = n(() => c == null ? void 0 : c.userId, [c]), R = n(() => (e == null ? void 0 : e.type) === h.C2C, [e]), x = n(() => (t == null ? void 0 : t.map((o) => ({
+  } = G, { t: p } = K(), { loginUserInfo: c } = $(), { activeConversation: e } = q(), { allMembers: t, getGroupMemberList: _, memberCount: g } = H(), [R, b] = j(!1), d = z(null), k = n(() => c == null ? void 0 : c.userId, [c]), U = n(() => (e == null ? void 0 : e.type) === h.C2C, [e]), x = n(() => (t == null ? void 0 : t.map((o) => ({
     key: o.userID,
     label: o.nick || o.userID,
     avatarUrl: o.avatar
@@ -32,8 +32,8 @@ import '../../../styles/AudioCallPicker.css';const u = {
         userIDList: [o],
         type: D
       });
-    } catch (C) {
-      console.error("Failed to start private audio call:", C);
+    } catch (m) {
+      console.error("Failed to start private audio call:", m);
     }
   }, [e == null ? void 0 : e.conversationID]), f = r(() => {
     if ((e == null ? void 0 : e.type) !== h.GROUP)
@@ -59,26 +59,26 @@ import '../../../styles/AudioCallPicker.css';const u = {
       console.warn("No members selected for group call");
       return;
     }
-    const C = l.map((m) => m.key);
+    const m = l.map((C) => C.key);
     try {
       y({
-        userIDList: C,
+        userIDList: m,
         chatGroupID: o,
         type: D
       }), i();
-    } catch (m) {
-      console.error("Failed to start group audio call:", m);
+    } catch (C) {
+      console.error("Failed to start group audio call:", C);
     }
   }, [i]), F = r(() => {
     if (!N) {
       console.warn("Cannot start audio call");
       return;
     }
-    R ? w() : O();
+    U ? w() : O();
   }, []), T = r(() => {
     I();
   }, [I]);
-  return /* @__PURE__ */ s(V, { children: /* @__PURE__ */ B(J, { children: [
+  return /* @__PURE__ */ s(B, { children: /* @__PURE__ */ V(J, { children: [
     /* @__PURE__ */ s(
       "button",
       {
@@ -106,7 +106,7 @@ import '../../../styles/AudioCallPicker.css';const u = {
     /* @__PURE__ */ s(
       Y,
       {
-        visible: U,
+        visible: R,
         title: p("MessageInput.select_call_members"),
         cancelText: p("MessageInput.cancel"),
         onCancel: i,

package/dist/components/ChatHeader/ChatHeader.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { AvatarProps } from 'tuikit-atomicx-react';
+import { AvatarProps } from 'tuikit-atomicx-react/chat';
 interface ChatHeaderProps {
     /** Custom title, if not provided, will use conversation info */
     title?: string | undefined;

package/dist/components/ChatHeader/ChatHeader.js

@@ -1,7 +1,7 @@
 import { jsx as v } from "react/jsx-runtime";
 import { useEffect as H } from "react";
 import { TUIUserService as U } from "@tencentcloud/chat-uikit-engine-lite";
-import { u as x } from "../../index-BLFl-K0_-DzfAZFZt.js";
+import { useMessageInputState as x } from "tuikit-atomicx-react/chat";
 import { useChatHeader as y } from "../../hooks/useChatHeader.js";
 import g from "./ChatHeaderUI/ChatHeaderUI.js";
 const w = (t) => {
@@ -17,9 +17,9 @@ const w = (t) => {
     ChatHeaderLeft: n,
     ChatHeaderRight: m
   } = t, {
-    system: u,
-    conversation: f,
-    isGroup: p,
+    system: f,
+    conversation: p,
+    isGroup: u,
     title: h,
     avatar: d,
     userStatus: C
@@ -29,13 +29,13 @@ const w = (t) => {
   }, [e]), /* @__PURE__ */ v(
     g,
     {
-      isGroup: p,
+      isGroup: u,
       title: a || h || "",
       avatar: r || d,
       userStatus: C,
-      conversation: f,
+      conversation: p,
       isPeerTyping: S,
-      system: u,
+      system: f,
       enableUserStatus: e,
       enableCall: s,
       chatHeaderActions: i,

package/dist/components/ChatHeader/ChatHeaderUI/ChatHeaderUI.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { UserStatus } from '../../../types/user';
-import { ConversationModel } from 'tuikit-atomicx-react';
+import { ConversationModel } from 'tuikit-atomicx-react/chat';
 interface ChatHeaderUIProps {
     /** Custom title, if not provided, will use conversation info */
     title: string;

package/dist/components/ChatHeader/ChatHeaderUI/ChatHeaderUI.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as r } from "react/jsx-runtime";
 import { useUIKit as C } from "@tencentcloud/uikit-base-component-react";
 import { c as m } from "../../../external_modules/classnames-HRMVOjAa.js";
-import { V as a, A as v } from "../../../index-BLFl-K0_-DzfAZFZt.js";
+import { View as a, Avatar as v } from "tuikit-atomicx-react/chat";
 import { AudioCallPicker as g } from "../AudioCallPicker/AudioCallPicker.js";
 import { VideoCallPicker as T } from "../VideoCallPicker/VideoCallPicker.js";
 import '../../../styles/ChatHeaderUI.css';const e = {

package/dist/components/ChatHeader/VideoCallPicker/VideoCallPicker.js

@@ -2,25 +2,25 @@ import { jsx as s, Fragment as F, jsxs as T } from "react/jsx-runtime";
 import { useState as B, useRef as j, useMemo as n, useCallback as l } from "react";
 import { useUIKit as z, IconVideoFilled as K, Dialog as X } from "@tencentcloud/uikit-base-component-react";
 import { c as Y } from "../../../external_modules/classnames-HRMVOjAa.js";
-import { b as Z, a as $, c as q, C as P, s as S, V as H, U as J } from "../../../index-BLFl-K0_-DzfAZFZt.js";
+import { useLoginState as Z, useConversationListState as $, useGroupSettingState as q, ConversationType as P, startCall as S, View as H, UserPicker as J } from "tuikit-atomicx-react/chat";
 import '../../../styles/VideoCallPicker.css';const u = {
   "video-call-picker__button": "uikit-video-call-picker__button",
   "video-call-picker__button--disabled": "uikit-video-call-picker__button--disabled",
   "video-call-picker__icon": "uikit-video-call-picker__icon",
   "group-call-dialog": "uikit-group-call-dialog"
-}, E = 2, Q = 80, W = 8, ee = 1, ae = (L) => {
+}, E = 2, Q = 80, W = 8, ee = 1, ie = (L) => {
   const {
     label: R = "",
     iconSize: U = 20,
-    disabled: a = !1,
+    disabled: i = !1,
     className: V,
     style: v,
     children: x
-  } = L, { t: d } = z(), { loginUserInfo: i } = Z(), { activeConversation: e } = $(), { allMembers: t, getGroupMemberList: _, memberCount: g } = q(), [A, b] = B(!1), p = j(null), k = n(() => i == null ? void 0 : i.userId, [i]), I = n(() => (e == null ? void 0 : e.type) === P.C2C, [e]), N = n(() => (t == null ? void 0 : t.map((o) => ({
+  } = L, { t: d } = z(), { loginUserInfo: c } = Z(), { activeConversation: e } = $(), { allMembers: t, getGroupMemberList: C, memberCount: g } = q(), [A, b] = B(!1), p = j(null), k = n(() => c == null ? void 0 : c.userId, [c]), I = n(() => (e == null ? void 0 : e.type) === P.C2C, [e]), N = n(() => (t == null ? void 0 : t.map((o) => ({
     key: o.userID,
     label: o.nick || o.userID,
     avatarUrl: o.avatar
-  }))) ?? [], [t]), M = n(() => !(!e || a), [e, a]), h = l(() => {
+  }))) ?? [], [t]), M = n(() => !(!e || i), [e, i]), h = l(() => {
     var r;
     const o = (r = e == null ? void 0 : e.userProfile) == null ? void 0 : r.userID;
     if (!o) {
@@ -39,13 +39,13 @@ import '../../../styles/VideoCallPicker.css';const u = {
     if ((e == null ? void 0 : e.type) !== P.GROUP)
       return;
     const o = (t == null ? void 0 : t.length) || 0;
-    o < (g || 0) && _({
+    o < (g || 0) && C({
       count: Q,
       offset: o
     });
-  }, [e, t, g, _]), y = l(() => {
+  }, [e, t, g, C]), y = l(() => {
     f(), b(!0);
-  }, [f]), c = l(() => {
+  }, [f]), a = l(() => {
     b(!1);
   }, []), G = l(() => {
     var D;
@@ -59,17 +59,17 @@ import '../../../styles/VideoCallPicker.css';const u = {
       console.warn("No members selected for group call");
       return;
     }
-    const m = r.map((C) => C.key);
+    const m = r.map((_) => _.key);
     try {
       S({
         userIDList: m,
         chatGroupID: o,
         type: E
-      }), c();
-    } catch (C) {
-      console.error("Failed to start group video call:", C);
+      }), a();
+    } catch (_) {
+      console.error("Failed to start group video call:", _);
     }
-  }, [e, c]), w = l(() => {
+  }, [e, a]), w = l(() => {
     if (!M) {
       console.warn("Cannot start video call");
       return;
@@ -86,13 +86,13 @@ import '../../../styles/VideoCallPicker.css';const u = {
         className: Y(
           u["video-call-picker__button"],
           {
-            [u["video-call-picker__button--disabled"]]: a
+            [u["video-call-picker__button--disabled"]]: i
           },
           V
         ),
         style: v,
         onClick: w,
-        disabled: a,
+        disabled: i,
         "aria-label": R || "Video Call",
         children: x || /* @__PURE__ */ s(
           K,
@@ -109,8 +109,8 @@ import '../../../styles/VideoCallPicker.css';const u = {
         visible: A,
         title: d("MessageInput.select_call_members"),
         cancelText: d("MessageInput.cancel"),
-        onCancel: c,
-        onClose: c,
+        onCancel: a,
+        onClose: a,
         confirmText: d("MessageInput.initiate_call"),
         onConfirm: O,
         className: u["group-call-dialog"],
@@ -131,5 +131,5 @@ import '../../../styles/VideoCallPicker.css';const u = {
   ] }) });
 };
 export {
-  ae as VideoCallPicker
+  ie as VideoCallPicker
 };

package/dist/components/Checkbox/index.js

@@ -2,7 +2,7 @@ import { jsxs as m, jsx as c } from "react/jsx-runtime";
 import { useState as k } from "react";
 import { Icon as p } from "../Icon/Icon.js";
 import { IconTypes as l } from "../Icon/type.js";
-import '../../styles/index.css';function g(a) {
+import '../../styles/index2.css';function g(a) {
   const {
     checked: n = !1,
     className: s,

package/dist/components/Input/Input.js

@@ -1,8 +1,8 @@
 import { jsx as s, jsxs as F } from "react/jsx-runtime";
 import O, { useState as m, useRef as S, useImperativeHandle as V } from "react";
-import { Icon as _ } from "../Icon/Icon.js";
-import { IconTypes as A } from "../Icon/type.js";
-import '../../styles/Input.css';const G = O.forwardRef(
+import { Icon as A } from "../Icon/Icon.js";
+import { IconTypes as B } from "../Icon/type.js";
+import '../../styles/Input.css';const J = O.forwardRef(
   (v, b) => {
     const {
       className: h = "",
@@ -68,9 +68,9 @@ import '../../styles/Input.css';const G = O.forwardRef(
       ),
       g,
       N && l && /* @__PURE__ */ s(
-        _,
+        A,
         {
-          type: A.CLEAR,
+          type: B.CLEAR,
           height: 13,
           width: 13,
           onClick: (t) => {
@@ -82,5 +82,5 @@ import '../../styles/Input.css';const G = O.forwardRef(
   }
 );
 export {
-  G as Input
+  J as Input
 };

package/dist/components/Modal/Modal.js

@@ -1,8 +1,8 @@
-import { jsx as a, Fragment as k } from "react/jsx-runtime";
+import { jsx as r, Fragment as k } from "react/jsx-runtime";
 import { forwardRef as v, useState as m, useRef as p, useEffect as b } from "react";
+import { Modal as x } from "@mui/base/Modal";
 import { c as u } from "../../external_modules/classnames-HRMVOjAa.js";
-import { M as x } from "../../external_modules/mui-BhvHeL5-.js";
-import { C as A } from "../../external_modules/react-vendors-3raCpd-g.js";
+import { C as A } from "../../external_modules/react-vendors-x_iUMC12.js";
 import '../../styles/Modal.css';const E = "uikit-root", N = "uikit-backdrop", R = "uikit-backdropEnterActive", t = {
   root: E,
   backdrop: N,
@@ -16,15 +16,15 @@ import '../../styles/Modal.css';const E = "uikit-root", N = "uikit-backdrop", R
   const { className: e, open: c, onClick: o } = i, [s, n] = m(!1), l = p(null);
   return b(() => {
     n(c || !1);
-  }, [c]), /* @__PURE__ */ a(
+  }, [c]), /* @__PURE__ */ r(
     "div",
     {
       ref: l,
       className: u(t.backdrop, {
         [t.backdropEnterActive]: s
       }, e),
-      onClick: (r) => {
-        n(!1), o == null || o(r);
+      onClick: (a) => {
+        n(!1), o == null || o(a);
       }
     }
   );
@@ -37,8 +37,8 @@ function T(i) {
     style: c,
     className: o,
     children: s
-  } = i, n = p(null), [l, r] = m(!0);
-  return /* @__PURE__ */ a(
+  } = i, n = p(null), [l, a] = m(!0);
+  return /* @__PURE__ */ r(
     x,
     {
       open: d,
@@ -52,10 +52,10 @@ function T(i) {
           style: { ...c }
         },
         backdrop: {
-          onClick: () => r(!1)
+          onClick: () => a(!1)
         }
       },
-      children: /* @__PURE__ */ a(k, { children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(
         A,
         {
           in: l,
@@ -73,12 +73,12 @@ function T(i) {
             exitActive: t["modal-content-exit-active"]
           },
           onEnter: () => {
-            r(!0);
+            a(!0);
           },
           onExited: () => {
-            e == null || e(), r(!0);
+            e == null || e(), a(!0);
           },
-          children: /* @__PURE__ */ a("div", { ref: n, children: s })
+          children: /* @__PURE__ */ r("div", { ref: n, children: s })
         }
       ) })
     }

package/dist/components/Model/index.js

@@ -1,5 +1,5 @@
 import { jsx as c } from "react/jsx-runtime";
-import '../../styles/index2.css';function i(e) {
+import '../../styles/index3.css';function i(e) {
   const {
     className: n,
     onClick: o,

package/dist/components/Plugins/index.js

@@ -4,7 +4,7 @@ import { Icon as B } from "../Icon/Icon.js";
 import { IconTypes as D } from "../Icon/type.js";
 import { Popup as H } from "../Popup/index.js";
 import { usePluginsElement as L } from "./hooks/usePluginsElement.js";
-import '../../styles/index3.css';function M(g, f) {
+import '../../styles/index4.css';function M(g, f) {
   const {
     plugins: N = [],
     showNumber: x,

package/dist/components/Popup/index.js

@@ -1,6 +1,6 @@
 import { jsx as f, Fragment as P } from "react/jsx-runtime";
 import { useRef as I, useState as x, useLayoutEffect as h } from "react";
-import '../../styles/index4.css';function N(g) {
+import '../../styles/index5.css';function N(g) {
   const {
     show: o,
     close: c,

package/dist/components/PopupNew/Popup.js

@@ -1,26 +1,26 @@
 import { jsx as f } from "react/jsx-runtime";
-import { P as u } from "../../external_modules/mui-BhvHeL5-.js";
+import { Unstable_Popup as u } from "@mui/base/Unstable_Popup";
 function m(t) {
   const {
     anchor: o,
     children: e,
     open: r = !1,
-    placement: s = "top",
-    disablePortal: a = !1,
-    strategy: l = "absolute",
-    offset: p = 10,
-    slotProps: n = {}
+    placement: l = "top",
+    disablePortal: s = !1,
+    strategy: a = "absolute",
+    offset: n = 10,
+    slotProps: p = {}
   } = t;
   return o ? /* @__PURE__ */ f(
     u,
     {
       open: r,
       anchor: o,
-      placement: s,
-      disablePortal: a,
-      strategy: l,
-      slotProps: n,
-      offset: p,
+      placement: l,
+      disablePortal: s,
+      strategy: a,
+      slotProps: p,
+      offset: n,
       children: e
     }
   ) : null;

package/dist/components/Profile/Profile.js

@@ -1,13 +1,13 @@
 import { jsx as o, Fragment as m } from "react/jsx-runtime";
-import s, { useState as a } from "react";
-import { useMyProfile as p } from "./hooks/useMyProfile.js";
-import { MyProfile as P } from "./myProfile/MyProfile.js";
+import s, { useState as p } from "react";
+import { useMyProfile as P } from "./hooks/useMyProfile.js";
+import { MyProfile as a } from "./myProfile/MyProfile.js";
 import { TUIProfileDefault as c } from "./ProfileDefault.js";
 import '../../styles/Profile.css';function u(t) {
   const {
     className: i,
     TUIProfile: l
-  } = t, { myProfile: e, updateMyProfile: n } = p(), [r, f] = a(!1);
+  } = t, { myProfile: e, updateMyProfile: n } = P(), [r, f] = p(!1);
   return /* @__PURE__ */ o(m, { children: r ? /* @__PURE__ */ o(
     l || c,
     {
@@ -19,7 +19,7 @@ import '../../styles/Profile.css';function u(t) {
       }
     }
   ) : /* @__PURE__ */ o(
-    P,
+    a,
     {
       profile: e,
       handleAvatar: () => {

package/dist/components/Profile/ProfileDefault.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { Profile } from '@tencentcloud/lite-chat';
 import { UpdateMyProfileParams } from '@tencentcloud/chat-uikit-engine-lite';
+import { Profile } from '@tencentcloud/lite-chat';
 export interface TUIProfileDefaultProps {
     userInfo?: Profile | undefined;
     update?: ((option: UpdateMyProfileParams) => void) | undefined;

package/dist/components/Profile/ProfileDefault.js

@@ -2,7 +2,7 @@ import { jsx as i, jsxs as s } from "react/jsx-runtime";
 import W, { useState as x } from "react";
 import a from "@tencentcloud/chat-uikit-engine-lite";
 import { useUIKit as R, IconChevronLeft as F } from "@tencentcloud/uikit-base-component-react";
-import { A as G } from "../../index-BLFl-K0_-DzfAZFZt.js";
+import { Avatar as G } from "tuikit-atomicx-react/chat";
 import { DivWithEdit as S } from "../DivWithEdit/DivWithEdit.js";
 import { DatePicker as B } from "./DatePicker/DatePicker.js";
 const c = {
@@ -41,39 +41,39 @@ const c = {
   }
 ];
 function z(h) {
-  var _, A, D, Y, b, L;
+  var D, Y, b, A, _, L;
   const {
     userInfo: e,
     update: T,
     onClose: p,
-    className: $
-  } = h, { t: r } = R(), [u, o] = x(""), v = (t) => {
+    className: v
+  } = h, { t: r } = R(), [g, o] = x(""), $ = (t) => {
     const l = String(t);
     if (l.length === 8) {
-      const n = l.substring(0, 4), m = l.substring(4, 6), O = l.substring(6, 8);
-      return `${n}/${m}/${O}`;
+      const n = l.substring(0, 4), d = l.substring(4, 6), O = l.substring(6, 8);
+      return `${n}/${d}/${O}`;
     }
     return `${t}`;
   }, f = (t) => {
     if ((t == null ? void 0 : t.length) === 8) {
-      const l = Number(t.slice(0, 4)), n = Number(t.slice(4, 6)), m = Number(t.slice(-2));
-      return new Date(l, n - 1, m);
+      const l = Number(t.slice(0, 4)), n = Number(t.slice(4, 6)), d = Number(t.slice(-2));
+      return new Date(l, n - 1, d);
     }
     return /* @__PURE__ */ new Date();
   }, k = (t) => {
     const l = t.getDate() > 9 ? t.getDate() : `0${t.getDate()}`, n = t.getMonth() > 8 ? t.getMonth() + 1 : `0${t.getMonth() + 1}`;
     return `${t.getFullYear()}${n}${l}`;
-  }, g = (t) => {
+  }, u = (t) => {
     o(t);
-  }, d = (t) => {
+  }, m = (t) => {
     T && T(t), o("");
   }, U = (t) => {
-    d({ gender: t.value });
+    m({ gender: t.value });
   }, w = (t) => {
-    d({ allowType: t.value });
+    m({ allowType: t.value });
   };
   function M(t) {
-    d({
+    m({
       birthday: Number(k(t))
     });
   }
@@ -93,7 +93,7 @@ function z(h) {
     const n = {
       [l]: t.value
     };
-    d(n);
+    m(n);
   }, C = [
     {
       name: "Signature",
@@ -103,12 +103,12 @@ function z(h) {
     },
     {
       name: "Gender",
-      value: r(e != null && e.gender && ((A = c[e == null ? void 0 : e.gender]) != null && A.replace(
-        c[e == null ? void 0 : e.gender][0],
-        (_ = c[e == null ? void 0 : e.gender][0]) == null ? void 0 : _.toLocaleUpperCase()
-      )) ? `TUIProfile.${(Y = c[e == null ? void 0 : e.gender]) == null ? void 0 : Y.replace(
+      value: r(e != null && e.gender && ((Y = c[e == null ? void 0 : e.gender]) != null && Y.replace(
         c[e == null ? void 0 : e.gender][0],
         (D = c[e == null ? void 0 : e.gender][0]) == null ? void 0 : D.toLocaleUpperCase()
+      )) ? `TUIProfile.${(A = c[e == null ? void 0 : e.gender]) == null ? void 0 : A.replace(
+        c[e == null ? void 0 : e.gender][0],
+        (b = c[e == null ? void 0 : e.gender][0]) == null ? void 0 : b.toLocaleUpperCase()
       )}` : ""),
       type: "select",
       children: /* @__PURE__ */ i("ul", { className: "select-list", children: N == null ? void 0 : N.map((t, l) => {
@@ -132,7 +132,7 @@ function z(h) {
       name: "AllowType",
       value: r(`TUIProfile.${(L = E[(e == null ? void 0 : e.allowType) || ""]) == null ? void 0 : L.replace(
         e && E[e == null ? void 0 : e.allowType][0],
-        e && ((b = E[e == null ? void 0 : e.allowType][0]) == null ? void 0 : b.toLocaleUpperCase())
+        e && ((_ = E[e == null ? void 0 : e.allowType][0]) == null ? void 0 : _.toLocaleUpperCase())
       )}`),
       type: "select",
       children: /* @__PURE__ */ i("ul", { className: "select-list", children: y == null ? void 0 : y.map((t, l) => {
@@ -154,7 +154,7 @@ function z(h) {
     },
     {
       name: "Birthday",
-      value: e != null && e.birthday ? v(e.birthday) : "",
+      value: e != null && e.birthday ? $(e.birthday) : "",
       type: "select",
       children: /* @__PURE__ */ i(
         B,
@@ -168,7 +168,7 @@ function z(h) {
       )
     }
   ];
-  return /* @__PURE__ */ s("div", { className: `${$} tui-profile`, children: [
+  return /* @__PURE__ */ s("div", { className: `${v} tui-profile`, children: [
     /* @__PURE__ */ s(
       "header",
       {
@@ -197,8 +197,8 @@ function z(h) {
           className: "tui-profile-nick",
           value: e == null ? void 0 : e.nick,
           type: "text",
-          toggle: g,
-          isEdit: u === "nick",
+          toggle: u,
+          isEdit: g === "nick",
           confirm: P,
           close: () => {
             o("");
@@ -222,8 +222,8 @@ function z(h) {
             name: t.name,
             value: t.value,
             type: t.type,
-            toggle: g,
-            isEdit: u === t.name,
+            toggle: u,
+            isEdit: g === t.name,
             confirm: P,
             close: () => {
               o("");