@sendbird/uikit-react 3.5.0-rc.1 → 3.5.0

package/cjs/index-8affdde5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-8affdde5.js","sources":["../../node_modules/date-fns/esm/isToday/index.js","../../node_modules/date-fns/esm/isSameYear/index.js","../../node_modules/date-fns/esm/isThisYear/index.js","../../node_modules/date-fns/esm/addDays/index.js","../../node_modules/date-fns/esm/subDays/index.js","../../node_modules/date-fns/esm/isYesterday/index.js"],"sourcesContent":["import isSameDay from \"../isSameDay/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isToday\n * @category Day Helpers\n * @summary Is the given date today?\n * @pure false\n *\n * @description\n * Is the given date today?\n *\n * > ⚠️ Please note that this function is not present in the FP submodule as\n * > it uses `Date.now()` internally hence impure and can't be safely curried.\n *\n * @param {Date|Number} date - the date to check\n * @returns {Boolean} the date is today\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // If today is 6 October 2014, is 6 October 14:00:00 today?\n * const result = isToday(new Date(2014, 9, 6, 14, 0))\n * //=> true\n */\n\nexport default function isToday(dirtyDate) {\n  requiredArgs(1, arguments);\n  return isSameDay(dirtyDate, Date.now());\n}","import toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isSameYear\n * @category Year Helpers\n * @summary Are the given dates in the same year?\n *\n * @description\n * Are the given dates in the same year?\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 year\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Are 2 September 2014 and 25 September 2014 in the same year?\n * const result = isSameYear(new Date(2014, 8, 2), new Date(2014, 8, 25))\n * //=> true\n */\n\nexport default function isSameYear(dirtyDateLeft, dirtyDateRight) {\n  requiredArgs(2, arguments);\n  var dateLeft = toDate(dirtyDateLeft);\n  var dateRight = toDate(dirtyDateRight);\n  return dateLeft.getFullYear() === dateRight.getFullYear();\n}","import isSameYear from \"../isSameYear/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isThisYear\n * @category Year Helpers\n * @summary Is the given date in the same year as the current date?\n * @pure false\n *\n * @description\n * Is the given date in the same year as the current date?\n *\n * > ⚠️ Please note that this function is not present in the FP submodule as\n * > it uses `Date.now()` internally hence impure and can't be safely curried.\n *\n * @param {Date|Number} date - the date to check\n * @returns {Boolean} the date is in this year\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // If today is 25 September 2014, is 2 July 2014 in this year?\n * const result = isThisYear(new Date(2014, 6, 2))\n * //=> true\n */\n\nexport default function isThisYear(dirtyDate) {\n  requiredArgs(1, arguments);\n  return isSameYear(dirtyDate, Date.now());\n}","import toInteger from \"../_lib/toInteger/index.js\";\nimport toDate from \"../toDate/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name addDays\n * @category Day Helpers\n * @summary Add the specified number of days to the given date.\n *\n * @description\n * Add the specified number of days to the given date.\n *\n * @param {Date|Number} date - the date to be changed\n * @param {Number} amount - the amount of days to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.\n * @returns {Date} - the new date with the days added\n * @throws {TypeError} - 2 arguments required\n *\n * @example\n * // Add 10 days to 1 September 2014:\n * const result = addDays(new Date(2014, 8, 1), 10)\n * //=> Thu Sep 11 2014 00:00:00\n */\n\nexport default function addDays(dirtyDate, dirtyAmount) {\n  requiredArgs(2, arguments);\n  var date = toDate(dirtyDate);\n  var amount = toInteger(dirtyAmount);\n\n  if (isNaN(amount)) {\n    return new Date(NaN);\n  }\n\n  if (!amount) {\n    // If 0 days, no-op to avoid changing times in the hour before end of DST\n    return date;\n  }\n\n  date.setDate(date.getDate() + amount);\n  return date;\n}","import addDays from \"../addDays/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\nimport toInteger from \"../_lib/toInteger/index.js\";\n/**\n * @name subDays\n * @category Day Helpers\n * @summary Subtract the specified number of days from the given date.\n *\n * @description\n * Subtract the specified number of days from the given date.\n *\n * @param {Date|Number} date - the date to be changed\n * @param {Number} amount - the amount of days to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`.\n * @returns {Date} the new date with the days subtracted\n * @throws {TypeError} 2 arguments required\n *\n * @example\n * // Subtract 10 days from 1 September 2014:\n * const result = subDays(new Date(2014, 8, 1), 10)\n * //=> Fri Aug 22 2014 00:00:00\n */\n\nexport default function subDays(dirtyDate, dirtyAmount) {\n  requiredArgs(2, arguments);\n  var amount = toInteger(dirtyAmount);\n  return addDays(dirtyDate, -amount);\n}","import isSameDay from \"../isSameDay/index.js\";\nimport subDays from \"../subDays/index.js\";\nimport requiredArgs from \"../_lib/requiredArgs/index.js\";\n/**\n * @name isYesterday\n * @category Day Helpers\n * @summary Is the given date yesterday?\n * @pure false\n *\n * @description\n * Is the given date yesterday?\n *\n * > ⚠️ Please note that this function is not present in the FP submodule as\n * > it uses `Date.now()` internally hence impure and can't be safely curried.\n *\n * @param {Date|Number} date - the date to check\n * @returns {Boolean} the date is yesterday\n * @throws {TypeError} 1 argument required\n *\n * @example\n * // If today is 6 October 2014, is 5 October 14:00:00 yesterday?\n * const result = isYesterday(new Date(2014, 9, 5, 14, 0))\n * //=> true\n */\n\nexport default function isYesterday(dirtyDate) {\n  requiredArgs(1, arguments);\n  return isSameDay(dirtyDate, subDays(Date.now(), 1));\n}"],"names":["requiredArgs","isSameDay","toDate","toInteger"],"mappings":"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"}

package/cjs/index-99f16473.js

@@ -0,0 +1,202 @@
+'use strict';
+
+var React = require('react');
+var ui_ContextMenu = require('./ui/ContextMenu.js');
+var useSendbirdStateContext = require('./useSendbirdStateContext.js');
+var LocalizationContext = require('./LocalizationContext-0e429c3d.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const OpenChannelMessageStatusTypes = {
+  NONE: 'none',
+  PENDING: 'pending',
+  FAILED: 'failed',
+  CANCELED: 'canceled',
+  SUCCEEDED: 'succeeded'
+};
+const getSenderFromMessage = message => {
+  // @ts-ignore
+  return message.sender || message._sender;
+};
+const checkIsSent = status => status === OpenChannelMessageStatusTypes.SUCCEEDED;
+const checkIsPending = status => status === OpenChannelMessageStatusTypes.PENDING;
+const checkIsFailed = status => status === OpenChannelMessageStatusTypes.FAILED;
+const checkIsByMe = (message, userId) => getSenderFromMessage(message).userId === userId;
+const isFineCopy = _ref => {
+  var _message$message;
+  let {
+    message
+  } = _ref;
+  return (message === null || message === void 0 ? void 0 : message.messageType) === 'user' && (message === null || message === void 0 ? void 0 : (_message$message = message.message) === null || _message$message === void 0 ? void 0 : _message$message.length) > 0;
+};
+const isFineResend = _ref2 => {
+  let {
+    message,
+    status,
+    userId
+  } = _ref2;
+  return checkIsByMe(message, userId) && checkIsFailed(status)
+  // @ts-ignore
+  && (message === null || message === void 0 ? void 0 : message.isResendable());
+};
+const isFineEdit = _ref3 => {
+  var _message$isUserMessag;
+  let {
+    message,
+    status,
+    userId
+  } = _ref3;
+  return checkIsByMe(message, userId) && checkIsSent(status) && (message === null || message === void 0 ? void 0 : (_message$isUserMessag = message.isUserMessage) === null || _message$isUserMessag === void 0 ? void 0 : _message$isUserMessag.call(message));
+};
+const isFineDelete = _ref4 => {
+  let {
+    message,
+    userId
+  } = _ref4;
+  return checkIsByMe(message, userId);
+};
+const isFineDownload = _ref5 => {
+  var _message$isFileMessag;
+  let {
+    message,
+    status
+  } = _ref5;
+  if (message !== null && message !== void 0 && (_message$isFileMessag = message.isFileMessage) !== null && _message$isFileMessag !== void 0 && _message$isFileMessag.call(message) && checkIsSent(status)) {
+    return true;
+  }
+  return false;
+};
+const showMenuTrigger = props => {
+  const {
+    message,
+    status,
+    userId
+  } = props;
+  // @ts-ignore
+  if (message.messageType === 'user') {
+    return isFineDelete({
+      message,
+      status,
+      userId
+    }) || isFineEdit({
+      message,
+      status,
+      userId
+    })
+    // @ts-ignore
+    || isFineCopy({
+      message,
+      status,
+      userId
+    }) || isFineResend({
+      message,
+      status,
+      userId
+    });
+  } else {
+    return isFineDelete({
+      message,
+      status,
+      userId
+    }) || isFineResend({
+      message,
+      status,
+      userId
+    });
+  }
+};
+
+const OpenChannelMobileMenu = props => {
+  var _useSendbirdStateCont, _useSendbirdStateCont2;
+  const {
+    message,
+    parentRef,
+    resendMessage,
+    showEdit,
+    showRemove,
+    copyToClipboard,
+    hideMenu,
+    isEphemeral = false
+  } = props;
+  const userMessage = message;
+  const status = message === null || message === void 0 ? void 0 : message.sendingStatus;
+  const {
+    stringSet
+  } = LocalizationContext.useLocalization();
+  const userId = (_useSendbirdStateCont = useSendbirdStateContext()) === null || _useSendbirdStateCont === void 0 ? void 0 : (_useSendbirdStateCont2 = _useSendbirdStateCont.config) === null || _useSendbirdStateCont2 === void 0 ? void 0 : _useSendbirdStateCont2.userId;
+  const fileMessage = message;
+  return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    isOpen: true,
+    menuItems: () => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+      className: "sendbird-openchannel__mobile-menu",
+      parentRef: parentRef,
+      parentContainRef: parentRef,
+      closeDropdown: hideMenu
+    }, isFineCopy({
+      message: userMessage,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+      className: "sendbird-openchannel-og-message__top__context-menu__copy",
+      onClick: () => {
+        copyToClipboard();
+      },
+      dataSbId: "open_channel_mobile_context_menu_copy"
+    }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, stringSet.CONTEXT_MENU_DROPDOWN__COPY)), !isEphemeral && isFineEdit({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+      className: "sendbird-openchannel-og-message__top__context-menu__edit",
+      onClick: () => {
+        showEdit();
+      },
+      dataSbId: "open_channel_mobile_context_menu_edit"
+    }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, stringSet.CONTEXT_MENU_DROPDOWN__EDIT)), isFineResend({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+      onClick: () => {
+        resendMessage();
+      },
+      dataSbId: "open_channel_mobile_context_menu_resend"
+    }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, stringSet.CONTEXT_MENU_DROPDOWN__RESEND)), !isEphemeral && isFineDelete({
+      message,
+      userId,
+      status
+    }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+      onClick: () => {
+        showRemove();
+      },
+      dataSbId: "open_channel_mobile_context_menu_delete"
+    }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, stringSet.CONTEXT_MENU_DROPDOWN__DELETE)), isFineDownload({
+      message,
+      status
+    }) && /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+      onClick: () => {
+        hideMenu();
+      },
+      dataSbId: "open_channel_mobile_context_menu_download_file"
+    }, /*#__PURE__*/React__default["default"].createElement("a", {
+      className: "sendbird-openchannel__mobile-menu-hyperlink",
+      rel: "noopener noreferrer",
+      href: fileMessage === null || fileMessage === void 0 ? void 0 : fileMessage.url,
+      target: "_blank"
+    }, stringSet.CONTEXT_MENU_DROPDOWN__SAVE)))
+  });
+};
+
+exports.OpenChannelMobileMenu = OpenChannelMobileMenu;
+exports.checkIsFailed = checkIsFailed;
+exports.checkIsPending = checkIsPending;
+exports.checkIsSent = checkIsSent;
+exports.getSenderFromMessage = getSenderFromMessage;
+exports.isFineCopy = isFineCopy;
+exports.isFineDelete = isFineDelete;
+exports.isFineEdit = isFineEdit;
+exports.isFineResend = isFineResend;
+exports.showMenuTrigger = showMenuTrigger;
+//# sourceMappingURL=index-99f16473.js.map

package/cjs/index-99f16473.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-99f16473.js","sources":["../../src/utils/openChannelUtils.ts","../../src/ui/OpenChannelMobileMenu/index.tsx"],"sourcesContent":["import type { User } from '@sendbird/chat';\nimport type { FileMessage, UserMessage } from '@sendbird/chat/message';\n\nconst OpenChannelMessageStatusTypes = {\n  NONE: 'none',\n  PENDING: 'pending',\n  FAILED: 'failed',\n  CANCELED: 'canceled',\n  SUCCEEDED: 'succeeded',\n};\n\nexport const getSenderFromMessage = (message: UserMessage | FileMessage): User => {\n  // @ts-ignore\n  return message.sender || message._sender;\n};\n\nexport const checkIsSent = (status: string): boolean => (status === OpenChannelMessageStatusTypes.SUCCEEDED);\nexport const checkIsPending = (status: string): boolean => (status === OpenChannelMessageStatusTypes.PENDING);\nexport const checkIsFailed = (status: string): boolean => (status === OpenChannelMessageStatusTypes.FAILED);\n\nexport const checkIsByMe = (message: UserMessage | FileMessage, userId: string): boolean => (getSenderFromMessage(message).userId === userId);\n\ninterface isFineCopyParams {\n  message: UserMessage;\n  status: string;\n  userId: string;\n}\nexport const isFineCopy = ({ message }: isFineCopyParams): boolean => {\n  return (message?.messageType === 'user' && message?.message?.length > 0);\n};\n\ninterface isFineResendParams {\n  message: UserMessage | FileMessage;\n  status: string;\n  userId: string;\n}\nexport const isFineResend = ({ message, status, userId }: isFineResendParams): boolean => {\n  return checkIsByMe(message, userId)\n    && checkIsFailed(status)\n    // @ts-ignore\n    && message?.isResendable();\n};\n\ninterface isFineEditParams {\n  message: UserMessage | FileMessage;\n  status: string;\n  userId: string;\n}\nexport const isFineEdit = ({ message, status, userId }: isFineEditParams): boolean => {\n  return checkIsByMe(message, userId) && checkIsSent(status) && message?.isUserMessage?.();\n};\n\ninterface isFineDeleteParams {\n  message: UserMessage | FileMessage;\n  status: string;\n  userId: string;\n}\nexport const isFineDelete = ({ message, userId }: isFineDeleteParams): boolean => {\n  return checkIsByMe(message, userId);\n};\n\ninterface IsFineDownloadParams {\n  message: FileMessage | UserMessage;\n  status: string;\n}\n\nexport const isFineDownload = ({ message, status }: IsFineDownloadParams): boolean => {\n  if (message?.isFileMessage?.() && checkIsSent(status)) {\n    return true;\n  }\n  return false;\n};\n\ninterface showMenuTriggerParams {\n  message: UserMessage | FileMessage;\n  status: string;\n  userId: string;\n}\nexport const showMenuTrigger = (props: showMenuTriggerParams): boolean => {\n  const { message, status, userId } = props;\n  // @ts-ignore\n  if (message.messageType === 'user') {\n    return (\n      isFineDelete({ message, status, userId })\n      || isFineEdit({ message, status, userId })\n      // @ts-ignore\n      || isFineCopy({ message, status, userId })\n      || isFineResend({ message, status, userId })\n    );\n  } else {\n    return (\n      isFineDelete({ message, status, userId })\n      || isFineResend({ message, status, userId })\n    );\n  }\n};\n","import './open-channel-mobile-menu.scss';\n\nimport React from 'react';\nimport type { FileMessage, UserMessage } from '@sendbird/chat/message';\nimport ContextMenu, { MenuItems, MenuItem } from '../ContextMenu';\nimport {\n  isFineDelete,\n  isFineResend,\n  isFineCopy,\n  isFineEdit,\n  isFineDownload,\n} from '../../utils/openChannelUtils';\nimport useSendbirdStateContext from '../../hooks/useSendbirdStateContext';\nimport { useLocalization } from '../../lib/LocalizationContext';\n\ntype Props = {\n  message: UserMessage | FileMessage;\n  parentRef: React.RefObject<HTMLDivElement>;\n  resendMessage?(): void;\n  showRemove?(): void;\n  copyToClipboard?(): void;\n  showEdit?(): void;\n  hideMenu(): void;\n  isEphemeral?: boolean;\n};\n\nconst OpenChannelMobileMenu: React.FC<Props> = (props: Props) => {\n  const {\n    message,\n    parentRef,\n    resendMessage,\n    showEdit,\n    showRemove,\n    copyToClipboard,\n    hideMenu,\n    isEphemeral = false,\n  } = props;\n  const userMessage = message as UserMessage;\n  const status = message?.sendingStatus;\n  const { stringSet } = useLocalization();\n  const userId = useSendbirdStateContext()?.config?.userId;\n  const fileMessage = message as FileMessage;\n  return (\n    <ContextMenu\n      isOpen\n      menuItems={() => (\n        <MenuItems\n          className=\"sendbird-openchannel__mobile-menu\"\n          parentRef={parentRef}\n          parentContainRef={parentRef}\n          closeDropdown={hideMenu}\n        >\n          {\n            isFineCopy({ message: userMessage, userId, status }) && (\n              <MenuItem\n                className=\"sendbird-openchannel-og-message__top__context-menu__copy\"\n                onClick={() => {\n                  copyToClipboard();\n                }}\n                dataSbId=\"open_channel_mobile_context_menu_copy\"\n              >\n                <>{stringSet.CONTEXT_MENU_DROPDOWN__COPY}</>\n              </MenuItem>\n            )\n          }\n          {\n            (!isEphemeral && isFineEdit({ message, userId, status })) && (\n              <MenuItem\n                className=\"sendbird-openchannel-og-message__top__context-menu__edit\"\n                onClick={() => {\n                  showEdit();\n                }}\n                dataSbId=\"open_channel_mobile_context_menu_edit\"\n              >\n                <>{stringSet.CONTEXT_MENU_DROPDOWN__EDIT}</>\n              </MenuItem>\n            )\n          }\n          {\n            isFineResend({ message, userId, status }) && (\n              <MenuItem\n                onClick={() => {\n                  resendMessage();\n                }}\n                dataSbId=\"open_channel_mobile_context_menu_resend\"\n              >\n                <>{stringSet.CONTEXT_MENU_DROPDOWN__RESEND}</>\n              </MenuItem>\n            )\n          }\n          {\n            (!isEphemeral && isFineDelete({ message, userId, status })) && (\n              <MenuItem\n                onClick={() => {\n                  showRemove();\n                }}\n                dataSbId=\"open_channel_mobile_context_menu_delete\"\n              >\n                <>{stringSet.CONTEXT_MENU_DROPDOWN__DELETE}</>\n              </MenuItem>\n            )\n          }\n          {\n            isFineDownload({ message, status }) && (\n                <MenuItem\n                  onClick={() => {\n                    hideMenu();\n                  }}\n                  dataSbId=\"open_channel_mobile_context_menu_download_file\"\n                >\n                  <a\n                    className=\"sendbird-openchannel__mobile-menu-hyperlink\"\n                    rel=\"noopener noreferrer\"\n                    href={fileMessage?.url}\n                    target=\"_blank\"\n                  >\n                    {stringSet.CONTEXT_MENU_DROPDOWN__SAVE}\n                  </a>\n                </MenuItem>\n            )\n          }\n        </MenuItems>\n      )\n    }/>\n  );\n};\n\nexport default OpenChannelMobileMenu;\n"],"names":["OpenChannelMessageStatusTypes","NONE","PENDING","FAILED","CANCELED","SUCCEEDED","getSenderFromMessage","message","sender","_sender","checkIsSent","status","checkIsPending","checkIsFailed","checkIsByMe","userId","isFineCopy","_ref","_message$message","messageType","length","isFineResend","_ref2","isResendable","isFineEdit","_ref3","_message$isUserMessag","isUserMessage","call","isFineDelete","_ref4","isFineDownload","_ref5","_message$isFileMessag","isFileMessage","showMenuTrigger","props","OpenChannelMobileMenu","_useSendbirdStateCont","_useSendbirdStateCont2","parentRef","resendMessage","showEdit","showRemove","copyToClipboard","hideMenu","isEphemeral","userMessage","sendingStatus","stringSet","useLocalization","useSendbirdStateContext","config","fileMessage","React","createElement","ContextMenu","isOpen","menuItems","MenuItems","className","parentContainRef","closeDropdown","MenuItem","onClick","dataSbId","Fragment","CONTEXT_MENU_DROPDOWN__COPY","CONTEXT_MENU_DROPDOWN__EDIT","CONTEXT_MENU_DROPDOWN__RESEND","CONTEXT_MENU_DROPDOWN__DELETE","rel","href","url","target","CONTEXT_MENU_DROPDOWN__SAVE"],"mappings":"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"}

package/cjs/index-c9d348b6.js

@@ -0,0 +1,367 @@
+'use strict';
+
+var React = require('react');
+var ui_Button = require('./ui/Button.js');
+var ui_ContextMenu = require('./ui/ContextMenu.js');
+var ui_Icon = require('./ui/Icon.js');
+var ui_IconButton = require('./ui/IconButton.js');
+var ui_Label = require('./index-6cb0d040.js');
+var LocalizationContext = require('./LocalizationContext-0e429c3d.js');
+var UserProfileContext = require('./UserProfileContext-87580795.js');
+require('./context-8e7e8457.js');
+var ui_Avatar = require('./ui/Avatar.js');
+require('react-dom');
+var ui_MutedAvatarOverlay = require('./ui/MutedAvatarOverlay.js');
+var ui_UserProfile = require('./ui/UserProfile.js');
+require('@sendbird/chat/openChannel');
+var ui_Modal = require('./ui/Modal.js');
+var ui_UserListItem = require('./ui/UserListItem.js');
+var utils = require('./utils-ad7b5b82.js');
+var OpenChannelSettings_context = require('./OpenChannelSettings/context.js');
+var useSendbirdStateContext = require('./useSendbirdStateContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function ParticipantsModal(_ref) {
+  var _state$config, _state$stores, _state$stores$sdkStor;
+  let {
+    onCancel
+  } = _ref;
+  const state = useSendbirdStateContext();
+  const {
+    channel
+  } = OpenChannelSettings_context.useOpenChannelSettingsContext();
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
+  const [participants, setParticipants] = React.useState([]);
+  const [participantListQuery, setParticipantListQuery] = React.useState(null);
+  const userId = state === null || state === void 0 ? void 0 : (_state$config = state.config) === null || _state$config === void 0 ? void 0 : _state$config.userId;
+  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 isOperatorView = channel === null || channel === void 0 ? void 0 : channel.isOperator(userId);
+  React.useEffect(() => {
+    if (!channel || !(channel !== null && channel !== void 0 && channel.createParticipantListQuery)) {
+      return;
+    }
+    const participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({});
+    setParticipantListQuery(participantListQuery);
+    participantListQuery.next().then(participantList => {
+      setParticipants(participantList);
+    });
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ui_Modal["default"], {
+    hideFooter: true,
+    isFullScreenOnMobile: true,
+    onCancel: () => onCancel(),
+    onSubmit: utils.noop,
+    titleText: stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-more-members__popup-scroll",
+    onScroll: e => {
+      const {
+        hasNext
+      } = participantListQuery;
+      const target = e.target;
+      const fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
+      if (hasNext && fetchMore) {
+        participantListQuery.next().then(fetchedParticipants => {
+          setParticipants([...participants, ...fetchedParticipants]);
+        });
+      }
+    }
+  }, participants.map(p => {
+    var _sdk$currentUser;
+    const isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
+    return /*#__PURE__*/React__default["default"].createElement(ui_UserListItem, {
+      user: p,
+      key: p.userId,
+      currentUser: sdk === null || sdk === void 0 ? void 0 : (_sdk$currentUser = sdk.currentUser) === null || _sdk$currentUser === void 0 ? void 0 : _sdk$currentUser.userId,
+      action: userId !== p.userId && isOperatorView ? _ref2 => {
+        let {
+          actionRef,
+          parentRef
+        } = _ref2;
+        return /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+          menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+            className: "sendbird-user-message__more__menu",
+            width: "32px",
+            height: "32px",
+            onClick: toggleDropdown
+          }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+            width: "24px",
+            height: "24px",
+            type: ui_Icon.IconTypes.MORE,
+            fillColor: ui_Icon.IconColors.CONTENT_INVERSE
+          })),
+          menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+            parentContainRef: parentRef,
+            parentRef: actionRef,
+            closeDropdown: closeDropdown,
+            openLeft: true
+          }, /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+            onClick: () => {
+              if (isOperator) {
+                channel === null || channel === void 0 ? void 0 : channel.removeOperators([p.userId]).then(() => {
+                  closeDropdown();
+                });
+              } else {
+                channel === null || channel === void 0 ? void 0 : channel.addOperators([p.userId]).then(() => {
+                  closeDropdown();
+                });
+              }
+            },
+            dataSbId: `open_channel_setting_participant_context_menu_${isOperator ? 'unregister_operator' : 'register_as_operator'}`
+          }, isOperator ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR), /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+            onClick: () => {
+              if (p.isMuted) {
+                channel === null || channel === void 0 ? void 0 : channel.unmuteUser(p).then(() => {
+                  closeDropdown();
+                });
+              } else {
+                channel === null || channel === void 0 ? void 0 : channel.muteUser(p).then(() => {
+                  closeDropdown();
+                });
+              }
+            },
+            dataSbId: `open_channel_setting_participant_context_menu_${p.isMuted ? 'unmute' : 'mute'}`
+          }, p.isMuted ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE : stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE), /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+            onClick: () => {
+              channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(() => {
+                closeDropdown();
+              });
+            },
+            dataSbId: "open_channel_setting_participant_context_menu_ban"
+          }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN))
+        });
+      } : null
+    });
+  }))));
+}
+
+const UserListItem = _ref => {
+  let {
+    user,
+    currentUser,
+    isOperator,
+    action
+  } = _ref;
+  const avatarRef = React.useRef(null);
+  const actionRef = React.useRef(null);
+  const {
+    disableUserProfile,
+    renderUserProfile
+  } = React.useContext(UserProfileContext.UserProfileContext);
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-participants-accordion__member"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-participants-accordion__member-avatar"
+  }, /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ui_Avatar["default"], {
+      className: "sendbird-participants-accordion__member-avatar__avatar",
+      onClick: () => {
+        if (!disableUserProfile) {
+          toggleDropdown();
+        }
+      },
+      ref: avatarRef,
+      src: user.profileUrl,
+      width: 24,
+      height: 24
+    }), user !== null && user !== void 0 && user.isMuted ? /*#__PURE__*/React__default["default"].createElement(ui_MutedAvatarOverlay, null) : ''),
+    menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.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["default"].createElement(ui_UserProfile, {
+      disableMessaging: true,
+      user: user,
+      currentUserId: currentUser,
+      onSuccess: closeDropdown
+    }))
+  })), /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-participants-accordion__member__title",
+    type: ui_Label.LabelTypography.SUBTITLE_2,
+    color: ui_Label.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["default"].createElement(ui_Label.Label, {
+    className: "sendbird-participants-accordion__member__title user-id",
+    type: ui_Label.LabelTypography.CAPTION_3,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, user.userId), isOperator && /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: `sendbird-participants-accordion__member__title
+                ${(user === null || user === void 0 ? void 0 : user.userId) !== currentUser ? 'operator' : ''}
+                ${(user === null || user === void 0 ? void 0 : user.userId) === currentUser ? 'self-operator' : ''}
+              `,
+    type: ui_Label.LabelTypography.SUBTITLE_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_2
+  }, stringSet.OPEN_CHANNEL_SETTINGS__MEMBERS__OPERATOR), action && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-participants-accordion__member__action",
+    ref: actionRef
+  }, action({
+    actionRef
+  })));
+};
+
+function ParticipantList(_ref) {
+  var _globalState$config;
+  let {
+    isOperatorView = false
+  } = _ref;
+  const globalState = useSendbirdStateContext();
+  const currentUserId = globalState === null || globalState === void 0 ? void 0 : (_globalState$config = globalState.config) === null || _globalState$config === void 0 ? void 0 : _globalState$config.userId;
+  const {
+    channel
+  } = OpenChannelSettings_context.useOpenChannelSettingsContext();
+  const {
+    stringSet
+  } = React.useContext(LocalizationContext.LocalizationContext);
+  const [participants, setParticipants] = React.useState(null);
+  const [participantListQuery, setParticipantListQuery] = React.useState(null);
+  const [showParticipantsModal, setShowParticipantsModal] = React.useState(false);
+  React.useEffect(() => {
+    if (!channel || !(channel !== null && channel !== void 0 && channel.createParticipantListQuery)) {
+      return;
+    }
+    const participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({
+      limit: 10
+    });
+    setParticipantListQuery(participantListQuery);
+    participantListQuery.next().then(participants => {
+      setParticipants(participants);
+    });
+  }, [channel]);
+  const refreshList = React.useCallback(() => {
+    if (!channel) {
+      setParticipants([]);
+      return;
+    }
+    const participantListQuery = channel === null || channel === void 0 ? void 0 : channel.createParticipantListQuery({
+      limit: 10
+    });
+    participantListQuery.next().then(participants => {
+      setParticipants(participants);
+    });
+  }, [channel]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-settings__participant-list",
+    onScroll: e => {
+      const {
+        hasNext
+      } = participantListQuery;
+      const target = e.target;
+      const fetchMore = target.clientHeight + target.scrollTop === target.scrollHeight;
+      if (hasNext && fetchMore) {
+        participantListQuery.next().then(fetchedParticipants => {
+          setParticipants([...participants, ...fetchedParticipants]);
+        });
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", null, participants === null || participants === void 0 ? void 0 : participants.map(p => {
+    const isOperator = channel === null || channel === void 0 ? void 0 : channel.isOperator(p.userId);
+    return /*#__PURE__*/React__default["default"].createElement(UserListItem, {
+      user: p,
+      currentUser: currentUserId,
+      key: p.userId,
+      isOperator: isOperator,
+      action: _ref2 => {
+        let {
+          actionRef
+        } = _ref2;
+        return isOperatorView && currentUserId !== (p === null || p === void 0 ? void 0 : p.userId) ? /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu["default"], {
+          menuTrigger: toggleDropdown => /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
+            className: "sendbird-openchannel-participant-list__menu",
+            width: "32px",
+            height: "32px",
+            onClick: toggleDropdown
+          }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
+            width: "24px",
+            height: "24px",
+            type: ui_Icon.IconTypes.MORE,
+            fillColor: ui_Icon.IconColors.CONTENT_INVERSE
+          })),
+          menuItems: closeDropdown => /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItems, {
+            parentRef: actionRef,
+            closeDropdown: closeDropdown,
+            openLeft: true
+          }, /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+            onClick: () => {
+              if (isOperator) {
+                channel === null || channel === void 0 ? void 0 : channel.removeOperators([p.userId]).then(() => {
+                  closeDropdown();
+                  refreshList();
+                });
+              } else {
+                channel === null || channel === void 0 ? void 0 : channel.addOperators([p.userId]).then(() => {
+                  closeDropdown();
+                  refreshList();
+                });
+              }
+            },
+            dataSbId: `open_channel_setting_partitipant_conext_menu_${isOperator ? 'unregister_operator' : 'register_as_operator'}`
+          }, isOperator ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNREGISTER_OPERATOR : stringSet.OPEN_CHANNEL_SETTING__MODERATION__REGISTER_AS_OPERATOR), /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+            onClick: () => {
+              if (p.isMuted) {
+                channel === null || channel === void 0 ? void 0 : channel.unmuteUser(p).then(() => {
+                  closeDropdown();
+                  refreshList();
+                });
+              } else {
+                channel === null || channel === void 0 ? void 0 : channel.muteUser(p).then(() => {
+                  closeDropdown();
+                  refreshList();
+                });
+              }
+            },
+            dataSbId: `open_channel_setting_partitipant_conext_menu_${p.isMuted ? 'unmute' : 'mute'}`
+          }, p.isMuted ? stringSet.OPEN_CHANNEL_SETTING__MODERATION__UNMUTE : stringSet.OPEN_CHANNEL_SETTING__MODERATION__MUTE), /*#__PURE__*/React__default["default"].createElement(ui_ContextMenu.MenuItem, {
+            onClick: () => {
+              channel === null || channel === void 0 ? void 0 : channel.banUser(p).then(() => {
+                closeDropdown();
+                refreshList();
+              });
+            },
+            dataSbId: "open_channel_setting_partitipant_conext_menu_ban"
+          }, stringSet.OPEN_CHANNEL_SETTING__MODERATION__BAN))
+        }) : null;
+      }
+    });
+  }), participants && participants.length === 0 ? /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
+    className: "sendbird-channel-settings__empty-list",
+    type: ui_Label.LabelTypography.SUBTITLE_2,
+    color: ui_Label.LabelColors.ONBACKGROUND_3
+  }, stringSet.OPEN_CHANNEL_SETTINGS__EMPTY_LIST) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "sendbird-openchannel-participant-list__footer"
+  }, (participantListQuery === null || participantListQuery === void 0 ? void 0 : participantListQuery.hasNext) && /*#__PURE__*/React__default["default"].createElement(ui_Button["default"], {
+    type: ui_Button.ButtonTypes.SECONDARY,
+    size: ui_Button.ButtonSizes.SMALL,
+    onClick: () => setShowParticipantsModal(true)
+  }, stringSet.OPEN_CHANNEL_SETTINGS__ALL_PARTICIPANTS_TITLE)), showParticipantsModal && /*#__PURE__*/React__default["default"].createElement(ParticipantsModal, {
+    onCancel: () => {
+      setShowParticipantsModal(false);
+      refreshList();
+    }
+  })));
+}
+
+exports.ParticipantList = ParticipantList;
+exports.UserListItem = UserListItem;
+//# sourceMappingURL=index-c9d348b6.js.map