Merge branch 'develop'

Author: petyosi

README.md

@@ -93,7 +93,7 @@ For components that implement significant logic, it's helpful to split the compo
 The preferred method for overriding the pre-defined styles in the library is to two step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
 
 ```js
-import 'stream-chat-css/dist/css/index.css';
+import '@stream-io/stream-chat-css/dist/css/index.css';
 import './App.css';
 ```
 

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

@@ -188,7 +188,7 @@ import {
   Thread,
   Window,
 } from 'stream-chat-react';
-import 'stream-chat-css/dist/css/index.css';
+import '@stream-io/stream-chat-css/dist/css/index.css';
 
 const filters = { type: 'messaging' };
 const options = { state: true, presence: true, limit: 10 };

docusaurus/docs/React/contexts/chat-context.mdx

@@ -17,14 +17,6 @@ const { client, setActiveChannel } = useChatContext();
 
 ## Values
 
-### appSettings
-
-The available client-side app settings, includes image and file upload config.
-
-| Type   |
-| ------ |
-| object |
-
 ### client
 
 The `StreamChat` client instance. Any methods from the `stream-chat-js` API interface can be run off this object.
@@ -58,6 +50,14 @@ for implementation assistance.
 | ------ |
 | object |
 
+### getAppSettings
+
+The callback function used to get available client-side app settings, includes image and file upload config.
+
+| Type     |
+| -------- |
+| function |
+
 ### mutes
 
 An array of users that have been muted by the connected user.
@@ -93,7 +93,7 @@ You can override the default behavior by pulling it from context and then utiliz
 
 ### theme
 
-Deprecated and to be removed in a future major release. Use the `customStyles` prop to adjust CSS variables and [customize the theme](../customization/css_and_theming.mdx#css-variables) of your app.
+Deprecated and to be removed in a future major release. Use the `customStyles` prop to adjust CSS variables and [customize the theme](../customization/css-and-theming.mdx#css-variables) of your app.
 
 | Type  |
 | ----- |

docusaurus/docs/React/core-components/chat.mdx

@@ -111,7 +111,7 @@ When the screen width is at a mobile breakpoint, whether or not the mobile navig
 
 ### theme
 
-Deprecated and to be removed in a future major release. Use the `customStyles` prop to adjust CSS variables and [customize the theme](../customization/css_and_theming.mdx#css-variables) of your app.
+Deprecated and to be removed in a future major release. Use the `customStyles` prop to adjust CSS variables and [customize the theme](../customization/css-and-theming.mdx#css-variables) of your app.
 
 | Type  |
 | ----- |

docusaurus/docs/React/custom-code-examples/channel-list-preview.mdx

@@ -135,7 +135,7 @@ export const CustomPreview = (props: ChannelPreviewUIComponentProps) => {
 Let's take advantage of the SDK's [CSS classes](../customization/css-and-theming.mdx) for styling. We'll import the bundled CSS into the file where the application is instantiated then apply a class to the button element.
 
 ```tsx
-import 'stream-chat-css/dist/css/index.css';
+import '@stream-io/stream-chat-css/dist/css/index.css';
 
 <div
   className={'str-chat__channel-preview-messenger'}

docusaurus/docs/React/custom-code-examples/channel-search.mdx

@@ -8,11 +8,11 @@ import CustomChannelSearch from '../assets/CustomChannelSearch.png';
 
 ## How-to Guide for Customizing ChannelSearch
 
-In this example, we will customize the [`ChannelSearch`](../core-components/channel_list/#channelsearch) component. Though this component can be used standalone, we will do our customization when it's established in the `ChannelList`. Here is a guide that outlines how to
+In this example, we will customize the [`ChannelSearch`](../core-components/channel-list.mdx#channelsearch) component. Though this component can be used standalone, we will do our customization when it's established in the `ChannelList`. Here is a guide that outlines how to
 override the default `DropdownContainer` and `SearchResultItem` components, as well as use several other useful props.
 
 :::note
-A complete override of this component is possible by utilizing the [`ChannelSearch`](../core-components/channel_list/#channelsearch) prop on `ChannelList`.
+A complete override of this component is possible by utilizing the [`ChannelSearch`](../core-components/channel-list.mdx#channelsearch) prop on `ChannelList`.
 :::
 
 ### Step 1 - Setting Up For Success

docusaurus/docs/React/custom-code-examples/override-submit-handler.mdx

@@ -32,7 +32,7 @@ type MessageToSend = {
 ```
 
 :::important
-Call the `sendMessage` function from the [`ChannelActionContext`](../contexts/channel_action_context#sendmessage) within
+Call the `sendMessage` function from the [`ChannelActionContext`](../contexts/channel-action-context.mdx#sendmessage) within
 your custom function to ensure a message is sent to the active channel.
 :::
 

docusaurus/docs/React/customization/css-and-theming.mdx

@@ -20,7 +20,7 @@ default container CSS.
 
 To override pre-defined library styles, follow this simple process:
 
-- Import our bundled CSS into the file where you instantiate your chat application. We maintain a separate repository, `stream-chat-css`,
+- Import our bundled CSS into the file where you instantiate your chat application. We maintain a separate repository, `@stream-io/stream-chat-css`,
   which houses all of the SCSS files for the components.
 
 - Use the browser inspector or view the library code and locate default styles you wish to override
@@ -32,7 +32,7 @@ To override pre-defined library styles, follow this simple process:
 For example:
 
 ```jsx
-import 'stream-chat-css/dist/css/index.css';
+import '@stream-io/@stream-io/stream-chat-css/dist/css/index.css';
 import './App.css';
 ```
 

docusaurus/docs/React/message-input-components/message-input.mdx

@@ -52,6 +52,14 @@ Function to clear the editing state while editing a message.
 | ---------- |
 | () => void |
 
+### closeEmojiPickerOnClick
+
+If true, picking an emoji from the `EmojiPicker` component will close the picker.
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
 ### disabled
 
 If true, disables the text input.

docusaurus/docs/React/troubleshooting/troubleshooting.mdx

@@ -8,11 +8,11 @@ For information regarding some common troubleshooting and support issues, please
 
 ### Context Providers
 
-The Stream Chat React SDK uses a variety of [Context Providers](../contexts/chat_context) that share values and data to all their children. This is instead of prop drilling through many levels of components.
+The Stream Chat React SDK uses a variety of [Context Providers](../contexts/chat-context.mdx) that share values and data to all their children. This is instead of prop drilling through many levels of components.
 If you're creating a custom component, utilizing our contexts via our custom hooks makes this process very straightforward.
 
 A common issue is when one of the exposed hooks from a context provider is being utilized, but not within the related Context. Each value you pull will be undefined.
-A good resource for knowing which of our components are Context Providers is within [Core Components](../core-components/chat).
+A good resource for knowing which of our components are Context Providers is within [Core Components](../core-components/chat.mdx).
 
 ### User Roles and Permission Policies