fix: reduce emoji-mart peer requirements, add "typesVersions"

Author: arnautov-anton

docusaurus/docs/React/basics/getting-started.mdx

@@ -176,6 +176,14 @@ The [`MessageInput`](../components/message-input-components/message-input.mdx) c
 
 The [`Thread`](../components/core-components/thread.mdx) component renders a list of replies tied to a single parent message in a channel's main message list. A `Thread` maintains its own state and renders its own `MessageList` and `MessageInput` components.
 
+### Emojis (picker & autocomplete)
+
+The SDK is equipped with features designed to facilitate seamless integration, enabling developers to effortlessly incorporate emoji picker and emoji autocomplete (built on top of [`emoji-mart`](https://github.com/missive/emoji-mart)) functionalities for a comprehensive chat experience.
+
+Starting from version `11.0.0`, these features are entirely optional, requiring integrators to opt-in manually. The decision was made in conjunction with enhanced architecture, aiming to reduce the overall size of the final bundles of our integrators.
+
+Make sure to read ["EmojiPicker 11.0.0"](../release-guides/emoji-picker-v11.mdx) and ["emojiSearchIndex 11.0.0"](../release-guides/emoji-search-index-v11.mdx) release guides for more information.
+
 ## Summary
 
 In addition to the above referenced UI components, client instantiation, and user connection, you need little other code to get a fully functioning chat application up and running. See below for an example of the complete code.

docusaurus/docs/React/guides/channel-list-infinite-scroll.mdx

@@ -28,20 +28,19 @@ import { ChannelList, InfiniteScroll } from 'stream-chat-react';
 If you would like to adjust the configuration parameters like `threshold`, `reverse` (`PaginatorProps`) or `useCapture`, etc. (`InfiniteScrollProps`), you can create a wrapper component where these props can be set:
 
 ```tsx
-import {
-  ChannelList,
-  InfiniteScroll,
-  InfiniteScrollProps
-} from 'stream-chat-react';
-
+import { ChannelList, InfiniteScroll, InfiniteScrollProps } from 'stream-chat-react';
 
 const Paginator = (props: InfiniteScrollProps) => <InfiniteScroll {...props} threshold={50} />;
 
-...
-<ChannelList filters={filters} sort={sort} options={options}
-             Paginator={Paginator}
-             showChannelSearch
-/>
+// ...
+
+<ChannelList
+  filters={filters}
+  sort={sort}
+  options={options}
+  Paginator={Paginator}
+  showChannelSearch
+/>;
 ```
 
 Especially the `threshold` prop may need to be set as the default is 250px. That may be too soon to load more channels.

docusaurus/docs/React/release-guides/emoji-picker-v11.mdx

@@ -21,10 +21,10 @@ We made `emoji-mart` package in our SDK completely optional which means that `Em
 
 ### Reinstate the `EmojiPicker` component
 
-To reinstate the previous behavior you'll have to add `emoji-mart` to your packages and make sure the package versions fit our peer-dependency requirements:
+To reinstate the previous behavior you'll have to add `emoji-mart` to your packages and make sure the packages come with versions that fit our peer-dependency requirements:
 
 ```bash
-yarn add emoji-mart@^5.5.2 @emoji-mart/data@^1.1.2 @emoji-mart/react@^1.1.1
+yarn add emoji-mart @emoji-mart/data @emoji-mart/react
 ```
 
 Import `EmojiPicker` component from the `stream-chat-react` package:
@@ -42,7 +42,7 @@ const WrappedChannel = ({ children }) => {
 
 ### Build your custom `EmojiPicker` (with example)
 
-If `emoji-mart` is too heavy for your use-case and you'd like to build your own you can certainly do so, here's a simple `EmojiPicker` built using `emoji-picker-react` package:
+If `emoji-mart` is too heavy for your use-case and you'd like to build your own you can certainly do so, here's a very simple `EmojiPicker` example built using `emoji-picker-react` package:
 
 ```tsx
 import EmojiPicker from 'emoji-picker-react';
@@ -72,7 +72,7 @@ export const CustomEmojiPicker = () => {
 // and pass it down to the `Channel` component
 ```
 
-You can make the component slightly better using [`FloatingUI`](https://floating-ui.com/) by wrapping the actual picker element to make it float perfectly positioned above the button. See the source of the component <GHComponentLink text="EmojiPicker" branch="feat/emoji-picker-delete" as="code" path="/Emojis/EmojiPicker.tsx" /> which comes with the SDK for inspiration.
+You can make the component slightly better using [`FloatingUI`](https://floating-ui.com/) by wrapping the actual picker element to make it float perfectly positioned above the button. See the source of the <GHComponentLink text="EmojiPicker" branch="feat/emoji-picker-delete" as="code" path="/Emojis/EmojiPicker.tsx" /> component which comes with the SDK for inspiration.
 
 ## Old `emoji-mart` (v3.0.1)
 

docusaurus/docs/React/release-guides/emoji-search-index-v11.mdx

@@ -14,7 +14,7 @@ By default, our SDK comes bundled with the `emoji-mart`'s [`emojiIndex`](https:/
 Add `emoji-mart` to your packages and make sure the package versions fit our peer-dependency requirements:
 
 ```bash
-yarn add emoji-mart@^5.5.2 @emoji-mart/data@^1.1.2
+yarn add emoji-mart @emoji-mart/data
 ```
 
 Import `SearchIndex` and `data` from `emoji-mart`, initiate these data and then and pass `SearchIndex` to our `MessageInput` component:

docusaurus/docs/React/release-guides/reactions-v11.mdx

@@ -14,7 +14,7 @@ When it came to developer experience regarding customization of the reaction com
 ### Main reasons for a revamp
 
 - inability to reuse default (Stream supplied reactions) with your custom ones
-- strong reliance on [`EmojiMart`](https://github.com/missive/emoji-mart) and inability to use completely custom reactions out of the box
+- strong reliance on [`emoji-mart`](https://github.com/missive/emoji-mart) and inability to use completely custom reactions out of the box
 - certain `additionalEmojiProps` did not work with Stream-supplied reactions
 
 ```tsx
@@ -38,7 +38,7 @@ export const customReactions = [
 
 ## New default setup and how it works
 
-SDK by default comes with five pre-defined reaction types (`haha`, `like`, `love`, `sad` and `wow`) which are newly rendered by <GHComponentLink text='StreamEmoji' branch="feat/reactions" path='/Reactions/StreamEmoji.tsx'/> component which utilises sprite sheet system and renders images for each reaction to make sure it works flawlessly on every system. Default reaction options are defined in <GHComponentLink text='defaultReactionOptions' branch="feat/reactions" path='/Reactions/reactionOptions.tsx'/> and these options are reused for both [`ReactionSelector`](../components/message-components/reactions.mdx) and [`ReactionsList`](../components/message-components/reactions.mdx) (as well as [`SimpleReactionsList`](../components/message-components/reactions.mdx)). These options come by default from the ComponentContext but local component property will be prioritised if defined. This is how it works under the hood:
+SDK by default comes with five pre-defined reaction types (`haha`, `like`, `love`, `sad` and `wow`) which are newly rendered by <GHComponentLink text='StreamEmoji' branch="feat/reactions" path='/Reactions/StreamEmoji.tsx'/> component which utilises sprite sheet system and renders images for each reaction to make sure it works flawlessly on every system. Default reaction options are defined in <GHComponentLink text='defaultReactionOptions' branch="feat/reactions" path='/Reactions/reactionOptions.tsx'/> and these options are reused for both [`ReactionSelector`](../components/message-components/reactions.mdx#reactionselector-props) and [`ReactionsList`](../components/message-components/reactions.mdx#reactionslist-props) (as well as [`SimpleReactionsList`](../components/message-components/reactions.mdx#simplereactionslist-props)). These options come by default from the ComponentContext but local component property will be prioritised if defined. This is how it works under the hood:
 
 ```ts
 contextReactionOptions = defaultReactionOptions;
@@ -75,7 +75,7 @@ const customReactionOptions = [
 ];
 ```
 
-And then you can pass these newly created options to [`Channel`](../components/core-components/channel) component which will be then propagated to `ReactionSelector` and `ReactionsList`:
+And then you can pass these newly created options to [`Channel`](../components/core-components/channel.mdx) component which will be then propagated to `ReactionSelector` and `ReactionsList`:
 
 ```tsx
 <Channel reactionOptions={customReactionOptions}>{/*...*/}</Channel>
@@ -234,7 +234,7 @@ const newReactionOptions = [
 ];
 ```
 
-All of the extra options previously applied to `EmojiMart` emojis can now be directly applied to your custom components either manually or through your custom context. For more information see [EmojiMart integration](#emojimart-integration).
+All of the extra options previously applied to `EmojiMart` emojis can now be directly applied to your custom components either manually or through your custom context. For more information see [EmojiMart integration](#emoji-mart-integration).
 
 ### Re-enabling `angry` reaction
 

package.json

@@ -38,6 +38,13 @@
       "default": "./dist/scss/*"
     }
   },
+  "typesVersions": {
+    "*": {
+      "emojis": [
+        "./dist/components/Emojis/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": [
     "*.css"
   ],
@@ -87,9 +94,9 @@
     "mml-react": "^0.4.7"
   },
   "peerDependencies": {
-    "@emoji-mart/data": "^1.1.2",
-    "@emoji-mart/react": "^1.1.1",
-    "emoji-mart": "^5.5.2",
+    "@emoji-mart/data": "^1.1.0",
+    "@emoji-mart/react": "^1.1.0",
+    "emoji-mart": "^5.4.0",
     "react": "^18.0.0 || ^17.0.0 || ^16.8.0",
     "react-dom": "^18.0.0 || ^17.0.0 || ^16.8.0",
     "stream-chat": "^8.0.0"