@sendbird/uikit-react 3.6.3 → 3.6.4-rc-0

package/dist/index-11fe17e1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-11fe17e1.js","sources":["../src/ui/PlaceHolder/type.ts","../src/ui/PlaceHolder/index.tsx"],"sourcesContent":["function Types(): { [key: string]: string } {\n  return {\n    LOADING: 'LOADING',\n    NO_CHANNELS: 'NO_CHANNELS',\n    NO_MESSAGES: 'NO_MESSAGES',\n    WRONG: 'WRONG',\n    SEARCH_IN: 'SEARCH_IN',\n    SEARCHING: 'SEARCHING',\n    NO_RESULTS: 'NO_RESULTS',\n  };\n}\n\nexport default Types();\n","import React, { ReactElement, useContext } from 'react';\n\nimport './index.scss';\n\nimport _PlaceHolderTypes from './type';\nimport { LocalizationContext } from '../../lib/LocalizationContext';\n\nimport Icon, { IconTypes, IconColors } from '../Icon';\nimport Label, { LabelColors, LabelTypography } from '../Label';\nimport Loader from '../Loader';\n\nexport const PlaceHolderTypes = _PlaceHolderTypes;\n\nexport interface PlaceHolderProps {\n  className?: string | Array<string>;\n  type: typeof PlaceHolderTypes[keyof typeof PlaceHolderTypes];\n  iconSize?: string | number;\n  searchInString?: string;\n  retryToConnect?: () => void;\n}\n\nexport default function PlaceHolder({\n  className = '',\n  type,\n  iconSize,\n  searchInString = '',\n  retryToConnect = null,\n}: PlaceHolderProps): ReactElement {\n  const { stringSet } = useContext(LocalizationContext);\n  return (\n    <div\n      className={[\n        ...(Array.isArray(className) ? className : [className]),\n        'sendbird-place-holder',\n      ].join(' ')}\n    >\n      {\n        type === PlaceHolderTypes.LOADING && (\n          <Loader\n            width={iconSize || '48px'}\n            height={iconSize || '48px'}\n          >\n            <Icon\n              type={IconTypes.SPINNER}\n              fillColor={IconColors.PRIMARY}\n              width={iconSize || '48px'}\n              height={iconSize || '48px'}\n            />\n          </Loader>\n        )\n      }\n      {\n        (\n          type === PlaceHolderTypes.NO_CHANNELS\n          || type === PlaceHolderTypes.NO_MESSAGES\n          || type === PlaceHolderTypes.WRONG\n        ) && (\n          <div className=\"sendbird-place-holder__body\">\n            {\n              type === PlaceHolderTypes.NO_CHANNELS && (\n                <Icon\n                  className=\"sendbird-place-holder__body__icon\"\n                  type={IconTypes.CHAT}\n                  fillColor={IconColors.ON_BACKGROUND_3}\n                  width={iconSize || '64px'}\n                  height={iconSize || '64px'}\n                />\n              )\n            }\n            {\n              type === PlaceHolderTypes.WRONG && (\n                <Icon\n                  className=\"sendbird-place-holder__body__icon\"\n                  type={IconTypes.ERROR}\n                  fillColor={IconColors.ON_BACKGROUND_3}\n                  width={iconSize || '64px'}\n                  height={iconSize || '64px'}\n                />\n              )\n            }\n            {\n              type === PlaceHolderTypes.NO_MESSAGES && (\n                <Icon\n                  className=\"sendbird-place-holder__body__icon\"\n                  type={IconTypes.MESSAGE}\n                  fillColor={IconColors.ON_BACKGROUND_3}\n                  width={iconSize || '64px'}\n                  height={iconSize || '64px'}\n                />\n              )\n            }\n            <Label\n              className=\"sendbird-place-holder__body__text\"\n              type={LabelTypography.BODY_1}\n              color={LabelColors.ONBACKGROUND_2}\n            >\n              {\n                type === PlaceHolderTypes.NO_CHANNELS && (\n                  stringSet.PLACE_HOLDER__NO_CHANNEL\n                )\n              }\n              {\n                type === PlaceHolderTypes.WRONG && (\n                  stringSet.PLACE_HOLDER__WRONG\n                )\n              }\n              {\n                type === PlaceHolderTypes.NO_MESSAGES && (\n                  stringSet.PLACE_HOLDER__NO_MESSAGES\n                )\n              }\n            </Label>\n            {\n              retryToConnect && (\n                <div\n                  className=\"sendbird-place-holder__body__reconnect\"\n                  role=\"button\"\n                  onClick={retryToConnect}\n                  onKeyPress={retryToConnect}\n                  tabIndex={0}\n                >\n                  <Icon\n                    className=\"sendbird-place-holder__body__reconnect__icon\"\n                    type={IconTypes.REFRESH}\n                    fillColor={IconColors.PRIMARY}\n                    width=\"20px\"\n                    height=\"20px\"\n                  />\n                  <Label\n                    className=\"sendbird-place-holder__body__reconnect__text\"\n                    type={LabelTypography.BUTTON_1}\n                    color={LabelColors.PRIMARY}\n                  >\n                    {stringSet.PLACE_HOLDER__RETRY_TO_CONNECT}\n                  </Label>\n                </div>\n              )\n            }\n          </div>\n        )\n      }\n      {\n        (\n          type === PlaceHolderTypes.NO_RESULTS\n          || type === PlaceHolderTypes.SEARCH_IN\n          || type === PlaceHolderTypes.SEARCHING\n        ) && (\n          <div className=\"sendbird-place-holder__body--align-top\">\n            {\n              type === PlaceHolderTypes.SEARCH_IN && (\n                <div className=\"sendbird-place-holder__body--align-top__text\">\n                  <Label\n                    className=\"sendbird-place-holder__body--align-top__text__search-in\"\n                    type={LabelTypography.BUTTON_2}\n                    color={LabelColors.ONBACKGROUND_2}\n                  >\n                    {stringSet.SEARCH_IN}\n                  </Label>\n                  <Label\n                    className=\"sendbird-place-holder__body--align-top__text__channel-name\"\n                    type={LabelTypography.BUTTON_2}\n                    color={LabelColors.PRIMARY}\n                  >\n                    {`'${searchInString}`}\n                  </Label>\n                  <Label\n                    className=\"sendbird-place-holder__body--align-top__text__quote\"\n                    type={LabelTypography.BUTTON_2}\n                    color={LabelColors.PRIMARY}\n                  >\n                    {'\\''}\n                  </Label>\n                </div>\n              )\n            }\n            {\n              type === PlaceHolderTypes.SEARCHING && (\n                <Label\n                  className=\"sendbird-place-hlder__body--align-top__searching\"\n                  type={LabelTypography.BODY_1}\n                  color={LabelColors.ONBACKGROUND_2}\n                >\n                  {stringSet.SEARCHING}\n                </Label>\n              )\n            }\n            {\n              type === PlaceHolderTypes.NO_RESULTS && (\n                <Label\n                  className=\"sendbird-place-hlder__body--align-top__no-result\"\n                  type={LabelTypography.BODY_1}\n                  color={LabelColors.ONBACKGROUND_2}\n                >\n                  {stringSet.NO_SEARCHED_MESSAGE}\n                </Label>\n              )\n            }\n          </div>\n        )\n      }\n    </div>\n  );\n}\n"],"names":["Types","LOADING","NO_CHANNELS","NO_MESSAGES","WRONG","SEARCH_IN","SEARCHING","NO_RESULTS","PlaceHolderTypes","_PlaceHolderTypes","PlaceHolder","_ref","className","type","iconSize","searchInString","retryToConnect","stringSet","useContext","LocalizationContext","React","createElement","Array","isArray","join","Loader","width","height","Icon","IconTypes","SPINNER","fillColor","IconColors","PRIMARY","CHAT","ON_BACKGROUND_3","ERROR","MESSAGE","Label","LabelTypography","BODY_1","color","LabelColors","ONBACKGROUND_2","PLACE_HOLDER__NO_CHANNEL","PLACE_HOLDER__WRONG","PLACE_HOLDER__NO_MESSAGES","role","onClick","onKeyPress","tabIndex","REFRESH","BUTTON_1","PLACE_HOLDER__RETRY_TO_CONNECT","BUTTON_2","NO_SEARCHED_MESSAGE"],"mappings":"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"}

package/dist/index-3461216d.js

@@ -0,0 +1,76 @@
+import { useRef, useEffect, useCallback } from 'react';
+import { S as SCROLL_BUFFER } from './consts-44eaef6b.js';
+
+function useDebounce(callback, delay) {
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    // Cleanup the timeout on unmount
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  function debounceFunction() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      callback(...args);
+    }, delay);
+  }
+  return debounceFunction;
+}
+
+const DELAY = 500;
+function calcScrollBottom(scrollHeight, scrollTop) {
+  return scrollHeight - scrollTop;
+}
+function useHandleOnScrollCallback(_ref) {
+  let {
+    hasMore,
+    hasNext,
+    onScroll,
+    scrollRef,
+    setShowScrollDownButton
+  } = _ref;
+  const scrollCb = useCallback(() => {
+    const element = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+    if (element == null) {
+      return;
+    }
+    const {
+      scrollTop,
+      scrollHeight,
+      clientHeight
+    } = element;
+    // https://sendbird.atlassian.net/browse/SBISSUE-11759
+    // the edge case where channel is inside a page that already has scroll
+    // scrollintoView will move the whole page, which we dont want
+    const scrollBottom = calcScrollBottom(scrollHeight, scrollTop);
+    // even if there is more to fetch or not,
+    // we still have to show the scroll to bottom button
+    if (typeof setShowScrollDownButton === 'function') {
+      setShowScrollDownButton(scrollHeight > scrollTop + clientHeight + 1);
+    }
+    if (hasMore && scrollTop < SCROLL_BUFFER) {
+      onScroll(() => {
+        // sets the scroll position to the bottom of the new messages
+        element.scrollTop = element.scrollHeight - scrollBottom;
+      });
+    }
+    if (hasNext) {
+      onScroll(() => {
+        // sets the scroll position to the top of the new messages
+        element.scrollTop = scrollTop - (scrollHeight - element.scrollHeight);
+      });
+    }
+  }, [setShowScrollDownButton, hasMore, onScroll, scrollRef]);
+  return useDebounce(scrollCb, DELAY);
+}
+
+export { useHandleOnScrollCallback as a, useDebounce as u };
+//# sourceMappingURL=index-3461216d.js.map

package/dist/index-3461216d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-3461216d.js","sources":["../src/hooks/useDebounce.ts","../src/hooks/useHandleOnScrollCallback/index.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nexport function useDebounce<T extends(...args: any[]) => void>(callback: T, delay: number): T {\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    // Cleanup the timeout on unmount\n    return () => {\n      if (timeoutRef.current) {\n        clearTimeout(timeoutRef.current);\n      }\n    };\n  }, []);\n\n  function debounceFunction(...args: Parameters<T>) {\n    if (timeoutRef.current) {\n      clearTimeout(timeoutRef.current);\n    }\n\n    timeoutRef.current = setTimeout(() => {\n      callback(...args);\n    }, delay);\n  }\n\n  return debounceFunction as T;\n}\n","import React, { useCallback } from 'react';\nimport { SCROLL_BUFFER } from '../../utils/consts';\nimport { useDebounce } from '../useDebounce';\n\nconst DELAY = 500;\n\nexport interface UseHandleOnScrollCallbackProps {\n  hasMore: boolean;\n  hasNext?: boolean;\n  onScroll(callback: () => void): void;\n  scrollRef: React.RefObject<HTMLDivElement>;\n  setShowScrollDownButton?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nexport function calcScrollBottom(scrollHeight: number, scrollTop: number): number {\n  return scrollHeight - scrollTop;\n}\n\nexport function useHandleOnScrollCallback({\n  hasMore,\n  hasNext,\n  onScroll,\n  scrollRef,\n  setShowScrollDownButton,\n}: UseHandleOnScrollCallbackProps): () => void {\n  const scrollCb = useCallback(() => {\n    const element = scrollRef?.current;\n    if (element == null) {\n      return;\n    }\n\n    const {\n      scrollTop,\n      scrollHeight,\n      clientHeight,\n    } = element;\n    // https://sendbird.atlassian.net/browse/SBISSUE-11759\n    // the edge case where channel is inside a page that already has scroll\n    // scrollintoView will move the whole page, which we dont want\n    const scrollBottom = calcScrollBottom(scrollHeight, scrollTop);\n    // even if there is more to fetch or not,\n    // we still have to show the scroll to bottom button\n    if (typeof setShowScrollDownButton === 'function') {\n      setShowScrollDownButton(scrollHeight > scrollTop + clientHeight + 1);\n    }\n    if (hasMore && scrollTop < SCROLL_BUFFER) {\n      onScroll(() => {\n        // sets the scroll position to the bottom of the new messages\n        element.scrollTop = element.scrollHeight - scrollBottom;\n      });\n    }\n    if (hasNext) {\n      onScroll(() => {\n        // sets the scroll position to the top of the new messages\n        element.scrollTop = scrollTop - (scrollHeight - element.scrollHeight);\n      });\n    }\n  }, [\n    setShowScrollDownButton,\n    hasMore,\n    onScroll,\n    scrollRef,\n  ]);\n\n  return useDebounce(scrollCb, DELAY);\n}\n"],"names":["useDebounce","callback","delay","timeoutRef","useRef","useEffect","current","clearTimeout","debounceFunction","_len","arguments","length","args","Array","_key","setTimeout","DELAY","calcScrollBottom","scrollHeight","scrollTop","useHandleOnScrollCallback","_ref","hasMore","hasNext","onScroll","scrollRef","setShowScrollDownButton","scrollCb","useCallback","element","clientHeight","scrollBottom","SCROLL_BUFFER"],"mappings":"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"}

package/dist/index-35696958.js

@@ -0,0 +1,450 @@
+import React__default, { useState } from 'react';
+import ContextMenu, { MenuItems, MenuItem } from './ui/ContextMenu.js';
+import { q as isUserMessage, C as isSentMessage, D as isFailedMessage, E as isPendingMessage, k as isFileMessage, d as isVoiceMessage, O as isThreadMessage, F as copyToClipboard, G as getEmojiListAll } from './index-99ab01f6.js';
+import { u as useLocalization } from './LocalizationContext-1701e5c8.js';
+import Icon, { IconTypes, IconColors } from './ui/Icon.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from './index-f50d7ab0.js';
+import BottomSheet from './ui/BottomSheet.js';
+import ImageRenderer from './ui/ImageRenderer.js';
+import ReactionButton from './ui/ReactionButton.js';
+
+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
+  } = useLocalization();
+  const showMenuItemCopy = isUserMessage(message);
+  const showMenuItemEdit = isUserMessage(message) && isSentMessage(message) && isByMe;
+  const showMenuItemResend = isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
+  const showMenuItemDelete = !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 = !isPendingMessage(message) && isFileMessage(message) && !(isVoiceMessage(message) && (channel !== null && channel !== void 0 && channel.isSuper || channel !== null && channel !== void 0 && channel.isBroadcast));
+  const showMenuItemReply = replyType === 'QUOTE_REPLY' && !isFailedMessage(message) && !isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel());
+  const showMenuItemThread = replyType === 'THREAD' && !isOpenedFromThread && !isFailedMessage(message) && !isPendingMessage(message) && !isThreadMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel());
+  const fileMessage = message;
+  return /*#__PURE__*/React__default.createElement(ContextMenu, {
+    isOpen: true,
+    menuItems: () => {
+      var _message$parentMessag, _message$parentMessag2, _message$parentMessag3;
+      return /*#__PURE__*/React__default.createElement(MenuItems, {
+        className: "sendbird-message__mobile-context-menu",
+        parentRef: parentRef,
+        parentContainRef: parentRef,
+        closeDropdown: hideMenu
+      }, showMenuItemCopy && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-copy",
+        onClick: () => {
+          hideMenu();
+          copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
+        },
+        dataSbId: "ui_mobile_message_item_menu_copy"
+      }, /*#__PURE__*/React__default.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1,
+        color: LabelColors.ONBACKGROUND_1
+      }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__COPY), /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.COPY,
+        fillColor: IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemReply && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-reply",
+        onClick: () => {
+          hideMenu();
+          setQuoteMessage(message);
+        },
+        disable: ((_message$parentMessag = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _message$parentMessag !== void 0 ? _message$parentMessag : 0) > 0,
+        dataSbId: "ui_mobile_message_item_menu_reply"
+      }, /*#__PURE__*/React__default.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1,
+        color: ((_message$parentMessag2 = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _message$parentMessag2 !== void 0 ? _message$parentMessag2 : 0) > 0 ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1
+      }, stringSet.MESSAGE_MENU__REPLY), /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.REPLY,
+        fillColor: ((_message$parentMessag3 = message === null || message === void 0 ? void 0 : message.parentMessageId) !== null && _message$parentMessag3 !== void 0 ? _message$parentMessag3 : 0) > 0 ? IconColors.ON_BACKGROUND_4 : IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemThread && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-reply",
+        onClick: () => {
+          hideMenu();
+          onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
+            message
+          });
+        },
+        dataSbId: "ui_mobile_message_item_menu_thread"
+      }, /*#__PURE__*/React__default.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1,
+        color: LabelColors.ONBACKGROUND_1
+      }, stringSet.MESSAGE_MENU__THREAD), /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.THREAD,
+        fillColor: IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemEdit && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-edit",
+        onClick: () => {
+          hideMenu();
+          showEdit(true);
+        },
+        dataSbId: "ui_mobile_message_item_menu_edit"
+      }, /*#__PURE__*/React__default.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1,
+        color: LabelColors.ONBACKGROUND_1
+      }, stringSet.MESSAGE_MENU__EDIT), /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.EDIT,
+        fillColor: IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemResend && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-resend",
+        onClick: () => {
+          hideMenu();
+          resendMessage(message);
+        },
+        dataSbId: "ui_mobile_message_item_menu_resend"
+      }, /*#__PURE__*/React__default.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1,
+        color: LabelColors.ONBACKGROUND_1
+      }, stringSet.MESSAGE_MENU__RESEND), /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.REFRESH,
+        fillColor: IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemDeleteFinal && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-delete",
+        onClick: () => {
+          if (!disableDelete) {
+            hideMenu();
+            showRemove(true);
+          }
+        },
+        disable: disableDelete,
+        dataSbId: "ui_mobile_message_item_menu_delete"
+      }, /*#__PURE__*/React__default.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1,
+        color: disableDelete ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1
+      }, stringSet.MESSAGE_MENU__DELETE), /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.DELETE,
+        fillColor: disableDelete ? IconColors.ON_BACKGROUND_4 : IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      })), showMenuItemDownload && /*#__PURE__*/React__default.createElement(MenuItem, {
+        className: "sendbird-message__mobile-context-menu-item menu-item-save",
+        onClick: () => {
+          hideMenu();
+        },
+        dataSbId: "ui_mobile_message_item_menu_download_file"
+      }, /*#__PURE__*/React__default.createElement("a", {
+        className: "sendbird-message__contextmenu--hyperlink",
+        rel: "noopener noreferrer",
+        href: fileMessage === null || fileMessage === void 0 ? void 0 : fileMessage.url,
+        target: "_blank"
+      }, /*#__PURE__*/React__default.createElement(Label, {
+        type: LabelTypography.SUBTITLE_1,
+        color: LabelColors.ONBACKGROUND_1
+      }, stringSet.MESSAGE_MENU__SAVE), /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.DOWNLOAD,
+        fillColor: IconColors.PRIMARY,
+        width: "24px",
+        height: "24px"
+      }))));
+    }
+  });
+};
+
+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
+  } = useLocalization();
+  const showMenuItemCopy = isUserMessage(message);
+  const showMenuItemEdit = isUserMessage(message) && isSentMessage(message) && isByMe;
+  const showMenuItemResend = isFailedMessage(message) && (message === null || message === void 0 ? void 0 : message.isResendable) && isByMe;
+  const showMenuItemDelete = !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 = !isPendingMessage(message) && isFileMessage(message) && !isVoiceMessage(message);
+  const showReaction = !isFailedMessage(message) && !isPendingMessage(message) && isReactionEnabled;
+  const showMenuItemReply = replyType === 'QUOTE_REPLY' && !isFailedMessage(message) && !isPendingMessage(message) && (channel === null || channel === void 0 ? void 0 : channel.isGroupChannel()) && !(channel !== null && channel !== void 0 && channel.isBroadcast);
+  const showMenuItemThread = replyType === 'THREAD' && !isOpenedFromThread && !isFailedMessage(message) && !isPendingMessage(message) && !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] = useState(false);
+  const emojis = 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;
+  return /*#__PURE__*/React__default.createElement(BottomSheet, {
+    onBackdropClick: hideMenu
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet"
+  }, showReaction && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet-reactions"
+  }, /*#__PURE__*/React__default.createElement("ul", {
+    className: "sendbird-message__bottomsheet-reaction-bar"
+  }, /*#__PURE__*/React__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);
+    return /*#__PURE__*/React__default.createElement(ReactionButton, {
+      key: emoji.key,
+      width: `${EMOJI_SIZE}px`,
+      height: `${EMOJI_SIZE}px`,
+      selected: isReacted,
+      onClick: () => {
+        hideMenu();
+        toggleReaction(message, emoji.key, isReacted);
+      },
+      dataSbId: `ui_mobile_emoji_reactions_menu_${emoji.key}`
+    }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
+      url: (emoji === null || emoji === void 0 ? void 0 : emoji.url) || '',
+      width: "28px",
+      height: "28px",
+      placeHolder: style => /*#__PURE__*/React__default.createElement("div", {
+        style: style
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        type: IconTypes.QUESTION,
+        fillColor: IconColors.ON_BACKGROUND_3,
+        width: "28px",
+        height: "28px"
+      }))
+    }));
+  }), canShowMoreEmojis && !showEmojisOnly && /*#__PURE__*/React__default.createElement(ReactionButton, {
+    key: "emoji_more",
+    width: "38px",
+    height: "38px",
+    onClick: () => {
+      setShowEmojisOnly(true);
+    },
+    dataSbId: "ui_mobile_emoji_reactions_menu_emojiadd"
+  }, /*#__PURE__*/React__default.createElement(ImageRenderer, {
+    url: '',
+    width: "28px",
+    height: "28px",
+    placeHolder: style => /*#__PURE__*/React__default.createElement("div", {
+      style: style
+    }, /*#__PURE__*/React__default.createElement(Icon, {
+      type: IconTypes.EMOJI_MORE,
+      fillColor: IconColors.ON_BACKGROUND_3,
+      width: "28px",
+      height: "28px"
+    }))
+  }))))), !showEmojisOnly && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet--actions"
+  }, showMenuItemCopy && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet--action",
+    onClick: () => {
+      hideMenu();
+      copyToClipboard(message === null || message === void 0 ? void 0 : message.message);
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.COPY,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__COPY)), showMenuItemEdit && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet--action",
+    onClick: () => {
+      hideMenu();
+      showEdit(true);
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.EDIT,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__EDIT)), showMenuItemResend && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet--action",
+    onClick: () => {
+      hideMenu();
+      resendMessage(message);
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.REFRESH,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__RESEND)), showMenuItemReply && /*#__PURE__*/React__default.createElement("div", {
+    className: `sendbird-message__bottomsheet--action
+                      ${disableReaction ? 'sendbird-message__bottomsheet--action-disabled' : ''}
+                    `,
+    role: "menuitem",
+    "aria-disabled": disableReaction ? true : false,
+    onClick: () => {
+      if (!disableReaction) {
+        hideMenu();
+        setQuoteMessage(message);
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.REPLY,
+    fillColor: disableReaction ? IconColors.ON_BACKGROUND_3 : IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1,
+    color: disableReaction ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1
+  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__REPLY)), showMenuItemThread && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet--action",
+    onClick: () => {
+      hideMenu();
+      onReplyInThread === null || onReplyInThread === void 0 ? void 0 : onReplyInThread({
+        message
+      });
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.THREAD,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, stringSet.MESSAGE_MENU__THREAD)), showMenuItemDeleteFinal && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet--action",
+    onClick: () => {
+      if (!disableDelete) {
+        hideMenu();
+        showRemove === null || showRemove === void 0 ? void 0 : showRemove(true);
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.DELETE,
+    fillColor: disableDelete ? IconColors.ON_BACKGROUND_4 : IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1,
+    color: disableDelete ? LabelColors.ONBACKGROUND_4 : LabelColors.ONBACKGROUND_1
+  }, stringSet === null || stringSet === void 0 ? void 0 : stringSet.MESSAGE_MENU__DELETE)), showMenuItemDownload && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-message__bottomsheet--action",
+    onClick: () => {
+      hideMenu();
+    }
+  }, /*#__PURE__*/React__default.createElement("a", {
+    className: "sendbird-message__bottomsheet--hyperlink",
+    rel: "noopener noreferrer",
+    href: fileMessage === null || fileMessage === void 0 ? void 0 : fileMessage.url,
+    target: "_blank"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: IconTypes.DOWNLOAD,
+    fillColor: IconColors.PRIMARY,
+    width: "24px",
+    height: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, 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;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, isReactionEnabled ? /*#__PURE__*/React__default.createElement(MobileBottomSheet, {
+    channel: channel,
+    message: message,
+    hideMenu: hideMenu,
+    isByMe: isByMe,
+    userId: userId,
+    replyType: replyType,
+    disabled: disabled,
+    showRemove: showRemove,
+    showEdit: showEdit,
+    deleteMenuState: deleteMenuState,
+    resendMessage: resendMessage,
+    setQuoteMessage: setQuoteMessage,
+    emojiContainer: emojiContainer,
+    toggleReaction: toggleReaction,
+    isReactionEnabled: isReactionEnabled,
+    onReplyInThread: onReplyInThread,
+    isOpenedFromThread: isOpenedFromThread
+  }) : /*#__PURE__*/React__default.createElement(MobileContextMenu, {
+    channel: channel,
+    userId: userId,
+    message: message,
+    hideMenu: hideMenu,
+    isByMe: isByMe,
+    showEdit: showEdit,
+    replyType: replyType,
+    disabled: disabled,
+    deleteMenuState: deleteMenuState,
+    showRemove: showRemove,
+    resendMessage: resendMessage,
+    setQuoteMessage: setQuoteMessage,
+    parentRef: parentRef,
+    onReplyInThread: onReplyInThread,
+    isOpenedFromThread: isOpenedFromThread
+  }));
+};
+
+export { MobileMenu as M };
+//# sourceMappingURL=index-35696958.js.map