merge master

Author: DanC5

.eslintignore

@@ -17,3 +17,4 @@ babel.i18next-extract.js
 /built
 /coverage
 types/index.d.ts
+src/components/Channel/types.ts

.github/workflows/ci.yml

@@ -17,19 +17,14 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
 
-      - name: Get yarn cache directory path
-        id: yarn-cache-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@master
-        id: yarn-cache
+      - name: Cache Dependencies
+        uses: actions/cache@v2
         with:
-          path: ${{ steps.yarn-cache-path.outputs.dir }}
-          key: yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: yarn-
+          path: ./node_modules
+          key: ${{ runner.os }}-${{ matrix.node }}-modules-${{ hashFiles('**/yarn.lock') }}
 
-      - name: Install dependencies
-        run: yarn install
+      - name: Install Dependencies & Build
+        run: yarn install --frozen-lockfile
 
       - name: Lint and Test with ${{ matrix.node }}
         env:

.github/workflows/size.yml

@@ -1,6 +1,12 @@
 name: Compressed Size
 
-on: [pull_request]
+on:
+  pull_request:
+    branches:
+      - master
+    paths-ignore:
+      - '**.test.js'
+      - '**.md'
 
 jobs:
   build:
@@ -9,5 +15,5 @@ jobs:
       - uses: actions/checkout@v2
       - uses: preactjs/[email protected]
         with:
-          repo-token: "${{ secrets.GITHUB_TOKEN }}"
-          pattern: "./dist/**/*.{js,css,json}"
+          repo-token: '${{ secrets.GITHUB_TOKEN }}'
+          pattern: './dist/**/*.{js,css,json}'

CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## [3.5.3](https://github.com/GetStream/stream-chat-react/releases/tag/v3.5.3) 2021-01-26
+
+### Feature
+
+- `ChannelList` accepts an optional prop to filter/sort channels prior to render [#678](https://github.com/GetStream/stream-chat-react/pull/678)
+
+## [3.5.2](https://github.com/GetStream/stream-chat-react/releases/tag/v3.5.2) 2021-01-21
+
+### Fix
+
+- Handle emoji picker event listener race condition [#675](https://github.com/GetStream/stream-chat-react/pull/675)
+- Adjust style for only emoji messages [#676](https://github.com/GetStream/stream-chat-react/pull/676)
+
+## [3.5.1](https://github.com/GetStream/stream-chat-react/releases/tag/v3.5.1) 2021-01-19
+
+### Fix
+
+- Upload PSD attachments as file [#673](https://github.com/GetStream/stream-chat-react/pull/673)
+
+### Chore
+
+- Bump MML-React [#674](https://github.com/GetStream/stream-chat-react/pull/674)
+
+## [3.5.0](https://github.com/GetStream/stream-chat-react/releases/tag/v3.5.0) 2021-01-15
+
+## Feature
+
+- Support typing indicator in Thread component [#662](https://github.com/GetStream/stream-chat-react/pull/662)
+- Add parent ID to typing events [#665](https://github.com/GetStream/stream-chat-react/pull/665)
+- Allow MessageInput emoji and file upload icon customization [#666](https://github.com/GetStream/stream-chat-react/pull/666)
+- Add optional `disableMentions` prop to MessageInput and update mentions UI [#669](https://github.com/GetStream/stream-chat-react/pull/669)
+
+## Fix
+
+- Fix maxLength paste text bug [#670](https://github.com/GetStream/stream-chat-react/pull/670)
+
 ## [3.4.6](https://github.com/GetStream/stream-chat-react/releases/tag/v3.4.6) 2021-01-08
 
 ## Feature

docs/build/bundle.571d5957.js renamed to docs/build/bundle.33cc8b6e.js

@@ -1,6 +1,6 @@
 /*! exports provided: 0, 128, 130, 131, 132, 133, 134, 135, 136, 137, 138, 139, 140, 142, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 158, 159, default */
 
-/*! exports provided: 1 reply, Attach files, Cancel, Channel Missing, Close, Commands matching, Connection failure, reconnecting now..., Delete, Delivered, Edit Message, Emoji matching, Empty message..., Error adding flag: Either the flag already exist or there is issue with network connection ..., Error connecting to chat, refresh the page to try again., Error muting a user ..., Error unmuting a user ..., Error · Unsent, Error: {{ errorMessage }}, Flag, Message Failed · Click to try again, Message deleted, Message failed. Click to try again., Message has been successfully flagged, Mute, New, New Messages!, Nothing yet..., Only visible to you, Open emoji picker, Pick your emoji, Searching for people, Send, Sending..., Start of a new thread, This message was deleted..., Thread, Type your message, Unmute, You have no channels currently, You've reached the maximum number of files, live, this content could not be displayed, {{ commaSeparatedUsers }} and {{ lastUser }} are typing..., {{ commaSeparatedUsers }} and {{ moreCount }} more, {{ commaSeparatedUsers }}, and {{ lastUser }}, {{ firstUser }} and {{ secondUser }}, {{ firstUser }} and {{ secondUser }} are typing..., {{ imageCount }} more, {{ memberCount }} members, {{ replyCount }} replies, {{ user }} has been muted, {{ user }} has been unmuted, {{ user }} is typing..., {{ watcherCount }} online, 🏙 Attachment..., default */
+/*! exports provided: 1 reply, Attach files, Cancel, Channel Missing, Close, Commands matching, Connection failure, reconnecting now..., Delete, Delivered, Edit Message, Emoji matching, Empty message..., Error adding flag: Either the flag already exist or there is issue with network connection ..., Error connecting to chat, refresh the page to try again., Error muting a user ..., Error unmuting a user ..., Error · Unsent, Error: {{ errorMessage }}, Flag, Message Failed · Click to try again, Message deleted, Message failed. Click to try again., Message has been successfully flagged, Mute, New, New Messages!, Nothing yet..., Only visible to you, Open emoji picker, People matching, Pick your emoji, Send, Sending..., Start of a new thread, This message was deleted..., Thread, Type your message, Unmute, You have no channels currently, You've reached the maximum number of files, live, this content could not be displayed, {{ commaSeparatedUsers }} and {{ lastUser }} are typing..., {{ commaSeparatedUsers }} and {{ moreCount }} more, {{ commaSeparatedUsers }}, and {{ lastUser }}, {{ firstUser }} and {{ secondUser }}, {{ firstUser }} and {{ secondUser }} are typing..., {{ imageCount }} more, {{ memberCount }} members, {{ replyCount }} replies, {{ user }} has been muted, {{ user }} has been unmuted, {{ user }} is typing..., {{ watcherCount }} online, 🏙 Attachment..., default */
 
 /*! exports provided: ACORN_OPTIONS, default */
 
@@ -16,7 +16,7 @@
 
 /*! exports provided: Attachment, Card, Audio, AttachmentActions, FileAttachment */
 
-/*! exports provided: Attachment, Card, Audio, AttachmentActions, FileAttachment, AutoCompleteTextarea, Item, List, listener, KEY_CODES, defaultScrollToItem, Avatar, ChannelPreview, ChannelPreviewCompact, ChannelPreviewCountOnly, ChannelPreviewLastMessage, ChannelPreviewMessenger, Channel, useChannelEditMessageHandler, useChannelMentionsHandler, ChannelHeader, ChannelList, ChannelListMessenger, ChannelListTeam, ChannelSearch, Chat, ChatAutoComplete, ChatDown, CommandItem, DateSeparator, EmoticonItem, EmptyStateIndicator, EventComponent, Gallery, ImageComponent, ModalImage, ModalWrapper, InfiniteScroll, InfiniteScrollPaginator, ReverseInfiniteScroll, LoadingChannels, LoadingErrorIndicator, LoadingIndicator, LoadMoreButton, LoadMorePaginator, Message, MessageCommerce, MessageLivestream, MessageSimple, MessageTeam, MessageRepliesCountButton, MessageOptions, MessageText, MessageDeleted, FixedHeightMessage, handleActionWarning, useActionHandler, useDeleteHandler, useEditHandler, missingUseFlagHandlerParameterWarning, useFlagHandler, useMentionsHandler, useMentionsUIHandler, missingUseMuteHandlerParamsWarning, useMuteHandler, useOpenThreadHandler, reactionHandlerWarning, useReactionHandler, useReactionClick, useRetryHandler, useUserHandler, useUserRole, validateAndGetMessage, isUserMuted, MESSAGE_ACTIONS, getMessageActions, areMessagePropsEqual, shouldMessageComponentUpdate, messageHasReactions, messageHasAttachments, getImages, getNonImageAttachments, getReadByTooltipText, MessagePropTypes, MessageActionsBox, MessageActions, MessageInput, MessageInputFlat, MessageInputLarge, MessageInputSmall, MessageInputSimple, EditMessageForm, EmojiPicker, SendButton, UploadsPreview, useMessageInput, MessageList, VirtualizedMessageList, MessageNotification, ConnectionStatus, Modal, ReactionSelector, ReactionsList, SimpleReactionsList, SafeAnchor, Thread, Tooltip, TypingIndicator, UserItem, Window */
+/*! exports provided: Attachment, Card, Audio, AttachmentActions, FileAttachment, AutoCompleteTextarea, Item, List, listener, KEY_CODES, defaultScrollToItem, Avatar, ChannelPreview, ChannelPreviewCompact, ChannelPreviewCountOnly, ChannelPreviewLastMessage, ChannelPreviewMessenger, Channel, useChannelEditMessageHandler, useChannelMentionsHandler, ChannelHeader, ChannelList, ChannelListMessenger, ChannelListTeam, ChannelSearch, Chat, ChatAutoComplete, ChatDown, CommandItem, DateSeparator, EmoticonItem, EmptyStateIndicator, EventComponent, Gallery, ImageComponent, ModalImage, ModalWrapper, InfiniteScroll, InfiniteScrollPaginator, ReverseInfiniteScroll, LoadingChannels, LoadingErrorIndicator, LoadingIndicator, LoadMoreButton, LoadMorePaginator, Message, MessageCommerce, MessageLivestream, MessageSimple, MessageTeam, MessageRepliesCountButton, MessageOptions, MessageText, MessageDeleted, FixedHeightMessage, handleActionWarning, useActionHandler, useDeleteHandler, useEditHandler, missingUseFlagHandlerParameterWarning, useFlagHandler, useMentionsHandler, useMentionsUIHandler, missingUseMuteHandlerParamsWarning, useMuteHandler, useOpenThreadHandler, reactionHandlerWarning, useReactionHandler, useReactionClick, useRetryHandler, useUserHandler, useUserRole, validateAndGetMessage, isUserMuted, MESSAGE_ACTIONS, getMessageActions, areMessagePropsEqual, shouldMessageComponentUpdate, messageHasReactions, messageHasAttachments, getImages, getNonImageAttachments, getReadByTooltipText, MessagePropTypes, MessageActionsBox, MessageActions, MessageInput, MessageInputFlat, MessageInputLarge, MessageInputSmall, MessageInputSimple, EditMessageForm, EmojiPicker, UploadsPreview, SendButton, useMessageInput, MessageList, VirtualizedMessageList, MessageNotification, ConnectionStatus, Modal, ReactionSelector, ReactionsList, SimpleReactionsList, SafeAnchor, Thread, Tooltip, TypingIndicator, UserItem, Window */
 
 /*! exports provided: AttachmentIcon, FileIcon, FilePreviewer, FileUploadButton, IconButton, ImageDropzone, ImagePreviewer, ImageUploadButton, LoadingIndicator, PictureIcon, Thumbnail, ThumbnailPlaceholder, dataTransferItemsHaveFiles, dataTransferItemsToFiles */
 
@@ -86,6 +86,8 @@
 
 /*! exports provided: Effect */
 
+/*! exports provided: EmojiIconLarge, EmojiIconSmall, FileUploadIcon, FileUploadIconFlat, default */
+
 /*! exports provided: EmojiPropTypes, PickerPropTypes */
 
 /*! exports provided: EmoticonItem */
@@ -148,7 +150,7 @@
 
 /*! exports provided: MessageActionsBox, MessageActions */
 
-/*! exports provided: MessageInput, MessageInputFlat, MessageInputLarge, MessageInputSmall, MessageInputSimple, EditMessageForm, EmojiPicker, SendButton, UploadsPreview, useMessageInput */
+/*! exports provided: MessageInput, MessageInputFlat, MessageInputLarge, MessageInputSmall, MessageInputSimple, EditMessageForm, EmojiPicker, UploadsPreview, SendButton, useMessageInput */
 
 /*! exports provided: MessageList, VirtualizedMessageList, MessageNotification, ConnectionStatus */
 
@@ -506,7 +508,7 @@
 
 /*! exports provided: useUserRole */
 
-/*! exports provided: v1, v3, v4, v5 */
+/*! exports provided: v1, v3, v4, v5, NIL, version, validate, stringify, parse */
 
 /*! exports provided: validateAndGetMessage, isUserMuted, MESSAGE_ACTIONS, getMessageActions, areMessagePropsEqual, shouldMessageComponentUpdate, messageHasReactions, messageHasAttachments, getImages, getNonImageAttachments, getReadByTooltipText, MessagePropTypes */
 
@@ -1760,6 +1762,10 @@
   !*** ./src/components/Gallery/ModalImage.js ***!
   \**********************************************/
 
+/*!**********************************************!*\
+  !*** ./src/components/MessageInput/icons.js ***!
+  \**********************************************/
+
 /*!**********************************************!*\
   !*** ./src/components/MessageInput/index.js ***!
   \**********************************************/
@@ -2348,6 +2354,10 @@
   !*** ./node_modules/uuid/dist/esm-browser/md5.js ***!
   \***************************************************/
 
+/*!***************************************************!*\
+  !*** ./node_modules/uuid/dist/esm-browser/nil.js ***!
+  \***************************************************/
+
 /*!***************************************************!*\
   !*** ./node_modules/uuid/dist/esm-browser/rng.js ***!
   \***************************************************/
@@ -2380,10 +2390,6 @@
   !*** ./src/components/Message/MessageCommerce.js ***!
   \***************************************************/
 
-/*!***************************************************!*\
-  !*** ./src/components/MessageInput/SendButton.js ***!
-  \***************************************************/
-
 /*!***************************************************!*\
   !*** ./src/components/MessageList/MessageList.js ***!
   \***************************************************/
@@ -2668,6 +2674,14 @@
   !*** ./node_modules/uuid/dist/esm-browser/index.js ***!
   \*****************************************************/
 
+/*!*****************************************************!*\
+  !*** ./node_modules/uuid/dist/esm-browser/parse.js ***!
+  \*****************************************************/
+
+/*!*****************************************************!*\
+  !*** ./node_modules/uuid/dist/esm-browser/regex.js ***!
+  \*****************************************************/
+
 /*!*****************************************************!*\
   !*** ./src/components/Attachment/FileAttachment.js ***!
   \*****************************************************/
@@ -2964,6 +2978,10 @@
   !*** ./node_modules/use-sidecar/dist/es2015/index.js ***!
   \*******************************************************/
 
+/*!*******************************************************!*\
+  !*** ./node_modules/uuid/dist/esm-browser/version.js ***!
+  \*******************************************************/
+
 /*!*******************************************************!*\
   !*** ./src/assets/Poweredby_100px-White_VertText.png ***!
   \*******************************************************/
@@ -3140,6 +3158,10 @@
   !*** ./node_modules/use-sidecar/dist/es2015/medium.js ***!
   \********************************************************/
 
+/*!********************************************************!*\
+  !*** ./node_modules/uuid/dist/esm-browser/validate.js ***!
+  \********************************************************/
+
 /*!********************************************************!*\
   !*** ./src/components/Attachment/AttachmentActions.js ***!
   \********************************************************/
@@ -3328,6 +3350,10 @@
   !*** ./node_modules/use-sidecar/dist/es2015/exports.js ***!
   \*********************************************************/
 
+/*!*********************************************************!*\
+  !*** ./node_modules/uuid/dist/esm-browser/stringify.js ***!
+  \*********************************************************/
+
 /*!*********************************************************!*\
   !*** ./src/components/AutoCompleteTextarea/Textarea.js ***!
   \*********************************************************/
@@ -3664,10 +3690,6 @@
   !*** ./node_modules/react-view-pager/lib/PagerElement.js ***!
   \***********************************************************/
 
-/*!***********************************************************!*\
-  !*** ./node_modules/uuid/dist/esm-browser/bytesToUuid.js ***!
-  \***********************************************************/
-
 /*!***********************************************************!*\
   !*** ./src/components/MessageInput/MessageInputSimple.js ***!
   \***********************************************************/

docs/build/bundle.571d5957.js.LICENSE.txt renamed to docs/build/bundle.33cc8b6e.js.LICENSE.txt

@@ -9,6 +9,6 @@
   </head>
   <body>
     <div id="rsg-root"></div>
-    <script src="build/bundle.571d5957.js"></script>
+    <script src="build/bundle.33cc8b6e.js"></script>
   </body>
 </html>

docs/index.html

@@ -6,7 +6,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "2.1.4",
-    "stream-chat": "^2.3.0",
+    "stream-chat": "^2.12.0",
     "stream-chat-react": "^2.4.1"
   },
   "scripts": {

examples/commerce/package.json

@@ -1,4 +1,3 @@
-/* eslint-disable */
 import React, { Component } from 'react';
 import { StreamChat } from 'stream-chat';
 import {
@@ -15,27 +14,25 @@ import 'stream-chat-react/dist/css/index.css';
 import './App.css';
 
 const urlParams = new URLSearchParams(window.location.search);
-// const user =
-//   urlParams.get('user') || process.env.REACT_APP_CHAT_API_DEFAULT_USER;
-const theme = urlParams.get('theme') || 'light';
+const apiKey = urlParams.get('apiKey') || 'qk4nn7rpcn75';
 const channelName = urlParams.get('channel') || 'demo';
-// const userToken =
-//   urlParams.get('user_token') ||
-//   process.env.REACT_APP_CHAT_API_DEFAULT_USER_TOKEN;
+const userId = urlParams.get('user') || 'example-user';
+const theme = urlParams.get('theme') || 'light';
+const userToken =
+  urlParams.get('user_token') ||
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiZXhhbXBsZS11c2VyIn0.HlC0dMKL43y3K_XbfvQS_Yc3V314HU4Z7LrBLil777g';
 
 class App extends Component {
   constructor(props) {
     super(props);
-    this.chatClient = new StreamChat('qk4nn7rpcn75');
+    this.chatClient = StreamChat.getInstance(apiKey);
+
     if (process.env.REACT_APP_CHAT_SERVER_ENDPOINT) {
       this.chatClient.setBaseURL(process.env.REACT_APP_CHAT_SERVER_ENDPOINT);
     }
-    this.chatClient.setUser(
-      {
-        id: 'example-user',
-      },
-      'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiZXhhbXBsZS11c2VyIn0.HlC0dMKL43y3K_XbfvQS_Yc3V314HU4Z7LrBLil777g',
-    );
+
+    this.chatClient.connectUser({ id: userId }, userToken);
+
     this.channel = this.chatClient.channel('commerce', channelName, {
       image: 'https://i.stack.imgur.com/e7G42m.jpg',
       name: 'Hello 👋',
@@ -60,34 +57,30 @@ class App extends Component {
 
   render() {
     return (
-      <>
-        <div className={`wrapper ${this.state.open ? 'wrapper--open' : ''}`}>
-          <Chat client={this.chatClient} theme={`commerce ${theme}`}>
-            <Channel
-              channel={this.channel}
-              onMentionsHover={(e, user) => console.log(e, user)}
-              onMentionsClick={(e, user) => console.log(e, user)}
-            >
-              <Window>
-                <ChannelHeader />
-                {this.state.open && <MessageList Message={MessageCommerce} />}
-                <MessageInput
-                  onFocus={!this.state.open ? this.toggleDemo : null}
-                  Input={MessageInputFlat}
-                  focus
-                />
-              </Window>
-            </Channel>
-          </Chat>
-          <Button onClick={this.toggleDemo} open={this.state.open} />
-        </div>
-      </>
+      <div className={`wrapper ${this.state.open ? 'wrapper--open' : ''}`}>
+        <Chat client={this.chatClient} theme={`commerce ${theme}`}>
+          <Channel
+            channel={this.channel}
+            onMentionsHover={(event, user) => console.log(event, user)}
+            onMentionsClick={(event, user) => console.log(event, user)}
+          >
+            <Window>
+              <ChannelHeader />
+              {this.state.open && <MessageList Message={MessageCommerce} />}
+              <MessageInput
+                onFocus={!this.state.open ? this.toggleDemo : null}
+                Input={MessageInputFlat}
+                focus
+              />
+            </Window>
+          </Channel>
+        </Chat>
+        <Button onClick={this.toggleDemo} open={this.state.open} />
+      </div>
     );
   }
 }
 
-export default App;
-
 const Button = ({ open, onClick }) => (
   <div
     onClick={onClick}
@@ -110,3 +103,5 @@ const Button = ({ open, onClick }) => (
     )}
   </div>
 );
+
+export default App;