@sendbird/uikit-react 3.4.2 → 3.4.3-rc.0

package/cjs/ui/Avatar.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-d2ba1a6b.js');
+var tslib_es6 = require('../tslib.es6-6bb94011.js');
 var React = require('react');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_Icon = require('./Icon.js');
-var uuid = require('../uuid-28e4a814.js');
+var uuid = require('../uuid-7d07ac3f.js');
 require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/Badge.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-d2ba1a6b.js');
+var tslib_es6 = require('../tslib.es6-6bb94011.js');
 var React = require('react');
-var ui_Label = require('../index-1b11bb85.js');
-var LocalizationContext = require('../LocalizationContext-1f669b3c.js');
+var ui_Label = require('../index-3b8eefa2.js');
+var LocalizationContext = require('../LocalizationContext-2f07a939.js');
 require('prop-types');
-require('../stringSet-ddd351f0.js');
-require('../index-f5502150.js');
+require('../stringSet-70ad7caf.js');
+require('../index-3a44ff71.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/BottomSheet.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var reactDom = require('react-dom');
-var index = require('../index-577c9a9b.js');
+var index = require('../index-2129e959.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/Button.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-d2ba1a6b.js');
+var tslib_es6 = require('../tslib.es6-6bb94011.js');
 var React = require('react');
-var ui_Label = require('../index-1b11bb85.js');
+var ui_Label = require('../index-3b8eefa2.js');
 require('prop-types');
-require('../stringSet-ddd351f0.js');
+require('../stringSet-70ad7caf.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/ChannelAvatar.js

@@ -3,10 +3,10 @@
 var React = require('react');
 var ui_Avatar = require('./Avatar.js');
 var ui_Icon = require('./Icon.js');
-var utils = require('../utils-f7f440f8.js');
-require('../tslib.es6-d2ba1a6b.js');
+var utils = require('../utils-76d84308.js');
+require('../tslib.es6-6bb94011.js');
 require('./ImageRenderer.js');
-require('../uuid-28e4a814.js');
+require('../uuid-7d07ac3f.js');
 require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/ConnectionStatus.js

@@ -2,11 +2,11 @@
 
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-1b11bb85.js');
-var LocalizationContext = require('../LocalizationContext-1f669b3c.js');
+var ui_Label = require('../index-3b8eefa2.js');
+var LocalizationContext = require('../LocalizationContext-2f07a939.js');
 require('prop-types');
-require('../stringSet-ddd351f0.js');
-require('../index-f5502150.js');
+require('../stringSet-70ad7caf.js');
+require('../index-3a44ff71.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/ContextMenu.js

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var tslib_es6 = require('../tslib.es6-d2ba1a6b.js');
+var tslib_es6 = require('../tslib.es6-6bb94011.js');
 var reactDom = require('react-dom');
 var ui_SortByRow = require('./SortByRow.js');
-var index = require('../index-b32fce67.js');
-var ui_Label = require('../index-1b11bb85.js');
-require('../uuid-28e4a814.js');
+var index = require('../index-9cb4a8a1.js');
+var ui_Label = require('../index-3b8eefa2.js');
+require('../uuid-7d07ac3f.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('prop-types');
-require('../stringSet-ddd351f0.js');
+require('../stringSet-70ad7caf.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/DateSeparator.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-d2ba1a6b.js');
+var tslib_es6 = require('../tslib.es6-6bb94011.js');
 var React = require('react');
-var color = require('../color-97cfc61b.js');
-var ui_Label = require('../index-1b11bb85.js');
+var color = require('../color-6ed16caa.js');
+var ui_Label = require('../index-3b8eefa2.js');
 require('prop-types');
-require('../stringSet-ddd351f0.js');
+require('../stringSet-70ad7caf.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/EmojiReactions.js

@@ -8,17 +8,17 @@ var ui_ReactionButton = require('./ReactionButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_Icon = require('./Icon.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var index = require('../index-b32fce67.js');
-var LocalizationContext = require('../LocalizationContext-1f669b3c.js');
-require('../tslib.es6-d2ba1a6b.js');
-require('../index-1b11bb85.js');
+var index = require('../index-9cb4a8a1.js');
+var LocalizationContext = require('../LocalizationContext-2f07a939.js');
+require('../tslib.es6-6bb94011.js');
+require('../index-3b8eefa2.js');
 require('prop-types');
-require('../stringSet-ddd351f0.js');
+require('../stringSet-70ad7caf.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-28e4a814.js');
+require('../uuid-7d07ac3f.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-f5502150.js');
+require('../index-3a44ff71.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/FileMessageItemBody.js

@@ -1,15 +1,15 @@
 'use strict';
 
 var React = require('react');
-var ui_Label = require('../index-1b11bb85.js');
+var ui_Label = require('../index-3b8eefa2.js');
 var ui_Icon = require('./Icon.js');
 var ui_TextButton = require('./TextButton.js');
-var index = require('../index-b32fce67.js');
-var color = require('../color-97cfc61b.js');
-var MediaQueryContext = require('../MediaQueryContext-130143d7.js');
+var index = require('../index-9cb4a8a1.js');
+var color = require('../color-6ed16caa.js');
+var MediaQueryContext = require('../MediaQueryContext-729d402a.js');
 require('prop-types');
-require('../stringSet-ddd351f0.js');
-require('../tslib.es6-d2ba1a6b.js');
+require('../stringSet-70ad7caf.js');
+require('../tslib.es6-6bb94011.js');
 require('../utils/message/getOutgoingMessageState.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/FileViewer.js

@@ -4,18 +4,18 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var reactDom = require('react-dom');
-var LocalizationContext = require('../LocalizationContext-1f669b3c.js');
-var index = require('../index-577c9a9b.js');
-var index$1 = require('../index-b32fce67.js');
+var LocalizationContext = require('../LocalizationContext-2f07a939.js');
+var index = require('../index-2129e959.js');
+var index$1 = require('../index-9cb4a8a1.js');
 var ui_Avatar = require('./Avatar.js');
-var ui_Label = require('../index-1b11bb85.js');
+var ui_Label = require('../index-3b8eefa2.js');
 var ui_Icon = require('./Icon.js');
-require('../stringSet-ddd351f0.js');
-require('../index-f5502150.js');
-require('../tslib.es6-d2ba1a6b.js');
+require('../stringSet-70ad7caf.js');
+require('../index-3a44ff71.js');
+require('../tslib.es6-6bb94011.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('./ImageRenderer.js');
-require('../uuid-28e4a814.js');
+require('../uuid-7d07ac3f.js');
 require('prop-types');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/IconButton.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-d2ba1a6b.js');
+var tslib_es6 = require('../tslib.es6-6bb94011.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/ImageRenderer.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-d2ba1a6b.js');
+var tslib_es6 = require('../tslib.es6-6bb94011.js');
 var React = require('react');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/cjs/ui/Input.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ui_Label = require('../index-1b11bb85.js');
+var ui_Label = require('../index-3b8eefa2.js');
 require('prop-types');
-require('../stringSet-ddd351f0.js');
+require('../stringSet-70ad7caf.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/Label.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
 require('prop-types');
-var ui_Label = require('../index-1b11bb85.js');
-require('../stringSet-ddd351f0.js');
+var ui_Label = require('../index-3b8eefa2.js');
+require('../stringSet-70ad7caf.js');
 
 
 

package/cjs/ui/LinkLabel.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var PropTypes = require('prop-types');
-var ui_Label = require('../index-1b11bb85.js');
-require('../stringSet-ddd351f0.js');
+var ui_Label = require('../index-3b8eefa2.js');
+require('../stringSet-70ad7caf.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/Loader.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../tslib.es6-d2ba1a6b.js');
+var tslib_es6 = require('../tslib.es6-6bb94011.js');
 var React = require('react');
 var ui_Icon = require('./Icon.js');
 require('prop-types');

package/cjs/ui/MentionLabel.js

@@ -2,29 +2,29 @@
 
 var React = require('react');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-1b11bb85.js');
+var ui_Label = require('../index-3b8eefa2.js');
 var ui_UserProfile = require('./UserProfile.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-require('../tslib.es6-d2ba1a6b.js');
+require('../tslib.es6-6bb94011.js');
 require('react-dom');
 require('./SortByRow.js');
-require('../uuid-28e4a814.js');
-require('../index-b32fce67.js');
+require('../uuid-7d07ac3f.js');
+require('../index-9cb4a8a1.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('prop-types');
-require('../stringSet-ddd351f0.js');
-require('../LocalizationContext-1f669b3c.js');
-require('../index-f5502150.js');
-require('../UserProfileContext-cde95db8.js');
+require('../stringSet-70ad7caf.js');
+require('../LocalizationContext-2f07a939.js');
+require('../index-3a44ff71.js');
+require('../UserProfileContext-5fbd0305.js');
 require('../sendbirdSelectors.js');
-require('../topics-5edbb1b2.js');
-require('../utils-602ab2fc.js');
+require('../topics-a17b8ec5.js');
+require('../utils-c86c2884.js');
 require('./Avatar.js');
 require('./ImageRenderer.js');
 require('./Icon.js');
 require('./Button.js');
 require('../withSendbird.js');
-require('../_rollupPluginBabelHelpers-32557b21.js');
+require('../_rollupPluginBabelHelpers-325fff35.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/cjs/ui/MentionUserLabel.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var consts = require('../consts-dae31183.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,9 +16,10 @@ function MentionUserLabel(_a) {
       color = _a.color,
       userId = _a.userId;
   return /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "sendbird-mention-user-label ".concat(className, " ").concat(isReverse ? 'reverse' : '', " ").concat(color),
+    className: "".concat(consts.MENTION_USER_LABEL_CLASSNAME, " ").concat(className, " ").concat(isReverse ? 'reverse' : '', " ").concat(color),
     contentEditable: false,
-    "data-userid": userId
+    "data-userid": userId,
+    "data-sb-mention": true
   }, children);
 }
 

package/cjs/ui/MentionUserLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionUserLabel.js","sources":["../../../src/ui/MentionUserLabel/index.tsx"],"sourcesContent":["import React from 'react';\nimport './index.scss';\n\ninterface MentionUserLabelProps {\n  className?: string\n  children?: string;\n  isReverse?: boolean;\n  color?: string;\n  userId?: string;\n}\n\nexport default function MentionUserLabel({\n  className = '',\n  children,\n  isReverse = false,\n  color,\n  userId,\n}: MentionUserLabelProps): JSX.Element {\n  return (\n    <span\n      className={`sendbird-mention-user-label ${className} ${isReverse ? 'reverse' : ''} ${color}`}\n      contentEditable={false}\n      data-userid={userId}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["MentionUserLabel","_a","_b","className","children","_c","isReverse","color","userId","React","concat"],"mappings":";;;;;;;;AAWwB,SAAAA,gBAAA,CAAiBC,EAAjB,EAMA;MALtBC,EAAc,GAAAD,EAAA,CAAAE;MAAdA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA;MACZE,QAAQ;MACRC,EAAA,GAAAJ,EAAA,CAAAK;MAAAA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQA;MACjBE,KAAK,GAAAN,EAAA,CAAAM;MACLC,MAAM,GAAAP,EAAA,CAAAO;EAEN,oBACEC,yBAAA,CAAA,aAAA,CAAA,MAAA,EAAA;IACE,SAAS,EAAE,+BAA+BC,MAA/B,CAA+BP,SAA/B,KAAA,QAAA,CAA4CG,SAAS,GAAG,SAAH,GAAe,EAApE,KAAA,QAAA,CAA0EC,KAA1E,CADb;AAEE,IAAA,eAAe,EAAE,KAFnB;IAGE,aAAaC,EAAAA,MAAAA;AAHf,GAAA,EAKGJ,QALH,CADF,CAAA;AASD;;;;"}
+{"version":3,"file":"MentionUserLabel.js","sources":["../../../src/ui/MentionUserLabel/index.tsx"],"sourcesContent":["import './index.scss';\n\nimport React from 'react';\nimport { MENTION_USER_LABEL_CLASSNAME } from './consts';\n\ninterface MentionUserLabelProps {\n  className?: string\n  children?: string;\n  isReverse?: boolean;\n  color?: string;\n  userId?: string;\n}\n\nexport default function MentionUserLabel({\n  className = '',\n  children,\n  isReverse = false,\n  color,\n  userId,\n}: MentionUserLabelProps): JSX.Element {\n  return (\n    <span\n      className={`${MENTION_USER_LABEL_CLASSNAME} ${className} ${isReverse ? 'reverse' : ''} ${color}`}\n      contentEditable={false}\n      data-userid={userId}\n      data-sb-mention={true}\n    >\n      {children}\n    </span>\n  );\n}\n"],"names":["MentionUserLabel","_a","_b","className","children","_c","isReverse","color","userId","React","concat","MENTION_USER_LABEL_CLASSNAME"],"mappings":";;;;;;;;;AAawB,SAAAA,gBAAA,CAAiBC,EAAjB,EAMA;MALtBC,EAAc,GAAAD,EAAA,CAAAE;MAAdA,SAAS,GAAGD,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA;MACZE,QAAQ;MACRC,EAAA,GAAAJ,EAAA,CAAAK;MAAAA,SAAS,GAAAD,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQA;MACjBE,KAAK,GAAAN,EAAA,CAAAM;MACLC,MAAM,GAAAP,EAAA,CAAAO;EAEN,oBACEC,yBAAA,CAAA,aAAA,CAAA,MAAA,EAAA;IACE,SAAS,EAAE,EAAGC,CAAAA,MAAH,CAAGC,mCAAH,KAAA,QAAA,CAAmCR,SAAnC,EAA4C,GAA5C,CAA4CO,CAAAA,MAA5C,CAAgDJ,SAAS,GAAG,SAAH,GAAe,EAAxE,KAAA,QAAA,CAA8EC,KAA9E,CADb;AAEE,IAAA,eAAe,EAAE,KAFnB;AAGE,IAAA,aAAA,EAAaC,MAHf;IAIE,iBAAiB,EAAA,IAAA;AAJnB,GAAA,EAMGJ,QANH,CADF,CAAA;AAUD;;;;"}

package/cjs/ui/MessageContent.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-32557b21.js');
-var tslib_es6 = require('../tslib.es6-d2ba1a6b.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-325fff35.js');
+var tslib_es6 = require('../tslib.es6-6bb94011.js');
 var React = require('react');
-var index$1 = require('../index-81e19961.js');
+var index$1 = require('../index-e6b1d2b7.js');
 var ui_Avatar = require('./Avatar.js');
 var ui_UserProfile = require('./UserProfile.js');
-var ui_MessageStatus = require('../index-b911f8b3.js');
+var ui_MessageStatus = require('../index-27659174.js');
 var ui_MessageItemMenu = require('./MessageItemMenu.js');
 var ui_MessageItemReactionMenu = require('./MessageItemReactionMenu.js');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../index-1b11bb85.js');
+var ui_Label = require('../index-3b8eefa2.js');
 var ui_EmojiReactions = require('./EmojiReactions.js');
 var ui_AdminMessage = require('./AdminMessage.js');
 var ui_TextMessageItemBody = require('./TextMessageItemBody.js');
@@ -19,33 +19,33 @@ var ui_ThumbnailMessageItemBody = require('./ThumbnailMessageItemBody.js');
 var ui_OGMessageItemBody = require('./OGMessageItemBody.js');
 var ui_UnknownMessageItemBody = require('./UnknownMessageItemBody.js');
 var ui_QuoteMessage = require('./QuoteMessage.js');
-var index = require('../index-b32fce67.js');
-var UserProfileContext = require('../UserProfileContext-cde95db8.js');
-var LocalizationContext = require('../LocalizationContext-1f669b3c.js');
+var index = require('../index-9cb4a8a1.js');
+var UserProfileContext = require('../UserProfileContext-5fbd0305.js');
+var LocalizationContext = require('../LocalizationContext-2f07a939.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var useLongPress = require('../useLongPress-778d6f15.js');
+var useLongPress = require('../useLongPress-7fcddf32.js');
 var ui_Icon = require('./Icon.js');
 var ui_BottomSheet = require('./BottomSheet.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_ReactionButton = require('./ReactionButton.js');
-var MediaQueryContext = require('../MediaQueryContext-130143d7.js');
+var MediaQueryContext = require('../MediaQueryContext-729d402a.js');
 var ui_ThreadReplies = require('./ThreadReplies.js');
-var _const = require('../const-77194948.js');
+var _const = require('../const-94a43f2e.js');
 var ui_VoiceMessageItemBody = require('./VoiceMessageItemBody.js');
-require('../index-f5502150.js');
-require('../uuid-28e4a814.js');
+require('../index-3a44ff71.js');
+require('../uuid-7d07ac3f.js');
 require('prop-types');
 require('../sendbirdSelectors.js');
-require('../topics-5edbb1b2.js');
-require('../utils-602ab2fc.js');
+require('../topics-a17b8ec5.js');
+require('../utils-c86c2884.js');
 require('./Button.js');
-require('../stringSet-ddd351f0.js');
+require('../stringSet-70ad7caf.js');
 require('./Loader.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../index-c4869cdb.js');
-require('../index-78e2bb42.js');
+require('../index-f2f8ceeb.js');
+require('../index-d44e0a55.js');
 require('./IconButton.js');
-require('../types-3fb94919.js');
+require('../types-44d71878.js');
 require('react-dom');
 require('./SortByRow.js');
 require('./Tooltip.js');
@@ -55,13 +55,13 @@ require('./Word.js');
 require('./LinkLabel.js');
 require('./MentionLabel.js');
 require('./TextButton.js');
-require('../color-97cfc61b.js');
+require('../color-6ed16caa.js');
 require('../withSendbird.js');
-require('../index-577c9a9b.js');
+require('../index-2129e959.js');
 require('./ProgressBar.js');
 require('../VoicePlayer/useVoicePlayer.js');
-require('../index-26ff28a8.js');
-require('../consts-f82aaae9.js');
+require('../index-306e7c9a.js');
+require('../consts-1f4e725d.js');
 require('../VoiceRecorder/context.js');
 require('../lame.all.js');
 require('./PlaybackTime.js');

package/cjs/ui/MessageInput.js

@@ -1,22 +1,21 @@
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-32557b21.js');
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-325fff35.js');
 var React = require('react');
-var server = require('react-dom/server');
 var PropTypes = require('prop-types');
-var _const$1 = require('../const-fe838b59.js');
-var _const = require('../const-77194948.js');
+var _const$1 = require('../const-20a4c9f8.js');
+var _const = require('../const-94a43f2e.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_Button = require('./Button.js');
-var ui_MentionUserLabel = require('./MentionUserLabel.js');
-var ui_Icon = require('./Icon.js');
-var ui_Label = require('../index-1b11bb85.js');
-var LocalizationContext = require('../LocalizationContext-1f669b3c.js');
-var index = require('../index-b32fce67.js');
+var tslib_es6 = require('../tslib.es6-6bb94011.js');
 var DOMPurify = require('dompurify');
-var tslib_es6 = require('../tslib.es6-d2ba1a6b.js');
-require('../stringSet-ddd351f0.js');
-require('../index-f5502150.js');
+var consts = require('../consts-dae31183.js');
+var ui_Icon = require('./Icon.js');
+var ui_Label = require('../index-3b8eefa2.js');
+var LocalizationContext = require('../LocalizationContext-2f07a939.js');
+var index = require('../index-9cb4a8a1.js');
+require('../stringSet-70ad7caf.js');
+require('../index-3a44ff71.js');
 require('../utils/message/getOutgoingMessageState.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -25,6 +24,22 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var DOMPurify__default = /*#__PURE__*/_interopDefaultLegacy(DOMPurify);
 
+function renderToString(_a) {
+  var userId = _a.userId,
+      nickname = _a.nickname; // donot change this template, it wont work
+
+  var el = "<span data-userid=\"".concat(userId, "\" data-sb-mention=\"true\" class=\"").concat(consts.MENTION_USER_LABEL_CLASSNAME, "\">").concat(nickname, "</span>");
+  var purifier = DOMPurify__default["default"](window);
+  var sanitized_ = purifier.sanitize(el);
+  var token = sanitized_.split(' ');
+  var spanTag = token[0],
+      rest = token.slice(1); // we do this because DOMPurify removes the contenteditable attribute
+
+  var sanitized = tslib_es6.__spreadArray([spanTag, 'contenteditable="false"'], rest, true).join(' ');
+
+  return sanitized;
+}
+
 // https://davidwalsh.name/javascript-debounce-function
 
 const sanitizeString = str => str === null || str === void 0 ? void 0 : str.replace(/[\u00A0-\u9999<>]/gim, i => ''.concat('&#', i.charCodeAt(0), ';'));
@@ -35,9 +50,10 @@ function inserTemplateToDOM(templateList) {
         userId = template.userId;
 
     if (userId) {
-      return server.renderToString( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ui_MentionUserLabel, {
-        userId: userId
-      }, text)));
+      return renderToString({
+        userId: userId,
+        nickname: text
+      });
     }
 
     return sanitizeString(text);
@@ -337,9 +353,11 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
           if (type === index.StringObjType.mention && mentionedUsers.some(user => (user === null || user === void 0 ? void 0 : user.userId) === userId)) {
             var _mentionedUsers$find;
 
-            return server.renderToString( /*#__PURE__*/React__default["default"].createElement(ui_MentionUserLabel, {
-              userId: userId
-            }, `${_const.USER_MENTION_TEMP_CHAR}${((_mentionedUsers$find = mentionedUsers.find(user => (user === null || user === void 0 ? void 0 : user.userId) === userId)) === null || _mentionedUsers$find === void 0 ? void 0 : _mentionedUsers$find.nickname) || value || stringSet.MENTION_NAME__NO_NAME}`));
+            const nickname = `${_const.USER_MENTION_TEMP_CHAR}${((_mentionedUsers$find = mentionedUsers.find(user => (user === null || user === void 0 ? void 0 : user.userId) === userId)) === null || _mentionedUsers$find === void 0 ? void 0 : _mentionedUsers$find.nickname) || value || stringSet.MENTION_NAME__NO_NAME}`;
+            return renderToString({
+              userId,
+              nickname
+            });
           }
 
           return sanitizeString(value);
@@ -395,9 +413,10 @@ const MessageInput = /*#__PURE__*/React__default["default"].forwardRef((props, r
         const childNodes = [...(textField === null || textField === void 0 ? void 0 : textField.childNodes)];
         const frontTextNode = (_document = document) === null || _document === void 0 ? void 0 : _document.createTextNode((_childNodes$startNode = childNodes[startNodeIndex]) === null || _childNodes$startNode === void 0 ? void 0 : _childNodes$startNode.textContent.slice(0, startOffsetIndex));
         const backTextNode = (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.createTextNode(`\u00A0${(_childNodes$endNodeIn = childNodes[endNodeIndex]) === null || _childNodes$endNodeIn === void 0 ? void 0 : _childNodes$endNodeIn.textContent.slice(endOffsetIndex)}`);
-        const mentionLabel = server.renderToString( /*#__PURE__*/React__default["default"].createElement(ui_MentionUserLabel, {
-          userId: mentionSelectedUser === null || mentionSelectedUser === void 0 ? void 0 : mentionSelectedUser.userId
-        }, `${_const.USER_MENTION_TEMP_CHAR}${(mentionSelectedUser === null || mentionSelectedUser === void 0 ? void 0 : mentionSelectedUser.nickname) || stringSet.MENTION_NAME__NO_NAME}`));
+        const mentionLabel = renderToString({
+          userId: mentionSelectedUser === null || mentionSelectedUser === void 0 ? void 0 : mentionSelectedUser.userId,
+          nickname: `${_const.USER_MENTION_TEMP_CHAR}${(mentionSelectedUser === null || mentionSelectedUser === void 0 ? void 0 : mentionSelectedUser.nickname) || stringSet.MENTION_NAME__NO_NAME}`
+        });
         const div = document.createElement('div');
         div.innerHTML = mentionLabel;
         const newNodes = [...childNodes.slice(0, startNodeIndex), frontTextNode, div.childNodes[0], backTextNode, ...childNodes.slice(endNodeIndex + 1)];