@sendbird/uikit-react 3.17.12 → 3.18.1

package/cjs/ui/MessageInput.js

@@ -1,485 +1,37 @@
 'use strict';
 
-var _tslib = require('../chunks/bundle-C5mxhXoI.js');
-var React = require('react');
-var _const$1 = require('../chunks/bundle-C6htG4_3.js');
-var _const = require('../chunks/bundle-Zv_4ZO0n.js');
-var ui_IconButton = require('./IconButton.js');
-var ui_Button = require('./Button.js');
-var ui_MessageInput_hooks_usePaste = require('../chunks/bundle-0TJHf4Tc.js');
-var ui_Icon = require('./Icon.js');
-var ui_Label = require('../chunks/bundle-BbAqlLCc.js');
-var LocalizationContext = require('../chunks/bundle-BiH38g8Z.js');
-var index$1 = require('../chunks/bundle-DbmnzR7q.js');
-var tokenize = require('../chunks/bundle-D079OjSe.js');
-var index = require('../chunks/bundle-CtVNyiwe.js');
-var utils = require('../chunks/bundle-DVTKYwk8.js');
-var browser = require('../chunks/bundle-Ccd-6PYk.js');
-var useSendbird = require('../chunks/bundle-D18FtXyq.js');
+require('../chunks/bundle-BX9JpkVP.js');
+require('react');
+require('../chunks/bundle-MaS7JhxM.js');
+require('../chunks/bundle-CN82E46K.js');
+require('./IconButton.js');
+require('./Button.js');
+require('../chunks/bundle-Bzxy-3oT.js');
+require('./Icon.js');
+require('../chunks/bundle-CSUhrMB1.js');
+require('../chunks/bundle-JZ1A5dHC.js');
+require('../chunks/bundle-BasmAwwJ.js');
+var ui_MessageInput = require('../chunks/bundle-B5T66O9D.js');
+require('../chunks/bundle-CNWIcRd-.js');
+require('../chunks/bundle-DoUok50d.js');
+require('../chunks/bundle-CZryxVSd.js');
+require('../chunks/bundle-CBb6rgl-.js');
+require('../chunks/bundle-DcBTt6H_.js');
 require('dompurify');
-require('../chunks/bundle-BZ9pC_BG.js');
-require('../chunks/bundle-DQMqz2XT.js');
-require('../chunks/bundle-CPKCY1PR.js');
-require('../chunks/bundle-BmRh3iEN.js');
-require('../chunks/bundle-DmDbvIgG.js');
+require('../chunks/bundle-CuQNzWcL.js');
+require('../chunks/bundle-DSt8v0lq.js');
+require('../chunks/bundle-Cnkvqs6V.js');
+require('../chunks/bundle-CILoXVWP.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-BnRVJSVA.js');
-require('../chunks/bundle-DSwCeEJP.js');
-require('../chunks/bundle-Ct1kTyi8.js');
+require('../chunks/bundle-Dmbgwti3.js');
+require('../chunks/bundle-BtfCkBUa.js');
+require('../chunks/bundle-BmdLztHu.js');
+require('../chunks/bundle-DG9KyMWt.js');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-/**
- * FIXME:
- * Import this ChannelType enum from @sendbird/chat
- * once MessageInput.spec unit tests can be run \wo jest <-> ESM issue
- */
-var ChannelType;
-(function (ChannelType) {
-    ChannelType["BASE"] = "base";
-    ChannelType["GROUP"] = "group";
-    ChannelType["OPEN"] = "open";
-})(ChannelType || (ChannelType = {}));
-/**
- * FIXME: Simplify this in UIKit@v4
- * If customer is using MessageInput inside our modules(ie: Channel, Thread, etc),
- * we should use the config from the module.
- * If customer is using MessageInput outside our modules(ie: custom UI),
- * we expect Channel to be undefined and customer gets control to show/hide file-upload.
- * @param {*} channel GroupChannel | OpenChannel
- * @param {*} config SendbirdStateConfig
- * @returns boolean
- */
-var checkIfFileUploadEnabled = function (_a) {
-    var channel = _a.channel, config = _a.config;
-    var isEnabled = index.K(channel === null || channel === void 0 ? void 0 : channel.channelType)
-        .with(ChannelType.GROUP, function () { var _a; return (_a = config === null || config === void 0 ? void 0 : config.groupChannel) === null || _a === void 0 ? void 0 : _a.enableDocument; })
-        .with(ChannelType.OPEN, function () { var _a; return (_a = config === null || config === void 0 ? void 0 : config.openChannel) === null || _a === void 0 ? void 0 : _a.enableDocument; })
-        .otherwise(function () { return true; });
-    return isEnabled;
-};
-
-var TEXT_FIELD_ID = 'sendbird-message-input-text-field';
-var noop = function () {
-    return null;
-};
-var resetInput = function (ref) {
-    if (ref && ref.current) {
-        ref.current.innerHTML = '';
-    }
-};
-var getTextContentWithoutZeroWidthSpace = function (node) {
-    var _a;
-    return ui_MessageInput_hooks_usePaste.stripZeroWidthSpace((_a = node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : '');
-};
-var hasTextContentWithoutZeroWidthSpace = function (node) {
-    return getTextContentWithoutZeroWidthSpace(node).trim().length > 0;
-};
-var initialTargetStringInfo = {
-    targetString: '',
-    startNodeIndex: null,
-    startOffsetIndex: null,
-    endNodeIndex: null,
-    endOffsetIndex: null,
-};
-var MessageInput = React__default.default.forwardRef(function (props, externalRef) {
-    var channel = props.channel, _a = props.className, className = _a === void 0 ? '' : _a, _b = props.messageFieldId, messageFieldId = _b === void 0 ? '' : _b, _c = props.isEdit, isEdit = _c === void 0 ? false : _c, _d = props.isMobile, isMobile = _d === void 0 ? false : _d, _e = props.isMentionEnabled, isMentionEnabled = _e === void 0 ? false : _e, _f = props.isVoiceMessageEnabled, isVoiceMessageEnabled = _f === void 0 ? true : _f, _g = props.isSelectingMultipleFilesEnabled, isSelectingMultipleFilesEnabled = _g === void 0 ? false : _g, _h = props.disabled, disabled = _h === void 0 ? false : _h, _j = props.message, message = _j === void 0 ? null : _j, _k = props.placeholder, placeholder = _k === void 0 ? '' : _k, _l = props.maxLength, maxLength = _l === void 0 ? 5000 : _l, _m = props.onFileUpload, onFileUpload = _m === void 0 ? noop : _m, _o = props.onSendMessage, onSendMessage = _o === void 0 ? noop : _o, _p = props.onUpdateMessage, onUpdateMessage = _p === void 0 ? noop : _p, _q = props.onCancelEdit, onCancelEdit = _q === void 0 ? noop : _q, _r = props.onStartTyping, onStartTyping = _r === void 0 ? noop : _r, _s = props.channelUrl, channelUrl = _s === void 0 ? '' : _s, _t = props.mentionSelectedUser, mentionSelectedUser = _t === void 0 ? null : _t, _u = props.onUserMentioned, onUserMentioned = _u === void 0 ? noop : _u, _v = props.onMentionStringChange, onMentionStringChange = _v === void 0 ? noop : _v, _w = props.onMentionedUserIdsUpdated, onMentionedUserIdsUpdated = _w === void 0 ? noop : _w, _x = props.onVoiceMessageIconClick, onVoiceMessageIconClick = _x === void 0 ? noop : _x, _y = props.onKeyUp, onKeyUp = _y === void 0 ? noop : _y, _z = props.onKeyDown, onKeyDown = _z === void 0 ? noop : _z, _0 = props.renderFileUploadIcon, renderFileUploadIcon = _0 === void 0 ? noop : _0, _1 = props.renderVoiceMessageIcon, renderVoiceMessageIcon = _1 === void 0 ? noop : _1, _2 = props.renderSendMessageIcon, renderSendMessageIcon = _2 === void 0 ? noop : _2, _3 = props.setMentionedUsers, setMentionedUsers = _3 === void 0 ? noop : _3, acceptableMimeTypes = props.acceptableMimeTypes;
-    var internalRef = (externalRef && 'current' in externalRef) ? externalRef : React.useRef(null);
-    var ghostInputRef = React.useRef(null);
-    var textFieldId = messageFieldId || TEXT_FIELD_ID;
-    var stringSet = LocalizationContext.useLocalization().stringSet;
-    var _4 = useSendbird.useSendbird().state, config = _4.config, eventHandlers = _4.eventHandlers;
-    var isFileUploadEnabled = checkIfFileUploadEnabled({
-        channel: channel,
-        config: config,
-    });
-    var fileInputRef = React.useRef();
-    var _5 = React.useState(false), isInput = _5[0], setIsInput = _5[1];
-    var _6 = React.useState([]), mentionedUserIds = _6[0], setMentionedUserIds = _6[1];
-    var _7 = React.useState(_tslib.__assign({}, initialTargetStringInfo)), targetStringInfo = _7[0], setTargetStringInfo = _7[1];
-    // #Edit mode
-    // for easily initialize input value from outside, but
-    // useEffect(_, [channelUrl]) erase it
-    var initialValue = props === null || props === void 0 ? void 0 : props.value;
-    React.useEffect(function () {
-        var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
-        setMentionedUserIds([]);
-        setIsInput(hasTextContentWithoutZeroWidthSpace(textField));
-    }, [initialValue]);
-    // #Mention | Clear input value when channel changes
-    React.useEffect(function () {
-        if (!isEdit) {
-            setIsInput(false);
-            resetInput(internalRef);
-        }
-    }, [channelUrl]);
-    // #Mention & #Edit | Fill message input values
-    React.useEffect(function () {
-        var _a;
-        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
-                && (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 _b = message.mentionedUsers, mentionedUsers_1 = _b === void 0 ? [] : _b;
-                var tokens = tokenize.tokenizeMessage({
-                    messageText: message === null || message === void 0 ? void 0 : message.mentionedMessageTemplate,
-                    mentionedUsers: mentionedUsers_1,
-                    includeMarkdown: channel.isGroupChannel() && config.groupChannel.enableMarkdownForUserMessage,
-                });
-                if (textField) {
-                    textField.innerHTML = tokens
-                        .map(function (token) {
-                        if (token.type === tokenize.TOKEN_TYPES.mention) {
-                            var mentionedUser = mentionedUsers_1.find(function (user) { return user.userId === token.userId; });
-                            var nickname = "".concat(tokenize.USER_MENTION_PREFIX).concat((mentionedUser === null || mentionedUser === void 0 ? void 0 : mentionedUser.nickname) || token.value || stringSet.MENTION_NAME__NO_NAME);
-                            return ui_MessageInput_hooks_usePaste.renderToString({
-                                userId: token.userId,
-                                nickname: nickname,
-                            });
-                        }
-                        return ui_MessageInput_hooks_usePaste.sanitizeString(token.value);
-                    })
-                        .join('');
-                }
-            }
-            else {
-                /* mention disabled */
-                try {
-                    if (textField) {
-                        textField.innerHTML = (_a = ui_MessageInput_hooks_usePaste.sanitizeString(message === null || message === void 0 ? void 0 : message.message)) !== null && _a !== void 0 ? _a : '';
-                    }
-                }
-                catch (_c) {
-                    //
-                }
-                setMentionedUserIds([]);
-            }
-            setIsInput(hasTextContentWithoutZeroWidthSpace(textField));
-        }
-    }, [isEdit, message]);
-    // #Mention | Detect MentionedLabel modified
-    var useMentionedLabelDetection = React.useCallback(function () {
-        var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
-        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; });
-            if (!index$1.arrayEqual(mentionedUserIds, newMentionedUserIds) || newMentionedUserIds.length === 0) {
-                onMentionedUserIdsUpdated(newMentionedUserIds);
-                setMentionedUserIds(newMentionedUserIds);
-            }
-        }
-        setIsInput(hasTextContentWithoutZeroWidthSpace(textField));
-    }, [targetStringInfo, isMentionEnabled]);
-    // #Mention | Replace selected user nickname to the MentionedUserLabel
-    React.useEffect(function () {
-        var _a, _b, _c, _d;
-        if (isMentionEnabled && mentionSelectedUser) {
-            var targetString = targetStringInfo.targetString, startNodeIndex = targetStringInfo.startNodeIndex, startOffsetIndex = targetStringInfo.startOffsetIndex, endNodeIndex = targetStringInfo.endNodeIndex, endOffsetIndex = targetStringInfo.endOffsetIndex;
-            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 childNodes = ui_MessageInput_hooks_usePaste.nodeListToArray(textField_1 === null || textField_1 === void 0 ? void 0 : textField_1.childNodes);
-                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 = ui_MessageInput_hooks_usePaste.renderToString({
-                    userId: mentionSelectedUser === null || mentionSelectedUser === void 0 ? void 0 : mentionSelectedUser.userId,
-                    nickname: "".concat(_const.USER_MENTION_TEMP_CHAR).concat((mentionSelectedUser === null || mentionSelectedUser === void 0 ? void 0 : mentionSelectedUser.nickname) || stringSet.MENTION_NAME__NO_NAME),
-                });
-                var div = document.createElement('div');
-                div.innerHTML = mentionLabel;
-                var newNodes = _tslib.__spreadArray(_tslib.__spreadArray(_tslib.__spreadArray([], childNodes.slice(0, startNodeIndex), true), [
-                    frontTextNode,
-                    div.childNodes[0],
-                    backTextNode
-                ], false), childNodes.slice(endNodeIndex + 1), true);
-                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 === 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 === null || selection === void 0 ? void 0 : selection.addRange(range);
-                    textField_1.focus();
-                }
-                setTargetStringInfo(_tslib.__assign({}, initialTargetStringInfo));
-                useMentionedLabelDetection();
-            }
-        }
-    }, [mentionSelectedUser, isMentionEnabled]);
-    // #Mention | Detect mentioning user nickname
-    var useMentionInputDetection = React.useCallback(function () {
-        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 === 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;
-            var _loop_1 = function (index) {
-                var currentNode = textField.childNodes[index];
-                if (currentNode.nodeType === _const$1.NodeTypes.TextNode) {
-                    /* text node */
-                    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;
-                    }
-                    else {
-                        var charLastIndex = textContent.lastIndexOf(_const.USER_MENTION_TEMP_CHAR);
-                        for (var i = charLastIndex - 1; i > -1; i -= 1) {
-                            if (textContent[i] === _const.USER_MENTION_TEMP_CHAR) {
-                                charLastIndex = i;
-                            }
-                            else {
-                                break;
-                            }
-                        }
-                        if (charLastIndex > -1) {
-                            textStack = textContent;
-                            startNodeIndex = index;
-                            startOffsetIndex = charLastIndex;
-                        }
-                    }
-                }
-                else {
-                    /* other nodes */
-                    textStack = '';
-                    startNodeIndex = null;
-                    startOffsetIndex = null;
-                }
-                if (currentNode === selection.anchorNode) {
-                    /**
-                     * targetString could be ''
-                     * startNodeIndex and startOffsetIndex could be null
-                     */
-                    var targetString = textStack && startOffsetIndex !== null ? textStack.slice(startOffsetIndex) : ''; // include template character
-                    setTargetStringInfo({
-                        targetString: targetString,
-                        startNodeIndex: startNodeIndex,
-                        startOffsetIndex: startOffsetIndex,
-                        endNodeIndex: index,
-                        endOffsetIndex: selection.anchorOffset,
-                    });
-                    onMentionStringChange(targetString);
-                    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]);
-    var sendMessage = function () {
-        var _a, _b;
-        try {
-            var textField_2 = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
-            if (!isEdit && textField_2) {
-                var _c = ui_MessageInput_hooks_usePaste.extractTextAndMentions(textField_2.childNodes), messageText = _c.messageText, mentionTemplate = _c.mentionTemplate, isMentionedMessage = _c.isMentionedMessage;
-                if (messageText.trim().length === 0)
-                    return;
-                var params = { message: messageText, mentionTemplate: mentionTemplate };
-                if (!isMentionedMessage)
-                    params.mentionTemplate = '';
-                onSendMessage(params);
-                resetInput(internalRef);
-                /**
-                 * Note: contentEditable does not work as expected in mobile WebKit (Safari).
-                 * @see https://github.com/sendbird/sendbird-uikit-react/pull/1108
-                 */
-                if (browser.isMobileIOS(navigator.userAgent)) {
-                    if (ghostInputRef.current)
-                        ghostInputRef.current.focus();
-                    requestAnimationFrame(function () { return textField_2.focus(); });
-                }
-                else {
-                    // important: keeps the keyboard open -> must add test on refactor
-                    textField_2.focus();
-                }
-                setIsInput(false);
-            }
-        }
-        catch (error) {
-            (_b = (_a = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.message) === null || _a === void 0 ? void 0 : _a.onSendMessageFailed) === null || _b === void 0 ? void 0 : _b.call(_a, message, error);
-        }
-    };
-    var isEditDisabled = !hasTextContentWithoutZeroWidthSpace(internalRef === null || internalRef === void 0 ? void 0 : internalRef.current);
-    var editMessage = function () {
-        var _a, _b;
-        try {
-            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 && textField) {
-                var _c = ui_MessageInput_hooks_usePaste.extractTextAndMentions(textField.childNodes), messageText = _c.messageText, mentionTemplate = _c.mentionTemplate;
-                if (messageText.trim().length === 0)
-                    return;
-                var params = { messageId: messageId, message: messageText, mentionTemplate: mentionTemplate };
-                onUpdateMessage(params);
-                resetInput(internalRef);
-            }
-        }
-        catch (error) {
-            (_b = (_a = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.message) === null || _a === void 0 ? void 0 : _a.onUpdateMessageFailed) === null || _b === void 0 ? void 0 : _b.call(_a, message, error);
-        }
-    };
-    var onPaste = ui_MessageInput_hooks_usePaste.usePaste({
-        ref: internalRef,
-        setMentionedUsers: setMentionedUsers,
-        channel: channel,
-        setIsInput: setIsInput,
-    });
-    var uploadFile = function (event) {
-        var _a, _b;
-        var files = event.currentTarget.files;
-        try {
-            if (files) {
-                onFileUpload(Array.from(files));
-            }
-        }
-        catch (error) {
-            (_b = (_a = eventHandlers === null || eventHandlers === void 0 ? void 0 : eventHandlers.message) === null || _a === void 0 ? void 0 : _a.onFileUploadFailed) === null || _b === void 0 ? void 0 : _b.call(_a, error);
-        }
-        finally {
-            event.target.value = '';
-        }
-    };
-    var adjustScrollToCaret = function () {
-        var _a;
-        var inputRef = internalRef;
-        var selection = window.getSelection();
-        if (!selection || selection.rangeCount === 0)
-            return;
-        // Get the last range (caret or selected text position) from the selection
-        var range = selection.getRangeAt(selection.rangeCount - 1);
-        var rect = range.getBoundingClientRect();
-        var container = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!container || !inputRef.current)
-            return;
-        // If the caret (or selection) is below the visible container area, scroll down
-        if (rect.bottom > container.bottom) {
-            var scrollAmount = Math.min(rect.bottom - container.bottom, // Calculate how much we need to scroll
-            inputRef.current.scrollHeight - inputRef.current.clientHeight);
-            inputRef.current.scrollTop += scrollAmount; // Adjust the scroll position downward
-        }
-        // If the caret (or selection) is above the visible container area, scroll up
-        else if (rect.top < container.top) {
-            var scrollAmount = Math.min(container.top - rect.top, // Calculate how much we need to scroll
-            inputRef.current.scrollTop);
-            inputRef.current.scrollTop -= scrollAmount; // Adjust the scroll position upward
-        }
-    };
-    return (React__default.default.createElement("form", { className: utils.classnames.apply(void 0, _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), false), [isEdit && 'sendbird-message-input__edit',
-            disabled && 'sendbird-message-input-form__disabled'], false)) },
-        React__default.default.createElement("div", { className: utils.classnames('sendbird-message-input', disabled && 'sendbird-message-input__disabled'), "data-testid": "sendbird-message-input" },
-            browser.isMobileIOS(navigator.userAgent) && (React__default.default.createElement("input", { id: 'ghost-input-reset-ime-cjk', ref: ghostInputRef, style: { opacity: 0, padding: 0, margin: 0, height: 0, border: 'none', position: 'absolute', top: -9999 }, defaultValue: '_' })),
-            React__default.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: internalRef, 
-                // @ts-ignore
-                disabled: disabled, maxLength: maxLength, onKeyDown: function (e) {
-                    var _a, _b, _c;
-                    var preventEvent = onKeyDown(e);
-                    if (preventEvent) {
-                        e.preventDefault();
-                    }
-                    else {
-                        if (!e.shiftKey
-                            && e.key === _const$1.MessageInputKeys.Enter
-                            && !isMobile
-                            && hasTextContentWithoutZeroWidthSpace(internalRef === null || internalRef === void 0 ? void 0 : internalRef.current)
-                            && ((_a = e === null || e === void 0 ? void 0 : e.nativeEvent) === null || _a === void 0 ? void 0 : _a.isComposing) !== true
-                        /**
-                         * NOTE: What isComposing does?
-                         * Check if the user has finished composing characters
-                         * (e.g., for languages like Korean, Japanese, where characters are composed from multiple keystrokes)
-                         * Prevents executing the code while the user is still composing characters.
-                         */
-                        ) {
-                            e.preventDefault();
-                            sendMessage();
-                        }
-                        if (e.key === _const$1.MessageInputKeys.Backspace
-                            && ((_c = (_b = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current) === null || _b === void 0 ? void 0 : _b.childNodes) === null || _c === void 0 ? void 0 : _c.length) === 2
-                            && !internalRef.current.childNodes[0].textContent
-                            && internalRef.current.childNodes[1].nodeType === _const$1.NodeTypes.ElementNode) {
-                            internalRef.current.removeChild(internalRef.current.childNodes[1]);
-                        }
-                    }
-                }, onKeyUp: function (e) {
-                    var preventEvent = onKeyUp(e);
-                    if (preventEvent) {
-                        e.preventDefault();
-                    }
-                    else {
-                        useMentionInputDetection();
-                    }
-                }, onClick: function () {
-                    useMentionInputDetection();
-                }, onInput: function () {
-                    onStartTyping();
-                    setIsInput(hasTextContentWithoutZeroWidthSpace(internalRef === null || internalRef === void 0 ? void 0 : internalRef.current));
-                    useMentionedLabelDetection();
-                }, onPaste: function (e) {
-                    onPaste(e);
-                    setTimeout(adjustScrollToCaret);
-                } }),
-            getTextContentWithoutZeroWidthSpace(internalRef === null || internalRef === void 0 ? void 0 : internalRef.current).length === 0 && (React__default.default.createElement(ui_Label.Label, { className: "sendbird-message-input--placeholder", type: ui_Label.LabelTypography.BODY_1, color: disabled ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_3 }, placeholder || stringSet.MESSAGE_INPUT__PLACE_HOLDER)),
-            !isEdit && isInput && (React__default.default.createElement(ui_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.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SEND, fillColor: disabled ? ui_Icon.IconColors.ON_BACKGROUND_4 : ui_Icon.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.default.createElement(ui_IconButton, { className: utils.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);
-                        } },
-                        React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.ATTACH, fillColor: disabled ? ui_Icon.IconColors.ON_BACKGROUND_4 : ui_Icon.IconColors.CONTENT_INVERSE, width: "20px", height: "20px" }),
-                        React__default.default.createElement("input", { className: "sendbird-message-input--attach-input", type: "file", ref: fileInputRef, 
-                            // It will affect to <Channel /> and <Thread />
-                            onChange: function (event) { return uploadFile(event); }, accept: index$1.getMimeTypesUIKitAccepts(acceptableMimeTypes), multiple: isSelectingMultipleFilesEnabled && ui_MessageInput_hooks_usePaste.isChannelTypeSupportsMultipleFilesMessage(channel) }))))),
-            isVoiceMessageEnabled && !isEdit && !isInput && (React__default.default.createElement(ui_IconButton, { className: "sendbird-message-input--voice-message", width: "32px", height: "32px", onClick: onVoiceMessageIconClick }, (renderVoiceMessageIcon === null || renderVoiceMessageIcon === void 0 ? void 0 : renderVoiceMessageIcon()) || (React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.AUDIO_ON_LINED, fillColor: disabled ? ui_Icon.IconColors.ON_BACKGROUND_4 : ui_Icon.IconColors.CONTENT_INVERSE, width: "20px", height: "20px" }))))),
-        isEdit && (React__default.default.createElement("div", { className: "sendbird-message-input--edit-action", "data-testid": "sendbird-message-input--edit-action" },
-            React__default.default.createElement(ui_Button.default, { className: "sendbird-message-input--edit-action__cancel", type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: onCancelEdit }, stringSet.BUTTON__CANCEL),
-            React__default.default.createElement(ui_Button.default, { className: "sendbird-message-input--edit-action__save", type: ui_Button.ButtonTypes.PRIMARY, size: ui_Button.ButtonSizes.SMALL, disabled: isEditDisabled, onClick: function () { return editMessage(); } }, stringSet.BUTTON__SAVE)))));
-});
-
-module.exports = MessageInput;
+module.exports = ui_MessageInput.MessageInput;
 //# sourceMappingURL=MessageInput.js.map

package/cjs/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/cjs/ui/MessageItemMenu.js

@@ -2,30 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _tslib = require('../chunks/bundle-C5mxhXoI.js');
+var _tslib = require('../chunks/bundle-BX9JpkVP.js');
 var React = require('react');
-var ui_ContextMenu = require('../chunks/bundle-Bfgn3ngi.js');
+var ui_ContextMenu = require('../chunks/bundle-Bz064A5D.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
-var index = require('../chunks/bundle-DbmnzR7q.js');
-var LocalizationContext = require('../chunks/bundle-BiH38g8Z.js');
-var types = require('../chunks/bundle-CN5usDFs.js');
-var utils = require('../chunks/bundle-DVTKYwk8.js');
+var index = require('../chunks/bundle-BasmAwwJ.js');
+var LocalizationContext = require('../chunks/bundle-JZ1A5dHC.js');
+var types = require('../chunks/bundle-CCha8T6e.js');
+var utils = require('../chunks/bundle-DoUok50d.js');
 require('react-dom');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-DMroWEST.js');
-require('../chunks/bundle-BbAqlLCc.js');
-require('../chunks/bundle-BmRh3iEN.js');
-require('../chunks/bundle-Ct1kTyi8.js');
-require('../chunks/bundle-DSwCeEJP.js');
+require('../chunks/bundle-Qchcdxzl.js');
+require('../chunks/bundle-CSUhrMB1.js');
+require('../chunks/bundle-DcBTt6H_.js');
+require('../chunks/bundle-DG9KyMWt.js');
+require('../chunks/bundle-BmdLztHu.js');
 require('@sendbird/chat/groupChannel');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-Ccd-6PYk.js');
-require('../chunks/bundle-CtVNyiwe.js');
-require('../chunks/bundle-BnRVJSVA.js');
-require('../chunks/bundle-DmDbvIgG.js');
+require('../chunks/bundle-CZryxVSd.js');
+require('../chunks/bundle-Dmbgwti3.js');
+require('../chunks/bundle-BtfCkBUa.js');
+require('../chunks/bundle-CILoXVWP.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 

package/cjs/ui/MessageItemReactionMenu.js

@@ -3,32 +3,32 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ui_ContextMenu = require('../chunks/bundle-Bfgn3ngi.js');
+var ui_ContextMenu = require('../chunks/bundle-Bz064A5D.js');
 var ui_Icon = require('./Icon.js');
 var ui_IconButton = require('./IconButton.js');
 var ui_ImageRenderer = require('./ImageRenderer.js');
 var ui_ReactionButton = require('./ReactionButton.js');
-var index = require('../chunks/bundle-DbmnzR7q.js');
-require('../chunks/bundle-C5mxhXoI.js');
+var index = require('../chunks/bundle-BasmAwwJ.js');
+require('../chunks/bundle-BX9JpkVP.js');
 require('react-dom');
-require('../chunks/bundle-DVTKYwk8.js');
+require('../chunks/bundle-DoUok50d.js');
 require('@sendbird/chat');
 require('@sendbird/chat/openChannel');
 require('./SortByRow.js');
-require('../chunks/bundle-DMroWEST.js');
-require('../chunks/bundle-BbAqlLCc.js');
-require('../chunks/bundle-BmRh3iEN.js');
-require('../chunks/bundle-BiH38g8Z.js');
-require('../chunks/bundle-DmDbvIgG.js');
-require('../chunks/bundle-Ct1kTyi8.js');
-require('../chunks/bundle-DSwCeEJP.js');
+require('../chunks/bundle-Qchcdxzl.js');
+require('../chunks/bundle-CSUhrMB1.js');
+require('../chunks/bundle-DcBTt6H_.js');
+require('../chunks/bundle-JZ1A5dHC.js');
+require('../chunks/bundle-CILoXVWP.js');
+require('../chunks/bundle-DG9KyMWt.js');
+require('../chunks/bundle-BmdLztHu.js');
 require('@sendbird/chat/groupChannel');
-require('../chunks/bundle-PEx1sYTj.js');
-require('../chunks/bundle-Bk2QOCY1.js');
+require('../chunks/bundle-CwZTt5Ya.js');
+require('../chunks/bundle-DLPt543m.js');
 require('../utils/message/getOutgoingMessageState.js');
-require('../chunks/bundle-Ccd-6PYk.js');
-require('../chunks/bundle-CtVNyiwe.js');
-require('../chunks/bundle-BnRVJSVA.js');
+require('../chunks/bundle-CZryxVSd.js');
+require('../chunks/bundle-Dmbgwti3.js');
+require('../chunks/bundle-BtfCkBUa.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }