@sendbird/uikit-react 3.4.0-rc.1 → 3.4.0-rc.2

package/context-2f7024fc.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { n as noop } from './utils-aae15fda.js';
+
+var Context = /*#__PURE__*/React__default.createContext({
+  opened: '',
+  setOpened: noop
+});
+var Consumer = Context.Consumer;
+var Provider = Context.Provider;
+
+export { Consumer as C, Provider as P };
+//# sourceMappingURL=context-2f7024fc.js.map

package/context-2f7024fc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-2f7024fc.js","sources":["../src/ui/Accordion/context.ts"],"sourcesContent":["import React from 'react';\n\nimport { noop } from '../../utils/utils';\n\ninterface ContextValue {\n  setOpened(accordion: string): void;\n  opened: string;\n}\n\nconst Context = React.createContext<ContextValue>({\n  opened: '', // mock default value\n  setOpened: noop,\n});\n\nexport const Consumer = Context.Consumer;\nexport const Provider = Context.Provider;\n"],"names":["Context","React","createContext","opened","setOpened","noop","Consumer","Provider"],"mappings":";;;AASA,IAAMA,OAAO,gBAAGC,cAAK,CAACC,aAAN,CAAkC;AAChDC,EAAAA,MAAM,EAAE,EADwC;AAEhDC,EAAAA,SAAS,EAAEC,IAAAA;AAFqC,CAAlC,CAAhB,CAAA;AAKaC,IAAAA,QAAQ,GAAGN,OAAO,CAACM,SAAzB;AACMC,IAAAA,QAAQ,GAAGP,OAAO,CAACO;;;;"}

package/index-00eb27a6.js

@@ -0,0 +1,66 @@
+import { r as requiredArgs, t as toDate } from './index-6ccea9a6.js';
+
+/**
+ * @name startOfDay
+ * @category Day Helpers
+ * @summary Return the start of a day for the given date.
+ *
+ * @description
+ * Return the start of a day for the given date.
+ * The result will be in the local timezone.
+ *
+ * @param {Date|Number} date - the original date
+ * @returns {Date} the start of a day
+ * @throws {TypeError} 1 argument required
+ *
+ * @example
+ * // The start of a day for 2 September 2014 11:55:00:
+ * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))
+ * //=> Tue Sep 02 2014 00:00:00
+ */
+
+function startOfDay(dirtyDate) {
+  requiredArgs(1, arguments);
+  var date = toDate(dirtyDate);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
+/**
+ * @name isSameDay
+ * @category Day Helpers
+ * @summary Are the given dates in the same day (and year and month)?
+ *
+ * @description
+ * Are the given dates in the same day (and year and month)?
+ *
+ * @param {Date|Number} dateLeft - the first date to check
+ * @param {Date|Number} dateRight - the second date to check
+ * @returns {Boolean} the dates are in the same day (and year and month)
+ * @throws {TypeError} 2 arguments required
+ *
+ * @example
+ * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))
+ * //=> true
+ *
+ * @example
+ * // Are 4 September and 4 October in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))
+ * //=> false
+ *
+ * @example
+ * // Are 4 September, 2014 and 4 September, 2015 in the same day?
+ * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))
+ * //=> false
+ */
+
+function isSameDay(dirtyDateLeft, dirtyDateRight) {
+  requiredArgs(2, arguments);
+  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);
+  var dateRightStartOfDay = startOfDay(dirtyDateRight);
+  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();
+}
+
+export { isSameDay as i };
+//# sourceMappingURL=index-00eb27a6.js.map

package/index-00eb27a6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-00eb27a6.js","sources":["../node_modules/date-fns/esm/startOfDay/index.js","../node_modules/date-fns/esm/isSameDay/index.js"],"sourcesContent":["import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name startOfDay\n * @category Day Helpers\n * @summary Return the start of a day for the given date.\n *\n * @description\n * Return the start of a day for the given date.\n * The result will be in the local timezone.\n *\n * @param {Date|Number} date - the original date\n * @returns {Date} the start of a day\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // The start of a day for 2 September 2014 11:55:00:\n * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0))\n * //=> Tue Sep 02 2014 00:00:00\n */\n\nexport default function startOfDay(dirtyDate) {\n  requiredArgs(1, arguments);\n  var date = toDate(dirtyDate);\n  date.setHours(0, 0, 0, 0);\n  return date;\n}","import startOfDay from \"../startOfDay/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isSameDay\n * @category Day Helpers\n * @summary Are the given dates in the same day (and year and month)?\n *\n * @description\n * Are the given dates in the same day (and year and month)?\n *\n * @param {Date|Number} dateLeft - the first date to check\n * @param {Date|Number} dateRight - the second date to check\n * @returns {Boolean} the dates are in the same day (and year and month)\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0))\n * //=> true\n *\n * @example\n * // Are 4 September and 4 October in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4))\n * //=> false\n *\n * @example\n * // Are 4 September, 2014 and 4 September, 2015 in the same day?\n * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4))\n * //=> false\n */\n\nexport default function isSameDay(dirtyDateLeft, dirtyDateRight) {\n  requiredArgs(2, arguments);\n  var dateLeftStartOfDay = startOfDay(dirtyDateLeft);\n  var dateRightStartOfDay = startOfDay(dirtyDateRight);\n  return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();\n}"],"names":[],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,UAAU,CAAC,SAAS,EAAE;AAC9C,EAAE,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AAC/B,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AAC5B,EAAE,OAAO,IAAI,CAAC;AACd;;ACxBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS,SAAS,CAAC,aAAa,EAAE,cAAc,EAAE;AACjE,EAAE,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7B,EAAE,IAAI,kBAAkB,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;AACrD,EAAE,IAAI,mBAAmB,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;AACvD,EAAE,OAAO,kBAAkB,CAAC,OAAO,EAAE,KAAK,mBAAmB,CAAC,OAAO,EAAE,CAAC;AACxE;;;;"}

package/index-1c547263.js

@@ -0,0 +1,172 @@
+import React__default, { useMemo, useRef, useContext, useState } from 'react';
+import Modal from './ui/Modal.js';
+import { a as LocalizationContext } from './LocalizationContext-a6aa8be8.js';
+import useSendbirdStateContext from './useSendbirdStateContext.js';
+import Input, { InputLabel } from './ui/Input.js';
+import Avatar from './ui/Avatar.js';
+import Icon, { IconTypes } from './ui/Icon.js';
+import { ButtonTypes } from './ui/Button.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from './index-67c5e94c.js';
+import TextButton from './ui/TextButton.js';
+import { n as noop } from './utils-aae15fda.js';
+import { U as UPDATE_USER_INFO } from './actionTypes-3245f646.js';
+
+var EditUserProfileProviderContext = /*#__PURE__*/React__default.createContext(undefined);
+
+var EditUserProfileProvider = function (props) {
+  var children = props.children,
+      onEditProfile = props.onEditProfile,
+      onCancel = props.onCancel,
+      onThemeChange = props.onThemeChange;
+  var value = useMemo(function () {
+    return {
+      onEditProfile: onEditProfile,
+      onCancel: onCancel,
+      onThemeChange: onThemeChange
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement(EditUserProfileProviderContext.Provider, {
+    value: value
+  }, children);
+};
+
+var useEditUserProfileContext = function () {
+  return React__default.useContext(EditUserProfileProviderContext);
+};
+
+function EditUserProfile() {
+  var _a, _b, _c, _d, _e, _f, _g;
+
+  var editProfileProps = useEditUserProfileContext();
+  var store = useSendbirdStateContext();
+  var hiddenInputRef = useRef(null);
+  var inputRef = useRef(null);
+  var formRef = useRef(null);
+  var stringSet = useContext(LocalizationContext).stringSet;
+
+  var _h = useState(null),
+      currentImg = _h[0],
+      setCurrentImg = _h[1];
+
+  var _j = useState(null),
+      newFile = _j[0],
+      setNewFile = _j[1];
+
+  var onEditProfile = editProfileProps.onEditProfile,
+      onCancel = editProfileProps.onCancel,
+      onThemeChange = editProfileProps.onThemeChange;
+  var theme = ((_a = store === null || store === void 0 ? void 0 : store.config) === null || _a === void 0 ? void 0 : _a.theme) || 'light';
+  var changeTheme = ((_b = store === null || store === void 0 ? void 0 : store.config) === null || _b === void 0 ? void 0 : _b.setCurrenttheme) || noop;
+  var user = (_d = (_c = store === null || store === void 0 ? void 0 : store.stores) === null || _c === void 0 ? void 0 : _c.userStore) === null || _d === void 0 ? void 0 : _d.user;
+  var sdk = (_f = (_e = store === null || store === void 0 ? void 0 : store.stores) === null || _e === void 0 ? void 0 : _e.sdkStore) === null || _f === void 0 ? void 0 : _f.sdk;
+  var userDispatcher = (_g = store === null || store === void 0 ? void 0 : store.dispatchers) === null || _g === void 0 ? void 0 : _g.userDispatcher;
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    titleText: stringSet.EDIT_PROFILE__TITLE,
+    submitText: stringSet.BUTTON__SAVE,
+    type: ButtonTypes.PRIMARY,
+    onCancel: onCancel,
+    isFullScreenOnMobile: true,
+    onSubmit: function () {
+      var _a;
+
+      if ((user === null || user === void 0 ? void 0 : user.nickname) !== '' && !inputRef.current.value) {
+        if (formRef.current.reportValidity) {
+          // might not work in explorer
+          formRef.current.reportValidity();
+        }
+
+        return;
+      }
+
+      sdk === null || sdk === void 0 ? void 0 : sdk.updateCurrentUserInfo({
+        nickname: (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.value,
+        profileImage: newFile
+      }).then(function (updatedUser) {
+        userDispatcher({
+          type: UPDATE_USER_INFO,
+          payload: updatedUser
+        });
+
+        if (onEditProfile && typeof onEditProfile === 'function') {
+          onEditProfile(updatedUser);
+        }
+      });
+    }
+  }, /*#__PURE__*/React__default.createElement("form", {
+    className: "sendbird-edit-user-profile",
+    ref: formRef,
+    onSubmit: function (e) {
+      e.preventDefault();
+    }
+  }, /*#__PURE__*/React__default.createElement("section", {
+    className: "sendbird-edit-user-profile__img"
+  }, /*#__PURE__*/React__default.createElement(InputLabel, null, stringSet.EDIT_PROFILE__IMAGE_LABEL), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-edit-user-profile__img__avatar"
+  }, /*#__PURE__*/React__default.createElement(Avatar, {
+    width: "80px",
+    height: "80px",
+    src: currentImg || (user === null || user === void 0 ? void 0 : user.profileUrl)
+  })), /*#__PURE__*/React__default.createElement("input", {
+    ref: hiddenInputRef,
+    type: "file",
+    accept: "image/gif, image/jpeg, image/png",
+    style: {
+      display: 'none'
+    },
+    onChange: function (e) {
+      setCurrentImg(URL.createObjectURL(e.target.files[0]));
+      setNewFile(e.target.files[0]);
+      hiddenInputRef.current.value = '';
+    }
+  }), /*#__PURE__*/React__default.createElement(TextButton, {
+    className: "sendbird-edit-user-profile__img__avatar-button",
+    disableUnderline: true,
+    onClick: function () {
+      return hiddenInputRef.current.click();
+    }
+  }, /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.BUTTON_1,
+    color: LabelColors.PRIMARY
+  }, stringSet.EDIT_PROFILE__IMAGE_UPLOAD))), /*#__PURE__*/React__default.createElement("section", {
+    className: "sendbird-edit-user-profile__name"
+  }, /*#__PURE__*/React__default.createElement(InputLabel, null, stringSet.EDIT_PROFILE__NICKNAME_LABEL), /*#__PURE__*/React__default.createElement(Input, {
+    required: (user === null || user === void 0 ? void 0 : user.nickname) !== '',
+    name: "sendbird-edit-user-profile__name__input",
+    ref: inputRef,
+    value: user === null || user === void 0 ? void 0 : user.nickname,
+    placeHolder: stringSet.EDIT_PROFILE__NICKNAME_PLACEHOLDER
+  })), /*#__PURE__*/React__default.createElement("section", {
+    className: "sendbird-edit-user-profile__userid"
+  }, /*#__PURE__*/React__default.createElement(InputLabel, null, stringSet.EDIT_PROFILE__USERID_LABEL), /*#__PURE__*/React__default.createElement(Input, {
+    disabled: true,
+    name: "sendbird-edit-user-profile__userid__input",
+    value: user === null || user === void 0 ? void 0 : user.userId
+  })), /*#__PURE__*/React__default.createElement("section", {
+    className: "sendbird-edit-user-profile__theme"
+  }, /*#__PURE__*/React__default.createElement(InputLabel, null, stringSet.EDIT_PROFILE__THEME_LABEL), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-edit-user-profile__theme__theme-icon"
+  }, theme === 'dark' ? /*#__PURE__*/React__default.createElement(Icon, {
+    onClick: function () {
+      changeTheme('light');
+      onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange('light'); // if (onThemeChange && typeof onThemeChange === 'function') {
+      //   onThemeChange('light');
+      // }
+    },
+    type: IconTypes.TOGGLE_ON,
+    width: 44,
+    height: 24
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
+    onClick: function () {
+      changeTheme('dark');
+      onThemeChange === null || onThemeChange === void 0 ? void 0 : onThemeChange('dark'); // if (onThemeChange && typeof onThemeChange === 'function') {
+      //   onThemeChange('dark');
+      // }
+    },
+    type: IconTypes.TOGGLE_OFF,
+    width: 44,
+    height: 24
+  })))));
+}
+
+export { EditUserProfileProvider as E, EditUserProfile as a };
+//# sourceMappingURL=index-1c547263.js.map

package/index-1c547263.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-1c547263.js","sources":["../src/smart-components/EditUserProfile/context/EditUserProfIleProvider.tsx","../src/smart-components/EditUserProfile/components/EditUserProfileUI/index.tsx"],"sourcesContent":["import type { User } from '@sendbird/chat';\nimport React, { useMemo } from 'react';\n\nconst EditUserProfileProviderContext = React.createContext(undefined);\n\nexport interface EditUserProfileProps {\n  children?: React.ReactElement;\n  onCancel?(): void;\n  onThemeChange?(theme: string): void;\n  onEditProfile?(updatedUser: User): void;\n}\n\nexport interface EditUserProfileProviderInterface {\n  onCancel?(): void;\n  onThemeChange?(theme: string): void;\n  onEditProfile?(updatedUser: User): void;\n}\n\nconst EditUserProfileProvider: React.FC<EditUserProfileProps> = (props: EditUserProfileProps) => {\n  const {\n    children,\n    onEditProfile,\n    onCancel,\n    onThemeChange,\n  } = props;\n\n  const value = useMemo(() => {\n    return {\n      onEditProfile,\n      onCancel,\n      onThemeChange,\n    };\n  }, []);\n\n  return (\n    <EditUserProfileProviderContext.Provider value={value}>\n      {children}\n    </EditUserProfileProviderContext.Provider>\n  );\n}\n\nconst useEditUserProfileContext = (): EditUserProfileProviderInterface => (\n  React.useContext(EditUserProfileProviderContext)\n);\n\nexport {\n  EditUserProfileProvider,\n  useEditUserProfileContext,\n};\n","import './edit-user-profile.scss';\n\nimport React, {\n  ReactElement,\n  useRef,\n  useState,\n  useContext,\n} from 'react';\nimport { useEditUserProfileContext } from '../../context/EditUserProfIleProvider';\n\nimport Modal from '../../../../ui/Modal';\nimport { LocalizationContext } from '../../../../lib/LocalizationContext';\nimport useSendbirdStateContext from '../../../../hooks/useSendbirdStateContext';\n\nimport Input, { InputLabel } from '../../../../ui/Input';\nimport Avatar from '../../../../ui/Avatar';\nimport Icon, { IconTypes } from '../../../../ui/Icon';\nimport { ButtonTypes } from '../../../../ui/Button';\nimport Label, { LabelColors, LabelTypography } from '../../../../ui/Label';\nimport TextButton from '../../../../ui/TextButton';\nimport { noop } from '../../../../utils/utils';\nimport * as userActions from '../../../../lib/dux/user/actionTypes';\n\nexport default function EditUserProfile(): ReactElement {\n  const editProfileProps = useEditUserProfileContext();\n  const store = useSendbirdStateContext();\n  const hiddenInputRef = useRef(null);\n  const inputRef = useRef(null);\n  const formRef = useRef(null);\n  const { stringSet } = useContext(LocalizationContext);\n  const [currentImg, setCurrentImg] = useState(null);\n  const [newFile, setNewFile] = useState(null);\n\n  const {\n    onEditProfile,\n    onCancel,\n    onThemeChange,\n  } = editProfileProps;\n\n  const theme = store?.config?.theme || 'light';\n  const changeTheme = store?.config?.setCurrenttheme || noop;\n  const user = store?.stores?.userStore?.user;\n  const sdk = store?.stores?.sdkStore?.sdk;\n  const userDispatcher = store?.dispatchers?.userDispatcher;\n\n  return (\n    <Modal\n      titleText={stringSet.EDIT_PROFILE__TITLE}\n      submitText={stringSet.BUTTON__SAVE}\n      type={ButtonTypes.PRIMARY}\n      onCancel={onCancel}\n      isFullScreenOnMobile\n      onSubmit={() => {\n        if (user?.nickname !== '' && !inputRef.current.value) {\n          if (formRef.current.reportValidity) { // might not work in explorer\n            formRef.current.reportValidity();\n          }\n          return;\n        }\n        sdk?.updateCurrentUserInfo({\n          nickname: inputRef?.current?.value,\n          profileImage: newFile,\n        }).then((updatedUser) => {\n          userDispatcher({ type: userActions.UPDATE_USER_INFO, payload: updatedUser });\n          if (onEditProfile && typeof onEditProfile === 'function') {\n            onEditProfile(updatedUser);\n          }\n        });\n      }}\n    >\n      <form\n        className=\"sendbird-edit-user-profile\"\n        ref={formRef}\n        onSubmit={(e) => { e.preventDefault(); }}\n      >\n        <section className=\"sendbird-edit-user-profile__img\">\n          <InputLabel>\n            {stringSet.EDIT_PROFILE__IMAGE_LABEL}\n          </InputLabel>\n          <div className=\"sendbird-edit-user-profile__img__avatar\">\n            <Avatar\n              width=\"80px\"\n              height=\"80px\"\n              src={currentImg || user?.profileUrl}\n            />\n          </div>\n          <input\n            ref={hiddenInputRef}\n            type=\"file\"\n            accept=\"image/gif, image/jpeg, image/png\"\n            style={{ display: 'none' }}\n            onChange={(e) => {\n              setCurrentImg(URL.createObjectURL(e.target.files[0]));\n              setNewFile(e.target.files[0]);\n              hiddenInputRef.current.value = '';\n            }}\n          />\n          <TextButton\n            className=\"sendbird-edit-user-profile__img__avatar-button\"\n            disableUnderline\n            onClick={() => hiddenInputRef.current.click()}\n          >\n            <Label type={LabelTypography.BUTTON_1} color={LabelColors.PRIMARY}>\n              {stringSet.EDIT_PROFILE__IMAGE_UPLOAD}\n            </Label>\n          </TextButton>\n        </section>\n        <section className=\"sendbird-edit-user-profile__name\">\n          <InputLabel>\n            {stringSet.EDIT_PROFILE__NICKNAME_LABEL}\n          </InputLabel>\n          <Input\n            required={user?.nickname !== ''}\n            name=\"sendbird-edit-user-profile__name__input\"\n            ref={inputRef}\n            value={user?.nickname}\n            placeHolder={stringSet.EDIT_PROFILE__NICKNAME_PLACEHOLDER}\n          />\n        </section>\n        <section className=\"sendbird-edit-user-profile__userid\">\n          <InputLabel>\n            {/*  userID */}\n            {stringSet.EDIT_PROFILE__USERID_LABEL}\n          </InputLabel>\n          <Input\n            disabled\n            name=\"sendbird-edit-user-profile__userid__input\"\n            value={user?.userId}\n          />\n        </section>\n        <section className=\"sendbird-edit-user-profile__theme\">\n          <InputLabel>\n            {stringSet.EDIT_PROFILE__THEME_LABEL}\n          </InputLabel>\n          <div className=\"sendbird-edit-user-profile__theme__theme-icon\">\n            {\n              theme === 'dark'\n                ? (\n                  <Icon\n                    onClick={() => {\n                      changeTheme('light');\n                      onThemeChange?.('light');\n                      // if (onThemeChange && typeof onThemeChange === 'function') {\n                      //   onThemeChange('light');\n                      // }\n                    }}\n                    type={IconTypes.TOGGLE_ON}\n                    width={44}\n                    height={24}\n                  />\n                )\n                : (\n                  <Icon\n                    onClick={() => {\n                      changeTheme('dark');\n                      onThemeChange?.('dark');\n                      // if (onThemeChange && typeof onThemeChange === 'function') {\n                      //   onThemeChange('dark');\n                      // }\n                    }}\n                    type={IconTypes.TOGGLE_OFF}\n                    width={44}\n                    height={24}\n                  />\n                )\n            }\n          </div>\n        </section>\n      </form>\n    </Modal>\n  );\n}\n\n"],"names":["EditUserProfileProviderContext","React","createContext","undefined","EditUserProfileProvider","props","children","onEditProfile","onCancel","onThemeChange","value","useMemo","useEditUserProfileContext","useContext","EditUserProfile","editProfileProps","store","useSendbirdStateContext","hiddenInputRef","useRef","inputRef","formRef","stringSet","LocalizationContext","_h","useState","currentImg","setCurrentImg","_j","newFile","setNewFile","theme","_a","config","changeTheme","_b","setCurrenttheme","noop","user","_d","_c","stores","userStore","sdk","_f","_e","sdkStore","userDispatcher","_g","dispatchers","EDIT_PROFILE__TITLE","BUTTON__SAVE","ButtonTypes","PRIMARY","nickname","current","reportValidity","updateCurrentUserInfo","profileImage","then","updatedUser","type","userActions","payload","e","preventDefault","EDIT_PROFILE__IMAGE_LABEL","profileUrl","display","URL","createObjectURL","target","files","click","LabelTypography","BUTTON_1","LabelColors","EDIT_PROFILE__IMAGE_UPLOAD","EDIT_PROFILE__NICKNAME_LABEL","EDIT_PROFILE__NICKNAME_PLACEHOLDER","EDIT_PROFILE__USERID_LABEL","userId","EDIT_PROFILE__THEME_LABEL","IconTypes","TOGGLE_ON","TOGGLE_OFF"],"mappings":";;;;;;;;;;;;;AAGA,IAAMA,8BAA8B,gBAAGC,cAAK,CAACC,aAAN,CAAoBC,SAApB,CAAvC,CAAA;;AAeA,IAAMC,uBAAuB,GAAmC,UAACC,KAAD,EAA4B;AAExF,EAAA,IAAAC,QAAQ,GAIND,KAAK,SAJP;AAAA,MACAE,aAAa,GAGXF,KAAK,CAAAE,aAJP;AAAA,MAEAC,QAAQ,GAENH,KAAK,CAFCG,QAFR;AAAA,MAGAC,aAAa,GACXJ,KAAK,cAJP,CAAA;AAMF,EAAA,IAAMK,KAAK,GAAGC,OAAO,CAAC,YAAA;IACpB,OAAO;AACLJ,MAAAA,aAAa,EAAAA,aADR;AAELC,MAAAA,QAAQ,EAAAA,QAFH;AAGLC,MAAAA,aAAa,EAAAA,aAAAA;KAHf,CAAA;GADmB,EAMlB,EANkB,CAArB,CAAA;EAQA,oBACER,cAAA,CAAA,aAAA,CAAC,8BAAD,CAAgC,QAAhC,EAAA;AAAyC,IAAA,KAAK,EAAES,KAAAA;AAAhD,GAAA,EACGJ,QADH,CADF,CAAA;AAKD,EArBD;;AAuBA,IAAMM,yBAAyB,GAAG,YAAwC;AAAA,EAAA,OACxEX,cAAK,CAACY,UAAN,CAAiBb,8BAAjB,CADwE,CAAA;AAEzE,CAFD;;AClBc,SAAUc,eAAV,GAAyB;;;EACrC,IAAMC,gBAAgB,GAAGH,yBAAyB,EAAlD,CAAA;EACA,IAAMI,KAAK,GAAGC,uBAAuB,EAArC,CAAA;AACA,EAAA,IAAMC,cAAc,GAAGC,MAAM,CAAC,IAAD,CAA7B,CAAA;AACA,EAAA,IAAMC,QAAQ,GAAGD,MAAM,CAAC,IAAD,CAAvB,CAAA;AACA,EAAA,IAAME,OAAO,GAAGF,MAAM,CAAC,IAAD,CAAtB,CAAA;AACQ,EAAA,IAAAG,SAAS,GAAKT,UAAU,CAACU,mBAAD,CAAV,UAAd,CAAA;;AACF,EAAA,IAAAC,EAAA,GAA8BC,QAAQ,CAAC,IAAD,CAAtC;AAAA,MAACC,UAAU,GAAAF,EAAA,CAAA,CAAA,CAAX;AAAA,MAAaG,aAAa,GAAAH,EAAA,CAAA,CAAA,CAA1B,CAAA;;AACA,EAAA,IAAAI,EAAA,GAAwBH,QAAQ,CAAC,IAAD,CAAhC;AAAA,MAACI,OAAO,GAAAD,EAAA,CAAA,CAAA,CAAR;AAAA,MAAUE,UAAU,GAAAF,EAAA,CAAA,CAAA,CAApB,CAAA;;AAGJ,EAAA,IAAArB,aAAa,GAGXQ,gBAAgB,CAAAR,aAHlB;AAAA,MACAC,QAAQ,GAENO,gBAAgB,CAAAP,QAHlB;AAAA,MAEAC,aAAa,GACXM,gBAAgB,cAHlB,CAAA;AAKF,EAAA,IAAMgB,KAAK,GAAG,CAAA,CAAAC,EAAA,GAAAhB,KAAK,KAAL,IAAA,IAAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,KAAK,CAAEiB,MAAP,MAAa,IAAb,IAAaD,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAaA,EAAA,CAAED,KAAf,KAAwB,OAAtC,CAAA;AACA,EAAA,IAAMG,WAAW,GAAG,CAAA,CAAAC,EAAA,GAAAnB,KAAK,KAAL,IAAA,IAAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,KAAK,CAAEiB,MAAP,MAAa,IAAb,IAAaE,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAaA,EAAA,CAAEC,eAAf,KAAkCC,IAAtD,CAAA;EACA,IAAMC,IAAI,GAAG,CAAAC,EAAA,GAAA,CAAAC,EAAA,GAAAxB,KAAK,KAAL,IAAA,IAAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,KAAK,CAAEyB,MAAP,MAAa,IAAb,IAAaD,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAaA,EAAA,CAAEE,SAAf,MAAwB,IAAxB,IAAwBH,EAAA,KAAA,KAAA,CAAxB,GAAwB,KAAA,CAAxB,GAAwBA,EAAA,CAAED,IAAvC,CAAA;EACA,IAAMK,GAAG,GAAG,CAAAC,EAAA,GAAA,CAAAC,EAAA,GAAA7B,KAAK,KAAL,IAAA,IAAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,KAAK,CAAEyB,MAAP,MAAa,IAAb,IAAaI,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAaA,EAAA,CAAEC,QAAf,MAAuB,IAAvB,IAAuBF,EAAA,KAAA,KAAA,CAAvB,GAAuB,KAAA,CAAvB,GAAuBA,EAAA,CAAED,GAArC,CAAA;AACA,EAAA,IAAMI,cAAc,GAAG,CAAAC,EAAA,GAAAhC,KAAK,KAAL,IAAA,IAAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,KAAK,CAAEiC,WAAP,MAAoB,IAApB,IAAoBD,EAAA,KAAA,KAAA,CAApB,GAAoB,KAAA,CAApB,GAAoBA,EAAA,CAAAD,cAA3C,CAAA;AAEA,EAAA,oBACE9C,6BAAC,KAAD,EAAA;IACE,SAAS,EAAEqB,SAAS,CAAC4B,mBADvB;IAEE,UAAU,EAAE5B,SAAS,CAAC6B,YAFxB;IAGE,IAAI,EAAEC,WAAW,CAACC,OAHpB;AAIE,IAAA,QAAQ,EAAE7C,QAJZ;AAKE,IAAA,oBAAoB,EALtB,IAAA;AAME,IAAA,QAAQ,EAAE,YAAA;;;MACR,IAAI,CAAA8B,IAAI,KAAA,IAAJ,IAAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAAA,IAAI,CAAEgB,QAAN,MAAmB,EAAnB,IAAyB,CAAClC,QAAQ,CAACmC,OAAT,CAAiB7C,KAA/C,EAAsD;AACpD,QAAA,IAAIW,OAAO,CAACkC,OAAR,CAAgBC,cAApB,EAAoC;AAAE;UACpCnC,OAAO,CAACkC,OAAR,CAAgBC,cAAhB,EAAA,CAAA;AACD,SAAA;;AACD,QAAA,OAAA;AACD,OAAA;;AACDb,MAAAA,GAAG,SAAH,IAAAA,GAAG,KAAA,KAAA,CAAH,GAAG,KAAA,CAAH,GAAAA,GAAG,CAAEc,qBAAL,CAA2B;AACzBH,QAAAA,QAAQ,EAAE,CAAAtB,EAAA,GAAAZ,QAAQ,KAAR,IAAA,IAAAA,QAAQ,WAAR,SAAA,GAAAA,QAAQ,CAAEmC,OAAV,MAAiB,IAAjB,IAAiBvB,EAAA,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAiBA,EAAA,CAAEtB,KADJ;AAEzBgD,QAAAA,YAAY,EAAE7B,OAAAA;AAFW,OAA3B,CAGG8B,CAAAA,IAHH,CAGQ,UAACC,WAAD,EAAY;AAClBb,QAAAA,cAAc,CAAC;UAAEc,IAAI,EAAEC,gBAAR;AAAsCC,UAAAA,OAAO,EAAEH,WAAAA;AAA/C,SAAD,CAAd,CAAA;;AACA,QAAA,IAAIrD,aAAa,IAAI,OAAOA,aAAP,KAAyB,UAA9C,EAA0D;UACxDA,aAAa,CAACqD,WAAD,CAAb,CAAA;AACD,SAAA;AACF,OARD,CAAA,CAAA;AASD,KAAA;GAED,eAAA3D,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AACE,IAAA,SAAS,EAAC,4BADZ;AAEE,IAAA,GAAG,EAAEoB,OAFP;IAGE,QAAQ,EAAE,UAAC2C,CAAD,EAAE;AAAOA,MAAAA,CAAC,CAACC,cAAF,EAAA,CAAA;AAAqB,KAAA;GAExC,eAAAhE,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAS,IAAA,SAAS,EAAC,iCAAA;AAAnB,GAAA,eACEA,6BAAC,UAAD,EAAA,IAAA,EACGqB,SAAS,CAAC4C,yBADb,CADF,eAIEjE,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAC,yCAAA;AAAf,GAAA,eACEA,6BAAC,MAAD,EAAA;AACE,IAAA,KAAK,EAAC,MADR;AAEE,IAAA,MAAM,EAAC,MAFT;AAGE,IAAA,GAAG,EAAEyB,UAAU,KAAIY,IAAI,KAAA,IAAJ,IAAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAAA,IAAI,CAAE6B,UAAV,CAAA;AAHjB,GAAA,CADF,CAJF,eAWElE,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA;AACE,IAAA,GAAG,EAAEiB,cADP;AAEE,IAAA,IAAI,EAAC,MAFP;AAGE,IAAA,MAAM,EAAC,kCAHT;AAIE,IAAA,KAAK,EAAE;AAAEkD,MAAAA,OAAO,EAAE,MAAA;KAJpB;IAKE,QAAQ,EAAE,UAACJ,CAAD,EAAE;AACVrC,MAAAA,aAAa,CAAC0C,GAAG,CAACC,eAAJ,CAAoBN,CAAC,CAACO,MAAF,CAASC,KAAT,CAAe,CAAf,CAApB,CAAD,CAAb,CAAA;MACA1C,UAAU,CAACkC,CAAC,CAACO,MAAF,CAASC,KAAT,CAAe,CAAf,CAAD,CAAV,CAAA;AACAtD,MAAAA,cAAc,CAACqC,OAAf,CAAuB7C,KAAvB,GAA+B,EAA/B,CAAA;AACD,KAAA;GApBL,CAAA,eAsBET,6BAAC,UAAD,EAAA;AACE,IAAA,SAAS,EAAC,gDADZ;AAEE,IAAA,gBAAgB,EAFlB,IAAA;AAGE,IAAA,OAAO,EAAE;AAAM,MAAA,OAAAiB,cAAc,CAACqC,OAAf,CAAuBkB,KAAvB,EAAA,CAAA;AAA8B,KAAA;AAH/C,GAAA,eAKExE,6BAAC,KAAD,EAAA;IAAO,IAAI,EAAEyE,eAAe,CAACC,QAA7B;IAAuC,KAAK,EAAEC,WAAW,CAACvB,OAAAA;AAA1D,GAAA,EACG/B,SAAS,CAACuD,0BADb,CALF,CAtBF,CALF,eAqCE5E,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAS,IAAA,SAAS,EAAC,kCAAA;GACjB,eAAAA,cAAA,CAAA,aAAA,CAAC,UAAD,EACGqB,IAAAA,EAAAA,SAAS,CAACwD,4BADb,CADF,eAIE7E,cAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AACE,IAAA,QAAQ,EAAE,CAAAqC,IAAI,SAAJ,IAAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAAA,IAAI,CAAEgB,QAAN,MAAmB,EAD/B;AAEE,IAAA,IAAI,EAAC,yCAFP;AAGE,IAAA,GAAG,EAAElC,QAHP;AAIE,IAAA,KAAK,EAAEkB,IAAI,KAAA,IAAJ,IAAAA,IAAI,KAAJ,KAAA,CAAA,GAAA,KAAA,CAAA,GAAAA,IAAI,CAAEgB,QAJf;IAKE,WAAW,EAAEhC,SAAS,CAACyD,kCAAAA;AALzB,GAAA,CAJF,CArCF,eAiDE9E,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAS,IAAA,SAAS,EAAC,oCAAA;GACjB,eAAAA,cAAA,CAAA,aAAA,CAAC,UAAD,EAEGqB,IAAAA,EAAAA,SAAS,CAAC0D,0BAFb,CADF,eAKE/E,cAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AACE,IAAA,QAAQ,EADV,IAAA;AAEE,IAAA,IAAI,EAAC,2CAFP;AAGE,IAAA,KAAK,EAAEqC,IAAI,SAAJ,IAAAA,IAAI,KAAA,KAAA,CAAJ,GAAI,KAAA,CAAJ,GAAAA,IAAI,CAAE2C,MAAAA;AAHf,GAAA,CALF,CAjDF,eA4DEhF,cAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAS,IAAA,SAAS,EAAC,mCAAA;AAAnB,GAAA,eACEA,6BAAC,UAAD,EAAA,IAAA,EACGqB,SAAS,CAAC4D,yBADb,CADF,eAIEjF,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,SAAS,EAAC,+CAAA;AAAf,GAAA,EAEI8B,KAAK,KAAK,MAAV,gBAEI9B,6BAAC,IAAD,EAAA;AACE,IAAA,OAAO,EAAE,YAAA;MACPiC,WAAW,CAAC,OAAD,CAAX,CAAA;AACAzB,MAAAA,aAAa,SAAb,IAAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAAA,aAAa,CAAG,OAAH,CAAb,CAFO;AAIP;AACA;KANJ;IAQE,IAAI,EAAE0E,SAAS,CAACC,SARlB;AASE,IAAA,KAAK,EAAE,EATT;AAUE,IAAA,MAAM,EAAE,EAAA;GAZd,CAAA,gBAgBInF,6BAAC,IAAD,EAAA;AACE,IAAA,OAAO,EAAE,YAAA;MACPiC,WAAW,CAAC,MAAD,CAAX,CAAA;AACAzB,MAAAA,aAAa,SAAb,IAAAA,aAAa,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAAA,aAAa,CAAG,MAAH,CAAb,CAFO;AAIP;AACA;KANJ;IAQE,IAAI,EAAE0E,SAAS,CAACE,UARlB;AASE,IAAA,KAAK,EAAE,EATT;AAUE,IAAA,MAAM,EAAE,EAAA;GA5BlB,CAAA,CAJF,CA5DF,CAxBF,CADF,CAAA;AA8HD;;;;"}

package/index-3a76c1d2.js

@@ -0,0 +1,353 @@
+import { a as __spreadArray } from './tslib.es6-cd680863.js';
+import React__default, { useContext, useState, useEffect, useRef, useCallback } from 'react';
+import Button, { ButtonTypes, ButtonSizes } from './ui/Button.js';
+import ContextMenu, { MenuItems, MenuItem } from './ui/ContextMenu.js';
+import Icon, { IconTypes, IconColors } from './ui/Icon.js';
+import IconButton from './ui/IconButton.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from './index-67c5e94c.js';
+import { a as LocalizationContext } from './LocalizationContext-a6aa8be8.js';
+import { a as UserProfileContext } from './UserProfileContext-dd096494.js';
+import './context-2f7024fc.js';
+import Avatar from './ui/Avatar.js';
+import 'react-dom';
+import UserProfile from './ui/UserProfile.js';
+import '@sendbird/chat/openChannel';
+import Modal from './ui/Modal.js';
+import UserListItem$1 from './ui/UserListItem.js';
+import { n as noop } from './utils-aae15fda.js';
+import { useOpenChannelSettingsContext } from './OpenChannelSettings/context.js';
+import useSendbirdStateContext from './useSendbirdStateContext.js';
+
+function ParticipantsModal(_a) {
+  var _b, _c, _d;
+
+  var onCancel = _a.onCancel;
+  var state = useSendbirdStateContext();
+  var channel = useOpenChannelSettingsContext().channel;
+  var stringSet = useContext(LocalizationContext).stringSet;
+
+  var _e = useState([]),
+      participants = _e[0],
+      setParticipants = _e[1];
+
+  var _f = useState(null),
+      participantListQuery = _f[0],
+      setParticipantListQuery = _f[1];
+
+  var userId = (_b = state === null || state === void 0 ? void 0 : state.config) === null || _b === void 0 ? void 0 : _b.userId;
+  var sdk = (_d = (_c = state === null || state === void 0 ? void 0 : state.stores) === null || _c === void 0 ? void 0 : _c.sdkStore) === null || _d === void 0 ? void 0 : _d.sdk;
+  var isOperatorView = channel === null || channel === void 0 ? void 0 : channel.isOperator(userId);
+  useEffect(function () {
+    if (!channel || !(channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery)) {
+      return;
+    }
+
+    var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({});
+    setParticipantListQuery(participantListQuery);
+    participantListQuery.next().then(function (participantList) {
+      setParticipants(participantList);
+    });
+  }, []);
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Modal, {
+    hideFooter: true,
+    isFullScreenOnMobile: true,
+    onCancel: function () {
+      return onCancel();
+    },
+    onSubmit: noop,
+    titleText: stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-more-members__popup-scroll",
+    onScroll: function (e) {
+      var hasNext = participantListQuery.hasNext;
+      var target = e.target;
+      var fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
+
+      if (hasNext && fetchMore) {
+        participantListQuery.next().then(function (fetchedParticipants) {
+          setParticipants(__spreadArray(__spreadArray([], participants, true), fetchedParticipants, true));
+        });
+      }
+    }
+  }, participants.map(function (p) {
+    var _a;
+
+    var isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
+    return /*#__PURE__*/React__default.createElement(UserListItem$1, {
+      user: p,
+      key: p.userId,
+      currentUser: (_a = sdk === null || sdk === void 0 ? void 0 : sdk.currentUser) === null || _a === void 0 ? void 0 : _a.userId,
+      action: userId !== p.userId && isOperatorView ? function (_a) {
+        var actionRef = _a.actionRef,
+            parentRef = _a.parentRef;
+        return /*#__PURE__*/React__default.createElement(ContextMenu, {
+          menuTrigger: function (toggleDropdown) {
+            return /*#__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: function (closeDropdown) {
+            return /*#__PURE__*/React__default.createElement(MenuItems, {
+              parentContainRef: parentRef,
+              parentRef: actionRef,
+              closeDropdown: closeDropdown,
+              openLeft: true
+            }, /*#__PURE__*/React__default.createElement(MenuItem, {
+              onClick: function () {
+                if (isOperator) {
+                  channel === null || channel === void 0 ? void 0 : channel.removeOperators([p.userId]).then(function () {
+                    closeDropdown();
+                  });
+                } else {
+                  channel === null || channel === void 0 ? void 0 : channel.addOperators([p.userId]).then(function () {
+                    closeDropdown();
+                  });
+                }
+              }
+            }, isOperator ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR), /*#__PURE__*/React__default.createElement(MenuItem, {
+              onClick: function () {
+                channel === null || channel === void 0 ? void 0 : channel.muteUser(p).then(function () {
+                  closeDropdown();
+                });
+              }
+            }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE), /*#__PURE__*/React__default.createElement(MenuItem, {
+              onClick: function () {
+                channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(function () {
+                  closeDropdown();
+                });
+              }
+            }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN));
+          }
+        });
+      } : null
+    });
+  }))));
+}
+
+var UserListItem = function (_a) {
+  var user = _a.user,
+      currentUser = _a.currentUser,
+      isOperator = _a.isOperator,
+      action = _a.action;
+  var avatarRef = useRef(null);
+  var actionRef = useRef(null);
+
+  var _b = useContext(UserProfileContext),
+      disableUserProfile = _b.disableUserProfile,
+      renderUserProfile = _b.renderUserProfile;
+
+  var stringSet = useContext(LocalizationContext).stringSet;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-participants-accordion__member"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-participants-accordion__member-avatar"
+  }, /*#__PURE__*/React__default.createElement(ContextMenu, {
+    menuTrigger: function (toggleDropdown) {
+      return /*#__PURE__*/React__default.createElement(Avatar, {
+        onClick: function () {
+          if (!disableUserProfile) {
+            toggleDropdown();
+          }
+        },
+        ref: avatarRef,
+        src: user.profileUrl,
+        width: 24,
+        height: 24
+      });
+    },
+    menuItems: function (closeDropdown) {
+      return /*#__PURE__*/React__default.createElement(MenuItems, {
+        openLeft: true,
+        parentRef: avatarRef // for catching location(x, y) of MenuItems
+        ,
+        parentContainRef: avatarRef // for toggling more options(menus & reactions)
+        ,
+        closeDropdown: closeDropdown,
+        style: {
+          paddingTop: '0px',
+          paddingBottom: '0px'
+        }
+      }, renderUserProfile ? renderUserProfile({
+        user: user,
+        currentUserId: currentUser,
+        close: closeDropdown
+      }) : /*#__PURE__*/React__default.createElement(UserProfile, {
+        disableMessaging: true,
+        user: user,
+        currentUserId: currentUser,
+        onSuccess: closeDropdown
+      }));
+    }
+  })), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-participants-accordion__member__title",
+    type: LabelTypography.SUBTITLE_2,
+    color: LabelColors.ONBACKGROUND_1
+  }, user.nickname || stringSet.NO_NAME, currentUser === user.userId && stringSet.OPEN_CHANNEL_SETTINGS__MEMBERS__YOU), // if there is now nickname, display userId
+  !user.nickname && /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-participants-accordion__member__title user-id",
+    type: LabelTypography.CAPTION_3,
+    color: LabelColors.ONBACKGROUND_2
+  }, user.userId), isOperator && /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-participants-accordion__member__title\n                ".concat((user === null || user === void 0 ? void 0 : user.userId) !== currentUser ? 'operator' : '', "\n                ").concat((user === null || user === void 0 ? void 0 : user.userId) === currentUser ? 'self-operator' : '', "\n              "),
+    type: LabelTypography.SUBTITLE_2,
+    color: LabelColors.ONBACKGROUND_2
+  }, stringSet.OPEN_CHANNEL_SETTINGS__MEMBERS__OPERATOR), action && /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-participants-accordion__member__action",
+    ref: actionRef
+  }, action({
+    actionRef: actionRef
+  })));
+};
+
+function ParticipantList(_a) {
+  var _b;
+
+  var _c = _a.isOperatorView,
+      isOperatorView = _c === void 0 ? false : _c;
+  var globalState = useSendbirdStateContext();
+  var currentUserId = (_b = globalState === null || globalState === void 0 ? void 0 : globalState.config) === null || _b === void 0 ? void 0 : _b.userId;
+  var channel = useOpenChannelSettingsContext().channel;
+  var stringSet = useContext(LocalizationContext).stringSet;
+
+  var _d = useState(null),
+      participants = _d[0],
+      setParticipants = _d[1];
+
+  var _e = useState(null),
+      participantListQuery = _e[0],
+      setParticipantListQuery = _e[1];
+
+  var _f = useState(false),
+      showParticipantsModal = _f[0],
+      setShowParticipantsModal = _f[1];
+
+  useEffect(function () {
+    if (!channel || !(channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery)) {
+      return;
+    }
+
+    var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({
+      limit: 10
+    });
+    setParticipantListQuery(participantListQuery);
+    participantListQuery.next().then(function (participants) {
+      setParticipants(participants);
+    });
+  }, [channel]);
+  var refreshList = useCallback(function () {
+    if (!channel) {
+      setParticipants([]);
+      return;
+    }
+
+    var participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({
+      limit: 10
+    });
+    participantListQuery.next().then(function (participants) {
+      setParticipants(participants);
+    });
+  }, [channel]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-settings__participant-list",
+    onScroll: function (e) {
+      var hasNext = participantListQuery.hasNext;
+      var target = e.target;
+      var fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
+
+      if (hasNext && fetchMore) {
+        participantListQuery.next().then(function (fetchedParticipants) {
+          setParticipants(__spreadArray(__spreadArray([], participants, true), fetchedParticipants, true));
+        });
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement("div", null, participants === null || participants === void 0 ? void 0 : participants.map(function (p) {
+    var isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
+    return /*#__PURE__*/React__default.createElement(UserListItem, {
+      user: p,
+      currentUser: currentUserId,
+      key: p.userId,
+      isOperator: isOperator,
+      action: function (_a) {
+        var actionRef = _a.actionRef;
+        return isOperatorView && currentUserId !== (p === null || p === void 0 ? void 0 : p.userId) ? /*#__PURE__*/React__default.createElement(ContextMenu, {
+          menuTrigger: function (toggleDropdown) {
+            return /*#__PURE__*/React__default.createElement(IconButton, {
+              className: "sendbird-openchannel-participant-list__menu",
+              width: "32px",
+              height: "32px",
+              onClick: toggleDropdown
+            }, /*#__PURE__*/React__default.createElement(Icon, {
+              width: "24px",
+              height: "24px",
+              type: IconTypes.MORE,
+              fillColor: IconColors.CONTENT_INVERSE
+            }));
+          },
+          menuItems: function (closeDropdown) {
+            return /*#__PURE__*/React__default.createElement(MenuItems, {
+              parentRef: actionRef,
+              closeDropdown: closeDropdown,
+              openLeft: true
+            }, /*#__PURE__*/React__default.createElement(MenuItem, {
+              onClick: function () {
+                if (isOperator) {
+                  channel === null || channel === void 0 ? void 0 : channel.removeOperators([p.userId]).then(function () {
+                    refreshList();
+                    closeDropdown();
+                  });
+                } else {
+                  channel === null || channel === void 0 ? void 0 : channel.addOperators([p.userId]).then(function () {
+                    refreshList();
+                    closeDropdown();
+                  });
+                }
+              }
+            }, isOperator ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR), /*#__PURE__*/React__default.createElement(MenuItem, {
+              onClick: function () {
+                channel === null || channel === void 0 ? void 0 : channel.muteUser(p).then(function () {
+                  refreshList();
+                  closeDropdown();
+                });
+              }
+            }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE), /*#__PURE__*/React__default.createElement(MenuItem, {
+              onClick: function () {
+                channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(function () {
+                  refreshList();
+                  closeDropdown();
+                });
+              }
+            }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN));
+          }
+        }) : null;
+      }
+    });
+  }), participants && participants.length === 0 ? /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-channel-settings__empty-list",
+    type: LabelTypography.SUBTITLE_2,
+    color: LabelColors.ONBACKGROUND_3
+  }, stringSet.OPEN_CHANNEL_SETTINGS__EMPTY_LIST) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-openchannel-participant-list__footer"
+  }, (participantListQuery === null || participantListQuery === void 0 ? void 0 : participantListQuery.hasNext) && /*#__PURE__*/React__default.createElement(Button, {
+    type: ButtonTypes.SECONDARY,
+    size: ButtonSizes.SMALL,
+    onClick: function () {
+      return setShowParticipantsModal(true);
+    }
+  }, stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE)), showParticipantsModal && /*#__PURE__*/React__default.createElement(ParticipantsModal, {
+    onCancel: function () {
+      setShowParticipantsModal(false);
+      refreshList();
+    }
+  })));
+}
+
+export { ParticipantList as P, UserListItem as U };
+//# sourceMappingURL=index-3a76c1d2.js.map