@sendbird/uikit-react 3.0.0-beta → 3.0.0-beta.2

package/OpenChannelSettings/components/EditDetailsModal.js

@@ -1,29 +1,29 @@
 import React__default, { useRef, useState, useContext } from 'react';
-import { a as LocalizationContext } from '../../LocalizationContext-e4391013.js';
+import { a as LocalizationContext } from '../../LocalizationContext-b021af8f.js';
 import Modal from '../../ui/Modal.js';
 import Input, { InputLabel } from '../../ui/Input.js';
 import Avatar from '../../ui/Avatar.js';
-import { T as Type } from '../../index-acebc2ff.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-7a51bd16.js';
+import { T as Type } from '../../index-41a6f4f2.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-a611bd38.js';
 import TextButton from '../../ui/TextButton.js';
 import ChannelAvatar from '../../ui/OpenChannelAvatar.js';
 import { useOpenChannelSettings } from '../context.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import '../../stringSet-4f6eaa60.js';
-import '../../index-6ebf7894.js';
+import '../../stringSet-91746bf1.js';
+import '../../index-353f13f3.js';
 import 'prop-types';
 import 'react-dom';
-import '../../index-942c85a6.js';
+import '../../index-1fd114b0.js';
 import '../../ui/IconButton.js';
-import '../../_rollupPluginBabelHelpers-20904f21.js';
+import '../../_rollupPluginBabelHelpers-8e4fae98.js';
 import '../../ui/Icon.js';
-import '../../utils-c393e880.js';
-import '../../tslib.es6-e3c44017.js';
+import '../../utils-9ef11656.js';
+import '../../tslib.es6-83aa13f5.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-b0c93400.js';
-import '../../color-ee3fc5ee.js';
-import '../../utils-08c4dbdc.js';
-import '../../UserProfileContext-865db5e6.js';
+import '../../uuid-6d14d007.js';
+import '../../color-2863fbbe.js';
+import '../../utils-7d39b941.js';
+import '../../UserProfileContext-daa99f9b.js';
 import '../../withSendBird.js';
 
 var EditDetails = function EditDetails(props) {

package/OpenChannelSettings/components/OpenChannelProfile.js

@@ -1,31 +1,31 @@
 import React__default, { useState, useContext } from 'react';
-import { a as LocalizationContext } from '../../LocalizationContext-e4391013.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-7a51bd16.js';
+import { a as LocalizationContext } from '../../LocalizationContext-b021af8f.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-a611bd38.js';
 import TextButton from '../../ui/TextButton.js';
 import ChannelAvatar from '../../ui/OpenChannelAvatar.js';
 import EditDetails from './EditDetailsModal.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
 import { useOpenChannelSettings } from '../context.js';
-import '../../stringSet-4f6eaa60.js';
-import '../../index-6ebf7894.js';
-import '../../_rollupPluginBabelHelpers-20904f21.js';
+import '../../stringSet-91746bf1.js';
+import '../../index-353f13f3.js';
+import '../../_rollupPluginBabelHelpers-8e4fae98.js';
 import 'prop-types';
-import '../../color-ee3fc5ee.js';
+import '../../color-2863fbbe.js';
 import '../../ui/Avatar.js';
-import '../../tslib.es6-e3c44017.js';
+import '../../tslib.es6-83aa13f5.js';
 import '../../ui/ImageRenderer.js';
 import '../../ui/Icon.js';
-import '../../uuid-b0c93400.js';
-import '../../utils-08c4dbdc.js';
+import '../../uuid-6d14d007.js';
+import '../../utils-7d39b941.js';
 import '../../ui/Modal.js';
 import 'react-dom';
-import '../../index-942c85a6.js';
+import '../../index-1fd114b0.js';
 import '../../ui/IconButton.js';
-import '../../index-acebc2ff.js';
-import '../../utils-c393e880.js';
+import '../../index-41a6f4f2.js';
+import '../../utils-9ef11656.js';
 import '../../ui/Input.js';
 import '../../withSendBird.js';
-import '../../UserProfileContext-865db5e6.js';
+import '../../UserProfileContext-daa99f9b.js';
 
 function ChannelProfile() {
   var _a, _b;

package/OpenChannelSettings/components/OpenChannelSettingsUI.js

@@ -1,47 +1,47 @@
 import React__default, { useContext } from 'react';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
 import { useOpenChannelSettings } from '../context.js';
-import { U as UserProfileProvider } from '../../UserProfileContext-865db5e6.js';
-import { a as LocalizationContext } from '../../LocalizationContext-e4391013.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-7a51bd16.js';
+import { U as UserProfileProvider } from '../../UserProfileContext-daa99f9b.js';
+import { a as LocalizationContext } from '../../LocalizationContext-b021af8f.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-a611bd38.js';
 import Icon, { IconTypes } from '../../ui/Icon.js';
-import { P as PlaceHolder, b as PlaceHolderTypes } from '../../index-e818a8a3.js';
+import { P as PlaceHolder, b as PlaceHolderTypes } from '../../index-303a3b6e.js';
 import { OperatorUI } from './OperatorUI.js';
 import ParticipantsList from './ParticipantUI.js';
 import '../../withSendBird.js';
-import '../../_rollupPluginBabelHelpers-20904f21.js';
+import '../../_rollupPluginBabelHelpers-8e4fae98.js';
 import 'prop-types';
-import '../../stringSet-4f6eaa60.js';
-import '../../index-6ebf7894.js';
+import '../../stringSet-91746bf1.js';
+import '../../index-353f13f3.js';
 import '../../ui/Loader.js';
 import './OpenChannelProfile.js';
 import '../../ui/TextButton.js';
-import '../../color-ee3fc5ee.js';
+import '../../color-2863fbbe.js';
 import '../../ui/OpenChannelAvatar.js';
 import '../../ui/Avatar.js';
-import '../../tslib.es6-e3c44017.js';
+import '../../tslib.es6-83aa13f5.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-b0c93400.js';
-import '../../utils-08c4dbdc.js';
+import '../../uuid-6d14d007.js';
+import '../../utils-7d39b941.js';
 import './EditDetailsModal.js';
 import '../../ui/Modal.js';
 import 'react-dom';
-import '../../index-942c85a6.js';
+import '../../index-1fd114b0.js';
 import '../../ui/IconButton.js';
-import '../../index-acebc2ff.js';
-import '../../utils-c393e880.js';
+import '../../index-41a6f4f2.js';
+import '../../utils-9ef11656.js';
 import '../../ui/Input.js';
 import '../../ui/Accordion.js';
 import '../../ui/AccordionGroup.js';
-import '../../context-98ce535c.js';
+import '../../context-7877e5bb.js';
 import '../../ui/UserListItem.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/Checkbox.js';
 import '../../ui/UserProfile.js';
 import '../../sendBirdSelectors.js';
-import '../../topics-9442035c.js';
+import '../../topics-17d99dd6.js';
 import '../../ui/ContextMenu.js';
-import '../../index-8c72a94a.js';
+import '../../index-ad4c9e58.js';
 import '../../ui/SortByRow.js';
 
 function InvalidChannel(_a) {

package/OpenChannelSettings/components/OperatorUI.js

@@ -1,6 +1,6 @@
 import React__default, { useState, useContext } from 'react';
-import { a as LocalizationContext } from '../../LocalizationContext-e4391013.js';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-7a51bd16.js';
+import { a as LocalizationContext } from '../../LocalizationContext-b021af8f.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-a611bd38.js';
 import Icon, { IconTypes } from '../../ui/Icon.js';
 import { useOpenChannelSettings } from '../context.js';
 import ChannelProfile from './OpenChannelProfile.js';
@@ -8,36 +8,36 @@ import Modal from '../../ui/Modal.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
 import ParticipantsList from './ParticipantUI.js';
 import { AccordionGroup } from '../../ui/Accordion.js';
-import '../../stringSet-4f6eaa60.js';
-import '../../index-6ebf7894.js';
-import '../../_rollupPluginBabelHelpers-20904f21.js';
+import '../../stringSet-91746bf1.js';
+import '../../index-353f13f3.js';
+import '../../_rollupPluginBabelHelpers-8e4fae98.js';
 import 'prop-types';
-import '../../UserProfileContext-865db5e6.js';
+import '../../UserProfileContext-daa99f9b.js';
 import '../../withSendBird.js';
 import '../../ui/TextButton.js';
-import '../../color-ee3fc5ee.js';
+import '../../color-2863fbbe.js';
 import '../../ui/OpenChannelAvatar.js';
 import '../../ui/Avatar.js';
-import '../../tslib.es6-e3c44017.js';
+import '../../tslib.es6-83aa13f5.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-b0c93400.js';
-import '../../utils-08c4dbdc.js';
+import '../../uuid-6d14d007.js';
+import '../../utils-7d39b941.js';
 import './EditDetailsModal.js';
 import '../../ui/Input.js';
-import '../../index-acebc2ff.js';
+import '../../index-41a6f4f2.js';
 import 'react-dom';
-import '../../index-942c85a6.js';
+import '../../index-1fd114b0.js';
 import '../../ui/IconButton.js';
-import '../../utils-c393e880.js';
-import '../../context-98ce535c.js';
+import '../../utils-9ef11656.js';
+import '../../context-7877e5bb.js';
 import '../../ui/UserListItem.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/Checkbox.js';
 import '../../ui/UserProfile.js';
 import '../../sendBirdSelectors.js';
-import '../../topics-9442035c.js';
+import '../../topics-17d99dd6.js';
 import '../../ui/ContextMenu.js';
-import '../../index-8c72a94a.js';
+import '../../index-ad4c9e58.js';
 import '../../ui/SortByRow.js';
 import '../../ui/AccordionGroup.js';
 

package/OpenChannelSettings/components/ParticipantUI.js

@@ -1,11 +1,11 @@
-import { a as __spreadArray } from '../../tslib.es6-e3c44017.js';
+import { a as __spreadArray } from '../../tslib.es6-83aa13f5.js';
 import React__default, { useRef, useContext, useState, useEffect } from 'react';
-import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-7a51bd16.js';
+import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-a611bd38.js';
 import Icon, { IconTypes } from '../../ui/Icon.js';
-import { a as LocalizationContext } from '../../LocalizationContext-e4391013.js';
-import { a as UserProfileContext } from '../../UserProfileContext-865db5e6.js';
-import '../../index-acebc2ff.js';
-import '../../context-98ce535c.js';
+import { a as LocalizationContext } from '../../LocalizationContext-b021af8f.js';
+import { a as UserProfileContext } from '../../UserProfileContext-daa99f9b.js';
+import '../../index-41a6f4f2.js';
+import '../../context-7877e5bb.js';
 import Avatar from '../../ui/Avatar.js';
 import '../../ui/Modal.js';
 import '../../ui/UserListItem.js';
@@ -13,22 +13,22 @@ import ConnectedUserProfile from '../../ui/UserProfile.js';
 import ContextMenu, { MenuItems } from '../../ui/ContextMenu.js';
 import { useOpenChannelSettings } from '../context.js';
 import useSendbirdStateContext from '../../useSendbirdStateContext.js';
-import '../../_rollupPluginBabelHelpers-20904f21.js';
+import '../../_rollupPluginBabelHelpers-8e4fae98.js';
 import 'prop-types';
-import '../../stringSet-4f6eaa60.js';
-import '../../index-6ebf7894.js';
-import '../../utils-c393e880.js';
+import '../../stringSet-91746bf1.js';
+import '../../index-353f13f3.js';
+import '../../utils-9ef11656.js';
 import '../../ui/ImageRenderer.js';
-import '../../uuid-b0c93400.js';
+import '../../uuid-6d14d007.js';
 import 'react-dom';
-import '../../index-942c85a6.js';
+import '../../index-1fd114b0.js';
 import '../../ui/IconButton.js';
 import '../../ui/MutedAvatarOverlay.js';
 import '../../ui/Checkbox.js';
 import '../../withSendBird.js';
 import '../../sendBirdSelectors.js';
-import '../../topics-9442035c.js';
-import '../../index-8c72a94a.js';
+import '../../topics-17d99dd6.js';
+import '../../index-ad4c9e58.js';
 import '../../ui/SortByRow.js';
 
 var UserListItem = function UserListItem(_a) {

package/OpenChannelSettings/context.js

@@ -1,8 +1,8 @@
 import React__default, { useState, useEffect } from 'react';
 import useSendbirdStateContext from '../useSendbirdStateContext.js';
-import { U as UserProfileProvider } from '../UserProfileContext-865db5e6.js';
+import { U as UserProfileProvider } from '../UserProfileContext-daa99f9b.js';
 import '../withSendBird.js';
-import '../_rollupPluginBabelHelpers-20904f21.js';
+import '../_rollupPluginBabelHelpers-8e4fae98.js';
 import 'prop-types';
 
 var OpenChannelSettingsContext = /*#__PURE__*/React__default.createContext(undefined);

package/OpenChannelSettings.js

@@ -3,44 +3,44 @@ import OpenChannelUI from './OpenChannelSettings/components/OpenChannelSettingsU
 import { OpenChannelSettingsProvider } from './OpenChannelSettings/context.js';
 import './useSendbirdStateContext.js';
 import './withSendBird.js';
-import './_rollupPluginBabelHelpers-20904f21.js';
-import './UserProfileContext-865db5e6.js';
+import './_rollupPluginBabelHelpers-8e4fae98.js';
+import './UserProfileContext-daa99f9b.js';
 import 'prop-types';
-import './LocalizationContext-e4391013.js';
-import './stringSet-4f6eaa60.js';
-import './index-6ebf7894.js';
-import './index-7a51bd16.js';
+import './LocalizationContext-b021af8f.js';
+import './stringSet-91746bf1.js';
+import './index-353f13f3.js';
+import './index-a611bd38.js';
 import './ui/Icon.js';
-import './index-e818a8a3.js';
+import './index-303a3b6e.js';
 import './ui/Loader.js';
 import './OpenChannelSettings/components/OperatorUI.js';
 import './OpenChannelSettings/components/OpenChannelProfile.js';
 import './ui/TextButton.js';
-import './color-ee3fc5ee.js';
+import './color-2863fbbe.js';
 import './ui/OpenChannelAvatar.js';
 import './ui/Avatar.js';
-import './tslib.es6-e3c44017.js';
+import './tslib.es6-83aa13f5.js';
 import './ui/ImageRenderer.js';
-import './uuid-b0c93400.js';
-import './utils-08c4dbdc.js';
+import './uuid-6d14d007.js';
+import './utils-7d39b941.js';
 import './OpenChannelSettings/components/EditDetailsModal.js';
 import './ui/Modal.js';
 import 'react-dom';
-import './index-942c85a6.js';
+import './index-1fd114b0.js';
 import './ui/IconButton.js';
-import './index-acebc2ff.js';
-import './utils-c393e880.js';
+import './index-41a6f4f2.js';
+import './utils-9ef11656.js';
 import './ui/Input.js';
 import './OpenChannelSettings/components/ParticipantUI.js';
-import './context-98ce535c.js';
+import './context-7877e5bb.js';
 import './ui/UserListItem.js';
 import './ui/MutedAvatarOverlay.js';
 import './ui/Checkbox.js';
 import './ui/UserProfile.js';
 import './sendBirdSelectors.js';
-import './topics-9442035c.js';
+import './topics-17d99dd6.js';
 import './ui/ContextMenu.js';
-import './index-8c72a94a.js';
+import './index-ad4c9e58.js';
 import './ui/SortByRow.js';
 import './ui/Accordion.js';
 import './ui/AccordionGroup.js';

package/README.md

@@ -1,11 +1,19 @@
 # sendbird-uikit
 
-<img alt="Version 3 beta" src="https://img.shields.io/badge/beta-v3-orange" />
+[![Version 3 beta](https://img.shields.io/badge/Sendbird-BETA-blue.svg)](https://github.com/sendbird/sendbird-uikit-react/tree/develop-v3)
+[![Platform React](https://img.shields.io/badge/Platform-React-orange.svg)](https://reactjs.org)
+[![Language TypeScript](https://img.shields.io/badge/Language-TypeScript-orange.svg)](https://www.typescriptlang.org/)
 
 > React based UI kit based on sendbird javascript SDK
 
 We are introducing a new version of the Sendbird Chat UIKit. Version 3 features a new modular architecture with more granular components that give you enhanced flexibility to customize your web and mobile apps. Check out our [migration guides](MIGRATION_v2-to-v3.md).
 
+## Installation
+
+`npm i @sendbird/uikit-react`
+
+For typescript projects, add `node_modules/@sendbird/uikit-react/index.d.ts` to your `include` section in tsconfig file to get type definitions
+
 ## Getting Started
 
 With Sendbird UI Kit React, we export these components:

package/SendbirdProvider.js

@@ -1,23 +1,23 @@
-import { _ as _objectSpread2, a as _slicedToArray } from './_rollupPluginBabelHelpers-20904f21.js';
+import { _ as _objectSpread2, a as _slicedToArray } from './_rollupPluginBabelHelpers-8e4fae98.js';
 import React__default, { useLayoutEffect, useState, useEffect, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { SendbirdSdkContext } from './withSendBird.js';
 import Sb from 'sendbird';
-import { R as RESET_USER, I as INIT_USER, U as UPDATE_USER_INFO } from './actionTypes-1e3a4074.js';
-import { i as isTextuallyNull } from './index-8c72a94a.js';
-import { _ as __assign } from './tslib.es6-e3c44017.js';
+import { R as RESET_USER, I as INIT_USER, U as UPDATE_USER_INFO } from './actionTypes-189daf51.js';
+import { i as isTextuallyNull } from './index-ad4c9e58.js';
+import { _ as __assign } from './tslib.es6-83aa13f5.js';
 import cssVars from 'css-vars-ponyfill';
-import { u as uuidv4 } from './uuid-b0c93400.js';
-import { L as LocalizationProvider } from './LocalizationContext-e4391013.js';
-import { g as getStringSet } from './stringSet-4f6eaa60.js';
-import './index-6ebf7894.js';
+import { u as uuidv4 } from './uuid-6d14d007.js';
+import { L as LocalizationProvider } from './LocalizationContext-b021af8f.js';
+import { g as getStringSet } from './stringSet-91746bf1.js';
+import './index-353f13f3.js';
 
 var INIT_SDK = 'INIT_SDK';
 var SET_SDK_LOADING = 'SET_SDK_LOADING';
 var RESET_SDK = 'RESET_SDK';
 var SDK_ERROR = 'SDK_ERROR';
 
-var APP_VERSION_STRING = '3.0.0-alpha';
+var APP_VERSION_STRING = '3.0.0-beta.2';
 var disconnectSdk = function disconnectSdk(_ref) {
   var sdkDispatcher = _ref.sdkDispatcher,
       userDispatcher = _ref.userDispatcher,
@@ -550,9 +550,12 @@ function Sendbird(props) {
       colorSet = props.colorSet,
       stringSet = props.stringSet,
       imageCompression = props.imageCompression,
-      useReaction = props.useReaction;
+      useReaction = props.useReaction,
+      isMentionEnabled = props.isMentionEnabled;
   var _config$logLevel = config.logLevel,
-      logLevel = _config$logLevel === void 0 ? '' : _config$logLevel;
+      logLevel = _config$logLevel === void 0 ? '' : _config$logLevel,
+      _config$userMention = config.userMention,
+      userMention = _config$userMention === void 0 ? {} : _config$userMention;
 
   var _useState = useState(LoggerFactory(logLevel)),
       _useState2 = _slicedToArray(_useState, 2),
@@ -681,7 +684,12 @@ function Sendbird(props) {
         logger: logger,
         pubSub: pubSub,
         imageCompression: imageCompression,
-        useReaction: useReaction
+        useReaction: useReaction,
+        isMentionEnabled: isMentionEnabled || false,
+        userMention: {
+          maxMentionCount: (userMention === null || userMention === void 0 ? void 0 : userMention.maxMentionCount) || 10,
+          maxSuggestionCount: (userMention === null || userMention === void 0 ? void 0 : userMention.maxSuggestionCount) || 15
+        }
       }
     }
   }, /*#__PURE__*/React__default.createElement(LocalizationProvider, {
@@ -708,11 +716,16 @@ Sendbird.propTypes = {
     pubSub: PropTypes.shape({
       subscribe: PropTypes.func,
       publish: PropTypes.func
+    }),
+    userMention: PropTypes.shape({
+      maxMentionCount: PropTypes.number,
+      maxSuggestionCount: PropTypes.number
     })
   }),
   stringSet: PropTypes.objectOf(PropTypes.string),
   colorSet: PropTypes.objectOf(PropTypes.string),
   useReaction: PropTypes.bool,
+  isMentionEnabled: PropTypes.bool,
   imageCompression: PropTypes.shape({
     compressionRate: PropTypes.number,
     resizingWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -733,7 +746,8 @@ Sendbird.defaultProps = {
   stringSet: null,
   colorSet: null,
   imageCompression: {},
-  useReaction: true
+  useReaction: true,
+  isMentionEnabled: false
 };
 
 export { Sendbird as default };