@sendbird/uikit-react 3.14.12 → 3.14.13

package/cjs/chunks/{bundle-C8TPWHi1.js → bundle-BQCnDaTh.js}

@@ -5,7 +5,11 @@ var GroupChannelList_components_GroupChannelListHeader = require('../GroupChanne
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 var EditUserProfile = require('../EditUserProfile.js');
 var ui_PlaceHolder = require('../ui/PlaceHolder.js');
-var index = require('./bundle-3sKikwZF.js');
+var index = require('./bundle-DpkHbKDj.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var GroupChannelListUIView = function (_a) {
     var renderHeader = _a.renderHeader, renderPlaceHolderError = _a.renderPlaceHolderError, renderPlaceHolderLoading = _a.renderPlaceHolderLoading, renderPlaceHolderEmptyList = _a.renderPlaceHolderEmptyList, onChangeTheme = _a.onChangeTheme, onUserProfileUpdated = _a.onUserProfileUpdated, allowProfileEdit = _a.allowProfileEdit, channels = _a.channels, onLoadMore = _a.onLoadMore, initialized = _a.initialized, renderChannel = _a.renderChannel, renderAddChannel = _a.renderAddChannel;
@@ -20,31 +24,31 @@ var GroupChannelListUIView = function (_a) {
                     return null;
                 if (renderPlaceHolderLoading)
                     return renderPlaceHolderLoading();
-                return React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.LOADING });
+                return React__default.default.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.LOADING });
             },
             empty: function () {
                 if (!initialized)
                     return null;
                 if (renderPlaceHolderEmptyList)
                     return renderPlaceHolderEmptyList();
-                return React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.NO_CHANNELS });
+                return React__default.default.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.NO_CHANNELS });
             },
             error: function () {
                 if (!initialized || !stores.sdkStore.error)
                     return null;
                 if (renderPlaceHolderError)
                     return renderPlaceHolderError();
-                return React.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.WRONG });
+                return React__default.default.createElement(ui_PlaceHolder.default, { type: ui_PlaceHolder.PlaceHolderTypes.WRONG });
             },
         },
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "sendbird-channel-list__header" }, (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || (React.createElement(GroupChannelList_components_GroupChannelListHeader.GroupChannelListHeader, { onEdit: function () { return allowProfileEdit && setShowProfileEdit(true); }, allowProfileEdit: allowProfileEdit, renderIconButton: function () { return renderer.addChannel(); } }))),
-        showProfileEdit && (React.createElement(EditUserProfile, { onThemeChange: onChangeTheme, onCancel: function () { return setShowProfileEdit(false); }, onEditProfile: function (user) {
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement("div", { className: "sendbird-channel-list__header" }, (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || (React__default.default.createElement(GroupChannelList_components_GroupChannelListHeader.GroupChannelListHeader, { onEdit: function () { return allowProfileEdit && setShowProfileEdit(true); }, allowProfileEdit: allowProfileEdit, renderIconButton: function () { return renderer.addChannel(); } }))),
+        showProfileEdit && (React__default.default.createElement(EditUserProfile, { onThemeChange: onChangeTheme, onCancel: function () { return setShowProfileEdit(false); }, onEditProfile: function (user) {
                 setShowProfileEdit(false);
                 onUserProfileUpdated(user);
             } })),
-        React.createElement(ChannelListComponent, { data: channels, renderItem: renderer.channel, onLoadMore: onLoadMore, placeholderLoading: renderer.placeholder.loading(), placeholderEmpty: renderer.placeholder.empty(), placeholderError: renderer.placeholder.error() })));
+        React__default.default.createElement(ChannelListComponent, { data: channels, renderItem: renderer.channel, onLoadMore: onLoadMore, placeholderLoading: renderer.placeholder.loading(), placeholderEmpty: renderer.placeholder.empty(), placeholderError: renderer.placeholder.error() })));
 };
 /**
  * To do: Implement windowing
@@ -58,12 +62,12 @@ var ChannelListComponent = function (props) {
     var onScroll = index.useOnScrollPositionChangeDetector({
         onReachedBottom: function () { return onLoadMore === null || onLoadMore === void 0 ? void 0 : onLoadMore(); },
     });
-    return (React.createElement("div", { className: 'sendbird-channel-list__body', onScroll: onScroll },
+    return (React__default.default.createElement("div", { className: 'sendbird-channel-list__body', onScroll: onScroll },
         placeholderError,
-        React.createElement("div", null, data.map(function (item, index) { return renderItem({ item: item, index: index }); })),
+        React__default.default.createElement("div", null, data.map(function (item, index) { return renderItem({ item: item, index: index }); })),
         placeholderLoading,
         data.length === 0 && placeholderEmpty));
 };
 
 exports.GroupChannelListUIView = GroupChannelListUIView;
-//# sourceMappingURL=bundle-C8TPWHi1.js.map
+//# sourceMappingURL=bundle-BQCnDaTh.js.map

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

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

package/cjs/chunks/{bundle-Cu2j1EmN.js → bundle-BSZgogl8.js}

@@ -112,4 +112,4 @@ exports.__extends = __extends;
 exports.__generator = __generator;
 exports.__rest = __rest;
 exports.__spreadArray = __spreadArray;
-//# sourceMappingURL=bundle-Cu2j1EmN.js.map
+//# sourceMappingURL=bundle-BSZgogl8.js.map

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

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

package/cjs/chunks/bundle-BTZpmQhR.js

@@ -0,0 +1,368 @@
+'use strict';
+
+var _tslib = require('./bundle-BSZgogl8.js');
+var React = require('react');
+var LocalizationContext = require('./bundle-BZCLEq3c.js');
+var ChannelSettings_context = require('../ChannelSettings/context.js');
+var ui_Button = require('../ui/Button.js');
+var UserListItemMenu = require('./bundle-Tcfsteoj.js');
+var ui_UserListItem = require('../ui/UserListItem.js');
+var ui_Modal = require('./bundle-BCx4TP9R.js');
+var index = require('./bundle-DpkHbKDj.js');
+var ui_Label = require('./bundle-CLsH2CaE.js');
+var groupChannel = require('@sendbird/chat/groupChannel');
+var utils = require('./bundle-BsUVmQmx.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+function OperatorsModal(_a) {
+    var _this = this;
+    var onCancel = _a.onCancel, _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.operatorListQueryParams, operatorListQueryParams = _c === void 0 ? {} : _c;
+    var _d = React.useState([]), operators = _d[0], setOperators = _d[1];
+    var _e = React.useState(null), operatorQuery = _e[0], setOperatorQuery = _e[1];
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    React.useEffect(function () {
+        var operatorListQuery = channel === null || channel === void 0 ? void 0 : channel.createOperatorListQuery(_tslib.__assign({ limit: 20 }, operatorListQueryParams));
+        operatorListQuery === null || operatorListQuery === void 0 ? void 0 : operatorListQuery.next().then(function (operators) {
+            setOperators(operators);
+        });
+        setOperatorQuery(operatorListQuery !== null && operatorListQuery !== void 0 ? operatorListQuery : null);
+    }, []);
+    return (React__default.default.createElement("div", null,
+        React__default.default.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, hideFooter: true, titleText: stringSet.CHANNEL_SETTING__OPERATORS__TITLE_ALL, onCancel: onCancel },
+            React__default.default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: index.useOnScrollPositionChangeDetector({
+                    onReachedBottom: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                        return _tslib.__generator(this, function (_a) {
+                            if (operatorQuery && operatorQuery.hasNext) {
+                                operatorQuery.next().then(function (o) {
+                                    setOperators(_tslib.__spreadArray(_tslib.__spreadArray([], operators, true), o, true));
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); },
+                }) }, operators.map(function (member) { return (React__default.default.createElement(React__default.default.Fragment, { key: member.userId }, renderUserListItem({
+                user: member,
+                channel: channel,
+                renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__assign({}, props, { isOperator: true, onToggleOperatorState: function (_a) {
+                        var user = _a.user;
+                        setOperators(operators.filter(function (_a) {
+                            var userId = _a.userId;
+                            return userId !== user.userId;
+                        }));
+                    }, renderMenuItems: function (_a) {
+                        var items = _a.items;
+                        return (React__default.default.createElement(items.OperatorToggleMenuItem, null));
+                    } }))); },
+            }))); })))));
+}
+
+function AddOperatorsModal(_a) {
+    var _this = this;
+    var onCancel = _a.onCancel, onSubmit = _a.onSubmit, _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b;
+    var _c = React.useState([]), members = _c[0], setMembers = _c[1];
+    var _d = React.useState({}), selectedMembers = _d[0], setSelectedMembers = _d[1];
+    var _e = React.useState(null), memberQuery = _e[0], setMemberQuery = _e[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    React.useEffect(function () {
+        var memberListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
+            operatorFilter: groupChannel.OperatorFilter.NONOPERATOR,
+            limit: 20,
+        });
+        memberListQuery === null || memberListQuery === void 0 ? void 0 : memberListQuery.next().then(function (members) {
+            setMembers(members);
+        });
+        setMemberQuery(memberListQuery !== null && memberListQuery !== void 0 ? memberListQuery : null);
+    }, []);
+    var selectedCount = Object.keys(selectedMembers).filter(function (m) { return selectedMembers[m]; }).length;
+    return (React__default.default.createElement("div", null,
+        React__default.default.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, type: ui_Button.ButtonTypes.PRIMARY, submitText: stringSet.CHANNEL_SETTING__OPERATORS__ADD_BUTTON, onCancel: onCancel, onSubmit: function () {
+                var members = Object.keys(selectedMembers).filter(function (m) { return selectedMembers[m]; });
+                channel === null || channel === void 0 ? void 0 : channel.addOperators(members).then(function () {
+                    onSubmit(members);
+                });
+            }, titleText: stringSet.CHANNEL_SETTING__MEMBERS__SELECT_TITLE },
+            React__default.default.createElement(ui_Label.Label, { color: (selectedCount > 0) ? ui_Label.LabelColors.PRIMARY : ui_Label.LabelColors.ONBACKGROUND_3, type: ui_Label.LabelTypography.CAPTION_1 }, "".concat(selectedCount, " ").concat(stringSet.MODAL__INVITE_MEMBER__SELECTED)),
+            React__default.default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: index.useOnScrollPositionChangeDetector({
+                    onReachedBottom: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                        var hasNext;
+                        return _tslib.__generator(this, function (_a) {
+                            hasNext = memberQuery.hasNext;
+                            if (hasNext) {
+                                memberQuery.next().then(function (o) {
+                                    setMembers(_tslib.__spreadArray(_tslib.__spreadArray([], members, true), o, true));
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); },
+                }) }, members.map(function (member) { return (React__default.default.createElement(React__default.default.Fragment, { key: member.userId }, renderUserListItem({
+                user: member,
+                checkBox: true,
+                checked: selectedMembers[member.userId],
+                disabled: (member === null || member === void 0 ? void 0 : member.role) === 'operator',
+                onChange: function (event) {
+                    var _a;
+                    var modifiedSelectedMembers = _tslib.__assign(_tslib.__assign({}, selectedMembers), (_a = {}, _a[event.target.id] = event.target.checked, _a));
+                    if (!event.target.checked) {
+                        delete modifiedSelectedMembers[event.target.id];
+                    }
+                    setSelectedMembers(modifiedSelectedMembers);
+                },
+            }))); })))));
+}
+
+var OperatorList = function (_a) {
+    var _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.operatorListQueryParams, operatorListQueryParams = _c === void 0 ? {} : _c;
+    var _d = React.useState([]), operators = _d[0], setOperators = _d[1];
+    var _e = React.useState(false), showMore = _e[0], setShowMore = _e[1];
+    var _f = React.useState(false), showAdd = _f[0], setShowAdd = _f[1];
+    var _g = React.useState(false), hasNext = _g[0], setHasNext = _g[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    var refreshList = React.useCallback(function () {
+        if (!channel) {
+            setOperators([]);
+            return;
+        }
+        var operatorListQuery = channel === null || channel === void 0 ? void 0 : channel.createOperatorListQuery(_tslib.__assign({ limit: 10 }, operatorListQueryParams));
+        operatorListQuery.next().then(function (operators) {
+            setOperators(operators);
+            setHasNext(operatorListQuery.hasNext);
+        });
+    }, [channel === null || channel === void 0 ? void 0 : channel.url, channel === null || channel === void 0 ? void 0 : channel.createOperatorListQuery]);
+    React.useEffect(refreshList, [channel === null || channel === void 0 ? void 0 : channel.url]);
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        operators.map(function (operator) { return (React__default.default.createElement(React__default.default.Fragment, { key: operator.userId }, renderUserListItem({
+            user: operator,
+            channel: channel,
+            size: 'small',
+            avatarSize: '24px',
+            renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__assign({}, props, { 
+                /**
+                 * isOperator:
+                 * The ReturnType of createOperatorListQuery is User[].
+                 * We can't determine if this user is an operator, because User doesn't have a `role` property.
+                 * Therefore, we need to explicitly specify that this user is an operator.
+                */
+                isOperator: true, onToggleOperatorState: function () {
+                    // Limitation to server-side table update delay.
+                    setTimeout(function () {
+                        refreshList();
+                    }, 500);
+                }, renderMenuItems: function (_a) {
+                    var items = _a.items;
+                    return (React__default.default.createElement(items.OperatorToggleMenuItem, null));
+                } }))); },
+        }))); }),
+        React__default.default.createElement("div", { className: "sendbird-channel-settings-accordion__footer" },
+            React__default.default.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () {
+                    setShowAdd(true);
+                } }, stringSet.CHANNEL_SETTING__OPERATORS__TITLE_ADD),
+            hasNext && (React__default.default.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () {
+                    setShowMore(true);
+                } }, stringSet.CHANNEL_SETTING__OPERATORS__TITLE_ALL))),
+        showMore && (React__default.default.createElement(OperatorsModal, { onCancel: function () {
+                setShowMore(false);
+                refreshList();
+            }, renderUserListItem: renderUserListItem, operatorListQueryParams: operatorListQueryParams })),
+        showAdd && (React__default.default.createElement(AddOperatorsModal, { onCancel: function () { return setShowAdd(false); }, onSubmit: function () {
+                /**
+                 * Limitation to server-side table update delay.
+                 */
+                setTimeout(function () {
+                    refreshList();
+                }, 500);
+                setShowAdd(false);
+            }, renderUserListItem: renderUserListItem }))));
+};
+
+function BannedUsersModal(_a) {
+    var _this = this;
+    var onCancel = _a.onCancel, _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.bannedUserListQueryParams, bannedUserListQueryParams = _c === void 0 ? {} : _c;
+    var _d = React.useState([]), members = _d[0], setMembers = _d[1];
+    var _e = React.useState(null), memberQuery = _e[0], setMemberQuery = _e[1];
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    React.useEffect(function () {
+        var bannedUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createBannedUserListQuery(_tslib.__assign({ limit: 20 }, bannedUserListQueryParams));
+        if (bannedUserListQuery) {
+            bannedUserListQuery.next().then(function (users) {
+                setMembers(users);
+            });
+            setMemberQuery(bannedUserListQuery);
+        }
+    }, []);
+    return (React__default.default.createElement("div", null,
+        React__default.default.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, hideFooter: true, onCancel: function () { return onCancel(); }, onSubmit: utils.noop, titleText: stringSet.CHANNEL_SETTING__BANNED_MEMBERS__TITLE },
+            React__default.default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: index.useOnScrollPositionChangeDetector({
+                    onReachedBottom: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                        var hasNext;
+                        return _tslib.__generator(this, function (_a) {
+                            if (!memberQuery)
+                                return [2 /*return*/];
+                            hasNext = memberQuery.hasNext;
+                            if (hasNext) {
+                                memberQuery.next().then(function (o) {
+                                    setMembers(_tslib.__spreadArray(_tslib.__spreadArray([], members, true), o, true));
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); },
+                }) }, members.map(function (member) { return (renderUserListItem({
+                user: member,
+                channel: channel,
+                renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__assign({}, props, { isBanned: true, onToggleBanState: function () {
+                        setMembers(members.filter(function (m) {
+                            return (m.userId !== member.userId);
+                        }));
+                    }, renderMenuItems: function (_a) {
+                        var items = _a.items;
+                        return React__default.default.createElement(items.BanToggleMenuItem, null);
+                    } }))); },
+            })); })))));
+}
+
+var BannedUserList = function (_a) {
+    var _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.bannedUserListQueryParams, bannedUserListQueryParams = _c === void 0 ? {} : _c;
+    var _d = React.useState([]), members = _d[0], setMembers = _d[1];
+    var _e = React.useState(false), hasNext = _e[0], setHasNext = _e[1];
+    var _f = React.useState(false), showModal = _f[0], setShowModal = _f[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    var refreshList = React.useCallback(function () {
+        if (!channel) {
+            setMembers([]);
+            return;
+        }
+        var bannedUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createBannedUserListQuery(_tslib.__assign({ limit: 10 }, bannedUserListQueryParams));
+        bannedUserListQuery.next().then(function (users) {
+            setMembers(users);
+            setHasNext(bannedUserListQuery.hasNext);
+        });
+    }, [channel === null || channel === void 0 ? void 0 : channel.url, channel === null || channel === void 0 ? void 0 : channel.createBannedUserListQuery]);
+    React.useEffect(refreshList, [channel === null || channel === void 0 ? void 0 : channel.url]);
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        members.map(function (member) { return (React__default.default.createElement(React__default.default.Fragment, { key: member.userId }, renderUserListItem({
+            user: member,
+            channel: channel,
+            size: 'small',
+            avatarSize: '24px',
+            renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__assign({}, props, { isBanned: true, onToggleBanState: function () { return refreshList(); }, renderMenuItems: function (_a) {
+                    var items = _a.items;
+                    return (React__default.default.createElement(items.BanToggleMenuItem, null));
+                } }))); },
+        }))); }),
+        members && members.length === 0 && (React__default.default.createElement(ui_Label.Label, { className: "sendbird-channel-settings__empty-list", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_3 }, stringSet.CHANNEL_SETTING__MODERATION__EMPTY_BAN)),
+        hasNext && (React__default.default.createElement("div", { className: "sendbird-channel-settings-accordion__footer" },
+            React__default.default.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () {
+                    setShowModal(true);
+                } }, stringSet.CHANNEL_SETTING__MODERATION__ALL_BAN))),
+        showModal && (React__default.default.createElement(BannedUsersModal, { onCancel: function () {
+                setShowModal(false);
+                refreshList();
+            }, renderUserListItem: renderUserListItem, bannedUserListQueryParams: bannedUserListQueryParams }))));
+};
+
+function MutedMembersModal(_a) {
+    var _this = this;
+    var onCancel = _a.onCancel, _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.memberListQueryParams, memberListQueryParams = _c === void 0 ? {} : _c;
+    var _d = React.useState([]), members = _d[0], setMembers = _d[1];
+    var _e = React.useState(null), memberQuery = _e[0], setMemberQuery = _e[1];
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    React.useEffect(function () {
+        var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery(_tslib.__assign(_tslib.__assign({ limit: 20 }, memberListQueryParams), { 
+            // @ts-ignore
+            mutedMemberFilter: 'muted' }));
+        memberUserListQuery === null || memberUserListQuery === void 0 ? void 0 : memberUserListQuery.next().then(function (members) {
+            setMembers(members);
+        });
+        setMemberQuery(memberUserListQuery !== null && memberUserListQuery !== void 0 ? memberUserListQuery : null);
+    }, []);
+    return (React__default.default.createElement("div", null,
+        React__default.default.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, hideFooter: true, onCancel: function () { return onCancel(); }, onSubmit: utils.noop, titleText: stringSet.CHANNEL_SETTING__MUTED_MEMBERS__TITLE },
+            React__default.default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: index.useOnScrollPositionChangeDetector({
+                    onReachedBottom: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                        var hasNext;
+                        return _tslib.__generator(this, function (_a) {
+                            hasNext = memberQuery.hasNext;
+                            if (hasNext) {
+                                memberQuery.next().then(function (o) {
+                                    setMembers(_tslib.__spreadArray(_tslib.__spreadArray([], members, true), o, true));
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); },
+                }) }, members.map(function (member) { return (React__default.default.createElement(React__default.default.Fragment, { key: member.userId }, renderUserListItem({
+                user: member,
+                channel: channel,
+                renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__assign({}, props, { onToggleMuteState: function () {
+                        setMembers(members.filter(function (m) {
+                            return (m.userId !== member.userId);
+                        }));
+                    }, renderMenuItems: function (_a) {
+                        var items = _a.items;
+                        return (React__default.default.createElement(items.MuteToggleMenuItem, null));
+                    } }))); },
+            }))); })))));
+}
+
+var MutedMemberList = function (_a) {
+    var _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.memberListQueryParams, memberListQueryParams = _c === void 0 ? {} : _c;
+    var _d = React.useState([]), members = _d[0], setMembers = _d[1];
+    var _e = React.useState(false), hasNext = _e[0], setHasNext = _e[1];
+    var _f = React.useState(false), showModal = _f[0], setShowModal = _f[1];
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    var refreshList = React.useCallback(function () {
+        if (!channel) {
+            setMembers([]);
+            return;
+        }
+        var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery(_tslib.__assign(_tslib.__assign({ limit: 10 }, memberListQueryParams), { 
+            // @ts-ignore
+            mutedMemberFilter: 'muted' }));
+        memberUserListQuery.next().then(function (members) {
+            setMembers(members);
+            setHasNext(memberUserListQuery.hasNext);
+        });
+    }, [channel === null || channel === void 0 ? void 0 : channel.url, channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery]);
+    React.useEffect(refreshList, [channel === null || channel === void 0 ? void 0 : channel.url]);
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        members.map(function (member) { return (React__default.default.createElement(React__default.default.Fragment, { key: member.userId }, renderUserListItem({
+            user: member,
+            channel: channel,
+            size: 'small',
+            avatarSize: '24px',
+            renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__assign({}, props, { onToggleMuteState: function () {
+                    // Limitation to server-side table update delay.
+                    setTimeout(function () {
+                        refreshList();
+                    }, 500);
+                }, renderMenuItems: function (_a) {
+                    var items = _a.items;
+                    return (React__default.default.createElement(items.MuteToggleMenuItem, null));
+                } }))); },
+        }))); }),
+        members && members.length === 0 && (React__default.default.createElement(ui_Label.Label, { className: "sendbird-channel-settings__empty-list", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_3 }, stringSet.CHANNEL_SETTING__NO_UNMUTED)),
+        hasNext && (React__default.default.createElement("div", { className: "sendbird-channel-settings-accordion__footer" },
+            React__default.default.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () {
+                    setShowModal(true);
+                } }, stringSet.CHANNEL_SETTING__MUTED_MEMBERS__TITLE_ALL))),
+        showModal && (React__default.default.createElement(MutedMembersModal, { onCancel: function () {
+                setShowModal(false);
+                refreshList();
+            }, renderUserListItem: renderUserListItem, memberListQueryParams: memberListQueryParams }))));
+};
+
+exports.BannedUserList = BannedUserList;
+exports.MutedMemberList = MutedMemberList;
+exports.OperatorList = OperatorList;
+//# sourceMappingURL=bundle-BTZpmQhR.js.map

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

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

package/cjs/chunks/{bundle-QTX1PYil.js → bundle-BTdldoB1.js}

@@ -17,4 +17,4 @@ function useKeyDown(ref, keyDownCallbackMap) {
 }
 
 exports.useKeyDown = useKeyDown;
-//# sourceMappingURL=bundle-QTX1PYil.js.map
+//# sourceMappingURL=bundle-BTdldoB1.js.map

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

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

package/cjs/chunks/{bundle-DBawqMOI.js → bundle-BTnBDw_3.js}

@@ -1,16 +1,20 @@
 'use strict';
 
-var _tslib = require('./bundle-Cu2j1EmN.js');
+var _tslib = require('./bundle-BSZgogl8.js');
 var React = require('react');
-var index$1 = require('./bundle-Di0c83Tp.js');
+var index$1 = require('./bundle-Cmc_F-zF.js');
 var ui_Icon = require('../ui/Icon.js');
-var ui_Label = require('./bundle-BM95N32D.js');
+var ui_Label = require('./bundle-CLsH2CaE.js');
 var ui_Loader = require('../ui/Loader.js');
-var index$2 = require('./bundle-VyDwmxN4.js');
+var index$2 = require('./bundle-E1Tkj9Pc.js');
 var utils_message_getOutgoingMessageState = require('../utils/message/getOutgoingMessageState.js');
-var index = require('./bundle-C4CtpUvD.js');
-var LocalizationContext = require('./bundle-Bq4FcvTF.js');
-var utils = require('./bundle-CO52Wsr3.js');
+var index = require('./bundle-B8d4gIYz.js');
+var LocalizationContext = require('./bundle-BZCLEq3c.js');
+var utils = require('./bundle-BsUVmQmx.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var getChannelTitle = function (channel, currentUserId, stringSet) {
     var _a;
@@ -127,12 +131,12 @@ function MessageStatus(_a) {
     var status = utils_message_getOutgoingMessageState.getOutgoingMessageState(channel, message);
     var hideMessageStatusIcon = ((_b = channel === null || channel === void 0 ? void 0 : channel.isGroupChannel) === null || _b === void 0 ? void 0 : _b.call(channel)) && ((channel.isSuper || channel.isPublic || channel.isBroadcast)
         && !(status === utils_message_getOutgoingMessageState.OutgoingMessageStates.PENDING || status === utils_message_getOutgoingMessageState.OutgoingMessageStates.FAILED));
-    return (React.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
+    return (React__default.default.createElement("div", { className: _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), true), [
             'sendbird-message-status',
         ], false).join(' ') },
-        (status === utils_message_getOutgoingMessageState.OutgoingMessageStates.PENDING) ? (React.createElement(ui_Loader, { className: "sendbird-message-status__icon", testID: "sendbird-message-status-icon", width: "16px", height: "16px" },
-            React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SPINNER, fillColor: ui_Icon.IconColors.PRIMARY, width: "16px", height: "16px" }))) : (React.createElement(ui_Icon.default, { className: utils.classnames('sendbird-message-status__icon', hideMessageStatusIcon && 'hide-icon', status !== utils_message_getOutgoingMessageState.OutgoingMessageStates.FAILED && 'sendbird-message-status--sent'), testID: "sendbird-message-status-icon", type: iconType[status] || ui_Icon.IconTypes.ERROR, fillColor: iconColor[status], width: "16px", height: "16px" })),
-        index$2.isSentStatus(status) && (React.createElement(ui_Label.Label, { className: "sendbird-message-status__text", testID: "sendbird-message-status-text", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, isDateSeparatorConsidered
+        (status === utils_message_getOutgoingMessageState.OutgoingMessageStates.PENDING) ? (React__default.default.createElement(ui_Loader, { className: "sendbird-message-status__icon", testID: "sendbird-message-status-icon", width: "16px", height: "16px" },
+            React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SPINNER, fillColor: ui_Icon.IconColors.PRIMARY, width: "16px", height: "16px" }))) : (React__default.default.createElement(ui_Icon.default, { className: utils.classnames('sendbird-message-status__icon', hideMessageStatusIcon && 'hide-icon', status !== utils_message_getOutgoingMessageState.OutgoingMessageStates.FAILED && 'sendbird-message-status--sent'), testID: "sendbird-message-status-icon", type: iconType[status] || ui_Icon.IconTypes.ERROR, fillColor: iconColor[status], width: "16px", height: "16px" })),
+        index$2.isSentStatus(status) && (React__default.default.createElement(ui_Label.Label, { className: "sendbird-message-status__text", testID: "sendbird-message-status-text", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, isDateSeparatorConsidered
             ? index$1.format((message === null || message === void 0 ? void 0 : message.createdAt) || 0, 'p', { locale: dateLocale })
             : getLastMessageCreatedAt({ channel: channel, locale: dateLocale, stringSet: stringSet })))));
 }
@@ -144,4 +148,4 @@ exports.getChannelUnreadMessageCount = getChannelUnreadMessageCount;
 exports.getLastMessage = getLastMessage;
 exports.getLastMessageCreatedAt = getLastMessageCreatedAt;
 exports.getTotalMembers = getTotalMembers;
-//# sourceMappingURL=bundle-DBawqMOI.js.map
+//# sourceMappingURL=bundle-BTnBDw_3.js.map

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

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

package/cjs/chunks/{bundle-D1QbLxW7.js → bundle-BV2SpuVS.js}

@@ -29,4 +29,4 @@ function getCaseResolvedThreadReplySelectType(threadReplySelectType) {
 
 exports.getCaseResolvedReplyType = getCaseResolvedReplyType;
 exports.getCaseResolvedThreadReplySelectType = getCaseResolvedThreadReplySelectType;
-//# sourceMappingURL=bundle-D1QbLxW7.js.map
+//# sourceMappingURL=bundle-BV2SpuVS.js.map

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

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

package/cjs/chunks/bundle-BXenYVc5.js

@@ -0,0 +1,18 @@
+'use strict';
+
+var _tslib = require('./bundle-BSZgogl8.js');
+var React = require('react');
+var SuggestedMentionListView = require('./bundle-43QCjeGi.js');
+var Thread_context = require('../Thread/context.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+var SuggestedMentionList = function (props) {
+    var currentChannel = Thread_context.useThreadContext().currentChannel;
+    return (React__default.default.createElement(SuggestedMentionListView.SuggestedMentionListView, _tslib.__assign({}, props, { currentChannel: currentChannel })));
+};
+
+exports.SuggestedMentionList = SuggestedMentionList;
+//# sourceMappingURL=bundle-BXenYVc5.js.map

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

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