@sendbird/uikit-react 3.14.3 → 3.14.4

package/cjs/chunks/{bundle-GtlapnzG.js → bundle-ByyccRIt.js}

@@ -1,221 +1,225 @@
 'use strict';
 
-var _tslib = require('./bundle-CY1bUkfG.js');
+var _tslib = require('./bundle-HGbi-rCv.js');
 var React = require('react');
-var index$1 = require('./bundle-BmEl3iIW.js');
-var LocalizationContext = require('./bundle-E9H8fQL4.js');
+var index$1 = require('./bundle-DAj-1QVM.js');
+var LocalizationContext = require('./bundle-oeWNUdCB.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var _const = require('./bundle-B6uiunjG.js');
-var utils$1 = require('./bundle-BzR58JaC.js');
+var _const = require('./bundle-CR04Yhbr.js');
+var utils$1 = require('./bundle-DQy218lT.js');
 var Message_hooks_useDirtyGetMentions = require('../Message/hooks/useDirtyGetMentions.js');
-var index = require('./bundle-D3Gxy8S0.js');
+var index = require('./bundle-wl1uuzU7.js');
 var ui_DateSeparator = require('../ui/DateSeparator.js');
-var ui_Label = require('./bundle-BuYf2Pa8.js');
+var ui_Label = require('./bundle-5_kPn4wU.js');
 var ui_MessageInput = require('../ui/MessageInput.js');
-var _const$1 = require('./bundle-BoCS4RH3.js');
+var _const$1 = require('./bundle-CmpLg1_S.js');
 var ui_MessageContent = require('../ui/MessageContent.js');
 var GroupChannel_components_SuggestedReplies = require('../GroupChannel/components/SuggestedReplies.js');
-var SuggestedMentionListView = require('./bundle-D3tBia0F.js');
-var utils = require('./bundle-BDbnsPGF.js');
+var SuggestedMentionListView = require('./bundle-BaM5Ed34.js');
+var utils = require('./bundle-BoLhr7Ko.js');
 
-var useDidMountEffect = function (func, deps) {
-    var _a = React.useState(false), didMount = _a[0], setDidmount = _a[1];
-    React.useEffect(function () {
-        if (didMount) {
-            func();
-        }
-        else {
-            setDidmount(true);
-        }
-    }, deps);
+var useDidMountEffect = function (func, deps) {
+    var _a = React.useState(false), didMount = _a[0], setDidmount = _a[1];
+    React.useEffect(function () {
+        if (didMount) {
+            func();
+        }
+        else {
+            setDidmount(true);
+        }
+    }, deps);
 };
 
-// TODO: Refactor this component, is too complex now
-var MessageView = function (props) {
-    var _a, _b;
-    var 
-    // MessageProps
-    message = props.message, children = props.children, hasSeparator = props.hasSeparator, chainTop = props.chainTop, chainBottom = props.chainBottom, handleScroll = props.handleScroll, 
-    // MessageViewProps
-    channel = props.channel, emojiContainer = props.emojiContainer, editInputDisabled = props.editInputDisabled, shouldRenderSuggestedReplies = props.shouldRenderSuggestedReplies, isReactionEnabled = props.isReactionEnabled, replyType = props.replyType, threadReplySelectType = props.threadReplySelectType, nicknamesMap = props.nicknamesMap, scrollToMessage = props.scrollToMessage, toggleReaction = props.toggleReaction, setQuoteMessage = props.setQuoteMessage, onQuoteMessageClick = props.onQuoteMessageClick, onReplyInThreadClick = props.onReplyInThreadClick, onBeforeDownloadFileMessage = props.onBeforeDownloadFileMessage, sendUserMessage = props.sendUserMessage, updateUserMessage = props.updateUserMessage, resendMessage = props.resendMessage, deleteMessage = props.deleteMessage, setAnimatedMessageId = props.setAnimatedMessageId, animatedMessageId = props.animatedMessageId, onMessageAnimated = props.onMessageAnimated, _c = props.usedInLegacy, usedInLegacy = _c === void 0 ? true : _c;
-    var _d = utils.deleteNullish(props), renderUserMentionItem = _d.renderUserMentionItem, renderMessage = _d.renderMessage, _e = _d.renderMessageContent, renderMessageContent = _e === void 0 ? function (props) { return React.createElement(ui_MessageContent, _tslib.__assign({}, props)); } : _e, _f = _d.renderSuggestedReplies, renderSuggestedReplies = _f === void 0 ? function (props) { return React.createElement(GroupChannel_components_SuggestedReplies, _tslib.__assign({}, props)); } : _f, renderCustomSeparator = _d.renderCustomSeparator, renderEditInput = _d.renderEditInput, renderFileViewer = _d.renderFileViewer, renderRemoveMessageModal = _d.renderRemoveMessageModal;
-    var _g = LocalizationContext.useLocalization(), dateLocale = _g.dateLocale, stringSet = _g.stringSet;
-    var globalStore = useSendbirdStateContext.useSendbirdStateContext();
-    var _h = globalStore.config, userId = _h.userId, isOnline = _h.isOnline, isMentionEnabled = _h.isMentionEnabled, userMention = _h.userMention, logger = _h.logger;
-    var maxUserMentionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || _const.MAX_USER_MENTION_COUNT;
-    var maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || _const.MAX_USER_SUGGESTION_COUNT;
-    var _j = React.useState(false), showEdit = _j[0], setShowEdit = _j[1];
-    var _k = React.useState(false), showRemove = _k[0], setShowRemove = _k[1];
-    var _l = React.useState(false), showFileViewer = _l[0], setShowFileViewer = _l[1];
-    var _m = React.useState(false), isAnimated = _m[0], setIsAnimated = _m[1];
-    var _o = React.useState(''), mentionNickname = _o[0], setMentionNickname = _o[1];
-    var _p = React.useState([]), mentionedUsers = _p[0], setMentionedUsers = _p[1];
-    var _q = React.useState([]), mentionedUserIds = _q[0], setMentionedUserIds = _q[1];
-    var _r = React.useState(null), messageInputEvent = _r[0], setMessageInputEvent = _r[1];
-    var _s = React.useState(null), selectedUser = _s[0], setSelectedUser = _s[1];
-    var _t = React.useState([]), mentionSuggestedUsers = _t[0], setMentionSuggestedUsers = _t[1];
-    var editMessageInputRef = React.useRef(null);
-    var messageScrollRef = React.useRef(null);
-    var displaySuggestedMentionList = isOnline && isMentionEnabled && mentionNickname.length > 0 && !utils$1.isDisabledBecauseFrozen(channel) && !utils$1.isDisabledBecauseMuted(channel);
-    var mentionNodes = Message_hooks_useDirtyGetMentions.useDirtyGetMentions({ ref: editMessageInputRef }, { logger: logger });
-    var ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxUserMentionCount;
-    React.useEffect(function () {
-        setMentionedUsers(mentionedUsers.filter(function (_a) {
-            var userId = _a.userId;
-            var i = mentionedUserIds.indexOf(userId);
-            if (i < 0) {
-                return false;
-            }
-            else {
-                mentionedUserIds.splice(i, 1);
-                return true;
-            }
-        }));
-    }, [mentionedUserIds]);
-    /**
-     * Move the message list scroll
-     * when the message's height is changed by `showEdit` OR `message.reactions`
-     */
-    useDidMountEffect(function () {
-        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll();
-    }, [showEdit, (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.length]);
-    useDidMountEffect(function () {
-        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
-    }, [message === null || message === void 0 ? void 0 : message.updatedAt, message === null || message === void 0 ? void 0 : message.message]);
-    React.useLayoutEffect(function () {
-        // Keep the scrollBottom value after fetching new message list (but GroupChannel module is not needed.)
-        if (usedInLegacy)
-            handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
-    }, []);
-    React.useLayoutEffect(function () {
-        var timeouts = [];
-        if (animatedMessageId === message.messageId && (messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current)) {
-            timeouts.push(setTimeout(function () {
-                setIsAnimated(true);
-            }, 500));
-            timeouts.push(setTimeout(function () {
-                setAnimatedMessageId(null);
-                onMessageAnimated === null || onMessageAnimated === void 0 ? void 0 : onMessageAnimated();
-            }, 1600));
-        }
-        else {
-            setIsAnimated(false);
-        }
-        return function () {
-            timeouts.forEach(function (it) { return clearTimeout(it); });
-        };
-    }, [animatedMessageId, messageScrollRef.current, message.messageId]);
-    var renderedCustomSeparator = React.useMemo(function () { var _a; return (_a = renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({ message: message })) !== null && _a !== void 0 ? _a : null; }, [message, renderCustomSeparator]);
-    var renderChildren = function () {
-        if (children) {
-            return children;
-        }
-        if (renderMessage) {
-            var messageProps = _tslib.__assign(_tslib.__assign({}, props), { renderMessage: undefined });
-            return renderMessage(messageProps);
-        }
-        return (React.createElement(React.Fragment, null,
-            renderMessageContent({
-                className: 'sendbird-message-hoc__message-content',
-                userId: userId,
-                scrollToMessage: scrollToMessage,
-                channel: channel,
-                message: message,
-                disabled: !isOnline,
-                chainTop: chainTop,
-                chainBottom: chainBottom,
-                isReactionEnabled: isReactionEnabled,
-                replyType: replyType,
-                threadReplySelectType: threadReplySelectType,
-                nicknamesMap: nicknamesMap,
-                emojiContainer: emojiContainer,
-                showEdit: setShowEdit,
-                showRemove: setShowRemove,
-                showFileViewer: setShowFileViewer,
-                resendMessage: resendMessage,
-                deleteMessage: deleteMessage,
-                toggleReaction: toggleReaction,
-                setQuoteMessage: setQuoteMessage,
-                onReplyInThread: onReplyInThreadClick,
-                onQuoteMessageClick: onQuoteMessageClick,
-                onMessageHeightChange: handleScroll,
-                onBeforeDownloadFileMessage: onBeforeDownloadFileMessage,
-            }),
-            shouldRenderSuggestedReplies && renderSuggestedReplies({
-                replyOptions: index.getSuggestedReplies(message),
-                onSendMessage: sendUserMessage,
-                message: message,
-            }),
-            showRemove && renderRemoveMessageModal({ message: message, onCancel: function () { return setShowRemove(false); } }),
-            showFileViewer && renderFileViewer({ message: message, onCancel: function () { return setShowFileViewer(false); } })));
-    };
-    if (showEdit && ((_b = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _b === void 0 ? void 0 : _b.call(message))) {
-        return ((renderEditInput === null || renderEditInput === void 0 ? void 0 : renderEditInput()) || (React.createElement(React.Fragment, null,
-            displaySuggestedMentionList && (React.createElement(SuggestedMentionListView.SuggestedMentionListView, { currentChannel: channel, targetNickname: mentionNickname, inputEvent: messageInputEvent, renderUserMentionItem: renderUserMentionItem, onUserItemClick: function (user) {
-                    if (user) {
-                        setMentionedUsers(_tslib.__spreadArray(_tslib.__spreadArray([], mentionedUsers, true), [user], false));
-                    }
-                    setMentionNickname('');
-                    setSelectedUser(user);
-                    setMessageInputEvent(null);
-                }, onFocusItemChange: function () {
-                    setMessageInputEvent(null);
-                }, onFetchUsers: function (users) {
-                    setMentionSuggestedUsers(users);
-                }, ableAddMention: ableMention, maxMentionCount: maxUserMentionCount, maxSuggestionCount: maxUserSuggestionCount })),
-            React.createElement(ui_MessageInput, { isEdit: true, channel: channel, disabled: editInputDisabled, ref: editMessageInputRef, mentionSelectedUser: selectedUser, isMentionEnabled: isMentionEnabled, message: message, onStartTyping: function () {
-                    var _a;
-                    (_a = channel === null || channel === void 0 ? void 0 : channel.startTyping) === null || _a === void 0 ? void 0 : _a.call(channel);
-                }, onUpdateMessage: function (_a) {
-                    var _b;
-                    var messageId = _a.messageId, message = _a.message, mentionTemplate = _a.mentionTemplate;
-                    updateUserMessage(messageId, {
-                        message: message,
-                        mentionedUsers: mentionedUsers,
-                        mentionedMessageTemplate: mentionTemplate,
-                    });
-                    setShowEdit(false);
-                    (_b = channel === null || channel === void 0 ? void 0 : channel.endTyping) === null || _b === void 0 ? void 0 : _b.call(channel);
-                }, onCancelEdit: function () {
-                    var _a;
-                    setMentionNickname('');
-                    setMentionedUsers([]);
-                    setMentionedUserIds([]);
-                    setMentionSuggestedUsers([]);
-                    setShowEdit(false);
-                    (_a = channel === null || channel === void 0 ? void 0 : channel.endTyping) === null || _a === void 0 ? void 0 : _a.call(channel);
-                }, onUserMentioned: function (user) {
-                    if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
-                        setSelectedUser(null);
-                        setMentionNickname('');
-                    }
-                }, onMentionStringChange: function (mentionText) {
-                    setMentionNickname(mentionText);
-                }, onMentionedUserIdsUpdated: function (userIds) {
-                    setMentionedUserIds(userIds);
-                }, onKeyDown: function (e) {
-                    if (displaySuggestedMentionList
-                        && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0
-                        && ((e.key === _const$1.MessageInputKeys.Enter && ableMention)
-                            || e.key === _const$1.MessageInputKeys.ArrowUp
-                            || e.key === _const$1.MessageInputKeys.ArrowDown)) {
-                        setMessageInputEvent(e);
-                        return true;
-                    }
-                    return false;
-                } }))));
-    }
-    return (React.createElement("div", { className: index.getClassName([
-            'sendbird-msg-hoc sendbird-msg--scroll-ref',
-            isAnimated ? 'sendbird-msg-hoc__animated' : '',
-        ]), style: children || renderMessage ? undefined : { marginBottom: '2px' }, "data-sb-message-id": message.messageId, "data-sb-created-at": message.createdAt, ref: messageScrollRef },
-        hasSeparator
-            && (renderedCustomSeparator || (React.createElement(ui_DateSeparator, null,
-                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$1.format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR, {
-                    locale: dateLocale,
-                }))))),
-        renderChildren()));
+// TODO: Refactor this component, is too complex now
+var MessageView = function (props) {
+    var _a, _b;
+    var 
+    // MessageProps
+    message = props.message, children = props.children, hasSeparator = props.hasSeparator, chainTop = props.chainTop, chainBottom = props.chainBottom, handleScroll = props.handleScroll, 
+    // MessageViewProps
+    channel = props.channel, emojiContainer = props.emojiContainer, editInputDisabled = props.editInputDisabled, shouldRenderSuggestedReplies = props.shouldRenderSuggestedReplies, isReactionEnabled = props.isReactionEnabled, replyType = props.replyType, threadReplySelectType = props.threadReplySelectType, nicknamesMap = props.nicknamesMap, scrollToMessage = props.scrollToMessage, toggleReaction = props.toggleReaction, setQuoteMessage = props.setQuoteMessage, onQuoteMessageClick = props.onQuoteMessageClick, onReplyInThreadClick = props.onReplyInThreadClick, onBeforeDownloadFileMessage = props.onBeforeDownloadFileMessage, sendUserMessage = props.sendUserMessage, updateUserMessage = props.updateUserMessage, resendMessage = props.resendMessage, deleteMessage = props.deleteMessage, setAnimatedMessageId = props.setAnimatedMessageId, animatedMessageId = props.animatedMessageId, onMessageAnimated = props.onMessageAnimated, _c = props.usedInLegacy, usedInLegacy = _c === void 0 ? true : _c;
+    var _d = utils.deleteNullish(props), renderUserMentionItem = _d.renderUserMentionItem, renderMessage = _d.renderMessage, _e = _d.renderMessageContent, renderMessageContent = _e === void 0 ? function (props) { return React.createElement(ui_MessageContent, _tslib.__assign({}, props)); } : _e, _f = _d.renderSuggestedReplies, renderSuggestedReplies = _f === void 0 ? function (props) { return React.createElement(GroupChannel_components_SuggestedReplies, _tslib.__assign({}, props)); } : _f, renderCustomSeparator = _d.renderCustomSeparator, renderEditInput = _d.renderEditInput, renderFileViewer = _d.renderFileViewer, renderRemoveMessageModal = _d.renderRemoveMessageModal;
+    var _g = LocalizationContext.useLocalization(), dateLocale = _g.dateLocale, stringSet = _g.stringSet;
+    var globalStore = useSendbirdStateContext.useSendbirdStateContext();
+    var _h = globalStore.config, userId = _h.userId, isOnline = _h.isOnline, userMention = _h.userMention, logger = _h.logger, groupChannel = _h.groupChannel;
+    var maxUserMentionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || _const.MAX_USER_MENTION_COUNT;
+    var maxUserSuggestionCount = (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || _const.MAX_USER_SUGGESTION_COUNT;
+    var _j = React.useState(false), showEdit = _j[0], setShowEdit = _j[1];
+    var _k = React.useState(false), showRemove = _k[0], setShowRemove = _k[1];
+    var _l = React.useState(false), showFileViewer = _l[0], setShowFileViewer = _l[1];
+    var _m = React.useState(false), isAnimated = _m[0], setIsAnimated = _m[1];
+    var _o = React.useState(''), mentionNickname = _o[0], setMentionNickname = _o[1];
+    var _p = React.useState([]), mentionedUsers = _p[0], setMentionedUsers = _p[1];
+    var _q = React.useState([]), mentionedUserIds = _q[0], setMentionedUserIds = _q[1];
+    var _r = React.useState(null), messageInputEvent = _r[0], setMessageInputEvent = _r[1];
+    var _s = React.useState(null), selectedUser = _s[0], setSelectedUser = _s[1];
+    var _t = React.useState([]), mentionSuggestedUsers = _t[0], setMentionSuggestedUsers = _t[1];
+    var editMessageInputRef = React.useRef(null);
+    var messageScrollRef = React.useRef(null);
+    var displaySuggestedMentionList = isOnline
+        && groupChannel.enableMention && mentionNickname.length > 0
+        && !utils$1.isDisabledBecauseFrozen(channel)
+        && !utils$1.isDisabledBecauseMuted(channel);
+    var mentionNodes = Message_hooks_useDirtyGetMentions.useDirtyGetMentions({ ref: editMessageInputRef }, { logger: logger });
+    var ableMention = (mentionNodes === null || mentionNodes === void 0 ? void 0 : mentionNodes.length) < maxUserMentionCount;
+    React.useEffect(function () {
+        setMentionedUsers(mentionedUsers.filter(function (_a) {
+            var userId = _a.userId;
+            var i = mentionedUserIds.indexOf(userId);
+            if (i < 0) {
+                return false;
+            }
+            else {
+                mentionedUserIds.splice(i, 1);
+                return true;
+            }
+        }));
+    }, [mentionedUserIds]);
+    /**
+     * Move the message list scroll
+     * when the message's height is changed by `showEdit` OR `message.reactions`
+     */
+    useDidMountEffect(function () {
+        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll();
+    }, [showEdit, (_a = message === null || message === void 0 ? void 0 : message.reactions) === null || _a === void 0 ? void 0 : _a.length]);
+    useDidMountEffect(function () {
+        handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
+    }, [message === null || message === void 0 ? void 0 : message.updatedAt, message === null || message === void 0 ? void 0 : message.message]);
+    React.useLayoutEffect(function () {
+        // Keep the scrollBottom value after fetching new message list (but GroupChannel module is not needed.)
+        if (usedInLegacy)
+            handleScroll === null || handleScroll === void 0 ? void 0 : handleScroll(true);
+    }, []);
+    React.useLayoutEffect(function () {
+        var timeouts = [];
+        if (animatedMessageId === message.messageId && (messageScrollRef === null || messageScrollRef === void 0 ? void 0 : messageScrollRef.current)) {
+            timeouts.push(setTimeout(function () {
+                setIsAnimated(true);
+            }, 500));
+            timeouts.push(setTimeout(function () {
+                setAnimatedMessageId(null);
+                onMessageAnimated === null || onMessageAnimated === void 0 ? void 0 : onMessageAnimated();
+            }, 1600));
+        }
+        else {
+            setIsAnimated(false);
+        }
+        return function () {
+            timeouts.forEach(function (it) { return clearTimeout(it); });
+        };
+    }, [animatedMessageId, messageScrollRef.current, message.messageId]);
+    var renderedCustomSeparator = React.useMemo(function () { var _a; return (_a = renderCustomSeparator === null || renderCustomSeparator === void 0 ? void 0 : renderCustomSeparator({ message: message })) !== null && _a !== void 0 ? _a : null; }, [message, renderCustomSeparator]);
+    var renderChildren = function () {
+        if (children) {
+            return children;
+        }
+        if (renderMessage) {
+            var messageProps = _tslib.__assign(_tslib.__assign({}, props), { renderMessage: undefined });
+            return renderMessage(messageProps);
+        }
+        return (React.createElement(React.Fragment, null,
+            renderMessageContent({
+                className: 'sendbird-message-hoc__message-content',
+                userId: userId,
+                scrollToMessage: scrollToMessage,
+                channel: channel,
+                message: message,
+                disabled: !isOnline,
+                chainTop: chainTop,
+                chainBottom: chainBottom,
+                isReactionEnabled: isReactionEnabled,
+                replyType: replyType,
+                threadReplySelectType: threadReplySelectType,
+                nicknamesMap: nicknamesMap,
+                emojiContainer: emojiContainer,
+                showEdit: setShowEdit,
+                showRemove: setShowRemove,
+                showFileViewer: setShowFileViewer,
+                resendMessage: resendMessage,
+                deleteMessage: deleteMessage,
+                toggleReaction: toggleReaction,
+                setQuoteMessage: setQuoteMessage,
+                onReplyInThread: onReplyInThreadClick,
+                onQuoteMessageClick: onQuoteMessageClick,
+                onMessageHeightChange: handleScroll,
+                onBeforeDownloadFileMessage: onBeforeDownloadFileMessage,
+            }),
+            shouldRenderSuggestedReplies && renderSuggestedReplies({
+                replyOptions: index.getSuggestedReplies(message),
+                onSendMessage: sendUserMessage,
+                message: message,
+                type: groupChannel === null || groupChannel === void 0 ? void 0 : groupChannel.suggestedRepliesDirection,
+            }),
+            showRemove && renderRemoveMessageModal({ message: message, onCancel: function () { return setShowRemove(false); } }),
+            showFileViewer && renderFileViewer({ message: message, onCancel: function () { return setShowFileViewer(false); } })));
+    };
+    if (showEdit && ((_b = message === null || message === void 0 ? void 0 : message.isUserMessage) === null || _b === void 0 ? void 0 : _b.call(message))) {
+        return ((renderEditInput === null || renderEditInput === void 0 ? void 0 : renderEditInput()) || (React.createElement(React.Fragment, null,
+            displaySuggestedMentionList && (React.createElement(SuggestedMentionListView.SuggestedMentionListView, { currentChannel: channel, targetNickname: mentionNickname, inputEvent: messageInputEvent, renderUserMentionItem: renderUserMentionItem, onUserItemClick: function (user) {
+                    if (user) {
+                        setMentionedUsers(_tslib.__spreadArray(_tslib.__spreadArray([], mentionedUsers, true), [user], false));
+                    }
+                    setMentionNickname('');
+                    setSelectedUser(user);
+                    setMessageInputEvent(null);
+                }, onFocusItemChange: function () {
+                    setMessageInputEvent(null);
+                }, onFetchUsers: function (users) {
+                    setMentionSuggestedUsers(users);
+                }, ableAddMention: ableMention, maxMentionCount: maxUserMentionCount, maxSuggestionCount: maxUserSuggestionCount })),
+            React.createElement(ui_MessageInput, { isEdit: true, channel: channel, disabled: editInputDisabled, ref: editMessageInputRef, mentionSelectedUser: selectedUser, isMentionEnabled: groupChannel.enableMention, message: message, onStartTyping: function () {
+                    var _a;
+                    (_a = channel === null || channel === void 0 ? void 0 : channel.startTyping) === null || _a === void 0 ? void 0 : _a.call(channel);
+                }, onUpdateMessage: function (_a) {
+                    var _b;
+                    var messageId = _a.messageId, message = _a.message, mentionTemplate = _a.mentionTemplate;
+                    updateUserMessage(messageId, {
+                        message: message,
+                        mentionedUsers: mentionedUsers,
+                        mentionedMessageTemplate: mentionTemplate,
+                    });
+                    setShowEdit(false);
+                    (_b = channel === null || channel === void 0 ? void 0 : channel.endTyping) === null || _b === void 0 ? void 0 : _b.call(channel);
+                }, onCancelEdit: function () {
+                    var _a;
+                    setMentionNickname('');
+                    setMentionedUsers([]);
+                    setMentionedUserIds([]);
+                    setMentionSuggestedUsers([]);
+                    setShowEdit(false);
+                    (_a = channel === null || channel === void 0 ? void 0 : channel.endTyping) === null || _a === void 0 ? void 0 : _a.call(channel);
+                }, onUserMentioned: function (user) {
+                    if ((selectedUser === null || selectedUser === void 0 ? void 0 : selectedUser.userId) === (user === null || user === void 0 ? void 0 : user.userId)) {
+                        setSelectedUser(null);
+                        setMentionNickname('');
+                    }
+                }, onMentionStringChange: function (mentionText) {
+                    setMentionNickname(mentionText);
+                }, onMentionedUserIdsUpdated: function (userIds) {
+                    setMentionedUserIds(userIds);
+                }, onKeyDown: function (e) {
+                    if (displaySuggestedMentionList
+                        && (mentionSuggestedUsers === null || mentionSuggestedUsers === void 0 ? void 0 : mentionSuggestedUsers.length) > 0
+                        && ((e.key === _const$1.MessageInputKeys.Enter && ableMention)
+                            || e.key === _const$1.MessageInputKeys.ArrowUp
+                            || e.key === _const$1.MessageInputKeys.ArrowDown)) {
+                        setMessageInputEvent(e);
+                        return true;
+                    }
+                    return false;
+                } }))));
+    }
+    return (React.createElement("div", { className: index.getClassName([
+            'sendbird-msg-hoc sendbird-msg--scroll-ref',
+            isAnimated ? 'sendbird-msg-hoc__animated' : '',
+        ]), style: children || renderMessage ? undefined : { marginBottom: '2px' }, "data-sb-message-id": message.messageId, "data-sb-created-at": message.createdAt, ref: messageScrollRef },
+        hasSeparator
+            && (renderedCustomSeparator || (React.createElement(ui_DateSeparator, null,
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.CAPTION_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, index$1.format(message.createdAt, stringSet.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR, {
+                    locale: dateLocale,
+                }))))),
+        renderChildren()));
 };
 
 exports.MessageView = MessageView;
-//# sourceMappingURL=bundle-GtlapnzG.js.map
+//# sourceMappingURL=bundle-ByyccRIt.js.map

package/cjs/chunks/{bundle-DvWHV-PM.js.map → bundle-ByyccRIt.js.map}

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

package/cjs/chunks/{bundle-Dn17aH6v.js → bundle-C1XVsHlE.js}

@@ -1,60 +1,60 @@
 'use strict';
 
 var React = require('react');
-var consts = require('./bundle-DnXNmdmw.js');
-var utils = require('./bundle-u8pJrzSP.js');
+var consts = require('./bundle-DfcEln0Z.js');
+var utils = require('./bundle-CE6bFQmu.js');
 var uikitTools = require('@sendbird/uikit-tools');
-var useThrottleCallback = require('./bundle-DsKL-Ede.js');
+var useThrottleCallback = require('./bundle-Com-Z-XI.js');
 
-var BUFFER_DELAY = 100;
-function useOnScrollPositionChangeDetector(params) {
-    var onReachedTop = params.onReachedTop, onReachedBottom = params.onReachedBottom, onInBetween = params.onInBetween;
-    var cb = uikitTools.usePreservedCallback(function (event) {
-        if (event === null || event === void 0 ? void 0 : event.target) {
-            var _a = event.target, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
-            var positionEvent = {
-                distanceFromBottom: scrollHeight - scrollTop - clientHeight,
-            };
-            if (onReachedTop && utils.isAboutSame(scrollTop, 0, consts.SCROLL_BUFFER)) {
-                onReachedTop(positionEvent);
-            }
-            else if (onReachedBottom && utils.isAboutSame(scrollHeight, clientHeight + scrollTop, consts.SCROLL_BUFFER)) {
-                onReachedBottom(positionEvent);
-            }
-            else if (onInBetween) {
-                onInBetween(positionEvent);
-            }
-        }
-    });
-    return useThrottleCallback.useThrottleCallback(cb, BUFFER_DELAY, { trailing: true });
-}
-function useOnScrollPositionChangeDetectorWithRef(scrollRef, params) {
-    var _params = React.useRef(params);
-    _params.current = params;
-    React.useLayoutEffect(function () {
-        var elem = scrollRef.current;
-        if (elem) {
-            var callback_1 = useThrottleCallback.throttle(function () {
-                var scrollTop = elem.scrollTop, scrollHeight = elem.scrollHeight, clientHeight = elem.clientHeight;
-                var event = {
-                    distanceFromBottom: scrollHeight - scrollTop - clientHeight,
-                };
-                if (_params.current.onReachedTop && utils.isAboutSame(scrollTop, 0, consts.SCROLL_BUFFER)) {
-                    _params.current.onReachedTop(event);
-                }
-                else if (_params.current.onReachedBottom && utils.isAboutSame(scrollHeight, clientHeight + scrollTop, consts.SCROLL_BUFFER)) {
-                    _params.current.onReachedBottom(event);
-                }
-                else if (_params.current.onInBetween) {
-                    _params.current.onInBetween(event);
-                }
-            }, BUFFER_DELAY, { trailing: true });
-            elem.addEventListener('scroll', callback_1);
-            return function () { return elem.removeEventListener('scroll', callback_1); };
-        }
-    }, [scrollRef.current]);
+var BUFFER_DELAY = 100;
+function useOnScrollPositionChangeDetector(params) {
+    var onReachedTop = params.onReachedTop, onReachedBottom = params.onReachedBottom, onInBetween = params.onInBetween;
+    var cb = uikitTools.usePreservedCallback(function (event) {
+        if (event === null || event === void 0 ? void 0 : event.target) {
+            var _a = event.target, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+            var positionEvent = {
+                distanceFromBottom: scrollHeight - scrollTop - clientHeight,
+            };
+            if (onReachedTop && utils.isAboutSame(scrollTop, 0, consts.SCROLL_BUFFER)) {
+                onReachedTop(positionEvent);
+            }
+            else if (onReachedBottom && utils.isAboutSame(scrollHeight, clientHeight + scrollTop, consts.SCROLL_BUFFER)) {
+                onReachedBottom(positionEvent);
+            }
+            else if (onInBetween) {
+                onInBetween(positionEvent);
+            }
+        }
+    });
+    return useThrottleCallback.useThrottleCallback(cb, BUFFER_DELAY, { trailing: true });
+}
+function useOnScrollPositionChangeDetectorWithRef(scrollRef, params) {
+    var _params = React.useRef(params);
+    _params.current = params;
+    React.useLayoutEffect(function () {
+        var elem = scrollRef.current;
+        if (elem) {
+            var callback_1 = useThrottleCallback.throttle(function () {
+                var scrollTop = elem.scrollTop, scrollHeight = elem.scrollHeight, clientHeight = elem.clientHeight;
+                var event = {
+                    distanceFromBottom: scrollHeight - scrollTop - clientHeight,
+                };
+                if (_params.current.onReachedTop && utils.isAboutSame(scrollTop, 0, consts.SCROLL_BUFFER)) {
+                    _params.current.onReachedTop(event);
+                }
+                else if (_params.current.onReachedBottom && utils.isAboutSame(scrollHeight, clientHeight + scrollTop, consts.SCROLL_BUFFER)) {
+                    _params.current.onReachedBottom(event);
+                }
+                else if (_params.current.onInBetween) {
+                    _params.current.onInBetween(event);
+                }
+            }, BUFFER_DELAY, { trailing: true });
+            elem.addEventListener('scroll', callback_1);
+            return function () { return elem.removeEventListener('scroll', callback_1); };
+        }
+    }, [scrollRef.current]);
 }
 
 exports.useOnScrollPositionChangeDetector = useOnScrollPositionChangeDetector;
 exports.useOnScrollPositionChangeDetectorWithRef = useOnScrollPositionChangeDetectorWithRef;
-//# sourceMappingURL=bundle-Dn17aH6v.js.map
+//# sourceMappingURL=bundle-C1XVsHlE.js.map

package/cjs/chunks/bundle-C1XVsHlE.js.map

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