Bump @stream-io/stream-chat-css to v4-rc (#2153)

This PR bumps our CSS package to the latest RC version which separates
`emoji-mart` related styling rules and `emoji-replacement` (styling
rules for the `Chat.useImageFlagEmojisOnWindows` property) from the main
`index.css` to reduce final bundle size for integrators who do not wish
to use these stylesheets.

Fixes: #2116

NOTE: This PR is part of the `v11` release, it should should be merged
only after `v4` of `stream-chat-css` lands.

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

@@ -93,8 +93,8 @@ const i18nInstance = new Streami18n({
 });
 
 <Chat client={client} i18nInstance={i18nInstance}>
-  {// children of Chat component}
-</Chat>
+  {/* children of Chat component */}
+</Chat>;
 ```
 
 | Type   |
@@ -123,6 +123,10 @@ Windows 10 does not support country flag emojis out of the box. It chooses to re
 Stream Chat can override this behavior by loading a custom web font that will render images instead (PNGs or SVGs depending
 on the platform). Set this prop to true if you want to use these custom emojis for Windows users.
 
+:::caution
+If you're moving from older versions to `11.0.0` then make sure to import related stylesheet from `stream-chat-react/css/v2/emoji-replacement.css` as it has been removed from our main stylesheet to reduce final bundle size for integrators who do not wish to use this feature.
+:::
+
 | Type    | Default |
 | ------- | ------- |
 | boolean | false   |

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

@@ -40,7 +40,7 @@ const WrappedChannel = ({ children }) => {
 };
 ```
 
-### Build your custom `EmojiPicker` (example)
+### 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:
 
@@ -55,12 +55,12 @@ export const CustomEmojiPicker = () => {
 
   return (
     <>
-      <button onClick={() => setOpen((cv) => !cv)}>Open EmojiPicker</button>
+      <button onClick={() => setOpen((isOpen) => !isOpen)}>Open EmojiPicker</button>
 
       {open && (
         <EmojiPicker
           onEmojiClick={(emoji, event) => {
-            insertText(e.native);
+            insertText(emoji.native);
             textareaRef.current?.focus(); // returns focus back to the message input element
           }}
         />
@@ -73,3 +73,12 @@ export const CustomEmojiPicker = () => {
 ```
 
 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.
+
+## Old `emoji-mart` (v3.0.1)
+
+Even though it's not explicitly provided by our SDK anymore, it's still possible for our integrators to use older version of the `emoji-mart` - specifically version `3.0.1` on top of which our old components were built. We don't recommend using old version of the `emoji-mart` but if you really need to, follow the [`3.0.1` documentation](https://github.com/missive/emoji-mart/tree/v3.0.1#picker) in combination with the previous guide to build your own `EmojiPicker` component with the old `emoji-mart` API. Beware though, if you wish to use slightly modified `emoji-mart` CSS previously supplied by our SDK by default in the main `index.css` file, you'll now have to explicitly import it:
+
+```tsx
+import 'stream-chat-react/css/v2/index.css';
+import 'stream-chat-react/css/v2/emoji-mart.css';
+```

package.json

@@ -24,9 +24,20 @@
       "require": "./dist/components/Emojis/index.cjs.js",
       "import": "./dist/components/Emojis/index.js",
       "default": "./dist/components/Emojis/index.js"
+    },
+    "./dist/css/*": {
+      "default": "./dist/css/*"
+    },
+    "./dist/scss/*": {
+      "default": "./dist/scss/*"
+    },
+    "./css/*": {
+      "default": "./dist/css/*"
+    },
+    "./scss/*": {
+      "default": "./dist/scss/*"
     }
   },
-  "style": "dist/css/v2/index.css",
   "sideEffects": [
     "*.css"
   ],
@@ -42,7 +53,7 @@
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.4",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "^3.14.2",
+    "@stream-io/stream-chat-css": "^4.0.0-rc.5",
     "clsx": "^2.0.0",
     "dayjs": "^1.10.4",
     "emoji-regex": "^9.2.0",

src/components/Chat/Chat.tsx

@@ -53,9 +53,12 @@ export type ChatProps<
   initialNavOpen?: boolean;
   /** Used for injecting className/s to the Channel and ChannelList components */
   theme?: string;
-  /** Windows 10 does not support country flag emojis out of the box. It chooses to render these emojis as characters instead. Stream
+  /**
+   * Windows 10 does not support country flag emojis out of the box. It chooses to render these emojis as characters instead. Stream
    * Chat can override this behavior by loading a custom web font that will render images instead (PNGs or SVGs depending on the platform).
    * Set this prop to true if you want to use these custom emojis for Windows users.
+   *
+   * Note: requires importing `stream-chat-react/css/v2/emoji-replacement.css` style sheet
    */
   useImageFlagEmojisOnWindows?: boolean;
 };

yarn.lock

@@ -2581,10 +2581,10 @@
     crypto-browserify "^3.11.0"
     process-es6 "^0.11.2"
 
-"@stream-io/stream-chat-css@^3.14.2":
-  version "3.14.2"
-  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-3.14.2.tgz#11674178b538e2a7630038a420a642d411ce03de"
-  integrity sha512-S54qkFRJ4GwQ0uR36z+m3uv1aYD+Ut/tNG0i/9FpjE/mcqQLcpV7GrTYTfZh0hr5w4m3xJ5N+Mruz/A3BHe5mw==
+"@stream-io/stream-chat-css@^4.0.0-rc.5":
+  version "4.0.0-rc.5"
+  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-4.0.0-rc.5.tgz#bf75cc5077b593655de1711b9c63b9648e0b2af1"
+  integrity sha512-+M7wxzP51LiIJzbHayD5LM7CxFfmh6aPNa6QrnA0PCwCWHYmi8XXQimbvo6lVJ1oEn/HXz4MigQfRaWEl2iq5A==
 
 "@stream-io/transliterate@^1.5.5":
   version "1.5.5"