@sendbird/uikit-react 3.14.12 → 3.14.13

package/cjs/ui/ChannelAvatar.js

@@ -1,30 +1,34 @@
 'use strict';
 
 var React = require('react');
-var ui_Avatar = require('../chunks/bundle-B56LqPOh.js');
+var ui_Avatar = require('../chunks/bundle-Cq7gxYWj.js');
 var ui_Icon = require('./Icon.js');
-var utils = require('../chunks/bundle-CI7ddAUC.js');
-require('../chunks/bundle-Cu2j1EmN.js');
+var utils = require('../chunks/bundle-CAofXETX.js');
+require('../chunks/bundle-BSZgogl8.js');
 require('./ImageRenderer.js');
-require('../chunks/bundle-CO52Wsr3.js');
-require('../chunks/bundle-CQbuVhqz.js');
+require('../chunks/bundle-BsUVmQmx.js');
+require('../chunks/bundle-CGBazQAC.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 function ChannelAvatar(_a) {
     var channel = _a.channel, userId = _a.userId, theme = _a.theme, _b = _a.width, width = _b === void 0 ? 56 : _b, _c = _a.height, height = _c === void 0 ? 56 : _c;
     var isBroadcast = channel === null || channel === void 0 ? void 0 : channel.isBroadcast;
     var memoizedAvatar = React.useMemo(function () { return (isBroadcast
         ? (utils.generateDefaultAvatar(channel)
-            ? (React.createElement("div", { className: "sendbird-chat-header--default-avatar", style: {
+            ? (React__default.default.createElement("div", { className: "sendbird-chat-header--default-avatar", style: {
                     width: width,
                     height: height,
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
                 } },
-                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.BROADCAST, fillColor: ui_Icon.IconColors.CONTENT, width: width * 0.575, height: height * 0.575 })))
-            : (React.createElement(ui_Avatar.Avatar, { className: "sendbird-chat-header--avatar--broadcast-channel", src: utils.getChannelAvatarSource(channel, userId), width: width, height: height, alt: channel === null || channel === void 0 ? void 0 : channel.name })))
-        : (React.createElement(ui_Avatar.Avatar, { className: "sendbird-chat-header--avatar--group-channel", src: utils.getChannelAvatarSource(channel, userId), width: "".concat(width, "px"), height: "".concat(height, "px"), alt: channel === null || channel === void 0 ? void 0 : channel.name }))); }, [utils.getChannelAvatarSource(channel, userId), theme]);
-    return (React.createElement(React.Fragment, null, memoizedAvatar));
+                React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.BROADCAST, fillColor: ui_Icon.IconColors.CONTENT, width: width * 0.575, height: height * 0.575 })))
+            : (React__default.default.createElement(ui_Avatar.Avatar, { className: "sendbird-chat-header--avatar--broadcast-channel", src: utils.getChannelAvatarSource(channel, userId), width: width, height: height, alt: channel === null || channel === void 0 ? void 0 : channel.name })))
+        : (React__default.default.createElement(ui_Avatar.Avatar, { className: "sendbird-chat-header--avatar--group-channel", src: utils.getChannelAvatarSource(channel, userId), width: "".concat(width, "px"), height: "".concat(height, "px"), alt: channel === null || channel === void 0 ? void 0 : channel.name }))); }, [utils.getChannelAvatarSource(channel, userId), theme]);
+    return (React__default.default.createElement(React__default.default.Fragment, null, memoizedAvatar));
 }
 
 module.exports = ChannelAvatar;

package/cjs/ui/ChannelAvatar.js.map

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

package/cjs/ui/Checkbox.js

@@ -2,18 +2,22 @@
 
 var React = require('react');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 function Checkbox(_a) {
     var id = _a.id, _b = _a.checked, checked = _b === void 0 ? false : _b, disabled = _a.disabled, onChange = _a.onChange;
     var _c = React.useState(checked), isChecked = _c[0], setIsCheck = _c[1];
-    return (React.createElement("label", { className: [
+    return (React__default.default.createElement("label", { className: [
             'sendbird-checkbox',
             disabled ? 'disabled' : '',
         ].join(' '), htmlFor: id },
-        React.createElement("input", { disabled: disabled, id: id, type: "checkbox", checked: isChecked, onClick: function () {
+        React__default.default.createElement("input", { disabled: disabled, id: id, type: "checkbox", checked: isChecked, onClick: function () {
                 if (!disabled)
                     setIsCheck(!isChecked);
             }, onChange: onChange }),
-        React.createElement("span", { className: [
+        React__default.default.createElement("span", { className: [
                 'sendbird-checkbox--checkmark',
                 disabled ? 'disabled' : '',
             ].join(' ') })));

package/cjs/ui/Checkbox.js.map

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

package/cjs/ui/ConnectionStatus.js

@@ -2,18 +2,22 @@
 
 var React = require('react');
 var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-BM95N32D.js');
-var LocalizationContext = require('../chunks/bundle-Bq4FcvTF.js');
-require('../chunks/bundle-Cu2j1EmN.js');
-require('../chunks/bundle-CO52Wsr3.js');
-require('../chunks/bundle-CrkUdg03.js');
-require('../chunks/bundle-DQG6eG4l.js');
+var ui_Label = require('../chunks/bundle-CLsH2CaE.js');
+var LocalizationContext = require('../chunks/bundle-BZCLEq3c.js');
+require('../chunks/bundle-BSZgogl8.js');
+require('../chunks/bundle-BsUVmQmx.js');
+require('../chunks/bundle-CqS517qU.js');
+require('../chunks/bundle-B9Jxp8fA.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 function ConnectionStatus() {
     var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-    return (React.createElement("div", { className: "sendbird-connection-status" },
-        React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.TRYING_TO_CONNECT),
-        React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.DISCONNECTED, fillColor: ui_Icon.IconColors.SENT, width: "14px", height: "14px" })));
+    return (React__default.default.createElement("div", { className: "sendbird-connection-status" },
+        React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.TRYING_TO_CONNECT),
+        React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.DISCONNECTED, fillColor: ui_Icon.IconColors.SENT, width: "14px", height: "14px" })));
 }
 
 module.exports = ConnectionStatus;

package/cjs/ui/ConnectionStatus.js.map

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

package/cjs/ui/ContextMenu.js

@@ -2,26 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../chunks/bundle-Cu2j1EmN.js');
+require('../chunks/bundle-BSZgogl8.js');
 require('react');
-var ui_ContextMenu = require('../chunks/bundle-B_eF_lLw.js');
-require('../chunks/bundle-CO52Wsr3.js');
+var ui_ContextMenu = require('../chunks/bundle-5SGoePaQ.js');
+require('../chunks/bundle-BsUVmQmx.js');
 require('../withSendbird.js');
 require('./IconButton.js');
-require('../chunks/bundle-VyDwmxN4.js');
-require('../chunks/bundle-Bq4FcvTF.js');
+require('../chunks/bundle-E1Tkj9Pc.js');
+require('../chunks/bundle-BZCLEq3c.js');
 require('@sendbird/chat');
 require('react-dom');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-BkKs2HEQ.js');
-require('../chunks/bundle-BM95N32D.js');
-require('../chunks/bundle-CrkUdg03.js');
+require('../chunks/bundle-DAzWBBxC.js');
+require('../chunks/bundle-CLsH2CaE.js');
+require('../chunks/bundle-CqS517qU.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-CTW4jbtw.js');
-require('../chunks/bundle-_xb0mhf9.js');
-require('../chunks/bundle-DQG6eG4l.js');
+require('../chunks/bundle-BafSf9GJ.js');
+require('../chunks/bundle-C6bh_Eny.js');
+require('../chunks/bundle-B9Jxp8fA.js');
 
 
 

package/cjs/ui/DateSeparator.js

@@ -1,20 +1,24 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-Cu2j1EmN.js');
+var _tslib = require('../chunks/bundle-BSZgogl8.js');
 var React = require('react');
-var color = require('../chunks/bundle-8gOOVKMq.js');
-var ui_Label = require('../chunks/bundle-BM95N32D.js');
-require('../chunks/bundle-CrkUdg03.js');
+var color = require('../chunks/bundle-ikSCkayP.js');
+var ui_Label = require('../chunks/bundle-CLsH2CaE.js');
+require('../chunks/bundle-CqS517qU.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var DateSeparator = function (_a) {
     var _b = _a.children, children = _b === void 0 ? undefined : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.separatorColor, separatorColor = _d === void 0 ? color.Colors.ONBACKGROUND_4 : _d;
-    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+    return (React__default.default.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
             'sendbird-separator',
         ], false).join(' ') },
-        React.createElement("div", { className: ['sendbird-separator__left', "".concat(color.changeColorToClassName(separatorColor), "--background-color")].join(' ') }),
-        React.createElement("div", { className: "sendbird-separator__text" }, children
-            || (React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, "Date Separator"))),
-        React.createElement("div", { className: ['sendbird-separator__right', "".concat(color.changeColorToClassName(separatorColor), "--background-color")].join(' ') })));
+        React__default.default.createElement("div", { className: ['sendbird-separator__left', "".concat(color.changeColorToClassName(separatorColor), "--background-color")].join(' ') }),
+        React__default.default.createElement("div", { className: "sendbird-separator__text" }, children
+            || (React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, "Date Separator"))),
+        React__default.default.createElement("div", { className: ['sendbird-separator__right', "".concat(color.changeColorToClassName(separatorColor), "--background-color")].join(' ') })));
 };
 
 module.exports = DateSeparator;

package/cjs/ui/DateSeparator.js.map

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

package/cjs/ui/EmojiReactions.js

@@ -5,48 +5,52 @@ var ui_ReactionBadge = require('./ReactionBadge.js');
 var ui_ReactionButton = require('./ReactionButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_Icon = require('./Icon.js');
-var ui_ContextMenu = require('../chunks/bundle-B_eF_lLw.js');
-var index = require('../chunks/bundle-VyDwmxN4.js');
+var ui_ContextMenu = require('../chunks/bundle-5SGoePaQ.js');
+var index = require('../chunks/bundle-E1Tkj9Pc.js');
 var ui_BottomSheet = require('./BottomSheet.js');
-var ui_Label = require('../chunks/bundle-BM95N32D.js');
+var ui_Label = require('../chunks/bundle-CLsH2CaE.js');
 var ui_UserListItem = require('./UserListItem.js');
-var utils = require('../chunks/bundle-CO52Wsr3.js');
-var _tslib = require('../chunks/bundle-Cu2j1EmN.js');
+var utils = require('../chunks/bundle-BsUVmQmx.js');
+var _tslib = require('../chunks/bundle-BSZgogl8.js');
 var ui_Tooltip = require('./Tooltip.js');
 var ui_TooltipWrapper = require('./TooltipWrapper.js');
-var MediaQueryContext = require('../chunks/bundle-D0U-xAFE.js');
-var useLongPress = require('../chunks/bundle-BHieBSdL.js');
-var LocalizationContext = require('../chunks/bundle-Bq4FcvTF.js');
+var MediaQueryContext = require('../chunks/bundle-DW5WyVEg.js');
+var useLongPress = require('../chunks/bundle-CteyVr3n.js');
+var LocalizationContext = require('../chunks/bundle-BZCLEq3c.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var Message_context = require('../Message/context.js');
-var getIsReactionEnabled = require('../chunks/bundle-Cv85GW-0.js');
-require('../chunks/bundle-CrkUdg03.js');
+var getIsReactionEnabled = require('../chunks/bundle-B2fSsGeZ.js');
+require('../chunks/bundle-CqS517qU.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-BkKs2HEQ.js');
+require('../chunks/bundle-DAzWBBxC.js');
 require('../withSendbird.js');
 require('./IconButton.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-CTW4jbtw.js');
-require('../chunks/bundle-_xb0mhf9.js');
-require('../chunks/bundle-1dGjBLMq.js');
+require('../chunks/bundle-BafSf9GJ.js');
+require('../chunks/bundle-C6bh_Eny.js');
+require('../chunks/bundle-BCx4TP9R.js');
 require('./Button.js');
 require('@sendbird/uikit-tools');
 require('css-vars-ponyfill');
-require('../chunks/bundle-D60dip73.js');
-require('../chunks/bundle-DsscLs3k.js');
-require('../chunks/bundle-DQG6eG4l.js');
-require('../chunks/bundle-_cqjcInH.js');
-require('../chunks/bundle-B56LqPOh.js');
-require('../chunks/bundle-CQbuVhqz.js');
+require('../chunks/bundle-BimZhXdJ.js');
+require('../chunks/bundle-COzM5cWS.js');
+require('../chunks/bundle-B9Jxp8fA.js');
+require('../chunks/bundle-C0HSA_B2.js');
+require('../chunks/bundle-Cq7gxYWj.js');
+require('../chunks/bundle-CGBazQAC.js');
 require('./MutedAvatarOverlay.js');
 require('./Checkbox.js');
 require('./UserProfile.js');
 require('../sendbirdSelectors.js');
-require('../chunks/bundle-CI9mjpa7.js');
+require('../chunks/bundle-B8eM_7mB.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var ReactedMembersBottomSheet = function (_a) {
     var _b, _c, _d;
@@ -59,23 +63,23 @@ var ReactedMembersBottomSheet = function (_a) {
             onPressUserProfileHandler(sender);
         }
     }
-    return (React.createElement(ui_BottomSheet, { onBackdropClick: hideMenu },
-        React.createElement("div", { className: "sendbird-message__bottomsheet" },
-            React.createElement("div", { className: "sendbird-message__bottomsheet__reacted-members" }, (_b = message.reactions) === null || _b === void 0 ? void 0 : _b.map(function (reaction) {
+    return (React__default.default.createElement(ui_BottomSheet, { onBackdropClick: hideMenu },
+        React__default.default.createElement("div", { className: "sendbird-message__bottomsheet" },
+            React__default.default.createElement("div", { className: "sendbird-message__bottomsheet__reacted-members" }, (_b = message.reactions) === null || _b === void 0 ? void 0 : _b.map(function (reaction) {
                 var emojiUrl = index.getEmojiUrl(emojiContainer, reaction.key);
-                return (React.createElement("div", { key: reaction.key, className: utils.classnames('sendbird-message__bottomsheet__reacted-members__item', selectedEmoji === reaction.key && 'sendbird-message__bottomsheet__reacted-members__item__selected'), onClick: function () {
+                return (React__default.default.createElement("div", { key: reaction.key, className: utils.classnames('sendbird-message__bottomsheet__reacted-members__item', selectedEmoji === reaction.key && 'sendbird-message__bottomsheet__reacted-members__item__selected'), onClick: function () {
                         setSelectedEmoji(reaction.key);
                     } },
-                    React.createElement(ui_ImageRenderer.default, { url: emojiUrl, width: "28px", height: "28px", placeHolder: function (_a) {
+                    React__default.default.createElement(ui_ImageRenderer.default, { url: emojiUrl, width: "28px", height: "28px", placeHolder: function (_a) {
                             var style = _a.style;
-                            return (React.createElement("div", { style: style },
-                                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                            return (React__default.default.createElement("div", { style: style },
+                                React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
                         } }),
-                    React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_2, color: selectedEmoji === reaction.key ? ui_Label.LabelColors.PRIMARY : ui_Label.LabelColors.ONBACKGROUND_3 }, reaction.userIds.length)));
+                    React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_2, color: selectedEmoji === reaction.key ? ui_Label.LabelColors.PRIMARY : ui_Label.LabelColors.ONBACKGROUND_3 }, reaction.userIds.length)));
             })),
-            React.createElement("div", { className: "sendbird-message__bottomsheet__reactor-list" }, // making a member list who reacted to the message with the `selectedEmoji`
+            React__default.default.createElement("div", { className: "sendbird-message__bottomsheet__reactor-list" }, // making a member list who reacted to the message with the `selectedEmoji`
             ((_d = (_c = message.reactions) === null || _c === void 0 ? void 0 : _c.find(function (reaction) { return reaction.key === selectedEmoji; })) === null || _d === void 0 ? void 0 : _d.userIds.map(function (userId) { return members.find(function (member) { return member.userId === userId; }); }).filter(function (member) { return member !== undefined; }))
-                .map(function (member) { return (React.createElement(ui_UserListItem.UserListItem, { key: member.userId, className: "sendbird-message__bottomsheet__reactor-list__item", user: member, avatarSize: "36px", onUserAvatarClick: onPressUserProfileCallBack })); })))));
+                .map(function (member) { return (React__default.default.createElement(ui_UserListItem.UserListItem, { key: member.userId, className: "sendbird-message__bottomsheet__reactor-list__item", user: member, avatarSize: "36px", onUserAvatarClick: onPressUserProfileCallBack })); })))));
 };
 
 function ReactionItem(_a) {
@@ -102,12 +106,12 @@ function ReactionItem(_a) {
         shouldPreventDefault: true,
         shouldStopPropagation: true,
     });
-    return (React.createElement(ui_TooltipWrapper, { className: "sendbird-emoji-reactions__reaction-badge", hoverTooltip: showHoverTooltip ? (React.createElement(ui_Tooltip, null, index.getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet))) : React.createElement(React.Fragment, null) },
-        React.createElement("div", _tslib.__assign({}, (isMobile
+    return (React__default.default.createElement(ui_TooltipWrapper, { className: "sendbird-emoji-reactions__reaction-badge", hoverTooltip: showHoverTooltip ? (React__default.default.createElement(ui_Tooltip, null, index.getEmojiTooltipString(reaction, userId, memberNicknamesMap, stringSet))) : React__default.default.createElement(React__default.default.Fragment, null) },
+        React__default.default.createElement("div", _tslib.__assign({}, (isMobile
             ? longPress
             : { onClick: handleOnClick })),
-            React.createElement(ui_ReactionBadge, { count: reaction.userIds.length, selected: reactedByMe },
-                React.createElement(ui_ImageRenderer.default, { circle: true, url: ((_b = emojisMap.get(reaction === null || reaction === void 0 ? void 0 : reaction.key)) === null || _b === void 0 ? void 0 : _b.url) || '', width: "20px", height: "20px", defaultComponent: (React.createElement(ui_Icon.default, { width: "20px", height: "20px", type: ui_Icon.IconTypes.QUESTION })) })))));
+            React__default.default.createElement(ui_ReactionBadge, { count: reaction.userIds.length, selected: reactedByMe },
+                React__default.default.createElement(ui_ImageRenderer.default, { circle: true, url: ((_b = emojisMap.get(reaction === null || reaction === void 0 ? void 0 : reaction.key)) === null || _b === void 0 ? void 0 : _b.url) || '', width: "20px", height: "20px", defaultComponent: (React__default.default.createElement(ui_Icon.default, { width: "20px", height: "20px", type: ui_Icon.IconTypes.QUESTION })) })))));
 }
 
 var AddReactionBadgeItem = function (_a) {
@@ -119,9 +123,9 @@ var AddReactionBadgeItem = function (_a) {
         shouldPreventDefault: true,
         shouldStopPropagation: true,
     });
-    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" }))));
+    return (React__default.default.createElement("div", _tslib.__assign({ className: "sendbird-emoji-reactions__add-reaction-badge", "data-testid": "sendbird-emoji-reactions__add-reaction-badge" }, onlyClick),
+        React__default.default.createElement(ui_ReactionBadge, { isAdd: true },
+            React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.EMOJI_MORE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "20px", height: "20px" }))));
 };
 
 var MobileEmojisBottomSheet = function (_a) {
@@ -129,19 +133,19 @@ var MobileEmojisBottomSheet = function (_a) {
     var emojiAllList = React.useMemo(function () {
         return index.getEmojiListAll(emojiContainer);
     }, [emojiContainer]);
-    return (React.createElement(ui_BottomSheet, { onBackdropClick: hideMenu },
-        React.createElement("div", { className: "sendbird-message__bottomsheet sendbird-message__emojis-bottomsheet" }, emojiAllList.map(function (emoji) {
+    return (React__default.default.createElement(ui_BottomSheet, { onBackdropClick: hideMenu },
+        React__default.default.createElement("div", { className: "sendbird-message__bottomsheet sendbird-message__emojis-bottomsheet" }, emojiAllList.map(function (emoji) {
             var _a, _b, _c, _d;
             var isReacted = (_d = ((_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.find(function (reaction) { return reaction.key === emoji.key; })) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) { return reactorId === userId; }))) !== null && _d !== void 0 ? _d : false;
-            return (React.createElement(ui_ReactionButton, { key: emoji.key, width: "44px", height: "44px", selected: isReacted, onClick: function (e) {
+            return (React__default.default.createElement(ui_ReactionButton, { key: emoji.key, width: "44px", height: "44px", selected: isReacted, onClick: function (e) {
                     e === null || e === void 0 ? void 0 : e.stopPropagation();
                     toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
                     hideMenu();
                 }, testID: "ui_mobile_emoji_reactions_menu_".concat(emoji.key) },
-                React.createElement(ui_ImageRenderer.default, { url: emoji.url, width: "38px", height: "38px", placeHolder: function (_a) {
+                React__default.default.createElement(ui_ImageRenderer.default, { url: emoji.url, width: "38px", height: "38px", placeHolder: function (_a) {
                         var style = _a.style;
-                        return (React.createElement("div", { style: style },
-                            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                        return (React__default.default.createElement("div", { style: style },
+                            React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
                     } })));
         }))));
 };
@@ -166,39 +170,39 @@ var EmojiReactions = function (_a) {
     var _l = React.useState(''), selectedEmojiKey = _l[0], setSelectedEmojiKey = _l[1];
     var emojisMap = index.getEmojiMapAll(emojiContainer);
     var showAddReactionBadge = ((_c = (_b = message.reactions) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) < emojisMap.size;
-    return (React.createElement("div", { className: index.getClassName([
+    return (React__default.default.createElement("div", { className: index.getClassName([
             className, 'sendbird-emoji-reactions',
             isByMe ? 'outgoing' : 'incoming',
         ]) },
         (((_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 }));
+            return (React__default.default.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.ContextMenu, { 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) {
+        (!isMobile && showAddReactionBadge) && (React__default.default.createElement(ui_ContextMenu.ContextMenu, { menuTrigger: function (toggleDropdown) { return (React__default.default.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);
                 } },
-                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.EMOJI_MORE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "20px", height: "20px" }))); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.EmojiListItems, { parentRef: addReactionRef, parentContainRef: addReactionRef, closeDropdown: closeDropdown, spaceFromTrigger: spaceFromTrigger }, index.getEmojiListAll(emojiContainer).map(function (emoji) {
+                React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.EMOJI_MORE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "20px", height: "20px" }))); }, menuItems: function (closeDropdown) { return (React__default.default.createElement(ui_ContextMenu.EmojiListItems, { parentRef: addReactionRef, parentContainRef: addReactionRef, closeDropdown: closeDropdown, spaceFromTrigger: spaceFromTrigger }, index.getEmojiListAll(emojiContainer).map(function (emoji) {
                 var _a, _b, _c;
                 var isReacted = ((_c = (_b = (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.find(function (reaction) { return reaction.key === emoji.key; })) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) { return reactorId === userId; })) || false;
-                return (React.createElement(ui_ReactionButton, { key: emoji.key, width: "36px", height: "36px", selected: isReacted, onClick: function (e) {
+                return (React__default.default.createElement(ui_ReactionButton, { key: emoji.key, width: "36px", height: "36px", selected: isReacted, onClick: function (e) {
                         closeDropdown();
                         toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
                         e === null || e === void 0 ? void 0 : e.stopPropagation();
                     }, 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) {
+                    React__default.default.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 },
-                                React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
+                            return (React__default.default.createElement("div", { style: style },
+                                React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.QUESTION, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" })));
                         } })));
             }))); } })),
-        (isMobile && showAddReactionBadge) && (React.createElement(AddReactionBadgeItem, { onClick: function () {
+        (isMobile && showAddReactionBadge) && (React__default.default.createElement(AddReactionBadgeItem, { onClick: function () {
                 setShowEmojiList(true);
             } })),
-        (isMobile && showEmojiList) && (React.createElement(MobileEmojisBottomSheet, { userId: userId, message: message, emojiContainer: emojiContainer, hideMenu: function () {
+        (isMobile && showEmojiList) && (React__default.default.createElement(MobileEmojisBottomSheet, { userId: userId, message: message, emojiContainer: emojiContainer, hideMenu: function () {
                 setShowEmojiList(false);
             }, toggleReaction: toggleReaction })),
-        (isMobile && selectedEmojiKey && channel !== null && showTheReactedMembers) && (React.createElement(ReactedMembersBottomSheet, { message: message, channel: channel, emojiKey: selectedEmojiKey, hideMenu: function () {
+        (isMobile && selectedEmojiKey && channel !== null && showTheReactedMembers) && (React__default.default.createElement(ReactedMembersBottomSheet, { message: message, channel: channel, emojiKey: selectedEmojiKey, hideMenu: function () {
                 setSelectedEmojiKey('');
             }, emojiContainer: emojiContainer, onPressUserProfileHandler: onPressUserProfile }))));
 };

package/cjs/ui/EmojiReactions.js.map

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

package/cjs/ui/FallbackTemplateMessageItemBody.tsx.js

@@ -3,31 +3,35 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var LocalizationContext = require('../chunks/bundle-Bq4FcvTF.js');
-var index = require('../chunks/bundle-VyDwmxN4.js');
-var ui_Label = require('../chunks/bundle-BM95N32D.js');
-require('../chunks/bundle-Cu2j1EmN.js');
-require('../chunks/bundle-CrkUdg03.js');
-require('../chunks/bundle-DQG6eG4l.js');
+var LocalizationContext = require('../chunks/bundle-BZCLEq3c.js');
+var index = require('../chunks/bundle-E1Tkj9Pc.js');
+var ui_Label = require('../chunks/bundle-CLsH2CaE.js');
+require('../chunks/bundle-BSZgogl8.js');
+require('../chunks/bundle-CqS517qU.js');
+require('../chunks/bundle-B9Jxp8fA.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-CTW4jbtw.js');
-require('../chunks/bundle-_xb0mhf9.js');
+require('../chunks/bundle-BafSf9GJ.js');
+require('../chunks/bundle-C6bh_Eny.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 function FallbackTemplateMessageItemBody(_a) {
     var className = _a.className, message = _a.message, isByMe = _a.isByMe;
     var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
     var text = message['message'];
-    return (React.createElement("div", { className: index.getClassName([
+    return (React__default.default.createElement("div", { className: index.getClassName([
             className !== null && className !== void 0 ? className : '',
             isByMe ? 'outgoing' : 'incoming',
             'sendbird-template-message-item-body__fallback_message',
         ]) }, text
-        ? React.createElement(React.Fragment, null,
-            React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONCONTENT_INVERSE_1 }, text))
-        : React.createElement(React.Fragment, null,
-            React.createElement(ui_Label.Label, { className: 'sendbird-template-message-item-body__fallback_message__header', type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONCONTENT_INVERSE_1 }, stringSet.UNKNOWN__TEMPLATE_ERROR),
-            React.createElement(ui_Label.Label, { className: 'sendbird-template-message-item-body__fallback_message__description', type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONCONTENT_INVERSE_3 }, stringSet.UNKNOWN__CANNOT_READ_TEMPLATE))));
+        ? React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONCONTENT_INVERSE_1 }, text))
+        : React__default.default.createElement(React__default.default.Fragment, null,
+            React__default.default.createElement(ui_Label.Label, { className: 'sendbird-template-message-item-body__fallback_message__header', type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONCONTENT_INVERSE_1 }, stringSet.UNKNOWN__TEMPLATE_ERROR),
+            React__default.default.createElement(ui_Label.Label, { className: 'sendbird-template-message-item-body__fallback_message__description', type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONCONTENT_INVERSE_3 }, stringSet.UNKNOWN__CANNOT_READ_TEMPLATE))));
 }
 
 exports.FallbackTemplateMessageItemBody = FallbackTemplateMessageItemBody;

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

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

package/cjs/ui/FeedbackIconButton.js

@@ -2,16 +2,20 @@
 
 var React = require('react');
 
-var FeedbackIconButton = React.forwardRef(function (props, ref) {
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var FeedbackIconButton = React__default.default.forwardRef(function (props, ref) {
     var children = props.children, isSelected = props.isSelected, _a = props.onClick, onClick = _a === void 0 ? function () { } : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b;
-    return (React.createElement("button", { className: [
+    return (React__default.default.createElement("button", { className: [
             'sendbird-iconbutton__feedback',
             isSelected ? 'sendbird-iconbutton__feedback__pressed' : '',
             disabled ? 'sendbird-iconbutton__feedback__disabled' : '',
         ].join(' '), ref: ref, type: 'button', onClick: function (e) {
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
         }, disabled: disabled },
-        React.createElement("span", { className: [
+        React__default.default.createElement("span", { className: [
                 'sendbird-iconbutton__feedback__inner',
                 isSelected ? 'sendbird-iconbutton__feedback__inner__pressed' : '',
                 disabled ? 'sendbird-iconbutton__feedback__inner__disabled' : '',

package/cjs/ui/FeedbackIconButton.js.map

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

package/cjs/ui/FileMessageItemBody.js

@@ -1,22 +1,26 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-Cu2j1EmN.js');
+var _tslib = require('../chunks/bundle-BSZgogl8.js');
 var React = require('react');
-var ui_Label = require('../chunks/bundle-BM95N32D.js');
+var ui_Label = require('../chunks/bundle-CLsH2CaE.js');
 var ui_Icon = require('./Icon.js');
 var ui_TextButton = require('./TextButton.js');
-var index = require('../chunks/bundle-VyDwmxN4.js');
-var color = require('../chunks/bundle-8gOOVKMq.js');
-var MediaQueryContext = require('../chunks/bundle-D0U-xAFE.js');
+var index = require('../chunks/bundle-E1Tkj9Pc.js');
+var color = require('../chunks/bundle-ikSCkayP.js');
+var MediaQueryContext = require('../chunks/bundle-DW5WyVEg.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var utils = require('../chunks/bundle-CO52Wsr3.js');
-require('../chunks/bundle-CrkUdg03.js');
+var utils = require('../chunks/bundle-BsUVmQmx.js');
+require('../chunks/bundle-CqS517qU.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-CTW4jbtw.js');
-require('../chunks/bundle-_xb0mhf9.js');
+require('../chunks/bundle-BafSf9GJ.js');
+require('../chunks/bundle-C6bh_Eny.js');
 require('../withSendbird.js');
 
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
 function FileMessageItemBody(_a) {
     var _this = this;
     var _b, _c, _d;
@@ -58,23 +62,23 @@ function FileMessageItemBody(_a) {
             });
         }); }
         : downloadFileWithUrl;
-    return (React.createElement("div", { className: index.getClassName([
+    return (React__default.default.createElement("div", { className: index.getClassName([
             className,
             'sendbird-file-message-item-body',
             isByMe ? 'outgoing' : 'incoming',
             mouseHover ? 'mouse-hover' : '',
             (isReactionEnabled && ((_d = message === null || message === void 0 ? void 0 : message.reactions) === null || _d === void 0 ? void 0 : _d.length) > 0) ? 'reactions' : '',
         ]) },
-        React.createElement("div", { className: "sendbird-file-message-item-body__file-icon" },
-            React.createElement(ui_Icon.default, { className: "sendbird-file-message-item-body__file-icon__icon", type: {
+        React__default.default.createElement("div", { className: "sendbird-file-message-item-body__file-icon" },
+            React__default.default.createElement(ui_Icon.default, { className: "sendbird-file-message-item-body__file-icon__icon", type: {
                     IMAGE: ui_Icon.IconTypes.PHOTO,
                     VIDEO: ui_Icon.IconTypes.PLAY,
                     AUDIO: ui_Icon.IconTypes.FILE_AUDIO,
                     GIF: ui_Icon.IconTypes.GIF,
                     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", 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)))));
+        React__default.default.createElement(ui_TextButton, { className: "sendbird-file-message-item-body__file-name", onClick: handleOnClickTextButton, color: isByMe ? color.Colors.ONCONTENT_1 : color.Colors.ONBACKGROUND_1 },
+            React__default.default.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/FileMessageItemBody.js.map

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