@sendbird/uikit-react 3.9.1-rc-0 → 3.9.1-rc-3

package/chunks/bundle-rx40_uS_.js

@@ -0,0 +1,211 @@
+import { useCallback } from 'react';
+import DOMPurify from 'dompurify';
+import { a as __spreadArray } from './bundle-QjlA2FJF.js';
+import { M as MENTION_USER_LABEL_CLASSNAME } from './bundle-UNImIpvz.js';
+import { T as TEXT_MESSAGE_BODY_CLASSNAME } from './bundle-Dc36wM2_.js';
+import { O as OG_MESSAGE_BODY_CLASSNAME } from './bundle-Z7mQGJRw.js';
+
+function renderToString(_a) {
+    var userId = _a.userId, nickname = _a.nickname;
+    // donot change this template, it wont work
+    var el = "<span data-userid=\"".concat(userId, "\" data-sb-mention=\"true\" class=\"").concat(MENTION_USER_LABEL_CLASSNAME, "\">").concat(nickname, "</span>");
+    var purifier = DOMPurify(window);
+    var sanitized_ = purifier.sanitize(el);
+    var token = sanitized_.split(' ');
+    var spanTag = token[0], rest = token.slice(1);
+    // we do this because DOMPurify removes the contenteditable attribute
+    var sanitized = __spreadArray([spanTag, 'contenteditable="false"'], rest, true).join(' ');
+    return sanitized;
+}
+
+var sanitizeString = function (str) {
+    return str === null || str === void 0 ? void 0 : str.replace(/[\u00A0-\u9999<>]/gim, function (i) { return ''.concat('&#', String(i.charCodeAt(0)), ';'); });
+};
+/**
+ * NodeList cannot be used with Array methods
+ * @param {NodeListOf<ChildNode>} childNodes
+ * @returns Array of child nodes
+ */
+var nodeListToArray = function (childNodes) {
+    try {
+        return Array.from(childNodes);
+    }
+    catch (error) {
+        return [];
+    }
+};
+function isChannelTypeSupportsMultipleFilesMessage(channel) {
+    var _a;
+    return channel && ((_a = channel.isGroupChannel) === null || _a === void 0 ? void 0 : _a.call(channel)) && !channel.isBroadcast && !channel.isSuper;
+}
+
+function inserTemplateToDOM(templateList) {
+    var nodes = templateList.map(function (template) {
+        var text = template.text, userId = template.userId;
+        if (userId) {
+            return renderToString({ userId: userId, nickname: text });
+        }
+        return sanitizeString(text);
+    })
+        .join(' ')
+        // add a space at the end of the mention, else cursor/caret wont work
+        .concat(' ');
+    document.execCommand('insertHTML', false, nodes);
+}
+
+var PASTE_NODE = 'sendbird-uikit__paste-node';
+var TEXT_MESSAGE_CLASS = 'sendbird-word';
+var MENTION_CLASS = 'sendbird-word__mention';
+var MENTION_CLASS_IN_INPUT = 'sendbird-mention-user-label';
+var MENTION_CLASS_COMBINED_QUERY = ".".concat(MENTION_CLASS, ", .").concat(MENTION_CLASS_IN_INPUT);
+
+function querySelectorIncludingSelf(master, selector) {
+    var result = __spreadArray([
+        master
+    ], Array.from(master.querySelectorAll(selector)), true).find(function (el) { return el.matches(selector); });
+    return result;
+}
+// Pasted dom node can be OG_MESSAGE or partial message or full message
+// full messsage would have TEXT_MESSAGE_BODY_CLASSNAME and have childNodes
+// partial message would not have TEXT_MESSAGE_BODY_CLASSNAME
+function getLeafNodes(master) {
+    // og message
+    var ogMessage = querySelectorIncludingSelf(master, ".".concat(OG_MESSAGE_BODY_CLASSNAME));
+    if (ogMessage) {
+        return nodeListToArray(ogMessage.childNodes);
+    }
+    var textMessageBody = querySelectorIncludingSelf(master, ".".concat(TEXT_MESSAGE_BODY_CLASSNAME));
+    if (textMessageBody) {
+        return nodeListToArray(textMessageBody.childNodes);
+    }
+    return nodeListToArray(master.childNodes);
+}
+function createPasteNode() {
+    var pasteNode = document.body.querySelector("#".concat(PASTE_NODE));
+    // remove existing paste node
+    if (pasteNode) {
+        pasteNode === null || pasteNode === void 0 ? void 0 : pasteNode.remove();
+    }
+    // create new paste node and return
+    var node = document.createElement('div');
+    node.id = PASTE_NODE;
+    node.style.display = 'none';
+    return node;
+}
+function hasMention(parent) {
+    return (parent === null || parent === void 0 ? void 0 : parent.querySelector(MENTION_CLASS_COMBINED_QUERY)) ? true : false;
+}
+var extractTextFromNodes = function (nodes) {
+    var text = '';
+    nodes.forEach(function (node) {
+        // to preserve space between words
+        var textNodes = node.querySelectorAll(".".concat(TEXT_MESSAGE_CLASS));
+        if (textNodes.length > 0) {
+            text += ((extractTextFromNodes(Array.from(textNodes))) + ' ');
+        }
+        text += (node.innerText + ' ');
+    });
+    return text;
+};
+function domToMessageTemplate(nodeArray) {
+    var templates = nodeArray === null || nodeArray === void 0 ? void 0 : nodeArray.reduce(function (accumulator, currentValue) {
+        var _a;
+        // currentValue can be node(from messageBody or messageInput) or text
+        var mentionNode;
+        // this looks awkward, but it is a fallback to set default text
+        var text = currentValue === null || currentValue === void 0 ? void 0 : currentValue.innerText;
+        // if text node, set text
+        if (currentValue instanceof Text) {
+            mentionNode = false;
+            text = currentValue.textContent;
+        }
+        if (currentValue instanceof HTMLElement) {
+            mentionNode = (currentValue.classList.contains(MENTION_CLASS) || currentValue.classList.contains(MENTION_CLASS_IN_INPUT))
+                ? currentValue
+                : currentValue.querySelector(MENTION_CLASS_COMBINED_QUERY);
+        }
+        // if mentionNode is not null, it is a mention
+        if (mentionNode) {
+            var text_1 = currentValue === null || currentValue === void 0 ? void 0 : currentValue.innerText;
+            var userId = (_a = mentionNode.dataset) === null || _a === void 0 ? void 0 : _a.userid;
+            return __spreadArray(__spreadArray([], accumulator, true), [
+                {
+                    text: text_1,
+                    userId: userId,
+                },
+            ], false);
+        }
+        return __spreadArray(__spreadArray([], accumulator, true), [
+            {
+                text: text,
+            },
+        ], false);
+    }, []);
+    return templates;
+}
+function getUsersFromWords(templates, channel) {
+    var userMap = {};
+    var users = channel.members;
+    templates.forEach(function (template) {
+        if (template.userId) {
+            var mentionedMember = users.find(function (user) { return user.userId === template.userId; });
+            // Object.values would return array-> [undefined] if the user is not in the channel
+            if (mentionedMember) {
+                userMap[template.userId] = mentionedMember;
+            }
+        }
+    });
+    return Object.values(userMap);
+}
+
+// exported, should be backward compatible
+// conditions to test:
+// 1. paste simple text
+// 2. paste text with mention
+// 3. paste text with mention and text
+// 4. paste text with mention and text and paste again before and after
+// 5. copy message with mention(only one mention, no other text) and paste
+// 6. copy message with mention from input and paste(before and after)
+function usePaste(_a) {
+    var ref = _a.ref, setIsInput = _a.setIsInput, setHeight = _a.setHeight, channel = _a.channel, setMentionedUsers = _a.setMentionedUsers;
+    return useCallback(function (e) {
+        e.preventDefault();
+        var html = e === null || e === void 0 ? void 0 : e.clipboardData.getData('text/html');
+        // simple text, continue as normal
+        if (!html) {
+            var text = e === null || e === void 0 ? void 0 : e.clipboardData.getData('text');
+            document.execCommand('insertHTML', false, sanitizeString(text));
+            setIsInput(true);
+            setHeight();
+            return;
+        }
+        // has html, check if there are mentions, sanitize and insert
+        var purifier = DOMPurify(window);
+        var clean = purifier.sanitize(html);
+        var pasteNode = createPasteNode();
+        pasteNode.innerHTML = clean;
+        // does not have mention, continue as normal
+        if (!hasMention(pasteNode)) {
+            // to preserve space between words
+            var text = extractTextFromNodes(Array.from(pasteNode.children));
+            document.execCommand('insertHTML', false, sanitizeString(text));
+            pasteNode.remove();
+            setIsInput(true);
+            setHeight();
+            return;
+        }
+        // has mention, collect leaf nodes and parse words
+        var leafNodes = getLeafNodes(pasteNode);
+        var words = domToMessageTemplate(leafNodes);
+        var mentionedUsers = channel.isGroupChannel() ? getUsersFromWords(words, channel) : [];
+        // side effects
+        setMentionedUsers(mentionedUsers);
+        inserTemplateToDOM(words);
+        pasteNode.remove();
+        setIsInput(true);
+        setHeight();
+    }, [ref, setIsInput, setHeight, channel, setMentionedUsers]);
+}
+
+export { isChannelTypeSupportsMultipleFilesMessage as i, nodeListToArray as n, renderToString as r, sanitizeString as s, usePaste as u };
+//# sourceMappingURL=bundle-rx40_uS_.js.map

package/chunks/bundle-rx40_uS_.js.map

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

package/chunks/bundle-tAxBnRjT.js

@@ -0,0 +1,174 @@
+import React__default, { useState, useMemo, useEffect } from 'react';
+import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
+import { SendingStatus } from '@sendbird/chat/message';
+import ImageRenderer, { getBorderRadiusForMultipleImageRenderer } from '../ui/ImageRenderer.js';
+import { n as getClassName, s as isGif, b as isMultipleFilesMessage } from './bundle-jZAA8To5.js';
+import { F as FileViewer } from './bundle-3TDg04r-.js';
+import { K } from './bundle-clvMvbED.js';
+
+function ImageGrid(_a) {
+    var _b;
+    var children = _a.children, className = _a.className, message = _a.message, isReactionEnabled = _a.isReactionEnabled;
+    return (React__default.createElement("div", { className: 'sendbird-image-grid-wrap' },
+        React__default.createElement("div", { className: getClassName([
+                className,
+                'sendbird-image-grid',
+                (isReactionEnabled && ((_b = message === null || message === void 0 ? void 0 : message.reactions) === null || _b === void 0 ? void 0 : _b.length) > 0) ? 'reactions' : '',
+            ]) }, children)));
+}
+
+var GRID_WIDTH_CHAT_WEB = 400;
+var GRID_SIDE_PADDING = 8;
+var GRID_GAP = 4;
+var TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 54;
+var PROFILE_IMAGE_WIDTH = 40;
+var CHAT_MOBILE_SIDE_PADDING = 48;
+var THREAD_PARENT_WIDTH = 320;
+var THREAD_PARENT_SIDE_PADDING = 28;
+var THREAD_PARENT_GRID_MARGIN_LEFT = 12;
+var THREAD_CHILD_WIDTH = 200;
+var THREAD_CHILD_SIDE_PADDING = 8;
+var THREAD_CHILD_MOBILE_SIDE_PADDING = 32;
+var THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN = 60;
+var MULTIPLE_FILES_IMAGE_SIDE_LENGTH = {
+    CHAT_WEB: "calc(".concat(GRID_WIDTH_CHAT_WEB / 2, "px - ").concat((GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    CHAT_MOBILE: "calc(50vw - ".concat((CHAT_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+    THREAD_PARENT_WEB: "calc(".concat((THREAD_PARENT_WIDTH - (THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP)) / 2, "px)"),
+    THREAD_PARENT_MOBILE: "calc(50vw - ".concat((THREAD_PARENT_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_PARENT_GRID_MARGIN_LEFT + GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_WEB: "calc(".concat((THREAD_CHILD_WIDTH - THREAD_CHILD_SIDE_PADDING - GRID_GAP) / 2, "px)"),
+    THREAD_CHILD_MOBILE: "calc(50vw - ".concat((THREAD_CHILD_MOBILE_SIDE_PADDING + PROFILE_IMAGE_WIDTH + THREAD_CHILD_MOBILE_TIMESTAMP_WIDTH_AND_ITS_SIDE_MARGIN + GRID_SIDE_PADDING + GRID_GAP) / 2, "px)"),
+};
+var MULTIPLE_FILES_IMAGE_BORDER_RADIUS = {
+    CHAT_WEB: '6px',
+    CHAT_MOBILE: '6px',
+    THREAD_PARENT_WEB: '6px',
+    THREAD_PARENT_MOBILE: '6px',
+    THREAD_CHILD_WEB: '6px',
+    THREAD_CHILD_MOBILE: '6px',
+};
+var MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH = '34px';
+
+var ThreadMessageKind = {
+    PARENT: 'parent',
+    CHILD: 'child',
+};
+function MultipleFilesMessageItemBody(_a) {
+    var className = _a.className, message = _a.message, _b = _a.isReactionEnabled, isReactionEnabled = _b === void 0 ? false : _b, threadMessageKindKey = _a.threadMessageKindKey, _c = _a.statefulFileInfoList, statefulFileInfoList = _c === void 0 ? [] : _c;
+    var _d = useState(-1), currentFileViewerIndex = _d[0], setCurrentFileViewerIndex = _d[1];
+    function onClose() {
+        setCurrentFileViewerIndex(-1);
+    }
+    function onClickLeft() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === 0
+            ? statefulFileInfoList.length - 1
+            : currentFileViewerIndex - 1);
+    }
+    function onClickRight() {
+        setCurrentFileViewerIndex(currentFileViewerIndex === statefulFileInfoList.length - 1
+            ? 0
+            : currentFileViewerIndex + 1);
+    }
+    return threadMessageKindKey && (React__default.createElement(React__default.Fragment, null,
+        currentFileViewerIndex > -1 && (React__default.createElement(FileViewer, { message: message, statefulFileInfoList: statefulFileInfoList, currentIndex: currentFileViewerIndex, onClickLeft: onClickLeft, onClickRight: onClickRight, onClose: onClose })),
+        React__default.createElement(ImageGrid, { className: className, message: message, isReactionEnabled: isReactionEnabled }, statefulFileInfoList.map(function (fileInfo, index) {
+            var _a, _b, _c;
+            var isGifValue = isGif(fileInfo.mimeType);
+            return React__default.createElement("div", { className: 'sendbird-multiple-files-image-renderer-wrapper', onClick: message.sendingStatus === SendingStatus.SUCCEEDED
+                    ? function () { return setCurrentFileViewerIndex(index); }
+                    : undefined, key: "sendbird-multiple-files-image-renderer-".concat(index, "-").concat(fileInfo.url) },
+                React__default.createElement(ImageRenderer, { url: (_c = (_b = (_a = fileInfo.thumbnails) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : fileInfo.url, fixedSize: false, width: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], maxSideLength: MULTIPLE_FILES_IMAGE_SIDE_LENGTH.CHAT_WEB, height: MULTIPLE_FILES_IMAGE_SIDE_LENGTH[threadMessageKindKey], borderRadius: getBorderRadiusForMultipleImageRenderer(MULTIPLE_FILES_IMAGE_BORDER_RADIUS[threadMessageKindKey], index, statefulFileInfoList.length), shadeOnHover: true, isUploaded: !!fileInfo.isUploaded, placeHolder: function (style_) { return (React__default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder", style: style_ }, isGifValue
+                        ? React__default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder__icon" },
+                            React__default.createElement(Icon, { type: IconTypes.GIF, fillColor: IconColors.THUMBNAIL_ICON, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))
+                        : React__default.createElement(Icon, { type: IconTypes.PHOTO, fillColor: IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH }))); }, defaultComponent: React__default.createElement("div", { className: "sendbird-multiple-files-image-renderer__thumbnail__placeholder" }, React__default.createElement(Icon, { type: IconTypes.THUMBNAIL_NONE, fillColor: IconColors.ON_BACKGROUND_2, width: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH, height: MULTIPLE_FILES_IMAGE_THUMBNAIL_SIDE_LENGTH })) }));
+        }))));
+}
+
+function useThreadMessageKindKeySelector(_a) {
+    var threadMessageKind = _a.threadMessageKind, isMobile = _a.isMobile;
+    var threadMessageKindKey = useMemo(function () {
+        return K(threadMessageKind)
+            .with(ThreadMessageKind.PARENT, function () { return (isMobile
+            ? 'THREAD_PARENT_MOBILE'
+            : 'THREAD_PARENT_WEB'); })
+            .with(ThreadMessageKind.CHILD, function () { return (isMobile
+            ? 'THREAD_CHILD_MOBILE'
+            : 'THREAD_CHILD_WEB'); })
+            .otherwise(function () { return (isMobile
+            ? 'CHAT_MOBILE'
+            : 'CHAT_WEB'); });
+    }, [isMobile, threadMessageKind]);
+    return threadMessageKindKey;
+}
+
+function createStatefulFileInfoList(message, oldStatefulFileInfoList) {
+    var _a;
+    if (!message)
+        return null;
+    // Handle sent messages.
+    if (message.sendingStatus === SendingStatus.SUCCEEDED) {
+        return message.fileInfoList.map(function (fileInfo) {
+            return {
+                fileName: fileInfo.fileName,
+                fileSize: fileInfo.fileSize,
+                mimeType: fileInfo.mimeType,
+                thumbnails: fileInfo.thumbnails,
+                url: fileInfo.url,
+                isUploaded: true,
+            };
+        });
+    }
+    // Handle unsent message.
+    if (!Array.isArray((_a = message.messageParams) === null || _a === void 0 ? void 0 : _a.fileInfoList))
+        return null;
+    return message.messageParams.fileInfoList
+        .map(function (fileInfo, index) {
+        var _a, _b, _c;
+        return ({
+            fileName: fileInfo.fileName,
+            fileSize: fileInfo.fileSize,
+            mimeType: fileInfo.mimeType,
+            /**
+             * Note here, we prioritize using fileUrl (implying uploaded state) over file.
+             * This is necessary because cache loaded pending/failed mfms is mixed with
+             * files (not yet uploaded ones) and fileUrls (uploaded).
+             *
+             * Notice that if file is used in the old state, it will not be replace with the new fileUrl
+             * because doing so will rerender the ImageRenderer component which makes rendering process awkward and slow.
+             * */
+            url: (_c = (_b = (_a = oldStatefulFileInfoList[index]) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : fileInfo.fileUrl) !== null && _c !== void 0 ? _c : (fileInfo.file instanceof Blob
+                ? URL.createObjectURL(fileInfo.file)
+                : undefined),
+            /**
+             * Side note: It was a bad design to not include this property by SDK.
+             * Because if original object has fileUrl set and no file, then uploaded result remains
+             * the same so customer cannot know whether it has been uploaded or not.
+             */
+            isUploaded: !fileInfo.file && typeof fileInfo.fileUrl === 'string' && fileInfo.fileUrl.length > 0,
+        });
+    });
+}
+
+var useStatefulFileInfoList = function (message) {
+    var _a, _b, _c;
+    var _d = useState([]), statefulFileInfoList = _d[0], setStatefulFileInfoList = _d[1];
+    useEffect(function () {
+        if (isMultipleFilesMessage(message)) {
+            var newStatefulFileInfoList = createStatefulFileInfoList(message, statefulFileInfoList);
+            setStatefulFileInfoList(newStatefulFileInfoList);
+        }
+    }, [
+        // Sent message dependency.
+        (_a = message.fileInfoList) === null || _a === void 0 ? void 0 : _a.length,
+        // Unsent message dependency.
+        /**
+         * Side note: It was a bad design to not include 'isUploaded' property by SDK.
+         * Because if original object has fileUrl set and no file, then uploaded result remains
+         * the same so customer cannot know whether it has been uploaded or not.
+         */
+        (_c = (_b = message.messageParams) === null || _b === void 0 ? void 0 : _b.fileInfoList) === null || _c === void 0 ? void 0 : _c.map(function (fileInfo) { return fileInfo.fileUrl; }).join(','),
+    ]);
+    return statefulFileInfoList;
+};
+
+export { MultipleFilesMessageItemBody as M, ThreadMessageKind as T, useStatefulFileInfoList as a, useThreadMessageKindKeySelector as u };
+//# sourceMappingURL=bundle-tAxBnRjT.js.map

package/chunks/bundle-tAxBnRjT.js.map

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

package/chunks/bundle-u4FcOlD_.js

@@ -0,0 +1,62 @@
+import React__default, { useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { n as noop } from './bundle-5B1lC0AK.js';
+import { L as LocalizationContext } from './bundle-LeSGRB3v.js';
+import { u as useMediaQueryContext } from './bundle-le7uFwMX.js';
+import IconButton from '../ui/IconButton.js';
+import Button, { ButtonTypes } from '../ui/Button.js';
+import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from './bundle-aH34IG5T.js';
+
+// simple component to be used as modal root
+var MODAL_ROOT = 'sendbird-modal-root';
+var ModalRoot = function () { return (React__default.createElement("div", { id: MODAL_ROOT, className: MODAL_ROOT })); };
+
+var ModalHeader = function (_a) {
+    var titleText = _a.titleText;
+    return (React__default.createElement("div", { className: "sendbird-modal__header" },
+        React__default.createElement(Label, { type: LabelTypography.H_1, color: LabelColors.ONBACKGROUND_1 }, titleText)));
+};
+var ModalBody = function (_a) {
+    var children = _a.children;
+    return (React__default.createElement("div", { className: "sendbird-modal__body" },
+        React__default.createElement(Label, { type: LabelTypography.SUBTITLE_1, color: LabelColors.ONBACKGROUND_2 }, children)));
+};
+var ModalFooter = function (_a) {
+    var submitText = _a.submitText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.hideCancelButton, hideCancelButton = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? ButtonTypes.DANGER : _d, onSubmit = _a.onSubmit, onCancel = _a.onCancel;
+    var stringSet = useContext(LocalizationContext).stringSet;
+    return (React__default.createElement("div", { className: "sendbird-modal__footer" },
+        !hideCancelButton && (React__default.createElement(Button, { type: ButtonTypes.SECONDARY, onClick: onCancel },
+            React__default.createElement(Label, { type: LabelTypography.BUTTON_1, color: LabelColors.ONBACKGROUND_1 }, stringSet.BUTTON__CANCEL))),
+        React__default.createElement(Button, { type: type, disabled: disabled, onClick: onSubmit }, submitText)));
+};
+function Modal(props) {
+    var _a = props.children, children = _a === void 0 ? null : _a, _b = props.className, className = _b === void 0 ? '' : _b, _c = props.isCloseOnClickOutside, isCloseOnClickOutside = _c === void 0 ? false : _c, _d = props.isFullScreenOnMobile, isFullScreenOnMobile = _d === void 0 ? false : _d, titleText = props.titleText, submitText = props.submitText, _e = props.disabled, disabled = _e === void 0 ? false : _e, _f = props.hideFooter, hideFooter = _f === void 0 ? false : _f, _g = props.type, type = _g === void 0 ? ButtonTypes.DANGER : _g, 
+    /**
+     * Do not use this! We will deprecate onCancel in v4.
+     */
+    _h = props.onCancel, 
+    /**
+     * Do not use this! We will deprecate onCancel in v4.
+     */
+    onCancel = _h === void 0 ? noop : _h, onClose = props.onClose, _j = props.onSubmit, onSubmit = _j === void 0 ? noop : _j, renderHeader = props.renderHeader;
+    var handleClose = onClose !== null && onClose !== void 0 ? onClose : onCancel;
+    var isMobile = useMediaQueryContext().isMobile;
+    return createPortal((React__default.createElement("div", { className: "\n      sendbird-modal ".concat(className, "\n      ").concat((isFullScreenOnMobile && isMobile) ? 'sendbird-modal--full-mobile' : '', "\n    ") },
+        React__default.createElement("div", { className: "sendbird-modal__content" },
+            (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || (React__default.createElement(ModalHeader, { titleText: titleText !== null && titleText !== void 0 ? titleText : '' })),
+            React__default.createElement(ModalBody, null, children),
+            !hideFooter && (React__default.createElement(ModalFooter, { disabled: disabled, onCancel: handleClose, onSubmit: onSubmit, submitText: submitText !== null && submitText !== void 0 ? submitText : '', type: type })),
+            React__default.createElement("div", { className: "sendbird-modal__close" },
+                React__default.createElement(IconButton, { width: "32px", height: "32px", onClick: handleClose },
+                    React__default.createElement(Icon, { type: IconTypes.CLOSE, fillColor: IconColors.DEFAULT, width: "24px", height: "24px" })))),
+        React__default.createElement("div", { className: "\n          sendbird-modal__backdrop\n          ".concat(isCloseOnClickOutside && 'sendbird-modal__backdrop--clickoutside', "\n        "), onClick: function (e) {
+                e === null || e === void 0 ? void 0 : e.stopPropagation();
+                if (isCloseOnClickOutside) {
+                    handleClose();
+                }
+            } }))), document.getElementById(MODAL_ROOT));
+}
+
+export { Modal as M, MODAL_ROOT as a, ModalRoot as b, ModalFooter as c, ModalHeader as d, ModalBody as e };
+//# sourceMappingURL=bundle-u4FcOlD_.js.map

package/chunks/bundle-u4FcOlD_.js.map

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

package/chunks/bundle-viJ5cbpO.js

@@ -0,0 +1,24 @@
+import React__default, { useContext } from 'react';
+import { M as Modal } from './bundle-u4FcOlD_.js';
+import './bundle-QjlA2FJF.js';
+import './bundle-aH34IG5T.js';
+import { ButtonTypes } from '../ui/Button.js';
+import { L as LocalizationContext } from './bundle-LeSGRB3v.js';
+import { useThreadContext } from '../Thread/context.js';
+import { g as getModalDeleteMessageTitle } from './bundle-9gCVckwb.js';
+
+var RemoveMessage = function (props) {
+    var _a;
+    var onCancel = props.onCancel, onSubmit = props.onSubmit, message = props.message;
+    var stringSet = useContext(LocalizationContext).stringSet;
+    var deleteMessage = useThreadContext().deleteMessage;
+    return (React__default.createElement(Modal, { type: ButtonTypes.DANGER, disabled: ((_a = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _a === void 0 ? void 0 : _a.replyCount) > 0, onCancel: onCancel, onSubmit: function () {
+            deleteMessage(message).then(function () {
+                onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+                onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
+            });
+        }, submitText: stringSet.MESSAGE_MENU__DELETE, titleText: getModalDeleteMessageTitle(stringSet, message) }));
+};
+
+export { RemoveMessage as R };
+//# sourceMappingURL=bundle-viJ5cbpO.js.map

package/chunks/bundle-viJ5cbpO.js.map

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