@sendbird/uikit-react 3.13.2 → 3.13.3

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-CHxXgtL2.js';
-import { _ as __assign } from './chunks/bundle-4bxiD94h.js';
+import { u as useMediaQueryContext } from './chunks/bundle-CLqgMCvn.js';
+import { _ as __assign } from './chunks/bundle-CVDtzU3E.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-CXMfzdI7.js';
-import { u as useVoicePlayerContext, a as ALL } from './chunks/bundle-D4TIkniH.js';
+import { u as uuidv4 } from './chunks/bundle-CkInAxxb.js';
+import { u as useVoicePlayerContext, a as ALL } from './chunks/bundle-DxdGwARh.js';
 import '@sendbird/uikit-tools';
 import './withSendbird.js';
 import 'css-vars-ponyfill';
-import './chunks/bundle-DzQcMztv.js';
-import './chunks/bundle-B9Jpp9ee.js';
-import './chunks/bundle-D-OF1Dsr.js';
+import './chunks/bundle-4a9M9y8N.js';
+import './chunks/bundle-DuNr1Njk.js';
+import './chunks/bundle-COR7gPrO.js';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
-import './chunks/bundle-D1otjGeL.js';
+import './chunks/bundle-DI3fL4Xw.js';
 import './utils/message/getOutgoingMessageState.js';
-import './chunks/bundle-BdCGrzcY.js';
-import './chunks/bundle-2UMLs1R6.js';
+import './chunks/bundle-CT3xDvIx.js';
+import './chunks/bundle-1ymLj4Og.js';
 import './VoiceRecorder/context.js';
-import './chunks/bundle-BV8WCwVA.js';
-import './chunks/bundle-DT8UMQCr.js';
-import './chunks/bundle-CUBnQyTA.js';
-import './chunks/bundle-DdwjYXOX.js';
+import './chunks/bundle-BX0LQWqY.js';
+import './chunks/bundle-DaQK1Cox.js';
+import './chunks/bundle-BxBdkxXV.js';
+import './chunks/bundle-CCUBCV04.js';
 import 'react-dom';
 import './ui/IconButton.js';
 import './ui/Button.js';
-import './chunks/bundle-BUHwsL2D.js';
+import './chunks/bundle-DPhbbRZE.js';
 import './ui/Icon.js';
-import './chunks/bundle-ugWtu0YZ.js';
-import './chunks/bundle-BRhZt2zf.js';
+import './chunks/bundle-BlHQV-25.js';
+import './chunks/bundle-BHOxoDJO.js';
 import './hooks/useModal.js';
+import './ui/ContextMenu.js';
+import './ui/SortByRow.js';
 import './GroupChannel/context.js';
 import '@sendbird/chat/message';
-import './chunks/bundle-B_ah2kxT.js';
-import './chunks/bundle-DtcJzbuk.js';
-import './chunks/bundle-kO-Z-dxL.js';
-import './chunks/bundle-CIHv_OFc.js';
-import './chunks/bundle-B3KaaIrh.js';
-import './chunks/bundle-RJu3P_iQ.js';
-import './chunks/bundle-BZK5eiX2.js';
+import './chunks/bundle-yNfnN0a6.js';
+import './chunks/bundle-DoJNLxY9.js';
+import './chunks/bundle-IuZ6uyzU.js';
+import './chunks/bundle-D45e30Hl.js';
+import './chunks/bundle-HsrPpAtd.js';
+import './chunks/bundle-BntzGGYb.js';
+import './chunks/bundle-DEqxoG9B.js';
 import './GroupChannel/components/GroupChannelUI.js';
-import './chunks/bundle-OTdL9cWR.js';
+import './chunks/bundle-DIEAFe_F.js';
 import './GroupChannel/components/TypingIndicator.js';
-import './chunks/bundle-B1v1xIP1.js';
+import './chunks/bundle-DlHudqve.js';
 import './ui/ConnectionStatus.js';
 import './ui/PlaceHolder.js';
 import './ui/Loader.js';
 import './GroupChannel/components/GroupChannelHeader.js';
-import './chunks/bundle-sQj5xACh.js';
+import './chunks/bundle-fvRtOX6P.js';
 import './ui/ChannelAvatar.js';
-import './chunks/bundle-DwRQcRou.js';
+import './chunks/bundle-BXpzbAbi.js';
 import './ui/ImageRenderer.js';
-import './chunks/bundle-cWhfb441.js';
-import './chunks/bundle-BlSpe5qA.js';
-import './chunks/bundle-Be2HIA26.js';
+import './chunks/bundle-DYJilNov.js';
+import './chunks/bundle-BVGlC_pg.js';
+import './chunks/bundle-aE9efllI.js';
 import './GroupChannel/components/MessageList.js';
 import './GroupChannel/components/Message.js';
-import './chunks/bundle-BIcgVVCw.js';
-import './chunks/bundle-5rwlX4db.js';
-import './chunks/bundle-2g0N2xdw.js';
+import './chunks/bundle-rl7Rvf_6.js';
+import './chunks/bundle-DBzkkIf1.js';
+import './chunks/bundle-CZYvKysu.js';
 import './Message/hooks/useDirtyGetMentions.js';
 import './ui/DateSeparator.js';
-import './chunks/bundle-D9xWky57.js';
+import './chunks/bundle-DHp0VTVS.js';
 import './ui/MessageInput.js';
-import './chunks/bundle-C-35JoOu.js';
-import './chunks/bundle-x0WnpBed.js';
+import './chunks/bundle-ts_i6oEg.js';
+import './chunks/bundle-DNq8IoOw.js';
 import 'dompurify';
-import './chunks/bundle-hAKR7PVp.js';
-import './chunks/bundle-CU8x_Vlw.js';
-import './chunks/bundle-BYdjor8f.js';
-import './chunks/bundle-C6ZHgzD6.js';
+import './chunks/bundle-B8HW06Fl.js';
+import './chunks/bundle-CJ9_QDKY.js';
+import './chunks/bundle-WrvoTlHQ.js';
+import './chunks/bundle-DqNfXH8L.js';
 import './ui/MessageContent.js';
-import './chunks/bundle-Bceke7Nk.js';
-import './chunks/bundle-C9WS75DY.js';
-import './chunks/bundle-C-UZ_gr4.js';
+import './chunks/bundle-jd7__XU_.js';
+import './chunks/bundle-CMKCY3ba.js';
+import './chunks/bundle-Bm_WZS3a.js';
 import './ui/MessageItemMenu.js';
-import './ui/ContextMenu.js';
-import './ui/SortByRow.js';
-import './chunks/bundle-C6MmX70M.js';
+import './chunks/bundle-CIO0N9hp.js';
 import './ui/MessageItemReactionMenu.js';
 import './ui/ReactionButton.js';
-import './chunks/bundle-CNInpRIS.js';
+import './chunks/bundle-j5EP0k3D.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-BxmlG4s-.js';
-import './chunks/bundle-Clnr6ml_.js';
+import './chunks/bundle-GRqvZZ2N.js';
+import './chunks/bundle-DTywBX7q.js';
 import './ui/ThreadReplies.js';
 import './ui/OGMessageItemBody.js';
-import './chunks/bundle-Cgtk2LV4.js';
+import './chunks/bundle-C6fuKmVo.js';
 import './ui/MentionLabel.js';
 import './ui/LinkLabel.js';
 import './ui/TextMessageItemBody.js';
 import './ui/FileMessageItemBody.js';
 import './ui/TextButton.js';
-import './chunks/bundle-BkTOcqVY.js';
-import './chunks/bundle-DIy5BllY.js';
-import './chunks/bundle-mkC088ne.js';
+import './chunks/bundle-BMvaJoQA.js';
+import './chunks/bundle-Dj4HLKX0.js';
+import './chunks/bundle-CP1hwfFC.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-B1ObaBN3.js';
+import './chunks/bundle-D47WMGAq.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-BNL2dgIA.js';
+import './chunks/bundle-CS4RK0T7.js';
 import './GroupChannel/components/FileViewer.js';
-import './chunks/bundle-5DiiOFi-.js';
+import './chunks/bundle-BkM4cdOJ.js';
 import './GroupChannel/components/RemoveMessageModal.js';
-import './chunks/bundle-BEzsjrvw.js';
-import './chunks/bundle-BKPDTl9U.js';
+import './chunks/bundle-SvqLmXeF.js';
+import './chunks/bundle-CIhbNReG.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-CExm_LIL.js';
+import './chunks/bundle-CmdUup8N.js';
 import './GroupChannel/components/SuggestedMentionList.js';
 import './ui/QuoteMessageInput.js';
 import './VoiceRecorder/useVoiceRecorder.js';
-import './chunks/bundle-B9ZQfJSL.js';
-import './chunks/bundle-DPRlCjJt.js';
+import './chunks/bundle-5HwGq_hd.js';
+import './chunks/bundle-CfZFWZM3.js';
 import './GroupChannelList/context.js';
 import './GroupChannelList/components/GroupChannelListUI.js';
-import './chunks/bundle-Cm3yLDom.js';
+import './chunks/bundle-CilkBcv-.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-Bb7wwF7C.js';
+import './chunks/bundle-Ds2X6Fjs.js';
 import './ui/Badge.js';
 import './ui/MentionUserLabel.js';
 import './GroupChannelList/components/AddGroupChannel.js';
-import './chunks/bundle-BgunHZ2y.js';
+import './chunks/bundle-BIvhXCoF.js';
 import './CreateChannel.js';
 import './CreateChannel/components/CreateChannelUI.js';
-import './chunks/bundle-5E39Cv3A.js';
+import './chunks/bundle-Di7baNGv.js';
 import './CreateChannel/components/InviteUsers.js';
 import './CreateChannel/components/SelectChannelType.js';
 import './Channel/context.js';
-import './chunks/bundle-C6387K33.js';
-import './chunks/bundle-C7SA85dp.js';
-import './chunks/bundle-CI0ovNa-.js';
-import './chunks/bundle-CcRuHA7i.js';
-import './chunks/bundle-Hl5CUM1x.js';
-import './chunks/bundle-Bm8gzDx1.js';
+import './chunks/bundle-Cvm8Ag45.js';
+import './chunks/bundle-C6ZXjQ1L.js';
+import './chunks/bundle-CAki7JUf.js';
+import './chunks/bundle-D6kFzMhH.js';
+import './chunks/bundle-D3OeBr-9.js';
+import './chunks/bundle-CVFMpKJZ.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-BpyUTLY3.js';
+import './chunks/bundle-BpDuHeEB.js';
 import './Channel/components/MessageInput.js';
-import './chunks/bundle-Pw0Ofufv.js';
+import './chunks/bundle-VttuSapS.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-_B5yFEP0.js';
+import './chunks/bundle-DavEbLba.js';
 import './ui/Toggle.js';
 import './ChannelSettings/components/UserListItem.js';
-import './chunks/bundle-TYwaKAYl.js';
+import './chunks/bundle-BOrV2z_R.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-DIhQqYC5.js';
+import './chunks/bundle-aJhoAKLH.js';
 import './Thread/components/ParentMessageInfoItem.js';
-import './chunks/bundle-BqWBruLa.js';
+import './chunks/bundle-DQnpJfyk.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-4bxiD94h.js';
+import { _ as __assign } from '../../chunks/bundle-CVDtzU3E.js';
 import React__default from 'react';
-import { G as GroupChannelHeaderView } from '../../chunks/bundle-sQj5xACh.js';
+import { G as GroupChannelHeaderView } from '../../chunks/bundle-fvRtOX6P.js';
 import { useChannelContext } from '../context.js';
 import '../../ui/IconButton.js';
 import '../../ui/Icon.js';
-import '../../chunks/bundle-BdCGrzcY.js';
-import '../../chunks/bundle-BUHwsL2D.js';
-import '../../chunks/bundle-DT8UMQCr.js';
+import '../../chunks/bundle-CT3xDvIx.js';
+import '../../chunks/bundle-DPhbbRZE.js';
+import '../../chunks/bundle-DaQK1Cox.js';
 import '../../ui/ChannelAvatar.js';
-import '../../chunks/bundle-DwRQcRou.js';
+import '../../chunks/bundle-BXpzbAbi.js';
 import '../../ui/ImageRenderer.js';
-import '../../chunks/bundle-cWhfb441.js';
-import '../../chunks/bundle-BlSpe5qA.js';
-import '../../chunks/bundle-Be2HIA26.js';
-import '../../chunks/bundle-CHxXgtL2.js';
+import '../../chunks/bundle-DYJilNov.js';
+import '../../chunks/bundle-BVGlC_pg.js';
+import '../../chunks/bundle-aE9efllI.js';
+import '../../chunks/bundle-CLqgMCvn.js';
 import '../../useSendbirdStateContext.js';
 import '../../withSendbird.js';
-import '../../chunks/bundle-BV8WCwVA.js';
-import '../../chunks/bundle-CUBnQyTA.js';
-import '../../chunks/bundle-B_ah2kxT.js';
-import '../../chunks/bundle-2g0N2xdw.js';
-import '../../chunks/bundle-B3KaaIrh.js';
+import '../../chunks/bundle-BX0LQWqY.js';
+import '../../chunks/bundle-BxBdkxXV.js';
+import '../../chunks/bundle-yNfnN0a6.js';
+import '../../chunks/bundle-CZYvKysu.js';
+import '../../chunks/bundle-HsrPpAtd.js';
 import '@sendbird/chat/message';
-import '../../chunks/bundle-C6387K33.js';
-import '../../chunks/bundle-5rwlX4db.js';
-import '../../chunks/bundle-DzQcMztv.js';
-import '../../chunks/bundle-C7SA85dp.js';
-import '../../chunks/bundle-CI0ovNa-.js';
-import '../../chunks/bundle-CcRuHA7i.js';
-import '../../chunks/bundle-ugWtu0YZ.js';
-import '../../chunks/bundle-D1otjGeL.js';
+import '../../chunks/bundle-Cvm8Ag45.js';
+import '../../chunks/bundle-DBzkkIf1.js';
+import '../../chunks/bundle-4a9M9y8N.js';
+import '../../chunks/bundle-C6ZXjQ1L.js';
+import '../../chunks/bundle-CAki7JUf.js';
+import '../../chunks/bundle-D6kFzMhH.js';
+import '../../chunks/bundle-BlHQV-25.js';
+import '../../chunks/bundle-DI3fL4Xw.js';
 import '@sendbird/chat/groupChannel';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../chunks/bundle-CXMfzdI7.js';
-import '../../chunks/bundle-Hl5CUM1x.js';
-import '../../chunks/bundle-BZK5eiX2.js';
-import '../../chunks/bundle-DtcJzbuk.js';
-import '../../chunks/bundle-BRhZt2zf.js';
-import '../../chunks/bundle-Bm8gzDx1.js';
+import '../../chunks/bundle-CkInAxxb.js';
+import '../../chunks/bundle-D3OeBr-9.js';
+import '../../chunks/bundle-DEqxoG9B.js';
+import '../../chunks/bundle-DoJNLxY9.js';
+import '../../chunks/bundle-BHOxoDJO.js';
+import '../../chunks/bundle-CVFMpKJZ.js';
 
 var ChannelHeader = function (_a) {
     var className = _a.className;