@sendbird/uikit-react 3.6.4-rc-0 → 3.6.4

package/ChannelSettings/components/UserListItem.js

@@ -0,0 +1,107 @@
+import React__default, { useRef, useContext } from 'react';
+import { a as LocalizationContext } from '../../LocalizationContext-53fdaf30.js';
+import { a as UserProfileContext } from '../../UserProfileContext-0041c5c2.js';
+import Avatar from '../../ui/Avatar.js';
+import MutedAvatarOverlay from '../../ui/MutedAvatarOverlay.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-20f528de.js';
+import UserProfile from '../../ui/UserProfile.js';
+import ContextMenu, { MenuItems } from '../../ui/ContextMenu.js';
+import '../../stringSet-63246007.js';
+import '../../index-b596c800.js';
+import 'prop-types';
+import '../../ui/ImageRenderer.js';
+import '../../ui/Icon.js';
+import '../../uuid-d94880c0.js';
+import '../../sendbirdSelectors.js';
+import '../../_rollupPluginBabelHelpers-71645d31.js';
+import '../../topics-86131d90.js';
+import '../../utils-b0301443.js';
+import '../../ui/Button.js';
+import '../../useSendbirdStateContext.js';
+import '../../withSendbird.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../index-42dda0be.js';
+import '../../utils/message/getOutgoingMessageState.js';
+
+const UserListItem = _ref => {
+  let {
+    user,
+    className,
+    currentUser,
+    action
+  } = _ref;
+  const actionRef = useRef(null);
+  const parentRef = useRef(null);
+  const avatarRef = useRef(null);
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  const {
+    disableUserProfile,
+    renderUserProfile
+  } = useContext(UserProfileContext);
+  const injectingClassNames = Array.isArray(className) ? className : [className];
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: parentRef,
+    className: ['sendbird-user-list-item--small', ...injectingClassNames].join(' ')
+  }, /*#__PURE__*/React__default.createElement(ContextMenu, {
+    menuTrigger: toggleDropdown => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Avatar, {
+      onClick: () => {
+        if (!disableUserProfile) {
+          toggleDropdown();
+        }
+      },
+      ref: avatarRef,
+      className: "sendbird-user-list-item--small__avatar",
+      src: user.profileUrl,
+      width: 24,
+      height: 24
+    }), user.isMuted && /*#__PURE__*/React__default.createElement(MutedAvatarOverlay, null)),
+    menuItems: closeDropdown => /*#__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,
+      currentUserId: currentUser,
+      close: closeDropdown
+    }) : /*#__PURE__*/React__default.createElement(UserProfile, {
+      user: user,
+      currentUserId: currentUser,
+      onSuccess: closeDropdown
+    }))
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-user-list-item--small__title",
+    type: LabelTypography.SUBTITLE_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, user.nickname || stringSet.NO_NAME, currentUser === user.userId && stringSet.CHANNEL_SETTING__MEMBERS__YOU),
+  // if there is now nickname, display userId
+  !user.nickname && /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-user-list-item--small__subtitle",
+    type: LabelTypography.CAPTION_3,
+    color: LabelColors.ONBACKGROUND_2
+  }, user.userId), user.role === 'operator' && /*#__PURE__*/React__default.createElement(Label, {
+    className: "sendbird-user-list-item--small__operator",
+    type: LabelTypography.SUBTITLE_2,
+    color: LabelColors.ONBACKGROUND_2
+  }, stringSet.CHANNEL_SETTING__MEMBERS__OPERATOR), action && /*#__PURE__*/React__default.createElement("div", {
+    ref: actionRef,
+    className: "sendbird-user-list-item--small__action"
+  }, action({
+    actionRef,
+    parentRef
+  })));
+};
+
+export { UserListItem as default };
+//# sourceMappingURL=UserListItem.js.map

package/ChannelSettings/components/UserPanel.js

@@ -0,0 +1,78 @@
+import React__default, { useContext, useState } from 'react';
+import { a as LocalizationContext } from '../../LocalizationContext-53fdaf30.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-20f528de.js';
+import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
+import Badge from '../../ui/Badge.js';
+import { M as MemberList } from '../../MemberList-e4441000.js';
+import { useChannelSettingsContext } from '../context.js';
+import '../../stringSet-63246007.js';
+import '../../index-b596c800.js';
+import 'prop-types';
+import '../../ui/Button.js';
+import '../../ui/IconButton.js';
+import '../../_rollupPluginBabelHelpers-71645d31.js';
+import '../../ui/ContextMenu.js';
+import 'react-dom';
+import '../../ui/SortByRow.js';
+import '../../uuid-d94880c0.js';
+import '../../index-42dda0be.js';
+import '../../utils/message/getOutgoingMessageState.js';
+import './UserListItem.js';
+import '../../UserProfileContext-0041c5c2.js';
+import '../../ui/Avatar.js';
+import '../../ui/ImageRenderer.js';
+import '../../ui/MutedAvatarOverlay.js';
+import '../../ui/UserProfile.js';
+import '../../sendbirdSelectors.js';
+import '../../topics-86131d90.js';
+import '../../utils-b0301443.js';
+import '../../useSendbirdStateContext.js';
+import '../../withSendbird.js';
+import '../../ui/Modal.js';
+import '../../index-869e67e8.js';
+import '../../MediaQueryContext-6fca0d36.js';
+import '../../ui/UserListItem.js';
+import '../../ui/Checkbox.js';
+
+const kFormatter = num => {
+  return Math.abs(num) > 999 ? `${(Math.abs(num) / 1000).toFixed(1)}K` : num;
+};
+const UserPanel = () => {
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  const [showAccordion, setShowAccordion] = useState(false);
+  const {
+    channel
+  } = useChannelSettingsContext();
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-channel-settings__user-panel"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: ['sendbird-channel-settings__panel-item', 'sendbird-channel-settings__members'].join(' '),
+    role: "switch",
+    "aria-checked": showAccordion,
+    onKeyDown: () => setShowAccordion(!showAccordion),
+    onClick: () => setShowAccordion(!showAccordion),
+    tabIndex: 0
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    className: "sendbird-channel-settings__panel-icon-left",
+    type: IconTypes.MEMBERS,
+    fillColor: IconColors.PRIMARY,
+    height: "24px",
+    width: "24px"
+  }), /*#__PURE__*/React__default.createElement(Label, {
+    type: LabelTypography.SUBTITLE_1,
+    color: LabelColors.ONBACKGROUND_1
+  }, stringSet.CHANNEL_SETTING__MEMBERS__TITLE, /*#__PURE__*/React__default.createElement(Badge, {
+    className: 'sendbird-channel-settings__badge',
+    count: kFormatter(channel === null || channel === void 0 ? void 0 : channel.memberCount)
+  })), /*#__PURE__*/React__default.createElement(Icon, {
+    className: ['sendbird-channel-settings__panel-icon-right', 'sendbird-channel-settings__panel-icon--chevron', showAccordion ? 'sendbird-channel-settings__panel-icon--open' : ''].join(' '),
+    type: IconTypes.CHEVRON_RIGHT,
+    height: "24px",
+    width: "24px"
+  })), showAccordion && /*#__PURE__*/React__default.createElement(MemberList, null));
+};
+
+export { UserPanel as default };
+//# sourceMappingURL=UserPanel.js.map

package/ChannelSettings/context.js

@@ -0,0 +1,96 @@
+import React__default, { useState, useEffect } from 'react';
+import useSendbirdStateContext from '../useSendbirdStateContext.js';
+import { U as UserProfileProvider } from '../UserProfileContext-0041c5c2.js';
+import { u as uuidv4 } from '../uuid-d94880c0.js';
+import '../withSendbird.js';
+import '../_rollupPluginBabelHelpers-71645d31.js';
+import 'prop-types';
+
+const ChannelSettingsContext = /*#__PURE__*/React__default.createContext(undefined);
+const ChannelSettingsProvider = props => {
+  var _props$disableUserPro;
+  const {
+    children,
+    className,
+    channelUrl,
+    onCloseClick,
+    onLeaveChannel,
+    onChannelModified,
+    overrideInviteUser,
+    onBeforeUpdateChannel,
+    queries
+  } = props;
+
+  // fetch store from <SendbirdProvider />
+  const globalStore = useSendbirdStateContext();
+  const {
+    config,
+    stores
+  } = globalStore;
+  const {
+    sdkStore
+  } = stores;
+  const {
+    logger,
+    onUserProfileMessage
+  } = config;
+  const {
+    initialized
+  } = sdkStore;
+  const sdk = sdkStore === null || sdkStore === void 0 ? void 0 : sdkStore.sdk;
+
+  // hack to keep track of channel updates by triggering useEffect
+  const [channelUpdateId, setChannelUpdateId] = useState(uuidv4());
+  const [channel, setChannel] = useState(null);
+  const [invalidChannel, setInvalidChannel] = useState(false);
+  const forceUpdateUI = () => {
+    setChannelUpdateId(uuidv4());
+  };
+  useEffect(() => {
+    logger.info('ChannelSettings: Setting up');
+    if (!channelUrl || !initialized || !sdk) {
+      logger.warning('ChannelSettings: Setting up failed', 'No channelUrl or sdk uninitialized');
+      setInvalidChannel(false);
+    } else {
+      if (!sdk || !sdk.groupChannel) {
+        logger.warning('ChannelSettings: No GroupChannel');
+        return;
+      }
+      sdk.groupChannel.getChannel(channelUrl).then(groupChannel => {
+        if (!groupChannel) {
+          logger.warning('ChannelSettings: Channel not found');
+          setInvalidChannel(true);
+        } else {
+          logger.info('ChannelSettings: Fetched group channel', groupChannel);
+          setInvalidChannel(false);
+          setChannel(groupChannel);
+        }
+      });
+    }
+  }, [channelUrl, initialized, channelUpdateId]);
+  return /*#__PURE__*/React__default.createElement(ChannelSettingsContext.Provider, {
+    value: {
+      channelUrl,
+      onCloseClick,
+      onLeaveChannel,
+      onChannelModified,
+      onBeforeUpdateChannel,
+      queries,
+      overrideInviteUser,
+      setChannelUpdateId,
+      forceUpdateUI,
+      channel,
+      invalidChannel
+    }
+  }, /*#__PURE__*/React__default.createElement(UserProfileProvider, {
+    renderUserProfile: props === null || props === void 0 ? void 0 : props.renderUserProfile,
+    disableUserProfile: (_props$disableUserPro = props === null || props === void 0 ? void 0 : props.disableUserProfile) !== null && _props$disableUserPro !== void 0 ? _props$disableUserPro : config === null || config === void 0 ? void 0 : config.disableUserProfile,
+    onUserProfileMessage: onUserProfileMessage
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `sendbird-channel-settings ${className}`
+  }, children)));
+};
+const useChannelSettingsContext = () => React__default.useContext(ChannelSettingsContext);
+
+export { ChannelSettingsProvider, useChannelSettingsContext };
+//# sourceMappingURL=context.js.map

package/ChannelSettings.js

@@ -0,0 +1,76 @@
+import React__default from 'react';
+import ChannelSettingsUI from './ChannelSettings/components/ChannelSettingsUI.js';
+import { ChannelSettingsProvider } from './ChannelSettings/context.js';
+import './useSendbirdStateContext.js';
+import './withSendbird.js';
+import './_rollupPluginBabelHelpers-71645d31.js';
+import './index-bc1c23e0.js';
+import './LocalizationContext-53fdaf30.js';
+import './stringSet-63246007.js';
+import './index-b596c800.js';
+import './ui/Icon.js';
+import 'prop-types';
+import './index-20f528de.js';
+import './ui/Loader.js';
+import './ui/IconButton.js';
+import './ChannelSettings/components/ChannelProfile.js';
+import './ui/ChannelAvatar.js';
+import './ui/Avatar.js';
+import './ui/ImageRenderer.js';
+import './uuid-d94880c0.js';
+import './utils-4f7f28ff.js';
+import './ui/TextButton.js';
+import './color-4e19bb80.js';
+import './ChannelSettings/components/EditDetailsModal.js';
+import './ui/Modal.js';
+import 'react-dom';
+import './index-869e67e8.js';
+import './ui/Button.js';
+import './MediaQueryContext-6fca0d36.js';
+import './ui/Input.js';
+import './ChannelSettings/components/ModerationPanel.js';
+import './ui/Accordion.js';
+import './ui/AccordionGroup.js';
+import './context-c134dfbf.js';
+import './utils-b0301443.js';
+import './ui/Badge.js';
+import './ui/Toggle.js';
+import './ui/ContextMenu.js';
+import './ui/SortByRow.js';
+import './index-42dda0be.js';
+import './utils/message/getOutgoingMessageState.js';
+import './ChannelSettings/components/UserListItem.js';
+import './UserProfileContext-0041c5c2.js';
+import './ui/MutedAvatarOverlay.js';
+import './ui/UserProfile.js';
+import './sendbirdSelectors.js';
+import './topics-86131d90.js';
+import './ui/UserListItem.js';
+import './ui/Checkbox.js';
+import '@sendbird/chat/groupChannel';
+import './MemberList-e4441000.js';
+import './ChannelSettings/components/LeaveChannel.js';
+import './ChannelSettings/components/UserPanel.js';
+
+const ChannelSettings = props => {
+  return /*#__PURE__*/React__default.createElement(ChannelSettingsProvider, {
+    overrideInviteUser: props === null || props === void 0 ? void 0 : props.overrideInviteUser,
+    channelUrl: props.channelUrl,
+    onCloseClick: props === null || props === void 0 ? void 0 : props.onCloseClick,
+    onLeaveChannel: props === null || props === void 0 ? void 0 : props.onLeaveChannel,
+    onChannelModified: props === null || props === void 0 ? void 0 : props.onChannelModified,
+    onBeforeUpdateChannel: props === null || props === void 0 ? void 0 : props.onBeforeUpdateChannel,
+    queries: props === null || props === void 0 ? void 0 : props.queries,
+    className: props === null || props === void 0 ? void 0 : props.className,
+    disableUserProfile: props === null || props === void 0 ? void 0 : props.disableUserProfile,
+    renderUserProfile: props === null || props === void 0 ? void 0 : props.renderUserProfile
+  }, /*#__PURE__*/React__default.createElement(ChannelSettingsUI, {
+    renderPlaceholderError: props === null || props === void 0 ? void 0 : props.renderPlaceholderError,
+    renderChannelProfile: props === null || props === void 0 ? void 0 : props.renderChannelProfile,
+    renderModerationPanel: props === null || props === void 0 ? void 0 : props.renderModerationPanel,
+    renderLeaveChannel: props === null || props === void 0 ? void 0 : props.renderLeaveChannel
+  }));
+};
+
+export { ChannelSettings as default };
+//# sourceMappingURL=ChannelSettings.js.map

package/CreateChannel/components/CreateChannelUI.js

@@ -0,0 +1,58 @@
+import React__default from 'react';
+import { u as useCreateChannelContext } from '../../CreateChannelProvider-d30736e3.js';
+import InviteUsers from './InviteUsers.js';
+import SelectChannelType from './SelectChannelType.js';
+import '../../sendbirdSelectors.js';
+import '../../_rollupPluginBabelHelpers-71645d31.js';
+import '../../topics-86131d90.js';
+import '../../utils-b0301443.js';
+import '../../useSendbirdStateContext.js';
+import '../../withSendbird.js';
+import '../../LocalizationContext-53fdaf30.js';
+import '../../stringSet-63246007.js';
+import '../../index-b596c800.js';
+import '../../ui/Modal.js';
+import 'react-dom';
+import '../../index-869e67e8.js';
+import '../../ui/Button.js';
+import '../../index-20f528de.js';
+import 'prop-types';
+import '../../ui/Icon.js';
+import '../../ui/IconButton.js';
+import '../../MediaQueryContext-6fca0d36.js';
+import '../../ui/UserListItem.js';
+import '../../UserProfileContext-0041c5c2.js';
+import '../../ui/Avatar.js';
+import '../../ui/ImageRenderer.js';
+import '../../uuid-d94880c0.js';
+import '../../ui/MutedAvatarOverlay.js';
+import '../../ui/Checkbox.js';
+import '../../ui/UserProfile.js';
+import '../../ui/ContextMenu.js';
+import '../../ui/SortByRow.js';
+import '../../index-42dda0be.js';
+import '../../utils/message/getOutgoingMessageState.js';
+
+const CreateChannel = props => {
+  const {
+    onCancel,
+    renderStepOne
+  } = props;
+  const {
+    step,
+    setStep,
+    userListQuery
+  } = useCreateChannelContext();
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, step === 0 && ((renderStepOne === null || renderStepOne === void 0 ? void 0 : renderStepOne()) || /*#__PURE__*/React__default.createElement(SelectChannelType, {
+    onCancel: onCancel
+  })), step === 1 && /*#__PURE__*/React__default.createElement(InviteUsers, {
+    userListQuery: userListQuery,
+    onCancel: () => {
+      setStep(0);
+      onCancel();
+    }
+  }));
+};
+
+export { CreateChannel as default };
+//# sourceMappingURL=CreateChannelUI.js.map

package/CreateChannel/components/InviteUsers.js

@@ -0,0 +1,198 @@
+import { _ as _objectSpread2 } from '../../_rollupPluginBabelHelpers-71645d31.js';
+import React__default, { useState, useContext, useEffect } from 'react';
+import { a as LocalizationContext } from '../../LocalizationContext-53fdaf30.js';
+import { u as useCreateChannelContext } from '../../CreateChannelProvider-d30736e3.js';
+import useSendbirdStateContext from '../../useSendbirdStateContext.js';
+import Modal from '../../ui/Modal.js';
+import { L as Label, b as LabelColors, a as LabelTypography } from '../../index-20f528de.js';
+import { ButtonTypes } from '../../ui/Button.js';
+import UserListItem from '../../ui/UserListItem.js';
+import '../../stringSet-63246007.js';
+import '../../index-b596c800.js';
+import '../../sendbirdSelectors.js';
+import '../../topics-86131d90.js';
+import '../../utils-b0301443.js';
+import '../../withSendbird.js';
+import 'react-dom';
+import '../../index-869e67e8.js';
+import '../../ui/Icon.js';
+import 'prop-types';
+import '../../ui/IconButton.js';
+import '../../MediaQueryContext-6fca0d36.js';
+import '../../UserProfileContext-0041c5c2.js';
+import '../../ui/Avatar.js';
+import '../../ui/ImageRenderer.js';
+import '../../uuid-d94880c0.js';
+import '../../ui/MutedAvatarOverlay.js';
+import '../../ui/Checkbox.js';
+import '../../ui/UserProfile.js';
+import '../../ui/ContextMenu.js';
+import '../../ui/SortByRow.js';
+import '../../index-42dda0be.js';
+import '../../utils/message/getOutgoingMessageState.js';
+
+const filterUser = idsToFilter => currentId => idsToFilter === null || idsToFilter === void 0 ? void 0 : idsToFilter.includes(currentId);
+const setChannelType = (params, type) => {
+  if (type === 'broadcast') {
+    // eslint-disable-next-line no-param-reassign
+    params.isBroadcast = true;
+  }
+  if (type === 'supergroup') {
+    // eslint-disable-next-line no-param-reassign
+    params.isSuper = true;
+  }
+  return params;
+};
+const createDefaultUserListQuery = _ref => {
+  let {
+    sdk,
+    userFilledApplicationUserListQuery
+  } = _ref;
+  if (sdk !== null && sdk !== void 0 && sdk.createApplicationUserListQuery) {
+    const params = sdk === null || sdk === void 0 ? void 0 : sdk.createApplicationUserListQuery();
+    if (userFilledApplicationUserListQuery) {
+      Object.keys(userFilledApplicationUserListQuery).forEach(key => {
+        params[key] = userFilledApplicationUserListQuery[key];
+      });
+    }
+    return params;
+  }
+};
+
+const appHeight = () => {
+  try {
+    const doc = document.documentElement;
+    doc.style.setProperty('--sendbird-vh', window.innerHeight * 0.01 + 'px');
+  } catch (_unused) {
+    //
+  }
+};
+const BUFFER = 50;
+const InviteUsers = _ref => {
+  var _globalStore$config, _globalStore$stores, _globalStore$stores$s;
+  let {
+    onCancel,
+    userListQuery
+  } = _ref;
+  const {
+    onBeforeCreateChannel,
+    onCreateChannel,
+    overrideInviteUser,
+    createChannel,
+    type
+  } = useCreateChannelContext();
+  const globalStore = useSendbirdStateContext();
+  const userId = globalStore === null || globalStore === void 0 ? void 0 : (_globalStore$config = globalStore.config) === null || _globalStore$config === void 0 ? void 0 : _globalStore$config.userId;
+  const sdk = globalStore === null || globalStore === void 0 ? void 0 : (_globalStore$stores = globalStore.stores) === null || _globalStore$stores === void 0 ? void 0 : (_globalStore$stores$s = _globalStore$stores.sdkStore) === null || _globalStore$stores$s === void 0 ? void 0 : _globalStore$stores$s.sdk;
+  const idsToFilter = [userId];
+  const [users, setUsers] = useState([]);
+  const [selectedUsers, setSelectedUsers] = useState({});
+  const {
+    stringSet
+  } = useContext(LocalizationContext);
+  const [usersDataSource, setUsersDataSource] = useState(null);
+  const selectedCount = Object.keys(selectedUsers).length;
+  const titleText = stringSet.MODAL__CREATE_CHANNEL__TITLE;
+  const submitText = stringSet.BUTTON__CREATE;
+  const userQueryCreator = userListQuery ? userListQuery() : createDefaultUserListQuery({
+    sdk
+  });
+  useEffect(() => {
+    const applicationUserListQuery = userQueryCreator;
+    setUsersDataSource(applicationUserListQuery);
+    // @ts-ignore
+    if (!(applicationUserListQuery !== null && applicationUserListQuery !== void 0 && applicationUserListQuery.isLoading)) {
+      applicationUserListQuery.next().then(users_ => {
+        setUsers(users_);
+      });
+    }
+  }, []);
+
+  // https://stackoverflow.com/a/70302463
+  // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/#css-custom-properties-the-trick-to-correct-sizing
+  // to fix navbar break in mobile
+  useEffect(() => {
+    appHeight();
+    window.addEventListener('resize', appHeight);
+    return () => {
+      window.removeEventListener('resize', appHeight);
+    };
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Modal, {
+    isFullScreenOnMobile: true,
+    titleText: titleText,
+    submitText: submitText,
+    type: ButtonTypes.PRIMARY
+    // Disable the create button if no users are selected,
+    // but if there's only the logged-in user in the user list,
+    // then the create button should be enabled
+    ,
+    disabled: users.length > 1 && Object.keys(selectedUsers).length === 0,
+    onCancel: onCancel,
+    onSubmit: () => {
+      const selectedUserList = Object.keys(selectedUsers).length > 0 ? Object.keys(selectedUsers) : [userId];
+      if (typeof overrideInviteUser === 'function') {
+        overrideInviteUser({
+          users: selectedUserList,
+          onClose: onCancel,
+          channelType: type
+        });
+        return;
+      }
+      if (onBeforeCreateChannel) {
+        const params = onBeforeCreateChannel(selectedUserList);
+        setChannelType(params, type);
+        createChannel(params).then(channel => {
+          onCreateChannel(channel);
+        });
+      } else {
+        const params = {};
+        params.invitedUserIds = selectedUserList;
+        params.isDistinct = false;
+        if (userId) {
+          params.operatorUserIds = [userId];
+        }
+        setChannelType(params, type);
+        // do not have custom params
+        createChannel(params).then(channel => {
+          onCreateChannel(channel);
+        });
+      }
+      onCancel();
+    }
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Label, {
+    color: selectedCount > 0 ? LabelColors.PRIMARY : LabelColors.ONBACKGROUND_3,
+    type: LabelTypography.CAPTION_1
+  }, `${selectedCount} ${stringSet.MODAL__INVITE_MEMBER__SELECTED}`), /*#__PURE__*/React__default.createElement("div", {
+    className: "sendbird-create-channel--scroll",
+    onScroll: e => {
+      const eventTarget = e.target;
+      const {
+        hasNext
+      } = usersDataSource;
+      const fetchMore = eventTarget.clientHeight + eventTarget.scrollTop + BUFFER > eventTarget.scrollHeight;
+      if (hasNext && fetchMore) {
+        usersDataSource.next().then(usersBatch => {
+          setUsers([...users, ...usersBatch]);
+        });
+      }
+    }
+  }, users.map(user => !filterUser(idsToFilter)(user.userId) && /*#__PURE__*/React__default.createElement(UserListItem, {
+    key: user.userId,
+    user: user,
+    checkBox: true,
+    checked: selectedUsers[user.userId],
+    onChange: event => {
+      const modifiedSelectedUsers = _objectSpread2(_objectSpread2({}, selectedUsers), {}, {
+        [event.target.id]: event.target.checked
+      });
+      if (!event.target.checked) {
+        delete modifiedSelectedUsers[event.target.id];
+      }
+      setSelectedUsers(modifiedSelectedUsers);
+    }
+  })))));
+};
+
+export { InviteUsers as default };
+//# sourceMappingURL=InviteUsers.js.map