@sendbird/uikit-react 3.14.6 → 3.14.7-rc-1

package/cjs/ui/EmojiReactions.js

@@ -6,46 +6,46 @@ 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('../chunks/bundle-DrYI_bNa.js');
+var index = require('../chunks/bundle-CRjV-DLM.js');
 var ui_BottomSheet = require('./BottomSheet.js');
-var ui_Label = require('../chunks/bundle-DY5rfl6W.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
 var ui_UserListItem = require('./UserListItem.js');
-var utils = require('../chunks/bundle-DOoshvnj.js');
-var _tslib = require('../chunks/bundle-eTYC1RPT.js');
+var utils = require('../chunks/bundle-FcnFNV4V.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var ui_Tooltip = require('./Tooltip.js');
 var ui_TooltipWrapper = require('./TooltipWrapper.js');
-var MediaQueryContext = require('../chunks/bundle-OIKGVRus.js');
-var useLongPress = require('../chunks/bundle-Bgeq75IH.js');
-var LocalizationContext = require('../chunks/bundle-OWb8eJt-.js');
+var MediaQueryContext = require('../chunks/bundle-Bsd8mnLE.js');
+var useLongPress = require('../chunks/bundle-DmfO6_lp.js');
+var LocalizationContext = require('../chunks/bundle-u9XWE6Rm.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var Message_context = require('../Message/context.js');
-var getIsReactionEnabled = require('../chunks/bundle-H13ErLKW.js');
-require('../chunks/bundle-BNMoxGCr.js');
-require('../chunks/bundle-Dymg5zVO.js');
+var getIsReactionEnabled = require('../chunks/bundle-CXyVP3ik.js');
+require('../chunks/bundle-5FP1wNLB.js');
+require('../chunks/bundle-K2UuTY_r.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-YRiE_c63.js');
+require('../chunks/bundle-nJ_H0gk1.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-DW8u-n3u.js');
+require('../chunks/bundle-CkSDsWpR.js');
 require('./IconButton.js');
 require('./Button.js');
 require('@sendbird/uikit-tools');
 require('../withSendbird.js');
 require('css-vars-ponyfill');
-require('../chunks/bundle-CW2oMonb.js');
-require('../chunks/bundle-BNzVVkzd.js');
-require('../chunks/bundle-1A4pOyri.js');
-require('../chunks/bundle-DTzydpqA.js');
-require('../chunks/bundle-C_8UQBXr.js');
-require('../chunks/bundle-DcQeRT4T.js');
+require('../chunks/bundle-DzkRFA4-.js');
+require('../chunks/bundle-B9KKI197.js');
+require('../chunks/bundle-dokTsajJ.js');
+require('../chunks/bundle-Ch54AIEU.js');
+require('../chunks/bundle-BpJxkKab.js');
+require('../chunks/bundle-Ca2fr0Kb.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
 require('./UserProfile.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-7CEyuoln.js');
+require('../chunks/bundle-C9goSwm_.js');
 
 var ReactedMembersBottomSheet = function (_a) {
     var _b, _c, _d;
@@ -118,7 +118,7 @@ var AddReactionBadgeItem = function (_a) {
         shouldPreventDefault: true,
         shouldStopPropagation: true,
     });
-    return (React.createElement("div", _tslib.__assign({ className: "sendbird-emoji-reactions__add-reaction-badge" }, onlyClick),
+    return (React.createElement("div", _tslib.__assign({ className: "sendbird-emoji-reactions__add-reaction-badge", "data-testid": "sendbird-emoji-reactions__add-reaction-badge" }, onlyClick),
         React.createElement(ui_ReactionBadge, { isAdd: true },
             React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.EMOJI_MORE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "20px", height: "20px" }))));
 };
@@ -136,7 +136,7 @@ var MobileEmojisBottomSheet = function (_a) {
                     e === null || e === void 0 ? void 0 : e.stopPropagation();
                     toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
                     hideMenu();
-                }, dataSbId: "ui_mobile_emoji_reactions_menu_".concat(emoji.key) },
+                }, testID: "ui_mobile_emoji_reactions_menu_".concat(emoji.key) },
                 React.createElement(ui_ImageRenderer.default, { url: emoji.url, width: "38px", height: "38px", placeHolder: function (_a) {
                         var style = _a.style;
                         return (React.createElement("div", { style: style },
@@ -172,7 +172,7 @@ var EmojiReactions = function (_a) {
         (((_e = (_d = message.reactions) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0) > 0) && ((_f = message.reactions) === null || _f === void 0 ? void 0 : _f.map(function (reaction) {
             return (React.createElement(ReactionItem, { key: reaction === null || reaction === void 0 ? void 0 : reaction.key, reaction: reaction, memberNicknamesMap: memberNicknamesMap, setEmojiKey: setSelectedEmojiKey, toggleReaction: toggleReaction, emojisMap: emojisMap, channel: channel, message: message }));
         })),
-        (!isMobile && showAddReactionBadge) && (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_ReactionBadge, { className: "sendbird-emoji-reactions__add-reaction-badge", ref: addReactionRef, isAdd: true, onClick: function (e) {
+        (!isMobile && showAddReactionBadge) && (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_ReactionBadge, { className: "sendbird-emoji-reactions__add-reaction-badge", testID: "sendbird-emoji-reactions__add-reaction-badge", ref: addReactionRef, isAdd: true, onClick: function (e) {
                     var _a;
                     toggleDropdown();
                     (_a = e === null || e === void 0 ? void 0 : e.stopPropagation) === null || _a === void 0 ? void 0 : _a.call(e);
@@ -184,7 +184,7 @@ var EmojiReactions = function (_a) {
                         closeDropdown();
                         toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
                         e === null || e === void 0 ? void 0 : e.stopPropagation();
-                    }, dataSbId: "ui_emoji_reactions_menu_".concat(emoji.key) },
+                    }, testID: "ui_emoji_reactions_menu_".concat(emoji.key) },
                     React.createElement(ui_ImageRenderer.default, { url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '', width: "28px", height: "28px", placeHolder: function (_a) {
                             var style = _a.style;
                             return (React.createElement("div", { style: style },

package/cjs/ui/FallbackTemplateMessageItemBody.tsx.js

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var LocalizationContext = require('../chunks/bundle-OWb8eJt-.js');
-var index = require('../chunks/bundle-DrYI_bNa.js');
-var ui_Label = require('../chunks/bundle-DY5rfl6W.js');
-require('../chunks/bundle-eTYC1RPT.js');
-require('../chunks/bundle-BNMoxGCr.js');
-require('../chunks/bundle-1A4pOyri.js');
+var LocalizationContext = require('../chunks/bundle-u9XWE6Rm.js');
+var index = require('../chunks/bundle-CRjV-DLM.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
+require('../chunks/bundle-BGmEoqIq.js');
+require('../chunks/bundle-5FP1wNLB.js');
+require('../chunks/bundle-dokTsajJ.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
 

package/cjs/ui/FileMessageItemBody.js

@@ -1,16 +1,16 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-eTYC1RPT.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-DY5rfl6W.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
 var ui_Icon = require('./Icon.js');
 var ui_TextButton = require('./TextButton.js');
-var index = require('../chunks/bundle-DrYI_bNa.js');
-var color = require('../chunks/bundle-CA69fSDI.js');
-var MediaQueryContext = require('../chunks/bundle-OIKGVRus.js');
+var index = require('../chunks/bundle-CRjV-DLM.js');
+var color = require('../chunks/bundle-D91GTav0.js');
+var MediaQueryContext = require('../chunks/bundle-Bsd8mnLE.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var utils = require('../chunks/bundle-DOoshvnj.js');
-require('../chunks/bundle-BNMoxGCr.js');
+var utils = require('../chunks/bundle-FcnFNV4V.js');
+require('../chunks/bundle-5FP1wNLB.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
 require('../withSendbird.js');
@@ -72,7 +72,7 @@ function FileMessageItemBody(_a) {
                     OTHERS: ui_Icon.IconTypes.FILE_DOCUMENT,
                 }[index.getUIKitFileType(message === null || message === void 0 ? void 0 : message.type)], fillColor: ui_Icon.IconColors.PRIMARY, width: "24px", height: "24px" })),
         React.createElement(ui_TextButton, { className: "sendbird-file-message-item-body__file-name", onClick: handleOnClickTextButton, color: isByMe ? color.Colors.ONCONTENT_1 : color.Colors.ONBACKGROUND_1 },
-            React.createElement(ui_Label.Label, { className: "sendbird-file-message-item-body__file-name__text", type: ui_Label.LabelTypography.BODY_1, color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1 }, index.truncateString((message === null || message === void 0 ? void 0 : message.name) || (message === null || message === void 0 ? void 0 : message.url), truncateMaxNum)))));
+            React.createElement(ui_Label.Label, { className: "sendbird-file-message-item-body__file-name__text", testID: "sendbird-file-message-item-body__file-name__text", type: ui_Label.LabelTypography.BODY_1, color: isByMe ? ui_Label.LabelColors.ONCONTENT_1 : ui_Label.LabelColors.ONBACKGROUND_1 }, index.truncateString((message === null || message === void 0 ? void 0 : message.name) || (message === null || message === void 0 ? void 0 : message.url), truncateMaxNum)))));
 }
 
 module.exports = FileMessageItemBody;

package/cjs/ui/FileViewer.js

@@ -2,37 +2,37 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunks/bundle-eTYC1RPT.js');
+require('../chunks/bundle-BGmEoqIq.js');
 require('react');
 require('react-dom');
-require('../chunks/bundle-OWb8eJt-.js');
-require('../chunks/bundle-DW8u-n3u.js');
-require('../chunks/bundle-DrYI_bNa.js');
-require('../chunks/bundle-DOoshvnj.js');
-require('../chunks/bundle-C_8UQBXr.js');
-require('../chunks/bundle-DY5rfl6W.js');
+require('../chunks/bundle-u9XWE6Rm.js');
+require('../chunks/bundle-CkSDsWpR.js');
+require('../chunks/bundle-CRjV-DLM.js');
+require('../chunks/bundle-FcnFNV4V.js');
+require('../chunks/bundle-BpJxkKab.js');
+require('../chunks/bundle-DgWaY7S0.js');
 require('./Icon.js');
-var ui_FileViewer = require('../chunks/bundle-CTraI7aM.js');
-require('../chunks/bundle-jHjvHr01.js');
-require('../chunks/bundle-BNMoxGCr.js');
-require('../chunks/bundle-1A4pOyri.js');
-require('../chunks/bundle-OIKGVRus.js');
+var ui_FileViewer = require('../chunks/bundle-CvkPNwGA.js');
+require('../chunks/bundle-Cf4_cCe9.js');
+require('../chunks/bundle-5FP1wNLB.js');
+require('../chunks/bundle-dokTsajJ.js');
+require('../chunks/bundle-Bsd8mnLE.js');
 require('./IconButton.js');
 require('./Button.js');
 require('@sendbird/uikit-tools');
 require('../withSendbird.js');
 require('css-vars-ponyfill');
 require('@sendbird/chat');
-require('../chunks/bundle-YRiE_c63.js');
+require('../chunks/bundle-nJ_H0gk1.js');
 require('@sendbird/chat/openChannel');
 require('@sendbird/chat/groupChannel');
-require('../chunks/bundle-CW2oMonb.js');
-require('../chunks/bundle-BNzVVkzd.js');
+require('../chunks/bundle-DzkRFA4-.js');
+require('../chunks/bundle-B9KKI197.js');
 require('../useSendbirdStateContext.js');
-require('../chunks/bundle-Dymg5zVO.js');
+require('../chunks/bundle-K2UuTY_r.js');
 require('../utils/message/getOutgoingMessageState.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-DcQeRT4T.js');
+require('../chunks/bundle-Ca2fr0Kb.js');
 
 
 

package/cjs/ui/Header.js

@@ -2,16 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-eTYC1RPT.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-DY5rfl6W.js');
-var MediaQueryContext = require('../chunks/bundle-OIKGVRus.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
+var MediaQueryContext = require('../chunks/bundle-Bsd8mnLE.js');
 var ui_TextButton = require('./TextButton.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
-var utils = require('../chunks/bundle-DOoshvnj.js');
-require('../chunks/bundle-BNMoxGCr.js');
-require('../chunks/bundle-CA69fSDI.js');
+var utils = require('../chunks/bundle-FcnFNV4V.js');
+require('../chunks/bundle-5FP1wNLB.js');
+require('../chunks/bundle-D91GTav0.js');
 
 var Header = function (_a) {
     var _b;
@@ -23,7 +23,7 @@ var Header = function (_a) {
     catch (err) {
         // TODO: handle it
     }
-    return (React.createElement("div", { className: "sendbird-ui-header ".concat(className) },
+    return (React.createElement("div", { className: utils.classnames('sendbird-ui-header', className), "data-testid": "sendbird-ui-header" },
         renderLeft ? (React.createElement("div", { className: utils.classnames('sendbird-ui-header__left', isMobile ? 'sendbird-ui-header--is-mobile' : 'sendbird-ui-header--is-desktop') }, renderLeft === null || renderLeft === void 0 ? void 0 : renderLeft())) : null,
         React.createElement("div", { className: "sendbird-ui-header__middle" }, renderMiddle === null || renderMiddle === void 0 ? void 0 : renderMiddle()),
         renderRight ? (React.createElement("div", { className: utils.classnames('sendbird-ui-header__right', isMobile ? 'sendbird-ui-header--is-mobile' : 'sendbird-ui-header--is-desktop') }, renderRight === null || renderRight === void 0 ? void 0 : renderRight())) : null));

package/cjs/ui/Icon.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-eTYC1RPT.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var utils = require('../chunks/bundle-DOoshvnj.js');
+var utils = require('../chunks/bundle-FcnFNV4V.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -1038,7 +1038,7 @@ function changeTypeToIconComponent(type) {
     }
 }
 function Icon(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, type = _a.type, _c = _a.fillColor, fillColor = _c === void 0 ? Colors.DEFAULT : _c, _d = _a.width, width = _d === void 0 ? 26 : _d, _e = _a.height, height = _e === void 0 ? 26 : _e, _f = _a.onClick, onClick = _f === void 0 ? utils.noop : _f, _g = _a.children, children = _g === void 0 ? null : _g;
+    var _b = _a.className, className = _b === void 0 ? '' : _b, type = _a.type, _c = _a.fillColor, fillColor = _c === void 0 ? Colors.DEFAULT : _c, _d = _a.width, width = _d === void 0 ? 26 : _d, _e = _a.height, height = _e === void 0 ? 26 : _e, _f = _a.onClick, onClick = _f === void 0 ? utils.noop : _f, _g = _a.children, children = _g === void 0 ? null : _g, testID = _a.testID;
     var iconStyle = {
         width: typeof width === 'string' ? width : "".concat(width, "px"),
         minWidth: typeof width === 'string' ? width : "".concat(width, "px"),
@@ -1049,7 +1049,7 @@ function Icon(_a) {
             'sendbird-icon',
             changeTypeToIconClassName(type),
             changeColorToClassName(fillColor),
-        ], false).join(' '), role: 'button', onClick: onClick, onKeyDown: onClick, tabIndex: 0, style: iconStyle }, children || changeTypeToIconComponent(type)));
+        ], false).join(' '), "data-testid": testID, role: 'button', onClick: onClick, onKeyDown: onClick, tabIndex: 0, style: iconStyle }, children || changeTypeToIconComponent(type)));
 }
 var IconTypes = Types;
 var IconColors = Colors;

package/cjs/ui/IconButton.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-eTYC1RPT.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
 
 var IconButton = React.forwardRef(function (props, ref) {
-    var _a = props.className, className = _a === void 0 ? '' : _a, children = props.children, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.width, width = _c === void 0 ? '56px' : _c, _d = props.height, height = _d === void 0 ? '56px' : _d, _e = props.type, type = _e === void 0 ? 'button' : _e, _f = props.style, style = _f === void 0 ? {} : _f, _g = props.onBlur, onBlur = _g === void 0 ? function () { } : _g, _h = props.onClick, onClick = _h === void 0 ? function () { } : _h;
+    var _a = props.className, className = _a === void 0 ? '' : _a, children = props.children, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.width, width = _c === void 0 ? '56px' : _c, _d = props.height, height = _d === void 0 ? '56px' : _d, _e = props.type, type = _e === void 0 ? 'button' : _e, _f = props.style, style = _f === void 0 ? {} : _f, _g = props.onBlur, onBlur = _g === void 0 ? function () { } : _g, _h = props.onClick, onClick = _h === void 0 ? function () { } : _h, testID = props.testID;
     var _j = React.useState(false), isPressed = _j[0], setIsPressed = _j[1];
-    return (React.createElement("button", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+    return (React.createElement("button", { "data-testid": testID, className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
             'sendbird-iconbutton',
             isPressed ? 'sendbird-iconbutton--pressed' : '',
         ], false).join(' '), disabled: disabled, ref: ref, type: type, style: _tslib.__assign(_tslib.__assign({}, style), { height: height, width: width }), onClick: function (e) {

package/cjs/ui/ImageRenderer.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-eTYC1RPT.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var utils = require('../chunks/bundle-DOoshvnj.js');
+var utils = require('../chunks/bundle-FcnFNV4V.js');
 
 var numberToPx = (function (value) {
     if (value === null)

package/cjs/ui/Input.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ui_Label = require('../chunks/bundle-DY5rfl6W.js');
-require('../chunks/bundle-eTYC1RPT.js');
-require('../chunks/bundle-BNMoxGCr.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
+require('../chunks/bundle-BGmEoqIq.js');
+require('../chunks/bundle-5FP1wNLB.js');
 
 var InputLabel = function (_a) {
     var children = _a.children;

package/cjs/ui/Label.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunks/bundle-eTYC1RPT.js');
+require('../chunks/bundle-BGmEoqIq.js');
 require('react');
-var ui_Label = require('../chunks/bundle-DY5rfl6W.js');
-require('../chunks/bundle-BNMoxGCr.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
+require('../chunks/bundle-5FP1wNLB.js');
 
 
 

package/cjs/ui/LinkLabel.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-eTYC1RPT.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-DY5rfl6W.js');
-var utils = require('../chunks/bundle-DOoshvnj.js');
-require('../chunks/bundle-BNMoxGCr.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
+var utils = require('../chunks/bundle-FcnFNV4V.js');
+require('../chunks/bundle-5FP1wNLB.js');
 
 var http = /https?:\/\//;
 function LinkLabel(_a) {
@@ -22,7 +22,7 @@ function LinkLabel(_a) {
             e.nativeEvent.stopImmediatePropagation();
             utils.openURL(url);
         } },
-        React.createElement(ui_Label.Label, { className: "sendbird-link-label__label", type: type, color: color }, children)));
+        React.createElement(ui_Label.Label, { className: "sendbird-link-label__label", testID: "sendbird-link-label__label", type: type, color: color }, children)));
 }
 var LinkLabelTypography = ui_Label.LabelTypography;
 var LinkLabelColors = ui_Label.LabelColors;

package/cjs/ui/Loader.js

@@ -1,15 +1,15 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-eTYC1RPT.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-require('../chunks/bundle-DOoshvnj.js');
+require('../chunks/bundle-FcnFNV4V.js');
 
 function Loader(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.width, width = _c === void 0 ? '26px' : _c, _d = _a.height, height = _d === void 0 ? '26px' : _d, children = _a.children;
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.width, width = _c === void 0 ? '26px' : _c, _d = _a.height, height = _d === void 0 ? '26px' : _d, children = _a.children, testID = _a.testID;
     return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
             'sendbird-loader',
-        ], false).join(' '), style: {
+        ], false).join(' '), "data-testid": testID, style: {
             width: typeof width === 'string' ? width : "".concat(width, "px"),
             height: typeof height === 'string' ? height : "".concat(height, "px"),
         } }, children

package/cjs/ui/LoadingTemplateMessageItemBody.tsx.js

@@ -3,23 +3,16 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var index = require('../chunks/bundle-DrYI_bNa.js');
 var ui_Loader = require('./Loader.js');
 var ui_Icon = require('./Icon.js');
-require('../chunks/bundle-eTYC1RPT.js');
-require('@sendbird/chat/groupChannel');
-require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-DOoshvnj.js');
+var utils = require('../chunks/bundle-FcnFNV4V.js');
+require('../chunks/bundle-BGmEoqIq.js');
 
 var TEMPLATE_LOADING_SPINNER_SIZE = '40px';
 function LoadingTemplateMessageItemBody(_a) {
     var className = _a.className, isByMe = _a.isByMe;
-    return (React.createElement("div", { className: index.getClassName([
-            className !== null && className !== void 0 ? className : '',
-            isByMe ? 'outgoing' : 'incoming',
-            'sendbird-template-loading-message-item-body',
-        ]) },
-        React.createElement(ui_Loader, { className: "sendbird-message-status__icon", width: TEMPLATE_LOADING_SPINNER_SIZE, height: TEMPLATE_LOADING_SPINNER_SIZE },
+    return (React.createElement("div", { className: utils.classnames(className, isByMe ? 'outgoing' : 'incoming', 'sendbird-template-loading-message-item-body') },
+        React.createElement(ui_Loader, { className: "sendbird-message-status__icon", testID: "sendbird-message-status-icon", width: TEMPLATE_LOADING_SPINNER_SIZE, height: TEMPLATE_LOADING_SPINNER_SIZE },
             React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SPINNER, fillColor: ui_Icon.IconColors.CONTENT_INVERSE_5, width: TEMPLATE_LOADING_SPINNER_SIZE, height: TEMPLATE_LOADING_SPINNER_SIZE }))));
 }
 

package/cjs/ui/LoadingTemplateMessageItemBody.tsx.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingTemplateMessageItemBody.tsx.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"LoadingTemplateMessageItemBody.tsx.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/cjs/ui/MentionLabel.js

@@ -2,29 +2,29 @@
 
 var React = require('react');
 var ui_ContextMenu = require('./ContextMenu.js');
-var ui_Label = require('../chunks/bundle-DY5rfl6W.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
 var ui_UserProfile = require('./UserProfile.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var utils = require('../chunks/bundle-DOoshvnj.js');
-require('../chunks/bundle-Dymg5zVO.js');
-require('../chunks/bundle-eTYC1RPT.js');
+var utils = require('../chunks/bundle-FcnFNV4V.js');
+require('../chunks/bundle-K2UuTY_r.js');
+require('../chunks/bundle-BGmEoqIq.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-YRiE_c63.js');
-require('../chunks/bundle-DrYI_bNa.js');
+require('../chunks/bundle-nJ_H0gk1.js');
+require('../chunks/bundle-CRjV-DLM.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-BNMoxGCr.js');
-require('../chunks/bundle-OWb8eJt-.js');
-require('../chunks/bundle-1A4pOyri.js');
-require('../chunks/bundle-DTzydpqA.js');
+require('../chunks/bundle-5FP1wNLB.js');
+require('../chunks/bundle-u9XWE6Rm.js');
+require('../chunks/bundle-dokTsajJ.js');
+require('../chunks/bundle-Ch54AIEU.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-7CEyuoln.js');
-require('../chunks/bundle-C_8UQBXr.js');
+require('../chunks/bundle-C9goSwm_.js');
+require('../chunks/bundle-BpJxkKab.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-DcQeRT4T.js');
+require('../chunks/bundle-Ca2fr0Kb.js');
 require('./Icon.js');
 require('./Button.js');
 require('../withSendbird.js');

package/cjs/ui/MentionUserLabel.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var consts = require('../chunks/bundle-CBNBRNN0.js');
-var utils = require('../chunks/bundle-DOoshvnj.js');
+var consts = require('../chunks/bundle-BZf2YVCr.js');
+var utils = require('../chunks/bundle-FcnFNV4V.js');
 
 function MentionUserLabel(_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, _c = _a.isReverse, isReverse = _c === void 0 ? false : _c, color = _a.color, userId = _a.userId;