@sendbird/uikit-react 3.14.11 → 3.14.12

package/chunks/{bundle-BIskIEc4.js → bundle-CQdKG76t.js}

@@ -1,14 +1,14 @@
-import { c as __spreadArray } from './bundle-DqCapAeT.js';
+import { c as __spreadArray } from './bundle-B9I7KCZ2.js';
 import React__default from 'react';
-import { f as format } from './bundle-7-6QgE5D.js';
+import { f as format } from './bundle-Cme8jJ5D.js';
 import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
-import { c as LabelStringSet, L as Label, a as LabelTypography, b as LabelColors } from './bundle-DZPdjyt1.js';
+import { c as LabelStringSet, L as Label, a as LabelTypography, b as LabelColors } from './bundle-B1gHpFXu.js';
 import Loader from '../ui/Loader.js';
-import { C as isTemplateMessage, j as isImage, A as isGif, h as isVideo, D as isAudio, E as isVoiceMessageMimeType, F as isSentStatus } from './bundle--g96ylsl.js';
+import { C as isTemplateMessage, j as isImage, A as isGif, h as isVideo, D as isAudio, E as isVoiceMessageMimeType, F as isSentStatus } from './bundle-BGoByD2z.js';
 import { OutgoingMessageStates, getOutgoingMessageState } from '../utils/message/getOutgoingMessageState.js';
-import { i as isToday, a as isYesterday, b as isThisYear } from './bundle-DdwhQDq_.js';
-import { u as useLocalization } from './bundle-CtzIZOAD.js';
-import { c as classnames } from './bundle-DqfiKk6y.js';
+import { i as isToday, a as isYesterday, b as isThisYear } from './bundle-K3w8yQDQ.js';
+import { u as useLocalization } from './bundle-BPLoGpIy.js';
+import { c as classnames } from './bundle-B628FXKZ.js';
 
 var getChannelTitle = function (channel, currentUserId, stringSet) {
     var _a;
@@ -136,4 +136,4 @@ function MessageStatus(_a) {
 }
 
 export { MessageStatus as M, getTotalMembers as a, getLastMessageCreatedAt as b, getLastMessage as c, getChannelUnreadMessageCount as d, MessageStatusTypes as e, getChannelTitle as g };
-//# sourceMappingURL=bundle-BIskIEc4.js.map
+//# sourceMappingURL=bundle-CQdKG76t.js.map

package/chunks/{bundle-BIskIEc4.js.map → bundle-CQdKG76t.js.map}

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

package/chunks/{bundle-CkeZ5LIv.js → bundle-CYhNLg4_.js}

@@ -1,7 +1,7 @@
 import { ConnectionHandler } from '@sendbird/chat';
 import { useState, useEffect, useLayoutEffect, useMemo } from 'react';
-import { u as uuidv4 } from './bundle-BZJwRZ4K.js';
-import { a as __awaiter, b as __generator } from './bundle-DqCapAeT.js';
+import { u as uuidv4 } from './bundle-B97onQ-B.js';
+import { a as __awaiter, b as __generator } from './bundle-B9I7KCZ2.js';
 
 function useOnlineStatus(sdk, logger) {
     var _a, _b;
@@ -194,4 +194,4 @@ function useMarkAsDeliveredScheduler(_a, _b) {
 }
 
 export { useMarkAsDeliveredScheduler as a, useUnmount as b, schedulerFactory as s, useOnlineStatus as u };
-//# sourceMappingURL=bundle-CkeZ5LIv.js.map
+//# sourceMappingURL=bundle-CYhNLg4_.js.map

package/chunks/{bundle-CkeZ5LIv.js.map → bundle-CYhNLg4_.js.map}

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

package/chunks/{bundle-BBYeR6Ff.js → bundle-CZY0TUC6.js}

@@ -5,4 +5,4 @@ var USER_ACTIONS = {
 };
 
 export { USER_ACTIONS as U };
-//# sourceMappingURL=bundle-BBYeR6Ff.js.map
+//# sourceMappingURL=bundle-CZY0TUC6.js.map

package/chunks/bundle-CZY0TUC6.js.map

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

package/chunks/{bundle-D1Xe_caU.js → bundle-CfHQbcbZ.js}

@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
-import { p as pubSubTopics, s as shouldPubSubPublishToChannel, a as shouldPubSubPublishToThread } from './bundle-CuPeMBUo.js';
-import { s as scrollIntoLast$1 } from './bundle-CiGwwxLF.js';
+import { p as pubSubTopics, s as shouldPubSubPublishToChannel, a as shouldPubSubPublishToThread } from './bundle-D6I-uHp_.js';
+import { s as scrollIntoLast$1 } from './bundle-CmAD8QUZ.js';
 import '../utils/message/getOutgoingMessageState.js';
-import { d as SCROLL_BOTTOM_DELAY_FOR_SEND } from './bundle-DhS_dAXj.js';
+import { d as SCROLL_BOTTOM_DELAY_FOR_SEND } from './bundle-Mfnn12A9.js';
 
 var getNicknamesMapFromMembers = function (members) {
     if (members === void 0) { members = []; }
@@ -167,4 +167,4 @@ var useSendMultipleFilesMessage = function (_a, _b) {
 };
 
 export { getNicknamesMapFromMembers as a, compareIds as c, getParentMessageFrom as g, isAboutSame as i, scrollIntoLast as s, useSendMultipleFilesMessage as u };
-//# sourceMappingURL=bundle-D1Xe_caU.js.map
+//# sourceMappingURL=bundle-CfHQbcbZ.js.map

package/chunks/{bundle-D1Xe_caU.js.map → bundle-CfHQbcbZ.js.map}

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

package/chunks/bundle-CjetZNxA.js

@@ -0,0 +1,320 @@
+import { a as __awaiter, b as __generator, _ as __assign, c as __spreadArray } from './bundle-B9I7KCZ2.js';
+import React__default, { useState, useContext, useEffect, useCallback } from 'react';
+import { L as LocalizationContext, u as useLocalization } from './bundle-BPLoGpIy.js';
+import { useChannelSettingsContext } from '../ChannelSettings/context.js';
+import Button, { ButtonTypes, ButtonSizes } from '../ui/Button.js';
+import { U as UserListItemMenu } from './bundle-CQV5GP72.js';
+import { UserListItem } from '../ui/UserListItem.js';
+import { M as Modal } from './bundle-DAF0GGlr.js';
+import { u as useOnScrollPositionChangeDetector } from './bundle-B6LYNEOD.js';
+import { L as Label, b as LabelColors, a as LabelTypography } from './bundle-B1gHpFXu.js';
+import { OperatorFilter } from '@sendbird/chat/groupChannel';
+import { n as noop } from './bundle-B628FXKZ.js';
+import { a as MembersModal } from './bundle-Bc2fRy19.js';
+
+function OperatorsModal(_a) {
+    var _this = this;
+    var onCancel = _a.onCancel, _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.createElement(UserListItem, __assign({}, props)); } : _b;
+    var _c = useState([]), operators = _c[0], setOperators = _c[1];
+    var _d = useState(null), operatorQuery = _d[0], setOperatorQuery = _d[1];
+    var channel = useChannelSettingsContext().channel;
+    var stringSet = useContext(LocalizationContext).stringSet;
+    useEffect(function () {
+        var operatorListQuery = channel === null || channel === void 0 ? void 0 : channel.createOperatorListQuery({
+            limit: 20,
+        });
+        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.createElement("div", null,
+        React__default.createElement(Modal, { isFullScreenOnMobile: true, hideFooter: true, titleText: stringSet.CHANNEL_SETTING__OPERATORS__TITLE_ALL, onCancel: onCancel },
+            React__default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: useOnScrollPositionChangeDetector({
+                    onReachedBottom: function () { return __awaiter(_this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            if (operatorQuery && operatorQuery.hasNext) {
+                                operatorQuery.next().then(function (o) {
+                                    setOperators(__spreadArray(__spreadArray([], operators, true), o, true));
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); },
+                }) }, operators.map(function (member) { return (React__default.createElement(React__default.Fragment, { key: member.userId }, renderUserListItem({
+                user: member,
+                channel: channel,
+                renderListItemMenu: function (props) { return (React__default.createElement(UserListItemMenu, __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.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.createElement(UserListItem, __assign({}, props)); } : _b;
+    var _c = useState([]), members = _c[0], setMembers = _c[1];
+    var _d = useState({}), selectedMembers = _d[0], setSelectedMembers = _d[1];
+    var _e = useState(null), memberQuery = _e[0], setMemberQuery = _e[1];
+    var stringSet = useContext(LocalizationContext).stringSet;
+    var channel = useChannelSettingsContext().channel;
+    useEffect(function () {
+        var memberListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
+            operatorFilter: 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.createElement("div", null,
+        React__default.createElement(Modal, { isFullScreenOnMobile: true, type: 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.createElement(Label, { color: (selectedCount > 0) ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_3, type: LabelTypography.CAPTION_1 }, "".concat(selectedCount, " ").concat(stringSet.MODAL__INVITE_MEMBER__SELECTED)),
+            React__default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: useOnScrollPositionChangeDetector({
+                    onReachedBottom: function () { return __awaiter(_this, void 0, void 0, function () {
+                        var hasNext;
+                        return __generator(this, function (_a) {
+                            hasNext = memberQuery.hasNext;
+                            if (hasNext) {
+                                memberQuery.next().then(function (o) {
+                                    setMembers(__spreadArray(__spreadArray([], members, true), o, true));
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); },
+                }) }, members.map(function (member) { return (React__default.createElement(React__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 = __assign(__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.createElement(UserListItem, __assign({}, props)); } : _b;
+    var _c = useState([]), operators = _c[0], setOperators = _c[1];
+    var _d = useState(false), showMore = _d[0], setShowMore = _d[1];
+    var _e = useState(false), showAdd = _e[0], setShowAdd = _e[1];
+    var _f = useState(false), hasNext = _f[0], setHasNext = _f[1];
+    var stringSet = useContext(LocalizationContext).stringSet;
+    var channel = useChannelSettingsContext().channel;
+    var refreshList = useCallback(function () {
+        if (!channel) {
+            setOperators([]);
+            return;
+        }
+        var operatorListQuery = channel === null || channel === void 0 ? void 0 : channel.createOperatorListQuery({ limit: 10 });
+        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]);
+    useEffect(refreshList, [channel === null || channel === void 0 ? void 0 : channel.url]);
+    return (React__default.createElement(React__default.Fragment, null,
+        operators.map(function (operator) { return (React__default.createElement(React__default.Fragment, { key: operator.userId }, renderUserListItem({
+            user: operator,
+            channel: channel,
+            size: 'small',
+            avatarSize: '24px',
+            renderListItemMenu: function (props) { return (React__default.createElement(UserListItemMenu, __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.createElement(items.OperatorToggleMenuItem, null));
+                } }))); },
+        }))); }),
+        React__default.createElement("div", { className: "sendbird-channel-settings-accordion__footer" },
+            React__default.createElement(Button, { type: ButtonTypes.SECONDARY, size: ButtonSizes.SMALL, onClick: function () {
+                    setShowAdd(true);
+                } }, stringSet.CHANNEL_SETTING__OPERATORS__TITLE_ADD),
+            hasNext && (React__default.createElement(Button, { type: ButtonTypes.SECONDARY, size: ButtonSizes.SMALL, onClick: function () {
+                    setShowMore(true);
+                } }, stringSet.CHANNEL_SETTING__OPERATORS__TITLE_ALL))),
+        showMore && (React__default.createElement(OperatorsModal, { onCancel: function () {
+                setShowMore(false);
+                refreshList();
+            }, renderUserListItem: renderUserListItem })),
+        showAdd && (React__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.createElement(UserListItem, __assign({}, props)); } : _b;
+    var _c = useState([]), members = _c[0], setMembers = _c[1];
+    var _d = useState(null), memberQuery = _d[0], setMemberQuery = _d[1];
+    var channel = useChannelSettingsContext().channel;
+    var stringSet = useLocalization().stringSet;
+    useEffect(function () {
+        var bannedUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createBannedUserListQuery();
+        if (bannedUserListQuery) {
+            bannedUserListQuery.next().then(function (users) {
+                setMembers(users);
+            });
+            setMemberQuery(bannedUserListQuery);
+        }
+    }, []);
+    return (React__default.createElement("div", null,
+        React__default.createElement(Modal, { isFullScreenOnMobile: true, hideFooter: true, onCancel: function () { return onCancel(); }, onSubmit: noop, titleText: stringSet.CHANNEL_SETTING__BANNED_MEMBERS__TITLE },
+            React__default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: useOnScrollPositionChangeDetector({
+                    onReachedBottom: function () { return __awaiter(_this, void 0, void 0, function () {
+                        var hasNext;
+                        return __generator(this, function (_a) {
+                            if (!memberQuery)
+                                return [2 /*return*/];
+                            hasNext = memberQuery.hasNext;
+                            if (hasNext) {
+                                memberQuery.next().then(function (o) {
+                                    setMembers(__spreadArray(__spreadArray([], members, true), o, true));
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); },
+                }) }, members.map(function (member) { return (renderUserListItem({
+                user: member,
+                channel: channel,
+                renderListItemMenu: function (props) { return (React__default.createElement(UserListItemMenu, __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.createElement(items.BanToggleMenuItem, null);
+                    } }))); },
+            })); })))));
+}
+
+var BannedUserList = function (_a) {
+    var _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.createElement(UserListItem, __assign({}, props)); } : _b;
+    var _c = useState([]), members = _c[0], setMembers = _c[1];
+    var _d = useState(false), hasNext = _d[0], setHasNext = _d[1];
+    var _e = useState(false), showModal = _e[0], setShowModal = _e[1];
+    var stringSet = useContext(LocalizationContext).stringSet;
+    var channel = useChannelSettingsContext().channel;
+    var refreshList = useCallback(function () {
+        if (!channel) {
+            setMembers([]);
+            return;
+        }
+        var bannedUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createBannedUserListQuery({ limit: 10 });
+        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]);
+    useEffect(refreshList, [channel === null || channel === void 0 ? void 0 : channel.url]);
+    return (React__default.createElement(React__default.Fragment, null,
+        members.map(function (member) { return (React__default.createElement(React__default.Fragment, { key: member.userId }, renderUserListItem({
+            user: member,
+            channel: channel,
+            size: 'small',
+            avatarSize: '24px',
+            renderListItemMenu: function (props) { return (React__default.createElement(UserListItemMenu, __assign({}, props, { isBanned: true, onToggleBanState: function () { return refreshList(); }, renderMenuItems: function (_a) {
+                    var items = _a.items;
+                    return (React__default.createElement(items.BanToggleMenuItem, null));
+                } }))); },
+        }))); }),
+        members && members.length === 0 && (React__default.createElement(Label, { className: "sendbird-channel-settings__empty-list", type: LabelTypography.SUBTITLE_2, color: LabelColors.ONBACKGROUND_3 }, stringSet.CHANNEL_SETTING__MODERATION__EMPTY_BAN)),
+        hasNext && (React__default.createElement("div", { className: "sendbird-channel-settings-accordion__footer" },
+            React__default.createElement(Button, { type: ButtonTypes.SECONDARY, size: ButtonSizes.SMALL, onClick: function () {
+                    setShowModal(true);
+                } }, stringSet.CHANNEL_SETTING__MODERATION__ALL_BAN))),
+        showModal && (React__default.createElement(BannedUsersModal, { onCancel: function () {
+                setShowModal(false);
+                refreshList();
+            }, renderUserListItem: renderUserListItem }))));
+};
+
+var MutedMemberList = function (_a) {
+    var _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.createElement(UserListItem, __assign({}, props)); } : _b;
+    var _c = useState([]), members = _c[0], setMembers = _c[1];
+    var _d = useState(false), hasNext = _d[0], setHasNext = _d[1];
+    var _e = useState(false), showModal = _e[0], setShowModal = _e[1];
+    var stringSet = useLocalization().stringSet;
+    var channel = useChannelSettingsContext().channel;
+    var refreshList = useCallback(function () {
+        if (!channel) {
+            setMembers([]);
+            return;
+        }
+        var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
+            limit: 10,
+            // @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]);
+    useEffect(refreshList, [channel === null || channel === void 0 ? void 0 : channel.url]);
+    return (React__default.createElement(React__default.Fragment, null,
+        members.map(function (member) { return (React__default.createElement(React__default.Fragment, { key: member.userId }, renderUserListItem({
+            user: member,
+            channel: channel,
+            size: 'small',
+            avatarSize: '24px',
+            renderListItemMenu: function (props) { return (React__default.createElement(UserListItemMenu, __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.createElement(items.MuteToggleMenuItem, null));
+                } }))); },
+        }))); }),
+        members && members.length === 0 && (React__default.createElement(Label, { className: "sendbird-channel-settings__empty-list", type: LabelTypography.SUBTITLE_2, color: LabelColors.ONBACKGROUND_3 }, stringSet.CHANNEL_SETTING__NO_UNMUTED)),
+        hasNext && (React__default.createElement("div", { className: "sendbird-channel-settings-accordion__footer" },
+            React__default.createElement(Button, { type: ButtonTypes.SECONDARY, size: ButtonSizes.SMALL, onClick: function () {
+                    setShowModal(true);
+                } }, stringSet.CHANNEL_SETTING__MUTED_MEMBERS__TITLE_ALL))),
+        showModal && (React__default.createElement(MembersModal, { onCancel: function () {
+                setShowModal(false);
+                refreshList();
+            }, renderUserListItem: renderUserListItem }))));
+};
+
+export { BannedUserList as B, MutedMemberList as M, OperatorList as O };
+//# sourceMappingURL=bundle-CjetZNxA.js.map

package/chunks/bundle-CjetZNxA.js.map

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

package/chunks/{bundle-CiGwwxLF.js → bundle-CmAD8QUZ.js}

@@ -1,4 +1,4 @@
-import { c as __spreadArray } from './bundle-DqCapAeT.js';
+import { c as __spreadArray } from './bundle-B9I7KCZ2.js';
 import { SendingStatus } from '@sendbird/chat/message';
 
 var scrollToRenderedMessage = function (scrollRef, initialTimeStamp, setIsScrolled) {
@@ -120,5 +120,5 @@ var isAboutSame = function (a, b, px) {
     return Math.abs(a - b) <= px;
 };
 
-export { isDisabledBecauseFrozen as a, isDisabledBecauseMuted as b, scrollToRenderedMessage as c, getNicknamesMapFromMembers as d, getAllEmojisMapFromEmojiContainer as g, isAboutSame as i, mergeAndSortMessages as m, passUnsuccessfullMessages as p, scrollIntoLast as s };
-//# sourceMappingURL=bundle-CiGwwxLF.js.map
+export { isAboutSame as a, isDisabledBecauseFrozen as b, isDisabledBecauseMuted as c, scrollToRenderedMessage as d, getNicknamesMapFromMembers as e, getAllEmojisMapFromEmojiContainer as g, isOperator as i, mergeAndSortMessages as m, passUnsuccessfullMessages as p, scrollIntoLast as s };
+//# sourceMappingURL=bundle-CmAD8QUZ.js.map

package/chunks/{bundle-CiGwwxLF.js.map → bundle-CmAD8QUZ.js.map}

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

package/chunks/{bundle-7-6QgE5D.js → bundle-Cme8jJ5D.js}

@@ -1,5 +1,5 @@
-import { r as requiredArgs, _ as _typeof, t as toDate } from './bundle-B47eqWqI.js';
-import { d as defaultLocale } from './bundle-BgR4m5uB.js';
+import { r as requiredArgs, _ as _typeof, t as toDate } from './bundle-DnVyKahm.js';
+import { d as defaultLocale } from './bundle-CMgJTzYH.js';
 
 /**
  * @name isDate
@@ -1645,4 +1645,4 @@ function cleanEscapedString(input) {
 }
 
 export { format as f, toInteger as t };
-//# sourceMappingURL=bundle-7-6QgE5D.js.map
+//# sourceMappingURL=bundle-Cme8jJ5D.js.map