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

package/cjs/chunks/bundle-Bbr0JyeR.js

@@ -0,0 +1,368 @@
+'use strict';
+
+var _tslib = require('./bundle-DmCOU0rJ.js');
+var React = require('react');
+var LocalizationContext = require('./bundle-CiMvvzt_.js');
+var ChannelSettings_context = require('../ChannelSettings/context.js');
+var ui_Button = require('../ui/Button.js');
+var UserListItemMenu = require('./bundle-m4DYiLZS.js');
+var ui_UserListItem = require('../ui/UserListItem.js');
+var ui_Modal = require('./bundle-B2dRfy75.js');
+var index = require('./bundle-C4Yh1cgX.js');
+var ui_Label = require('./bundle-Cmim7RkF.js');
+var groupChannel = require('@sendbird/chat/groupChannel');
+var utils = require('./bundle-CfMyWzdL.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+function OperatorsModal(_a) {
+    var _this = this;
+    var onCancel = _a.onCancel, _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.operatorListQueryParams, operatorListQueryParams = _c === void 0 ? {} : _c;
+    var _d = React.useState([]), operators = _d[0], setOperators = _d[1];
+    var _e = React.useState(null), operatorQuery = _e[0], setOperatorQuery = _e[1];
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    React.useEffect(function () {
+        var operatorListQuery = channel === null || channel === void 0 ? void 0 : channel.createOperatorListQuery(_tslib.__assign({ limit: 20 }, operatorListQueryParams));
+        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.default.createElement("div", null,
+        React__default.default.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, hideFooter: true, titleText: stringSet.CHANNEL_SETTING__OPERATORS__TITLE_ALL, onCancel: onCancel },
+            React__default.default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: index.useOnScrollPositionChangeDetector({
+                    onReachedBottom: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                        return _tslib.__generator(this, function (_a) {
+                            if (operatorQuery && operatorQuery.hasNext) {
+                                operatorQuery.next().then(function (o) {
+                                    setOperators(_tslib.__spreadArray(_tslib.__spreadArray([], operators, true), o, true));
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); },
+                }) }, operators.map(function (member) { return (React__default.default.createElement(React__default.default.Fragment, { key: member.userId }, renderUserListItem({
+                user: member,
+                channel: channel,
+                renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__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.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.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b;
+    var _c = React.useState([]), members = _c[0], setMembers = _c[1];
+    var _d = React.useState({}), selectedMembers = _d[0], setSelectedMembers = _d[1];
+    var _e = React.useState(null), memberQuery = _e[0], setMemberQuery = _e[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    React.useEffect(function () {
+        var memberListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
+            operatorFilter: groupChannel.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.default.createElement("div", null,
+        React__default.default.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, type: ui_Button.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.default.createElement(ui_Label.Label, { color: (selectedCount > 0) ? ui_Label.LabelColors.PRIMARY : ui_Label.LabelColors.ONBACKGROUND_3, type: ui_Label.LabelTypography.CAPTION_1 }, "".concat(selectedCount, " ").concat(stringSet.MODAL__INVITE_MEMBER__SELECTED)),
+            React__default.default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: index.useOnScrollPositionChangeDetector({
+                    onReachedBottom: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                        var hasNext;
+                        return _tslib.__generator(this, function (_a) {
+                            hasNext = memberQuery.hasNext;
+                            if (hasNext) {
+                                memberQuery.next().then(function (o) {
+                                    setMembers(_tslib.__spreadArray(_tslib.__spreadArray([], members, true), o, true));
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); },
+                }) }, members.map(function (member) { return (React__default.default.createElement(React__default.default.Fragment, { key: member.userId }, renderUserListItem({
+                user: member,
+                checkBox: true,
+                checked: selectedMembers[member.userId],
+                disabled: (member === null || member === void 0 ? void 0 : member.role) === 'operator',
+                onChange: function (event) {
+                    var _a;
+                    var modifiedSelectedMembers = _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);
+                },
+            }))); })))));
+}
+
+var OperatorList = function (_a) {
+    var _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.operatorListQueryParams, operatorListQueryParams = _c === void 0 ? {} : _c;
+    var _d = React.useState([]), operators = _d[0], setOperators = _d[1];
+    var _e = React.useState(false), showMore = _e[0], setShowMore = _e[1];
+    var _f = React.useState(false), showAdd = _f[0], setShowAdd = _f[1];
+    var _g = React.useState(false), hasNext = _g[0], setHasNext = _g[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    var refreshList = React.useCallback(function () {
+        if (!channel) {
+            setOperators([]);
+            return;
+        }
+        var operatorListQuery = channel === null || channel === void 0 ? void 0 : channel.createOperatorListQuery(_tslib.__assign({ limit: 10 }, operatorListQueryParams));
+        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]);
+    React.useEffect(refreshList, [channel === null || channel === void 0 ? void 0 : channel.url]);
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        operators.map(function (operator) { return (React__default.default.createElement(React__default.default.Fragment, { key: operator.userId }, renderUserListItem({
+            user: operator,
+            channel: channel,
+            size: 'small',
+            avatarSize: '24px',
+            renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__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.default.createElement(items.OperatorToggleMenuItem, null));
+                } }))); },
+        }))); }),
+        React__default.default.createElement("div", { className: "sendbird-channel-settings-accordion__footer" },
+            React__default.default.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () {
+                    setShowAdd(true);
+                } }, stringSet.CHANNEL_SETTING__OPERATORS__TITLE_ADD),
+            hasNext && (React__default.default.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () {
+                    setShowMore(true);
+                } }, stringSet.CHANNEL_SETTING__OPERATORS__TITLE_ALL))),
+        showMore && (React__default.default.createElement(OperatorsModal, { onCancel: function () {
+                setShowMore(false);
+                refreshList();
+            }, renderUserListItem: renderUserListItem, operatorListQueryParams: operatorListQueryParams })),
+        showAdd && (React__default.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.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.bannedUserListQueryParams, bannedUserListQueryParams = _c === void 0 ? {} : _c;
+    var _d = React.useState([]), members = _d[0], setMembers = _d[1];
+    var _e = React.useState(null), memberQuery = _e[0], setMemberQuery = _e[1];
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    React.useEffect(function () {
+        var bannedUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createBannedUserListQuery(_tslib.__assign({ limit: 20 }, bannedUserListQueryParams));
+        if (bannedUserListQuery) {
+            bannedUserListQuery.next().then(function (users) {
+                setMembers(users);
+            });
+            setMemberQuery(bannedUserListQuery);
+        }
+    }, []);
+    return (React__default.default.createElement("div", null,
+        React__default.default.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, hideFooter: true, onCancel: function () { return onCancel(); }, onSubmit: utils.noop, titleText: stringSet.CHANNEL_SETTING__BANNED_MEMBERS__TITLE },
+            React__default.default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: index.useOnScrollPositionChangeDetector({
+                    onReachedBottom: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                        var hasNext;
+                        return _tslib.__generator(this, function (_a) {
+                            if (!memberQuery)
+                                return [2 /*return*/];
+                            hasNext = memberQuery.hasNext;
+                            if (hasNext) {
+                                memberQuery.next().then(function (o) {
+                                    setMembers(_tslib.__spreadArray(_tslib.__spreadArray([], members, true), o, true));
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); },
+                }) }, members.map(function (member) { return (renderUserListItem({
+                user: member,
+                channel: channel,
+                renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__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.default.createElement(items.BanToggleMenuItem, null);
+                    } }))); },
+            })); })))));
+}
+
+var BannedUserList = function (_a) {
+    var _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.bannedUserListQueryParams, bannedUserListQueryParams = _c === void 0 ? {} : _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), showModal = _f[0], setShowModal = _f[1];
+    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    var refreshList = React.useCallback(function () {
+        if (!channel) {
+            setMembers([]);
+            return;
+        }
+        var bannedUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createBannedUserListQuery(_tslib.__assign({ limit: 10 }, bannedUserListQueryParams));
+        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]);
+    React.useEffect(refreshList, [channel === null || channel === void 0 ? void 0 : channel.url]);
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        members.map(function (member) { return (React__default.default.createElement(React__default.default.Fragment, { key: member.userId }, renderUserListItem({
+            user: member,
+            channel: channel,
+            size: 'small',
+            avatarSize: '24px',
+            renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__assign({}, props, { isBanned: true, onToggleBanState: function () { return refreshList(); }, renderMenuItems: function (_a) {
+                    var items = _a.items;
+                    return (React__default.default.createElement(items.BanToggleMenuItem, null));
+                } }))); },
+        }))); }),
+        members && members.length === 0 && (React__default.default.createElement(ui_Label.Label, { className: "sendbird-channel-settings__empty-list", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_3 }, stringSet.CHANNEL_SETTING__MODERATION__EMPTY_BAN)),
+        hasNext && (React__default.default.createElement("div", { className: "sendbird-channel-settings-accordion__footer" },
+            React__default.default.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () {
+                    setShowModal(true);
+                } }, stringSet.CHANNEL_SETTING__MODERATION__ALL_BAN))),
+        showModal && (React__default.default.createElement(BannedUsersModal, { onCancel: function () {
+                setShowModal(false);
+                refreshList();
+            }, renderUserListItem: renderUserListItem, bannedUserListQueryParams: bannedUserListQueryParams }))));
+};
+
+function MutedMembersModal(_a) {
+    var _this = this;
+    var onCancel = _a.onCancel, _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.memberListQueryParams, memberListQueryParams = _c === void 0 ? {} : _c;
+    var _d = React.useState([]), members = _d[0], setMembers = _d[1];
+    var _e = React.useState(null), memberQuery = _e[0], setMemberQuery = _e[1];
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    React.useEffect(function () {
+        var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery(_tslib.__assign(_tslib.__assign({ limit: 20 }, memberListQueryParams), { 
+            // @ts-ignore
+            mutedMemberFilter: 'muted' }));
+        memberUserListQuery === null || memberUserListQuery === void 0 ? void 0 : memberUserListQuery.next().then(function (members) {
+            setMembers(members);
+        });
+        setMemberQuery(memberUserListQuery !== null && memberUserListQuery !== void 0 ? memberUserListQuery : null);
+    }, []);
+    return (React__default.default.createElement("div", null,
+        React__default.default.createElement(ui_Modal.Modal, { isFullScreenOnMobile: true, hideFooter: true, onCancel: function () { return onCancel(); }, onSubmit: utils.noop, titleText: stringSet.CHANNEL_SETTING__MUTED_MEMBERS__TITLE },
+            React__default.default.createElement("div", { className: "sendbird-more-members__popup-scroll", onScroll: index.useOnScrollPositionChangeDetector({
+                    onReachedBottom: function () { return _tslib.__awaiter(_this, void 0, void 0, function () {
+                        var hasNext;
+                        return _tslib.__generator(this, function (_a) {
+                            hasNext = memberQuery.hasNext;
+                            if (hasNext) {
+                                memberQuery.next().then(function (o) {
+                                    setMembers(_tslib.__spreadArray(_tslib.__spreadArray([], members, true), o, true));
+                                });
+                            }
+                            return [2 /*return*/];
+                        });
+                    }); },
+                }) }, members.map(function (member) { return (React__default.default.createElement(React__default.default.Fragment, { key: member.userId }, renderUserListItem({
+                user: member,
+                channel: channel,
+                renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__assign({}, props, { onToggleMuteState: function () {
+                        setMembers(members.filter(function (m) {
+                            return (m.userId !== member.userId);
+                        }));
+                    }, renderMenuItems: function (_a) {
+                        var items = _a.items;
+                        return (React__default.default.createElement(items.MuteToggleMenuItem, null));
+                    } }))); },
+            }))); })))));
+}
+
+var MutedMemberList = function (_a) {
+    var _b = _a.renderUserListItem, renderUserListItem = _b === void 0 ? function (props) { return React__default.default.createElement(ui_UserListItem.UserListItem, _tslib.__assign({}, props)); } : _b, _c = _a.memberListQueryParams, memberListQueryParams = _c === void 0 ? {} : _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), showModal = _f[0], setShowModal = _f[1];
+    var stringSet = LocalizationContext.useLocalization().stringSet;
+    var channel = ChannelSettings_context.useChannelSettingsContext().channel;
+    var refreshList = React.useCallback(function () {
+        if (!channel) {
+            setMembers([]);
+            return;
+        }
+        var memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery(_tslib.__assign(_tslib.__assign({ limit: 10 }, memberListQueryParams), { 
+            // @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]);
+    React.useEffect(refreshList, [channel === null || channel === void 0 ? void 0 : channel.url]);
+    return (React__default.default.createElement(React__default.default.Fragment, null,
+        members.map(function (member) { return (React__default.default.createElement(React__default.default.Fragment, { key: member.userId }, renderUserListItem({
+            user: member,
+            channel: channel,
+            size: 'small',
+            avatarSize: '24px',
+            renderListItemMenu: function (props) { return (React__default.default.createElement(UserListItemMenu.UserListItemMenu, _tslib.__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.default.createElement(items.MuteToggleMenuItem, null));
+                } }))); },
+        }))); }),
+        members && members.length === 0 && (React__default.default.createElement(ui_Label.Label, { className: "sendbird-channel-settings__empty-list", type: ui_Label.LabelTypography.SUBTITLE_2, color: ui_Label.LabelColors.ONBACKGROUND_3 }, stringSet.CHANNEL_SETTING__NO_UNMUTED)),
+        hasNext && (React__default.default.createElement("div", { className: "sendbird-channel-settings-accordion__footer" },
+            React__default.default.createElement(ui_Button.default, { type: ui_Button.ButtonTypes.SECONDARY, size: ui_Button.ButtonSizes.SMALL, onClick: function () {
+                    setShowModal(true);
+                } }, stringSet.CHANNEL_SETTING__MUTED_MEMBERS__TITLE_ALL))),
+        showModal && (React__default.default.createElement(MutedMembersModal, { onCancel: function () {
+                setShowModal(false);
+                refreshList();
+            }, renderUserListItem: renderUserListItem, memberListQueryParams: memberListQueryParams }))));
+};
+
+exports.BannedUserList = BannedUserList;
+exports.MutedMemberList = MutedMemberList;
+exports.OperatorList = OperatorList;
+//# sourceMappingURL=bundle-Bbr0JyeR.js.map

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

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

package/cjs/chunks/{bundle-UZTd4E_b.js → bundle-BdulnACZ.js}

@@ -63,4 +63,4 @@ exports.VOICE_RECORDER_AUDIO_SAMPLE_RATE = VOICE_RECORDER_AUDIO_SAMPLE_RATE;
 exports.VOICE_RECORDER_CLICK_BUFFER_TIME = VOICE_RECORDER_CLICK_BUFFER_TIME;
 exports.VOICE_RECORDER_DEFAULT_MAX = VOICE_RECORDER_DEFAULT_MAX;
 exports.VOICE_RECORDER_DEFAULT_MIN = VOICE_RECORDER_DEFAULT_MIN;
-//# sourceMappingURL=bundle-UZTd4E_b.js.map
+//# sourceMappingURL=bundle-BdulnACZ.js.map

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

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

package/cjs/chunks/{bundle-6P-e5JVH.js → bundle-BeTneyYL.js}

@@ -1,17 +1,21 @@
 'use strict';
 
-var _tslib = require('./bundle-CJ4C_lQr.js');
+var _tslib = require('./bundle-DmCOU0rJ.js');
 var React = require('react');
 var reactDom = require('react-dom');
-var utils = require('./bundle-CxcGHjPH.js');
+var utils = require('./bundle-CfMyWzdL.js');
 var SendbirdChat = require('@sendbird/chat');
 var openChannel = require('@sendbird/chat/openChannel');
 var ui_SortByRow = require('../ui/SortByRow.js');
 require('../withSendbird.js');
 require('../ui/IconButton.js');
-require('./bundle-C5OtWVnd.js');
-require('./bundle-DnchMcYp.js');
-var ui_Label = require('./bundle-Dq9xVvbD.js');
+require('./bundle-CRHrNWJp.js');
+require('./bundle-CiMvvzt_.js');
+var ui_Label = require('./bundle-Cmim7RkF.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var APP_LAYOUT_ROOT = 'sendbird-app__layout';
 
@@ -20,7 +24,7 @@ var MenuItems$1 = /** @class */ (function (_super) {
     _tslib.__extends(MenuItems, _super);
     function MenuItems(props) {
         var _this = _super.call(this, props) || this;
-        _this.menuRef = React.createRef();
+        _this.menuRef = React__default.default.createRef();
         _this.setupEvents = function () {
             var closeDropdown = _this.props.closeDropdown;
             var menuRef = _this.menuRef;
@@ -97,15 +101,15 @@ var MenuItems$1 = /** @class */ (function (_super) {
     MenuItems.prototype.render = function () {
         var portalElement = document.getElementById(MENU_ROOT_ID);
         if (!portalElement)
-            return React.createElement(React.Fragment, null);
+            return React__default.default.createElement(React__default.default.Fragment, null);
         var menuStyle = this.state.menuStyle;
         var _a = this.props, children = _a.children, style = _a.style, _b = _a.className, className = _b === void 0 ? '' : _b, testID = _a.testID, id = _a.id;
-        return (reactDom.createPortal((React.createElement("div", { className: utils.classnames(MENU_OBSERVING_CLASS_NAME, className), "data-testid": testID, id: id },
-            React.createElement("div", { className: "sendbird-dropdown__menu-backdrop" }),
-            React.createElement("ul", { className: "".concat(className, " sendbird-dropdown__menu"), ref: this.menuRef, style: _tslib.__assign({ display: 'inline-block', position: 'fixed', left: "".concat(Math.round(menuStyle.left), "px"), top: "".concat(Math.round(menuStyle.top), "px") }, style), "data-testid": "sendbird-dropdown-menu" }, children))), portalElement));
+        return (reactDom.createPortal((React__default.default.createElement("div", { className: utils.classnames(MENU_OBSERVING_CLASS_NAME, className), "data-testid": testID, id: id },
+            React__default.default.createElement("div", { className: "sendbird-dropdown__menu-backdrop" }),
+            React__default.default.createElement("ul", { className: "".concat(className, " sendbird-dropdown__menu"), ref: this.menuRef, style: _tslib.__assign({ display: 'inline-block', position: 'fixed', left: "".concat(Math.round(menuStyle.left), "px"), top: "".concat(Math.round(menuStyle.top), "px") }, style), "data-testid": "sendbird-dropdown-menu" }, children))), portalElement));
     };
     return MenuItems;
-}(React.Component));
+}(React__default.default.Component));
 
 var MuteMenuItem = function (_a) {
     var channel = _a.channel, user = _a.user, _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, _c = _a.disable, disable = _c === void 0 ? false : _c, _d = _a.dataSbId, dataSbId = _d === void 0 ? '' : _d, testID = _a.testID, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.onError, onError = _f === void 0 ? function () { } : _f;
@@ -140,7 +144,7 @@ var MuteMenuItem = function (_a) {
             }
         }
     }, [isProcessing, isMuted]);
-    return (React.createElement(MenuItem, { className: className, disable: disable, testID: testID !== null && testID !== void 0 ? testID : dataSbId, onClick: onClickHandler }, children));
+    return (React__default.default.createElement(MenuItem, { className: className, disable: disable, testID: testID !== null && testID !== void 0 ? testID : dataSbId, onClick: onClickHandler }, children));
 };
 
 var OperatorMenuItem = function (_a) {
@@ -178,7 +182,7 @@ var OperatorMenuItem = function (_a) {
             }
         }
     }, [isProcessing, isOperator]);
-    return (React.createElement(MenuItem, { className: className, disable: disable, testID: testID !== null && testID !== void 0 ? testID : dataSbId, onClick: onClickHandler }, children));
+    return (React__default.default.createElement(MenuItem, { className: className, disable: disable, testID: testID !== null && testID !== void 0 ? testID : dataSbId, onClick: onClickHandler }, children));
 };
 
 var defaultParentRect = { x: 0, y: 0, left: 0, top: 0, height: 0 };
@@ -257,15 +261,15 @@ var EmojiListItems$1 = function (_a) {
     }, []);
     var rootElement = document.getElementById(EMOJI_MENU_ROOT_ID);
     if (rootElement) {
-        return (reactDom.createPortal(React.createElement("div", { className: MENU_OBSERVING_CLASS_NAME, id: id },
-            React.createElement("div", { className: "sendbird-dropdown__menu-backdrop" }),
-            React.createElement("ul", { className: "sendbird-dropdown__reaction-bar", "data-testid": "sendbird-dropdown__reaction-bar", ref: reactionRef, style: {
+        return (reactDom.createPortal(React__default.default.createElement("div", { className: MENU_OBSERVING_CLASS_NAME, id: id },
+            React__default.default.createElement("div", { className: "sendbird-dropdown__menu-backdrop" }),
+            React__default.default.createElement("ul", { className: "sendbird-dropdown__reaction-bar", "data-testid": "sendbird-dropdown__reaction-bar", ref: reactionRef, style: {
                     display: 'inline-block',
                     position: 'fixed',
                     left: "".concat(Math.round(reactionStyle.left), "px"),
                     top: "".concat(Math.round(reactionStyle.top), "px"),
                 } },
-                React.createElement(ui_SortByRow, { className: "sendbird-dropdown__reaction-bar__row", maxItemCount: 8, itemWidth: 44, itemHeight: 40 }, children))), rootElement));
+                React__default.default.createElement(ui_SortByRow, { className: "sendbird-dropdown__reaction-bar__row", maxItemCount: 8, itemWidth: 44, itemHeight: 40 }, children))), rootElement));
     }
     return null;
 };
@@ -273,7 +277,7 @@ var EmojiListItems$1 = function (_a) {
 var MessageMenuContext = React.createContext(undefined);
 var MessageMenuProvider = function (_a) {
     var children = _a.children, value = _a.value;
-    return (React.createElement(MessageMenuContext.Provider, { value: value }, children));
+    return (React__default.default.createElement(MessageMenuContext.Provider, { value: value }, children));
 };
 var useMessageMenuContext = function () {
     var context = React.useContext(MessageMenuContext);
@@ -290,13 +294,13 @@ var MenuItem$1 = function (_a) {
             onClick(e);
         }
     };
-    return (React.createElement("li", { className: utils.classnames('sendbird-menu-item', className), role: "menuitem", "aria-disabled": disabled, "data-testid": testID, tabIndex: tabIndex, onClick: handleClickEvent, onKeyDown: function (e) { if (e.code === 'Enter')
+    return (React__default.default.createElement("li", { className: utils.classnames('sendbird-menu-item', className), role: "menuitem", "aria-disabled": disabled, "data-testid": testID, tabIndex: tabIndex, onClick: handleClickEvent, onKeyDown: function (e) { if (e.code === 'Enter')
             handleClickEvent(e); } },
-        React.createElement(ui_Label.Label, { className: "sendbird-menu-item__text", type: ui_Label.LabelTypography.SUBTITLE_2, color: disabled ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1 }, children)));
+        React__default.default.createElement(ui_Label.Label, { className: "sendbird-menu-item__text", type: ui_Label.LabelTypography.SUBTITLE_2, color: disabled ? ui_Label.LabelColors.ONBACKGROUND_4 : ui_Label.LabelColors.ONBACKGROUND_1 }, children)));
 };
 var BottomSheetMenuItem = function (_a) {
     var className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.tabIndex, tabIndex = _c === void 0 ? 0 : _c, testID = _a.testID, onClick = _a.onClick, children = _a.children;
-    return (React.createElement("div", { className: utils.classnames('sendbird-message__bottomsheet--action', className), role: "menuitem", tabIndex: tabIndex, "aria-disabled": disabled, onClick: onClick, "data-testid": testID }, children));
+    return (React__default.default.createElement("div", { className: utils.classnames('sendbird-message__bottomsheet--action', className), role: "menuitem", tabIndex: tabIndex, "aria-disabled": disabled, onClick: onClick, "data-testid": testID }, children));
 };
 
 // # useElementObserve
@@ -310,17 +314,17 @@ var EmojiListItems = EmojiListItems$1;
  */
 var MenuItem = function (_a) {
     var _b = _a.className, className = _b === void 0 ? '' : _b, children = _a.children, onClick = _a.onClick, _c = _a.disable, disable = _c === void 0 ? false : _c, _d = _a.dataSbId, dataSbId = _d === void 0 ? '' : _d, testID = _a.testID;
-    return (React.createElement(MenuItem$1, { className: utils.classnames.apply(void 0, _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), false), ['sendbird-dropdown__menu-item',
+    return (React__default.default.createElement(MenuItem$1, { className: utils.classnames.apply(void 0, _tslib.__spreadArray(_tslib.__spreadArray([], (Array.isArray(className) ? className : [className]), false), ['sendbird-dropdown__menu-item',
             disable ? 'disable' : ''], false)), disabled: disable, testID: testID !== null && testID !== void 0 ? testID : dataSbId, onClick: onClick }, children));
 };
 var MENU_ROOT_ID = 'sendbird-dropdown-portal';
-var MenuRoot = function () { return (React.createElement("div", { id: MENU_ROOT_ID, className: MENU_ROOT_ID })); };
+var MenuRoot = function () { return (React__default.default.createElement("div", { id: MENU_ROOT_ID, className: MENU_ROOT_ID })); };
 var EMOJI_MENU_ROOT_ID = 'sendbird-emoji-list-portal';
-var EmojiReactionListRoot = function () { return React.createElement("div", { id: EMOJI_MENU_ROOT_ID }); };
+var EmojiReactionListRoot = function () { return React__default.default.createElement("div", { id: EMOJI_MENU_ROOT_ID }); };
 function ContextMenu(_a) {
     var menuTrigger = _a.menuTrigger, menuItems = _a.menuItems, isOpen = _a.isOpen, onClick = _a.onClick;
     var _b = React.useState(false), showMenu = _b[0], setShowMenu = _b[1];
-    return (React.createElement("div", { className: "sendbird-context-menu", style: { display: 'inline' }, onClick: onClick }, menuTrigger === null || menuTrigger === void 0 ? void 0 :
+    return (React__default.default.createElement("div", { className: "sendbird-context-menu", style: { display: 'inline' }, onClick: onClick }, menuTrigger === null || menuTrigger === void 0 ? void 0 :
         menuTrigger(function () { return setShowMenu(!showMenu); }),
         (showMenu || isOpen) && menuItems(function () { return setShowMenu(false); })));
 }
@@ -342,4 +346,4 @@ exports.MuteMenuItem = MuteMenuItem;
 exports.OperatorMenuItem = OperatorMenuItem;
 exports.getObservingId = getObservingId;
 exports.useMessageMenuContext = useMessageMenuContext;
-//# sourceMappingURL=bundle-6P-e5JVH.js.map
+//# sourceMappingURL=bundle-BeTneyYL.js.map

package/cjs/chunks/{bundle-6P-e5JVH.js.map → bundle-BeTneyYL.js.map}

@@ -1 +1 @@
-{"version":3,"file":"bundle-6P-e5JVH.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"bundle-BeTneyYL.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/chunks/{bundle-B22Ty9Wl.js → bundle-Bfd7tojj.js}

@@ -1,10 +1,14 @@
 'use strict';
 
 var React = require('react');
-var _tslib = require('./bundle-CJ4C_lQr.js');
-var consts = require('./bundle-UZTd4E_b.js');
+var _tslib = require('./bundle-DmCOU0rJ.js');
+var consts = require('./bundle-BdulnACZ.js');
 var useSendbirdStateContext = require('../useSendbirdStateContext.js');
-var browser = require('./bundle-B30tLxug.js');
+var browser = require('./bundle-BRhKfsSx.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var INITIALIZE_AUDIO_UNIT = 'INITIALIZE_AUDIO_UNIT';
 var RESET_AUDIO_UNIT = 'RESET_AUDIO_UNIT';
@@ -267,13 +271,13 @@ var VoicePlayerProvider = function (_a) {
             });
         });
     };
-    return (React.createElement(Context.Provider, { value: {
+    return (React__default.default.createElement(Context.Provider, { value: {
             play: play,
             pause: pause,
             stop: stop,
             voicePlayerStore: voicePlayerStore,
         } },
-        React.createElement("div", { id: consts.VOICE_PLAYER_ROOT_ID, style: { display: 'none' } }),
+        React__default.default.createElement("div", { id: consts.VOICE_PLAYER_ROOT_ID, style: { display: 'none' } }),
         children));
 };
 var useVoicePlayerContext = function () { return React.useContext(Context); };
@@ -284,4 +288,4 @@ exports.VOICE_PLAYER_STATUS = VOICE_PLAYER_STATUS;
 exports.VoicePlayerProvider = VoicePlayerProvider;
 exports.generateGroupKey = generateGroupKey;
 exports.useVoicePlayerContext = useVoicePlayerContext;
-//# sourceMappingURL=bundle-B22Ty9Wl.js.map
+//# sourceMappingURL=bundle-Bfd7tojj.js.map

package/cjs/chunks/{bundle-B22Ty9Wl.js.map → bundle-Bfd7tojj.js.map}

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

package/cjs/chunks/{bundle-DP_BgK40.js → bundle-BjFlNAEh.js}

@@ -3,4 +3,4 @@
 var TEXT_MESSAGE_BODY_CLASSNAME = 'sendbird-text-message-item-body';
 
 exports.TEXT_MESSAGE_BODY_CLASSNAME = TEXT_MESSAGE_BODY_CLASSNAME;
-//# sourceMappingURL=bundle-DP_BgK40.js.map
+//# sourceMappingURL=bundle-BjFlNAEh.js.map

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

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

package/cjs/chunks/{bundle-C3gbUZuS.js → bundle-Br-Fmk6C.js}

@@ -1,20 +1,24 @@
 'use strict';
 
 var React = require('react');
-var ui_Modal = require('./bundle-BVG8wAfm.js');
-require('./bundle-CJ4C_lQr.js');
-require('./bundle-Dq9xVvbD.js');
+var ui_Modal = require('./bundle-B2dRfy75.js');
+require('./bundle-DmCOU0rJ.js');
+require('./bundle-Cmim7RkF.js');
 var ui_Button = require('../ui/Button.js');
-var LocalizationContext = require('./bundle-DnchMcYp.js');
+var LocalizationContext = require('./bundle-CiMvvzt_.js');
 var Thread_context = require('../Thread/context.js');
-var stringFormatterUtils = require('./bundle-BM_8g6jd.js');
+var stringFormatterUtils = require('./bundle-CVrMzbXA.js');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 var RemoveMessage = function (props) {
     var _a, _b;
     var onCancel = props.onCancel, onSubmit = props.onSubmit, message = props.message;
     var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
     var deleteMessage = Thread_context.useThreadContext().deleteMessage;
-    return (React.createElement(ui_Modal.Modal, { type: ui_Button.ButtonTypes.DANGER, disabled: ((_b = (_a = message.threadInfo) === null || _a === void 0 ? void 0 : _a.replyCount) !== null && _b !== void 0 ? _b : 0) > 0, onCancel: onCancel, onSubmit: function () {
+    return (React__default.default.createElement(ui_Modal.Modal, { type: ui_Button.ButtonTypes.DANGER, disabled: ((_b = (_a = message.threadInfo) === null || _a === void 0 ? void 0 : _a.replyCount) !== null && _b !== void 0 ? _b : 0) > 0, onCancel: onCancel, onSubmit: function () {
             deleteMessage(message).then(function () {
                 onCancel === null || onCancel === void 0 ? void 0 : onCancel();
                 onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
@@ -23,4 +27,4 @@ var RemoveMessage = function (props) {
 };
 
 exports.RemoveMessage = RemoveMessage;
-//# sourceMappingURL=bundle-C3gbUZuS.js.map
+//# sourceMappingURL=bundle-Br-Fmk6C.js.map