@sendbird/uikit-react 3.13.2-rc.0 → 3.13.3-rc.0

package/App.js

@@ -1,7 +1,7 @@
 import React__default, { useState, useEffect } from 'react';
 import { SendbirdProvider } from './SendbirdProvider.js';
-import { u as useMediaQueryContext } from './chunks/bundle-Cs0ZtBj7.js';
-import { _ as __assign } from './chunks/bundle-aAoUY1dC.js';
+import { u as useMediaQueryContext } from './chunks/bundle-C1yuAXw9.js';
+import { _ as __assign } from './chunks/bundle-D5O3p2sd.js';
 import { GroupChannel } from './GroupChannel.js';
 import { GroupChannelList } from './GroupChannelList.js';
 import Channel from './Channel.js';
@@ -11,84 +11,84 @@ import MessageSearchPannel from './MessageSearch.js';
 import Thread from './Thread.js';
 import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
 import { useSendbirdStateContext } from './useSendbirdStateContext.js';
-import { u as uuidv4 } from './chunks/bundle-CanFPW6u.js';
-import { u as useVoicePlayerContext, a as ALL } from './chunks/bundle-gO4JLOKo.js';
+import { u as uuidv4 } from './chunks/bundle-D9jjb4vl.js';
+import { u as useVoicePlayerContext, a as ALL } from './chunks/bundle-hj2wCdHR.js';
 import '@sendbird/uikit-tools';
 import './withSendbird.js';
 import 'css-vars-ponyfill';
-import './chunks/bundle-0Xv23Jlo.js';
-import './chunks/bundle-wKPuxvL-.js';
-import './chunks/bundle-DkTxVi3R.js';
+import './chunks/bundle-DmJV6gQD.js';
+import './chunks/bundle-DAyGLgqp.js';
+import './chunks/bundle-Ly0drX6F.js';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
-import './chunks/bundle-CCx8yXVd.js';
+import './chunks/bundle-CwzTv0XS.js';
 import './utils/message/getOutgoingMessageState.js';
-import './chunks/bundle-B4CUv14M.js';
-import './chunks/bundle-2qPS-99f.js';
+import './chunks/bundle-DU1sAKMN.js';
+import './chunks/bundle-KgsD7sHP.js';
 import './VoiceRecorder/context.js';
-import './chunks/bundle-97fd4oe2.js';
-import './chunks/bundle-eNe8jUiS.js';
-import './chunks/bundle-jYzea4Ke.js';
-import './chunks/bundle-BQntI2YH.js';
+import './chunks/bundle-SR6DLu-t.js';
+import './chunks/bundle-Dal90qsH.js';
+import './chunks/bundle-BXtCWdlN.js';
+import './chunks/bundle-BK1kBm4R.js';
 import 'react-dom';
 import './ui/IconButton.js';
 import './ui/Button.js';
-import './chunks/bundle-BnG5XETL.js';
+import './chunks/bundle-D9r0cGat.js';
 import './ui/Icon.js';
-import './chunks/bundle-CAdKFBfs.js';
-import './chunks/bundle-CPRA25ls.js';
+import './chunks/bundle-xoAyfPjv.js';
+import './chunks/bundle-D82-9DC8.js';
 import './hooks/useModal.js';
+import './ui/ContextMenu.js';
+import './ui/SortByRow.js';
 import './GroupChannel/context.js';
 import '@sendbird/chat/message';
-import './chunks/bundle-C8Oe5QOQ.js';
-import './chunks/bundle-gSigJ2qv.js';
-import './chunks/bundle-6c04eWHT.js';
-import './chunks/bundle-lYawLy67.js';
-import './chunks/bundle-DlBu0K2F.js';
-import './chunks/bundle-caD0Cpiq.js';
-import './chunks/bundle-CkCkzFFu.js';
+import './chunks/bundle-B3YSUEgS.js';
+import './chunks/bundle-DCUEuROU.js';
+import './chunks/bundle-BggUR2rY.js';
+import './chunks/bundle-DVw9N5gr.js';
+import './chunks/bundle-BncIazvl.js';
+import './chunks/bundle-mRKEMtyQ.js';
+import './chunks/bundle-DmPACCke.js';
 import './GroupChannel/components/GroupChannelUI.js';
-import './chunks/bundle-LIsneT-k.js';
+import './chunks/bundle-qGxP6Pc7.js';
 import './GroupChannel/components/TypingIndicator.js';
-import './chunks/bundle-CHKEsMqU.js';
+import './chunks/bundle-BLcD7awq.js';
 import './ui/ConnectionStatus.js';
 import './ui/PlaceHolder.js';
 import './ui/Loader.js';
 import './GroupChannel/components/GroupChannelHeader.js';
-import './chunks/bundle-D4mHGcWb.js';
+import './chunks/bundle-C_p9TOC_.js';
 import './ui/ChannelAvatar.js';
-import './chunks/bundle-CeNRu1nh.js';
+import './chunks/bundle-DjgD9t7D.js';
 import './ui/ImageRenderer.js';
-import './chunks/bundle-B_5nSVDN.js';
-import './chunks/bundle-D4kbZg4e.js';
-import './chunks/bundle-DBy3c8gM.js';
+import './chunks/bundle-VcVV1LMj.js';
+import './chunks/bundle-CnNbY4d-.js';
+import './chunks/bundle-BQvbZc7K.js';
 import './GroupChannel/components/MessageList.js';
 import './GroupChannel/components/Message.js';
-import './chunks/bundle-CwQ5U5f7.js';
-import './chunks/bundle-Dj5aDnzf.js';
-import './chunks/bundle-Ds5aQSz-.js';
+import './chunks/bundle-CTbKbzja.js';
+import './chunks/bundle-BAdGwFBk.js';
+import './chunks/bundle-C8iYQbFu.js';
 import './Message/hooks/useDirtyGetMentions.js';
 import './ui/DateSeparator.js';
-import './chunks/bundle-C5ygMhyk.js';
+import './chunks/bundle-DFRQ-Oo2.js';
 import './ui/MessageInput.js';
-import './chunks/bundle-Bsh5KSxb.js';
-import './chunks/bundle-BY9JnLew.js';
+import './chunks/bundle-CHGpi0M7.js';
+import './chunks/bundle-n75SbS1b.js';
 import 'dompurify';
-import './chunks/bundle-D1DIGSmr.js';
-import './chunks/bundle-B4EY2YKu.js';
-import './chunks/bundle-6n4c-yxi.js';
-import './chunks/bundle-Bjr0f1Zp.js';
+import './chunks/bundle-D2NwprR1.js';
+import './chunks/bundle-_1Q-aBYk.js';
+import './chunks/bundle-EgY839OD.js';
+import './chunks/bundle-CnTDWHJx.js';
 import './ui/MessageContent.js';
-import './chunks/bundle-Cbgk06HJ.js';
-import './chunks/bundle-D1vFAfKb.js';
-import './chunks/bundle-FDedpAl7.js';
+import './chunks/bundle-CpIXjIkm.js';
+import './chunks/bundle-BVp7_cQQ.js';
+import './chunks/bundle-BjJPI7Sc.js';
 import './ui/MessageItemMenu.js';
-import './ui/ContextMenu.js';
-import './ui/SortByRow.js';
-import './chunks/bundle-CQxSmK2v.js';
+import './chunks/bundle-4hS7j-gs.js';
 import './ui/MessageItemReactionMenu.js';
 import './ui/ReactionButton.js';
-import './chunks/bundle-Cg7eHJV0.js';
+import './chunks/bundle-C2iUqETc.js';
 import './ui/EmojiReactions.js';
 import './ui/ReactionBadge.js';
 import './ui/BottomSheet.js';
@@ -102,19 +102,19 @@ import './ui/TooltipWrapper.js';
 import './Message/context.js';
 import './ui/AdminMessage.js';
 import './ui/QuoteMessage.js';
-import './chunks/bundle-BCeNaIWw.js';
-import './chunks/bundle-DMQ1a9pl.js';
+import './chunks/bundle-HB10teHo.js';
+import './chunks/bundle-5OktsffG.js';
 import './ui/ThreadReplies.js';
 import './ui/OGMessageItemBody.js';
-import './chunks/bundle-CQhhBQgY.js';
+import './chunks/bundle-D8mVQVHI.js';
 import './ui/MentionLabel.js';
 import './ui/LinkLabel.js';
 import './ui/TextMessageItemBody.js';
 import './ui/FileMessageItemBody.js';
 import './ui/TextButton.js';
-import './chunks/bundle-CHaqW2Sj.js';
-import './chunks/bundle-CeN11uF4.js';
-import './chunks/bundle-BGdbKz3x.js';
+import './chunks/bundle-CnJ586P-.js';
+import './chunks/bundle-DBqlfZ2d.js';
+import './chunks/bundle-BhjIUcay.js';
 import './ui/VoiceMessageItemBody.js';
 import './ui/ProgressBar.js';
 import './VoicePlayer/useVoicePlayer.js';
@@ -122,7 +122,7 @@ import './ui/PlaybackTime.js';
 import './ui/ThumbnailMessageItemBody.js';
 import './ui/UnknownMessageItemBody.js';
 import './ui/TemplateMessageItemBody.js';
-import './chunks/bundle-LUBbQW82.js';
+import './chunks/bundle-DIc-itow.js';
 import './ui/FallbackTemplateMessageItemBody.tsx.js';
 import './ui/LoadingTemplateMessageItemBody.tsx.js';
 import './ui/FeedbackIconButton.js';
@@ -130,59 +130,59 @@ import './ui/MobileFeedbackMenu.js';
 import './Channel/components/MessageFeedbackModal.js';
 import './ui/Input.js';
 import './GroupChannel/components/SuggestedReplies.js';
-import './chunks/bundle-C5C8XKZl.js';
+import './chunks/bundle-CYV8zeeH.js';
 import './GroupChannel/components/FileViewer.js';
-import './chunks/bundle-B24GwCXx.js';
+import './chunks/bundle-Kmel75IS.js';
 import './GroupChannel/components/RemoveMessageModal.js';
-import './chunks/bundle-C0risNHg.js';
-import './chunks/bundle-DcZ6VbHw.js';
+import './chunks/bundle-C7Vg2sg7.js';
+import './chunks/bundle-C7zPvb8E.js';
 import './Channel/utils/getMessagePartsInfo.js';
 import './Channel/utils/compareMessagesForGrouping.js';
 import './GroupChannel/components/UnreadCount.js';
 import './GroupChannel/components/FrozenNotification.js';
 import './ui/TypingIndicatorBubble.js';
 import './GroupChannel/components/MessageInputWrapper.js';
-import './chunks/bundle-DbYE20Ij.js';
+import './chunks/bundle-CabpA5ei.js';
 import './GroupChannel/components/SuggestedMentionList.js';
 import './ui/QuoteMessageInput.js';
 import './VoiceRecorder/useVoiceRecorder.js';
-import './chunks/bundle-BiQds65K.js';
-import './chunks/bundle-CzNavr80.js';
+import './chunks/bundle-DufKYoOA.js';
+import './chunks/bundle-ac7nQTxZ.js';
 import './GroupChannelList/context.js';
 import './GroupChannelList/components/GroupChannelListUI.js';
-import './chunks/bundle-DarlDWy7.js';
+import './chunks/bundle-Ccrcu-lm.js';
 import './GroupChannelList/components/GroupChannelListHeader.js';
 import './EditUserProfile.js';
 import './EditUserProfile/context.js';
 import './EditUserProfile/components/EditUserProfileUI.js';
 import './GroupChannelList/components/GroupChannelPreviewAction.js';
 import './GroupChannelList/components/GroupChannelListItem.js';
-import './chunks/bundle-Cxjgwfwy.js';
+import './chunks/bundle-o68clRDX.js';
 import './ui/Badge.js';
 import './ui/MentionUserLabel.js';
 import './GroupChannelList/components/AddGroupChannel.js';
-import './chunks/bundle-b4p8k2uf.js';
+import './chunks/bundle-XUXMq2yd.js';
 import './CreateChannel.js';
 import './CreateChannel/components/CreateChannelUI.js';
-import './chunks/bundle-DlHY-98U.js';
+import './chunks/bundle-TgWo1p5X.js';
 import './CreateChannel/components/InviteUsers.js';
 import './CreateChannel/components/SelectChannelType.js';
 import './Channel/context.js';
-import './chunks/bundle-OJu5PM7q.js';
-import './chunks/bundle-CvuK4Gl-.js';
-import './chunks/bundle-Czh0_N3j.js';
-import './chunks/bundle-C3mD4WPX.js';
-import './chunks/bundle-BbEkZYpE.js';
-import './chunks/bundle-CvvqaAH_.js';
+import './chunks/bundle-D0kBwA_N.js';
+import './chunks/bundle-DqzqAw0N.js';
+import './chunks/bundle-CPj7I_Ht.js';
+import './chunks/bundle-CXTic09W.js';
+import './chunks/bundle-Dg7p2p52.js';
+import './chunks/bundle-CaeGyC4L.js';
 import './Channel/components/ChannelUI.js';
 import './Channel/components/ChannelHeader.js';
 import './Channel/components/MessageList.js';
 import './Channel/components/Message.js';
 import './Channel/components/FileViewer.js';
 import './Channel/components/RemoveMessageModal.js';
-import './chunks/bundle-L4mF-vqf.js';
+import './chunks/bundle-BLA2XkKm.js';
 import './Channel/components/MessageInput.js';
-import './chunks/bundle-BTAzxMsc.js';
+import './chunks/bundle-hRWx3bGt.js';
 import './ChannelList/components/ChannelListUI.js';
 import './ChannelList/components/ChannelPreview.js';
 import './ChannelList/components/AddChannel.js';
@@ -194,10 +194,10 @@ import './ChannelSettings/components/EditDetailsModal.js';
 import './ChannelSettings/components/ModerationPanel.js';
 import './ui/Accordion.js';
 import './ui/AccordionGroup.js';
-import './chunks/bundle-_9XBB-ZS.js';
+import './chunks/bundle-B0tCGD6H.js';
 import './ui/Toggle.js';
 import './ChannelSettings/components/UserListItem.js';
-import './chunks/bundle-DsU79j1A.js';
+import './chunks/bundle-CXhtYaaJ.js';
 import './ChannelSettings/components/LeaveChannel.js';
 import './ChannelSettings/components/UserPanel.js';
 import './MessageSearch/components/MessageSearchUI.js';
@@ -208,9 +208,9 @@ import './Thread/context.js';
 import './Thread/context/types.js';
 import './Thread/components/ThreadUI.js';
 import './Thread/components/ParentMessageInfo.js';
-import './chunks/bundle-CE_8gK7h.js';
+import './chunks/bundle-DIdcX_-2.js';
 import './Thread/components/ParentMessageInfoItem.js';
-import './chunks/bundle-vVxTsDkS.js';
+import './chunks/bundle-BBFU4eTL.js';
 import './Thread/components/ThreadHeader.js';
 import './Thread/components/ThreadList.js';
 import './Thread/components/ThreadListItem.js';

package/CHANGELOG.md

@@ -1,9 +1,83 @@
 # Changelog - v3
 
+## [v3.13.3] (Mar 22, 2024)
+
+### Features
+* Added a `renderMenuItem` to the `MessageMenu` component
+  * How to use?
+  ```tsx
+  <GroupChannel
+    renderMessageContent={(props) => (
+      <MessageContent
+        {...props}
+        renderMessageMenu={(props) => (
+          <MessageMenu
+            {...props}
+            renderMenuItem={(props) => {
+              const {
+                className,
+                onClick,
+                dataSbId,
+                disable,
+                text,
+              } = props;
+              return <MenuItem /> // Render Custom Menu Item
+            }}
+          />
+        )}
+      />
+    )}
+  />
+  ```
+* Added `onBeforeDownloadFileMessage` to the `<GroupChannel />` and `<Thread />` modules
+  * How to use?
+  ```tsx
+  const ONE_MB = 1024 * 1024;
+  /**
+    * Use this list to check if it's displayed as a ThumbnailMessage.
+    * (https://github.com/sendbird/sendbird-uikit-react/blob/main/src/utils/index.ts)
+  */
+  const ThumbnailMessageTypes = [
+    'image/jpeg',
+    'image/jpg',
+    'image/png',
+    'image/gif',
+    'image/svg+xml',
+    'image/webp', // not supported in IE
+    'video/mpeg',
+    'video/ogg',
+    'video/webm',
+    'video/mp4',
+  ];
+
+  <GroupChannel // or Thread
+    onBeforeDownloadFileMessage={async ({ message, index = null }) => {
+      if (message.isFileMessage()) {
+        const confirmed = window.confirm(`The file size is ${(message.size / ONE_MB).toFixed(2)}MB. Would you like to continue downloading?`);
+        return confirmed;
+      }
+      if (message.isMultipleFilesMessage()) {
+        const confirmed = window.confirm(`The file size is ${(message.fileInfoList[index].fileSize / ONE_MB).toFixed(2)}MB. Would you like to continue downloading?`);
+        return confirmed;
+      }
+      return true;
+    }}
+  />
+  ```
+* Added `onDownloadClick` to the `FileViewer`, `FileViewerView`, `MobileBottomSheet`, `MobileContextMenu`, and `MobileMenu`
+
+### Fixes
+* Improved the stability of the ChannelSettings Modals
+  * Support menu on the `MembersModal`, `MutedMembersModal`, and `OperatorsModal`
+  * Display `Operator` description on the `MembersModal`
+* Fixed the `width` size of the `OGMessageItemBody` component
+* Added fallback logic on template rendering error
+* Replaced the hardcoded text ` (You)` with the StringSet `CHANNEL_SETTING__MEMBERS__YOU` in the `UserListItem`
+
 ## [v3.13.2] (Mar 14, 2024)
 
 ### Features
-* Add a `renderHeader` props to the ChannelSettingsUIProps
+* Added a `renderHeader` props to the ChannelSettingsUIProps
   ```
   <ChannelSettingsUI
     renderHeader={() => ...}

package/Channel/components/ChannelHeader.js

@@ -1,43 +1,43 @@
-import { _ as __assign } from '../../chunks/bundle-aAoUY1dC.js';
+import { _ as __assign } from '../../chunks/bundle-D5O3p2sd.js';
 import React__default from 'react';
-import { G as GroupChannelHeaderView } from '../../chunks/bundle-D4mHGcWb.js';
+import { G as GroupChannelHeaderView } from '../../chunks/bundle-C_p9TOC_.js';
 import { useChannelContext } from '../context.js';
 import '../../ui/IconButton.js';
 import '../../ui/Icon.js';
-import '../../chunks/bundle-B4CUv14M.js';
-import '../../chunks/bundle-BnG5XETL.js';
-import '../../chunks/bundle-eNe8jUiS.js';
+import '../../chunks/bundle-DU1sAKMN.js';
+import '../../chunks/bundle-D9r0cGat.js';
+import '../../chunks/bundle-Dal90qsH.js';
 import '../../ui/ChannelAvatar.js';
-import '../../chunks/bundle-CeNRu1nh.js';
+import '../../chunks/bundle-DjgD9t7D.js';
 import '../../ui/ImageRenderer.js';
-import '../../chunks/bundle-B_5nSVDN.js';
-import '../../chunks/bundle-D4kbZg4e.js';
-import '../../chunks/bundle-DBy3c8gM.js';
-import '../../chunks/bundle-Cs0ZtBj7.js';
+import '../../chunks/bundle-VcVV1LMj.js';
+import '../../chunks/bundle-CnNbY4d-.js';
+import '../../chunks/bundle-BQvbZc7K.js';
+import '../../chunks/bundle-C1yuAXw9.js';
 import '../../useSendbirdStateContext.js';
 import '../../withSendbird.js';
-import '../../chunks/bundle-97fd4oe2.js';
-import '../../chunks/bundle-jYzea4Ke.js';
-import '../../chunks/bundle-C8Oe5QOQ.js';
-import '../../chunks/bundle-Ds5aQSz-.js';
-import '../../chunks/bundle-DlBu0K2F.js';
+import '../../chunks/bundle-SR6DLu-t.js';
+import '../../chunks/bundle-BXtCWdlN.js';
+import '../../chunks/bundle-B3YSUEgS.js';
+import '../../chunks/bundle-C8iYQbFu.js';
+import '../../chunks/bundle-BncIazvl.js';
 import '@sendbird/chat/message';
-import '../../chunks/bundle-OJu5PM7q.js';
-import '../../chunks/bundle-Dj5aDnzf.js';
-import '../../chunks/bundle-0Xv23Jlo.js';
-import '../../chunks/bundle-CvuK4Gl-.js';
-import '../../chunks/bundle-Czh0_N3j.js';
-import '../../chunks/bundle-C3mD4WPX.js';
-import '../../chunks/bundle-CAdKFBfs.js';
-import '../../chunks/bundle-CCx8yXVd.js';
+import '../../chunks/bundle-D0kBwA_N.js';
+import '../../chunks/bundle-BAdGwFBk.js';
+import '../../chunks/bundle-DmJV6gQD.js';
+import '../../chunks/bundle-DqzqAw0N.js';
+import '../../chunks/bundle-CPj7I_Ht.js';
+import '../../chunks/bundle-CXTic09W.js';
+import '../../chunks/bundle-xoAyfPjv.js';
+import '../../chunks/bundle-CwzTv0XS.js';
 import '@sendbird/chat/groupChannel';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../chunks/bundle-CanFPW6u.js';
-import '../../chunks/bundle-BbEkZYpE.js';
-import '../../chunks/bundle-CkCkzFFu.js';
-import '../../chunks/bundle-gSigJ2qv.js';
-import '../../chunks/bundle-CPRA25ls.js';
-import '../../chunks/bundle-CvvqaAH_.js';
+import '../../chunks/bundle-D9jjb4vl.js';
+import '../../chunks/bundle-Dg7p2p52.js';
+import '../../chunks/bundle-DmPACCke.js';
+import '../../chunks/bundle-DCUEuROU.js';
+import '../../chunks/bundle-D82-9DC8.js';
+import '../../chunks/bundle-CaeGyC4L.js';
 
 var ChannelHeader = function (_a) {
     var className = _a.className;