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

package/ui/MessageInput.js

@@ -1,23 +1,23 @@
-import { _ as __assign, c as __spreadArray } from '../chunks/bundle-CDy_GVNR.js';
+import { _ as __assign, c as __spreadArray } from '../chunks/bundle-zAvvLMA9.js';
 import React__default, { useRef, useState, useCallback, useEffect } from 'react';
-import { N as NodeTypes, M as MessageInputKeys } from '../chunks/bundle-C5i4dn9q.js';
-import { U as USER_MENTION_TEMP_CHAR } from '../chunks/bundle-DudTIr4X.js';
+import { M as MessageInputKeys, N as NodeTypes } from '../chunks/bundle-6v-jzonm.js';
+import { U as USER_MENTION_TEMP_CHAR } from '../chunks/bundle-DXjbblWF.js';
 import IconButton from './IconButton.js';
 import Button, { ButtonTypes, ButtonSizes } from './Button.js';
-import { r as renderToString, s as sanitizeString, n as nodeListToArray, u as usePaste, i as isChannelTypeSupportsMultipleFilesMessage, e as extractTextAndMentions } from '../chunks/bundle-Dpj_mOs8.js';
+import { r as renderToString, s as sanitizeString, n as nodeListToArray, u as usePaste, i as isChannelTypeSupportsMultipleFilesMessage, e as extractTextAndMentions } from '../chunks/bundle--aWriVp-.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-q3jyuKU7.js';
-import { u as useLocalization } from '../chunks/bundle-CAdxJnio.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-DyVURRtM.js';
+import { u as useLocalization } from '../chunks/bundle-4r7ZPzcx.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { K, G as arrayEqual, w as getClassName, H as getMimeTypesUIKitAccepts } from '../chunks/bundle-BH5EGLxi.js';
-import { t as tokenizeMessage, T as TOKEN_TYPES, U as USER_MENTION_PREFIX } from '../chunks/bundle-HhDUyQa4.js';
-import { i as isMobileIOS } from '../chunks/bundle-DhJuLwLJ.js';
+import { K, G as arrayEqual, H as getMimeTypesUIKitAccepts } from '../chunks/bundle-CMOqM33u.js';
+import { t as tokenizeMessage, T as TOKEN_TYPES, U as USER_MENTION_PREFIX } from '../chunks/bundle-CVf0xQqZ.js';
+import { c as classnames, i as isMobileIOS } from '../chunks/bundle-Dl6p5CcR.js';
 import 'dompurify';
-import '../chunks/bundle-YveljAuC.js';
-import '../chunks/bundle-DUVa5cu6.js';
-import '../chunks/bundle-C2B-jwQF.js';
-import '../chunks/bundle-B621kS6J.js';
-import '../chunks/bundle-9Pg6kODx.js';
+import '../chunks/bundle-q8TfLkpw.js';
+import '../chunks/bundle-jD9nAlqc.js';
+import '../chunks/bundle-BdXUzVaM.js';
+import '../chunks/bundle-BvFSwy4a.js';
+import '../chunks/bundle-D2RTt6tN.js';
 import '../withSendbird.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
@@ -63,17 +63,14 @@ var displayCaret = function (element, position) {
     var sel = window.getSelection();
     range.setStart(element.childNodes[0], position);
     range.collapse(true);
-    sel.removeAllRanges();
-    sel.addRange(range);
+    sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
+    sel === null || sel === void 0 ? void 0 : sel.addRange(range);
     element.focus();
 };
 var resetInput = function (ref) {
-    try {
+    if (ref && ref.current) {
         ref.current.innerHTML = '';
     }
-    catch (_a) {
-        //
-    }
 };
 var initialTargetStringInfo = {
     targetString: '',
@@ -93,7 +90,7 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
         channel: channel,
         config: config,
     });
-    var fileInputRef = useRef(null);
+    var fileInputRef = useRef();
     var _9 = useState(false), isInput = _9[0], setIsInput = _9[1];
     var _10 = useState([]), mentionedUserIds = _10[0], setMentionedUserIds = _10[1];
     var _11 = useState(__assign({}, initialTargetStringInfo)), targetStringInfo = _11[0], setTargetStringInfo = _11[1];
@@ -110,13 +107,9 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
                     elem.style.height = "".concat(MAX_HEIGHT, "px");
                 }
                 else {
-                    elem.style.height = 'auto';
-                    elem.style.height = "".concat(elem.scrollHeight, "px");
+                    elem.style.height = '';
                 }
             }
-            else {
-                elem.style.height = '';
-            }
         }
         catch (error) {
             // error
@@ -127,17 +120,18 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
     // useEffect(_, [channelUrl]) erase it
     var initialValue = props === null || props === void 0 ? void 0 : props.value;
     useEffect(function () {
-        var _a;
         var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
         try {
-            textField.innerHTML = initialValue;
-            displayCaret(textField, initialValue === null || initialValue === void 0 ? void 0 : initialValue.length);
+            if (textField && initialValue) {
+                textField.innerHTML = initialValue;
+                displayCaret(textField, initialValue === null || initialValue === void 0 ? void 0 : initialValue.length);
+            }
         }
-        catch (_b) {
+        catch (_a) {
             //
         }
         setMentionedUserIds([]);
-        setIsInput(((_a = textField === null || textField === void 0 ? void 0 : textField.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0);
+        setIsInput((textField === null || textField === void 0 ? void 0 : textField.textContent) ? textField.textContent.trim().length > 0 : false);
         setHeight();
     }, [initialValue]);
     // #Mention | Clear input value when channel changes
@@ -149,42 +143,50 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
     }, [channelUrl]);
     // #Mention & #Edit | Fill message input values
     useEffect(function () {
-        var _a, _b, _c;
+        var _a, _b;
         if (isEdit && (message === null || message === void 0 ? void 0 : message.messageId)) {
             // const textField = document.getElementById(textFieldId);
             var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
-            if (isMentionEnabled && ((_a = message === null || message === void 0 ? void 0 : message.mentionedUsers) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            if (isMentionEnabled
+                && (message === null || message === void 0 ? void 0 : message.mentionedUsers)
+                && message.mentionedUsers.length > 0
+                && (message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate)
+                && message.mentionedMessageTemplate.length > 0) {
                 /* mention enabled */
-                var _d = message.mentionedUsers, mentionedUsers_1 = _d === void 0 ? [] : _d;
+                var _c = message.mentionedUsers, mentionedUsers_1 = _c === void 0 ? [] : _c;
                 var tokens = tokenizeMessage({
                     messageText: message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate,
                     mentionedUsers: mentionedUsers_1,
                 });
-                textField.innerHTML = tokens
-                    .map(function (token) {
-                    if (token.type === TOKEN_TYPES.mention) {
-                        var mentionedUser = mentionedUsers_1.find(function (user) { return user.userId === token.userId; });
-                        var nickname = "".concat(USER_MENTION_PREFIX).concat((mentionedUser === null || mentionedUser === void 0 ? void 0 : mentionedUser.nickname) || token.value || stringSet.MENTION_NAME__NO_NAME);
-                        return renderToString({
-                            userId: token.userId,
-                            nickname: nickname,
-                        });
-                    }
-                    return sanitizeString(token.value);
-                })
-                    .join(' ');
+                if (textField) {
+                    textField.innerHTML = tokens
+                        .map(function (token) {
+                        if (token.type === TOKEN_TYPES.mention) {
+                            var mentionedUser = mentionedUsers_1.find(function (user) { return user.userId === token.userId; });
+                            var nickname = "".concat(USER_MENTION_PREFIX).concat((mentionedUser === null || mentionedUser === void 0 ? void 0 : mentionedUser.nickname) || token.value || stringSet.MENTION_NAME__NO_NAME);
+                            return renderToString({
+                                userId: token.userId,
+                                nickname: nickname,
+                            });
+                        }
+                        return sanitizeString(token.value);
+                    })
+                        .join('');
+                }
             }
             else {
                 /* mention disabled */
                 try {
-                    textField.innerHTML = sanitizeString(message === null || message === void 0 ? void 0 : message.message);
+                    if (textField) {
+                        textField.innerHTML = (_a = sanitizeString(message === null || message === void 0 ? void 0 : message.message)) !== null && _a !== void 0 ? _a : '';
+                    }
                 }
-                catch (_e) {
+                catch (_d) {
                     //
                 }
                 setMentionedUserIds([]);
             }
-            setIsInput(((_c = textField === null || textField === void 0 ? void 0 : textField.textContent) === null || _c === void 0 ? void 0 : _c.trim().length) > 0);
+            setIsInput((textField === null || textField === void 0 ? void 0 : textField.textContent) ? ((_b = textField === null || textField === void 0 ? void 0 : textField.textContent) === null || _b === void 0 ? void 0 : _b.trim().length) > 0 : false);
             setHeight();
         }
     }, [isEdit, message]);
@@ -192,7 +194,7 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
     var useMentionedLabelDetection = useCallback(function () {
         var _a;
         var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
-        if (isMentionEnabled) {
+        if (isMentionEnabled && textField) {
             var newMentionedUserIds = Array.from(textField.getElementsByClassName('sendbird-mention-user-label')).map(
             // @ts-ignore
             function (node) { var _a; return (_a = node === null || node === void 0 ? void 0 : node.dataset) === null || _a === void 0 ? void 0 : _a.userid; });
@@ -201,19 +203,21 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
                 setMentionedUserIds(newMentionedUserIds);
             }
         }
-        setIsInput(((_a = textField.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0);
+        setIsInput((textField === null || textField === void 0 ? void 0 : textField.textContent) ? ((_a = textField.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0 : false);
     }, [targetStringInfo, isMentionEnabled]);
     // #Mention | Replace selected user nickname to the MentionedUserLabel
     useEffect(function () {
-        var _a, _b;
+        var _a, _b, _c, _d;
         if (isMentionEnabled && mentionSelectedUser) {
             var targetString = targetStringInfo.targetString, startNodeIndex = targetStringInfo.startNodeIndex, startOffsetIndex = targetStringInfo.startOffsetIndex, endNodeIndex = targetStringInfo.endNodeIndex, endOffsetIndex = targetStringInfo.endOffsetIndex;
-            if (targetString && startNodeIndex !== null && startOffsetIndex !== null) {
+            var textField_1 = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
+            if (targetString && startNodeIndex !== null && startOffsetIndex !== null && endOffsetIndex !== null && endNodeIndex !== null && textField_1) {
                 // const textField = document.getElementById(textFieldId);
-                var textField_1 = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
                 var childNodes = nodeListToArray(textField_1 === null || textField_1 === void 0 ? void 0 : textField_1.childNodes);
-                var frontTextNode = document === null || document === void 0 ? void 0 : document.createTextNode((_a = childNodes[startNodeIndex]) === null || _a === void 0 ? void 0 : _a.textContent.slice(0, startOffsetIndex));
-                var backTextNode = document === null || document === void 0 ? void 0 : document.createTextNode("\u00A0".concat((_b = childNodes[endNodeIndex]) === null || _b === void 0 ? void 0 : _b.textContent.slice(endOffsetIndex)));
+                var startNodeTextContent = (_b = (_a = childNodes[startNodeIndex]) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : '';
+                var frontTextNode = document.createTextNode(startNodeTextContent.slice(0, startOffsetIndex));
+                var endNodeTextContent = (_d = (_c = childNodes[endNodeIndex]) === null || _c === void 0 ? void 0 : _c.textContent) !== null && _d !== void 0 ? _d : '';
+                var backTextNode = endOffsetIndex && document.createTextNode("\u00A0".concat(endNodeTextContent.slice(endOffsetIndex)));
                 var mentionLabel = renderToString({
                     userId: mentionSelectedUser === null || mentionSelectedUser === void 0 ? void 0 : mentionSelectedUser.userId,
                     nickname: "".concat(USER_MENTION_TEMP_CHAR).concat((mentionSelectedUser === null || mentionSelectedUser === void 0 ? void 0 : mentionSelectedUser.nickname) || stringSet.MENTION_NAME__NO_NAME),
@@ -225,21 +229,25 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
                     div.childNodes[0],
                     backTextNode
                 ], false), childNodes.slice(endNodeIndex + 1), true);
-                textField_1.innerHTML = '';
-                newNodes.forEach(function (newNode) {
-                    textField_1.appendChild(newNode);
-                });
+                if (textField_1) {
+                    textField_1.innerHTML = '';
+                    newNodes.forEach(function (newNode) {
+                        if (newNode) {
+                            textField_1.appendChild(newNode);
+                        }
+                    });
+                }
                 onUserMentioned(mentionSelectedUser);
                 if (window.getSelection || document.getSelection) {
                     // set caret postion
                     var selection = window.getSelection() || document.getSelection();
-                    selection.removeAllRanges();
+                    selection === null || selection === void 0 ? void 0 : selection.removeAllRanges();
                     var range = new Range();
                     range.selectNodeContents(textField_1);
                     range.setStart(textField_1.childNodes[startNodeIndex + 2], 1);
                     range.setEnd(textField_1.childNodes[startNodeIndex + 2], 1);
                     range.collapse(false);
-                    selection.addRange(range);
+                    selection === null || selection === void 0 ? void 0 : selection.addRange(range);
                     textField_1.focus();
                 }
                 setTargetStringInfo(__assign({}, initialTargetStringInfo));
@@ -253,23 +261,28 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
         var _a, _b;
         var selection = ((_a = window === null || window === void 0 ? void 0 : window.getSelection) === null || _a === void 0 ? void 0 : _a.call(window)) || ((_b = document === null || document === void 0 ? void 0 : document.getSelection) === null || _b === void 0 ? void 0 : _b.call(document));
         var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
-        if (selection.anchorNode === textField) {
+        if ((selection === null || selection === void 0 ? void 0 : selection.anchorNode) === textField) {
             onMentionStringChange('');
         }
         if (isMentionEnabled
+            && textField
             && selection
             && selection.anchorNode === selection.focusNode
             && selection.anchorOffset === selection.focusOffset) {
             var textStack = '';
             var startNodeIndex = null;
             var startOffsetIndex = null;
-            for (var index = 0; index < textField.childNodes.length; index += 1) {
+            var _loop_1 = function (index) {
                 var currentNode = textField.childNodes[index];
                 if (currentNode.nodeType === NodeTypes.TextNode) {
                     /* text node */
-                    var textContent = currentNode === selection.anchorNode
-                        ? (currentNode === null || currentNode === void 0 ? void 0 : currentNode.textContent.slice(0, selection.anchorOffset)) || ''
-                        : (currentNode === null || currentNode === void 0 ? void 0 : currentNode.textContent) || '';
+                    var textContent = (function () {
+                        var _a;
+                        if (currentNode === selection.anchorNode) {
+                            return (currentNode === null || currentNode === void 0 ? void 0 : currentNode.textContent) ? currentNode === null || currentNode === void 0 ? void 0 : currentNode.textContent.slice(0, selection.anchorOffset) : '';
+                        }
+                        return (_a = currentNode === null || currentNode === void 0 ? void 0 : currentNode.textContent) !== null && _a !== void 0 ? _a : '';
+                    })();
                     if (textStack.length > 0) {
                         textStack += textContent;
                     }
@@ -301,7 +314,7 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
                      * targetString could be ''
                      * startNodeIndex and startOffsetIndex could be null
                      */
-                    var targetString = textStack ? textStack.slice(startOffsetIndex) : ''; // include template character
+                    var targetString = textStack && startOffsetIndex !== null ? textStack.slice(startOffsetIndex) : ''; // include template character
                     setTargetStringInfo({
                         targetString: targetString,
                         startNodeIndex: startNodeIndex,
@@ -310,8 +323,13 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
                         endOffsetIndex: selection.anchorOffset,
                     });
                     onMentionStringChange(targetString);
-                    return;
+                    return { value: void 0 };
                 }
+            };
+            for (var index = 0; index < textField.childNodes.length; index += 1) {
+                var state_1 = _loop_1(index);
+                if (typeof state_1 === "object")
+                    return state_1.value;
             }
         }
     }, [isMentionEnabled]);
@@ -332,7 +350,7 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
     var editMessage = function () {
         var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
         var messageId = message === null || message === void 0 ? void 0 : message.messageId;
-        if (isEdit && messageId) {
+        if (isEdit && messageId && textField) {
             var _a = extractTextAndMentions(textField.childNodes), messageText = _a.messageText, mentionTemplate = _a.mentionTemplate;
             var params = { messageId: messageId, message: messageText, mentionTemplate: mentionTemplate };
             onUpdateMessage(params);
@@ -346,16 +364,13 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
         setIsInput: setIsInput,
         setHeight: setHeight,
     });
-    return (React__default.createElement("form", { className: getClassName([
-            className,
-            isEdit ? 'sendbird-message-input__edit' : '',
-            disabled ? 'sendbird-message-input-form__disabled' : '',
-        ]) },
-        React__default.createElement("div", { className: getClassName(['sendbird-message-input', disabled ? 'sendbird-message-input__disabled' : '']) },
+    return (React__default.createElement("form", { className: classnames.apply(void 0, __spreadArray(__spreadArray([], (Array.isArray(className) ? className : [className]), false), [isEdit && 'sendbird-message-input__edit',
+            disabled && 'sendbird-message-input-form__disabled'], false)) },
+        React__default.createElement("div", { className: classnames('sendbird-message-input', disabled && 'sendbird-message-input__disabled'), "data-testid": "sendbird-message-input" },
             React__default.createElement("div", { id: "".concat(textFieldId).concat(isEdit ? message === null || message === void 0 ? void 0 : message.messageId : ''), className: "sendbird-message-input--textarea ".concat(textFieldId), contentEditable: !disabled, role: "textbox", "aria-label": "Text Input", ref: externalRef, 
                 // @ts-ignore
                 disabled: disabled, maxLength: maxLength, onKeyDown: function (e) {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                    var _a, _b, _c, _d;
                     var preventEvent = onKeyDown(e);
                     if (preventEvent) {
                         e.preventDefault();
@@ -364,8 +379,9 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
                         if (!e.shiftKey
                             && e.key === MessageInputKeys.Enter
                             && !isMobile
-                            && ((_b = (_a = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim().length) > 0
-                            && ((_c = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _c === void 0 ? void 0 : _c.isComposing) !== true
+                            && ((_a = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _a === void 0 ? void 0 : _a.textContent)
+                            && internalRef.current.textContent.trim().length > 0
+                            && ((_b = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _b === void 0 ? void 0 : _b.isComposing) !== true
                         /**
                          * NOTE: What isComposing does?
                          * Check if the user has finished composing characters
@@ -386,10 +402,10 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
                             sendMessage();
                         }
                         if (e.key === MessageInputKeys.Backspace
-                            && ((_e = (_d = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _d === void 0 ? void 0 : _d.childNodes) === null || _e === void 0 ? void 0 : _e.length) === 2
-                            && !((_h = (_g = (_f = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _f === void 0 ? void 0 : _f.childNodes) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.textContent)
-                            && ((_k = (_j = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current.childNodes) === null || _j === void 0 ? void 0 : _j[1]) === null || _k === void 0 ? void 0 : _k.nodeType) === NodeTypes.ElementNode) {
-                            internalRef === null || internalRef === void 0 ? void 0 : internalRef.current.removeChild(internalRef === null || internalRef === void 0 ? void 0 : internalRef.current.childNodes[1]);
+                            && ((_d = (_c = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _c === void 0 ? void 0 : _c.childNodes) === null || _d === void 0 ? void 0 : _d.length) === 2
+                            && !internalRef.current.childNodes[0].textContent
+                            && internalRef.current.childNodes[1].nodeType === NodeTypes.ElementNode) {
+                            internalRef.current.removeChild(internalRef.current.childNodes[1]);
                         }
                     }
                 }, onKeyUp: function (e) {
@@ -403,20 +419,20 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
                 }, onClick: function () {
                     useMentionInputDetection();
                 }, onInput: function () {
-                    var _a, _b;
+                    var _a;
                     setHeight();
                     onStartTyping();
-                    setIsInput(((_b = (_a = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim().length) > 0);
+                    setIsInput(((_a = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _a === void 0 ? void 0 : _a.textContent) ? internalRef.current.textContent.trim().length > 0 : false);
                     useMentionedLabelDetection();
                 }, onPaste: onPaste }),
             ((_e = (_d = (_c = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _c === void 0 ? void 0 : _c.textContent) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0) === 0 && (React__default.createElement(Label, { className: "sendbird-message-input--placeholder", type: LabelTypography.BODY_1, color: disabled ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_3 }, placeholder || stringSet.MESSAGE_INPUT__PLACE_HOLDER)),
-            !isEdit && isInput && (React__default.createElement(IconButton, { className: "sendbird-message-input--send", height: "32px", width: "32px", onClick: function () { return sendMessage(); } }, (renderSendMessageIcon === null || renderSendMessageIcon === void 0 ? void 0 : renderSendMessageIcon()) || (React__default.createElement(Icon, { type: IconTypes.SEND, fillColor: disabled ? IconColors.ON_BACKGROUND_4 : IconColors.PRIMARY, width: "20px", height: "20px" })))),
+            !isEdit && isInput && (React__default.createElement(IconButton, { className: "sendbird-message-input--send", height: "32px", width: "32px", onClick: function () { return sendMessage(); }, testID: "sendbird-message-input-send-button" }, (renderSendMessageIcon === null || renderSendMessageIcon === void 0 ? void 0 : renderSendMessageIcon()) || (React__default.createElement(Icon, { type: IconTypes.SEND, fillColor: disabled ? IconColors.ON_BACKGROUND_4 : IconColors.PRIMARY, width: "20px", height: "20px" })))),
             !isEdit
                 && !isInput
                 && ((renderFileUploadIcon === null || renderFileUploadIcon === void 0 ? void 0 : renderFileUploadIcon())
                     // UIKit Dashboard configuration should have lower priority than
                     // renderFileUploadIcon which is set in code level
-                    || (isFileUploadEnabled && (React__default.createElement(IconButton, { className: "sendbird-message-input--attach ".concat(isVoiceMessageEnabled ? 'is-voice-message-enabled' : ''), height: "32px", width: "32px", onClick: function () {
+                    || (isFileUploadEnabled && (React__default.createElement(IconButton, { className: classnames('sendbird-message-input--attach', isVoiceMessageEnabled && 'is-voice-message-enabled'), height: "32px", width: "32px", onClick: function () {
                             var _a, _b;
                             // todo: clear previous input
                             (_b = (_a = fileInputRef === null || fileInputRef === void 0 ? void 0 : fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -426,11 +442,13 @@ var MessageInput = React__default.forwardRef(function (props, externalRef) {
                             // It will affect to <Channel /> and <Thread />
                             onChange: function (event) {
                                 var files = event.currentTarget.files;
-                                onFileUpload(files && files.length === 1 ? [files[0]] : Array.from(files));
+                                if (files) {
+                                    onFileUpload(files && files.length === 1 ? [files[0]] : Array.from(files));
+                                }
                                 event.target.value = '';
                             }, accept: getMimeTypesUIKitAccepts(acceptableMimeTypes), multiple: isSelectingMultipleFilesEnabled && isChannelTypeSupportsMultipleFilesMessage(channel) }))))),
             isVoiceMessageEnabled && !isEdit && !isInput && (React__default.createElement(IconButton, { className: "sendbird-message-input--voice-message", width: "32px", height: "32px", onClick: onVoiceMessageIconClick }, (renderVoiceMessageIcon === null || renderVoiceMessageIcon === void 0 ? void 0 : renderVoiceMessageIcon()) || (React__default.createElement(Icon, { type: IconTypes.AUDIO_ON_LINED, fillColor: disabled ? IconColors.ON_BACKGROUND_4 : IconColors.CONTENT_INVERSE, width: "20px", height: "20px" }))))),
-        isEdit && (React__default.createElement("div", { className: "sendbird-message-input--edit-action" },
+        isEdit && (React__default.createElement("div", { className: "sendbird-message-input--edit-action", "data-testid": "sendbird-message-input--edit-action" },
             React__default.createElement(Button, { className: "sendbird-message-input--edit-action__cancel", type: ButtonTypes.SECONDARY, size: ButtonSizes.SMALL, onClick: onCancelEdit }, stringSet.BUTTON__CANCEL),
             React__default.createElement(Button, { className: "sendbird-message-input--edit-action__save", type: ButtonTypes.PRIMARY, size: ButtonSizes.SMALL, disabled: isEditDisabled, onClick: function () { return editMessage(); } }, stringSet.BUTTON__SAVE)))));
 });

package/ui/MessageInput.js.map

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

package/ui/MessageItemMenu.js

@@ -1,23 +1,23 @@
-import { _ as __assign } from '../chunks/bundle-CDy_GVNR.js';
+import { _ as __assign } from '../chunks/bundle-zAvvLMA9.js';
 import React__default, { useContext, useRef } from 'react';
 import ContextMenu, { MenuItems, MenuItem } from './ContextMenu.js';
 import Icon, { IconTypes, IconColors } from './Icon.js';
 import IconButton from './IconButton.js';
-import { l as isUserMessage, q as isSentMessage, u as isFailedMessage, v as isPendingMessage, w as getClassName, x as copyToClipboard } from '../chunks/bundle-BH5EGLxi.js';
-import { L as LocalizationContext } from '../chunks/bundle-CAdxJnio.js';
-import { R as Role } from '../chunks/bundle-hF8Gurf8.js';
-import { d as deleteNullish } from '../chunks/bundle-DhJuLwLJ.js';
-import '../chunks/bundle-2vhBVWLQ.js';
+import { l as isUserMessage, q as isSentMessage, u as isFailedMessage, v as isPendingMessage, w as getClassName, x as copyToClipboard } from '../chunks/bundle-CMOqM33u.js';
+import { L as LocalizationContext } from '../chunks/bundle-4r7ZPzcx.js';
+import { R as Role } from '../chunks/bundle-Dj4qcISv.js';
+import { d as deleteNullish } from '../chunks/bundle-Dl6p5CcR.js';
+import '../chunks/bundle-HbS5lB90.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-8J9SSfIS.js';
-import '../chunks/bundle-q3jyuKU7.js';
-import '../chunks/bundle-B621kS6J.js';
+import '../chunks/bundle-sq0c8UmG.js';
+import '../chunks/bundle-DyVURRtM.js';
+import '../chunks/bundle-BvFSwy4a.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-9Pg6kODx.js';
+import '../chunks/bundle-D2RTt6tN.js';
 
 function MessageMenu(props) {
     var _a;
@@ -52,20 +52,20 @@ function MessageMenu(props) {
         || showMenuItemDelete)) {
         return null;
     }
-    return (React__default.createElement("div", { className: getClassName([className, 'sendbird-message-item-menu']), ref: containerRef },
+    return (React__default.createElement("div", { className: getClassName([className !== null && className !== void 0 ? className : '', 'sendbird-message-item-menu']), ref: containerRef },
         React__default.createElement(ContextMenu, { menuTrigger: function (toggleDropdown) { return (React__default.createElement(IconButton, { className: "sendbird-message-item-menu__trigger", ref: triggerRef, width: "32px", height: "32px", onClick: function () {
                     toggleDropdown();
-                    setSupposedHover(true);
+                    setSupposedHover === null || setSupposedHover === void 0 ? void 0 : setSupposedHover(true);
                 }, onBlur: function () {
-                    setSupposedHover(false);
+                    setSupposedHover === null || setSupposedHover === void 0 ? void 0 : setSupposedHover(false);
                 } },
-                React__default.createElement(Icon, { className: "sendbird-message-item-menu__trigger__icon", type: IconTypes.MORE, fillColor: IconColors.CONTENT_INVERSE, width: "24px", height: "24px" }))); }, menuItems: function (close) {
-                var _a;
+                React__default.createElement(Icon, { className: "sendbird-message-item-menu__trigger__icon", testID: "sendbird-message-item-menu__trigger__icon", type: IconTypes.MORE, fillColor: IconColors.CONTENT_INVERSE, width: "24px", height: "24px" }))); }, menuItems: function (close) {
+                var _a, _b;
                 var closeDropdown = function () {
                     close();
-                    setSupposedHover(false);
+                    setSupposedHover === null || setSupposedHover === void 0 ? void 0 : setSupposedHover(false);
                 };
-                return (React__default.createElement(MenuItems, { className: "sendbird-message-item-menu__list", parentRef: triggerRef, parentContainRef: containerRef, closeDropdown: closeDropdown, openLeft: isByMe },
+                return (React__default.createElement(MenuItems, { className: "sendbird-message-item-menu__list", testID: "sendbird-message-item-menu__list", parentRef: triggerRef, parentContainRef: containerRef, closeDropdown: closeDropdown, openLeft: isByMe },
                     showMenuItemCopy && (renderMenuItem({
                         className: 'sendbird-message-item-menu__list__menu-item menu-item-copy',
                         onClick: function () {
@@ -78,7 +78,7 @@ function MessageMenu(props) {
                     showMenuItemReply && (renderMenuItem({
                         className: 'sendbird-message-item-menu__list__menu-item menu-item-reply',
                         onClick: function () {
-                            setQuoteMessage(message);
+                            setQuoteMessage === null || setQuoteMessage === void 0 ? void 0 : setQuoteMessage(message);
                             closeDropdown();
                         },
                         disable: (message === null || message === void 0 ? void 0 : message.parentMessageId) > 0,
@@ -107,7 +107,7 @@ function MessageMenu(props) {
                         className: 'sendbird-message-item-menu__list__menu-item menu-item-edit',
                         onClick: function () {
                             if (!disabled) {
-                                showEdit(true);
+                                showEdit === null || showEdit === void 0 ? void 0 : showEdit(true);
                                 closeDropdown();
                             }
                         },
@@ -118,7 +118,7 @@ function MessageMenu(props) {
                         className: 'sendbird-message-item-menu__list__menu-item menu-item-resend',
                         onClick: function () {
                             if (!disabled) {
-                                resendMessage(message);
+                                resendMessage === null || resendMessage === void 0 ? void 0 : resendMessage(message);
                                 closeDropdown();
                             }
                         },
@@ -132,13 +132,13 @@ function MessageMenu(props) {
                                 deleteMessage === null || deleteMessage === void 0 ? void 0 : deleteMessage(message);
                             }
                             else if (!disabled) {
-                                showRemove(true);
+                                showRemove === null || showRemove === void 0 ? void 0 : showRemove(true);
                                 closeDropdown();
                             }
                         },
                         disable: (typeof disableDeleteMessage === 'boolean'
                             ? disableDeleteMessage
-                            : ((_a = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _a === void 0 ? void 0 : _a.replyCount) > 0),
+                            : ((_b = (_a = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _a === void 0 ? void 0 : _a.replyCount) !== null && _b !== void 0 ? _b : 0) > 0),
                         dataSbId: 'ui_message_item_menu_delete',
                         text: stringSet.MESSAGE_MENU__DELETE,
                     }))));

package/ui/MessageItemReactionMenu.js

@@ -4,19 +4,19 @@ import Icon, { IconTypes, IconColors } from './Icon.js';
 import IconButton from './IconButton.js';
 import ImageRenderer from './ImageRenderer.js';
 import ReactionButton from './ReactionButton.js';
-import { v as isPendingMessage, u as isFailedMessage, w as getClassName, y as getEmojiListAll } from '../chunks/bundle-BH5EGLxi.js';
-import '../chunks/bundle-2vhBVWLQ.js';
-import '../chunks/bundle-CDy_GVNR.js';
+import { v as isPendingMessage, u as isFailedMessage, w as getClassName, y as getEmojiListAll } from '../chunks/bundle-CMOqM33u.js';
+import '../chunks/bundle-HbS5lB90.js';
+import '../chunks/bundle-zAvvLMA9.js';
 import 'react-dom';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
 import './SortByRow.js';
-import '../chunks/bundle-8J9SSfIS.js';
-import '../chunks/bundle-q3jyuKU7.js';
-import '../chunks/bundle-B621kS6J.js';
-import '../chunks/bundle-DhJuLwLJ.js';
-import '../chunks/bundle-xHRJMo_A.js';
-import '../chunks/bundle-Cj-w5I5i.js';
+import '../chunks/bundle-sq0c8UmG.js';
+import '../chunks/bundle-DyVURRtM.js';
+import '../chunks/bundle-BvFSwy4a.js';
+import '../chunks/bundle-Dl6p5CcR.js';
+import '../chunks/bundle-BNZI6WLw.js';
+import '../chunks/bundle-DS8lmYaF.js';
 import '@sendbird/chat/groupChannel';
 import '../utils/message/getOutgoingMessageState.js';
 
@@ -27,25 +27,25 @@ function MessageEmojiMenu(_a) {
     if (isPendingMessage(message) || isFailedMessage(message)) {
         return null;
     }
-    return (React__default.createElement("div", { className: getClassName([className, 'sendbird-message-item-reaction-menu']), ref: containerRef },
+    return (React__default.createElement("div", { className: getClassName([className !== null && className !== void 0 ? className : '', 'sendbird-message-item-reaction-menu']), ref: containerRef },
         React__default.createElement(ContextMenu, { menuTrigger: function (toggleDropdown) { return (React__default.createElement(IconButton, { className: "sendbird-message-item-reaction-menu__trigger", ref: triggerRef, width: "32px", height: "32px", onClick: function () {
                     toggleDropdown();
-                    setSupposedHover(true);
+                    setSupposedHover === null || setSupposedHover === void 0 ? void 0 : setSupposedHover(true);
                 }, onBlur: function () {
-                    setSupposedHover(false);
+                    setSupposedHover === null || setSupposedHover === void 0 ? void 0 : setSupposedHover(false);
                 } },
-                React__default.createElement(Icon, { className: "sendbird-message-item-reaction-menu__trigger__icon", type: IconTypes.EMOJI_MORE, fillColor: IconColors.CONTENT_INVERSE, width: "24px", height: "24px" }))); }, menuItems: function (close) {
+                React__default.createElement(Icon, { className: "sendbird-message-item-reaction-menu__trigger__icon", testID: "sendbird-message-item-reaction-menu__trigger__icon", type: IconTypes.EMOJI_MORE, fillColor: IconColors.CONTENT_INVERSE, width: "24px", height: "24px" }))); }, menuItems: function (close) {
                 var closeDropdown = function () {
                     close();
-                    setSupposedHover(false);
+                    setSupposedHover === null || setSupposedHover === void 0 ? void 0 : setSupposedHover(false);
                 };
-                return (React__default.createElement(EmojiListItems, { parentRef: triggerRef, parentContainRef: containerRef, closeDropdown: closeDropdown, spaceFromTrigger: spaceFromTrigger }, getEmojiListAll(emojiContainer).map(function (emoji) {
+                return (React__default.createElement(EmojiListItems, { parentRef: triggerRef, parentContainRef: containerRef, closeDropdown: closeDropdown, spaceFromTrigger: spaceFromTrigger }, emojiContainer && 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__default.createElement(ReactionButton, { key: emoji.key, width: "36px", height: "36px", selected: isReacted, onClick: function () {
                             closeDropdown();
-                            toggleReaction(message, emoji.key, isReacted);
-                        }, dataSbId: "ui_emoji_reactions_menu_".concat(emoji.key) },
+                            toggleReaction === null || toggleReaction === void 0 ? void 0 : toggleReaction(message, emoji.key, isReacted);
+                        }, testID: "ui_emoji_reactions_menu_".concat(emoji.key) },
                         React__default.createElement(ImageRenderer, { url: emoji.url, width: "28px", height: "28px", placeHolder: function (_a) {
                                 var style = _a.style;
                                 return (React__default.createElement("div", { style: style },