@sendbird/uikit-react 3.2.0-rc.0 → 3.2.0-rc.2

package/ChannelSettings/components/ModerationPanel.js

@@ -1,42 +1,44 @@
 import React__default, { useState, useContext, useEffect, useCallback } from 'react';
-import { a as LocalizationContext, u as useLocalization } from '../../LocalizationContext-4cefc770.js';
+import { a as LocalizationContext, u as useLocalization } from '../../LocalizationContext-78d3faa4.js';
 import Accordion, { AccordionGroup } from '../../ui/Accordion.js';
-import { L as Label, b as LabelColors, a as LabelTypography } from '../../index-6b896cd8.js';
+import { L as Label, b as LabelColors, a as LabelTypography } from '../../index-327e2586.js';
 import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
 import Badge from '../../ui/Badge.js';
 import Button, { ButtonTypes, ButtonSizes } from '../../ui/Button.js';
 import IconButton from '../../ui/IconButton.js';
 import ContextMenu, { MenuItems, MenuItem } from '../../ui/ContextMenu.js';
 import UserListItem$1 from './UserListItem.js';
-import { a as __spreadArray, _ as __assign } from '../../tslib.es6-cb5d77bf.js';
+import { a as __spreadArray, _ as __assign } from '../../tslib.es6-c49bbc0a.js';
 import Modal from '../../ui/Modal.js';
 import UserListItem from '../../ui/UserListItem.js';
 import { useChannelSettingsContext } from '../context.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import { S as St } from '../../groupChannel-e2a071e1.js';
-import { M as MemberList } from '../../MemberList-e4916e55.js';
-import { n as noop } from '../../utils-629876b9.js';
-import '../../stringSet-dc330bcf.js';
-import '../../index-176e9ad4.js';
+import { S as St } from '../../groupChannel-28860f2b.js';
+import { M as MemberList } from '../../MemberList-057e2466.js';
+import { n as noop } from '../../utils-e3b472fd.js';
+import '../../stringSet-6e7f0195.js';
+import '../../index-ab443960.js';
 import '../../ui/AccordionGroup.js';
-import '../../context-bd92675f.js';
-import '../../_rollupPluginBabelHelpers-4527872e.js';
+import '../../context-352b7bd9.js';
 import 'prop-types';
 import 'react-dom';
 import '../../ui/SortByRow.js';
-import '../../uuid-180d497e.js';
-import '../../index-f59cf800.js';
-import '../../UserProfileContext-2e53d03a.js';
+import '../../uuid-741c039a.js';
+import '../../index-eeb90f55.js';
+import '../../UserProfileContext-bc040e78.js';
 import '../../ui/Avatar.js';
 import '../../ui/ImageRenderer.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/UserProfile.js';
 import '../../withSendbird.js';
+import '../../_rollupPluginBabelHelpers-64f3f48c.js';
 import '../../sendbirdSelectors.js';
-import '../../topics-c5198349.js';
-import '../../index-3249f6b5.js';
+import '../../topics-13d4b72d.js';
+import '../../index-26e371a5.js';
 import '../../ui/Checkbox.js';
-import '../../__bundle-bd072f34-95f6bf17.js';
+import '../../__bundle-57e0c5af-dff5d7e0.js';
+import '../../__bundle-0dad34cd-6408fa97.js';
+import '../../__bundle-bd072f34-80eb9bbc.js';
 
 function OperatorsModal(_a) {
   var _b;
@@ -70,7 +72,7 @@ function OperatorsModal(_a) {
     onCancel: onCancel
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-more-members__popup-scroll",
-    onScroll: function onScroll(e) {
+    onScroll: function (e) {
       var hasNext = operatorQuery.hasNext;
       var target = e.target;
       var fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
@@ -86,11 +88,11 @@ function OperatorsModal(_a) {
       currentUser: currentUser,
       user: member,
       key: member.userId,
-      action: function action(_a) {
+      action: function (_a) {
         var parentRef = _a.parentRef,
             actionRef = _a.actionRef;
         return /*#__PURE__*/React__default.createElement(ContextMenu, {
-          menuTrigger: function menuTrigger(toggleDropdown) {
+          menuTrigger: function (toggleDropdown) {
             return /*#__PURE__*/React__default.createElement(IconButton, {
               className: "sendbird-user-message__more__menu",
               width: "32px",
@@ -103,7 +105,7 @@ function OperatorsModal(_a) {
               fillColor: IconColors.CONTENT_INVERSE
             }));
           },
-          menuItems: function menuItems(closeDropdown) {
+          menuItems: function (closeDropdown) {
             return /*#__PURE__*/React__default.createElement(MenuItems, {
               parentContainRef: parentRef,
               parentRef: actionRef // for catching location(x, y) of MenuItems
@@ -111,7 +113,7 @@ function OperatorsModal(_a) {
               closeDropdown: closeDropdown,
               openLeft: true
             }, /*#__PURE__*/React__default.createElement(MenuItem, {
-              onClick: function onClick() {
+              onClick: function () {
                 channel === null || channel === void 0 ? void 0 : channel.removeOperators([member.userId]).then(function () {
                   setOperators(operators.filter(function (_a) {
                     var userId = _a.userId;
@@ -130,7 +132,7 @@ function OperatorsModal(_a) {
 
 function AddOperatorsModal(_a) {
   var onCancel = _a.onCancel,
-      _onSubmit = _a.onSubmit;
+      onSubmit = _a.onSubmit;
 
   var _b = useState([]),
       members = _b[0],
@@ -163,12 +165,12 @@ function AddOperatorsModal(_a) {
     type: ButtonTypes.PRIMARY,
     submitText: "Add",
     onCancel: onCancel,
-    onSubmit: function onSubmit() {
+    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);
+        onSubmit(members);
       });
     },
     titleText: stringSet.CHANNEL_SETTING__MEMBERS__SELECT_TITLE
@@ -177,7 +179,7 @@ function AddOperatorsModal(_a) {
     type: LabelTypography.CAPTION_1
   }, "".concat(selectedCount, " ").concat(stringSet.MODAL__INVITE_MEMBER__SELECTED)), /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-more-members__popup-scroll",
-    onScroll: function onScroll(e) {
+    onScroll: function (e) {
       var hasNext = memberQuery.hasNext;
       var target = e.target;
       var fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
@@ -194,7 +196,7 @@ function AddOperatorsModal(_a) {
       checked: selectedMembers[member.userId],
       isOperator: (member === null || member === void 0 ? void 0 : member.role) === 'operator',
       disabled: (member === null || member === void 0 ? void 0 : member.role) === 'operator',
-      onChange: function onChange(event) {
+      onChange: function (event) {
         var _a;
 
         var modifiedSelectedMembers = __assign(__assign({}, selectedMembers), (_a = {}, _a[event.target.id] = event.target.checked, _a));
@@ -211,7 +213,7 @@ function AddOperatorsModal(_a) {
   }))));
 }
 
-var OperatorList = function OperatorList() {
+var OperatorList = function () {
   var _a;
 
   var _b = useState([]),
@@ -267,10 +269,10 @@ var OperatorList = function OperatorList() {
       key: operator.userId,
       user: operator,
       currentUser: userId,
-      action: function action(_a) {
+      action: function (_a) {
         var actionRef = _a.actionRef;
         return /*#__PURE__*/React__default.createElement(ContextMenu, {
-          menuTrigger: function menuTrigger(toggleDropdown) {
+          menuTrigger: function (toggleDropdown) {
             return /*#__PURE__*/React__default.createElement(IconButton, {
               className: "sendbird-user-message__more__menu",
               width: "32px",
@@ -283,13 +285,13 @@ var OperatorList = function OperatorList() {
               fillColor: IconColors.CONTENT_INVERSE
             }));
           },
-          menuItems: function menuItems(closeDropdown) {
+          menuItems: function (closeDropdown) {
             return /*#__PURE__*/React__default.createElement(MenuItems, {
               parentRef: actionRef,
               closeDropdown: closeDropdown,
               openLeft: true
             }, /*#__PURE__*/React__default.createElement(MenuItem, {
-              onClick: function onClick() {
+              onClick: function () {
                 channel === null || channel === void 0 ? void 0 : channel.removeOperators([operator.userId]).then(function () {
                   setOperators(operators.filter(function (_a) {
                     var userId = _a.userId;
@@ -308,25 +310,25 @@ var OperatorList = function OperatorList() {
   }, /*#__PURE__*/React__default.createElement(Button, {
     type: ButtonTypes.SECONDARY,
     size: ButtonSizes.SMALL,
-    onClick: function onClick() {
+    onClick: function () {
       setShowAdd(true);
     }
   }, stringSet.CHANNEL_SETTING__OPERATORS__TITLE_ADD), hasNext && /*#__PURE__*/React__default.createElement(Button, {
     type: ButtonTypes.SECONDARY,
     size: ButtonSizes.SMALL,
-    onClick: function onClick() {
+    onClick: function () {
       setShowMore(true);
     }
   }, stringSet.CHANNEL_SETTING__OPERATORS__TITLE_ALL)), showMore && /*#__PURE__*/React__default.createElement(OperatorsModal, {
-    onCancel: function onCancel() {
+    onCancel: function () {
       setShowMore(false);
       refreshList();
     }
   }), showAdd && /*#__PURE__*/React__default.createElement(AddOperatorsModal, {
-    onCancel: function onCancel() {
+    onCancel: function () {
       return setShowAdd(false);
     },
-    onSubmit: function onSubmit() {
+    onSubmit: function () {
       refreshList();
       setShowAdd(false);
     }
@@ -334,7 +336,7 @@ var OperatorList = function OperatorList() {
 };
 
 function BannedUsersModal(_a) {
-  var _onCancel = _a.onCancel;
+  var onCancel = _a.onCancel;
 
   var _b = useState([]),
       members = _b[0],
@@ -355,14 +357,14 @@ function BannedUsersModal(_a) {
   }, []);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Modal, {
     hideFooter: true,
-    onCancel: function onCancel() {
-      return _onCancel();
+    onCancel: function () {
+      return onCancel();
     },
     onSubmit: noop,
     titleText: stringSet.CHANNEL_SETTING__MUTED_MEMBERS__TITLE
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-more-members__popup-scroll",
-    onScroll: function onScroll(e) {
+    onScroll: function (e) {
       var hasNext = memberQuery.hasNext;
       var target = e.target;
       var fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
@@ -377,11 +379,11 @@ function BannedUsersModal(_a) {
     return /*#__PURE__*/React__default.createElement(UserListItem, {
       user: member,
       key: member.userId,
-      action: function action(_a) {
+      action: function (_a) {
         var parentRef = _a.parentRef,
             actionRef = _a.actionRef;
         return /*#__PURE__*/React__default.createElement(ContextMenu, {
-          menuTrigger: function menuTrigger(toggleDropdown) {
+          menuTrigger: function (toggleDropdown) {
             return /*#__PURE__*/React__default.createElement(IconButton, {
               className: "sendbird-user-message__more__menu",
               width: "32px",
@@ -394,7 +396,7 @@ function BannedUsersModal(_a) {
               fillColor: IconColors.CONTENT_INVERSE
             }));
           },
-          menuItems: function menuItems(closeDropdown) {
+          menuItems: function (closeDropdown) {
             return /*#__PURE__*/React__default.createElement(MenuItems, {
               parentContainRef: parentRef,
               parentRef: actionRef // for catching location(x, y) of MenuItems
@@ -402,7 +404,7 @@ function BannedUsersModal(_a) {
               closeDropdown: closeDropdown,
               openLeft: true
             }, /*#__PURE__*/React__default.createElement(MenuItem, {
-              onClick: function onClick() {
+              onClick: function () {
                 channel === null || channel === void 0 ? void 0 : channel.unbanUser(member).then(function () {
                   closeDropdown();
                   setMembers(members.filter(function (m) {
@@ -418,7 +420,7 @@ function BannedUsersModal(_a) {
   }))));
 }
 
-var BannedMemberList = function BannedMemberList() {
+var BannedMemberList = function () {
   var _a = useState([]),
       members = _a[0],
       setMembers = _a[1];
@@ -460,11 +462,11 @@ var BannedMemberList = function BannedMemberList() {
     return /*#__PURE__*/React__default.createElement(UserListItem$1, {
       key: member.userId,
       user: member,
-      action: function action(_a) {
+      action: function (_a) {
         var actionRef = _a.actionRef,
             parentRef = _a.parentRef;
         return /*#__PURE__*/React__default.createElement(ContextMenu, {
-          menuTrigger: function menuTrigger(toggleDropdown) {
+          menuTrigger: function (toggleDropdown) {
             return /*#__PURE__*/React__default.createElement(IconButton, {
               className: "sendbird-user-message__more__menu",
               width: "32px",
@@ -477,7 +479,7 @@ var BannedMemberList = function BannedMemberList() {
               fillColor: IconColors.CONTENT_INVERSE
             }));
           },
-          menuItems: function menuItems(closeDropdown) {
+          menuItems: function (closeDropdown) {
             return /*#__PURE__*/React__default.createElement(MenuItems, {
               parentContainRef: parentRef,
               parentRef: actionRef // for catching location(x, y) of MenuItems
@@ -485,7 +487,7 @@ var BannedMemberList = function BannedMemberList() {
               closeDropdown: closeDropdown,
               openLeft: true
             }, /*#__PURE__*/React__default.createElement(MenuItem, {
-              onClick: function onClick() {
+              onClick: function () {
                 channel === null || channel === void 0 ? void 0 : channel.unbanUser(member).then(function () {
                   closeDropdown();
                   refreshList();
@@ -505,11 +507,11 @@ var BannedMemberList = function BannedMemberList() {
   }, /*#__PURE__*/React__default.createElement(Button, {
     type: ButtonTypes.SECONDARY,
     size: ButtonSizes.SMALL,
-    onClick: function onClick() {
+    onClick: function () {
       setShowModal(true);
     }
   }, "All banned members")), showModal && /*#__PURE__*/React__default.createElement(BannedUsersModal, {
-    onCancel: function onCancel() {
+    onCancel: function () {
       setShowModal(false);
       refreshList();
     }
@@ -519,7 +521,7 @@ var BannedMemberList = function BannedMemberList() {
 function MutedMembersModal(_a) {
   var _b;
 
-  var _onCancel = _a.onCancel;
+  var onCancel = _a.onCancel;
 
   var _c = useState([]),
       members = _c[0],
@@ -546,14 +548,14 @@ function MutedMembersModal(_a) {
   }, []);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Modal, {
     hideFooter: true,
-    onCancel: function onCancel() {
-      return _onCancel();
+    onCancel: function () {
+      return onCancel();
     },
     onSubmit: noop,
     titleText: stringSet.CHANNEL_SETTING__MUTED_MEMBERS__TITLE
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-more-members__popup-scroll",
-    onScroll: function onScroll(e) {
+    onScroll: function (e) {
       var hasNext = memberQuery.hasNext;
       var target = e.target;
       var fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
@@ -569,11 +571,11 @@ function MutedMembersModal(_a) {
       currentUser: currentUser,
       user: member,
       key: member.userId,
-      action: function action(_a) {
+      action: function (_a) {
         var actionRef = _a.actionRef,
             parentRef = _a.parentRef;
         return /*#__PURE__*/React__default.createElement(ContextMenu, {
-          menuTrigger: function menuTrigger(toggleDropdown) {
+          menuTrigger: function (toggleDropdown) {
             return /*#__PURE__*/React__default.createElement(IconButton, {
               className: "sendbird-user-message__more__menu",
               width: "32px",
@@ -586,7 +588,7 @@ function MutedMembersModal(_a) {
               fillColor: IconColors.CONTENT_INVERSE
             }));
           },
-          menuItems: function menuItems(closeDropdown) {
+          menuItems: function (closeDropdown) {
             return /*#__PURE__*/React__default.createElement(MenuItems, {
               parentContainRef: parentRef,
               parentRef: actionRef // for catching location(x, y) of MenuItems
@@ -594,7 +596,7 @@ function MutedMembersModal(_a) {
               closeDropdown: closeDropdown,
               openLeft: true
             }, /*#__PURE__*/React__default.createElement(MenuItem, {
-              onClick: function onClick() {
+              onClick: function () {
                 channel === null || channel === void 0 ? void 0 : channel.unmuteUser(member).then(function () {
                   closeDropdown();
                   setMembers(members.filter(function (m) {
@@ -610,7 +612,7 @@ function MutedMembersModal(_a) {
   }))));
 }
 
-var MutedMemberList = function MutedMemberList() {
+var MutedMemberList = function () {
   var _a;
 
   var _b = useState([]),
@@ -666,11 +668,11 @@ var MutedMemberList = function MutedMemberList() {
       key: member.userId,
       user: member,
       currentUser: currentUser,
-      action: function action(_a) {
+      action: function (_a) {
         var actionRef = _a.actionRef,
             parentRef = _a.parentRef;
         return /*#__PURE__*/React__default.createElement(ContextMenu, {
-          menuTrigger: function menuTrigger(toggleDropdown) {
+          menuTrigger: function (toggleDropdown) {
             return /*#__PURE__*/React__default.createElement(IconButton, {
               className: "sendbird-user-message__more__menu",
               width: "32px",
@@ -683,7 +685,7 @@ var MutedMemberList = function MutedMemberList() {
               fillColor: IconColors.CONTENT_INVERSE
             }));
           },
-          menuItems: function menuItems(closeDropdown) {
+          menuItems: function (closeDropdown) {
             return /*#__PURE__*/React__default.createElement(MenuItems, {
               closeDropdown: closeDropdown,
               openLeft: true,
@@ -691,7 +693,7 @@ var MutedMemberList = function MutedMemberList() {
               parentRef: actionRef // for catching location(x, y) of MenuItems
 
             }, /*#__PURE__*/React__default.createElement(MenuItem, {
-              onClick: function onClick() {
+              onClick: function () {
                 channel === null || channel === void 0 ? void 0 : channel.unmuteUser(member).then(function () {
                   refreshList();
                   closeDropdown();
@@ -711,18 +713,18 @@ var MutedMemberList = function MutedMemberList() {
   }, /*#__PURE__*/React__default.createElement(Button, {
     type: ButtonTypes.SECONDARY,
     size: ButtonSizes.SMALL,
-    onClick: function onClick() {
+    onClick: function () {
       setShowModal(true);
     }
   }, stringSet.CHANNEL_SETTING__MUTED_MEMBERS__TITLE_ALL)), showModal && /*#__PURE__*/React__default.createElement(MutedMembersModal, {
-    onCancel: function onCancel() {
+    onCancel: function () {
       setShowModal(false);
       refreshList();
     }
   }));
 };
 
-var kFormatter = function kFormatter(num) {
+var kFormatter = function (num) {
   return Math.abs(num) > 999 ? "".concat((Math.abs(num) / 1000).toFixed(1), "K") : num;
 };
 
@@ -744,7 +746,7 @@ function AdminPannel() {
   }, /*#__PURE__*/React__default.createElement(Accordion, {
     className: "sendbird-channel-settings__operators-list",
     id: "operators",
-    renderTitle: function renderTitle() {
+    renderTitle: function () {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
         type: IconTypes.OPERATOR,
         fillColor: IconColors.PRIMARY,
@@ -756,13 +758,13 @@ function AdminPannel() {
         color: LabelColors.ONBACKGROUND_1
       }, stringSet.CHANNEL_SETTING__OPERATORS__TITLE));
     },
-    renderContent: function renderContent() {
+    renderContent: function () {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(OperatorList, null));
     }
   }), /*#__PURE__*/React__default.createElement(Accordion, {
     className: "sendbird-channel-settings__members-list",
     id: "members",
-    renderTitle: function renderTitle() {
+    renderTitle: function () {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
         type: IconTypes.MEMBERS,
         fillColor: IconColors.PRIMARY,
@@ -776,14 +778,14 @@ function AdminPannel() {
         count: kFormatter(channel === null || channel === void 0 ? void 0 : channel.memberCount)
       }));
     },
-    renderContent: function renderContent() {
+    renderContent: function () {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MemberList, null));
     }
   }), // No muted members in broadcast channel
   !(channel === null || channel === void 0 ? void 0 : channel.isBroadcast) && /*#__PURE__*/React__default.createElement(Accordion, {
     id: "mutedMembers",
     className: "sendbird-channel-settings__muted-members-list",
-    renderTitle: function renderTitle() {
+    renderTitle: function () {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
         type: IconTypes.MUTE,
         fillColor: IconColors.PRIMARY,
@@ -795,13 +797,13 @@ function AdminPannel() {
         color: LabelColors.ONBACKGROUND_1
       }, stringSet.CHANNEL_SETTING__MUTED_MEMBERS__TITLE));
     },
-    renderContent: function renderContent() {
+    renderContent: function () {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MutedMemberList, null));
     }
   }), /*#__PURE__*/React__default.createElement(Accordion, {
     className: "sendbird-channel-settings__banned-members-list",
     id: "bannedUsers",
-    renderTitle: function renderTitle() {
+    renderTitle: function () {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
         type: IconTypes.BAN,
         fillColor: IconColors.PRIMARY,
@@ -813,7 +815,7 @@ function AdminPannel() {
         color: LabelColors.ONBACKGROUND_1
       }, stringSet.CHANNEL_SETTING__BANNED_MEMBERS__TITLE));
     },
-    renderContent: function renderContent() {
+    renderContent: function () {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(BannedMemberList, null));
     }
   }), // cannot freeze broadcast channel
@@ -831,7 +833,7 @@ function AdminPannel() {
   }, stringSet.CHANNEL_SETTING__FREEZE_CHANNEL), /*#__PURE__*/React__default.createElement("div", {
     className: "sendbird-channel-settings__frozen-icon"
   }, frozen ? /*#__PURE__*/React__default.createElement(Icon, {
-    onClick: function onClick() {
+    onClick: function () {
       channel === null || channel === void 0 ? void 0 : channel.unfreeze().then(function () {
         setFrozen(false);
       });
@@ -841,7 +843,7 @@ function AdminPannel() {
     width: 44,
     height: 24
   }) : /*#__PURE__*/React__default.createElement(Icon, {
-    onClick: function onClick() {
+    onClick: function () {
       channel === null || channel === void 0 ? void 0 : channel.freeze().then(function () {
         setFrozen(true);
       });