@sendbird/uikit-react 3.14.12-rc.0 → 3.14.13-rc.0

package/chunks/{bundle-Iq_AKwnp.js → bundle-CuxNG4zI.js}

@@ -1,28 +1,25 @@
-import { a as __awaiter, b as __generator, _ as __assign, c as __spreadArray } from './bundle-DQSBOtg7.js';
+import { _ as __assign, a as __awaiter, b as __generator, c as __spreadArray } from './bundle-BEX34LhF.js';
 import React__default, { useState, useContext, useEffect, useCallback } from 'react';
-import { L as LocalizationContext, u as useLocalization } from './bundle-Gdpa0T6A.js';
+import { L as LocalizationContext, u as useLocalization } from './bundle-D1rGeQXE.js';
 import { useChannelSettingsContext } from '../ChannelSettings/context.js';
 import Button, { ButtonTypes, ButtonSizes } from '../ui/Button.js';
-import { U as UserListItemMenu } from './bundle-DBiK-ub4.js';
+import { U as UserListItemMenu } from './bundle-j3giG67D.js';
 import { UserListItem } from '../ui/UserListItem.js';
-import { M as Modal } from './bundle-BLM4PZ0X.js';
-import { u as useOnScrollPositionChangeDetector } from './bundle-DuNlIUC2.js';
-import { L as Label, b as LabelColors, a as LabelTypography } from './bundle-65RjZ_9O.js';
+import { M as Modal } from './bundle-TwHZAIx1.js';
+import { u as useOnScrollPositionChangeDetector } from './bundle-UFwGtxTZ.js';
+import { L as Label, b as LabelColors, a as LabelTypography } from './bundle-GKQqMuW2.js';
 import { OperatorFilter } from '@sendbird/chat/groupChannel';
-import { n as noop } from './bundle-DcYQjOKO.js';
-import { a as MembersModal } from './bundle-J6jBE7z2.js';
+import { n as noop } from './bundle-CHe8JkGr.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 onCancel = _a.onCancel, _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.createElement(UserListItem, __assign({}, props)); } : _b, _c = _a.operatorListQueryParams, operatorListQueryParams = _c === void 0 ? {} : _c;
+    var _d = useState([]), operators = _d[0], setOperators = _d[1];
+    var _e = useState(null), operatorQuery = _e[0], setOperatorQuery = _e[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,
-        });
+        var operatorListQuery = channel === null || channel === void 0 ? void 0 : channel.createOperatorListQuery(__assign({ limit: 20 }, operatorListQueryParams));
         operatorListQuery === null || operatorListQuery === void 0 ? void 0 : operatorListQuery.next().then(function (operators) {
             setOperators(operators);
         });
@@ -41,8 +38,7 @@ function OperatorsModal(_a) {
                             return [2 /*return*/];
                         });
                     }); },
-                }) }, operators.map(function (member) { return (renderUserListItem({
-                key: member.userId,
+                }) }, 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) {
@@ -55,7 +51,7 @@ function OperatorsModal(_a) {
                         var items = _a.items;
                         return (React__default.createElement(items.OperatorToggleMenuItem, null));
                     } }))); },
-            })); })))));
+            }))); })))));
 }
 
 function AddOperatorsModal(_a) {
@@ -98,9 +94,8 @@ function AddOperatorsModal(_a) {
                             return [2 /*return*/];
                         });
                     }); },
-                }) }, members.map(function (member) { return (renderUserListItem({
+                }) }, members.map(function (member) { return (React__default.createElement(React__default.Fragment, { key: member.userId }, renderUserListItem({
                 user: member,
-                key: member.userId,
                 checkBox: true,
                 checked: selectedMembers[member.userId],
                 disabled: (member === null || member === void 0 ? void 0 : member.role) === 'operator',
@@ -112,15 +107,15 @@ function AddOperatorsModal(_a) {
                     }
                     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 _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.createElement(UserListItem, __assign({}, props)); } : _b, _c = _a.operatorListQueryParams, operatorListQueryParams = _c === void 0 ? {} : _c;
+    var _d = useState([]), operators = _d[0], setOperators = _d[1];
+    var _e = useState(false), showMore = _e[0], setShowMore = _e[1];
+    var _f = useState(false), showAdd = _f[0], setShowAdd = _f[1];
+    var _g = useState(false), hasNext = _g[0], setHasNext = _g[1];
     var stringSet = useContext(LocalizationContext).stringSet;
     var channel = useChannelSettingsContext().channel;
     var refreshList = useCallback(function () {
@@ -128,7 +123,7 @@ var OperatorList = function (_a) {
             setOperators([]);
             return;
         }
-        var operatorListQuery = channel === null || channel === void 0 ? void 0 : channel.createOperatorListQuery({ limit: 10 });
+        var operatorListQuery = channel === null || channel === void 0 ? void 0 : channel.createOperatorListQuery(__assign({ limit: 10 }, operatorListQueryParams));
         operatorListQuery.next().then(function (operators) {
             setOperators(operators);
             setHasNext(operatorListQuery.hasNext);
@@ -136,8 +131,7 @@ var OperatorList = function (_a) {
     }, [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 (renderUserListItem({
-            key: operator.userId,
+        operators.map(function (operator) { return (React__default.createElement(React__default.Fragment, { key: operator.userId }, renderUserListItem({
             user: operator,
             channel: channel,
             size: 'small',
@@ -158,7 +152,7 @@ var OperatorList = 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);
@@ -169,7 +163,7 @@ var OperatorList = function (_a) {
         showMore && (React__default.createElement(OperatorsModal, { onCancel: function () {
                 setShowMore(false);
                 refreshList();
-            }, renderUserListItem: renderUserListItem })),
+            }, renderUserListItem: renderUserListItem, operatorListQueryParams: operatorListQueryParams })),
         showAdd && (React__default.createElement(AddOperatorsModal, { onCancel: function () { return setShowAdd(false); }, onSubmit: function () {
                 /**
                  * Limitation to server-side table update delay.
@@ -183,13 +177,13 @@ var OperatorList = function (_a) {
 
 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 onCancel = _a.onCancel, _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.createElement(UserListItem, __assign({}, props)); } : _b, _c = _a.bannedUserListQueryParams, bannedUserListQueryParams = _c === void 0 ? {} : _c;
+    var _d = useState([]), members = _d[0], setMembers = _d[1];
+    var _e = useState(null), memberQuery = _e[0], setMemberQuery = _e[1];
     var channel = useChannelSettingsContext().channel;
     var stringSet = useLocalization().stringSet;
     useEffect(function () {
-        var bannedUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createBannedUserListQuery();
+        var bannedUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createBannedUserListQuery(__assign({ limit: 20 }, bannedUserListQueryParams));
         if (bannedUserListQuery) {
             bannedUserListQuery.next().then(function (users) {
                 setMembers(users);
@@ -216,7 +210,6 @@ function BannedUsersModal(_a) {
                     }); },
                 }) }, members.map(function (member) { return (renderUserListItem({
                 user: member,
-                key: member.userId,
                 channel: channel,
                 renderListItemMenu: function (props) { return (React__default.createElement(UserListItemMenu, __assign({}, props, { isBanned: true, onToggleBanState: function () {
                         setMembers(members.filter(function (m) {
@@ -230,10 +223,10 @@ function BannedUsersModal(_a) {
 }
 
 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 _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.createElement(UserListItem, __assign({}, props)); } : _b, _c = _a.bannedUserListQueryParams, bannedUserListQueryParams = _c === void 0 ? {} : _c;
+    var _d = useState([]), members = _d[0], setMembers = _d[1];
+    var _e = useState(false), hasNext = _e[0], setHasNext = _e[1];
+    var _f = useState(false), showModal = _f[0], setShowModal = _f[1];
     var stringSet = useContext(LocalizationContext).stringSet;
     var channel = useChannelSettingsContext().channel;
     var refreshList = useCallback(function () {
@@ -241,7 +234,7 @@ var BannedUserList = function (_a) {
             setMembers([]);
             return;
         }
-        var bannedUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createBannedUserListQuery({ limit: 10 });
+        var bannedUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createBannedUserListQuery(__assign({ limit: 10 }, bannedUserListQueryParams));
         bannedUserListQuery.next().then(function (users) {
             setMembers(users);
             setHasNext(bannedUserListQuery.hasNext);
@@ -249,8 +242,7 @@ var BannedUserList = function (_a) {
     }, [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 (renderUserListItem({
-            key: member.userId,
+        members.map(function (member) { return (React__default.createElement(React__default.Fragment, { key: member.userId }, renderUserListItem({
             user: member,
             channel: channel,
             size: 'small',
@@ -259,7 +251,7 @@ var BannedUserList = 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 () {
@@ -268,14 +260,59 @@ var BannedUserList = function (_a) {
         showModal && (React__default.createElement(BannedUsersModal, { onCancel: function () {
                 setShowModal(false);
                 refreshList();
-            }, renderUserListItem: renderUserListItem }))));
+            }, 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.createElement(UserListItem, __assign({}, props)); } : _b, _c = _a.memberListQueryParams, memberListQueryParams = _c === void 0 ? {} : _c;
+    var _d = useState([]), members = _d[0], setMembers = _d[1];
+    var _e = useState(null), memberQuery = _e[0], setMemberQuery = _e[1];
+    var channel = useChannelSettingsContext().channel;
+    var stringSet = useLocalization().stringSet;
+    useEffect(function () {
+        var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery(__assign(__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.createElement("div", null,
+        React__default.createElement(Modal, { isFullScreenOnMobile: true, hideFooter: true, onCancel: function () { return onCancel(); }, onSubmit: noop, titleText: stringSet.CHANNEL_SETTING__MUTED_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) {
+                            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,
+                channel: channel,
+                renderListItemMenu: function (props) { return (React__default.createElement(UserListItemMenu, __assign({}, props, { onToggleMuteState: function () {
+                        setMembers(members.filter(function (m) {
+                            return (m.userId !== member.userId);
+                        }));
+                    }, renderMenuItems: function (_a) {
+                        var items = _a.items;
+                        return (React__default.createElement(items.MuteToggleMenuItem, null));
+                    } }))); },
+            }))); })))));
+}
+
 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 _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.createElement(UserListItem, __assign({}, props)); } : _b, _c = _a.memberListQueryParams, memberListQueryParams = _c === void 0 ? {} : _c;
+    var _d = useState([]), members = _d[0], setMembers = _d[1];
+    var _e = useState(false), hasNext = _e[0], setHasNext = _e[1];
+    var _f = useState(false), showModal = _f[0], setShowModal = _f[1];
     var stringSet = useLocalization().stringSet;
     var channel = useChannelSettingsContext().channel;
     var refreshList = useCallback(function () {
@@ -283,11 +320,9 @@ var MutedMemberList = function (_a) {
             setMembers([]);
             return;
         }
-        var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
-            limit: 10,
+        var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery(__assign(__assign({ limit: 10 }, memberListQueryParams), { 
             // @ts-ignore
-            mutedMemberFilter: 'muted',
-        });
+            mutedMemberFilter: 'muted' }));
         memberUserListQuery.next().then(function (members) {
             setMembers(members);
             setHasNext(memberUserListQuery.hasNext);
@@ -295,8 +330,7 @@ var MutedMemberList = function (_a) {
     }, [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 (renderUserListItem({
-            key: member.userId,
+        members.map(function (member) { return (React__default.createElement(React__default.Fragment, { key: member.userId }, renderUserListItem({
             user: member,
             channel: channel,
             size: 'small',
@@ -310,17 +344,17 @@ var MutedMemberList = 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 () {
+        showModal && (React__default.createElement(MutedMembersModal, { onCancel: function () {
                 setShowModal(false);
                 refreshList();
-            }, renderUserListItem: renderUserListItem }))));
+            }, renderUserListItem: renderUserListItem, memberListQueryParams: memberListQueryParams }))));
 };
 
 export { BannedUserList as B, MutedMemberList as M, OperatorList as O };
-//# sourceMappingURL=bundle-Iq_AKwnp.js.map
+//# sourceMappingURL=bundle-CuxNG4zI.js.map

package/chunks/{bundle-BLM4PZ0X.js.map → bundle-CuxNG4zI.js.map}

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

package/chunks/{bundle-DQtqJI-s.js → bundle-CwR8tkbM.js}

@@ -31,4 +31,4 @@ function useToggleReactionCallback(currentChannel, logger) {
 }
 
 export { useToggleReactionCallback as u };
-//# sourceMappingURL=bundle-DQtqJI-s.js.map
+//# sourceMappingURL=bundle-CwR8tkbM.js.map

package/chunks/bundle-CwR8tkbM.js.map

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

package/chunks/{bundle-J6jBE7z2.js → bundle-D-2Z-G9R.js}

@@ -1,28 +1,26 @@
-import { a as __awaiter, b as __generator, _ as __assign, c as __spreadArray, d as __rest } from './bundle-DQSBOtg7.js';
+import { _ as __assign, a as __awaiter, b as __generator, c as __spreadArray, d as __rest } from './bundle-BEX34LhF.js';
 import React__default, { useState, useContext, useEffect, useMemo, useCallback } from 'react';
 import { Role } from '@sendbird/chat';
-import { L as LocalizationContext, u as useLocalization } from './bundle-Gdpa0T6A.js';
+import { L as LocalizationContext, u as useLocalization } from './bundle-D1rGeQXE.js';
 import { useChannelSettingsContext } from '../ChannelSettings/context.js';
 import Button, { ButtonTypes, ButtonSizes } from '../ui/Button.js';
-import { U as UserListItemMenu } from './bundle-DBiK-ub4.js';
+import { U as UserListItemMenu } from './bundle-j3giG67D.js';
 import { UserListItem } from '../ui/UserListItem.js';
-import { M as Modal } from './bundle-BLM4PZ0X.js';
-import { n as noop } from './bundle-DcYQjOKO.js';
-import { u as useOnScrollPositionChangeDetector } from './bundle-DuNlIUC2.js';
-import './bundle-65RjZ_9O.js';
+import { M as Modal } from './bundle-TwHZAIx1.js';
+import { n as noop } from './bundle-CHe8JkGr.js';
+import { u as useOnScrollPositionChangeDetector } from './bundle-UFwGtxTZ.js';
+import './bundle-GKQqMuW2.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
 
 function MembersModal(_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 onCancel = _a.onCancel, _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.createElement(UserListItem, __assign({}, props)); } : _b, _c = _a.memberListQueryParams, memberListQueryParams = _c === void 0 ? {} : _c;
+    var _d = useState([]), members = _d[0], setMembers = _d[1];
+    var _e = useState(null), memberQuery = _e[0], setMemberQuery = _e[1];
     var channel = useChannelSettingsContext().channel;
     var stringSet = useContext(LocalizationContext).stringSet;
     useEffect(function () {
-        var memberListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
-            limit: 20,
-        });
+        var memberListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery(__assign({ limit: 20 }, memberListQueryParams));
         memberListQuery === null || memberListQuery === void 0 ? void 0 : memberListQuery.next().then(function (members) {
             setMembers(members);
         });
@@ -41,9 +39,10 @@ function MembersModal(_a) {
                             return [2 /*return*/];
                         });
                     }); },
-                }) }, members.map(function (member) { return (renderUserListItem({
+                }) }, members.map(function (member, index) { return (React__default.createElement(React__default.Fragment, { key: member.userId }, renderUserListItem({
+                // NOTE: This `index` is used to display the current user's user item at the top when customizing externally.
+                index: index,
                 user: member,
-                key: member.userId,
                 channel: channel,
                 renderListItemMenu: function (props) { return (React__default.createElement(UserListItemMenu, __assign({}, props, { onToggleOperatorState: function (_a) {
                         var isOperator = _a.newStatus;
@@ -73,7 +72,7 @@ function MembersModal(_a) {
                             return userId !== member.userId;
                         }));
                     } }))); },
-            })); })))));
+            }))); })))));
 }
 
 function InviteUsersModal(_a) {
@@ -175,31 +174,30 @@ function InviteUsersModal(_a) {
                 React__default.createElement("div", { className: "sendbird-more-members__popup-scroll__inner" }, users.map(function (user) {
                     var isMember = Boolean(membersMap ? membersMap[user.userId] : false);
                     var isSelected = Boolean(selectedUsers[user.userId]);
-                    return renderUserListItem({
-                        key: user.userId,
+                    return (React__default.createElement(React__default.Fragment, { key: user.userId }, renderUserListItem({
                         user: user,
                         checkBox: true,
                         checked: isMember || isSelected,
                         disabled: isMember,
                         onChange: function () { return onSelectUser(user); },
-                    });
+                    })));
                 }))))));
 }
 
 var MemberList = 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), showAllMembers = _e[0], setShowAllMembers = _e[1];
-    var _f = useState(false), showInviteUsers = _f[0], setShowInviteUsers = _f[1];
-    var _g = useChannelSettingsContext(), channel = _g.channel, forceUpdateUI = _g.forceUpdateUI;
+    var _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.createElement(UserListItem, __assign({}, props)); } : _b, _c = _a.memberListQueryParams, memberListQueryParams = _c === void 0 ? {} : _c;
+    var _d = useState([]), members = _d[0], setMembers = _d[1];
+    var _e = useState(false), hasNext = _e[0], setHasNext = _e[1];
+    var _f = useState(false), showAllMembers = _f[0], setShowAllMembers = _f[1];
+    var _g = useState(false), showInviteUsers = _g[0], setShowInviteUsers = _g[1];
+    var _h = useChannelSettingsContext(), channel = _h.channel, forceUpdateUI = _h.forceUpdateUI;
     var stringSet = useContext(LocalizationContext).stringSet;
     var refreshList = useCallback(function () {
         if (!channel) {
             setMembers([]);
             return;
         }
-        var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({ limit: 10 });
+        var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery(__assign({ limit: 10 }, memberListQueryParams));
         memberUserListQuery.next().then(function (members) {
             setMembers(members);
             setHasNext(memberUserListQuery.hasNext);
@@ -207,8 +205,9 @@ var MemberList = function (_a) {
     }, [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("div", { className: "sendbird-channel-settings-member-list" },
-        members.map(function (member) { return (renderUserListItem({
-            key: member.userId,
+        members.map(function (member, index) { return (React__default.createElement(React__default.Fragment, { key: member.userId }, renderUserListItem({
+            // NOTE: This `index` is used to display the current user's user item at the top when customizing externally.
+            index: index,
             user: member,
             channel: channel,
             size: 'small',
@@ -241,7 +240,7 @@ var MemberList = function (_a) {
                         return userId !== member.userId;
                     }));
                 } }))); },
-        })); }),
+        }))); }),
         React__default.createElement("div", { className: "sendbird-channel-settings-accordion__footer" },
             hasNext && (React__default.createElement(Button, { type: ButtonTypes.SECONDARY, size: ButtonSizes.SMALL, onClick: function () { return setShowAllMembers(true); } }, stringSet.CHANNEL_SETTING__MEMBERS__SEE_ALL_MEMBERS)),
             React__default.createElement(Button, { type: ButtonTypes.SECONDARY, size: ButtonSizes.SMALL, onClick: function () { return setShowInviteUsers(true); } }, stringSet.CHANNEL_SETTING__MEMBERS__INVITE_MEMBER)),
@@ -249,7 +248,7 @@ var MemberList = function (_a) {
                 setShowAllMembers(false);
                 refreshList();
                 forceUpdateUI();
-            }, renderUserListItem: renderUserListItem })),
+            }, renderUserListItem: renderUserListItem, memberListQueryParams: memberListQueryParams })),
         showInviteUsers && (React__default.createElement(InviteUsersModal, { onCancel: function () { return setShowInviteUsers(false); }, onSubmit: function () {
                 setShowInviteUsers(false);
                 refreshList();
@@ -257,5 +256,5 @@ var MemberList = function (_a) {
             }, renderUserListItem: renderUserListItem }))));
 };
 
-export { MemberList as M, MembersModal as a };
-//# sourceMappingURL=bundle-J6jBE7z2.js.map
+export { MemberList as M };
+//# sourceMappingURL=bundle-D-2Z-G9R.js.map

package/chunks/bundle-D-2Z-G9R.js.map

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

package/chunks/{bundle-Gdpa0T6A.js → bundle-D1rGeQXE.js}

@@ -1,7 +1,7 @@
-import { _ as __assign } from './bundle-DQSBOtg7.js';
+import { _ as __assign } from './bundle-BEX34LhF.js';
 import React__default from 'react';
-import { g as getStringSet } from './bundle--6jTPVzP.js';
-import { d as defaultLocale } from './bundle-y21E8nZg.js';
+import { g as getStringSet } from './bundle-BipIXldF.js';
+import { d as defaultLocale } from './bundle-BPNXAHCY.js';
 
 var LocalizationContextDefault = {
     stringSet: getStringSet('en'),
@@ -15,4 +15,4 @@ var LocalizationProvider = function (props) {
 var useLocalization = function () { return React__default.useContext(LocalizationContext); };
 
 export { LocalizationContext as L, LocalizationProvider as a, useLocalization as u };
-//# sourceMappingURL=bundle-Gdpa0T6A.js.map
+//# sourceMappingURL=bundle-D1rGeQXE.js.map

package/chunks/bundle-D1rGeQXE.js.map

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

package/chunks/{bundle-DaAtWAfc.js → bundle-D3hT6qVb.js}

@@ -11,4 +11,4 @@ function compareIds(a, b) {
 }
 
 export { compareIds as c };
-//# sourceMappingURL=bundle-DaAtWAfc.js.map
+//# sourceMappingURL=bundle-D3hT6qVb.js.map

package/chunks/bundle-D3hT6qVb.js.map

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

package/chunks/{bundle-K18yplA5.js → bundle-D5tIeT0x.js}

@@ -10,4 +10,4 @@ var uuidv4 = function () { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace
 }); };
 
 export { uuidv4 as u };
-//# sourceMappingURL=bundle-K18yplA5.js.map
+//# sourceMappingURL=bundle-D5tIeT0x.js.map

package/chunks/bundle-D5tIeT0x.js.map

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

package/chunks/{bundle-DA39xST1.js → bundle-D8GKg6tx.js}

@@ -13,4 +13,4 @@ function getIsReactionEnabled(_a) {
 }
 
 export { getIsReactionEnabled as g };
-//# sourceMappingURL=bundle-DA39xST1.js.map
+//# sourceMappingURL=bundle-D8GKg6tx.js.map

package/chunks/bundle-D8GKg6tx.js.map

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

package/chunks/{bundle-CL5R6eWu.js → bundle-DBeh20io.js}

@@ -1,24 +1,24 @@
-import { a as __awaiter, b as __generator, c as __spreadArray } from './bundle-DQSBOtg7.js';
+import { a as __awaiter, b as __generator, c as __spreadArray } from './bundle-BEX34LhF.js';
 import React__default, { useRef, useState, useEffect, useCallback } from 'react';
-import { i as isDisabledBecauseFrozen, a as isDisabledBecauseMuted, b as isDisabledBecauseSuggestedReplies } from './bundle-BEDfl5Hc.js';
+import { i as isDisabledBecauseFrozen, a as isDisabledBecauseMuted, b as isDisabledBecauseSuggestedReplies } from './bundle-BSr006OB.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { u as useLocalization } from './bundle-Gdpa0T6A.js';
+import { u as useLocalization } from './bundle-D1rGeQXE.js';
 import { SuggestedMentionList } from '../GroupChannel/components/SuggestedMentionList.js';
 import { useDirtyGetMentions } from '../Message/hooks/useDirtyGetMentions.js';
 import QuoteMessageInput from '../ui/QuoteMessageInput.js';
 import { useVoicePlayer } from '../VoicePlayer/useVoicePlayer.js';
 import { useVoiceRecorder, VoiceRecorderStatus } from '../VoiceRecorder/useVoiceRecorder.js';
-import { V as VoiceMessageInputStatus, a as VoiceMessageInput } from './bundle-UjnJB9JR.js';
-import { M as Modal, b as useGlobalModalContext, c as ModalFooter } from './bundle-BLM4PZ0X.js';
+import { V as VoiceMessageInputStatus, a as VoiceMessageInput } from './bundle-p0AgT_RG.js';
+import { M as Modal, b as useGlobalModalContext, c as ModalFooter } from './bundle-TwHZAIx1.js';
 import Button, { ButtonTypes, ButtonSizes } from '../ui/Button.js';
-import { V as VOICE_PLAYER_STATUS } from './bundle-D9r7jFIp.js';
-import { u as uuidv4 } from './bundle-K18yplA5.js';
+import { V as VOICE_PLAYER_STATUS } from './bundle-C_WidYQd.js';
+import { u as uuidv4 } from './bundle-D5tIeT0x.js';
 import MessageInput from '../ui/MessageInput.js';
-import { u as useMediaQueryContext } from './bundle-CzOlpSIQ.js';
-import { M as MessageInputKeys } from './bundle-CQj3m1X6.js';
-import { j as isImage } from './bundle-Cbvv0PRz.js';
-import './bundle-65RjZ_9O.js';
-import { c as compressImages } from './bundle-Ddqt86DZ.js';
+import { u as useMediaQueryContext } from './bundle-CEtwlkKx.js';
+import { M as MessageInputKeys } from './bundle-DxqFPE0s.js';
+import { j as isImage } from './bundle-asXUy8ZO.js';
+import './bundle-GKQqMuW2.js';
+import { c as compressImages } from './bundle-U2Pc6dmY.js';
 
 var VoiceMessageInputWrapper = function (_a) {
     var channel = _a.channel, onCancelClick = _a.onCancelClick, onSubmitClick = _a.onSubmitClick;
@@ -383,4 +383,4 @@ var MessageInputWrapperView = React__default.forwardRef(function (props, ref) {
 });
 
 export { MessageInputWrapperView as M, VoiceMessageInputWrapper as V };
-//# sourceMappingURL=bundle-CL5R6eWu.js.map
+//# sourceMappingURL=bundle-DBeh20io.js.map

package/chunks/{bundle-CL5R6eWu.js.map → bundle-DBeh20io.js.map}

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

package/chunks/{bundle-C81G11SF.js → bundle-DEiziBkg.js}

@@ -1,7 +1,7 @@
 import React__default from 'react';
-import { C as ContextMenu, b as MenuItems, c as MenuItem } from './bundle-CvUmadeB.js';
+import { C as ContextMenu, b as MenuItems, c as MenuItem } from './bundle-NViriWgP.js';
 import { useSendbirdStateContext } from '../useSendbirdStateContext.js';
-import { u as useLocalization } from './bundle-Gdpa0T6A.js';
+import { u as useLocalization } from './bundle-D1rGeQXE.js';
 
 var OpenChannelMessageStatusTypes = {
     NONE: 'none',
@@ -95,4 +95,4 @@ var OpenChannelMobileMenu = function (props) {
 };
 
 export { OpenChannelMobileMenu as O, isFineEdit as a, isFineResend as b, isFineDelete as c, checkIsPending as d, checkIsFailed as e, checkIsSent as f, getSenderFromMessage as g, isFineCopy as i, showMenuTrigger as s };
-//# sourceMappingURL=bundle-C81G11SF.js.map
+//# sourceMappingURL=bundle-DEiziBkg.js.map

package/chunks/{bundle-C81G11SF.js.map → bundle-DEiziBkg.js.map}

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

package/chunks/{bundle-DqWCsUNF.js → bundle-DMmAHGyY.js}

@@ -1,6 +1,6 @@
-import { i as isSameDay } from './bundle-DwRARBZn.js';
-import { r as requiredArgs, t as toDate } from './bundle-p1hDqmzG.js';
-import { t as toInteger } from './bundle-DyhgSw2i.js';
+import { i as isSameDay } from './bundle-8qZom_qK.js';
+import { r as requiredArgs, t as toDate } from './bundle-S1RtVk3L.js';
+import { t as toInteger } from './bundle-BKan9iBA.js';
 
 /**
  * @name isToday
@@ -163,4 +163,4 @@ function isYesterday(dirtyDate) {
 }
 
 export { isYesterday as a, isThisYear as b, isToday as i };
-//# sourceMappingURL=bundle-DqWCsUNF.js.map
+//# sourceMappingURL=bundle-DMmAHGyY.js.map