@sendbird/uikit-react 3.14.3 → 3.14.5

package/cjs/chunks/{bundle-DBdGwyXE.js → bundle-DFsKxEv-.js}

@@ -1,208 +1,215 @@
 'use strict';
 
-var _tslib = require('./bundle-CY1bUkfG.js');
+var _tslib = require('./bundle-C-r9vRgc.js');
 var React = require('react');
 var ui_Button = require('../ui/Button.js');
 var ui_ContextMenu = require('../ui/ContextMenu.js');
 var ui_Icon = require('../ui/Icon.js');
 var ui_IconButton = require('../ui/IconButton.js');
-var ui_Label = require('./bundle-BuYf2Pa8.js');
-var LocalizationContext = require('./bundle-E9H8fQL4.js');
-var UserProfileContext = require('./bundle-C7_tieEZ.js');
+var ui_Label = require('./bundle-Deao1Upp.js');
+var LocalizationContext = require('./bundle-B7wJ4Hqk.js');
+var UserProfileContext = require('./bundle-D7v4i_Ae.js');
 require('../ui/AccordionGroup.js');
-var ui_Avatar = require('./bundle-oUs61pbv.js');
+var ui_Avatar = require('./bundle-C0ZNrrcl.js');
 require('react-dom');
-require('./bundle-BwEcnJDm.js');
+require('./bundle-CLNUkVC8.js');
+require('@sendbird/uikit-tools');
+require('../withSendbird.js');
+require('css-vars-ponyfill');
+require('./bundle-Cw7xe6J1.js');
+require('@sendbird/chat');
+require('@sendbird/chat/openChannel');
+require('@sendbird/chat/groupChannel');
+require('./bundle-BAqFIbKr.js');
+var ui_Modal = require('./bundle-DJ9gapN2.js');
 var ui_MutedAvatarOverlay = require('../ui/MutedAvatarOverlay.js');
 var ui_UserProfile = require('../ui/UserProfile.js');
 var OpenChannelSettings_context = require('../OpenChannelSettings/context.js');
-require('../withSendbird.js');
-var ui_Modal = require('./bundle-fG1bRzYE.js');
 var ui_UserListItem = require('../ui/UserListItem.js');
-var utils = require('./bundle-BDbnsPGF.js');
+var utils = require('./bundle-CLte647H.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
 
-function ParticipantsModal(_a) {
-    var _b, _c, _d;
-    var onCancel = _a.onCancel;
-    var state = useSendbirdStateContext.useSendbirdStateContext();
-    var channel = OpenChannelSettings_context.useOpenChannelSettingsContext().channel;
-    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-    var _e = React.useState([]), participants = _e[0], setParticipants = _e[1];
-    var _f = React.useState(null), participantListQuery = _f[0], setParticipantListQuery = _f[1];
-    var userId = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.userId;
-    var sdk = (_d = (_c = state === null || state === void 0 ? void 0 : state.stores) === null || _c === void 0 ? void 0 : _c.sdkStore) === null || _d === void 0 ? void 0 : _d.sdk;
-    var isOperatorView = channel === null || channel === void 0 ? void 0 : channel.isOperator(userId);
-    React.useEffect(function () {
-        if (!channel || !(channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery)) {
-            return;
-        }
-        var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({});
-        setParticipantListQuery(participantListQuery);
-        participantListQuery.next().then(function (participantList) {
-            setParticipants(participantList);
-        });
-    }, []);
-    return (React.createElement("div", null,
-        React.createElement(ui_Modal.Modal, { hideFooter: true, isFullScreenOnMobile: true, onCancel: function () { return onCancel(); }, onSubmit: utils.noop, titleText: stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE },
-            React.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: function (e) {
-                    var hasNext = participantListQuery.hasNext;
-                    var target = e.target;
-                    var fetchMore = (target.clientHeight + target.scrollTop === target.scrollHeight);
-                    if (hasNext && fetchMore) {
-                        participantListQuery.next().then(function (fetchedParticipants) {
-                            setParticipants(_tslib.__spreadArray(_tslib.__spreadArray([], participants, true), fetchedParticipants, true));
-                        });
-                    }
-                } }, participants.map(function (p) {
-                var _a;
-                var isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
-                return (React.createElement(ui_UserListItem, { user: p, key: p.userId, currentUser: (_a = sdk === null || sdk === void 0 ? void 0 : sdk.currentUser) === null || _a === void 0 ? void 0 : _a.userId, action: (userId !== p.userId && isOperatorView)
-                        ? function (_a) {
-                            var actionRef = _a.actionRef, parentRef = _a.parentRef;
-                            return (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_IconButton, { className: "sendbird-user-message__more__menu", width: "32px", height: "32px", onClick: toggleDropdown },
-                                    React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.CONTENT_INVERSE }))); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems, { parentContainRef: parentRef, parentRef: actionRef, closeDropdown: closeDropdown, openLeft: true },
-                                    React.createElement(ui_ContextMenu.OperatorMenuItem, { channel: channel, user: p, onChange: function () { return closeDropdown(); }, onError: function () {
-                                            // FIXME: handle error later
-                                            closeDropdown();
-                                        }, dataSbId: "open_channel_setting_participant_context_menu_".concat((isOperator) ? 'unregister_operator' : 'register_as_operator') }, isOperator
-                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR
-                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR),
-                                    React.createElement(ui_ContextMenu.MuteMenuItem, { channel: channel, user: p, onChange: function () { return closeDropdown(); }, onError: function () {
-                                            // FIXME: handle error later
-                                            closeDropdown();
-                                        }, dataSbId: "open_channel_setting_participant_context_menu_".concat(p.isMuted ? 'unmute' : 'mute') }, p.isMuted
-                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE
-                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE),
-                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
-                                            channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(function () {
-                                                closeDropdown();
-                                            });
-                                        }, dataSbId: "open_channel_setting_participant_context_menu_ban" }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN))); } }));
-                        }
-                        : null }));
-            })))));
+function ParticipantsModal(_a) {
+    var _b, _c, _d;
+    var onCancel = _a.onCancel;
+    var state = useSendbirdStateContext.useSendbirdStateContext();
+    var channel = OpenChannelSettings_context.useOpenChannelSettingsContext().channel;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var _e = React.useState([]), participants = _e[0], setParticipants = _e[1];
+    var _f = React.useState(null), participantListQuery = _f[0], setParticipantListQuery = _f[1];
+    var userId = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.userId;
+    var sdk = (_d = (_c = state === null || state === void 0 ? void 0 : state.stores) === null || _c === void 0 ? void 0 : _c.sdkStore) === null || _d === void 0 ? void 0 : _d.sdk;
+    var isOperatorView = channel === null || channel === void 0 ? void 0 : channel.isOperator(userId);
+    React.useEffect(function () {
+        if (!channel || !(channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery)) {
+            return;
+        }
+        var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({});
+        setParticipantListQuery(participantListQuery);
+        participantListQuery.next().then(function (participantList) {
+            setParticipants(participantList);
+        });
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement(ui_Modal.Modal, { hideFooter: true, isFullScreenOnMobile: true, onCancel: function () { return onCancel(); }, onSubmit: utils.noop, titleText: stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE },
+            React.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: function (e) {
+                    var hasNext = participantListQuery.hasNext;
+                    var target = e.target;
+                    var fetchMore = (target.clientHeight + target.scrollTop === target.scrollHeight);
+                    if (hasNext && fetchMore) {
+                        participantListQuery.next().then(function (fetchedParticipants) {
+                            setParticipants(_tslib.__spreadArray(_tslib.__spreadArray([], participants, true), fetchedParticipants, true));
+                        });
+                    }
+                } }, participants.map(function (p) {
+                var _a;
+                var isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
+                return (React.createElement(ui_UserListItem, { user: p, key: p.userId, currentUser: (_a = sdk === null || sdk === void 0 ? void 0 : sdk.currentUser) === null || _a === void 0 ? void 0 : _a.userId, action: (userId !== p.userId && isOperatorView)
+                        ? function (_a) {
+                            var actionRef = _a.actionRef, parentRef = _a.parentRef;
+                            return (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_IconButton, { className: "sendbird-user-message__more__menu", width: "32px", height: "32px", onClick: toggleDropdown },
+                                    React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.CONTENT_INVERSE }))); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems, { parentContainRef: parentRef, parentRef: actionRef, closeDropdown: closeDropdown, openLeft: true },
+                                    React.createElement(ui_ContextMenu.OperatorMenuItem, { channel: channel, user: p, onChange: function () { return closeDropdown(); }, onError: function () {
+                                            // FIXME: handle error later
+                                            closeDropdown();
+                                        }, dataSbId: "open_channel_setting_participant_context_menu_".concat((isOperator) ? 'unregister_operator' : 'register_as_operator') }, isOperator
+                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR
+                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR),
+                                    React.createElement(ui_ContextMenu.MuteMenuItem, { channel: channel, user: p, onChange: function () { return closeDropdown(); }, onError: function () {
+                                            // FIXME: handle error later
+                                            closeDropdown();
+                                        }, dataSbId: "open_channel_setting_participant_context_menu_".concat(p.isMuted ? 'unmute' : 'mute') }, p.isMuted
+                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE
+                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE),
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(function () {
+                                                closeDropdown();
+                                            });
+                                        }, dataSbId: "open_channel_setting_participant_context_menu_ban" }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN))); } }));
+                        }
+                        : null }));
+            })))));
 }
 
-var UserListItem = function (_a) {
-    var user = _a.user, currentUser = _a.currentUser, isOperator = _a.isOperator, action = _a.action;
-    var avatarRef = React.useRef(null);
-    var actionRef = React.useRef(null);
-    var _b = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _b.disableUserProfile, renderUserProfile = _b.renderUserProfile;
-    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-    return (React.createElement("div", { className: "sendbird-participants-accordion__member" },
-        React.createElement("div", { className: "sendbird-participants-accordion__member-avatar" },
-            React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(React.Fragment, null,
-                    React.createElement(ui_Avatar.Avatar, { className: "sendbird-participants-accordion__member-avatar__avatar", onClick: function () {
-                            if (!disableUserProfile) {
-                                toggleDropdown();
-                            }
-                        }, ref: avatarRef, src: user.profileUrl, width: 24, height: 24 }),
-                    (user === null || user === void 0 ? void 0 : user.isMuted) ? (React.createElement(ui_MutedAvatarOverlay, null)) : '')); }, menuItems: function (closeDropdown) { return (renderUserProfile
-                    ? renderUserProfile({
-                        user: user,
-                        currentUserId: currentUser,
-                        close: closeDropdown,
-                        avatarRef: avatarRef,
-                    })
-                    : (React.createElement(ui_ContextMenu.MenuItems, { openLeft: true, parentRef: avatarRef, 
-                        // for catching location(x, y) of MenuItems
-                        parentContainRef: avatarRef, 
-                        // for toggling more options(menus & reactions)
-                        closeDropdown: closeDropdown, style: { paddingTop: '0px', paddingBottom: '0px' } },
-                        React.createElement(ui_UserProfile, { disableMessaging: true, user: user, currentUserId: currentUser, onSuccess: closeDropdown })))); } })),
-        React.createElement(ui_Label.Label, { className: "sendbird-participants-accordion__member__title", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1 },
-            user.nickname || stringSet.NO_NAME,
-            (currentUser === user.userId) && (stringSet.OPEN_CHANNEL_SETTINGS__MEMBERS__YOU)),
-        !user.nickname && (React.createElement(ui_Label.Label, { className: "sendbird-participants-accordion__member__title user-id", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, user.userId)),
-        isOperator && (React.createElement(ui_Label.Label, { className: "sendbird-participants-accordion__member__title\n                ".concat((user === null || user === void 0 ? void 0 : user.userId) !== currentUser ? 'operator' : '', "\n                ").concat((user === null || user === void 0 ? void 0 : user.userId) === currentUser ? 'self-operator' : '', "\n              "), type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.OPEN_CHANNEL_SETTINGS__MEMBERS__OPERATOR)),
-        action && (React.createElement("div", { className: "sendbird-participants-accordion__member__action", ref: actionRef }, action({ actionRef: actionRef })))));
+var UserListItem = function (_a) {
+    var user = _a.user, currentUser = _a.currentUser, isOperator = _a.isOperator, action = _a.action;
+    var avatarRef = React.useRef(null);
+    var actionRef = React.useRef(null);
+    var _b = React.useContext(UserProfileContext.UserProfileContext), disableUserProfile = _b.disableUserProfile, renderUserProfile = _b.renderUserProfile;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement("div", { className: "sendbird-participants-accordion__member" },
+        React.createElement("div", { className: "sendbird-participants-accordion__member-avatar" },
+            React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(React.Fragment, null,
+                    React.createElement(ui_Avatar.Avatar, { className: "sendbird-participants-accordion__member-avatar__avatar", onClick: function () {
+                            if (!disableUserProfile) {
+                                toggleDropdown();
+                            }
+                        }, ref: avatarRef, src: user.profileUrl, width: 24, height: 24 }),
+                    (user === null || user === void 0 ? void 0 : user.isMuted) ? (React.createElement(ui_MutedAvatarOverlay, null)) : '')); }, menuItems: function (closeDropdown) { return (renderUserProfile
+                    ? renderUserProfile({
+                        user: user,
+                        currentUserId: currentUser,
+                        close: closeDropdown,
+                        avatarRef: avatarRef,
+                    })
+                    : (React.createElement(ui_ContextMenu.MenuItems, { openLeft: true, parentRef: avatarRef, 
+                        // for catching location(x, y) of MenuItems
+                        parentContainRef: avatarRef, 
+                        // for toggling more options(menus & reactions)
+                        closeDropdown: closeDropdown, style: { paddingTop: '0px', paddingBottom: '0px' } },
+                        React.createElement(ui_UserProfile, { disableMessaging: true, user: user, currentUserId: currentUser, onSuccess: closeDropdown })))); } })),
+        React.createElement(ui_Label.Label, { className: "sendbird-participants-accordion__member__title", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_1 },
+            user.nickname || stringSet.NO_NAME,
+            (currentUser === user.userId) && (stringSet.OPEN_CHANNEL_SETTINGS__MEMBERS__YOU)), // if there is now nickname, display userId
+        !user.nickname && (React.createElement(ui_Label.Label, { className: "sendbird-participants-accordion__member__title user-id", type: ui_Label.LabelTypography.CAPTION_3, color: ui_Label.LabelColors.ONBACKGROUND_2 }, user.userId)),
+        isOperator && (React.createElement(ui_Label.Label, { className: "sendbird-participants-accordion__member__title\n                ".concat((user === null || user === void 0 ? void 0 : user.userId) !== currentUser ? 'operator' : '', "\n                ").concat((user === null || user === void 0 ? void 0 : user.userId) === currentUser ? 'self-operator' : '', "\n              "), type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_2 }, stringSet.OPEN_CHANNEL_SETTINGS__MEMBERS__OPERATOR)),
+        action && (React.createElement("div", { className: "sendbird-participants-accordion__member__action", ref: actionRef }, action({ actionRef: actionRef })))));
 };
 
-function ParticipantList(_a) {
-    var _b;
-    var _c = _a.isOperatorView, isOperatorView = _c === void 0 ? false : _c;
-    var globalState = useSendbirdStateContext.useSendbirdStateContext();
-    var currentUserId = (_b = globalState === null || globalState === void 0 ? void 0 : globalState.config) === null || _b === void 0 ? void 0 : _b.userId;
-    var channel = OpenChannelSettings_context.useOpenChannelSettingsContext().channel;
-    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
-    var _d = React.useState(null), participants = _d[0], setParticipants = _d[1];
-    var _e = React.useState(null), participantListQuery = _e[0], setParticipantListQuery = _e[1];
-    var _f = React.useState(false), showParticipantsModal = _f[0], setShowParticipantsModal = _f[1];
-    React.useEffect(function () {
-        if (!channel || !(channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery)) {
-            return;
-        }
-        var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({ limit: 10 });
-        setParticipantListQuery(participantListQuery);
-        participantListQuery.next().then(function (participants) {
-            setParticipants(participants);
-        });
-    }, [channel]);
-    var refreshList = React.useCallback(function () {
-        if (!channel) {
-            setParticipants([]);
-            return;
-        }
-        var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({ limit: 10 });
-        participantListQuery.next().then(function (participants) {
-            setParticipants(participants);
-        });
-    }, [channel]);
-    return (React.createElement("div", { className: "sendbird-openchannel-settings__participant-list", onScroll: function (e) {
-            var hasNext = participantListQuery.hasNext;
-            var target = e.target;
-            var fetchMore = (target.clientHeight + target.scrollTop === target.scrollHeight);
-            if (hasNext && fetchMore) {
-                participantListQuery.next().then(function (fetchedParticipants) {
-                    setParticipants(_tslib.__spreadArray(_tslib.__spreadArray([], participants, true), fetchedParticipants, true));
-                });
-            }
-        } },
-        React.createElement("div", null, participants === null || participants === void 0 ? void 0 :
-            participants.map(function (p) {
-                var isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
-                return (React.createElement(UserListItem, { user: p, currentUser: currentUserId, key: p.userId, isOperator: isOperator, action: function (_a) {
-                        var actionRef = _a.actionRef;
-                        return ((isOperatorView && currentUserId !== (p === null || p === void 0 ? void 0 : p.userId))
-                            ? (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_IconButton, { className: "sendbird-openchannel-participant-list__menu", width: "32px", height: "32px", onClick: toggleDropdown },
-                                    React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.CONTENT_INVERSE }))); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems, { parentRef: actionRef, closeDropdown: closeDropdown, openLeft: true },
-                                    React.createElement(ui_ContextMenu.OperatorMenuItem, { channel: channel, user: p, onChange: function () {
-                                            closeDropdown();
-                                            refreshList();
-                                        }, onError: function () {
-                                            // FIXME: handle error later
-                                            closeDropdown();
-                                        }, dataSbId: "open_channel_setting_partitipant_conext_menu_".concat((isOperator) ? 'unregister_operator' : 'register_as_operator') }, isOperator
-                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR
-                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR),
-                                    React.createElement(ui_ContextMenu.MuteMenuItem, { channel: channel, user: p, onChange: function () {
-                                            closeDropdown();
-                                            refreshList();
-                                        }, onError: function () {
-                                            // FIXME: handle error later
-                                            closeDropdown();
-                                        }, dataSbId: "open_channel_setting_partitipant_conext_menu_".concat(p.isMuted ? 'unmute' : 'mute') }, p.isMuted
-                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE
-                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE),
-                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
-                                            channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(function () {
-                                                closeDropdown();
-                                                refreshList();
-                                            });
-                                        }, dataSbId: "open_channel_setting_partitipant_conext_menu_ban" }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN))); } }))
-                            : null);
-                    } }));
-            }),
-            (participants && participants.length === 0)
-                ? (React.createElement(ui_Label.Label, { className: "sendbird-channel-settings__empty-list", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_3 }, stringSet.OPEN_CHANNEL_SETTINGS__EMPTY_LIST)) : null,
-            React.createElement("div", { className: "sendbird-openchannel-participant-list__footer" }, (participantListQuery === null || participantListQuery === void 0 ? void 0 : participantListQuery.hasNext) && (React.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () { return setShowParticipantsModal(true); } }, stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE))),
-            showParticipantsModal && (React.createElement(ParticipantsModal, { onCancel: function () {
-                    setShowParticipantsModal(false);
-                    refreshList();
-                } })))));
+function ParticipantList(_a) {
+    var _b;
+    var _c = _a.isOperatorView, isOperatorView = _c === void 0 ? false : _c;
+    var globalState = useSendbirdStateContext.useSendbirdStateContext();
+    var currentUserId = (_b = globalState === null || globalState === void 0 ? void 0 : globalState.config) === null || _b === void 0 ? void 0 : _b.userId;
+    var channel = OpenChannelSettings_context.useOpenChannelSettingsContext().channel;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var _d = React.useState(null), participants = _d[0], setParticipants = _d[1];
+    var _e = React.useState(null), participantListQuery = _e[0], setParticipantListQuery = _e[1];
+    var _f = React.useState(false), showParticipantsModal = _f[0], setShowParticipantsModal = _f[1];
+    React.useEffect(function () {
+        if (!channel || !(channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery)) {
+            return;
+        }
+        var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({ limit: 10 });
+        setParticipantListQuery(participantListQuery);
+        participantListQuery.next().then(function (participants) {
+            setParticipants(participants);
+        });
+    }, [channel]);
+    var refreshList = React.useCallback(function () {
+        if (!channel) {
+            setParticipants([]);
+            return;
+        }
+        var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({ limit: 10 });
+        participantListQuery.next().then(function (participants) {
+            setParticipants(participants);
+        });
+    }, [channel]);
+    return (React.createElement("div", { className: "sendbird-openchannel-settings__participant-list", onScroll: function (e) {
+            var hasNext = participantListQuery.hasNext;
+            var target = e.target;
+            var fetchMore = (target.clientHeight + target.scrollTop === target.scrollHeight);
+            if (hasNext && fetchMore) {
+                participantListQuery.next().then(function (fetchedParticipants) {
+                    setParticipants(_tslib.__spreadArray(_tslib.__spreadArray([], participants, true), fetchedParticipants, true));
+                });
+            }
+        } },
+        React.createElement("div", null, participants === null || participants === void 0 ? void 0 :
+            participants.map(function (p) {
+                var isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
+                return (React.createElement(UserListItem, { user: p, currentUser: currentUserId, key: p.userId, isOperator: isOperator, action: function (_a) {
+                        var actionRef = _a.actionRef;
+                        return ((isOperatorView && currentUserId !== (p === null || p === void 0 ? void 0 : p.userId))
+                            ? (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_IconButton, { className: "sendbird-openchannel-participant-list__menu", width: "32px", height: "32px", onClick: toggleDropdown },
+                                    React.createElement(ui_Icon.default, { width: "24px", height: "24px", type: ui_Icon.IconTypes.MORE, fillColor: ui_Icon.IconColors.CONTENT_INVERSE }))); }, menuItems: function (closeDropdown) { return (React.createElement(ui_ContextMenu.MenuItems, { parentRef: actionRef, closeDropdown: closeDropdown, openLeft: true },
+                                    React.createElement(ui_ContextMenu.OperatorMenuItem, { channel: channel, user: p, onChange: function () {
+                                            closeDropdown();
+                                            refreshList();
+                                        }, onError: function () {
+                                            // FIXME: handle error later
+                                            closeDropdown();
+                                        }, dataSbId: "open_channel_setting_partitipant_conext_menu_".concat((isOperator) ? 'unregister_operator' : 'register_as_operator') }, isOperator
+                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR
+                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR),
+                                    React.createElement(ui_ContextMenu.MuteMenuItem, { channel: channel, user: p, onChange: function () {
+                                            closeDropdown();
+                                            refreshList();
+                                        }, onError: function () {
+                                            // FIXME: handle error later
+                                            closeDropdown();
+                                        }, dataSbId: "open_channel_setting_partitipant_conext_menu_".concat(p.isMuted ? 'unmute' : 'mute') }, p.isMuted
+                                        ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE
+                                        : stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE),
+                                    React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                            channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(function () {
+                                                closeDropdown();
+                                                refreshList();
+                                            });
+                                        }, dataSbId: "open_channel_setting_partitipant_conext_menu_ban" }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN))); } }))
+                            : null);
+                    } }));
+            }),
+            (participants && participants.length === 0)
+                ? (React.createElement(ui_Label.Label, { className: "sendbird-channel-settings__empty-list", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_3 }, stringSet.OPEN_CHANNEL_SETTINGS__EMPTY_LIST)) : null,
+            React.createElement("div", { className: "sendbird-openchannel-participant-list__footer" }, (participantListQuery === null || participantListQuery === void 0 ? void 0 : participantListQuery.hasNext) && (React.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () { return setShowParticipantsModal(true); } }, stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE))),
+            showParticipantsModal && (React.createElement(ParticipantsModal, { onCancel: function () {
+                    setShowParticipantsModal(false);
+                    refreshList();
+                } })))));
 }
 
 exports.ParticipantList = ParticipantList;
 exports.UserListItem = UserListItem;
-//# sourceMappingURL=bundle-DBdGwyXE.js.map
+//# sourceMappingURL=bundle-DFsKxEv-.js.map

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

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

package/cjs/chunks/{bundle-BRUrQgUE.js → bundle-DGJX80zy.js}

@@ -5,95 +5,95 @@ var ui_PlaybackTime = require('../ui/PlaybackTime.js');
 var ui_ProgressBar = require('../ui/ProgressBar.js');
 var ui_TextButton = require('../ui/TextButton.js');
 var ui_Icon = require('../ui/Icon.js');
-var ui_Label = require('./bundle-BuYf2Pa8.js');
-var LocalizationContext = require('./bundle-E9H8fQL4.js');
-var consts = require('./bundle-DnXNmdmw.js');
+var ui_Label = require('./bundle-Deao1Upp.js');
+var LocalizationContext = require('./bundle-B7wJ4Hqk.js');
+var consts = require('./bundle-Ca7xeBTO.js');
 
-/* eslint-disable no-redeclare */
-var VoiceMessageInputStatus = {
-    READY_TO_RECORD: 'READY_TO_RECORD',
-    RECORDING: 'RECORDING',
-    READY_TO_PLAY: 'READY_TO_PLAY',
-    PLAYING: 'PLAYING',
+/* eslint-disable no-redeclare */
+var VoiceMessageInputStatus = {
+    READY_TO_RECORD: 'READY_TO_RECORD',
+    RECORDING: 'RECORDING',
+    READY_TO_PLAY: 'READY_TO_PLAY',
+    PLAYING: 'PLAYING',
 };
 
-var ControlerIcon = function (_a) {
-    var inputState = _a.inputState;
-    switch (inputState) {
-        case VoiceMessageInputStatus.READY_TO_RECORD: {
-            return (React.createElement("div", { className: "sendbird-controler-icon record-icon" }));
-        }
-        case VoiceMessageInputStatus.RECORDING: {
-            return (React.createElement("div", { className: "sendbird-controler-icon stop-icon" }));
-        }
-        case VoiceMessageInputStatus.READY_TO_PLAY: {
-            return (React.createElement(ui_Icon.default, { className: "sendbird-controler-icon play-icon", width: "20px", height: "20px", type: ui_Icon.IconTypes.PLAY, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1 }));
-        }
-        case VoiceMessageInputStatus.PLAYING: {
-            return (React.createElement("div", { className: "sendbird-controler-icon pause-icon" },
-                React.createElement("div", { className: "sendbird-controler-icon pause-icon-inner" }),
-                React.createElement("div", { className: "sendbird-controler-icon pause-icon-inner" })));
-        }
-        default:
-            return null;
-    }
+var ControlerIcon = function (_a) {
+    var inputState = _a.inputState;
+    switch (inputState) {
+        case VoiceMessageInputStatus.READY_TO_RECORD: {
+            return (React.createElement("div", { className: "sendbird-controler-icon record-icon" }));
+        }
+        case VoiceMessageInputStatus.RECORDING: {
+            return (React.createElement("div", { className: "sendbird-controler-icon stop-icon" }));
+        }
+        case VoiceMessageInputStatus.READY_TO_PLAY: {
+            return (React.createElement(ui_Icon.default, { className: "sendbird-controler-icon play-icon", width: "20px", height: "20px", type: ui_Icon.IconTypes.PLAY, fillColor: ui_Icon.IconColors.ON_BACKGROUND_1 }));
+        }
+        case VoiceMessageInputStatus.PLAYING: {
+            return (React.createElement("div", { className: "sendbird-controler-icon pause-icon" },
+                React.createElement("div", { className: "sendbird-controler-icon pause-icon-inner" }),
+                React.createElement("div", { className: "sendbird-controler-icon pause-icon-inner" })));
+        }
+        default:
+            return null;
+    }
 };
 
-var VoiceMessageInput = function (_a) {
-    var _b = _a.minRecordTime, minRecordTime = _b === void 0 ? consts.VOICE_RECORDER_DEFAULT_MIN : _b, maximumValue = _a.maximumValue, _c = _a.currentValue, currentValue = _c === void 0 ? 0 : _c, currentType = _a.currentType, onCancelClick = _a.onCancelClick, onControlClick = _a.onControlClick, onSubmitClick = _a.onSubmitClick, renderCancelButton = _a.renderCancelButton, renderControlButton = _a.renderControlButton, renderSubmitButton = _a.renderSubmitButton;
-    var _d = React.useState(0), lastClickTime = _d[0], setLastClickTime = _d[1];
-    var isReadyToRecord = React.useMemo(function () { return currentType === VoiceMessageInputStatus.READY_TO_RECORD; }, [currentType]);
-    var isRecording = React.useMemo(function () { return currentType === VoiceMessageInputStatus.RECORDING; }, [currentType]);
-    var isSendButtonDisabled = React.useMemo(function () {
-        if (currentType === VoiceMessageInputStatus.READY_TO_RECORD
-            || currentType === VoiceMessageInputStatus.RECORDING) {
-            return minRecordTime > currentValue;
-        }
-        return false;
-    }, [currentType, minRecordTime, currentValue]);
-    var isPlayMode = React.useMemo(function () {
-        return (currentType === VoiceMessageInputStatus.READY_TO_PLAY
-            || currentType === VoiceMessageInputStatus.PLAYING);
-    }, [currentType]);
-    var stringSet = LocalizationContext.useLocalization().stringSet;
-    var handleOnCancelClick = function () {
-        var currentTime = Date.now();
-        if (currentTime - lastClickTime > consts.VOICE_RECORDER_CLICK_BUFFER_TIME) {
-            onCancelClick();
-            setLastClickTime(currentTime);
-        }
-    };
-    var handleOnControlClick = React.useCallback(function () {
-        var currentTime = Date.now();
-        if (currentTime - lastClickTime > consts.VOICE_RECORDER_CLICK_BUFFER_TIME) {
-            onControlClick(currentType);
-            setLastClickTime(currentTime);
-        }
-    }, [currentType]);
-    var handleOnSubmitClick = function () {
-        var currentTime = Date.now();
-        if (currentTime - lastClickTime > consts.VOICE_RECORDER_CLICK_BUFFER_TIME) {
-            if (!isSendButtonDisabled) {
-                onSubmitClick();
-            }
-            setLastClickTime(currentTime);
-        }
-    };
-    return (React.createElement("div", { className: "sendbird-voice-message-input" },
-        React.createElement("div", { className: "sendbird-voice-message-input__indicator" },
-            React.createElement("div", { className: "sendbird-voice-message-input__indicator__progress-bar" },
-                React.createElement(ui_ProgressBar.ProgressBar, { className: "sendbird-voice-message-input__indicator__progress-bar__bar", disabled: isReadyToRecord, maxSize: maximumValue, currentSize: currentValue })),
-            (isRecording) ? (React.createElement("div", { className: "sendbird-voice-message-input__indicator__on-rec" })) : null,
-            React.createElement(ui_PlaybackTime.PlaybackTime, { className: "sendbird-voice-message-input__indicator__playback-time", time: isPlayMode ? maximumValue - currentValue : currentValue, labelColor: isReadyToRecord ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONCONTENT_1 })),
-        React.createElement("div", { className: "sendbird-voice-message-input__controler" },
-            (renderCancelButton === null || renderCancelButton === void 0 ? void 0 : renderCancelButton()) || (React.createElement(ui_TextButton, { className: "sendbird-voice-message-input__controler__cancel", onClick: handleOnCancelClick, disableUnderline: true },
-                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_1, color: ui_Label.LabelColors.PRIMARY }, stringSet.BUTTON__CANCEL))),
-            (renderControlButton === null || renderControlButton === void 0 ? void 0 : renderControlButton(currentType)) || (React.createElement("div", { className: "sendbird-voice-message-input__controler__main", onClick: handleOnControlClick },
-                React.createElement(ControlerIcon, { inputState: currentType }))),
-            (renderSubmitButton === null || renderSubmitButton === void 0 ? void 0 : renderSubmitButton()) || (React.createElement("div", { className: "sendbird-voice-message-input__controler__submit ".concat(isSendButtonDisabled ? 'voice-message--disabled' : ''), onClick: handleOnSubmitClick },
-                React.createElement(ui_Icon.default, { width: "19px", height: "19px", type: ui_Icon.IconTypes.SEND, fillColor: isSendButtonDisabled ? ui_Icon.IconColors.ON_BACKGROUND_4 : ui_Icon.IconColors.CONTENT }))))));
+var VoiceMessageInput = function (_a) {
+    var _b = _a.minRecordTime, minRecordTime = _b === void 0 ? consts.VOICE_RECORDER_DEFAULT_MIN : _b, maximumValue = _a.maximumValue, _c = _a.currentValue, currentValue = _c === void 0 ? 0 : _c, currentType = _a.currentType, onCancelClick = _a.onCancelClick, onControlClick = _a.onControlClick, onSubmitClick = _a.onSubmitClick, renderCancelButton = _a.renderCancelButton, renderControlButton = _a.renderControlButton, renderSubmitButton = _a.renderSubmitButton;
+    var _d = React.useState(0), lastClickTime = _d[0], setLastClickTime = _d[1];
+    var isReadyToRecord = React.useMemo(function () { return currentType === VoiceMessageInputStatus.READY_TO_RECORD; }, [currentType]);
+    var isRecording = React.useMemo(function () { return currentType === VoiceMessageInputStatus.RECORDING; }, [currentType]);
+    var isSendButtonDisabled = React.useMemo(function () {
+        if (currentType === VoiceMessageInputStatus.READY_TO_RECORD
+            || currentType === VoiceMessageInputStatus.RECORDING) {
+            return minRecordTime > currentValue;
+        }
+        return false;
+    }, [currentType, minRecordTime, currentValue]);
+    var isPlayMode = React.useMemo(function () {
+        return (currentType === VoiceMessageInputStatus.READY_TO_PLAY
+            || currentType === VoiceMessageInputStatus.PLAYING);
+    }, [currentType]);
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var handleOnCancelClick = function () {
+        var currentTime = Date.now();
+        if (currentTime - lastClickTime > consts.VOICE_RECORDER_CLICK_BUFFER_TIME) {
+            onCancelClick();
+            setLastClickTime(currentTime);
+        }
+    };
+    var handleOnControlClick = React.useCallback(function () {
+        var currentTime = Date.now();
+        if (currentTime - lastClickTime > consts.VOICE_RECORDER_CLICK_BUFFER_TIME) {
+            onControlClick(currentType);
+            setLastClickTime(currentTime);
+        }
+    }, [currentType]);
+    var handleOnSubmitClick = function () {
+        var currentTime = Date.now();
+        if (currentTime - lastClickTime > consts.VOICE_RECORDER_CLICK_BUFFER_TIME) {
+            if (!isSendButtonDisabled) {
+                onSubmitClick();
+            }
+            setLastClickTime(currentTime);
+        }
+    };
+    return (React.createElement("div", { className: "sendbird-voice-message-input" },
+        React.createElement("div", { className: "sendbird-voice-message-input__indicator" },
+            React.createElement("div", { className: "sendbird-voice-message-input__indicator__progress-bar" },
+                React.createElement(ui_ProgressBar.ProgressBar, { className: "sendbird-voice-message-input__indicator__progress-bar__bar", disabled: isReadyToRecord, maxSize: maximumValue, currentSize: currentValue })),
+            (isRecording) ? (React.createElement("div", { className: "sendbird-voice-message-input__indicator__on-rec" })) : null,
+            React.createElement(ui_PlaybackTime.PlaybackTime, { className: "sendbird-voice-message-input__indicator__playback-time", time: isPlayMode ? maximumValue - currentValue : currentValue, labelColor: isReadyToRecord ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONCONTENT_1 })),
+        React.createElement("div", { className: "sendbird-voice-message-input__controler" },
+            (renderCancelButton === null || renderCancelButton === void 0 ? void 0 : renderCancelButton()) || (React.createElement(ui_TextButton, { className: "sendbird-voice-message-input__controler__cancel", onClick: handleOnCancelClick, disableUnderline: true },
+                React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_1, color: ui_Label.LabelColors.PRIMARY }, stringSet.BUTTON__CANCEL))),
+            (renderControlButton === null || renderControlButton === void 0 ? void 0 : renderControlButton(currentType)) || (React.createElement("div", { className: "sendbird-voice-message-input__controler__main", onClick: handleOnControlClick },
+                React.createElement(ControlerIcon, { inputState: currentType }))),
+            (renderSubmitButton === null || renderSubmitButton === void 0 ? void 0 : renderSubmitButton()) || (React.createElement("div", { className: "sendbird-voice-message-input__controler__submit ".concat(isSendButtonDisabled ? 'voice-message--disabled' : ''), onClick: handleOnSubmitClick },
+                React.createElement(ui_Icon.default, { width: "19px", height: "19px", type: ui_Icon.IconTypes.SEND, fillColor: isSendButtonDisabled ? ui_Icon.IconColors.ON_BACKGROUND_4 : ui_Icon.IconColors.CONTENT }))))));
 };
 
 exports.VoiceMessageInput = VoiceMessageInput;
 exports.VoiceMessageInputStatus = VoiceMessageInputStatus;
-//# sourceMappingURL=bundle-BRUrQgUE.js.map
+//# sourceMappingURL=bundle-DGJX80zy.js.map

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

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