@sendbird/uikit-react 3.9.1-rc-2 → 3.9.1

package/dist/ui/MessageInput.js

@@ -1,462 +0,0 @@
-import { _ as __assign, a as __spreadArray } from '../chunks/bundle-qHAQziqO.js';
-import React__default, { useRef, useState, useMemo, useEffect, useCallback } from 'react';
-import { N as NodeTypes, M as MessageInputKeys, a as NodeNames } from '../chunks/bundle-7JfqNhKH.js';
-import { U as USER_MENTION_TEMP_CHAR } from '../chunks/bundle-e_9mGqwg.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 } from '../chunks/bundle-5q71Q0qR.js';
-import Icon, { IconTypes, IconColors } from './Icon.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../chunks/bundle-a2JLFpDM.js';
-import { u as useLocalization } from '../chunks/bundle--Ejuxki1.js';
-import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { D as arrayEqual, n as getClassName, E as getMimeTypesUIKitAccepts } from '../chunks/bundle-gkOxTHma.js';
-import { t as tokenizeMessage, T as TOKEN_TYPES, U as USER_MENTION_PREFIX } from '../chunks/bundle-uDaAbuPs.js';
-import { K } from '../chunks/bundle-x4ZuQz8S.js';
-import 'dompurify';
-import '../chunks/bundle-xTeLtbXU.js';
-import '../chunks/bundle-saiSPI85.js';
-import '../chunks/bundle-MPYPncdD.js';
-import '../chunks/bundle-lnteErrw.js';
-import '../chunks/bundle-MF8abnx2.js';
-import '../chunks/bundle-RrmxRjer.js';
-import '../withSendbird.js';
-import '../utils/message/getOutgoingMessageState.js';
-
-/**
- * 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 = 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 LINE_HEIGHT = 76;
-var noop = function () {
-    return null;
-};
-var displayCaret = function (element, position) {
-    var range = document.createRange();
-    var sel = window.getSelection();
-    range.setStart(element.childNodes[0], position);
-    range.collapse(true);
-    sel.removeAllRanges();
-    sel.addRange(range);
-    element.focus();
-};
-var resetInput = function (ref) {
-    try {
-        ref.current.innerHTML = '';
-    }
-    catch (_a) {
-        //
-    }
-};
-var initialTargetStringInfo = {
-    targetString: '',
-    startNodeIndex: null,
-    startOffsetIndex: null,
-    endNodeIndex: null,
-    endOffsetIndex: null,
-};
-var MessageInput = React__default.forwardRef(function (props, externalRef) {
-    var _a, _b, _c, _d, _e;
-    var channel = props.channel, _f = props.className, className = _f === void 0 ? '' : _f, _g = props.messageFieldId, messageFieldId = _g === void 0 ? '' : _g, _h = props.isEdit, isEdit = _h === void 0 ? false : _h, _j = props.isMentionEnabled, isMentionEnabled = _j === void 0 ? false : _j, _k = props.isVoiceMessageEnabled, isVoiceMessageEnabled = _k === void 0 ? true : _k, _l = props.isSelectingMultipleFilesEnabled, isSelectingMultipleFilesEnabled = _l === void 0 ? false : _l, _m = props.disabled, disabled = _m === void 0 ? false : _m, _o = props.message, message = _o === void 0 ? null : _o, _p = props.placeholder, placeholder = _p === void 0 ? '' : _p, _q = props.maxLength, maxLength = _q === void 0 ? 5000 : _q, _r = props.onFileUpload, onFileUpload = _r === void 0 ? noop : _r, _s = props.onSendMessage, onSendMessage = _s === void 0 ? noop : _s, _t = props.onUpdateMessage, onUpdateMessage = _t === void 0 ? noop : _t, _u = props.onCancelEdit, onCancelEdit = _u === void 0 ? noop : _u, _v = props.onStartTyping, onStartTyping = _v === void 0 ? noop : _v, _w = props.channelUrl, channelUrl = _w === void 0 ? '' : _w, _x = props.mentionSelectedUser, mentionSelectedUser = _x === void 0 ? null : _x, _y = props.onUserMentioned, onUserMentioned = _y === void 0 ? noop : _y, _z = props.onMentionStringChange, onMentionStringChange = _z === void 0 ? noop : _z, _0 = props.onMentionedUserIdsUpdated, onMentionedUserIdsUpdated = _0 === void 0 ? noop : _0, _1 = props.onVoiceMessageIconClick, onVoiceMessageIconClick = _1 === void 0 ? noop : _1, _2 = props.onKeyUp, onKeyUp = _2 === void 0 ? noop : _2, _3 = props.onKeyDown, onKeyDown = _3 === void 0 ? noop : _3, _4 = props.renderFileUploadIcon, renderFileUploadIcon = _4 === void 0 ? noop : _4, _5 = props.renderVoiceMessageIcon, renderVoiceMessageIcon = _5 === void 0 ? noop : _5, _6 = props.renderSendMessageIcon, renderSendMessageIcon = _6 === void 0 ? noop : _6, _7 = props.setMentionedUsers, setMentionedUsers = _7 === void 0 ? noop : _7, _8 = props.acceptableMimeTypes, acceptableMimeTypes = _8 === void 0 ? null : _8;
-    var internalRef = (externalRef && 'current' in externalRef) ? externalRef : null;
-    var textFieldId = messageFieldId || TEXT_FIELD_ID;
-    var stringSet = useLocalization().stringSet;
-    var config = useSendbirdStateContext().config;
-    var isFileUploadEnabled = checkIfFileUploadEnabled({
-        channel: channel,
-        config: config,
-    });
-    var fileInputRef = useRef(null);
-    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];
-    var setHeight = useMemo(function () { return function () {
-        try {
-            var elem = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
-            var MAX_HEIGHT = window.document.body.offsetHeight * 0.6;
-            if (elem && elem.scrollHeight >= LINE_HEIGHT) {
-                if (MAX_HEIGHT < elem.scrollHeight) {
-                    elem.style.height = 'auto';
-                    elem.style.height = "".concat(MAX_HEIGHT, "px");
-                }
-                else {
-                    elem.style.height = 'auto';
-                    elem.style.height = "".concat(elem.scrollHeight, "px");
-                }
-            }
-            else {
-                elem.style.height = '';
-            }
-        }
-        catch (error) {
-            // error
-        }
-    }; }, []);
-    // #Edit mode
-    // for easilly initialize input value from outside, but
-    // 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);
-        }
-        catch (_b) {
-            //
-        }
-        setMentionedUserIds([]);
-        setIsInput(((_a = textField === null || textField === void 0 ? void 0 : textField.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0);
-        setHeight();
-    }, [initialValue]);
-    // #Mention | Clear input value when channel changes
-    useEffect(function () {
-        if (!isEdit) {
-            setIsInput(false);
-            resetInput(internalRef);
-        }
-    }, [channelUrl]);
-    // #Mention & #Edit | Fill message input values
-    useEffect(function () {
-        var _a, _b, _c;
-        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) {
-                /* mention enabled */
-                var _d = message.mentionedUsers, mentionedUsers_1 = _d === void 0 ? [] : _d;
-                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(' ');
-            }
-            else {
-                /* mention disabled */
-                try {
-                    textField.innerHTML = sanitizeString(message === null || message === void 0 ? void 0 : message.message);
-                }
-                catch (_e) {
-                    //
-                }
-                setMentionedUserIds([]);
-            }
-            setIsInput(((_c = textField === null || textField === void 0 ? void 0 : textField.textContent) === null || _c === void 0 ? void 0 : _c.trim().length) > 0);
-            setHeight();
-        }
-    }, [isEdit, message]);
-    // #Mention | Detect MentionedLabel modified
-    var useMentionedLabelDetection = useCallback(function () {
-        var _a;
-        var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
-        if (isMentionEnabled) {
-            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 (!arrayEqual(mentionedUserIds, newMentionedUserIds) || newMentionedUserIds.length === 0) {
-                onMentionedUserIdsUpdated(newMentionedUserIds);
-                setMentionedUserIds(newMentionedUserIds);
-            }
-        }
-        setIsInput(((_a = textField.textContent) === null || _a === void 0 ? void 0 : _a.trim().length) > 0);
-    }, [targetStringInfo, isMentionEnabled]);
-    // #Mention | Replace selected user nickname to the MentionedUserLabel
-    useEffect(function () {
-        var _a, _b;
-        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) {
-                // 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 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),
-                });
-                var div = document.createElement('div');
-                div.innerHTML = mentionLabel;
-                var newNodes = __spreadArray(__spreadArray(__spreadArray([], childNodes.slice(0, startNodeIndex), true), [
-                    frontTextNode,
-                    div.childNodes[0],
-                    backTextNode
-                ], false), childNodes.slice(endNodeIndex + 1), true);
-                textField_1.innerHTML = '';
-                newNodes.forEach(function (newNode) {
-                    textField_1.appendChild(newNode);
-                });
-                onUserMentioned(mentionSelectedUser);
-                if (window.getSelection || document.getSelection) {
-                    // set caret postion
-                    var selection = window.getSelection() || document.getSelection();
-                    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);
-                    textField_1.focus();
-                }
-                setTargetStringInfo(__assign({}, initialTargetStringInfo));
-                setHeight();
-                useMentionedLabelDetection();
-            }
-        }
-    }, [mentionSelectedUser, isMentionEnabled]);
-    // #Mention | Detect mentioning user nickname
-    var useMentionInputDetection = 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.anchorNode === textField) {
-            onMentionStringChange('');
-        }
-        if (isMentionEnabled
-            && 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 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) || '';
-                    if (textStack.length > 0) {
-                        textStack += textContent;
-                    }
-                    else {
-                        var charLastIndex = textContent.lastIndexOf(USER_MENTION_TEMP_CHAR);
-                        for (var i = charLastIndex - 1; i > -1; i -= 1) {
-                            if (textContent[i] === 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 ? textStack.slice(startOffsetIndex) : ''; // include template character
-                    setTargetStringInfo({
-                        targetString: targetString,
-                        startNodeIndex: startNodeIndex,
-                        startOffsetIndex: startOffsetIndex,
-                        endNodeIndex: index,
-                        endOffsetIndex: selection.anchorOffset,
-                    });
-                    onMentionStringChange(targetString);
-                    return;
-                }
-            }
-        }
-    }, [isMentionEnabled]);
-    var sendMessage = function () {
-        var textField = internalRef === null || internalRef === void 0 ? void 0 : internalRef.current;
-        if (!isEdit && (textField === null || textField === void 0 ? void 0 : textField.textContent)) {
-            var messageText_1 = '';
-            var mentionTemplate_1 = '';
-            textField.childNodes.forEach(function (node) {
-                if (node.nodeType === NodeTypes.ElementNode && node.nodeName === NodeNames.Span) {
-                    // @ts-ignore
-                    var innerText = node.innerText, _a = node.dataset, dataset = _a === void 0 ? {} : _a;
-                    var _b = dataset.userid, userid = _b === void 0 ? '' : _b;
-                    messageText_1 += innerText;
-                    mentionTemplate_1 += "".concat(USER_MENTION_TEMP_CHAR, "{").concat(userid, "}");
-                }
-                else if (node.nodeType === NodeTypes.ElementNode && node.nodeName === NodeNames.Br) {
-                    messageText_1 += '\n';
-                    mentionTemplate_1 += '\n';
-                }
-                else if ((node === null || node === void 0 ? void 0 : node.nodeType) === NodeTypes.ElementNode && (node === null || node === void 0 ? void 0 : node.nodeName) === NodeNames.Div) {
-                    // handles newline in safari
-                    var _c = node.textContent, textContent = _c === void 0 ? '' : _c;
-                    messageText_1 += "\n".concat(textContent);
-                    mentionTemplate_1 += "\n".concat(textContent);
-                }
-                else {
-                    // other nodes including text node
-                    var _d = node.textContent, textContent = _d === void 0 ? '' : _d;
-                    messageText_1 += textContent;
-                    mentionTemplate_1 += textContent;
-                }
-            });
-            var params = { message: messageText_1, mentionTemplate: mentionTemplate_1 };
-            onSendMessage(params);
-            resetInput(internalRef);
-            // important: keeps the keyboard open -> must add test on refactor
-            textField.focus();
-            setIsInput(false);
-            setHeight();
-        }
-    };
-    var isEditDisabled = !((_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());
-    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) {
-            var messageText_2 = '';
-            var mentionTemplate_2 = '';
-            textField.childNodes.forEach(function (node) {
-                if (node.nodeType === NodeTypes.ElementNode && node.nodeName === NodeNames.Span) {
-                    // @ts-ignore
-                    var innerText = node.innerText, _a = node.dataset, dataset = _a === void 0 ? {} : _a;
-                    var _b = dataset.userid, userid = _b === void 0 ? '' : _b;
-                    messageText_2 += innerText;
-                    mentionTemplate_2 += "".concat(USER_MENTION_TEMP_CHAR, "{").concat(userid, "}");
-                    messageText_2 += '\n';
-                    mentionTemplate_2 += '\n';
-                }
-                else {
-                    // other nodes including text node
-                    var _c = node.textContent, textContent = _c === void 0 ? '' : _c;
-                    messageText_2 += textContent;
-                    mentionTemplate_2 += textContent;
-                }
-            });
-            var params = { messageId: messageId, message: messageText_2, mentionTemplate: mentionTemplate_2 };
-            onUpdateMessage(params);
-            resetInput(internalRef);
-        }
-    };
-    var onPaste = usePaste({
-        ref: internalRef,
-        setMentionedUsers: setMentionedUsers,
-        channel: channel,
-        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' : '']) },
-            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 preventEvent = onKeyDown(e);
-                    if (preventEvent) {
-                        e.preventDefault();
-                    }
-                    else {
-                        if (!e.shiftKey
-                            && e.key === MessageInputKeys.Enter
-                            && ((_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) {
-                            e.preventDefault();
-                            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]);
-                        }
-                    }
-                }, onKeyUp: function (e) {
-                    var preventEvent = onKeyUp(e);
-                    if (preventEvent) {
-                        e.preventDefault();
-                    }
-                    else {
-                        useMentionInputDetection();
-                    }
-                }, onClick: function () {
-                    useMentionInputDetection();
-                }, onInput: function () {
-                    var _a, _b;
-                    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);
-                    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
-                && ((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 () {
-                            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.createElement(Icon, { type: IconTypes.ATTACH, fillColor: disabled ? IconColors.ON_BACKGROUND_4 : IconColors.CONTENT_INVERSE, width: "20px", height: "20px" }),
-                        React__default.createElement("input", { className: "sendbird-message-input--attach-input", type: "file", ref: fileInputRef, 
-                            // 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));
-                                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" },
-            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)))));
-});
-
-export { MessageInput as default };
-//# sourceMappingURL=MessageInput.js.map

package/dist/ui/MessageItemMenu.js

@@ -1,126 +0,0 @@
-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 { j as isUserMessage, k as isSentMessage, l as isFailedMessage, m as isPendingMessage, n as getClassName, o as copyToClipboard } from '../chunks/bundle-gkOxTHma.js';
-import { L as LocalizationContext } from '../chunks/bundle--Ejuxki1.js';
-import { R as Role } from '../chunks/bundle-gXxnKnlk.js';
-import { u as useChannelContext } from '../chunks/bundle-UApGrG-m.js';
-import '../chunks/bundle-qHAQziqO.js';
-import 'react-dom';
-import './SortByRow.js';
-import '../chunks/bundle-6BNmQ0LM.js';
-import '../chunks/bundle-a2JLFpDM.js';
-import '../chunks/bundle-MF8abnx2.js';
-import '../chunks/bundle-lnteErrw.js';
-import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-x4ZuQz8S.js';
-import '../chunks/bundle-RrmxRjer.js';
-import '../chunks/bundle-M4oxyPE-.js';
-import '../useSendbirdStateContext.js';
-import '../withSendbird.js';
-import '../chunks/bundle-e_9mGqwg.js';
-import '../chunks/bundle-GWEiVUz_.js';
-import '../chunks/bundle-6KxAQ3DO.js';
-import '@sendbird/chat/message';
-import '../chunks/bundle-K753WYIS.js';
-import '../chunks/bundle-qufSYree.js';
-import '@sendbird/chat/groupChannel';
-import '../Channel/hooks/useInitialMessagesFetch.js';
-import '../chunks/bundle-rdL93Rxj.js';
-import '../chunks/bundle-Vp2hvuBO.js';
-import '../chunks/bundle-GxF20zCF.js';
-import '../chunks/bundle-CUfPglBq.js';
-
-function MessageMenu(_a) {
-    var _b;
-    var className = _a.className, message = _a.message, channel = _a.channel, _c = _a.isByMe, isByMe = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, replyType = _a.replyType, _e = _a.disableDeleteMessage, disableDeleteMessage = _e === void 0 ? null : _e, showEdit = _a.showEdit, showRemove = _a.showRemove, resendMessage = _a.resendMessage, setQuoteMessage = _a.setQuoteMessage, setSupposedHover = _a.setSupposedHover, onReplyInThread = _a.onReplyInThread, _f = _a.onMoveToParentMessage, onMoveToParentMessage = _f === void 0 ? null : _f;
-    var stringSet = useContext(LocalizationContext).stringSet;
-    var triggerRef = useRef(null);
-    var containerRef = useRef(null);
-    var channelStore = useChannelContext();
-    var showMenuItemCopy = isUserMessage(message);
-    var showMenuItemEdit = (!(channel === null || channel === void 0 ? void 0 : channel.isEphemeral) && isUserMessage(message) && isSentMessage(message) && isByMe);
-    var showMenuItemResend = (isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe);
-    var showMenuItemDelete = !(channel === null || channel === void 0 ? void 0 : channel.isEphemeral) && !isPendingMessage(message) && isByMe;
-    var showMenuItemOpenInChannel = onMoveToParentMessage !== null;
-    /**
-     * TODO: Manage timing issue
-     * User delete pending message -> Sending message success
-     */
-    var isReplyTypeEnabled = !isFailedMessage(message)
-        && !isPendingMessage(message)
-        && (((_b = channel === null || channel === void 0 ? void 0 : channel.isGroupChannel) === null || _b === void 0 ? void 0 : _b.call(channel))
-            && !(channel === null || channel === void 0 ? void 0 : channel.isEphemeral)
-            && (((channel === null || channel === void 0 ? void 0 : channel.isBroadcast) && (channel === null || channel === void 0 ? void 0 : channel.myRole) === Role.OPERATOR)
-                || !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast)));
-    var showMenuItemReply = isReplyTypeEnabled && replyType === 'QUOTE_REPLY';
-    var showMenuItemThread = isReplyTypeEnabled && replyType === 'THREAD' && !(message === null || message === void 0 ? void 0 : message.parentMessageId) && onReplyInThread;
-    if (!(showMenuItemCopy
-        || showMenuItemReply
-        || showMenuItemThread
-        || showMenuItemOpenInChannel
-        || showMenuItemEdit
-        || showMenuItemResend
-        || showMenuItemDelete)) {
-        return null;
-    }
-    return (React__default.createElement("div", { className: getClassName([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);
-                }, onBlur: function () {
-                    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;
-                var closeDropdown = function () {
-                    close();
-                    setSupposedHover(false);
-                };
-                return (React__default.createElement(MenuItems, { className: "sendbird-message-item-menu__list", parentRef: triggerRef, parentContainRef: containerRef, closeDropdown: closeDropdown, openLeft: isByMe },
-                    showMenuItemCopy && (React__default.createElement(MenuItem, { className: "sendbird-message-item-menu__list__menu-item menu-item-copy", onClick: function () {
-                            copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
-                            closeDropdown();
-                        }, dataSbId: "ui_message_item_menu_copy" }, stringSet.MESSAGE_MENU__COPY)),
-                    showMenuItemReply && (React__default.createElement(MenuItem, { className: "sendbird-message-item-menu__list__menu-item menu-item-reply", onClick: function () {
-                            setQuoteMessage(message);
-                            closeDropdown();
-                        }, disable: (message === null || message === void 0 ? void 0 : message.parentMessageId) > 0, dataSbId: "ui_message_item_menu_reply" }, stringSet.MESSAGE_MENU__REPLY)),
-                    showMenuItemThread && (React__default.createElement(MenuItem, { className: "sendbird-message-item-menu__list__menu-item menu-item-thread", onClick: function () {
-                            onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({ message: message });
-                            closeDropdown();
-                        }, dataSbId: "ui_message_item_menu_thread" }, stringSet.MESSAGE_MENU__THREAD)),
-                    showMenuItemOpenInChannel && (React__default.createElement(MenuItem, { className: "sendbird-message-item-menu__list__menu-item menu-item-open-channel", onClick: function () {
-                            onMoveToParentMessage === null || onMoveToParentMessage === void 0 ? void 0 : onMoveToParentMessage();
-                            closeDropdown();
-                        }, dataSbId: "ui_message_item_menu_open_in_channel" }, stringSet.MESSAGE_MENU__OPEN_IN_CHANNEL)),
-                    showMenuItemEdit && (React__default.createElement(MenuItem, { className: "sendbird-message-item-menu__list__menu-item menu-item-edit", onClick: function () {
-                            if (!disabled) {
-                                showEdit(true);
-                                closeDropdown();
-                            }
-                        }, dataSbId: "ui_message_item_menu_edit" }, stringSet.MESSAGE_MENU__EDIT)),
-                    showMenuItemResend && (React__default.createElement(MenuItem, { className: "sendbird-message-item-menu__list__menu-item menu-item-resend", onClick: function () {
-                            if (!disabled) {
-                                resendMessage(message);
-                                closeDropdown();
-                            }
-                        }, dataSbId: "ui_message_item_menu_resend" }, stringSet.MESSAGE_MENU__RESEND)),
-                    showMenuItemDelete && (React__default.createElement(MenuItem, { className: "sendbird-message-item-menu__list__menu-item menu-item-delete", onClick: function () {
-                            var _a;
-                            if (isFailedMessage(message)) {
-                                (_a = channelStore === null || channelStore === void 0 ? void 0 : channelStore.deleteMessage) === null || _a === void 0 ? void 0 : _a.call(channelStore, message);
-                            }
-                            else if (!disabled) {
-                                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, dataSbId: "ui_message_item_menu_delete" }, stringSet.MESSAGE_MENU__DELETE))));
-            } })));
-}
-
-export { MessageMenu, MessageMenu as default };
-//# sourceMappingURL=MessageItemMenu.js.map

package/dist/ui/MessageItemReactionMenu.js

@@ -1,53 +0,0 @@
-import React__default, { useRef } from 'react';
-import ContextMenu, { EmojiListItems } from './ContextMenu.js';
-import Icon, { IconTypes, IconColors } from './Icon.js';
-import IconButton from './IconButton.js';
-import ImageRenderer from './ImageRenderer.js';
-import ReactionButton from './ReactionButton.js';
-import { m as isPendingMessage, l as isFailedMessage, n as getClassName, p as getEmojiListAll } from '../chunks/bundle-gkOxTHma.js';
-import '../chunks/bundle-qHAQziqO.js';
-import 'react-dom';
-import './SortByRow.js';
-import '../chunks/bundle-6BNmQ0LM.js';
-import '../chunks/bundle-a2JLFpDM.js';
-import '../chunks/bundle-MF8abnx2.js';
-import '../chunks/bundle-lnteErrw.js';
-import '../chunks/bundle-wfnnwHTT.js';
-import '../chunks/bundle-dxJV8pSS.js';
-import '../utils/message/getOutgoingMessageState.js';
-import '../chunks/bundle-x4ZuQz8S.js';
-
-function MessageEmojiMenu(_a) {
-    var className = _a.className, message = _a.message, userId = _a.userId, _b = _a.spaceFromTrigger, spaceFromTrigger = _b === void 0 ? { x: 0, y: 0 } : _b, emojiContainer = _a.emojiContainer, toggleReaction = _a.toggleReaction, setSupposedHover = _a.setSupposedHover;
-    var triggerRef = useRef(null);
-    var containerRef = useRef(null);
-    if (isPendingMessage(message) || isFailedMessage(message)) {
-        return null;
-    }
-    return (React__default.createElement("div", { className: getClassName([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);
-                }, onBlur: function () {
-                    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) {
-                var closeDropdown = function () {
-                    close();
-                    setSupposedHover(false);
-                };
-                return (React__default.createElement(EmojiListItems, { parentRef: triggerRef, parentContainRef: containerRef, closeDropdown: closeDropdown, spaceFromTrigger: spaceFromTrigger }, 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.filter(function (reaction) { return reaction.key === emoji.key; })[0]) === null || _b === void 0 ? void 0 : _b.userIds) === null || _c === void 0 ? void 0 : _c.some(function (reactorId) { return reactorId === userId; });
-                    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) },
-                        React__default.createElement(ImageRenderer, { url: emoji.url, width: "28px", height: "28px", placeHolder: function (style) { return (React__default.createElement("div", { style: style },
-                                React__default.createElement(Icon, { type: IconTypes.QUESTION, fillColor: IconColors.ON_BACKGROUND_3, width: "28px", height: "28px" }))); } })));
-                })));
-            } })));
-}
-
-export { MessageEmojiMenu, MessageEmojiMenu as default };
-//# sourceMappingURL=MessageItemReactionMenu.js.map