@sendbird/uikit-react 3.5.0-beta.0 → 3.5.0-mobile-web-1

package/EditUserProfile.js

@@ -1,34 +1,35 @@
 import React__default from 'react';
-import { E as EditUserProfileProvider, a as EditUserProfile } from './index-fc4702b7.js';
+import { E as EditUserProfileProvider, a as EditUserProfile } from './index-5a1c1956.js';
 import './ui/Modal.js';
 import 'react-dom';
-import './index-e5b78039.js';
-import './LocalizationContext-4df0cc32.js';
-import './stringSet-d555d877.js';
-import './index-07e060cd.js';
+import './index-7bff4ce0.js';
+import './LocalizationContext-57b46f6c.js';
+import './stringSet-7a8ce1ce.js';
+import './index-865112db.js';
 import './ui/Button.js';
-import './tslib.es6-bcead7e6.js';
-import './index-44470dab.js';
+import './index-4023d1b2.js';
 import 'prop-types';
 import './ui/Icon.js';
 import './ui/IconButton.js';
-import './MediaQueryContext-74183e34.js';
+import './_rollupPluginBabelHelpers-0bc76382.js';
+import './MediaQueryContext-fbe7af77.js';
 import './useSendbirdStateContext.js';
 import './withSendbird.js';
-import './_rollupPluginBabelHelpers-498add61.js';
 import './ui/Input.js';
 import './ui/Avatar.js';
 import './ui/ImageRenderer.js';
-import './uuid-286ed926.js';
+import './uuid-1f1bbd9c.js';
 import './ui/TextButton.js';
-import './color-ff5f9069.js';
-import './utils-e720e03a.js';
-import './actionTypes-ad2cbd73.js';
+import './color-2ed716e6.js';
+import './utils-388a790e.js';
+import './actionTypes-45ec82e6.js';
 
-var EditProfile = function (props) {
-  var onEditProfile = props.onEditProfile,
-      onCancel = props.onCancel,
-      onThemeChange = props.onThemeChange;
+const EditProfile = props => {
+  const {
+    onEditProfile,
+    onCancel,
+    onThemeChange
+  } = props;
   return /*#__PURE__*/React__default.createElement(EditUserProfileProvider, {
     onEditProfile: onEditProfile,
     onCancel: onCancel,

package/EditUserProfile.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditUserProfile.js","sources":["../src/smart-components/EditUserProfile/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  EditUserProfileProvider,\n  EditUserProfileProps,\n} from './context/EditUserProfIleProvider';\n\nimport EditUserProfile from './components/EditUserProfileUI';\n\nconst EditProfile: React.FC<EditUserProfileProps> = (props: EditUserProfileProps) => {\n  const {\n    onEditProfile,\n    onCancel,\n    onThemeChange,\n  } = props;\n  return (\n    <EditUserProfileProvider\n      onEditProfile={onEditProfile}\n      onCancel={onCancel}\n      onThemeChange={onThemeChange}\n    >\n      <EditUserProfile />\n    </EditUserProfileProvider>\n  )\n}\n\nexport default EditProfile;\n"],"names":["EditProfile","props","onEditProfile","onCancel","onThemeChange","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,WAAW,GAAmC,UAACC,KAAD,EAA4B;AAE5E,EAAA,IAAAC,aAAa,GAGXD,KAAK,CAAAC,aAHP;AAAA,MACAC,QAAQ,GAENF,KAAK,CAAAE,QAHP;AAAA,MAEAC,aAAa,GACXH,KAAK,cAHP,CAAA;AAIF,EAAA,oBACEI,6BAAC,uBAAD,EAAA;AACE,IAAA,aAAa,EAAEH,aADjB;AAEE,IAAA,QAAQ,EAAEC,QAFZ;AAGE,IAAA,aAAa,EAAEC,aAAAA;GAEf,eAAAC,cAAA,CAAA,aAAA,CAAC,eAAD,EAAA,IAAA,CALF,CADF,CAAA;AASD;;;;"}
+{"version":3,"file":"EditUserProfile.js","sources":["../src/modules/EditUserProfile/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  EditUserProfileProvider,\n  EditUserProfileProps,\n} from './context/EditUserProfIleProvider';\n\nimport EditUserProfile from './components/EditUserProfileUI';\n\nconst EditProfile: React.FC<EditUserProfileProps> = (props: EditUserProfileProps) => {\n  const {\n    onEditProfile,\n    onCancel,\n    onThemeChange,\n  } = props;\n  return (\n    <EditUserProfileProvider\n      onEditProfile={onEditProfile}\n      onCancel={onCancel}\n      onThemeChange={onThemeChange}\n    >\n      <EditUserProfile />\n    </EditUserProfileProvider>\n  );\n};\n\nexport default EditProfile;\n"],"names":["EditProfile","props","onEditProfile","onCancel","onThemeChange","React","createElement","EditUserProfileProvider","EditUserProfile"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AASMA,MAAAA,WAA2C,GAAIC,KAA2B,IAAK;EACnF,MAAM;IACJC,aAAa;IACbC,QAAQ;AACRC,IAAAA,aAAAA;AACF,GAAC,GAAGH,KAAK,CAAA;AACT,EAAA,oBACEI,cAAA,CAAAC,aAAA,CAACC,uBAAuB,EAAA;AACtBL,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,aAAa,EAAEA,aAAAA;AAAc,GAAA,eAE7BC,cAAA,CAAAC,aAAA,CAACE,eAAe,OAAG,CACK,CAAA;AAE9B;;;;"}

package/LocalizationContext-57b46f6c.js

@@ -0,0 +1,20 @@
+import React__default from 'react';
+import { g as getStringSet } from './stringSet-7a8ce1ce.js';
+import { d as defaultLocale } from './index-865112db.js';
+
+const LocalizationContext = /*#__PURE__*/React__default.createContext({
+  stringSet: getStringSet('en'),
+  dateLocale: defaultLocale
+});
+const LocalizationProvider = props => {
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/React__default.createElement(LocalizationContext.Provider, {
+    value: props
+  }, children);
+};
+const useLocalization = () => React__default.useContext(LocalizationContext);
+
+export { LocalizationProvider as L, LocalizationContext as a, useLocalization as u };
+//# sourceMappingURL=LocalizationContext-57b46f6c.js.map

package/{LocalizationContext-4df0cc32.js.map → LocalizationContext-57b46f6c.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LocalizationContext-4df0cc32.js","sources":["../src/lib/LocalizationContext.tsx"],"sourcesContent":["import React from 'react';\n\nimport getStringSet from '../ui/Label/stringSet';\nimport type { Locale } from 'date-fns';\nimport en from 'date-fns/locale/en-US';\n\nconst LocalizationContext = React.createContext({\n  stringSet: getStringSet('en'),\n  dateLocale: en,\n});\n\ninterface LocalizationProviderProps {\n  stringSet: Record<string, string>;\n  dateLocale: Locale;\n  children: React.ReactElement;\n}\n\nconst LocalizationProvider = (props: LocalizationProviderProps): React.ReactElement => {\n  const { children } = props;\n  return (\n    <LocalizationContext.Provider value={props}>\n      {children}\n    </LocalizationContext.Provider>\n  );\n};\n\nexport type UseLocalizationType = () => {\n  stringSet: Record<string, string>;\n  dateLocale: globalThis.Locale;\n};\n\nconst useLocalization: UseLocalizationType = () => React.useContext(LocalizationContext);\n\nexport { LocalizationContext, LocalizationProvider, useLocalization };\n"],"names":["LocalizationContext","React","createContext","stringSet","getStringSet","dateLocale","en","LocalizationProvider","props","children","useLocalization","useContext"],"mappings":";;;;AAMA,IAAMA,mBAAmB,gBAAGC,cAAK,CAACC,aAAN,CAAoB;AAC9CC,EAAAA,SAAS,EAAEC,YAAY,CAAC,IAAD,CADuB;AAE9CC,EAAAA,UAAU,EAAEC,aAAAA;AAFkC,CAApB,EAA5B;;AAWA,IAAMC,oBAAoB,GAAG,UAACC,KAAD,EAAiC;AACpD,EAAA,IAAAC,QAAQ,GAAKD,KAAK,CAAAC,QAAlB,CAAA;EACR,oBACER,cAAA,CAAA,aAAA,CAAC,mBAAD,CAAqB,QAArB,EAAA;AAA8B,IAAA,KAAK,EAAEO,KAAAA;AAArC,GAAA,EACGC,QADH,CADF,CAAA;AAKD,EAPD;;AAcMC,IAAAA,eAAe,GAAwB,YAAM;AAAA,EAAA,OAAAT,cAAK,CAACU,UAAN,CAAiBX,mBAAjB,CAAA,CAAA;AAAqC;;;;"}
+{"version":3,"file":"LocalizationContext-57b46f6c.js","sources":["../src/lib/LocalizationContext.tsx"],"sourcesContent":["import React from 'react';\n\nimport getStringSet from '../ui/Label/stringSet';\nimport type { Locale } from 'date-fns';\nimport en from 'date-fns/locale/en-US';\n\nconst LocalizationContext = React.createContext({\n  stringSet: getStringSet('en'),\n  dateLocale: en,\n});\n\ninterface LocalizationProviderProps {\n  stringSet: Record<string, string>;\n  dateLocale: Locale;\n  children: React.ReactElement;\n}\n\nconst LocalizationProvider = (props: LocalizationProviderProps): React.ReactElement => {\n  const { children } = props;\n  return (\n    <LocalizationContext.Provider value={props}>\n      {children}\n    </LocalizationContext.Provider>\n  );\n};\n\nexport type UseLocalizationType = () => {\n  stringSet: Record<string, string>;\n  dateLocale: globalThis.Locale;\n};\n\nconst useLocalization: UseLocalizationType = () => React.useContext(LocalizationContext);\n\nexport { LocalizationContext, LocalizationProvider, useLocalization };\n"],"names":["LocalizationContext","React","createContext","stringSet","getStringSet","dateLocale","en","LocalizationProvider","props","children","createElement","Provider","value","useLocalization","useContext"],"mappings":";;;;AAMA,MAAMA,mBAAmB,gBAAGC,cAAK,CAACC,aAAa,CAAC;AAC9CC,EAAAA,SAAS,EAAEC,YAAY,CAAC,IAAI,CAAC;AAC7BC,EAAAA,UAAU,EAAEC,aAAAA;AACd,CAAC,EAAC;AAQIC,MAAAA,oBAAoB,GAAIC,KAAgC,IAAyB;EACrF,MAAM;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAGD,KAAK,CAAA;AAC1B,EAAA,oBACEP,cAAA,CAAAS,aAAA,CAACV,mBAAmB,CAACW,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAEJ,KAAAA;AAAM,GAAA,EACxCC,QAAQ,CACoB,CAAA;AAEnC,EAAC;AAOKI,MAAAA,eAAoC,GAAGA,MAAMZ,cAAK,CAACa,UAAU,CAACd,mBAAmB;;;;"}

package/MediaQueryContext-fbe7af77.js

@@ -0,0 +1,87 @@
+import React__default, { useState, useEffect } from 'react';
+
+const DEFAULT_MOBILE = false;
+// const DEFAULT_MOBILE = '768px';
+const MOBILE_CLASSNAME = 'sendbird--mobile-mode';
+const MediaQueryContext = /*#__PURE__*/React__default.createContext({
+  breakpoint: DEFAULT_MOBILE,
+  isMobile: false
+});
+const addClassNameToBody = () => {
+  try {
+    const body = document.querySelector('body');
+    body === null || body === void 0 ? void 0 : body.classList.add(MOBILE_CLASSNAME);
+  } catch (_unused) {
+    // noop
+  }
+};
+const removeClassNameFromBody = () => {
+  try {
+    const body = document.querySelector('body');
+    body === null || body === void 0 ? void 0 : body.classList.remove(MOBILE_CLASSNAME);
+  } catch (_unused2) {
+    // noop
+  }
+};
+const MediaQueryProvider = props => {
+  const {
+    children,
+    logger
+  } = props;
+  const breakpoint = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    var _logger$info6;
+    const updateSize = () => {
+      if (typeof breakpoint === 'boolean') {
+        setIsMobile(breakpoint);
+        if (breakpoint) {
+          var _logger$info;
+          logger === null || logger === void 0 ? void 0 : (_logger$info = logger.info) === null || _logger$info === void 0 ? void 0 : _logger$info.call(logger, 'MediaQueryProvider: isMobile: true');
+          addClassNameToBody();
+        } else {
+          var _logger$info2;
+          logger === null || logger === void 0 ? void 0 : (_logger$info2 = logger.info) === null || _logger$info2 === void 0 ? void 0 : _logger$info2.call(logger, 'MediaQueryProvider: isMobile: false');
+          removeClassNameFromBody();
+        }
+      } else {
+        var _logger$info3;
+        const mq = window.matchMedia(`(max-width: ${breakpoint})`);
+        logger === null || logger === void 0 ? void 0 : (_logger$info3 = logger.info) === null || _logger$info3 === void 0 ? void 0 : _logger$info3.call(logger, `MediaQueryProvider: Screensize updated to ${breakpoint}`);
+        if (mq.matches) {
+          var _logger$info4;
+          setIsMobile(true);
+          addClassNameToBody();
+          logger === null || logger === void 0 ? void 0 : (_logger$info4 = logger.info) === null || _logger$info4 === void 0 ? void 0 : _logger$info4.call(logger, 'MediaQueryProvider: isMobile: true');
+        } else {
+          var _logger$info5;
+          setIsMobile(false);
+          removeClassNameFromBody();
+          logger === null || logger === void 0 ? void 0 : (_logger$info5 = logger.info) === null || _logger$info5 === void 0 ? void 0 : _logger$info5.call(logger, 'MediaQueryProvider: isMobile: false');
+        }
+      }
+    };
+    updateSize();
+    window.addEventListener('resize', updateSize);
+    logger === null || logger === void 0 ? void 0 : (_logger$info6 = logger.info) === null || _logger$info6 === void 0 ? void 0 : _logger$info6.call(logger, 'MediaQueryProvider: addEventListener', {
+      updateSize
+    });
+    return () => {
+      var _logger$info7;
+      window.removeEventListener('resize', updateSize);
+      logger === null || logger === void 0 ? void 0 : (_logger$info7 = logger.info) === null || _logger$info7 === void 0 ? void 0 : _logger$info7.call(logger, 'MediaQueryProvider: removeEventListener', {
+        updateSize
+      });
+    };
+  }, [breakpoint]);
+  return /*#__PURE__*/React__default.createElement(MediaQueryContext.Provider, {
+    value: {
+      breakpoint,
+      isMobile
+    }
+  }, children);
+};
+const useMediaQueryContext = () => React__default.useContext(MediaQueryContext);
+
+export { MediaQueryProvider as M, useMediaQueryContext as u };
+//# sourceMappingURL=MediaQueryContext-fbe7af77.js.map

package/MediaQueryContext-fbe7af77.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaQueryContext-fbe7af77.js","sources":["../src/lib/MediaQueryContext.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport type { Logger } from './SendbirdState';\n\nconst DEFAULT_MOBILE = false;\n// const DEFAULT_MOBILE = '768px';\nconst MOBILE_CLASSNAME = 'sendbird--mobile-mode';\n\nconst MediaQueryContext = React.createContext({\n  breakpoint: DEFAULT_MOBILE,\n  isMobile: false,\n});\n\nexport interface MediaQueryProviderProps {\n  children: React.ReactElement;\n  breakpoint?: string | boolean;\n  logger?: Logger;\n}\n\nconst addClassNameToBody = () => {\n  try {\n    const body = document.querySelector('body');\n    body?.classList.add(MOBILE_CLASSNAME);\n  } catch {\n    // noop\n  }\n};\n\nconst removeClassNameFromBody = () => {\n  try {\n    const body = document.querySelector('body');\n    body?.classList.remove(MOBILE_CLASSNAME);\n  } catch {\n    // noop\n  }\n};\n\nconst MediaQueryProvider = (props: MediaQueryProviderProps): React.ReactElement => {\n  const {\n    children,\n    logger,\n  } = props;\n  const breakpoint = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);\n  const [isMobile, setIsMobile] = useState(false);\n  useEffect(() => {\n    const updateSize = () => {\n      if (typeof breakpoint === 'boolean') {\n        setIsMobile(breakpoint);\n        if (breakpoint) {\n          logger?.info?.('MediaQueryProvider: isMobile: true');\n          addClassNameToBody();\n        } else {\n          logger?.info?.('MediaQueryProvider: isMobile: false');\n          removeClassNameFromBody();\n        }\n      } else {\n        const mq = window.matchMedia(`(max-width: ${breakpoint})`);\n        logger?.info?.(`MediaQueryProvider: Screensize updated to ${breakpoint}`);\n        if (mq.matches) {\n          setIsMobile(true);\n          addClassNameToBody();\n          logger?.info?.('MediaQueryProvider: isMobile: true');\n        } else {\n          setIsMobile(false);\n          removeClassNameFromBody();\n          logger?.info?.('MediaQueryProvider: isMobile: false');\n        }\n      }\n    };\n    updateSize();\n    window.addEventListener('resize', updateSize);\n    logger?.info?.('MediaQueryProvider: addEventListener', { updateSize });\n    return () => {\n      window.removeEventListener('resize', updateSize);\n      logger?.info?.('MediaQueryProvider: removeEventListener', { updateSize });\n    };\n  }, [breakpoint]);\n  return (\n    <MediaQueryContext.Provider value={{ breakpoint, isMobile }}>\n      {children}\n    </MediaQueryContext.Provider>\n  );\n};\n\nexport type useMediaQueryContextType = () => ({\n  breakpoint: string | boolean;\n  isMobile: boolean;\n});\n\nconst useMediaQueryContext: useMediaQueryContextType = () => React.useContext(MediaQueryContext);\n\nexport { MediaQueryProvider, useMediaQueryContext };\n"],"names":["DEFAULT_MOBILE","MOBILE_CLASSNAME","MediaQueryContext","React","createContext","breakpoint","isMobile","addClassNameToBody","body","document","querySelector","classList","add","_unused","removeClassNameFromBody","remove","_unused2","MediaQueryProvider","props","children","logger","test","navigator","userAgent","setIsMobile","useState","useEffect","_logger$info6","updateSize","_logger$info","info","call","_logger$info2","_logger$info3","mq","window","matchMedia","matches","_logger$info4","_logger$info5","addEventListener","_logger$info7","removeEventListener","createElement","Provider","value","useMediaQueryContext","useContext"],"mappings":"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"}

package/MemberList-6ff1e7fa.js

@@ -0,0 +1,401 @@
+import React__default, { useState, useContext, useEffect, useCallback } from 'react';
+import Button, { ButtonTypes, ButtonSizes } from './ui/Button.js';
+import IconButton from './ui/IconButton.js';
+import Icon, { IconTypes, IconColors } from './ui/Icon.js';
+import ContextMenu, { MenuItems, MenuItem } from './ui/ContextMenu.js';
+import UserListItem$1 from './ChannelSettings/components/UserListItem.js';
+import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers-0bc76382.js';
+import Modal from './ui/Modal.js';
+import UserListItem from './ui/UserListItem.js';
+import { n as noop } from './utils-388a790e.js';
+import { useChannelSettingsContext } from './ChannelSettings/context.js';
+import useSendbirdStateContext from './useSendbirdStateContext.js';
+import { a as LocalizationContext, u as useLocalization } from './LocalizationContext-57b46f6c.js';
+import { u as uuidv4 } from './uuid-1f1bbd9c.js';
+
+function MembersModal(_ref) {
+  var _state$config;
+  let {
+    onCancel
+  } = _ref;
+  const [members, setMembers] = useState([]);
+  const [memberQuery, setMemberQuery] = useState(null);
+  const {
+    channel
+  } = useChannelSettingsContext();
+  const state = useSendbirdStateContext();
+  const currentUser = state === null || state === void 0 ? void 0 : (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.userId;
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  useEffect(() => {
+    const memberListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
+      limit: 20
+    });
+    memberListQuery.next().then(members => {
+      setMembers(members);
+    });
+    setMemberQuery(memberListQuery);
+  }, []);
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Modal, {
+    isFullScreenOnMobile: true,
+    hideFooter: true,
+    onCancel: () => onCancel(),
+    onSubmit: noop,
+    titleText: stringSet.CHANNEL_SETTING__MEMBERS__SEE_ALL_MEMBERS
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-more-members__popup-scroll",
+    onScroll: e => {
+      const {
+        hasNext
+      } = memberQuery;
+      const target = e.target;
+      const fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
+      if (hasNext && fetchMore) {
+        memberQuery.next().then(o => {
+          setMembers([...members, ...o]);
+        });
+      }
+    }
+  }, members.map(member => /*#__PURE__*/React__default.createElement(UserListItem, {
+    user: member,
+    key: member.userId,
+    currentUser: currentUser,
+    action: _ref2 => {
+      let {
+        parentRef,
+        actionRef
+      } = _ref2;
+      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (channel === null || channel === void 0 ? void 0 : channel.myRole) === 'operator' && /*#__PURE__*/React__default.createElement(ContextMenu, {
+        menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement(IconButton, {
+          className: "sendbird-user-message__more__menu",
+          width: "32px",
+          height: "32px",
+          onClick: toggleDropdown
+        }, /*#__PURE__*/React__default.createElement(Icon, {
+          width: "24px",
+          height: "24px",
+          type: IconTypes.MORE,
+          fillColor: IconColors.CONTENT_INVERSE
+        })),
+        menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems, {
+          parentContainRef: parentRef,
+          parentRef: actionRef // for catching location(x, y) of MenuItems
+          ,
+          closeDropdown: closeDropdown,
+          openLeft: true
+        }, /*#__PURE__*/React__default.createElement(MenuItem, {
+          disable: currentUser === member.userId,
+          onClick: () => {
+            if (member.role !== 'operator') {
+              channel === null || channel === void 0 ? void 0 : channel.addOperators([member.userId]).then(() => {
+                setMembers(members.map(m => {
+                  if (m.userId === member.userId) {
+                    return _objectSpread2(_objectSpread2({}, member), {}, {
+                      role: 'operator'
+                    });
+                  }
+                  return m;
+                }));
+                closeDropdown();
+              });
+            } else {
+              channel === null || channel === void 0 ? void 0 : channel.removeOperators([member.userId]).then(() => {
+                setMembers(members.map(m => {
+                  if (m.userId === member.userId) {
+                    return _objectSpread2(_objectSpread2({}, member), {}, {
+                      role: ''
+                    });
+                  }
+                  return m;
+                }));
+                closeDropdown();
+              });
+            }
+          },
+          dataSbId: `channel_setting_member_context_menu_${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 && channel.isBroadcast) && /*#__PURE__*/React__default.createElement(MenuItem, {
+          onClick: () => {
+            if (member.isMuted) {
+              channel === null || channel === void 0 ? void 0 : channel.unmuteUser(member).then(() => {
+                setMembers(members.map(m => {
+                  if (m.userId === member.userId) {
+                    return _objectSpread2(_objectSpread2({}, member), {}, {
+                      isMuted: false
+                    });
+                  }
+                  return m;
+                }));
+                closeDropdown();
+              });
+            } else {
+              channel === null || channel === void 0 ? void 0 : channel.muteUser(member).then(() => {
+                setMembers(members.map(m => {
+                  if (m.userId === member.userId) {
+                    return _objectSpread2(_objectSpread2({}, member), {}, {
+                      isMuted: true
+                    });
+                  }
+                  return m;
+                }));
+                closeDropdown();
+              });
+            }
+          },
+          dataSbId: `channel_setting_member_context_menu_${member.isMuted ? 'unmute' : 'mute'}`
+        }, member.isMuted ? stringSet.CHANNEL_SETTING__MODERATION__UNMUTE : stringSet.CHANNEL_SETTING__MODERATION__MUTE), /*#__PURE__*/React__default.createElement(MenuItem, {
+          onClick: () => {
+            channel === null || channel === void 0 ? void 0 : channel.banUser(member, -1, '').then(() => {
+              setMembers(members.filter(_ref3 => {
+                let {
+                  userId
+                } = _ref3;
+                return userId !== member.userId;
+              }));
+            });
+          },
+          dataSbId: "channel_setting_member_context_menu_ban"
+        }, stringSet.CHANNEL_SETTING__MODERATION__BAN))
+      }));
+    }
+  })))));
+}
+
+const isAboutSame = (a, b, px) => Math.abs(a - b) <= px;
+function InviteUsers(_ref) {
+  var _state$stores, _state$stores$sdkStor, _state$config;
+  let {
+    onCancel,
+    onSubmit
+  } = _ref;
+  const [members, setMembers] = useState([]);
+  const [selectedMembers, setSelectedMembers] = useState({});
+  const [userQuery, setUserQuery] = useState(null);
+  const state = useSendbirdStateContext();
+  const sdk = state === null || state === void 0 ? void 0 : (_state$stores = state.stores) === null || _state$stores === void 0 ? void 0 : (_state$stores$sdkStor = _state$stores.sdkStore) === null || _state$stores$sdkStor === void 0 ? void 0 : _state$stores$sdkStor.sdk;
+  const globalUserListQuery = state === null || state === void 0 ? void 0 : (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.userListQuery;
+  const {
+    channel,
+    overrideInviteUser,
+    queries
+  } = useChannelSettingsContext();
+  const userFilledQuery = _objectSpread2({}, queries === null || queries === void 0 ? void 0 : queries.applicationUserListQuery);
+  const {
+    stringSet
+  } = useLocalization();
+  useEffect(() => {
+    const userListQuery = globalUserListQuery ? globalUserListQuery() : sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery(userFilledQuery);
+    if (userListQuery !== null && userListQuery !== void 0 && userListQuery.next) {
+      userListQuery.next().then(members => {
+        setMembers(members);
+      });
+      setUserQuery(userListQuery);
+    }
+  }, [sdk]);
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Modal, {
+    isFullScreenOnMobile: true,
+    disabled: Object.keys(selectedMembers).length === 0,
+    submitText: stringSet.BUTTON__INVITE,
+    type: ButtonTypes.PRIMARY,
+    onCancel: () => onCancel(),
+    onSubmit: () => {
+      const members = Object.keys(selectedMembers).filter(m => selectedMembers[m]);
+      if (typeof overrideInviteUser === 'function') {
+        overrideInviteUser({
+          users: members,
+          onClose: onCancel,
+          channel
+        });
+        return;
+      }
+      channel === null || channel === void 0 ? void 0 : channel.inviteWithUserIds(members).then(() => {
+        onSubmit(members);
+      });
+    },
+    titleText: stringSet.CHANNEL_SETTING__MEMBERS__SELECT_TITLE
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-more-members__popup-scroll",
+    onScroll: e => {
+      const {
+        hasNext
+      } = userQuery;
+      const target = e.target;
+      const fetchMore = isAboutSame(target.clientHeight + target.scrollTop, target.scrollHeight, 20);
+      if (hasNext && fetchMore) {
+        userQuery.next().then(users => {
+          setMembers([...members, ...users]);
+        });
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-more-members__popup-scroll__inner"
+  }, members.map(member => {
+    var _channel$members;
+    const isJoinedMember = channel === null || channel === void 0 ? void 0 : (_channel$members = channel.members) === null || _channel$members === void 0 ? void 0 : _channel$members.some(_ref2 => {
+      let {
+        userId
+      } = _ref2;
+      return userId === (member === null || member === void 0 ? void 0 : member.userId);
+    });
+    return /*#__PURE__*/React__default.createElement(UserListItem, {
+      checkBox: true,
+      checked: isJoinedMember || selectedMembers[member.userId],
+      disabled: isJoinedMember,
+      onChange: event => {
+        const modifiedSelectedMembers = _objectSpread2(_objectSpread2({}, selectedMembers), {}, {
+          [event.target.id]: event.target.checked
+        });
+        if (!event.target.checked) {
+          delete modifiedSelectedMembers[event.target.id];
+        }
+        setSelectedMembers(modifiedSelectedMembers);
+      },
+      user: member,
+      key: member.userId
+    });
+  })))));
+}
+
+const MemberList = () => {
+  var _state$stores, _state$stores$sdkStor, _state$config;
+  const [members, setMembers] = useState([]);
+  const [hasNext, setHasNext] = useState(false);
+  const [showAllMembers, setShowAllMembers] = useState(false);
+  const [showInviteUsers, setShowInviteUsers] = useState(false);
+  const state = useSendbirdStateContext();
+  const {
+    channel,
+    setChannelUpdateId
+  } = useChannelSettingsContext();
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  const sdk = state === null || state === void 0 ? void 0 : (_state$stores = state.stores) === null || _state$stores === void 0 ? void 0 : (_state$stores$sdkStor = _state$stores.sdkStore) === null || _state$stores$sdkStor === void 0 ? void 0 : _state$stores$sdkStor.sdk;
+  const userId = state === null || state === void 0 ? void 0 : (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.userId;
+  useEffect(() => {
+    if (!channel) {
+      setMembers([]);
+      return;
+    }
+    const memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
+      limit: 10
+    });
+    memberUserListQuery.next().then(members => {
+      setMembers(members);
+      setHasNext(memberUserListQuery.hasNext);
+    });
+  }, [channel]);
+  const refreshList = useCallback(() => {
+    if (!channel) {
+      setMembers([]);
+      return;
+    }
+    const memberUserListQuery = channel === null || channel === void 0 ? void 0 : channel.createMemberListQuery({
+      limit: 10
+    });
+    memberUserListQuery.next().then(members => {
+      setMembers(members);
+      setHasNext(memberUserListQuery.hasNext);
+      setChannelUpdateId(uuidv4());
+    });
+  }, [channel]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-channel-settings-member-list sendbird-accordion"
+  }, members.map(member => /*#__PURE__*/React__default.createElement(UserListItem$1, {
+    key: member.userId,
+    user: member,
+    currentUser: sdk.currentUser.userId,
+    action: (channel === null || channel === void 0 ? void 0 : channel.myRole) === 'operator' && userId !== member.userId ? _ref => {
+      let {
+        actionRef,
+        parentRef
+      } = _ref;
+      return /*#__PURE__*/React__default.createElement(ContextMenu, {
+        menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement(IconButton, {
+          className: "sendbird-user-message__more__menu",
+          width: "32px",
+          height: "32px",
+          onClick: toggleDropdown
+        }, /*#__PURE__*/React__default.createElement(Icon, {
+          width: "24px",
+          height: "24px",
+          type: IconTypes.MORE,
+          fillColor: IconColors.CONTENT_INVERSE
+        })),
+        menuItems: closeDropdown => /*#__PURE__*/React__default.createElement(MenuItems, {
+          parentContainRef: parentRef,
+          parentRef: actionRef // for catching location(x, y) of MenuItems
+          ,
+          closeDropdown: closeDropdown,
+          openLeft: true
+        }, /*#__PURE__*/React__default.createElement(MenuItem, {
+          onClick: () => {
+            if (member.role !== 'operator') {
+              channel === null || channel === void 0 ? void 0 : channel.addOperators([member.userId]).then(() => {
+                refreshList();
+                closeDropdown();
+              });
+            } else {
+              channel === null || channel === void 0 ? void 0 : channel.removeOperators([member.userId]).then(() => {
+                refreshList();
+                closeDropdown();
+              });
+            }
+          },
+          dataSbId: `channel_setting_member_context_menu_${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 && channel.isBroadcast) && /*#__PURE__*/React__default.createElement(MenuItem, {
+          onClick: () => {
+            if (member.isMuted) {
+              channel === null || channel === void 0 ? void 0 : channel.unmuteUser(member).then(() => {
+                refreshList();
+                closeDropdown();
+              });
+            } else {
+              channel === null || channel === void 0 ? void 0 : channel.muteUser(member).then(() => {
+                refreshList();
+                closeDropdown();
+              });
+            }
+          },
+          dataSbId: `channel_setting_member_context_menu_${member.isMuted ? 'unmute' : 'mute'}`
+        }, member.isMuted ? stringSet.CHANNEL_SETTING__MODERATION__UNMUTE : stringSet.CHANNEL_SETTING__MODERATION__MUTE), /*#__PURE__*/React__default.createElement(MenuItem, {
+          onClick: () => {
+            channel === null || channel === void 0 ? void 0 : channel.banUser(member, -1, '').then(() => {
+              refreshList();
+              closeDropdown();
+            });
+          },
+          dataSbId: "channel_setting_member_context_menu_ban"
+        }, stringSet.CHANNEL_SETTING__MODERATION__BAN))
+      });
+    } : null
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-channel-settings-accordion__footer"
+  }, hasNext && /*#__PURE__*/React__default.createElement(Button, {
+    type: ButtonTypes.SECONDARY,
+    size: ButtonSizes.SMALL,
+    onClick: () => setShowAllMembers(true)
+  }, stringSet.CHANNEL_SETTING__MEMBERS__SEE_ALL_MEMBERS), /*#__PURE__*/React__default.createElement(Button, {
+    type: ButtonTypes.SECONDARY,
+    size: ButtonSizes.SMALL,
+    onClick: () => setShowInviteUsers(true)
+  }, stringSet.CHANNEL_SETTING__MEMBERS__INVITE_MEMBER)), showAllMembers && /*#__PURE__*/React__default.createElement(MembersModal, {
+    onCancel: () => {
+      setShowAllMembers(false);
+      refreshList();
+    }
+  }), showInviteUsers && /*#__PURE__*/React__default.createElement(InviteUsers, {
+    onSubmit: () => {
+      setShowInviteUsers(false);
+      refreshList();
+    },
+    onCancel: () => setShowInviteUsers(false)
+  }));
+};
+
+export { MemberList as M };
+//# sourceMappingURL=MemberList-6ff1e7fa.js.map