@sendbird/uikit-react 3.7.0-rc.1 → 3.8.0

package/cjs/chunks/bundle-TEIqVGqn.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var React = require('react');
+var consts = require('./bundle-L9ushBZQ.js');
+
+function useDebounce(callback, delay) {
+    var timeoutRef = React.useRef(null);
+    React.useEffect(function () {
+        // Cleanup the timeout on unmount
+        return function () {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    function debounceFunction() {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(function () {
+            callback.apply(void 0, args);
+        }, delay);
+    }
+    return debounceFunction;
+}
+
+var DELAY = 500;
+function calcScrollBottom(scrollHeight, scrollTop) {
+    return scrollHeight - scrollTop;
+}
+function useHandleOnScrollCallback(_a) {
+    var hasMore = _a.hasMore, hasNext = _a.hasNext, onScroll = _a.onScroll, scrollRef = _a.scrollRef, setShowScrollDownButton = _a.setShowScrollDownButton;
+    var scrollCb = React.useCallback(function () {
+        var element = scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current;
+        if (element == null) {
+            return;
+        }
+        var scrollTop = element.scrollTop, scrollHeight = element.scrollHeight, clientHeight = element.clientHeight;
+        // https://sendbird.atlassian.net/browse/SBISSUE-11759
+        // the edge case where channel is inside a page that already has scroll
+        // scrollintoView will move the whole page, which we dont want
+        var scrollBottom = calcScrollBottom(scrollHeight, scrollTop);
+        // even if there is more to fetch or not,
+        // we still have to show the scroll to bottom button
+        if (typeof setShowScrollDownButton === 'function') {
+            setShowScrollDownButton(scrollHeight > scrollTop + clientHeight + 1);
+        }
+        if (hasMore && scrollTop < consts.SCROLL_BUFFER) {
+            onScroll(function () {
+                // sets the scroll position to the bottom of the new messages
+                element.scrollTop = element.scrollHeight - scrollBottom;
+            });
+        }
+        if (hasNext) {
+            onScroll(function () {
+                // sets the scroll position to the top of the new messages
+                element.scrollTop = scrollTop - (scrollHeight - element.scrollHeight);
+            });
+        }
+    }, [
+        setShowScrollDownButton,
+        hasMore,
+        onScroll,
+        scrollRef,
+    ]);
+    return useDebounce(scrollCb, DELAY);
+}
+
+exports.useDebounce = useDebounce;
+exports.useHandleOnScrollCallback = useHandleOnScrollCallback;
+//# sourceMappingURL=bundle-TEIqVGqn.js.map

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

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

package/cjs/chunks/bundle-UooP2IDU.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var React = require('react');
+var reactDom = require('react-dom');
+var utils = require('./bundle-1yOirqug.js');
+var LocalizationContext = require('./bundle-QmSa90PC.js');
+var MediaQueryContext = require('./bundle-Y9TkHVI5.js');
+var ui_IconButton = require('../ui/IconButton.js');
+var ui_Button = require('../ui/Button.js');
+var ui_Icon = require('../ui/Icon.js');
+var ui_Label = require('./bundle-6ziaqiUd.js');
+
+// simple component to be used as modal root
+var MODAL_ROOT = 'sendbird-modal-root';
+var ModalRoot = function () { return (React.createElement("div", { id: MODAL_ROOT, className: MODAL_ROOT })); };
+
+var ModalHeader = function (_a) {
+    var titleText = _a.titleText;
+    return (React.createElement("div", { className: "sendbird-modal__header" },
+        React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.H_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, titleText)));
+};
+var ModalBody = function (_a) {
+    var children = _a.children;
+    return (React.createElement("div", { className: "sendbird-modal__body" },
+        React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.SUBTITLE_1, color: ui_Label.LabelColors.ONBACKGROUND_2 }, children)));
+};
+var ModalFooter = function (_a) {
+    var submitText = _a.submitText, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.hideCancelButton, hideCancelButton = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? ui_Button.ButtonTypes.DANGER : _d, onSubmit = _a.onSubmit, onCancel = _a.onCancel;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    return (React.createElement("div", { className: "sendbird-modal__footer" },
+        !hideCancelButton && (React.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, onClick: onCancel },
+            React.createElement(ui_Label.Label, { type: ui_Label.LabelTypography.BUTTON_1, color: ui_Label.LabelColors.ONBACKGROUND_1 }, stringSet.BUTTON__CANCEL))),
+        React.createElement(ui_Button.default, { type: type, disabled: disabled, onClick: onSubmit }, submitText)));
+};
+function Modal(props) {
+    var _a = props.children, children = _a === void 0 ? null : _a, _b = props.className, className = _b === void 0 ? '' : _b, _c = props.isCloseOnClickOutside, isCloseOnClickOutside = _c === void 0 ? false : _c, _d = props.isFullScreenOnMobile, isFullScreenOnMobile = _d === void 0 ? false : _d, titleText = props.titleText, submitText = props.submitText, _e = props.disabled, disabled = _e === void 0 ? false : _e, _f = props.hideFooter, hideFooter = _f === void 0 ? false : _f, _g = props.type, type = _g === void 0 ? ui_Button.ButtonTypes.DANGER : _g, 
+    /**
+     * Do not use this! We will deprecate onCancel in v4.
+     */
+    _h = props.onCancel, 
+    /**
+     * Do not use this! We will deprecate onCancel in v4.
+     */
+    onCancel = _h === void 0 ? utils.noop : _h, onClose = props.onClose, _j = props.onSubmit, onSubmit = _j === void 0 ? utils.noop : _j, renderHeader = props.renderHeader;
+    var handleClose = onClose !== null && onClose !== void 0 ? onClose : onCancel;
+    var isMobile = MediaQueryContext.useMediaQueryContext().isMobile;
+    return reactDom.createPortal((React.createElement("div", { className: "\n      sendbird-modal ".concat(className, "\n      ").concat((isFullScreenOnMobile && isMobile) ? 'sendbird-modal--full-mobile' : '', "\n    ") },
+        React.createElement("div", { className: "sendbird-modal__content" },
+            (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || (React.createElement(ModalHeader, { titleText: titleText !== null && titleText !== void 0 ? titleText : '' })),
+            React.createElement(ModalBody, null, children),
+            !hideFooter && (React.createElement(ModalFooter, { disabled: disabled, onCancel: handleClose, onSubmit: onSubmit, submitText: submitText !== null && submitText !== void 0 ? submitText : '', type: type })),
+            React.createElement("div", { className: "sendbird-modal__close" },
+                React.createElement(ui_IconButton, { width: "32px", height: "32px", onClick: handleClose },
+                    React.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.CLOSE, fillColor: ui_Icon.IconColors.DEFAULT, width: "24px", height: "24px" })))),
+        React.createElement("div", { className: "\n          sendbird-modal__backdrop\n          ".concat(isCloseOnClickOutside && 'sendbird-modal__backdrop--clickoutside', "\n        "), onClick: function (e) {
+                e === null || e === void 0 ? void 0 : e.stopPropagation();
+                if (isCloseOnClickOutside) {
+                    handleClose();
+                }
+            } }))), document.getElementById(MODAL_ROOT));
+}
+
+exports.MODAL_ROOT = MODAL_ROOT;
+exports.Modal = Modal;
+exports.ModalBody = ModalBody;
+exports.ModalFooter = ModalFooter;
+exports.ModalHeader = ModalHeader;
+exports.ModalRoot = ModalRoot;
+//# sourceMappingURL=bundle-UooP2IDU.js.map

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

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

package/cjs/chunks/bundle-Y9TkHVI5.js

@@ -0,0 +1,79 @@
+'use strict';
+
+var React = require('react');
+
+var DEFAULT_MOBILE = false;
+// const DEFAULT_MOBILE = '768px';
+var MOBILE_CLASSNAME = 'sendbird--mobile-mode';
+var MediaQueryContext = React.createContext({
+    breakpoint: DEFAULT_MOBILE,
+    isMobile: false,
+});
+var addClassNameToBody = function () {
+    try {
+        var body = document.querySelector('body');
+        body === null || body === void 0 ? void 0 : body.classList.add(MOBILE_CLASSNAME);
+    }
+    catch (_a) {
+        // noop
+    }
+};
+var removeClassNameFromBody = function () {
+    try {
+        var body = document.querySelector('body');
+        body === null || body === void 0 ? void 0 : body.classList.remove(MOBILE_CLASSNAME);
+    }
+    catch (_a) {
+        // noop
+    }
+};
+var MediaQueryProvider = function (props) {
+    var children = props.children, logger = props.logger;
+    var breakpoint = (props === null || props === void 0 ? void 0 : props.breakpoint) || false;
+    var _a = React.useState(false), isMobile = _a[0], setIsMobile = _a[1];
+    React.useEffect(function () {
+        var _a;
+        var updateSize = function () {
+            var _a, _b, _c, _d, _e;
+            if (typeof breakpoint === 'boolean') {
+                setIsMobile(breakpoint);
+                if (breakpoint) {
+                    (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'MediaQueryProvider: isMobile: true');
+                    addClassNameToBody();
+                }
+                else {
+                    (_b = logger === null || logger === void 0 ? void 0 : logger.info) === null || _b === void 0 ? void 0 : _b.call(logger, 'MediaQueryProvider: isMobile: false');
+                    removeClassNameFromBody();
+                }
+            }
+            else {
+                var mq = window.matchMedia("(max-width: ".concat(breakpoint, ")"));
+                (_c = logger === null || logger === void 0 ? void 0 : logger.info) === null || _c === void 0 ? void 0 : _c.call(logger, "MediaQueryProvider: Screensize updated to ".concat(breakpoint));
+                if (mq.matches) {
+                    setIsMobile(true);
+                    addClassNameToBody();
+                    (_d = logger === null || logger === void 0 ? void 0 : logger.info) === null || _d === void 0 ? void 0 : _d.call(logger, 'MediaQueryProvider: isMobile: true');
+                }
+                else {
+                    setIsMobile(false);
+                    removeClassNameFromBody();
+                    (_e = logger === null || logger === void 0 ? void 0 : logger.info) === null || _e === void 0 ? void 0 : _e.call(logger, 'MediaQueryProvider: isMobile: false');
+                }
+            }
+        };
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'MediaQueryProvider: addEventListener', { updateSize: updateSize });
+        return function () {
+            var _a;
+            window.removeEventListener('resize', updateSize);
+            (_a = logger === null || logger === void 0 ? void 0 : logger.info) === null || _a === void 0 ? void 0 : _a.call(logger, 'MediaQueryProvider: removeEventListener', { updateSize: updateSize });
+        };
+    }, [breakpoint]);
+    return (React.createElement(MediaQueryContext.Provider, { value: { breakpoint: breakpoint, isMobile: isMobile } }, children));
+};
+var useMediaQueryContext = function () { return React.useContext(MediaQueryContext); };
+
+exports.MediaQueryProvider = MediaQueryProvider;
+exports.useMediaQueryContext = useMediaQueryContext;
+//# sourceMappingURL=bundle-Y9TkHVI5.js.map

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

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

package/cjs/chunks/bundle-YNHu-c84.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var React = require('react');
+var utils = require('./bundle-1yOirqug.js');
+
+var Context = React.createContext({
+    opened: '',
+    setOpened: utils.noop,
+});
+var Consumer = Context.Consumer;
+var Provider = Context.Provider;
+
+exports.Consumer = Consumer;
+exports.Provider = Provider;
+//# sourceMappingURL=bundle-YNHu-c84.js.map

package/cjs/chunks/bundle-YNHu-c84.js.map

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

package/cjs/chunks/bundle-_fjTT1-g.js

@@ -0,0 +1,279 @@
+'use strict';
+
+var React = require('react');
+var ui_Button = require('../ui/Button.js');
+var ui_IconButton = require('../ui/IconButton.js');
+var ui_Icon = require('../ui/Icon.js');
+var ui_ContextMenu = require('../ui/ContextMenu.js');
+var ChannelSettings_components_UserListItem = require('../ChannelSettings/components/UserListItem.js');
+var _tslib = require('./bundle-hK4x7nmG.js');
+var ui_Modal = require('./bundle-UooP2IDU.js');
+var ui_UserListItem = require('../ui/UserListItem.js');
+var utils = require('./bundle-1yOirqug.js');
+var ChannelSettings_context = require('../ChannelSettings/context.js');
+var useSendbirdStateContext = require('../useSendbirdStateContext.js');
+var LocalizationContext = require('./bundle-QmSa90PC.js');
+require('./bundle-6ziaqiUd.js');
+var uuid = require('./bundle-gMxOq93o.js');
+
+function MembersModal(_a) {
+    var _b;
+    var onCancel = _a.onCancel;
+    var _c = React.useState([]), members = _c[0], setMembers = _c[1];
+    var _d = React.useState(null), memberQuery = _d[0], setMemberQuery = _d[1];
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    var state = useSendbirdStateContext.useSendbirdStateContext();
+    var currentUser = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.userId;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    React.useEffect(function () {
+        var memberListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
+            limit: 20,
+        });
+        memberListQuery.next().then(function (members) {
+            setMembers(members);
+        });
+        setMemberQuery(memberListQuery);
+    }, []);
+    return (React.createElement("div", null,
+        React.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, hideFooter: true, onCancel: function () { return onCancel(); }, onSubmit: utils.noop, titleText: stringSet.CHANNEL_SETTING__MEMBERS__SEE_ALL_MEMBERS },
+            React.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: function (e) {
+                    var hasNext = memberQuery.hasNext;
+                    var target = e.target;
+                    var fetchMore = (target.clientHeight + target.scrollTop === target.scrollHeight);
+                    if (hasNext && fetchMore) {
+                        memberQuery.next().then(function (o) {
+                            setMembers(_tslib.__spreadArray(_tslib.__spreadArray([], members, true), o, true));
+                        });
+                    }
+                } }, members.map(function (member) { return (React.createElement(ui_UserListItem, { user: member, key: member.userId, currentUser: currentUser, action: function (_a) {
+                    var parentRef = _a.parentRef, actionRef = _a.actionRef;
+                    return (React.createElement(React.Fragment, null, (channel === null || channel === void 0 ? void 0 : channel.myRole) === 'operator' && (React.createElement(ui_ContextMenu.default, { menuTrigger: function (toggleDropdown) { return (React.createElement(ui_IconButton, { className: "sendbird-user-message__more__menu", width: "32px", height: "32px", onClick: function () {
+                                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.MenuItem, { disable: currentUser === member.userId, onClick: function () {
+                                    if ((member.role !== 'operator')) {
+                                        channel === null || channel === void 0 ? void 0 : channel.addOperators([member.userId]).then(function () {
+                                            setMembers(members.map(function (m) {
+                                                if (m.userId === member.userId) {
+                                                    return _tslib.__assign(_tslib.__assign({}, member), { role: 'operator' });
+                                                }
+                                                return m;
+                                            }));
+                                            closeDropdown();
+                                        });
+                                    }
+                                    else {
+                                        channel === null || channel === void 0 ? void 0 : channel.removeOperators([member.userId]).then(function () {
+                                            setMembers(members.map(function (m) {
+                                                if (m.userId === member.userId) {
+                                                    return _tslib.__assign(_tslib.__assign({}, member), { role: '' });
+                                                }
+                                                return m;
+                                            }));
+                                            closeDropdown();
+                                        });
+                                    }
+                                }, dataSbId: "channel_setting_member_context_menu_".concat((member.role !== 'operator') ? 'register_as_operator' : 'unregister_operator') }, member.role !== 'operator'
+                                ? stringSet.CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR
+                                : stringSet.CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR),
+                            // No muted members in broadcast channel
+                            !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast) && (React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                    if (member.isMuted) {
+                                        channel === null || channel === void 0 ? void 0 : channel.unmuteUser(member).then(function () {
+                                            setMembers(members.map(function (m) {
+                                                if (m.userId === member.userId) {
+                                                    return _tslib.__assign(_tslib.__assign({}, member), { isMuted: false });
+                                                }
+                                                return m;
+                                            }));
+                                            closeDropdown();
+                                        });
+                                    }
+                                    else {
+                                        channel === null || channel === void 0 ? void 0 : channel.muteUser(member).then(function () {
+                                            setMembers(members.map(function (m) {
+                                                if (m.userId === member.userId) {
+                                                    return _tslib.__assign(_tslib.__assign({}, member), { isMuted: true });
+                                                }
+                                                return m;
+                                            }));
+                                            closeDropdown();
+                                        });
+                                    }
+                                }, dataSbId: "channel_setting_member_context_menu_".concat((member.isMuted) ? 'unmute' : 'mute') }, member.isMuted
+                                ? stringSet.CHANNEL_SETTING__MODERATION__UNMUTE
+                                : stringSet.CHANNEL_SETTING__MODERATION__MUTE)),
+                            React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                    channel === null || channel === void 0 ? void 0 : channel.banUser(member, -1, '').then(function () {
+                                        setMembers(members.filter(function (_a) {
+                                            var userId = _a.userId;
+                                            return userId !== member.userId;
+                                        }));
+                                    });
+                                }, dataSbId: "channel_setting_member_context_menu_ban" }, stringSet.CHANNEL_SETTING__MODERATION__BAN))); } }))));
+                } })); })))));
+}
+
+var isAboutSame = function (a, b, px) { return (Math.abs(a - b) <= px); };
+function InviteUsers(_a) {
+    var _b, _c, _d;
+    var onCancel = _a.onCancel, onSubmit = _a.onSubmit;
+    var _e = React.useState([]), members = _e[0], setMembers = _e[1];
+    var _f = React.useState({}), selectedMembers = _f[0], setSelectedMembers = _f[1];
+    var _g = React.useState(null), userQuery = _g[0], setUserQuery = _g[1];
+    var state = useSendbirdStateContext.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 _h = ChannelSettings_context.useChannelSettingsContext(), channel = _h.channel, overrideInviteUser = _h.overrideInviteUser, queries = _h.queries;
+    var userFilledQuery = _tslib.__assign({}, queries === null || queries === void 0 ? void 0 : queries.applicationUserListQuery);
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    React.useEffect(function () {
+        var userListQuery = globalUserListQuery
+            ? globalUserListQuery()
+            : sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery(userFilledQuery);
+        if (userListQuery === null || userListQuery === void 0 ? void 0 : userListQuery.next) {
+            userListQuery.next().then(function (members) {
+                setMembers(members);
+            });
+            setUserQuery(userListQuery);
+        }
+    }, [sdk]);
+    return (React.createElement("div", null,
+        React.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, disabled: Object.keys(selectedMembers).length === 0, submitText: stringSet.BUTTON__INVITE, type: ui_Button.ButtonTypes.PRIMARY, onCancel: function () { return onCancel(); }, onSubmit: function () {
+                var members = Object.keys(selectedMembers).filter(function (m) { return selectedMembers[m]; });
+                if (typeof overrideInviteUser === 'function') {
+                    overrideInviteUser({
+                        users: members,
+                        onClose: onCancel,
+                        channel: channel,
+                    });
+                    return;
+                }
+                channel === null || channel === void 0 ? void 0 : channel.inviteWithUserIds(members).then(function () {
+                    onSubmit(members);
+                });
+            }, titleText: stringSet.CHANNEL_SETTING__MEMBERS__SELECT_TITLE },
+            React.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: function (e) {
+                    var hasNext = userQuery.hasNext;
+                    var target = e.target;
+                    var fetchMore = isAboutSame(target.clientHeight + target.scrollTop, target.scrollHeight, 20);
+                    if (hasNext && fetchMore) {
+                        userQuery.next().then(function (users) {
+                            setMembers(_tslib.__spreadArray(_tslib.__spreadArray([], members, true), users, true));
+                        });
+                    }
+                } },
+                React.createElement("div", { className: "sendbird-more-members__popup-scroll__inner" }, members.map(function (member) {
+                    var _a;
+                    var isJoinedMember = (_a = channel === null || channel === void 0 ? void 0 : channel.members) === null || _a === void 0 ? void 0 : _a.some(function (_a) {
+                        var userId = _a.userId;
+                        return userId === (member === null || member === void 0 ? void 0 : member.userId);
+                    });
+                    return (React.createElement(ui_UserListItem, { checkBox: true, checked: isJoinedMember || selectedMembers[member.userId], disabled: isJoinedMember, onChange: function (event) {
+                            var _a;
+                            var modifiedSelectedMembers = _tslib.__assign(_tslib.__assign({}, selectedMembers), (_a = {}, _a[event.target.id] = event.target.checked, _a));
+                            if (!event.target.checked) {
+                                delete modifiedSelectedMembers[event.target.id];
+                            }
+                            setSelectedMembers(modifiedSelectedMembers);
+                        }, user: member, key: member.userId }));
+                }))))));
+}
+
+var MemberList = function () {
+    var _a, _b, _c;
+    var _d = React.useState([]), members = _d[0], setMembers = _d[1];
+    var _e = React.useState(false), hasNext = _e[0], setHasNext = _e[1];
+    var _f = React.useState(false), showAllMembers = _f[0], setShowAllMembers = _f[1];
+    var _g = React.useState(false), showInviteUsers = _g[0], setShowInviteUsers = _g[1];
+    var state = useSendbirdStateContext.useSendbirdStateContext();
+    var _h = ChannelSettings_context.useChannelSettingsContext(), channel = _h.channel, setChannelUpdateId = _h.setChannelUpdateId;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var sdk = (_b = (_a = state === null || state === void 0 ? void 0 : state.stores) === null || _a === void 0 ? void 0 : _a.sdkStore) === null || _b === void 0 ? void 0 : _b.sdk;
+    var userId = (_c = state === null || state === void 0 ? void 0 : state.config) === null || _c === void 0 ? void 0 : _c.userId;
+    React.useEffect(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]);
+    var refreshList = React.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);
+            setChannelUpdateId(uuid.uuidv4());
+        });
+    }, [channel]);
+    return (React.createElement("div", { className: "sendbird-channel-settings-member-list sendbird-accordion" },
+        members.map(function (member) { return (React.createElement(ChannelSettings_components_UserListItem, { key: member.userId, user: member, currentUser: sdk.currentUser.userId, action: ((channel === null || channel === void 0 ? void 0 : channel.myRole) === 'operator' && userId !== member.userId)
+                ? 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.MenuItem, { onClick: function () {
+                                    if ((member.role !== 'operator')) {
+                                        channel === null || channel === void 0 ? void 0 : channel.addOperators([member.userId]).then(function () {
+                                            refreshList();
+                                            closeDropdown();
+                                        });
+                                    }
+                                    else {
+                                        channel === null || channel === void 0 ? void 0 : channel.removeOperators([member.userId]).then(function () {
+                                            refreshList();
+                                            closeDropdown();
+                                        });
+                                    }
+                                }, dataSbId: "channel_setting_member_context_menu_".concat((member.role !== 'operator') ? 'register_as_operator' : 'unregister_operator') }, member.role !== 'operator'
+                                ? stringSet.CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR
+                                : stringSet.CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR),
+                            // No muted members in broadcast channel
+                            !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast) && (React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                    if (member.isMuted) {
+                                        channel === null || channel === void 0 ? void 0 : channel.unmuteUser(member).then(function () {
+                                            refreshList();
+                                            closeDropdown();
+                                        });
+                                    }
+                                    else {
+                                        channel === null || channel === void 0 ? void 0 : channel.muteUser(member).then(function () {
+                                            refreshList();
+                                            closeDropdown();
+                                        });
+                                    }
+                                }, dataSbId: "channel_setting_member_context_menu_".concat((member.isMuted) ? 'unmute' : 'mute') }, member.isMuted
+                                ? stringSet.CHANNEL_SETTING__MODERATION__UNMUTE
+                                : stringSet.CHANNEL_SETTING__MODERATION__MUTE)),
+                            React.createElement(ui_ContextMenu.MenuItem, { onClick: function () {
+                                    channel === null || channel === void 0 ? void 0 : channel.banUser(member, -1, '').then(function () {
+                                        refreshList();
+                                        closeDropdown();
+                                    });
+                                }, dataSbId: "channel_setting_member_context_menu_ban" }, stringSet.CHANNEL_SETTING__MODERATION__BAN))); } }));
+                }
+                : null })); }),
+        React.createElement("div", { className: "sendbird-channel-settings-accordion__footer" },
+            hasNext && (React.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () { return setShowAllMembers(true); } }, stringSet.CHANNEL_SETTING__MEMBERS__SEE_ALL_MEMBERS)),
+            React.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () { return setShowInviteUsers(true); } }, stringSet.CHANNEL_SETTING__MEMBERS__INVITE_MEMBER)),
+        showAllMembers && (React.createElement(MembersModal, { onCancel: function () {
+                setShowAllMembers(false);
+                refreshList();
+            } })),
+        showInviteUsers && (React.createElement(InviteUsers, { onSubmit: function () {
+                setShowInviteUsers(false);
+                refreshList();
+            }, onCancel: function () { return setShowInviteUsers(false); } }))));
+};
+
+exports.MemberList = MemberList;
+//# sourceMappingURL=bundle-_fjTT1-g.js.map

package/cjs/chunks/bundle-_fjTT1-g.js.map

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