@sendbird/uikit-react 3.13.3 → 3.14.0-beta.2

package/cjs/chunks/{bundle-DkGYX29W.js → bundle-BsGXZt6G.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var _tslib = require('./bundle-B3Lu20wG.js');
+var _tslib = require('./bundle-Q5_I3n-8.js');
 var React = require('react');
 var ui_ImageRenderer = require('../ui/ImageRenderer.js');
-var pxToNumber = require('./bundle-HXyGAP9T.js');
+var pxToNumber = require('./bundle--ToWZ9cj.js');
 var ui_Icon = require('../ui/Icon.js');
 
 var AvatarDefault = function (props) {
@@ -54,7 +54,7 @@ var AvatarInner = function (_a) {
     return (React.createElement(ui_ImageRenderer.default, { className: imageRendererClassName, url: "", height: height, width: width, alt: alt, defaultComponent: defaultComponent }));
 };
 function Avatar(_a, ref) {
-    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.alt, alt = _d === void 0 ? '' : _d, _e = _a.width, width = _e === void 0 ? '56px' : _e, _f = _a.height, height = _f === void 0 ? '56px' : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 0 : _g, _h = _a.left, left = _h === void 0 ? '' : _h, onClick = _a.onClick, customDefaultComponent = _a.customDefaultComponent;
+    var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.src, src = _c === void 0 ? '' : _c, _d = _a.alt, alt = _d === void 0 ? '' : _d, _e = _a.width, width = _e === void 0 ? '56px' : _e, _f = _a.height, height = _f === void 0 ? '56px' : _f, _g = _a.zIndex, zIndex = _g === void 0 ? 0 : _g, _h = _a.left, left = _h === void 0 ? '' : _h, _j = _a.bottom, bottom = _j === void 0 ? '' : _j, onClick = _a.onClick, customDefaultComponent = _a.customDefaultComponent;
     return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
             'sendbird-avatar',
         ], false).join(' '), role: "button", ref: ref, style: {
@@ -62,6 +62,7 @@ function Avatar(_a, ref) {
             width: width,
             zIndex: zIndex,
             left: left,
+            bottom: bottom,
         }, onClick: onClick, onKeyDown: onClick, tabIndex: 0 },
         React.createElement(AvatarInner, { src: src, width: width, height: height, alt: alt, customDefaultComponent: customDefaultComponent })));
 }
@@ -70,4 +71,4 @@ var Avatar$1 = React.forwardRef(Avatar);
 exports.Avatar = Avatar$1;
 exports.AvatarDefault = AvatarDefault;
 exports.AvatarInner = AvatarInner;
-//# sourceMappingURL=bundle-DkGYX29W.js.map
+//# sourceMappingURL=bundle-BsGXZt6G.js.map

package/cjs/chunks/bundle-BsGXZt6G.js.map

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

package/cjs/chunks/{bundle-CKC-b4Bw.js → bundle-BwO19Jro.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var _tslib = require('./bundle-B3Lu20wG.js');
-var consts = require('./bundle-BBS4PSSm.js');
+var _tslib = require('./bundle-Q5_I3n-8.js');
+var consts = require('./bundle-Dpu1gg5r.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 
 var INITIALIZE_AUDIO_UNIT = 'INITIALIZE_AUDIO_UNIT';
@@ -249,4 +249,4 @@ exports.AudioUnitDefaultValue = AudioUnitDefaultValue;
 exports.VOICE_PLAYER_STATUS = VOICE_PLAYER_STATUS;
 exports.VoicePlayerProvider = VoicePlayerProvider;
 exports.useVoicePlayerContext = useVoicePlayerContext;
-//# sourceMappingURL=bundle-CKC-b4Bw.js.map
+//# sourceMappingURL=bundle-BwO19Jro.js.map

package/cjs/chunks/bundle-BwO19Jro.js.map

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

package/cjs/chunks/{bundle-CbATYgnP.js → bundle-BxaGZqGJ.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index$1 = require('./bundle-Tx6vw4BY.js');
-var index = require('./bundle-HOuE7syZ.js');
+var index$1 = require('./bundle-B1Nml3ap.js');
+var index = require('./bundle-Cmmi9pdk.js');
 
 function getModalDeleteMessageTitle(stringSet, message) {
     return index.K(message)
@@ -15,4 +15,4 @@ function getModalDeleteMessageTitle(stringSet, message) {
 }
 
 exports.getModalDeleteMessageTitle = getModalDeleteMessageTitle;
-//# sourceMappingURL=bundle-CbATYgnP.js.map
+//# sourceMappingURL=bundle-BxaGZqGJ.js.map

package/cjs/chunks/bundle-BxaGZqGJ.js.map

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

package/cjs/chunks/{bundle-DdS-jEnE.js → bundle-C2v2lxLx.js}

@@ -2,8 +2,8 @@
 
 var SendbirdChat = require('@sendbird/chat');
 var React = require('react');
-var uuid = require('./bundle-S09sS9Ub.js');
-var _tslib = require('./bundle-B3Lu20wG.js');
+var uuid = require('./bundle-DfYperTC.js');
+var _tslib = require('./bundle-Q5_I3n-8.js');
 
 function useOnlineStatus(sdk, logger) {
     var _a, _b;
@@ -199,4 +199,4 @@ exports.schedulerFactory = schedulerFactory;
 exports.useMarkAsDeliveredScheduler = useMarkAsDeliveredScheduler;
 exports.useOnlineStatus = useOnlineStatus;
 exports.useUnmount = useUnmount;
-//# sourceMappingURL=bundle-DdS-jEnE.js.map
+//# sourceMappingURL=bundle-C2v2lxLx.js.map

package/cjs/chunks/bundle-C2v2lxLx.js.map

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

package/cjs/chunks/{bundle-B-njjZtk.js → bundle-C88DsCNB.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var _tslib = require('./bundle-B3Lu20wG.js');
+var _tslib = require('./bundle-Q5_I3n-8.js');
 var React = require('react');
-var stringSet = require('./bundle-prE7SKQr.js');
+var stringSet = require('./bundle-CqF06THu.js');
 
 var Typography = {
     H_1: 'H_1',
@@ -66,7 +66,7 @@ function changeColorToClassName(color) {
     }
 }
 
-function Label(_a) {
+function Label(_a, ref) {
     var _b = _a.className, className = _b === void 0 ? [] : _b, type = _a.type, color = _a.color, _c = _a.children, children = _c === void 0 ? null : _c;
     return (
     // Donot make this into div
@@ -76,15 +76,17 @@ function Label(_a) {
             'sendbird-label',
             changeTypographyToClassName(type),
             changeColorToClassName(color),
-        ], false).join(' ') }, children));
+        ], false).join(' '), ref: ref }, children));
 }
 var LabelTypography = Typography;
 var LabelColors = Colors;
-var LabelStringSet = stringSet.getStringSet('en');
+var LabelStringSet = stringSet.getStringSet('en');
+var Label$1 = React.forwardRef(Label);
 
-exports.Label = Label;
+exports.Label = Label$1;
+exports.Label$1 = Label;
 exports.LabelColors = LabelColors;
 exports.LabelStringSet = LabelStringSet;
 exports.LabelTypography = LabelTypography;
 exports.changeColorToClassName = changeColorToClassName;
-//# sourceMappingURL=bundle-B-njjZtk.js.map
+//# sourceMappingURL=bundle-C88DsCNB.js.map

package/cjs/chunks/bundle-C88DsCNB.js.map

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

package/cjs/chunks/{bundle-BElidCBa.js → bundle-C8cnT2au.js}

@@ -2,20 +2,20 @@
 
 var React = require('react');
 var reactDom = require('react-dom');
-var ui_Avatar = require('./bundle-DkGYX29W.js');
+var ui_Avatar = require('./bundle-BsGXZt6G.js');
 var ui_Icon = require('../ui/Icon.js');
-var ui_Label = require('./bundle-B-njjZtk.js');
-var index = require('./bundle-Tx6vw4BY.js');
+var ui_Label = require('./bundle-C88DsCNB.js');
+var index = require('./bundle-B1Nml3ap.js');
 require('../hooks/useModal.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var ui_Modal = require('./bundle-BJD09510.js');
+var ui_Modal = require('./bundle-dNtU9_eg.js');
 
 var FileViewerView = function (_a) {
-    var message = _a.message, onCancel = _a.onCancel, deleteMessage = _a.deleteMessage, onDownloadClick = _a.onDownloadClick;
+    var message = _a.message, onCancel = _a.onCancel, deleteMessage = _a.deleteMessage;
     var sender = message.sender, type = message.type, url = message.url, _b = message.name, name = _b === void 0 ? '' : _b, threadInfo = message.threadInfo;
     var profileUrl = sender.profileUrl, nickname = sender.nickname, userId = sender.userId;
     var config = useSendbirdStateContext.useSendbirdStateContext().config;
-    return reactDom.createPortal(React.createElement(FileViewerComponent, { profileUrl: profileUrl, nickname: nickname, type: type, url: url, name: name, onCancel: onCancel, onDelete: function () { return deleteMessage(message).then(function () { return onCancel(); }); }, isByMe: config.userId === userId, disableDelete: (threadInfo === null || threadInfo === void 0 ? void 0 : threadInfo.replyCount) > 0, onDownloadClick: onDownloadClick }), document.getElementById(ui_Modal.MODAL_ROOT));
+    return reactDom.createPortal(React.createElement(FileViewerComponent, { profileUrl: profileUrl, nickname: nickname, type: type, url: url, name: name, onCancel: onCancel, onDelete: function () { return deleteMessage(message).then(function () { return onCancel(); }); }, isByMe: config.userId === userId, disableDelete: (threadInfo === null || threadInfo === void 0 ? void 0 : threadInfo.replyCount) > 0 }), document.getElementById(ui_Modal.MODAL_ROOT));
 };
 var FileViewerComponent = function (_a) {
     var 
@@ -24,7 +24,7 @@ var FileViewerComponent = function (_a) {
     // file
     name = _a.name, type = _a.type, url = _a.url, 
     // others
-    isByMe = _a.isByMe, onCancel = _a.onCancel, onDelete = _a.onDelete, disableDelete = _a.disableDelete, onDownloadClick = _a.onDownloadClick;
+    isByMe = _a.isByMe, onCancel = _a.onCancel, onDelete = _a.onDelete, disableDelete = _a.disableDelete;
     return (React.createElement("div", { className: "sendbird-fileviewer" },
         React.createElement("div", { className: "sendbird-fileviewer__header" },
             React.createElement("div", { className: "sendbird-fileviewer__header__left" },
@@ -34,7 +34,7 @@ var FileViewerComponent = function (_a) {
                 React.createElement(ui_Label.Label, { className: "sendbird-fileviewer__header__left__sender-name", type: ui_Label.LabelTypography.BODY_1, color: ui_Label.LabelColors.ONBACKGROUND_2 }, nickname)),
             React.createElement("div", { className: "sendbird-fileviewer__header__right" },
                 index.isSupportedFileView(type) && (React.createElement("div", { className: "sendbird-fileviewer__header__right__actions" },
-                    React.createElement("a", { className: "sendbird-fileviewer__header__right__actions__download", rel: "noopener noreferrer", href: url, target: "_blank", onClick: onDownloadClick },
+                    React.createElement("a", { className: "sendbird-fileviewer__header__right__actions__download", rel: "noopener noreferrer", href: url, target: "_blank" },
                         React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.DOWNLOAD, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px" })),
                     onDelete && isByMe && (React.createElement("div", { className: "sendbird-fileviewer__header__right__actions__delete" },
                         React.createElement(ui_Icon.default, { className: disableDelete ? 'disabled' : '', type: ui_Icon.IconTypes.DELETE, fillColor: disableDelete ? ui_Icon.IconColors.GRAY : ui_Icon.IconColors.ON_BACKGROUND_1, height: "24px", width: "24px", onClick: function () {
@@ -53,4 +53,4 @@ var FileViewerComponent = function (_a) {
 };
 
 exports.FileViewerView = FileViewerView;
-//# sourceMappingURL=bundle-BElidCBa.js.map
+//# sourceMappingURL=bundle-C8cnT2au.js.map

package/cjs/chunks/bundle-C8cnT2au.js.map

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

package/cjs/chunks/{bundle-BzBRoraS.js → bundle-C9YHSQ4e.js}

@@ -19,4 +19,4 @@ var AddGroupChannelView = function (_a) {
 };
 
 exports.AddGroupChannelView = AddGroupChannelView;
-//# sourceMappingURL=bundle-BzBRoraS.js.map
+//# sourceMappingURL=bundle-C9YHSQ4e.js.map

package/cjs/chunks/bundle-C9YHSQ4e.js.map

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

package/cjs/chunks/{bundle-ChQ3Q-GS.js → bundle-C9jXxNI1.js}

@@ -2,12 +2,12 @@
 
 var React = require('react');
 var DOMPurify = require('dompurify');
-var _const = require('./bundle-D_RomXCz.js');
-var _const$1 = require('./bundle-P5AI1HkP.js');
-var _tslib = require('./bundle-B3Lu20wG.js');
-var consts = require('./bundle-DKspFBdx.js');
-var consts$2 = require('./bundle-BO1-msX2.js');
-var consts$1 = require('./bundle-DIfKPcm_.js');
+var _const = require('./bundle-BlvFC-Rm.js');
+var _const$1 = require('./bundle-DUP4cxoZ.js');
+var _tslib = require('./bundle-Q5_I3n-8.js');
+var consts = require('./bundle-8oxVWV_9.js');
+var consts$2 = require('./bundle-B2cSnWcr.js');
+var consts$1 = require('./bundle-BR1tsZpK.js');
 
 function renderToString(_a) {
     var userId = _a.userId, nickname = _a.nickname;
@@ -249,4 +249,4 @@ exports.nodeListToArray = nodeListToArray;
 exports.renderToString = renderToString;
 exports.sanitizeString = sanitizeString;
 exports.usePaste = usePaste;
-//# sourceMappingURL=bundle-ChQ3Q-GS.js.map
+//# sourceMappingURL=bundle-C9jXxNI1.js.map

package/cjs/chunks/bundle-C9jXxNI1.js.map

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

package/cjs/chunks/{bundle-CqTg15Dn.js → bundle-CCVRe_w3.js}

@@ -10,4 +10,4 @@ function getIsReactionEnabled(_a) {
 }
 
 exports.getIsReactionEnabled = getIsReactionEnabled;
-//# sourceMappingURL=bundle-CqTg15Dn.js.map
+//# sourceMappingURL=bundle-CCVRe_w3.js.map

package/cjs/chunks/bundle-CCVRe_w3.js.map

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

package/cjs/chunks/{bundle-DOmB6XkC.js → bundle-CD9H6RqJ.js}

@@ -6,17 +6,17 @@ var ui_IconButton = require('../ui/IconButton.js');
 var ui_Icon = require('../ui/Icon.js');
 var ui_ContextMenu = require('../ui/ContextMenu.js');
 var ChannelSettings_components_UserListItem = require('../ChannelSettings/components/UserListItem.js');
-var _tslib = require('./bundle-B3Lu20wG.js');
+var _tslib = require('./bundle-Q5_I3n-8.js');
 var SendbirdChat = require('@sendbird/chat');
-var ui_Modal = require('./bundle-BJD09510.js');
+var ui_Modal = require('./bundle-dNtU9_eg.js');
 var ui_UserListItem = require('../ui/UserListItem.js');
-var utils = require('./bundle-Bc6y_vRE.js');
+var utils = require('./bundle-CDBTt08y.js');
 var ChannelSettings_context = require('../ChannelSettings/context.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var LocalizationContext = require('./bundle-DvduWWQk.js');
-var index = require('./bundle-DRT94QO5.js');
-require('./bundle-B-njjZtk.js');
-var uuid = require('./bundle-S09sS9Ub.js');
+var LocalizationContext = require('./bundle-CmFB08Wf.js');
+var index = require('./bundle-BdHrSYl1.js');
+require('./bundle-C88DsCNB.js');
+var uuid = require('./bundle-DfYperTC.js');
 
 function MembersModal(_a) {
     var _this = this;
@@ -26,7 +26,7 @@ function MembersModal(_a) {
     var _d = React.useState(null), memberQuery = _d[0], setMemberQuery = _d[1];
     var channel = ChannelSettings_context.useChannelSettingsContext().channel;
     var state = useSendbirdStateContext.useSendbirdStateContext();
-    var currentUserId = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.userId;
+    var currentUser = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.userId;
     var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
     React.useEffect(function () {
         var memberListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
@@ -52,52 +52,50 @@ function MembersModal(_a) {
                             return [2 /*return*/];
                         });
                     }); },
-                }) }, members.map(function (member) {
-                return (React.createElement(ui_UserListItem, { user: member, key: member.userId, currentUser: currentUserId, action: function (_a) {
-                        var parentRef = _a.parentRef, actionRef = _a.actionRef;
-                        return (React.createElement(React.Fragment, null, (channel === null || channel === void 0 ? void 0 : channel.myRole) === 'operator' && currentUserId !== member.userId && (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_IconButton, { className: "sendbird-user-message__more__menu", width: "32px", height: "32px", onClick: function () {
-                                    toggleDropdown();
-                                } },
-                                React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.CONTENT_INVERSE }))); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems, { parentContainRef: parentRef, parentRef: actionRef, closeDropdown: closeDropdown, openLeft: true },
-                                React.createElement(ui_ContextMenu.OperatorMenuItem, { channel: channel, user: member, disable: currentUserId === member.userId, onChange: function (_, member, isOperator) {
-                                        setMembers(members.map(function (m) {
-                                            if (m.userId === member.userId) {
-                                                return _tslib.__assign(_tslib.__assign({}, member), { role: isOperator ? SendbirdChat.Role.OPERATOR : SendbirdChat.Role.NONE });
-                                            }
-                                            return m;
-                                        }));
-                                        closeDropdown();
-                                    }, onError: function () {
-                                        // FIXME: handle error later
-                                        closeDropdown();
-                                    }, dataSbId: "channel_setting_member_context_menu_".concat((member.role !== 'operator') ? 'register_as_operator' : 'unregister_operator') }, member.role !== 'operator'
-                                    ? stringSet.CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR
-                                    : stringSet.CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR),
-                                // No muted members in broadcast channel
-                                !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast) && (React.createElement(ui_ContextMenu.MuteMenuItem, { channel: channel, user: member, onChange: function (_, member, isMuted) {
-                                        setMembers(members.map(function (m) {
-                                            if (m.userId === member.userId) {
-                                                return _tslib.__assign(_tslib.__assign({}, member), { isMuted: isMuted });
-                                            }
-                                            return m;
+                }) }, members.map(function (member) { return (React.createElement(ui_UserListItem, { user: member, key: member.userId, currentUser: currentUser, action: function (_a) {
+                    var parentRef = _a.parentRef, actionRef = _a.actionRef;
+                    return (React.createElement(React.Fragment, null, (channel === null || channel === void 0 ? void 0 : channel.myRole) === 'operator' && (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_IconButton, { className: "sendbird-user-message__more__menu", width: "32px", height: "32px", onClick: function () {
+                                toggleDropdown();
+                            } },
+                            React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.CONTENT_INVERSE }))); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems, { parentContainRef: parentRef, parentRef: actionRef, closeDropdown: closeDropdown, openLeft: true },
+                            React.createElement(ui_ContextMenu.OperatorMenuItem, { channel: channel, user: member, disable: currentUser === member.userId, onChange: function (_, member, isOperator) {
+                                    setMembers(members.map(function (m) {
+                                        if (m.userId === member.userId) {
+                                            return _tslib.__assign(_tslib.__assign({}, member), { role: isOperator ? SendbirdChat.Role.OPERATOR : SendbirdChat.Role.NONE });
+                                        }
+                                        return m;
+                                    }));
+                                    closeDropdown();
+                                }, onError: function () {
+                                    // FIXME: handle error later
+                                    closeDropdown();
+                                }, dataSbId: "channel_setting_member_context_menu_".concat((member.role !== 'operator') ? 'register_as_operator' : 'unregister_operator') }, member.role !== 'operator'
+                                ? stringSet.CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR
+                                : stringSet.CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR),
+                            // No muted members in broadcast channel
+                            !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast) && (React.createElement(ui_ContextMenu.MuteMenuItem, { channel: channel, user: member, onChange: function (_, member, isMuted) {
+                                    setMembers(members.map(function (m) {
+                                        if (m.userId === member.userId) {
+                                            return _tslib.__assign(_tslib.__assign({}, member), { isMuted: isMuted });
+                                        }
+                                        return m;
+                                    }));
+                                    closeDropdown();
+                                }, onError: function () {
+                                    // FIXME: handle error later
+                                    closeDropdown();
+                                }, dataSbId: "channel_setting_member_context_menu_".concat((member.isMuted) ? 'unmute' : 'mute') }, member.isMuted
+                                ? stringSet.CHANNEL_SETTING__MODERATION__UNMUTE
+                                : stringSet.CHANNEL_SETTING__MODERATION__MUTE)),
+                            React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                    channel === null || channel === void 0 ? void 0 : channel.banUser(member, -1, '').then(function () {
+                                        setMembers(members.filter(function (_a) {
+                                            var userId = _a.userId;
+                                            return userId !== member.userId;
                                         }));
-                                        closeDropdown();
-                                    }, onError: function () {
-                                        // FIXME: handle error later
-                                        closeDropdown();
-                                    }, dataSbId: "channel_setting_member_context_menu_".concat((member.isMuted) ? 'unmute' : 'mute') }, member.isMuted
-                                    ? stringSet.CHANNEL_SETTING__MODERATION__UNMUTE
-                                    : stringSet.CHANNEL_SETTING__MODERATION__MUTE)),
-                                React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
-                                        channel === null || channel === void 0 ? void 0 : channel.banUser(member, -1, '').then(function () {
-                                            setMembers(members.filter(function (_a) {
-                                                var userId = _a.userId;
-                                                return userId !== member.userId;
-                                            }));
-                                        });
-                                    }, dataSbId: "channel_setting_member_context_menu_ban" }, stringSet.CHANNEL_SETTING__MODERATION__BAN))); } }))));
-                    } }));
-            })))));
+                                    });
+                                }, dataSbId: "channel_setting_member_context_menu_ban" }, stringSet.CHANNEL_SETTING__MODERATION__BAN))); } }))));
+                } })); })))));
 }
 
 function InviteUsers(_a) {
@@ -283,4 +281,4 @@ var MemberList = function () {
 };
 
 exports.MemberList = MemberList;
-//# sourceMappingURL=bundle-DOmB6XkC.js.map
+//# sourceMappingURL=bundle-CD9H6RqJ.js.map

package/{chunks/bundle-BOrV2z_R.js.map → cjs/chunks/bundle-CD9H6RqJ.js.map}

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

package/cjs/chunks/{bundle-Bc6y_vRE.js → bundle-CDBTt08y.js}

@@ -10,4 +10,4 @@ var isMobileIOS = function (userAgent) {
 
 exports.isMobileIOS = isMobileIOS;
 exports.noop = noop;
-//# sourceMappingURL=bundle-Bc6y_vRE.js.map
+//# sourceMappingURL=bundle-CDBTt08y.js.map

package/cjs/chunks/bundle-CDBTt08y.js.map

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

package/cjs/chunks/{bundle-BNCNRHux.js → bundle-CIswYN43.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var _tslib = require('./bundle-B3Lu20wG.js');
+var _tslib = require('./bundle-Q5_I3n-8.js');
 var React = require('react');
-var MediaQueryContext = require('./bundle-1FXPxsfD.js');
+var MediaQueryContext = require('./bundle-CsvKRjaK.js');
 
 var DEFAULT_DURATION = 300;
 function preventDefault(e) {
@@ -76,4 +76,4 @@ function useLongPress(_a, _b) {
 }
 
 exports.useLongPress = useLongPress;
-//# sourceMappingURL=bundle-BNCNRHux.js.map
+//# sourceMappingURL=bundle-CIswYN43.js.map

package/cjs/chunks/bundle-CIswYN43.js.map

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

package/cjs/chunks/{bundle-CEiDcA9X.js → bundle-CS644BJp.js}

@@ -1689,4 +1689,4 @@ function MessageTemplate(_a) {
 
 exports.MessageProvider = MessageProvider;
 exports.MessageTemplate = MessageTemplate;
-//# sourceMappingURL=bundle-CEiDcA9X.js.map
+//# sourceMappingURL=bundle-CS644BJp.js.map