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

package/chunks/{bundle-C46rfkM4.js → bundle-G3CaEd2_.js}

@@ -1,9 +1,9 @@
-import { c as __spreadArray } from './bundle-DqCapAeT.js';
+import { c as __spreadArray } from './bundle-DQSBOtg7.js';
 import React__default from 'react';
 import ImageRenderer from '../ui/ImageRenderer.js';
-import { p as pxToNumber } from './bundle-B3I9kUQg.js';
+import { p as pxToNumber } from './bundle-C7NP4Bof.js';
 import Icon, { IconTypes, IconColors } from '../ui/Icon.js';
-import { c as classnames } from './bundle-DqfiKk6y.js';
+import { c as classnames } from './bundle-DcYQjOKO.js';
 
 var AvatarDefault = function (props) {
     var width = props.width, height = props.height, text = props.text;
@@ -68,4 +68,4 @@ function Avatar(_a, ref) {
 var Avatar$1 = React__default.forwardRef(Avatar);
 
 export { Avatar$1 as A, AvatarDefault as a, AvatarInner as b };
-//# sourceMappingURL=bundle-C46rfkM4.js.map
+//# sourceMappingURL=bundle-G3CaEd2_.js.map

package/chunks/bundle-G3CaEd2_.js.map

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

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

@@ -1,7 +1,7 @@
-import { _ as __assign } from './bundle-DqCapAeT.js';
+import { _ as __assign } from './bundle-DQSBOtg7.js';
 import React__default from 'react';
-import { g as getStringSet } from './bundle-Qy7nPeaH.js';
-import { d as defaultLocale } from './bundle-BgR4m5uB.js';
+import { g as getStringSet } from './bundle--6jTPVzP.js';
+import { d as defaultLocale } from './bundle-y21E8nZg.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-CtzIZOAD.js.map
+//# sourceMappingURL=bundle-Gdpa0T6A.js.map

package/chunks/bundle-Gdpa0T6A.js.map

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

package/chunks/{bundle-BIbNT4mN.js → bundle-ICLjPeJ4.js}

@@ -1,6 +1,6 @@
-import { _ as __assign } from './bundle-DqCapAeT.js';
+import { _ as __assign } from './bundle-DQSBOtg7.js';
 import React__default from 'react';
-import { S as SuggestedMentionListView } from './bundle-e_1rcazt.js';
+import { S as SuggestedMentionListView } from './bundle-CLLLP9W3.js';
 import { useThreadContext } from '../Thread/context.js';
 
 var SuggestedMentionList = function (props) {
@@ -9,4 +9,4 @@ var SuggestedMentionList = function (props) {
 };
 
 export { SuggestedMentionList as S };
-//# sourceMappingURL=bundle-BIbNT4mN.js.map
+//# sourceMappingURL=bundle-ICLjPeJ4.js.map

package/chunks/bundle-ICLjPeJ4.js.map

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

package/chunks/bundle-Iq_AKwnp.js

@@ -0,0 +1,326 @@
+import { a as __awaiter, b as __generator, _ as __assign, c as __spreadArray } from './bundle-DQSBOtg7.js';
+import React__default, { useState, useContext, useEffect, useCallback } from 'react';
+import { L as LocalizationContext, u as useLocalization } from './bundle-Gdpa0T6A.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 { 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 { OperatorFilter } from '@sendbird/chat/groupChannel';
+import { n as noop } from './bundle-DcYQjOKO.js';
+import { a as MembersModal } from './bundle-J6jBE7z2.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 (renderUserListItem({
+                key: member.userId,
+                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 (renderUserListItem({
+                user: member,
+                key: member.userId,
+                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 (renderUserListItem({
+            key: operator.userId,
+            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,
+                key: member.userId,
+                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 (renderUserListItem({
+            key: member.userId,
+            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 (renderUserListItem({
+            key: member.userId,
+            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-Iq_AKwnp.js.map

package/chunks/bundle-Iq_AKwnp.js.map

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

package/chunks/bundle-J6jBE7z2.js

@@ -0,0 +1,261 @@
+import { a as __awaiter, b as __generator, _ as __assign, c as __spreadArray, d as __rest } from './bundle-DQSBOtg7.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 { useChannelSettingsContext } from '../ChannelSettings/context.js';
+import Button, { ButtonTypes, ButtonSizes } from '../ui/Button.js';
+import { U as UserListItemMenu } from './bundle-DBiK-ub4.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 { 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 channel = useChannelSettingsContext().channel;
+    var stringSet = useContext(LocalizationContext).stringSet;
+    useEffect(function () {
+        var memberListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
+            limit: 20,
+        });
+        memberListQuery === null || memberListQuery === void 0 ? void 0 : memberListQuery.next().then(function (members) {
+            setMembers(members);
+        });
+        setMemberQuery(memberListQuery !== null && memberListQuery !== void 0 ? memberListQuery : 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__MEMBERS__SEE_ALL_MEMBERS },
+            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 (memberQuery && memberQuery.hasNext) {
+                                memberQuery.next().then(function (o) {
+                                    setMembers(__spreadArray(__spreadArray([], members, true), o, true));
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); },
+                }) }, members.map(function (member) { return (renderUserListItem({
+                user: member,
+                key: member.userId,
+                channel: channel,
+                renderListItemMenu: function (props) { return (React__default.createElement(UserListItemMenu, __assign({}, props, { onToggleOperatorState: function (_a) {
+                        var isOperator = _a.newStatus;
+                        var newMembers = __spreadArray([], members, true);
+                        for (var _i = 0, newMembers_1 = newMembers; _i < newMembers_1.length; _i++) {
+                            var newMember = newMembers_1[_i];
+                            if (newMember.userId === member.userId) {
+                                newMember.role = isOperator ? Role.OPERATOR : Role.NONE;
+                                break;
+                            }
+                        }
+                        setMembers(newMembers);
+                    }, onToggleMuteState: function (_a) {
+                        var isMuted = _a.newStatus;
+                        var newMembers = __spreadArray([], members, true);
+                        for (var _i = 0, newMembers_2 = newMembers; _i < newMembers_2.length; _i++) {
+                            var newMember = newMembers_2[_i];
+                            if (newMember.userId === member.userId) {
+                                newMember.isMuted = isMuted;
+                                break;
+                            }
+                        }
+                        setMembers(newMembers);
+                    }, onToggleBanState: function () {
+                        setMembers(members.filter(function (_a) {
+                            var userId = _a.userId;
+                            return userId !== member.userId;
+                        }));
+                    } }))); },
+            })); })))));
+}
+
+function InviteUsersModal(_a) {
+    var _this = this;
+    var _b, _c, _d;
+    var onCancel = _a.onCancel, onSubmit = _a.onSubmit, _e = _a.renderUserListItem, renderUserListItem = _e === void 0 ? function (props) { return React__default.createElement(UserListItem, __assign({}, props)); } : _e;
+    var _f = useState([]), users = _f[0], setUsers = _f[1];
+    var _g = useState(null), userListQuery = _g[0], setUserListQuery = _g[1];
+    var _h = useState({}), selectedUsers = _h[0], setSelectedUsers = _h[1];
+    var state = useSendbirdStateContext();
+    var sdk = (_c = (_b = state === null || state === void 0 ? void 0 : state.stores) === null || _b === void 0 ? void 0 : _b.sdkStore) === null || _c === void 0 ? void 0 : _c.sdk;
+    var globalUserListQuery = (_d = state === null || state === void 0 ? void 0 : state.config) === null || _d === void 0 ? void 0 : _d.userListQuery;
+    var _j = useChannelSettingsContext(), channel = _j.channel, overrideInviteUser = _j.overrideInviteUser, queries = _j.queries;
+    var stringSet = useLocalization().stringSet;
+    var onScroll = useOnScrollPositionChangeDetector({
+        onReachedBottom: function () {
+            return __awaiter(this, void 0, void 0, function () {
+                var users_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            if (!(userListQuery === null || userListQuery === void 0 ? void 0 : userListQuery.hasNext)) return [3 /*break*/, 2];
+                            return [4 /*yield*/, userListQuery.next()];
+                        case 1:
+                            users_1 = _a.sent();
+                            setUsers(function (prev) { return __spreadArray(__spreadArray([], prev, true), users_1, true); });
+                            _a.label = 2;
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        },
+    });
+    var onInviteUsers = function () { return __awaiter(_this, void 0, void 0, function () {
+        var userIdsToInvite;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    userIdsToInvite = Object.keys(selectedUsers);
+                    if (!(channel && typeof overrideInviteUser === 'function')) return [3 /*break*/, 1];
+                    overrideInviteUser({ users: userIdsToInvite, onClose: onCancel, channel: channel });
+                    return [3 /*break*/, 3];
+                case 1: return [4 /*yield*/, (channel === null || channel === void 0 ? void 0 : channel.inviteWithUserIds(userIdsToInvite))];
+                case 2:
+                    _a.sent();
+                    onSubmit(userIdsToInvite);
+                    _a.label = 3;
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    var onSelectUser = function (user) {
+        setSelectedUsers(function (_a) {
+            var draft = __rest(_a, []);
+            if (draft[user.userId]) {
+                delete draft[user.userId];
+            }
+            else {
+                draft[user.userId] = user;
+            }
+            return draft;
+        });
+    };
+    var membersMap = useMemo(function () {
+        var _a;
+        var _b, _c;
+        // UIKit policy: In a super or broadcast channel, do not check the members when inviting users.
+        if ((channel === null || channel === void 0 ? void 0 : channel.isSuper) || (channel === null || channel === void 0 ? void 0 : channel.isBroadcast))
+            return _a = {}, _a[(_c = (_b = sdk.currentUser) === null || _b === void 0 ? void 0 : _b.userId) !== null && _c !== void 0 ? _c : ''] = sdk.currentUser, _a;
+        return channel === null || channel === void 0 ? void 0 : channel.members.reduce(function (acc, cur) {
+            acc[cur.userId] = cur;
+            return acc;
+        }, {});
+    }, [channel === null || channel === void 0 ? void 0 : channel.members.length]);
+    useEffect(function () {
+        var fetchUsersAndSetQuery = function () { return __awaiter(_this, void 0, void 0, function () {
+            var query, users_2;
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        query = (_a = globalUserListQuery === null || globalUserListQuery === void 0 ? void 0 : globalUserListQuery()) !== null && _a !== void 0 ? _a : sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery(queries === null || queries === void 0 ? void 0 : queries.applicationUserListQuery);
+                        if (!query) return [3 /*break*/, 2];
+                        return [4 /*yield*/, query.next()];
+                    case 1:
+                        users_2 = _b.sent();
+                        setUserListQuery(query);
+                        setUsers(users_2);
+                        _b.label = 2;
+                    case 2: return [2 /*return*/];
+                }
+            });
+        }); };
+        fetchUsersAndSetQuery();
+    }, [sdk]);
+    return (React__default.createElement("div", null,
+        React__default.createElement(Modal, { isFullScreenOnMobile: true, disabled: Object.keys(selectedUsers).length === 0, submitText: stringSet.BUTTON__INVITE, type: ButtonTypes.PRIMARY, onCancel: function () { return onCancel(); }, onSubmit: onInviteUsers, titleText: stringSet.CHANNEL_SETTING__MEMBERS__SELECT_TITLE },
+            React__default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: onScroll },
+                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,
+                        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 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 });
+        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("div", { className: "sendbird-channel-settings-member-list" },
+        members.map(function (member) { return (renderUserListItem({
+            key: member.userId,
+            user: member,
+            channel: channel,
+            size: 'small',
+            avatarSize: '24px',
+            renderListItemMenu: function (props) { return (React__default.createElement(UserListItemMenu, __assign({}, props, { onToggleOperatorState: function (_a) {
+                    var isOperator = _a.newStatus;
+                    var newMembers = __spreadArray([], members, true);
+                    for (var _i = 0, newMembers_1 = newMembers; _i < newMembers_1.length; _i++) {
+                        var newMember = newMembers_1[_i];
+                        if (newMember.userId === member.userId) {
+                            newMember.role = isOperator ? Role.OPERATOR : Role.NONE;
+                            break;
+                        }
+                    }
+                    setMembers(newMembers);
+                }, onToggleMuteState: function (_a) {
+                    var isMuted = _a.newStatus;
+                    var newMembers = __spreadArray([], members, true);
+                    for (var _i = 0, newMembers_2 = newMembers; _i < newMembers_2.length; _i++) {
+                        var newMember = newMembers_2[_i];
+                        if (newMember.userId === member.userId) {
+                            newMember.isMuted = isMuted;
+                            break;
+                        }
+                    }
+                    setMembers(newMembers);
+                }, onToggleBanState: function () {
+                    setMembers(members.filter(function (_a) {
+                        var userId = _a.userId;
+                        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)),
+        showAllMembers && (React__default.createElement(MembersModal, { onCancel: function () {
+                setShowAllMembers(false);
+                refreshList();
+                forceUpdateUI();
+            }, renderUserListItem: renderUserListItem })),
+        showInviteUsers && (React__default.createElement(InviteUsersModal, { onCancel: function () { return setShowInviteUsers(false); }, onSubmit: function () {
+                setShowInviteUsers(false);
+                refreshList();
+                forceUpdateUI();
+            }, renderUserListItem: renderUserListItem }))));
+};
+
+export { MemberList as M, MembersModal as a };
+//# sourceMappingURL=bundle-J6jBE7z2.js.map

package/chunks/bundle-J6jBE7z2.js.map

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