@sendbird/uikit-react 3.14.11 → 3.14.12

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-CjWmrMft.js';
-import { _ as __assign } from './chunks/bundle-DqCapAeT.js';
+import { u as useMediaQueryContext } from './chunks/bundle-BydEbpDQ.js';
+import { _ as __assign } from './chunks/bundle-B9I7KCZ2.js';
 import { GroupChannel } from './GroupChannel.js';
 import { GroupChannelList } from './GroupChannelList.js';
 import Channel from './Channel.js';
@@ -9,84 +9,83 @@ import ChannelList from './ChannelList.js';
 import ChannelSettings from './ChannelSettings.js';
 import MessageSearchPannel from './MessageSearch.js';
 import Thread from './Thread.js';
-import { c as classnames } from './chunks/bundle-DqfiKk6y.js';
+import { c as classnames } from './chunks/bundle-B628FXKZ.js';
+import { A as APP_LAYOUT_ROOT, e as EMOJI_MENU_ROOT_ID, f as MENU_ROOT_ID } from './chunks/bundle-BfonFE4n.js';
 import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
 import { useSendbirdStateContext } from './useSendbirdStateContext.js';
-import { u as uuidv4 } from './chunks/bundle-BZJwRZ4K.js';
-import { u as useVoicePlayerContext, a as ALL } from './chunks/bundle-Blou4oSF.js';
-import { g as getCaseResolvedReplyType } from './chunks/bundle-C-NYkfdU.js';
+import { u as uuidv4 } from './chunks/bundle-B97onQ-B.js';
+import { u as useVoicePlayerContext, a as ALL } from './chunks/bundle-jVDgtxRn.js';
+import { g as getCaseResolvedReplyType } from './chunks/bundle-2aNchqYM.js';
+import { a as MODAL_ROOT } from './chunks/bundle-DAF0GGlr.js';
 import '@sendbird/uikit-tools';
 import './withSendbird.js';
-import './chunks/bundle-Bd6KRUQZ.js';
-import './chunks/bundle--g96ylsl.js';
-import './utils/message/getOutgoingMessageState.js';
-import './chunks/bundle-CWwX1Xc2.js';
-import './chunks/bundle-B47eqWqI.js';
-import 'react-dom';
-import './chunks/bundle-CtzIZOAD.js';
-import './chunks/bundle-Qy7nPeaH.js';
-import './chunks/bundle-BgR4m5uB.js';
-import './ui/IconButton.js';
-import './ui/Button.js';
-import './chunks/bundle-DZPdjyt1.js';
-import './ui/Icon.js';
 import 'css-vars-ponyfill';
+import './chunks/bundle-BGoByD2z.js';
+import './utils/message/getOutgoingMessageState.js';
+import './chunks/bundle-ByuZy4m8.js';
+import './chunks/bundle-DnVyKahm.js';
+import './chunks/bundle-CZY0TUC6.js';
+import './chunks/bundle-CYhNLg4_.js';
 import '@sendbird/chat';
 import '@sendbird/chat/openChannel';
-import './chunks/bundle-DhS_dAXj.js';
-import './ui/ContextMenu.js';
-import './ui/SortByRow.js';
-import './chunks/bundle-BBYeR6Ff.js';
-import './chunks/bundle-CkeZ5LIv.js';
-import './chunks/bundle-D-fFERLw.js';
+import './chunks/bundle-D4NnyBWz.js';
+import './chunks/bundle-BPLoGpIy.js';
+import './chunks/bundle-BwafidOs.js';
+import './chunks/bundle-CMgJTzYH.js';
+import './chunks/bundle-Mfnn12A9.js';
 import './GroupChannel/context.js';
 import '@sendbird/chat/message';
-import './chunks/bundle-X7N3yGkB.js';
-import './chunks/bundle-Bnxcyeb6.js';
-import './chunks/bundle-BOxCDCqY.js';
-import './chunks/bundle-CuPeMBUo.js';
-import './chunks/bundle-BSqls8om.js';
+import './chunks/bundle-DUd6AS_D.js';
+import './chunks/bundle-DayOnVaB.js';
+import './chunks/bundle-CGLnBajI.js';
+import './chunks/bundle-D6I-uHp_.js';
+import './chunks/bundle-Cpt2mEbq.js';
 import './GroupChannel/components/GroupChannelUI.js';
-import './chunks/bundle-l4EHY1-U.js';
+import './chunks/bundle-Tb2lma7H.js';
 import './GroupChannel/components/TypingIndicator.js';
+import './chunks/bundle-B1gHpFXu.js';
 import './ui/ConnectionStatus.js';
+import './ui/Icon.js';
 import './ui/PlaceHolder.js';
 import './ui/Loader.js';
 import './GroupChannel/components/GroupChannelHeader.js';
-import './chunks/bundle-DZDXS9uu.js';
+import './chunks/bundle-D51YYui3.js';
 import './ui/ChannelAvatar.js';
-import './chunks/bundle-C46rfkM4.js';
+import './chunks/bundle-D89r5O-w.js';
 import './ui/ImageRenderer.js';
-import './chunks/bundle-B3I9kUQg.js';
-import './chunks/bundle-CN-JzLkt.js';
-import './chunks/bundle-CrC1amvR.js';
+import './chunks/bundle-DVCGbhaI.js';
+import './chunks/bundle-BaEyjChY.js';
+import './chunks/bundle--vT93WoP.js';
 import './ui/Header.js';
 import './ui/TextButton.js';
-import './chunks/bundle-BYEyXIlF.js';
+import './chunks/bundle-DDIIh2iG.js';
+import './ui/IconButton.js';
 import './GroupChannel/components/MessageList.js';
 import './GroupChannel/components/Message.js';
-import './chunks/bundle-kOU6iB5n.js';
-import './chunks/bundle-7-6QgE5D.js';
-import './chunks/bundle-B-hpFJJD.js';
+import './chunks/bundle-B2UBtdMc.js';
+import './chunks/bundle-Cme8jJ5D.js';
+import './chunks/bundle-De1BnkR0.js';
 import './Message/hooks/useDirtyGetMentions.js';
 import './ui/DateSeparator.js';
 import './ui/MessageInput.js';
-import './chunks/bundle-BoQqhZOe.js';
-import './chunks/bundle-DZOyZq7L.js';
+import './chunks/bundle-DqJ40nCa.js';
+import './ui/Button.js';
+import './chunks/bundle-D3w6q-9W.js';
 import 'dompurify';
-import './chunks/bundle-D6SsN6Rq.js';
-import './chunks/bundle-BzyPj4Aj.js';
-import './chunks/bundle-civa-kHu.js';
-import './chunks/bundle-DV1PBDWB.js';
+import './chunks/bundle-BT8XMu5e.js';
+import './chunks/bundle-CpcTBaG-.js';
+import './chunks/bundle-BQqQX3na.js';
+import './chunks/bundle-bbk4ulub.js';
 import './ui/MessageContent.js';
-import './chunks/bundle-BIskIEc4.js';
-import './chunks/bundle-DdwhQDq_.js';
-import './chunks/bundle-CDaIXMvY.js';
-import './chunks/bundle-DRiNj9xc.js';
-import './chunks/bundle-C6yPrMNr.js';
+import './chunks/bundle-CQdKG76t.js';
+import './chunks/bundle-K3w8yQDQ.js';
+import './chunks/bundle-B3xAJZu1.js';
+import './chunks/bundle-1icRt_y4.js';
 import './ui/MessageItemReactionMenu.js';
 import './ui/ReactionButton.js';
-import './chunks/bundle-BRnhu3nC.js';
+import './chunks/bundle-C6OwelAY.js';
+import 'react-dom';
+import './ui/SortByRow.js';
 import './ui/EmojiReactions.js';
 import './ui/ReactionBadge.js';
 import './ui/BottomSheet.js';
@@ -100,18 +99,18 @@ import './ui/TooltipWrapper.js';
 import './Message/context.js';
 import './ui/AdminMessage.js';
 import './ui/QuoteMessage.js';
-import './chunks/bundle-BazvqRxz.js';
+import './chunks/bundle-CO34LgiE.js';
 import './ui/MobileMenu.js';
 import './ui/ThreadReplies.js';
 import './ui/OGMessageItemBody.js';
-import './chunks/bundle-CQjKo40V.js';
+import './chunks/bundle-C8uZHDqp.js';
 import './ui/MentionLabel.js';
 import './ui/LinkLabel.js';
 import './ui/TextMessageItemBody.js';
 import './ui/FileMessageItemBody.js';
-import './chunks/bundle-0cXhiTTq.js';
+import './chunks/bundle-DeqlERYT.js';
 import './ui/FileViewer.js';
-import './chunks/bundle-BcqE3Id5.js';
+import './chunks/bundle-l8sVpQGm.js';
 import './ui/VoiceMessageItemBody.js';
 import './ui/ProgressBar.js';
 import './VoicePlayer/useVoicePlayer.js';
@@ -119,7 +118,7 @@ import './ui/PlaybackTime.js';
 import './ui/ThumbnailMessageItemBody.js';
 import './ui/UnknownMessageItemBody.js';
 import './ui/TemplateMessageItemBody.js';
-import './chunks/bundle-BUVIYyQR.js';
+import './chunks/bundle-CsdXzHvl.js';
 import './ui/FallbackTemplateMessageItemBody.tsx.js';
 import './ui/LoadingTemplateMessageItemBody.tsx.js';
 import './ui/FeedbackIconButton.js';
@@ -128,61 +127,61 @@ import './ui/MessageFeedbackModal.js';
 import './ui/Input.js';
 import './ui/MessageFeedbackFailedModal.js';
 import './GroupChannel/components/SuggestedReplies.js';
-import './chunks/bundle-e_1rcazt.js';
+import './chunks/bundle-Dv9mmt4u.js';
 import './GroupChannel/components/FileViewer.js';
-import './chunks/bundle-BUlg6EB0.js';
+import './chunks/bundle-Bsa2gylF.js';
 import './GroupChannel/components/RemoveMessageModal.js';
-import './chunks/bundle-BOY17ZpA.js';
-import './chunks/bundle-I6TK4H2F.js';
+import './chunks/bundle-D9OMPv_x.js';
+import './chunks/bundle-BiG6myo3.js';
 import './GroupChannel/components/UnreadCount.js';
 import './GroupChannel/components/FrozenNotification.js';
 import './ui/TypingIndicatorBubble.js';
 import './Channel/utils/getMessagePartsInfo.js';
 import './Channel/utils/compareMessagesForGrouping.js';
-import './chunks/bundle-CiGwwxLF.js';
+import './chunks/bundle-CmAD8QUZ.js';
 import './GroupChannel/components/MessageInputWrapper.js';
-import './chunks/bundle-BiTYm_oR.js';
+import './chunks/bundle-SSblffW_.js';
 import './GroupChannel/components/SuggestedMentionList.js';
 import './ui/QuoteMessageInput.js';
 import './VoiceRecorder/useVoiceRecorder.js';
-import './chunks/bundle-RGI-cwuW.js';
-import './chunks/bundle-BJg9yffN.js';
+import './chunks/bundle-CLLxonVJ.js';
+import './chunks/bundle-DjAkc3FK.js';
 import './GroupChannelList/context.js';
 import './GroupChannelList/components/GroupChannelListUI.js';
-import './chunks/bundle-gQdqi0Mg.js';
+import './chunks/bundle-lYQ_v7qT.js';
 import './GroupChannelList/components/GroupChannelListHeader.js';
 import './EditUserProfile.js';
 import './EditUserProfile/context.js';
 import './EditUserProfile/components/EditUserProfileUI.js';
-import './chunks/bundle-DGFRKHz1.js';
-import './chunks/bundle-B2b2V418.js';
+import './chunks/bundle-B6LYNEOD.js';
+import './chunks/bundle-B1rkq8k3.js';
 import './GroupChannelList/components/GroupChannelPreviewAction.js';
 import './GroupChannelList/components/GroupChannelListItem.js';
-import './chunks/bundle-BWVnpiS_.js';
+import './chunks/bundle-DLtA6rcB.js';
 import './ui/Badge.js';
 import './ui/MentionUserLabel.js';
 import './GroupChannelList/components/AddGroupChannel.js';
-import './chunks/bundle-DwytTqCe.js';
+import './chunks/bundle-BucsiL3g.js';
 import './CreateChannel.js';
 import './CreateChannel/components/CreateChannelUI.js';
-import './chunks/bundle-CXI3Zb2v.js';
+import './chunks/bundle-BIHWK4cm.js';
 import './CreateChannel/components/InviteUsers.js';
 import './CreateChannel/components/SelectChannelType.js';
 import './Channel/context.js';
-import './chunks/bundle-sESGIhDV.js';
-import './chunks/bundle-BK4z7Xuw.js';
-import './chunks/bundle-7ky2Rlcl.js';
-import './chunks/bundle-CvuGiuQl.js';
-import './chunks/bundle-D1Xe_caU.js';
+import './chunks/bundle-B3PsG3mz.js';
+import './chunks/bundle-D-_vevD1.js';
+import './chunks/bundle-DzC0VYY-.js';
+import './chunks/bundle-3xeGw_F0.js';
+import './chunks/bundle-CfHQbcbZ.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-DIOrz2G2.js';
+import './chunks/bundle-C3ue0IHg.js';
 import './Channel/components/MessageInput.js';
-import './chunks/bundle-CA6NEmSK.js';
+import './chunks/bundle-DeaoiON_.js';
 import './ChannelList/components/ChannelListUI.js';
 import './ChannelList/components/ChannelPreview.js';
 import './ChannelList/components/AddChannel.js';
@@ -191,14 +190,14 @@ import './ChannelSettings/context.js';
 import './ChannelSettings/components/ChannelSettingsHeader.js';
 import './ChannelSettings/components/ChannelProfile.js';
 import './ChannelSettings/components/EditDetailsModal.js';
-import './ChannelSettings/components/ModerationPanel.js';
-import './ui/Accordion.js';
-import './ui/AccordionGroup.js';
-import './ui/Toggle.js';
-import './ChannelSettings/components/UserListItem.js';
-import './chunks/bundle-DPa2zKvl.js';
 import './ChannelSettings/components/LeaveChannel.js';
-import './ChannelSettings/components/UserPanel.js';
+import './chunks/bundle-DfkIV7Yk.js';
+import './ChannelSettings/components/ChannelSettingMenuList.js';
+import './ChannelSettings/hooks/useMenuList.js';
+import './chunks/bundle-CjetZNxA.js';
+import './chunks/bundle-CQV5GP72.js';
+import './chunks/bundle-Bc2fRy19.js';
+import './ui/Toggle.js';
 import './MessageSearch/components/MessageSearchUI.js';
 import './MessageSearch/context.js';
 import './ui/MessageSearchItem.js';
@@ -207,11 +206,11 @@ import './Thread/context.js';
 import './Thread/context/types.js';
 import './Thread/components/ThreadUI.js';
 import './Thread/components/ParentMessageInfo.js';
-import './chunks/bundle-CFTgR8-n.js';
+import './chunks/bundle-CqsQWc_t.js';
 import './Thread/components/ParentMessageInfoItem.js';
-import './chunks/bundle-BIbNT4mN.js';
+import './chunks/bundle-CL8fYBvo.js';
 import './ui/MessageItemMenu.js';
-import './chunks/bundle-D75PUAJB.js';
+import './chunks/bundle-BS3xMvop.js';
 import './Thread/components/ThreadHeader.js';
 import './Thread/components/ThreadList.js';
 import './Thread/components/ThreadListItem.js';
@@ -287,7 +286,7 @@ var DesktopLayout = function (props) {
         animatedMessageId: highlightedMessage,
         onReplyInThreadClick: onClickThreadReply,
     };
-    return (React__default.createElement("div", { className: "sendbird-app__wrap" },
+    return (React__default.createElement("div", { className: "sendbird-app__wrap", id: APP_LAYOUT_ROOT },
         React__default.createElement("div", { className: "sendbird-app__channellist-wrap" }, enableLegacyChannelModules ? React__default.createElement(ChannelList, __assign({}, channelListProps)) : React__default.createElement(GroupChannelList, __assign({}, channelListProps))),
         React__default.createElement("div", { className: classnames('sendbird-app__conversation-wrap', showSettings && 'sendbird-app__conversation--settings-open', showSearch && 'sendbird-app__conversation--search-open') }, enableLegacyChannelModules ? React__default.createElement(Channel, __assign({}, channelProps)) : React__default.createElement(GroupChannel, __assign({}, channelProps))),
         showSettings && (React__default.createElement("div", { className: "sendbird-app__settingspanel-wrap" },
@@ -453,7 +452,7 @@ var MobileLayout = function (props) {
             }
         },
     };
-    return (React__default.createElement("div", { className: "sb_mobile" },
+    return (React__default.createElement("div", { className: "sb_mobile", id: APP_LAYOUT_ROOT },
         panel === PANELS.CHANNEL_LIST && (React__default.createElement("div", { className: "sb_mobile__panelwrap" }, enableLegacyChannelModules ? React__default.createElement(ChannelList, __assign({}, channelListProps)) : React__default.createElement(GroupChannelList, __assign({}, channelListProps)))),
         panel === PANELS.CHANNEL && (React__default.createElement("div", { className: "sb_mobile__panelwrap" }, enableLegacyChannelModules ? React__default.createElement(Channel, __assign({}, channelProps)) : React__default.createElement(GroupChannel, __assign({}, channelProps)))),
         panel === PANELS.CHANNEL_SETTINGS && (React__default.createElement("div", { className: "sb_mobile__panelwrap" },
@@ -485,9 +484,36 @@ var MobileLayout = function (props) {
                 } })))));
 };
 
+var ELEMENT_IDS = [
+    MODAL_ROOT,
+    EMOJI_MENU_ROOT_ID,
+    MENU_ROOT_ID,
+    APP_LAYOUT_ROOT,
+];
+/**
+ * This hook sets the direction (dir) attribute for specified elements.
+ *
+ * @param {HTMLTextDirection} direction - The direction to set ('ltr' or 'rtl').
+ *
+ * Note:
+ * This is necessary because elements such as modal, emoji reaction list, and dropdown
+ * are at the same level as the Sendbird app root element. They need to have the 'dir'
+ * attribute set explicitly to ensure proper directionality based on the app's language setting.
+ */
+var useApplyTextDirection = function (direction) {
+    useEffect(function () {
+        ELEMENT_IDS.forEach(function (id) {
+            var element = document.getElementById(id);
+            if (element) {
+                element.dir = direction;
+            }
+        });
+    }, [direction]);
+};
+
 var AppLayout = function (props) {
     var _a, _b, _c;
-    var isMessageGroupingEnabled = props.isMessageGroupingEnabled, allowProfileEdit = props.allowProfileEdit, onProfileEditSuccess = props.onProfileEditSuccess, disableAutoSelect = props.disableAutoSelect, currentChannel = props.currentChannel, setCurrentChannel = props.setCurrentChannel, enableLegacyChannelModules = props.enableLegacyChannelModules;
+    var isMessageGroupingEnabled = props.isMessageGroupingEnabled, allowProfileEdit = props.allowProfileEdit, onProfileEditSuccess = props.onProfileEditSuccess, disableAutoSelect = props.disableAutoSelect, currentChannel = props.currentChannel, setCurrentChannel = props.setCurrentChannel, enableLegacyChannelModules = props.enableLegacyChannelModules, htmlTextDirection = props.htmlTextDirection;
     var globalStore = useSendbirdStateContext();
     var globalConfigs = globalStore.config;
     var _d = useState(false), showThread = _d[0], setShowThread = _d[1];
@@ -497,6 +523,7 @@ var AppLayout = function (props) {
     var _h = useState(null), highlightedMessage = _h[0], setHighlightedMessage = _h[1];
     var _j = useState(null), startingPoint = _j[0], setStartingPoint = _j[1];
     var isMobile = useMediaQueryContext().isMobile;
+    useApplyTextDirection(htmlTextDirection);
     /**
      * Below configs can be set via Dashboard UIKit config setting but as a lower priority than App props.
      * So need to be have fallback value \w global configs even though each prop values are undefined
@@ -515,16 +542,16 @@ var AppLayout = function (props) {
  * default chat apps
  */
 function App(props) {
-    var appId = props.appId, userId = props.userId, _a = props.accessToken, accessToken = _a === void 0 ? '' : _a, _b = props.customApiHost, customApiHost = _b === void 0 ? '' : _b, _c = props.customWebSocketHost, customWebSocketHost = _c === void 0 ? '' : _c, breakpoint = props.breakpoint, _d = props.theme, theme = _d === void 0 ? 'light' : _d, userListQuery = props.userListQuery, _e = props.nickname, nickname = _e === void 0 ? '' : _e, _f = props.profileUrl, profileUrl = _f === void 0 ? '' : _f, dateLocale = props.dateLocale, _g = props.config, config = _g === void 0 ? {} : _g, voiceRecord = props.voiceRecord, _h = props.isMessageGroupingEnabled, isMessageGroupingEnabled = _h === void 0 ? true : _h, colorSet = props.colorSet, stringSet = props.stringSet, _j = props.allowProfileEdit, allowProfileEdit = _j === void 0 ? false : _j, _k = props.disableMarkAsDelivered, disableMarkAsDelivered = _k === void 0 ? false : _k, renderUserProfile = props.renderUserProfile, onProfileEditSuccess = props.onProfileEditSuccess, _l = props.imageCompression, imageCompression = _l === void 0 ? {} : _l, _m = props.disableAutoSelect, disableAutoSelect = _m === void 0 ? false : _m, sdkInitParams = props.sdkInitParams, customExtensionParams = props.customExtensionParams, eventHandlers = props.eventHandlers, isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled, _o = props.isUserIdUsedForNickname, isUserIdUsedForNickname = _o === void 0 ? true : _o, _p = props.enableLegacyChannelModules, enableLegacyChannelModules = _p === void 0 ? false : _p, uikitOptions = props.uikitOptions, 
+    var appId = props.appId, userId = props.userId, _a = props.accessToken, accessToken = _a === void 0 ? '' : _a, _b = props.customApiHost, customApiHost = _b === void 0 ? '' : _b, _c = props.customWebSocketHost, customWebSocketHost = _c === void 0 ? '' : _c, breakpoint = props.breakpoint, _d = props.theme, theme = _d === void 0 ? 'light' : _d, userListQuery = props.userListQuery, _e = props.nickname, nickname = _e === void 0 ? '' : _e, _f = props.profileUrl, profileUrl = _f === void 0 ? '' : _f, dateLocale = props.dateLocale, _g = props.config, config = _g === void 0 ? {} : _g, voiceRecord = props.voiceRecord, _h = props.isMessageGroupingEnabled, isMessageGroupingEnabled = _h === void 0 ? true : _h, colorSet = props.colorSet, stringSet = props.stringSet, _j = props.allowProfileEdit, allowProfileEdit = _j === void 0 ? false : _j, _k = props.disableMarkAsDelivered, disableMarkAsDelivered = _k === void 0 ? false : _k, renderUserProfile = props.renderUserProfile, onProfileEditSuccess = props.onProfileEditSuccess, _l = props.imageCompression, imageCompression = _l === void 0 ? {} : _l, _m = props.disableAutoSelect, disableAutoSelect = _m === void 0 ? false : _m, sdkInitParams = props.sdkInitParams, customExtensionParams = props.customExtensionParams, eventHandlers = props.eventHandlers, isMultipleFilesMessageEnabled = props.isMultipleFilesMessageEnabled, _o = props.isUserIdUsedForNickname, isUserIdUsedForNickname = _o === void 0 ? true : _o, _p = props.enableLegacyChannelModules, enableLegacyChannelModules = _p === void 0 ? false : _p, uikitOptions = props.uikitOptions, _q = props.htmlTextDirection, htmlTextDirection = _q === void 0 ? 'ltr' : _q, 
     // The below configs are duplicates of the Dashboard UIKit Configs.
     // Since their default values will be set in the Sendbird component,
     // we don't need to set them here.
     showSearchIcon = props.showSearchIcon, isMentionEnabled = props.isMentionEnabled, isReactionEnabled = props.isReactionEnabled, replyType = props.replyType, disableUserProfile = props.disableUserProfile, isVoiceMessageEnabled = props.isVoiceMessageEnabled, isTypingIndicatorEnabledOnChannelList = props.isTypingIndicatorEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList = props.isMessageReceiptStatusEnabledOnChannelList;
-    var _q = useState(), currentChannel = _q[0], setCurrentChannel = _q[1];
+    var _r = useState(), currentChannel = _r[0], setCurrentChannel = _r[1];
     return (React__default.createElement(SendbirdProvider, { stringSet: stringSet, appId: appId, userId: userId, accessToken: accessToken, customApiHost: customApiHost, customWebSocketHost: customWebSocketHost, breakpoint: breakpoint, theme: theme, nickname: nickname, profileUrl: profileUrl, dateLocale: dateLocale, userListQuery: userListQuery, config: config, colorSet: colorSet, disableMarkAsDelivered: disableMarkAsDelivered, renderUserProfile: renderUserProfile, imageCompression: imageCompression, isMultipleFilesMessageEnabled: isMultipleFilesMessageEnabled, voiceRecord: voiceRecord, onUserProfileMessage: function (channel) {
             setCurrentChannel(channel);
         }, uikitOptions: uikitOptions, isUserIdUsedForNickname: isUserIdUsedForNickname, sdkInitParams: sdkInitParams, customExtensionParams: customExtensionParams, eventHandlers: eventHandlers, isTypingIndicatorEnabledOnChannelList: isTypingIndicatorEnabledOnChannelList, isMessageReceiptStatusEnabledOnChannelList: isMessageReceiptStatusEnabledOnChannelList, replyType: replyType, showSearchIcon: showSearchIcon, disableUserProfile: disableUserProfile, isReactionEnabled: isReactionEnabled, isMentionEnabled: isMentionEnabled, isVoiceMessageEnabled: isVoiceMessageEnabled },
-        React__default.createElement(AppLayout, { isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel, enableLegacyChannelModules: enableLegacyChannelModules, isReactionEnabled: isReactionEnabled, replyType: replyType, showSearchIcon: showSearchIcon })));
+        React__default.createElement(AppLayout, { isMessageGroupingEnabled: isMessageGroupingEnabled, allowProfileEdit: allowProfileEdit, onProfileEditSuccess: onProfileEditSuccess, disableAutoSelect: disableAutoSelect, currentChannel: currentChannel, setCurrentChannel: setCurrentChannel, enableLegacyChannelModules: enableLegacyChannelModules, isReactionEnabled: isReactionEnabled, replyType: replyType, showSearchIcon: showSearchIcon, htmlTextDirection: htmlTextDirection })));
 }
 
 export { App as default };

package/App.js.map

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

package/CHANGELOG.md

@@ -1,6 +1,121 @@
 # Changelog - v3
 
-## [v3.11.14] (June 19, 2024)
+## [v3.14.12] (July 3, 2024)
+
+### Features
+- **RTL Support**
+  - Added `htmlTextDirection` prop to `SendbirdProvider` to support Right-To-Left (RTL) text direction for Middle East customers. [Read more](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir).
+  ```tsx
+  import ar from 'date-fns/locale/ar';
+  <SendbirdProvider
+    ...
+    htmlTextDirection={'rtl' | 'ltr'}
+    // Setting a proper value to dateLocale would be necessary
+    dateLocale={ar}
+  >
+  </SendbirdProvider>
+  ```
+
+- **DX Improvements: ChannelSetting SettingMenu**
+  - Added new components and hooks to make the menu items in the `ChannelSettingsUI` more modular and customizable.
+  - New Files:
+    - `useMenuItems.tsx`: Custom hook for menu items based on user roles.
+    - `MenuItem.tsx`: Reusable and customizable menu item component.
+    - `MenuListByRole.tsx`: Renders a list of menu items based on user roles.
+  - **Example usage:**
+    To customize the moderation panel with selected menu items:
+    ```tsx
+    import React from 'react';
+    import ChannelSettingsUI from '@sendbird-uikit/ChannelSettings/components/ChannelSettingsUI';
+    import useMenuItems from '@sendbird-uikit/ChannelSettings/hooks/useMenuList';
+
+    const CustomChannelSettings = () => {
+      const menuItems = useMenuItems();
+
+      const renderCustomModerationPanel = () => {
+        // Create a new object by selecting only the desired menu items.
+        const customMenuItems = {
+          operator: {
+            operators: menuItems.operator.operators, // Keep the operators menu
+            allUsers: menuItems.operator.allUsers, // Keep the all users menu
+            // Add or remove other menu items as needed.
+          },
+          nonOperator: {
+            allUsers: menuItems.nonOperator.allUsers, // Keep the all users menu
+            // Add or remove other menu items as needed.
+          },
+        };
+
+        return <MenuListByRole menuItems={customMenuItems} />;
+      };
+
+      return (
+        <ChannelSettingsUI renderModerationPanel={renderCustomModerationPanel} />
+      );
+    };
+
+    export default CustomChannelSettings;
+    ```
+
+- DX Improvements: ChannelSetting UserListItem
+  - `UserListItemMenu` has been newly created
+  - Provided it as a module which also contains `UserListItemMenuProvider` and `useUserListItemMenuContext`
+    ```tsx
+    import { UserListItemMenu, UserListItemMenuProvider, useUserListItemMenuContext } from '@sendbird/uikit-react/ui/UserListItemMenu';
+    ```
+  - Added new `renderUserListItem` props to the list components of `ChannelSettings`:
+    * `OperatorList`, `MemberList`, `MutedMemberList`, `BannedUserList`
+  - Exported the following modules:
+    * `OperatorList`, `MemberList`, `MutedMemberList`, `BannedUserList`
+    ```tsx
+    import { OperatorList, MemberList, MutedMemberList, BannedUserList } from '@sendbird/uikit-react/ChannelSettings/components/ChannelSettingsUI';
+    ```
+  - Merged `ui/UserListItem` and `ChannelSettings/components/UserListItem`:
+    * Use `ui/UserListItem` from now on
+    * Added `size` prop to `UserListItem`, which now accepts two values: 'normal' and 'small' ('small' replaces the previous `ChannelSettings/components/UserListItem`)
+      * `normal`: Used primarily in Modals
+      * `small`: Used primarily in Lists
+  - **Example usage:**
+    ```tsx
+    <ChannelSettings
+      renderUserListItem={(props) => (
+        <UserListItem {...props}
+          renderListItemMenu={(props) => (
+            <UserListItemMenu
+              {...props}
+              onToggleOperatorState={({ user, newState, error }) => {/** Handle operator state change */}}
+              onToggleMuteState={({ user, newState, error }) => {/** Handle mute state change */}}
+              onToggleBanState={({ user, newState, error }) => {/** Handle ban state change */}}
+              renderTrigger={({ ref }) => (<div ref={ref}>{/** Render your custom trigger icon here */}</div>)}
+              renderMenuItems={({ items }) => (
+                <>
+                  <items.OperatorToggleMenuItem />
+                  <items.MuteToggleMenuItem />
+                  <items.BanToggleMenuItem />
+                </>
+              )}
+            />
+          )}
+        />
+      )}
+    />
+    ```
+
+### Fixes
+- Fixed image file viewer header style 
+- Disabled `isSuperGroupReactionsEnabled` setter
+- Use `APP_LAYOUT_ROOT` to get the area info of the UIKit
+  ```tsx
+  export const APP_LAYOUT_ROOT = 'sendbird-app__layout';
+  ```
+  * To ensure the menu positions are calculated correctly, wrap the entire area using `SendbirdProvider` with a tag that has the specified ID.
+
+### Chore
+- Updated `@sendbird/chat` version to 4.13.0
+  - Improved channel/message refreshing performance utilizing LocalCaching.
+
+
+## [v3.14.11] (June 20, 2024)
 ### Features
 - Markdown Support for Text Messages
   - Added `enableMarkdownForUserMessage` to `UIKitOptions`. When enabled, markdown syntaxes for bold and link are now applied to user messages.

package/Channel/components/ChannelHeader.js

@@ -1,47 +1,47 @@
-import { _ as __assign } from '../../chunks/bundle-DqCapAeT.js';
+import { _ as __assign } from '../../chunks/bundle-B9I7KCZ2.js';
 import React__default from 'react';
-import { G as GroupChannelHeaderView } from '../../chunks/bundle-DZDXS9uu.js';
+import { G as GroupChannelHeaderView } from '../../chunks/bundle-D51YYui3.js';
 import { useChannelContext } from '../context.js';
 import '../../ui/Icon.js';
-import '../../chunks/bundle-DqfiKk6y.js';
+import '../../chunks/bundle-B628FXKZ.js';
 import '../../ui/ChannelAvatar.js';
-import '../../chunks/bundle-C46rfkM4.js';
+import '../../chunks/bundle-D89r5O-w.js';
 import '../../ui/ImageRenderer.js';
-import '../../chunks/bundle-B3I9kUQg.js';
-import '../../chunks/bundle-CN-JzLkt.js';
-import '../../chunks/bundle-CrC1amvR.js';
-import '../../chunks/bundle-DZPdjyt1.js';
-import '../../chunks/bundle-Qy7nPeaH.js';
-import '../../chunks/bundle-CjWmrMft.js';
+import '../../chunks/bundle-DVCGbhaI.js';
+import '../../chunks/bundle-BaEyjChY.js';
+import '../../chunks/bundle--vT93WoP.js';
+import '../../chunks/bundle-B1gHpFXu.js';
+import '../../chunks/bundle-BwafidOs.js';
+import '../../chunks/bundle-BydEbpDQ.js';
 import '../../useSendbirdStateContext.js';
 import '../../withSendbird.js';
-import '../../chunks/bundle-CtzIZOAD.js';
-import '../../chunks/bundle-BgR4m5uB.js';
+import '../../chunks/bundle-BPLoGpIy.js';
+import '../../chunks/bundle-CMgJTzYH.js';
 import '../../ui/Header.js';
 import '../../ui/TextButton.js';
-import '../../chunks/bundle-BYEyXIlF.js';
+import '../../chunks/bundle-DDIIh2iG.js';
 import '../../ui/IconButton.js';
-import '../../chunks/bundle-X7N3yGkB.js';
-import '../../chunks/bundle-B-hpFJJD.js';
-import '../../chunks/bundle-CiGwwxLF.js';
+import '../../chunks/bundle-DUd6AS_D.js';
+import '../../chunks/bundle-De1BnkR0.js';
+import '../../chunks/bundle-CmAD8QUZ.js';
 import '@sendbird/chat/message';
-import '../../chunks/bundle-BSqls8om.js';
-import '../../chunks/bundle-7-6QgE5D.js';
-import '../../chunks/bundle-B47eqWqI.js';
-import '../../chunks/bundle--g96ylsl.js';
+import '../../chunks/bundle-Cpt2mEbq.js';
+import '../../chunks/bundle-Cme8jJ5D.js';
+import '../../chunks/bundle-DnVyKahm.js';
+import '../../chunks/bundle-BGoByD2z.js';
 import '@sendbird/chat/groupChannel';
 import '../../utils/message/getOutgoingMessageState.js';
-import '../../chunks/bundle-CWwX1Xc2.js';
-import '../../chunks/bundle-sESGIhDV.js';
-import '../../chunks/bundle-BK4z7Xuw.js';
-import '../../chunks/bundle-7ky2Rlcl.js';
-import '../../chunks/bundle-DhS_dAXj.js';
-import '../../chunks/bundle-BZJwRZ4K.js';
-import '../../chunks/bundle-CvuGiuQl.js';
-import '../../chunks/bundle-CuPeMBUo.js';
-import '../../chunks/bundle-Bnxcyeb6.js';
-import '../../chunks/bundle-C-NYkfdU.js';
-import '../../chunks/bundle-D1Xe_caU.js';
+import '../../chunks/bundle-ByuZy4m8.js';
+import '../../chunks/bundle-B3PsG3mz.js';
+import '../../chunks/bundle-D-_vevD1.js';
+import '../../chunks/bundle-DzC0VYY-.js';
+import '../../chunks/bundle-Mfnn12A9.js';
+import '../../chunks/bundle-B97onQ-B.js';
+import '../../chunks/bundle-3xeGw_F0.js';
+import '../../chunks/bundle-D6I-uHp_.js';
+import '../../chunks/bundle-DayOnVaB.js';
+import '../../chunks/bundle-2aNchqYM.js';
+import '../../chunks/bundle-CfHQbcbZ.js';
 
 var ChannelHeader = function (_a) {
     var className = _a.className;