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

package/cjs/ui/OpenchannelOGMessage.js

@@ -1,40 +1,40 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-C-r9vRgc.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var index$1 = require('../chunks/bundle-CjYhSLRD.js');
-var ui_Avatar = require('../chunks/bundle-C0ZNrrcl.js');
+var index$1 = require('../chunks/bundle-D95F7WKf.js');
+var ui_Avatar = require('../chunks/bundle-BpJxkKab.js');
 var ui_ContextMenu = require('./ContextMenu.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_LinkLabel = require('./LinkLabel.js');
-var ui_Label = require('../chunks/bundle-Deao1Upp.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
 var ui_Loader = require('./Loader.js');
 var ui_UserProfile = require('./UserProfile.js');
-var UserProfileContext = require('../chunks/bundle-D7v4i_Ae.js');
-var uuid = require('../chunks/bundle-Ub33KGva.js');
-var utils = require('../chunks/bundle-DLTCoQzD.js');
-var LocalizationContext = require('../chunks/bundle-B7wJ4Hqk.js');
-var index = require('../chunks/bundle-Bv_QMEk2.js');
-var MediaQueryContext = require('../chunks/bundle-CLNUkVC8.js');
-var useLongPress = require('../chunks/bundle-Pfx0MBr4.js');
-var index$2 = require('../chunks/bundle-BCt-Rzil.js');
-var tokenize = require('../chunks/bundle-DFVUnSWq.js');
-var utils$1 = require('../chunks/bundle-CLte647H.js');
-require('../chunks/bundle-CDJXrIVC.js');
-require('../chunks/bundle-CxNGVWIy.js');
-require('../chunks/bundle-Bpy7IQta.js');
+var UserProfileContext = require('../chunks/bundle-Ch54AIEU.js');
+var uuid = require('../chunks/bundle-nJ_H0gk1.js');
+var utils = require('../chunks/bundle-cXx7XwGe.js');
+var LocalizationContext = require('../chunks/bundle-u9XWE6Rm.js');
+var index = require('../chunks/bundle-0CaiAMj2.js');
+var MediaQueryContext = require('../chunks/bundle-Bsd8mnLE.js');
+var useLongPress = require('../chunks/bundle-DmfO6_lp.js');
+var index$2 = require('../chunks/bundle-WLDzr4U5.js');
+var tokenize = require('../chunks/bundle-VNK4cKfS.js');
+var utils$1 = require('../chunks/bundle-FcnFNV4V.js');
+require('../chunks/bundle-dokTsajJ.js');
+require('../chunks/bundle-Ca2fr0Kb.js');
+require('../chunks/bundle-K2UuTY_r.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-Cw7xe6J1.js');
+require('../chunks/bundle-CRjV-DLM.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-DWBc-Yv7.js');
+require('../chunks/bundle-5FP1wNLB.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-DpK1fr1j.js');
+require('../chunks/bundle-C9goSwm_.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
@@ -42,16 +42,16 @@ require('../Message/context.js');
 require('./MentionLabel.js');
 
 function OpenChannelOGMessage(_a) {
-    var _b, _c;
-    var message = _a.message, isOperator = _a.isOperator, _d = _a.isEphemeral, isEphemeral = _d === void 0 ? false : _d, className = _a.className, disabled = _a.disabled, showEdit = _a.showEdit, showRemove = _a.showRemove, resendMessage = _a.resendMessage, chainTop = _a.chainTop, userId = _a.userId;
+    var _b, _c, _d;
+    var message = _a.message, isOperator = _a.isOperator, _e = _a.isEphemeral, isEphemeral = _e === void 0 ? false : _e, className = _a.className, disabled = _a.disabled, showEdit = _a.showEdit, showRemove = _a.showRemove, resendMessage = _a.resendMessage, chainTop = _a.chainTop, userId = _a.userId;
     var status = message === null || message === void 0 ? void 0 : message.sendingStatus;
     var ogMetaData = (_b = message.ogMetaData) !== null && _b !== void 0 ? _b : null;
     var defaultImage = ogMetaData === null || ogMetaData === void 0 ? void 0 : ogMetaData.defaultImage;
-    var _e = LocalizationContext.useLocalization(), stringSet = _e.stringSet, dateLocale = _e.dateLocale;
+    var _f = LocalizationContext.useLocalization(), stringSet = _f.stringSet, dateLocale = _f.dateLocale;
     var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
-    var _f = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _f.disableUserProfile, renderUserProfile = _f.renderUserProfile;
-    var _g = React.useState({}), contextStyle = _g[0], setContextStyle = _g[1];
-    var _h = React.useState(false), showContextMenu = _h[0], setShowContextMenu = _h[1];
+    var _g = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _g.disableUserProfile, renderUserProfile = _g.renderUserProfile;
+    var _h = React.useState({}), contextStyle = _h[0], setContextStyle = _h[1];
+    var _j = React.useState(false), showContextMenu = _j[0], setShowContextMenu = _j[1];
     var openLink = function () { return utils$1.openURL(ogMetaData === null || ogMetaData === void 0 ? void 0 : ogMetaData.url); };
     var onLongPress = useLongPress.useLongPress({
         onLongPress: function () { return setShowContextMenu(true); },
@@ -59,10 +59,10 @@ function OpenChannelOGMessage(_a) {
     }, {
         delay: 300,
     });
-    var messageComponentRef = React.useRef(null);
-    var contextMenuRef = React.useRef(null);
-    var mobileMenuRef = React.useRef(null);
-    var avatarRef = React.useRef(null);
+    var messageComponentRef = React.useRef();
+    var contextMenuRef = React.useRef();
+    var mobileMenuRef = React.useRef();
+    var avatarRef = React.useRef();
     var isPending = index.checkIsPending(status);
     var isFailed = index.checkIsFailed(status);
     var sender = index.getSenderFromMessage(message);
@@ -73,8 +73,8 @@ function OpenChannelOGMessage(_a) {
     }, [message === null || message === void 0 ? void 0 : message.updatedAt, message === null || message === void 0 ? void 0 : message.message]);
     // place conxt menu top depending clientHeight of message component
     React.useEffect(function () {
-        var _a;
-        if (((_a = messageComponentRef === null || messageComponentRef === void 0 ? void 0 : messageComponentRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) > 36) {
+        var _a, _b;
+        if (((_a = messageComponentRef === null || messageComponentRef === void 0 ? void 0 : messageComponentRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) && ((_b = messageComponentRef === null || messageComponentRef === void 0 ? void 0 : messageComponentRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight) > 36) {
             setContextStyle({ top: '8px ' });
         }
         else {
@@ -122,31 +122,31 @@ function OpenChannelOGMessage(_a) {
                             index.isFineCopy({ message: message, userId: userId, status: status }) && (React.createElement(ui_ContextMenu.MenuItem, { className: "sendbird-openchannel-og-message__top__context-menu__copy", onClick: function () {
                                     utils.copyToClipboard(message.message);
                                     closeDropdown();
-                                }, dataSbId: "open_channel_og_message_menu_copy" }, stringSet.CONTEXT_MENU_DROPDOWN__COPY)),
+                                }, testID: "open_channel_og_message_menu_copy" }, stringSet.CONTEXT_MENU_DROPDOWN__COPY)),
                             (!isEphemeral && index.isFineEdit({ message: message, userId: userId, status: status })) && (React.createElement(ui_ContextMenu.MenuItem, { className: "sendbird-openchannel-og-message__top__context-menu__edit", onClick: function () {
                                     if (disabled) {
                                         return;
                                     }
                                     showEdit(true);
                                     closeDropdown();
-                                }, dataSbId: "open_channel_og_message_menu_edit" }, stringSet.CONTEXT_MENU_DROPDOWN__EDIT)),
+                                }, testID: "open_channel_og_message_menu_edit" }, stringSet.CONTEXT_MENU_DROPDOWN__EDIT)),
                             index.isFineResend({ message: message, userId: userId, status: status }) && (React.createElement(ui_ContextMenu.MenuItem, { className: "sendbird-openchannel-og-message__top__context-menu__resend", onClick: function () {
                                     resendMessage(message);
                                     closeDropdown();
-                                }, dataSbId: "open_channel_og_message_menu_resend" }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND)),
+                                }, testID: "open_channel_og_message_menu_resend" }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND)),
                             (!isEphemeral && index.isFineDelete({ message: message, userId: userId, status: status })) && (React.createElement(ui_ContextMenu.MenuItem, { className: "sendbird-openchannel-og-message__top__context-menu__delete", onClick: function () {
                                     if (disabled) {
                                         return;
                                     }
                                     showRemove(true);
                                     closeDropdown();
-                                }, dataSbId: "open_channel_og_message_menu_delete" }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE)))); } })))),
+                                }, testID: "open_channel_og_message_menu_delete" }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE)))); } })))),
             React.createElement("div", { className: "sendbird-openchannel-og-message__bottom" },
                 React.createElement("div", { className: "sendbird-openchannel-og-message__bottom__og-tag", ref: mobileMenuRef },
-                    ogMetaData.url && (React.createElement(ui_Label.Label, { className: "sendbird-openchannel-og-message__bottom__og-tag__url", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, ogMetaData.url)),
-                    ogMetaData.title && (React.createElement(ui_LinkLabel.default, { className: "sendbird-openchannel-og-message__bottom__og-tag__title", src: ogMetaData.url, type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.PRIMARY }, ogMetaData.title)),
-                    ogMetaData.description && (React.createElement(ui_Label.Label, { className: "sendbird-openchannel-og-message__bottom__og-tag__description", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, ogMetaData.description)),
-                    ogMetaData.url && (React.createElement("div", { className: "sendbird-openchannel-og-message__bottom__og-tag__thumbnail", role: "button", onClick: openLink, onKeyDown: openLink, tabIndex: 0 }, defaultImage && (React.createElement(ui_ImageRenderer.default, { className: "sendbird-openchannel-og-message__bottom__og-tag__thumbnail__image", url: defaultImage.url || '', alt: defaultImage.alt || '', height: "189px", defaultComponent: (React.createElement("div", { className: "sendbird-openchannel-og-message__bottom__og-tag__thumbnail__image--placeholder" },
+                    (ogMetaData === null || ogMetaData === void 0 ? void 0 : ogMetaData.url) && (React.createElement(ui_Label.Label, { className: "sendbird-openchannel-og-message__bottom__og-tag__url", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, ogMetaData.url)),
+                    (ogMetaData === null || ogMetaData === void 0 ? void 0 : ogMetaData.title) && (React.createElement(ui_LinkLabel.default, { className: "sendbird-openchannel-og-message__bottom__og-tag__title", src: (_d = ogMetaData.url) !== null && _d !== void 0 ? _d : '', type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.PRIMARY }, ogMetaData.title)),
+                    (ogMetaData === null || ogMetaData === void 0 ? void 0 : ogMetaData.description) && (React.createElement(ui_Label.Label, { className: "sendbird-openchannel-og-message__bottom__og-tag__description", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, ogMetaData.description)),
+                    (ogMetaData === null || ogMetaData === void 0 ? void 0 : ogMetaData.url) && (React.createElement("div", { className: "sendbird-openchannel-og-message__bottom__og-tag__thumbnail", role: "button", onClick: openLink, onKeyDown: openLink, tabIndex: 0 }, defaultImage && (React.createElement(ui_ImageRenderer.default, { className: "sendbird-openchannel-og-message__bottom__og-tag__thumbnail__image", url: defaultImage.url || '', alt: defaultImage.alt || '', height: "189px", defaultComponent: (React.createElement("div", { className: "sendbird-openchannel-og-message__bottom__og-tag__thumbnail__image--placeholder" },
                             React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.THUMBNAIL_NONE, width: "56px", height: "56px" }))) }))))),
                 (isPending || isFailed) && (React.createElement("div", { className: "sendbird-openchannel-og-message__top__right__tail" },
                     isPending && (React.createElement(ui_Loader, { width: "16px", height: "16px" },

package/cjs/ui/OpenchannelThumbnailMessage.js

@@ -1,36 +1,36 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-C-r9vRgc.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var index$1 = require('../chunks/bundle-CjYhSLRD.js');
-var LocalizationContext = require('../chunks/bundle-B7wJ4Hqk.js');
-var ui_Avatar = require('../chunks/bundle-C0ZNrrcl.js');
+var index$1 = require('../chunks/bundle-D95F7WKf.js');
+var LocalizationContext = require('../chunks/bundle-u9XWE6Rm.js');
+var ui_Avatar = require('../chunks/bundle-BpJxkKab.js');
 var ui_ContextMenu = require('./ContextMenu.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
-var ui_Label = require('../chunks/bundle-Deao1Upp.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
 var ui_Loader = require('./Loader.js');
 var ui_UserProfile = require('./UserProfile.js');
-var UserProfileContext = require('../chunks/bundle-D7v4i_Ae.js');
-var index = require('../chunks/bundle-Bv_QMEk2.js');
-var MediaQueryContext = require('../chunks/bundle-CLNUkVC8.js');
-var useLongPress = require('../chunks/bundle-Pfx0MBr4.js');
-require('../chunks/bundle-CDJXrIVC.js');
-require('../chunks/bundle-DWBc-Yv7.js');
-require('../chunks/bundle-CxNGVWIy.js');
-require('../chunks/bundle-Bpy7IQta.js');
+var UserProfileContext = require('../chunks/bundle-Ch54AIEU.js');
+var index = require('../chunks/bundle-0CaiAMj2.js');
+var MediaQueryContext = require('../chunks/bundle-Bsd8mnLE.js');
+var useLongPress = require('../chunks/bundle-DmfO6_lp.js');
+require('../chunks/bundle-dokTsajJ.js');
+require('../chunks/bundle-5FP1wNLB.js');
+require('../chunks/bundle-Ca2fr0Kb.js');
+require('../chunks/bundle-FcnFNV4V.js');
+require('../chunks/bundle-K2UuTY_r.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-Ub33KGva.js');
-require('../chunks/bundle-Cw7xe6J1.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-CLte647H.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-DpK1fr1j.js');
+require('../chunks/bundle-C9goSwm_.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
@@ -145,7 +145,7 @@ function OpenchannelThumbnailMessage(_a) {
                                     React.createElement(ui_Icon.default, { className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video__icon", type: ui_Icon.IconTypes.PLAY, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: "56px", height: "56px" })))
                                 : (React.createElement(ui_Icon.default, { className: "sendbird-openchannel-thumbnail-message__right__body__wrap__video--icon", type: ui_Icon.IconTypes.PHOTO, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: "56px", height: "56px" }))),
                             _b[SUPPORTING_TYPES.IMAGE] = ((url || localUrl)
-                                ? (React.createElement(ui_ImageRenderer.default, { className: "sendbird-openchannel-thumbnail-message__right__body__wrap__image", url: thumbnailUrl || url || localUrl, alt: "image", width: messageWidth, height: "270px", placeHolder: memorizedThumbnailPlaceHolder(ui_Icon.IconTypes.PHOTO) }))
+                                ? (React.createElement(ui_ImageRenderer.default, { className: "sendbird-openchannel-thumbnail-message__right__body__wrap__image", url: thumbnailUrl || url || localUrl || '', alt: "image", width: messageWidth, height: "270px", placeHolder: memorizedThumbnailPlaceHolder(ui_Icon.IconTypes.PHOTO) }))
                                 : (React.createElement(ui_Icon.default, { className: "sendbird-openchannel-thumbnail-message__right__body__wrap__image--icon", type: ui_Icon.IconTypes.PHOTO, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: "56px", height: "56px" }))),
                             _b[SUPPORTING_TYPES.UNSUPPORTED] = (React.createElement(ui_Icon.default, { className: "sendbird-openchannel-thumbnail-message__right__body__wrap__unknown", type: ui_Icon.IconTypes.PHOTO, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: "56px", height: "56px" })),
                             _b)[getSupportingFileType(type)])),
@@ -158,14 +158,14 @@ function OpenchannelThumbnailMessage(_a) {
                     index.isFineResend({ message: message, userId: userId, status: status }) && (React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
                             resendMessage(message);
                             closeDropdown();
-                        }, dataSbId: "open_channel_thumbnail_message_menu_resend" }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND)),
+                        }, testID: "open_channel_thumbnail_message_menu_resend" }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND)),
                     (!isEphemeral && index.isFineDelete({ message: message, userId: userId, status: status })) && (React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
                             if (disabled) {
                                 return;
                             }
                             showRemove(true);
                             closeDropdown();
-                        }, dataSbId: "open_channel_thumbnail_message_menu_delete" }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE)))); } }))))),
+                        }, testID: "open_channel_thumbnail_message_menu_delete" }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE)))); } }))))),
         contextMenu && (React.createElement(index.OpenChannelMobileMenu, { message: message, parentRef: mobileMenuRef, hideMenu: function () {
                 setContextMenu(false);
             }, showRemove: function () {

package/cjs/ui/OpenchannelUserMessage.js

@@ -1,35 +1,35 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-C-r9vRgc.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var index$1 = require('../chunks/bundle-CjYhSLRD.js');
-var ui_Avatar = require('../chunks/bundle-C0ZNrrcl.js');
+var index$1 = require('../chunks/bundle-D95F7WKf.js');
+var ui_Avatar = require('../chunks/bundle-BpJxkKab.js');
 var ui_ContextMenu = require('./ContextMenu.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
-var ui_Label = require('../chunks/bundle-Deao1Upp.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
 var ui_Loader = require('./Loader.js');
 var ui_UserProfile = require('./UserProfile.js');
-var UserProfileContext = require('../chunks/bundle-D7v4i_Ae.js');
-var LocalizationContext = require('../chunks/bundle-B7wJ4Hqk.js');
-var utils = require('../chunks/bundle-DLTCoQzD.js');
-var uuid = require('../chunks/bundle-Ub33KGva.js');
-var index = require('../chunks/bundle-Bv_QMEk2.js');
-var MediaQueryContext = require('../chunks/bundle-CLNUkVC8.js');
-var useLongPress = require('../chunks/bundle-Pfx0MBr4.js');
-var index$2 = require('../chunks/bundle-Cw7xe6J1.js');
-require('../chunks/bundle-CDJXrIVC.js');
+var UserProfileContext = require('../chunks/bundle-Ch54AIEU.js');
+var LocalizationContext = require('../chunks/bundle-u9XWE6Rm.js');
+var utils = require('../chunks/bundle-cXx7XwGe.js');
+var uuid = require('../chunks/bundle-nJ_H0gk1.js');
+var index = require('../chunks/bundle-0CaiAMj2.js');
+var MediaQueryContext = require('../chunks/bundle-Bsd8mnLE.js');
+var useLongPress = require('../chunks/bundle-DmfO6_lp.js');
+var index$2 = require('../chunks/bundle-CRjV-DLM.js');
+require('../chunks/bundle-dokTsajJ.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-CLte647H.js');
-require('../chunks/bundle-CxNGVWIy.js');
-require('../chunks/bundle-Bpy7IQta.js');
+require('../chunks/bundle-FcnFNV4V.js');
+require('../chunks/bundle-Ca2fr0Kb.js');
+require('../chunks/bundle-K2UuTY_r.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-DWBc-Yv7.js');
+require('../chunks/bundle-5FP1wNLB.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-DpK1fr1j.js');
+require('../chunks/bundle-C9goSwm_.js');
 require('./Button.js');
 require('../useSendbirdStateContext.js');
 require('../withSendbird.js');
@@ -41,10 +41,10 @@ function OpenchannelUserMessage(_a) {
     // hooks
     var _c = LocalizationContext.useLocalization(), stringSet = _c.stringSet, dateLocale = _c.dateLocale;
     var _d = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _d.disableUserProfile, renderUserProfile = _d.renderUserProfile;
-    var messageRef = React.useRef(null);
-    var avatarRef = React.useRef(null);
-    var contextMenuRef = React.useRef(null);
-    var mobileMenuRef = React.useRef(null);
+    var messageRef = React.useRef();
+    var avatarRef = React.useRef();
+    var contextMenuRef = React.useRef();
+    var mobileMenuRef = React.useRef();
     var _e = React.useState({}), contextStyle = _e[0], setContextStyle = _e[1];
     var _f = React.useState(false), contextMenu = _f[0], setContextMenu = _f[1];
     // consts
@@ -55,7 +55,7 @@ function OpenchannelUserMessage(_a) {
     // place context menu top depending clientHeight of message component
     React.useEffect(function () {
         var _a;
-        if (((_a = messageRef === null || messageRef === void 0 ? void 0 : messageRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) > 36) {
+        if (((_a = messageRef === null || messageRef === void 0 ? void 0 : messageRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) && messageRef.current.clientHeight > 36) {
             setContextStyle({ top: '8px ' });
         }
         else {
@@ -112,25 +112,25 @@ function OpenchannelUserMessage(_a) {
                         index.isFineCopy({ message: message, userId: userId, status: status }) && (React.createElement(ui_ContextMenu.MenuItem, { className: "sendbird-openchannel-user-message__context-menu__copy", onClick: function () {
                                 utils.copyToClipboard(message.message);
                                 closeDropdown();
-                            }, dataSbId: "open_channel_user_message_menu_copy" }, stringSet.CONTEXT_MENU_DROPDOWN__COPY)),
+                            }, testID: "open_channel_user_message_menu_copy" }, stringSet.CONTEXT_MENU_DROPDOWN__COPY)),
                         (!isEphemeral && index.isFineEdit({ message: message, userId: userId, status: status })) && (React.createElement(ui_ContextMenu.MenuItem, { className: "sendbird-openchannel-user-message__context-menu__edit", onClick: function () {
                                 if (disabled) {
                                     return;
                                 }
                                 showEdit(true);
                                 closeDropdown();
-                            }, dataSbId: "open_channel_user_message_menu_edit" }, stringSet.CONTEXT_MENU_DROPDOWN__EDIT)),
+                            }, testID: "open_channel_user_message_menu_edit" }, stringSet.CONTEXT_MENU_DROPDOWN__EDIT)),
                         index.isFineResend({ message: message, userId: userId, status: status }) && (React.createElement(ui_ContextMenu.MenuItem, { className: "sendbird-openchannel-user-message__context-menu__resend", onClick: function () {
                                 resendMessage(message);
                                 closeDropdown();
-                            }, dataSbId: "open_channel_user_message_menu_resend" }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND)),
+                            }, testID: "open_channel_user_message_menu_resend" }, stringSet.CONTEXT_MENU_DROPDOWN__RESEND)),
                         (!isEphemeral && index.isFineDelete({ message: message, userId: userId, status: status })) && (React.createElement(ui_ContextMenu.MenuItem, { className: "sendbird-openchannel-user-message__context-menu__delete", onClick: function () {
                                 if (disabled) {
                                     return;
                                 }
                                 showRemove(true);
                                 closeDropdown();
-                            }, dataSbId: "open_channel_user_message_menu_delete" }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE)))); } })))),
+                            }, testID: "open_channel_user_message_menu_delete" }, stringSet.CONTEXT_MENU_DROPDOWN__DELETE)))); } })))),
         contextMenu && (React.createElement(index.OpenChannelMobileMenu, { message: message, parentRef: mobileMenuRef, hideMenu: function () {
                 setContextMenu(false);
             }, showRemove: function () {

package/cjs/ui/PlaceHolder.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-C-r9vRgc.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var LocalizationContext = require('../chunks/bundle-B7wJ4Hqk.js');
+var LocalizationContext = require('../chunks/bundle-u9XWE6Rm.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-Deao1Upp.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
 var ui_Loader = require('./Loader.js');
-require('../chunks/bundle-DWBc-Yv7.js');
-require('../chunks/bundle-CDJXrIVC.js');
-require('../chunks/bundle-CLte647H.js');
+require('../chunks/bundle-5FP1wNLB.js');
+require('../chunks/bundle-dokTsajJ.js');
+require('../chunks/bundle-FcnFNV4V.js');
 
 var PlaceHolderTypes = {
     LOADING: 'LOADING',
@@ -22,7 +22,7 @@ var PlaceHolderTypes = {
     NO_RESULTS: 'NO_RESULTS',
 };
 function PlaceHolder(_a) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, type = _a.type, iconSize = _a.iconSize, _c = _a.searchInString, searchInString = _c === void 0 ? '' : _c, _d = _a.retryToConnect, retryToConnect = _d === void 0 ? null : _d;
+    var _b = _a.className, className = _b === void 0 ? '' : _b, type = _a.type, iconSize = _a.iconSize, _c = _a.searchInString, searchInString = _c === void 0 ? '' : _c, retryToConnect = _a.retryToConnect;
     var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
     return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
             'sendbird-place-holder',

package/cjs/ui/PlaybackTime.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ui_Label = require('../chunks/bundle-Deao1Upp.js');
-require('../chunks/bundle-C-r9vRgc.js');
-require('../chunks/bundle-DWBc-Yv7.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
+require('../chunks/bundle-BGmEoqIq.js');
+require('../chunks/bundle-5FP1wNLB.js');
 
 var PlaybackTime = function (_a) {
     var className = _a.className, _b = _a.time, time = _b === void 0 ? 0 : _b, _c = _a.labelType, labelType = _c === void 0 ? ui_Label.LabelTypography.CAPTION_2 : _c, _d = _a.labelColor, labelColor = _d === void 0 ? ui_Label.LabelColors.ONCONTENT_1 : _d;

package/cjs/ui/ProgressBar.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var utils = require('../chunks/bundle-FcnFNV4V.js');
 
 /* eslint-disable no-redeclare */
 var ProgressBarColorTypes = {
@@ -14,7 +15,7 @@ var ProgressBar = function (_a) {
     var width = React.useMemo(function () {
         return "".concat(currentSize / maxSize * 100, "%");
     }, [currentSize, maxSize]);
-    return (React.createElement("div", { className: "sendbird-progress-bar ".concat(className, " ").concat(colorType, " ").concat(disabled ? 'progress-bar--disabled' : '') },
+    return (React.createElement("div", { className: utils.classnames('sendbird-progress-bar', className, colorType, disabled && 'progress-bar--disabled') },
         React.createElement("div", { className: "sendbird-progress-bar__fill", style: { width: width } })));
 };
 

package/cjs/ui/ProgressBar.js.map

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

package/cjs/ui/QuoteMessage.js

@@ -2,15 +2,15 @@
 
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-Deao1Upp.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
-var LocalizationContext = require('../chunks/bundle-B7wJ4Hqk.js');
-var index = require('../chunks/bundle-Cw7xe6J1.js');
-var utils = require('../chunks/bundle-DmVeFWB4.js');
-require('../chunks/bundle-C-r9vRgc.js');
-require('../chunks/bundle-CLte647H.js');
-require('../chunks/bundle-DWBc-Yv7.js');
-require('../chunks/bundle-CDJXrIVC.js');
+var LocalizationContext = require('../chunks/bundle-u9XWE6Rm.js');
+var index = require('../chunks/bundle-CRjV-DLM.js');
+var utils = require('../chunks/bundle-DTtY3_Ni.js');
+require('../chunks/bundle-BGmEoqIq.js');
+require('../chunks/bundle-FcnFNV4V.js');
+require('../chunks/bundle-5FP1wNLB.js');
+require('../chunks/bundle-dokTsajJ.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
 
@@ -39,17 +39,17 @@ function QuoteMessage(_a) {
         } },
         React.createElement("div", { className: "sendbird-quote-message__replied-to" },
             React.createElement(ui_Icon.default, { className: "sendbird-quote-message__replied-to__icon", type: ui_Icon.IconTypes.REPLY, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "12px", height: "12px" }),
-            React.createElement(ui_Label.Label, { className: "sendbird-quote-message__replied-to__text", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_3 },
+            React.createElement(ui_Label.Label, { className: "sendbird-quote-message__replied-to__text", testID: "sendbird-quote-message__replied-to__text", type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_3 },
                 React.createElement("span", { className: "sendbird-quote-message__replied-to__text__nickname" }, currentMessageSenderNickname),
                 React.createElement("span", { className: "sendbird-quote-message__replied-to__text__text" }, stringSet.QUOTED_MESSAGE__REPLIED_TO),
                 React.createElement("span", { className: "sendbird-quote-message__replied-to__text__nickname" }, parentMessageSenderNickname))),
         React.createElement("div", { className: "sendbird-quote-message__replied-message" },
             isUnavailable && (React.createElement("div", { className: "sendbird-quote-message__replied-message__text-message" },
-                React.createElement(ui_Label.Label, { className: "sendbird-quote-message__replied-message__text-message__word", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.QUOTED_MESSAGE__UNAVAILABLE))),
+                React.createElement(ui_Label.Label, { className: "sendbird-quote-message__replied-message__text-message__word", testID: "sendbird-quote-message__replied-message__text-message__word", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.QUOTED_MESSAGE__UNAVAILABLE))),
             ((index.isUserMessage(parentMessage) && ((_g = parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.message) === null || _g === void 0 ? void 0 : _g.length) > 0) && !isUnavailable) && (React.createElement("div", { className: "sendbird-quote-message__replied-message__text-message" },
-                React.createElement(ui_Label.Label, { className: "sendbird-quote-message__replied-message__text-message__word", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.message))),
+                React.createElement(ui_Label.Label, { className: "sendbird-quote-message__replied-message__text-message__word", testID: "sendbird-quote-message__replied-message__text-message__word", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, parentMessage === null || parentMessage === void 0 ? void 0 : parentMessage.message))),
             (index.isVoiceMessage(parentMessage) && parentMessageUrl && !isUnavailable) && (React.createElement("div", { className: "sendbird-quote-message__replied-message__text-message" },
-                React.createElement(ui_Label.Label, { className: "sendbird-quote-message__replied-message__text-message__word", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.VOICE_MESSAGE))),
+                React.createElement(ui_Label.Label, { className: "sendbird-quote-message__replied-message__text-message__word", testID: "sendbird-quote-message__replied-message__text-message__word", type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.VOICE_MESSAGE))),
             ((index.isThumbnailMessage(parentMessage)
                 || index.isMultipleFilesMessage(parentMessage))
                 && parentMessageUrl

package/cjs/ui/QuoteMessageInput.js

@@ -1,25 +1,25 @@
 'use strict';
 
 var React = require('react');
-var index = require('../chunks/bundle-Cw7xe6J1.js');
+var index = require('../chunks/bundle-CRjV-DLM.js');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-Deao1Upp.js');
-var LocalizationContext = require('../chunks/bundle-B7wJ4Hqk.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
+var LocalizationContext = require('../chunks/bundle-u9XWE6Rm.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
-var utils = require('../chunks/bundle-DmVeFWB4.js');
-require('../chunks/bundle-C-r9vRgc.js');
+var utils = require('../chunks/bundle-DTtY3_Ni.js');
+require('../chunks/bundle-BGmEoqIq.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-CLte647H.js');
-require('../chunks/bundle-DWBc-Yv7.js');
-require('../chunks/bundle-CDJXrIVC.js');
+require('../chunks/bundle-FcnFNV4V.js');
+require('../chunks/bundle-5FP1wNLB.js');
+require('../chunks/bundle-dokTsajJ.js');
 
 var componentClassname = 'sendbird-quote_message_input__avatar';
 function QuoteMessageThumbnail(_a) {
     var _b;
     var message = _a.message;
     if (!index.isFileMessage(message) && !index.isMultipleFilesMessage(message) || index.isVoiceMessage(message)) {
-        return null;
+        return React.createElement(React.Fragment, null);
     }
     var thumbnailUrl = utils.getMessageFirstFileThumbnailUrl(message);
     if (!thumbnailUrl) {
@@ -57,7 +57,7 @@ function QuoteMessageInput(_a) {
     var sender = replyingMessage === null || replyingMessage === void 0 ? void 0 : replyingMessage.sender;
     var displayFileIcon = (index.isFileMessage(replyingMessage) || index.isMultipleFilesMessage(replyingMessage))
         && !index.isVoiceMessage(replyingMessage);
-    return (React.createElement("div", { className: index.getClassName(['sendbird-quote_message_input', className]) },
+    return (React.createElement("div", { className: index.getClassName(['sendbird-quote_message_input', className !== null && className !== void 0 ? className : '']) },
         displayFileIcon && (React.createElement(QuoteMessageThumbnail, { message: fileMessage })),
         React.createElement("div", { className: "sendbird-quote_message_input__body", style: {
                 width: "calc(100% - ".concat(displayFileIcon ? '164px' : '120px', ")"),
@@ -73,7 +73,7 @@ function QuoteMessageInput(_a) {
                 index.isMultipleFilesMessage(replyingMessage)
                     && "".concat(fileMessage.fileInfoList.length, " Photos"),
                 index.isVoiceMessage(replyingMessage) && stringSet.VOICE_MESSAGE)),
-        React.createElement(ui_Icon.default, { className: "sendbird-quote_message_input__close-button", type: ui_Icon.IconTypes.CLOSE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: "24px", height: "24px", onClick: function () { return onClose(replyingMessage); } })));
+        React.createElement(ui_Icon.default, { className: "sendbird-quote_message_input__close-button", type: ui_Icon.IconTypes.CLOSE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_2, width: "24px", height: "24px", onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(replyingMessage); } })));
 }
 
 module.exports = QuoteMessageInput;

package/cjs/ui/ReactionBadge.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-C-r9vRgc.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-Deao1Upp.js');
-require('../chunks/bundle-DWBc-Yv7.js');
+var ui_Label = require('../chunks/bundle-DgWaY7S0.js');
+require('../chunks/bundle-5FP1wNLB.js');
 
 var ReactionBadge = React.forwardRef(function (props, ref) {
-    var _a = props.className, className = _a === void 0 ? '' : _a, children = props.children, _b = props.count, count = _b === void 0 ? '' : _b, _c = props.isAdd, isAdd = _c === void 0 ? false : _c, _d = props.selected, selected = _d === void 0 ? false : _d, _e = props.onClick, onClick = _e === void 0 ? function () { } : _e;
+    var _a = props.className, className = _a === void 0 ? '' : _a, testID = props.testID, children = props.children, _b = props.count, count = _b === void 0 ? '' : _b, _c = props.isAdd, isAdd = _c === void 0 ? false : _c, _d = props.selected, selected = _d === void 0 ? false : _d, _e = props.onClick, onClick = _e === void 0 ? function () { } : _e;
     var getClassNameTail = function () {
         if (selected && !isAdd) {
             return '--selected';
@@ -18,10 +18,10 @@ var ReactionBadge = React.forwardRef(function (props, ref) {
     };
     return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
             "sendbird-reaction-badge".concat(getClassNameTail()),
-        ], false).join(' '), role: "button", ref: ref, onClick: onClick, onKeyDown: onClick, onTouchEnd: onClick, tabIndex: 0 },
+        ], false).join(' '), "data-testid": testID, role: "button", ref: ref, onClick: onClick, onKeyDown: onClick, onTouchEnd: onClick, tabIndex: 0 },
         React.createElement("div", { className: "sendbird-reaction-badge__inner" },
             React.createElement("div", { className: "sendbird-reaction-badge__inner__icon" }, children),
-            React.createElement(ui_Label.Label, { className: (children && count) && 'sendbird-reaction-badge__inner__count', type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_1 }, count))));
+            React.createElement(ui_Label.Label, { className: (children && count) ? 'sendbird-reaction-badge__inner__count' : '', type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_1 }, count))));
 });
 
 module.exports = ReactionBadge;

package/cjs/ui/ReactionButton.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-C-r9vRgc.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var useLongPress = require('../chunks/bundle-Pfx0MBr4.js');
-var utils = require('../chunks/bundle-CLte647H.js');
-require('../chunks/bundle-CLNUkVC8.js');
+var useLongPress = require('../chunks/bundle-DmfO6_lp.js');
+var utils = require('../chunks/bundle-FcnFNV4V.js');
+require('../chunks/bundle-Bsd8mnLE.js');
 
 var ReactionButton = React.forwardRef(function (props, ref) {
-    var className = props.className, width = props.width, height = props.height, selected = props.selected, _a = props.dataSbId, dataSbId = _a === void 0 ? '' : _a, onClick = props.onClick, children = props.children;
+    var className = props.className, width = props.width, height = props.height, selected = props.selected, _a = props.dataSbId, dataSbId = _a === void 0 ? '' : _a, testID = props.testID, onClick = props.onClick, children = props.children;
     var onClickHandler = useLongPress.useLongPress({
         onLongPress: utils.noop,
         onClick: onClick,
@@ -17,7 +17,7 @@ var ReactionButton = React.forwardRef(function (props, ref) {
     });
     return (React.createElement("div", _tslib.__assign({ className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
             "sendbird-reaction-button".concat(selected ? '--selected' : ''),
-        ], false).join(' '), ref: ref, role: "button", style: { width: width, height: height } }, onClickHandler, { tabIndex: 0, "data-sb-id": dataSbId }),
+        ], false).join(' '), ref: ref, role: "button", style: { width: width, height: height } }, onClickHandler, { tabIndex: 0, "data-sb-id": testID !== null && testID !== void 0 ? testID : dataSbId, "data-testid": testID !== null && testID !== void 0 ? testID : dataSbId }),
         React.createElement("div", { className: "sendbird-reaction-button__inner" }, children)));
 });
 

package/cjs/ui/SortByRow.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-C-r9vRgc.js');
+var _tslib = require('../chunks/bundle-BGmEoqIq.js');
 var React = require('react');
-var uuid = require('../chunks/bundle-Ub33KGva.js');
+var uuid = require('../chunks/bundle-nJ_H0gk1.js');
 
 var componentClassName = 'sendbird-sort-by-row';
 function SortByRow(_a) {