@sendbird/uikit-react 3.6.11-beta.3 → 3.7.0-rc.0

package/cjs/handlers/OpenChannelHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"OpenChannelHandler.js","sources":["../../../src/lib/handlers/OpenChannelHandler.ts"],"sourcesContent":["/**\n * Returns the instance of OpenChannelHandler\n */\nimport { OpenChannelHandler } from '@sendbird/chat/openChannel';\n\nexport default OpenChannelHandler;\n"],"names":[],"mappings":";;;;AAAA;AACA;AACA;;;;"}
+{"version":3,"file":"OpenChannelHandler.js","sources":["../../../src/lib/handlers/OpenChannelHandler.ts"],"sourcesContent":["/**\n * Returns the instance of OpenChannelHandler\n */\nimport { OpenChannelHandler } from '@sendbird/chat/openChannel';\n\nexport default OpenChannelHandler;\n"],"names":[],"mappings":";;;;AAAA;;AAEG;;;;"}

package/cjs/handlers/SessionHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"SessionHandler.js","sources":["../../../src/lib/handlers/SessionHandler.ts"],"sourcesContent":["/**\n * Returns the instance of SessionHandler\n */\nimport { SessionHandler } from '@sendbird/chat';\n\nexport default SessionHandler;\n"],"names":[],"mappings":";;;;AAAA;AACA;AACA;;;;"}
+{"version":3,"file":"SessionHandler.js","sources":["../../../src/lib/handlers/SessionHandler.ts"],"sourcesContent":["/**\n * Returns the instance of SessionHandler\n */\nimport { SessionHandler } from '@sendbird/chat';\n\nexport default SessionHandler;\n"],"names":[],"mappings":";;;;AAAA;;AAEG;;;;"}

package/cjs/hooks/useModal.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../_rollupPluginBabelHelpers-94c18dc1.js');
+var tslib_es6 = require('../tslib.es6-2f2b0bca.js');
+var React = require('react');
+var index$1 = require('../index-609b07a2.js');
+var utils = require('../utils-180c6bc8.js');
+var ui_Modal = require('../ui/Modal.js');
+var index = require('../index-daf80c58.js');
+require('react-dom');
+require('../LocalizationContext-5009012e.js');
+require('../stringSet-98b52c49.js');
+require('../index-fd8a0abb.js');
+require('../MediaQueryContext-d6fdbe43.js');
+require('../ui/IconButton.js');
+require('../ui/Button.js');
+require('../index-35820a94.js');
+require('prop-types');
+require('../types-66554668.js');
+require('../ui/Icon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var GlobalModalContext = /*#__PURE__*/React.createContext({
+  openModal: utils.noop
+});
+var GlobalModalProvider = function (_a) {
+  var children = _a.children;
+  // Idea from https://dev.to/nurislamov/simple-modals-queue-in-react-4g6c
+  var _b = React.useState([]),
+    globalModalQueue = _b[0],
+    setGlobalModalQueue = _b[1];
+  var openModal = React.useCallback(function (props) {
+    setGlobalModalQueue(function (currentQue) {
+      return tslib_es6.__spreadArray(tslib_es6.__spreadArray([], currentQue, true), [props], false);
+    });
+  }, []);
+  var closeModal = React.useCallback(function () {
+    setGlobalModalQueue(function (currentQue) {
+      return currentQue.slice(1);
+    });
+  }, []);
+  var ModalComponent = React.useMemo(function () {
+    return function () {
+      return index$1.K(globalModalQueue).when(function (q) {
+        return q.length === 0;
+      }, function () {
+        return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
+      }).otherwise(function () {
+        var _a = globalModalQueue[0],
+          modalProps = _a.modalProps,
+          childElement = _a.childElement;
+        return /*#__PURE__*/React__default["default"].createElement(ui_Modal.Modal, _rollupPluginBabelHelpers._extends({}, modalProps, {
+          className: "sendbird-global-modal ".concat(modalProps === null || modalProps === void 0 ? void 0 : modalProps.className),
+          onClose: function () {
+            var _a;
+            (_a = modalProps === null || modalProps === void 0 ? void 0 : modalProps.onClose) === null || _a === void 0 ? void 0 : _a.call(modalProps);
+            closeModal();
+          }
+        }), childElement({
+          closeModal: closeModal
+        }));
+      });
+    };
+  }, [globalModalQueue]);
+  return /*#__PURE__*/React__default["default"].createElement(GlobalModalContext.Provider, {
+    value: {
+      openModal: openModal
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ModalComponent, null), children);
+};
+var useGlobalModalContext = function () {
+  return React.useContext(GlobalModalContext);
+};
+
+exports.MODAL_ROOT = index.MODAL_ROOT;
+exports.ModalRoot = index.ModalRoot;
+exports.GlobalModalProvider = GlobalModalProvider;
+exports.useGlobalModalContext = useGlobalModalContext;
+//# sourceMappingURL=useModal.js.map

package/cjs/hooks/useModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModal.js","sources":["../../../src/hooks/useModal/index.tsx"],"sourcesContent":["import React, { useState, useCallback, ReactElement, createContext, useMemo, useContext } from 'react';\nimport { match } from 'ts-pattern';\n\nimport { noop } from '../../utils/utils';\nimport Modal, { type ModalProps } from '../../ui/Modal';\n\nexport type OpenGlobalModalProps = {\n  modalProps: ModalProps;\n  childElement: (props: { closeModal: () => void }) => ReactElement;\n};\nexport type GlobalModalProviderProps = React.PropsWithChildren;\nexport interface GlobalModalContextInterface {\n  openModal: (props: OpenGlobalModalProps) => void;\n}\n\nconst GlobalModalContext = createContext<GlobalModalContextInterface>({\n  openModal: noop,\n});\n\nexport const GlobalModalProvider = ({ children }: GlobalModalProviderProps) => {\n  // Idea from https://dev.to/nurislamov/simple-modals-queue-in-react-4g6c\n  const [globalModalQueue, setGlobalModalQueue] = useState<Array<OpenGlobalModalProps>>([]);\n\n  const openModal = useCallback((props: OpenGlobalModalProps) => {\n    setGlobalModalQueue((currentQue) => [...currentQue, props]);\n  }, []);\n\n  const closeModal = useCallback(() => {\n    setGlobalModalQueue((currentQue) => currentQue.slice(1));\n  }, []);\n\n  const ModalComponent = useMemo(() => () => {\n    return match(globalModalQueue)\n      .when(q => q.length === 0, () => {\n        return <></>;\n      })\n      .otherwise(() => {\n        const { modalProps, childElement } = globalModalQueue[0];\n        return (\n          <Modal\n            {...modalProps}\n            className={`sendbird-global-modal ${modalProps?.className}`}\n            onClose={() => {\n              modalProps?.onClose?.();\n              closeModal();\n            }}\n          >\n            {\n              childElement({\n                closeModal,\n              })\n            }\n          </Modal>\n        );\n      });\n  }, [globalModalQueue]);\n\n  return (\n    <GlobalModalContext.Provider\n      value={{\n        openModal,\n      }}\n    >\n      <ModalComponent />\n      {children}\n    </GlobalModalContext.Provider>\n  );\n};\nexport const useGlobalModalContext = (): GlobalModalContextInterface => useContext(GlobalModalContext);\n\nexport * from './ModalRoot';\n"],"names":["GlobalModalContext","createContext","openModal","noop","GlobalModalProvider","_a","children","_b","useState","globalModalQueue","setGlobalModalQueue","useCallback","props","currentQue","__spreadArray","closeModal","slice","ModalComponent","useMemo","match","when","q","length","React","createElement","Fragment","otherwise","modalProps","childElement","Modal","_extends","className","concat","onClose","Provider","value","useGlobalModalContext","useContext"],"mappings":"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"}

package/cjs/{index-5c7818e3.js → index-0a25b9b2.js}

@@ -2,54 +2,53 @@
 
 var React = require('react');
 var ui_ContextMenu = require('./ui/ContextMenu.js');
-var index = require('./index-73a1cca8.js');
-var LocalizationContext = require('./LocalizationContext-c223b781.js');
+var index = require('./index-b995f638.js');
+var LocalizationContext = require('./LocalizationContext-5009012e.js');
 var ui_Icon = require('./ui/Icon.js');
-var ui_Label = require('./index-46bcc5b2.js');
+var ui_Label = require('./index-35820a94.js');
 var ui_BottomSheet = require('./ui/BottomSheet.js');
 var ui_ImageRenderer = require('./ui/ImageRenderer.js');
 var ui_ReactionButton = require('./ui/ReactionButton.js');
+var useSendbirdStateContext = require('./useSendbirdStateContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const MobileContextMenu = props => {
-  var _message$sender, _message$threadInfo$r, _message$threadInfo;
-  const {
-    hideMenu,
-    channel,
-    message,
-    replyType,
-    userId,
-    resendMessage,
-    showEdit,
-    showRemove,
-    deleteMenuState,
-    setQuoteMessage,
-    parentRef,
-    onReplyInThread,
-    isOpenedFromThread = false
-  } = props;
-  const isByMe = (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId) === userId;
-  const {
-    stringSet
-  } = LocalizationContext.useLocalization();
-  const showMenuItemCopy = index.isUserMessage(message);
-  const showMenuItemEdit = index.isUserMessage(message) && index.isSentMessage(message) && isByMe;
-  const showMenuItemResend = index.isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
-  const showMenuItemDelete = !index.isPendingMessage(message) && isByMe;
-  const showMenuItemDeleteByState = isByMe && (deleteMenuState === undefined || deleteMenuState !== 'HIDE');
-  const showMenuItemDeleteFinal = showMenuItemDeleteByState && showMenuItemDelete;
-  const disableDelete = deleteMenuState !== undefined && deleteMenuState === 'DISABLE' || ((_message$threadInfo$r = message === null || message === void 0 ? void 0 : (_message$threadInfo = message.threadInfo) === null || _message$threadInfo === void 0 ? void 0 : _message$threadInfo.replyCount) !== null && _message$threadInfo$r !== void 0 ? _message$threadInfo$r : 0) > 0;
-  const showMenuItemDownload = !index.isPendingMessage(message) && index.isFileMessage(message) && !(index.isVoiceMessage(message) && (channel !== null && channel !== void 0 && channel.isSuper || channel !== null && channel !== void 0 && channel.isBroadcast));
-  const showMenuItemReply = replyType === 'QUOTE_REPLY' && !index.isFailedMessage(message) && !index.isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel());
-  const showMenuItemThread = replyType === 'THREAD' && !isOpenedFromThread && !index.isFailedMessage(message) && !index.isPendingMessage(message) && !index.isThreadMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel());
-  const fileMessage = message;
+var MobileContextMenu = function (props) {
+  var _a, _b, _c;
+  var hideMenu = props.hideMenu,
+    channel = props.channel,
+    message = props.message,
+    replyType = props.replyType,
+    userId = props.userId,
+    resendMessage = props.resendMessage,
+    showEdit = props.showEdit,
+    showRemove = props.showRemove,
+    deleteMenuState = props.deleteMenuState,
+    deleteMessage = props.deleteMessage,
+    setQuoteMessage = props.setQuoteMessage,
+    parentRef = props.parentRef,
+    onReplyInThread = props.onReplyInThread,
+    _d = props.isOpenedFromThread,
+    isOpenedFromThread = _d === void 0 ? false : _d;
+  var isByMe = ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === userId;
+  var stringSet = LocalizationContext.useLocalization().stringSet;
+  var showMenuItemCopy = index.isUserMessage(message);
+  var showMenuItemEdit = index.isUserMessage(message) && index.isSentMessage(message) && isByMe;
+  var showMenuItemResend = index.isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
+  var showMenuItemDelete = !index.isPendingMessage(message) && isByMe;
+  var showMenuItemDeleteByState = isByMe && (deleteMenuState === undefined || deleteMenuState !== 'HIDE');
+  var showMenuItemDeleteFinal = showMenuItemDeleteByState && showMenuItemDelete;
+  var disableDelete = deleteMenuState !== undefined && deleteMenuState === 'DISABLE' || ((_c = (_b = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _b === void 0 ? void 0 : _b.replyCount) !== null && _c !== void 0 ? _c : 0) > 0;
+  var showMenuItemDownload = !index.isPendingMessage(message) && index.isFileMessage(message) && !(index.isVoiceMessage(message) && ((channel === null || channel === void 0 ? void 0 : channel.isSuper) || (channel === null || channel === void 0 ? void 0 : channel.isBroadcast)));
+  var showMenuItemReply = replyType === 'QUOTE_REPLY' && !index.isFailedMessage(message) && !index.isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel());
+  var showMenuItemThread = replyType === 'THREAD' && !isOpenedFromThread && !index.isFailedMessage(message) && !index.isPendingMessage(message) && !index.isThreadMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel());
+  var fileMessage = message;
   return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
     isOpen: true,
-    menuItems: () => {
-      var _message$parentMessag, _message$parentMessag2, _message$parentMessag3;
+    menuItems: function () {
+      var _a, _b, _c;
       return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
         className: "sendbird-message__mobile-context-menu",
         parentRef: parentRef,
@@ -57,7 +56,7 @@ const MobileContextMenu = props => {
         closeDropdown: hideMenu
       }, showMenuItemCopy && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
         className: "sendbird-message__mobile-context-menu-item menu-item-copy",
-        onClick: () => {
+        onClick: function () {
           hideMenu();
           index.copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
         },
@@ -72,26 +71,26 @@ const MobileContextMenu = props => {
         height: "24px"
       })), showMenuItemReply && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
         className: "sendbird-message__mobile-context-menu-item menu-item-reply",
-        onClick: () => {
+        onClick: function () {
           hideMenu();
           setQuoteMessage(message);
         },
-        disable: ((_message$parentMessag = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _message$parentMessag !== void 0 ? _message$parentMessag : 0) > 0,
+        disable: ((_a = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _a !== void 0 ? _a : 0) > 0,
         dataSbId: "ui_mobile_message_item_menu_reply"
       }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
         type: ui_Label.LabelTypography.SUBTITLE_1,
-        color: ((_message$parentMessag2 = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _message$parentMessag2 !== void 0 ? _message$parentMessag2 : 0) > 0 ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1
+        color: ((_b = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _b !== void 0 ? _b : 0) > 0 ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1
       }, stringSet.MESSAGE_MENU__REPLY), /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
         type: ui_Icon.IconTypes.REPLY,
-        fillColor: ((_message$parentMessag3 = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _message$parentMessag3 !== void 0 ? _message$parentMessag3 : 0) > 0 ? ui_Icon.IconColors.ON_BACKGROUND_4 : ui_Icon.IconColors.PRIMARY,
+        fillColor: ((_c = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _c !== void 0 ? _c : 0) > 0 ? ui_Icon.IconColors.ON_BACKGROUND_4 : ui_Icon.IconColors.PRIMARY,
         width: "24px",
         height: "24px"
       })), showMenuItemThread && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
         className: "sendbird-message__mobile-context-menu-item menu-item-reply",
-        onClick: () => {
+        onClick: function () {
           hideMenu();
           onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
-            message
+            message: message
           });
         },
         dataSbId: "ui_mobile_message_item_menu_thread"
@@ -105,7 +104,7 @@ const MobileContextMenu = props => {
         height: "24px"
       })), showMenuItemEdit && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
         className: "sendbird-message__mobile-context-menu-item menu-item-edit",
-        onClick: () => {
+        onClick: function () {
           hideMenu();
           showEdit(true);
         },
@@ -120,7 +119,7 @@ const MobileContextMenu = props => {
         height: "24px"
       })), showMenuItemResend && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
         className: "sendbird-message__mobile-context-menu-item menu-item-resend",
-        onClick: () => {
+        onClick: function () {
           hideMenu();
           resendMessage(message);
         },
@@ -135,10 +134,13 @@ const MobileContextMenu = props => {
         height: "24px"
       })), showMenuItemDeleteFinal && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
         className: "sendbird-message__mobile-context-menu-item menu-item-delete",
-        onClick: () => {
-          if (!disableDelete) {
+        onClick: function () {
+          if (index.isFailedMessage(message)) {
             hideMenu();
-            showRemove(true);
+            deleteMessage === null || deleteMessage === void 0 ? void 0 : deleteMessage(message);
+          } else if (!disableDelete) {
+            hideMenu();
+            showRemove === null || showRemove === void 0 ? void 0 : showRemove(true);
           }
         },
         disable: disableDelete,
@@ -153,7 +155,7 @@ const MobileContextMenu = props => {
         height: "24px"
       })), showMenuItemDownload && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
         className: "sendbird-message__mobile-context-menu-item menu-item-save",
-        onClick: () => {
+        onClick: function () {
           hideMenu();
         },
         dataSbId: "ui_mobile_message_item_menu_download_file"
@@ -175,49 +177,51 @@ const MobileContextMenu = props => {
   });
 };
 
-const EMOJI_SIZE = 38;
-const MobileBottomSheet = props => {
-  var _message$sender, _message$threadInfo$r, _message$threadInfo;
-  const {
-    hideMenu,
-    channel,
-    emojiContainer,
-    message,
-    replyType,
-    userId,
-    resendMessage,
-    toggleReaction,
-    isReactionEnabled,
-    showEdit,
-    showRemove,
-    deleteMenuState,
-    setQuoteMessage,
-    onReplyInThread,
-    isOpenedFromThread = false
-  } = props;
-  const isByMe = (message === null || message === void 0 ? void 0 : (_message$sender = message.sender) === null || _message$sender === void 0 ? void 0 : _message$sender.userId) === userId;
-  const {
-    stringSet
-  } = LocalizationContext.useLocalization();
-  const showMenuItemCopy = index.isUserMessage(message);
-  const showMenuItemEdit = index.isUserMessage(message) && index.isSentMessage(message) && isByMe;
-  const showMenuItemResend = index.isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
-  const showMenuItemDelete = !index.isPendingMessage(message) && isByMe;
-  const showMenuItemDeleteByState = isByMe && (deleteMenuState === undefined || deleteMenuState !== 'HIDE');
-  const showMenuItemDeleteFinal = showMenuItemDeleteByState && showMenuItemDelete;
-  const disableDelete = deleteMenuState !== undefined && deleteMenuState === 'DISABLE' || ((_message$threadInfo$r = message === null || message === void 0 ? void 0 : (_message$threadInfo = message.threadInfo) === null || _message$threadInfo === void 0 ? void 0 : _message$threadInfo.replyCount) !== null && _message$threadInfo$r !== void 0 ? _message$threadInfo$r : 0) > 0;
-  const showMenuItemDownload = !index.isPendingMessage(message) && index.isFileMessage(message) && !index.isVoiceMessage(message);
-  const showReaction = !index.isFailedMessage(message) && !index.isPendingMessage(message) && isReactionEnabled;
-  const showMenuItemReply = replyType === 'QUOTE_REPLY' && !index.isFailedMessage(message) && !index.isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel !== null && channel !== void 0 && channel.isBroadcast);
-  const showMenuItemThread = replyType === 'THREAD' && !isOpenedFromThread && !index.isFailedMessage(message) && !index.isPendingMessage(message) && !index.isThreadMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel !== null && channel !== void 0 && channel.isBroadcast);
-  const disableReaction = (message === null || message === void 0 ? void 0 : message.parentMessageId) > 0;
-  const fileMessage = message;
-  const maxEmojisPerRow = Math.floor(window.innerWidth / EMOJI_SIZE) - 1;
-  const [showEmojisOnly, setShowEmojisOnly] = React.useState(false);
-  const emojis = index.getEmojiListAll(emojiContainer);
+var EMOJI_SIZE = 38;
+var MobileBottomSheet = function (props) {
+  var _a, _b, _c;
+  var hideMenu = props.hideMenu,
+    channel = props.channel,
+    emojiContainer = props.emojiContainer,
+    message = props.message,
+    replyType = props.replyType,
+    userId = props.userId,
+    resendMessage = props.resendMessage,
+    deleteMessage = props.deleteMessage,
+    toggleReaction = props.toggleReaction,
+    isReactionEnabled = props.isReactionEnabled,
+    showEdit = props.showEdit,
+    showRemove = props.showRemove,
+    deleteMenuState = props.deleteMenuState,
+    setQuoteMessage = props.setQuoteMessage,
+    onReplyInThread = props.onReplyInThread,
+    _d = props.isOpenedFromThread,
+    isOpenedFromThread = _d === void 0 ? false : _d;
+  var isByMe = ((_a = message === null || message === void 0 ? void 0 : message.sender) === null || _a === void 0 ? void 0 : _a.userId) === userId;
+  var stringSet = LocalizationContext.useLocalization().stringSet;
+  var globalStore = useSendbirdStateContext.useSendbirdStateContext();
+  var isOnline = globalStore.config.isOnline;
+  var showMenuItemCopy = index.isUserMessage(message);
+  var showMenuItemEdit = index.isUserMessage(message) && index.isSentMessage(message) && isByMe;
+  var showMenuItemResend = isOnline && index.isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
+  var showMenuItemDelete = !index.isPendingMessage(message) && isByMe;
+  var showMenuItemDeleteByState = isByMe && (deleteMenuState === undefined || deleteMenuState !== 'HIDE');
+  var showMenuItemDeleteFinal = showMenuItemDeleteByState && showMenuItemDelete;
+  var disableDelete = deleteMenuState !== undefined && deleteMenuState === 'DISABLE' || ((_c = (_b = message === null || message === void 0 ? void 0 : message.threadInfo) === null || _b === void 0 ? void 0 : _b.replyCount) !== null && _c !== void 0 ? _c : 0) > 0;
+  var showMenuItemDownload = index.isSentMessage(message) && index.isFileMessage(message) && !index.isVoiceMessage(message);
+  var showReaction = !index.isFailedMessage(message) && !index.isPendingMessage(message) && isReactionEnabled;
+  var showMenuItemReply = replyType === 'QUOTE_REPLY' && !index.isFailedMessage(message) && !index.isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast);
+  var showMenuItemThread = replyType === 'THREAD' && !isOpenedFromThread && !index.isFailedMessage(message) && !index.isPendingMessage(message) && !index.isThreadMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast);
+  var disableReaction = (message === null || message === void 0 ? void 0 : message.parentMessageId) > 0;
+  var fileMessage = message;
+  var maxEmojisPerRow = Math.floor(window.innerWidth / EMOJI_SIZE) - 1;
+  var _e = React.useState(false),
+    showEmojisOnly = _e[0],
+    setShowEmojisOnly = _e[1];
+  var emojis = index.getEmojiListAll(emojiContainer);
   // calculate max emojis that can be shown in screen
-  const visibleEmojis = showEmojisOnly ? emojis : emojis === null || emojis === void 0 ? void 0 : emojis.slice(0, maxEmojisPerRow);
-  const canShowMoreEmojis = emojis.length > maxEmojisPerRow;
+  var visibleEmojis = showEmojisOnly ? emojis : emojis === null || emojis === void 0 ? void 0 : emojis.slice(0, maxEmojisPerRow);
+  var canShowMoreEmojis = emojis.length > maxEmojisPerRow;
   return /*#__PURE__*/React__default["default"].createElement(ui_BottomSheet, {
     onBackdropClick: hideMenu
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -227,41 +231,44 @@ const MobileBottomSheet = props => {
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: "sendbird-message__bottomsheet-reaction-bar"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `
-                    sendbird-message__bottomsheet-reaction-bar__row
-                    ${showEmojisOnly ? 'sendbird-message__bottomsheet-reaction-bar__all' : ''}
-                  `
-  }, visibleEmojis.map(emoji => {
-    var _message$reactions, _message$reactions$fi, _message$reactions$fi2;
-    const isReacted = message === null || message === void 0 ? void 0 : (_message$reactions = message.reactions) === null || _message$reactions === void 0 ? void 0 : (_message$reactions$fi = _message$reactions.filter(reaction => reaction.key === emoji.key)[0]) === null || _message$reactions$fi === void 0 ? void 0 : (_message$reactions$fi2 = _message$reactions$fi.userIds) === null || _message$reactions$fi2 === void 0 ? void 0 : _message$reactions$fi2.some(reactorId => reactorId === userId);
+    className: "\n                    sendbird-message__bottomsheet-reaction-bar__row\n                    ".concat(showEmojisOnly ? 'sendbird-message__bottomsheet-reaction-bar__all' : '', "\n                  ")
+  }, visibleEmojis.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 /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
       key: emoji.key,
-      width: `${EMOJI_SIZE}px`,
-      height: `${EMOJI_SIZE}px`,
+      width: "".concat(EMOJI_SIZE, "px"),
+      height: "".concat(EMOJI_SIZE, "px"),
       selected: isReacted,
-      onClick: () => {
+      onClick: function () {
         hideMenu();
         toggleReaction(message, emoji.key, isReacted);
       },
-      dataSbId: `ui_mobile_emoji_reactions_menu_${emoji.key}`
+      dataSbId: "ui_mobile_emoji_reactions_menu_".concat(emoji.key)
     }, /*#__PURE__*/React__default["default"].createElement(ui_ImageRenderer["default"], {
       url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
       width: "28px",
       height: "28px",
-      placeHolder: style => /*#__PURE__*/React__default["default"].createElement("div", {
-        style: style
-      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-        type: ui_Icon.IconTypes.QUESTION,
-        fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
-        width: "28px",
-        height: "28px"
-      }))
+      placeHolder: function (style) {
+        return /*#__PURE__*/React__default["default"].createElement("div", {
+          style: style
+        }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+          type: ui_Icon.IconTypes.QUESTION,
+          fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+          width: "28px",
+          height: "28px"
+        }));
+      }
     }));
   }), canShowMoreEmojis && !showEmojisOnly && /*#__PURE__*/React__default["default"].createElement(ui_ReactionButton, {
     key: "emoji_more",
     width: "38px",
     height: "38px",
-    onClick: () => {
+    onClick: function () {
       setShowEmojisOnly(true);
     },
     dataSbId: "ui_mobile_emoji_reactions_menu_emojiadd"
@@ -269,19 +276,21 @@ const MobileBottomSheet = props => {
     url: '',
     width: "28px",
     height: "28px",
-    placeHolder: style => /*#__PURE__*/React__default["default"].createElement("div", {
-      style: style
-    }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
-      type: ui_Icon.IconTypes.EMOJI_MORE,
-      fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
-      width: "28px",
-      height: "28px"
-    }))
+    placeHolder: function (style) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        style: style
+      }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+        type: ui_Icon.IconTypes.EMOJI_MORE,
+        fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
+        width: "28px",
+        height: "28px"
+      }));
+    }
   }))))), !showEmojisOnly && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet--actions"
   }, showMenuItemCopy && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet--action",
-    onClick: () => {
+    onClick: function () {
       hideMenu();
       index.copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
     }
@@ -295,7 +304,7 @@ const MobileBottomSheet = props => {
     color: ui_Label.LabelColors.ONBACKGROUND_1
   }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__COPY)), showMenuItemEdit && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet--action",
-    onClick: () => {
+    onClick: function () {
       hideMenu();
       showEdit(true);
     }
@@ -309,7 +318,7 @@ const MobileBottomSheet = props => {
     color: ui_Label.LabelColors.ONBACKGROUND_1
   }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__EDIT)), showMenuItemResend && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet--action",
-    onClick: () => {
+    onClick: function () {
       hideMenu();
       resendMessage(message);
     }
@@ -322,12 +331,10 @@ const MobileBottomSheet = props => {
     type: ui_Label.LabelTypography.SUBTITLE_1,
     color: ui_Label.LabelColors.ONBACKGROUND_1
   }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__RESEND)), showMenuItemReply && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `sendbird-message__bottomsheet--action
-                      ${disableReaction ? 'sendbird-message__bottomsheet--action-disabled' : ''}
-                    `,
+    className: "sendbird-message__bottomsheet--action\n                      ".concat(disableReaction ? 'sendbird-message__bottomsheet--action-disabled' : '', "\n                    "),
     role: "menuitem",
     "aria-disabled": disableReaction ? true : false,
-    onClick: () => {
+    onClick: function () {
       if (!disableReaction) {
         hideMenu();
         setQuoteMessage(message);
@@ -343,10 +350,10 @@ const MobileBottomSheet = props => {
     color: disableReaction ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1
   }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__REPLY)), showMenuItemThread && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet--action",
-    onClick: () => {
+    onClick: function () {
       hideMenu();
       onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
-        message
+        message: message
       });
     }
   }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
@@ -359,8 +366,11 @@ const MobileBottomSheet = props => {
     color: ui_Label.LabelColors.ONBACKGROUND_1
   }, stringSet.MESSAGE_MENU__THREAD)), showMenuItemDeleteFinal && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet--action",
-    onClick: () => {
-      if (!disableDelete) {
+    onClick: function () {
+      if (index.isFailedMessage(message)) {
+        hideMenu();
+        deleteMessage === null || deleteMessage === void 0 ? void 0 : deleteMessage(message);
+      } else if (!disableDelete) {
         hideMenu();
         showRemove === null || showRemove === void 0 ? void 0 : showRemove(true);
       }
@@ -375,7 +385,7 @@ const MobileBottomSheet = props => {
     color: disableDelete ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1
   }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__DELETE)), showMenuItemDownload && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "sendbird-message__bottomsheet--action",
-    onClick: () => {
+    onClick: function () {
       hideMenu();
     }
   }, /*#__PURE__*/React__default["default"].createElement("a", {
@@ -394,27 +404,27 @@ const MobileBottomSheet = props => {
   }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__SAVE))))));
 };
 
-const MobileMenu = props => {
-  const {
-    message,
-    hideMenu,
-    userId,
-    channel,
-    isReactionEnabled = false,
-    isByMe,
-    replyType,
-    disabled,
-    deleteMenuState,
-    showRemove,
-    showEdit,
-    resendMessage,
-    setQuoteMessage,
-    emojiContainer,
-    toggleReaction,
-    parentRef,
-    onReplyInThread,
-    isOpenedFromThread
-  } = props;
+var MobileMenu = function (props) {
+  var message = props.message,
+    hideMenu = props.hideMenu,
+    userId = props.userId,
+    channel = props.channel,
+    _a = props.isReactionEnabled,
+    isReactionEnabled = _a === void 0 ? false : _a,
+    isByMe = props.isByMe,
+    replyType = props.replyType,
+    disabled = props.disabled,
+    deleteMenuState = props.deleteMenuState,
+    showRemove = props.showRemove,
+    showEdit = props.showEdit,
+    resendMessage = props.resendMessage,
+    deleteMessage = props.deleteMessage,
+    setQuoteMessage = props.setQuoteMessage,
+    emojiContainer = props.emojiContainer,
+    toggleReaction = props.toggleReaction,
+    parentRef = props.parentRef,
+    onReplyInThread = props.onReplyInThread,
+    isOpenedFromThread = props.isOpenedFromThread;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isReactionEnabled ? /*#__PURE__*/React__default["default"].createElement(MobileBottomSheet, {
     channel: channel,
     message: message,
@@ -427,6 +437,7 @@ const MobileMenu = props => {
     showEdit: showEdit,
     deleteMenuState: deleteMenuState,
     resendMessage: resendMessage,
+    deleteMessage: deleteMessage,
     setQuoteMessage: setQuoteMessage,
     emojiContainer: emojiContainer,
     toggleReaction: toggleReaction,
@@ -445,6 +456,7 @@ const MobileMenu = props => {
     deleteMenuState: deleteMenuState,
     showRemove: showRemove,
     resendMessage: resendMessage,
+    deleteMessage: deleteMessage,
     setQuoteMessage: setQuoteMessage,
     parentRef: parentRef,
     onReplyInThread: onReplyInThread,
@@ -453,4 +465,4 @@ const MobileMenu = props => {
 };
 
 exports.MobileMenu = MobileMenu;
-//# sourceMappingURL=index-5c7818e3.js.map
+//# sourceMappingURL=index-0a25b9b2.js.map