stream-chat-react 12.9.0 → 12.11.0

package/dist/scss/v2/Search/Search-theme.scss

@@ -0,0 +1,222 @@
+@use '../utils';
+
+/* Only available in React SDK. */
+.str-chat {
+  /* The text/icon color of the component */
+  --str-chat__search-input-color: var(--str-chat__text-color);
+
+  /* The text/icon color of the component */
+  --str-chat__search-input-placeholder-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The text/icon color of the component */
+  --str-chat__search-input-icon-color: var(--str-chat__text-low-emphasis-color);
+
+  /* Top border of the component */
+  --str-chat__search-input-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__search-input-border-block-end: none;
+
+  /* Left (right in RTL layout) borhe component */
+  --str-chat__search-input-border-inline-start: none;
+
+  /* Right (left in RTL layout) borhe component */
+  --str-chat__search-input-border-inline-end: none;
+
+  /* The border radius used for the borders of the component */
+  --str-chat__search-input-wrapper-border-radius: var(--str-chat__border-radius-circle);
+
+  /* The background color of the component */
+  --str-chat__search-input-wrapper-background-color: transparent;
+
+  /* Top border of the component */
+  --str-chat__search-input-wrapper-border-block-start: var(--str-chat__surface-color) 1px
+  solid;
+
+  /* Bottom border of the component */
+  --str-chat__search-input-wrapper-border-block-end: var(--str-chat__surface-color) 1px
+  solid;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__search-input-wrapper-border-inline-start: var(--str-chat__surface-color) 1px
+  solid;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__search-input-wrapper-border-inline-end: var(--str-chat__surface-color) 1px
+  solid;
+
+  /* The border radius used for the borders of the component */
+  --str-chat__search-input-wrapper-active-border-radius: var(--str-chat__border-radius-circle);
+
+  /* The background color of the component */
+  --str-chat__search-input-wrapper-active-background-color: transparent;
+
+  /* Top border of the component */
+  --str-chat__search-input-wrapper-active-border-block-start: var(--str-chat__primary-color)
+  1px solid;
+
+  /* Bottom border of the component */
+  --str-chat__search-input-wrapper-active-border-block-end: var(--str-chat__primary-color)
+  1px solid;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__search-input-wrapper-active-border-inline-start: var(
+                  --str-chat__primary-color
+  )
+  1px solid;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__search-input-wrapper-active-border-inline-end: var(--str-chat__primary-color)
+  1px solid;
+
+  /* The background applied to channel search result */
+  --str-chat__search-result-background-color: transparent;
+
+  /* Top border of the component */
+  --str-chat__search-result-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__search-result-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__search-result-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__search-result-border-inline-end: none;
+
+  /* Background color used for the search result hover / focused state */
+  --str-chat__search-result-hover-background-color: var(
+                  --str-chat__secondary-surface-color
+  );
+
+  --str-chat__search-result-list-color: var(--str-chat__text-color);
+
+  --str-chat__search-result-list-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the component  */
+  --str-chat__search-result-list-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__search-result-list-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__search-result-list-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__search-result-list-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__search-result-list-popup-box-shadow: 0 4px 4px var(--str-chat__box-shadow-color);
+
+  /* The font color used in the search results header  */
+  --str-chat__search-results-header-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The background color used in the search results header  */
+  --str-chat__search-results-header-background-color: var(--str-chat__background-color);
+
+  /* Top border of the component  */
+  --str-chat__search-results-header-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__search-results-header-border-block-end: var(--str-chat__surface-color) 1px
+  solid;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__search-results-header-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__search-results-header-border-inline-end: none;
+
+  /* The font color used in the empty search results indicator  */
+  --str-chat__search-results-empty-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The icon color used in the empty search results indicator  */
+  --str-chat__search-results-empty-icon-color: var(--str-chat__disabled-color);
+
+  /* The background color used in the empty search results indicator  */
+  --str-chat__search-results-empty-background-color: var(--str-chat__background-color);
+
+  /* Top border of the component  */
+  --str-chat__search-results-empty-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__search-results-empty-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__search-results-empty-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__search-results-empty-border-inline-end: none;
+}
+
+.str-chat__search-input--wrapper {
+  @include utils.component-layer-overrides('search-input-wrapper');
+
+  .str-chat__search-input--icon {
+    background-image: var(--str-chat__magnifier-glass-icon);
+    background-repeat: no-repeat;
+  }
+
+  input {
+    @include utils.component-layer-overrides('search-input');
+    outline: none;
+    font: var(--str-chat__subtitle-text);
+  }
+
+  .str-chat__search-input--clear-button-icon {
+    background-color: transparent;
+    -webkit-mask: var(--str-chat__clear-icon) no-repeat center / contain;
+    mask: var(--str-chat__clear-icon) no-repeat center / contain;
+  }
+}
+
+.str-chat__search-input--wrapper-active {
+  @include utils.component-layer-overrides('search-input-wrapper-active');
+
+  .str-chat__search-input--clear-button-icon {
+    background-color: var(--str-chat__text-low-emphasis-color);
+  }
+}
+
+.str-chat__search-bar-button--exit-search {
+  @include utils.button-reset();
+  color: var(--str-chat__primary-color);
+  font: var(--str-chat__subtitle-text);
+}
+
+.str-chat__search-results-header {
+  @include utils.component-layer-overrides('search-results-header');
+  font: var(--str-chat__subtitle-text);
+}
+
+.str-chat__search-source-result-list {
+  @include utils.component-layer-overrides('search-result-list');
+
+  .str-chat__search-container-empty {
+    @include utils.component-layer-overrides('search-results-empty');
+    font: var(--str-chat__subtitle2-medium-text);
+
+    svg path {
+      fill: var(--str-chat__search-results-empty-icon-color);
+    }
+  }
+
+  .str-chat__search-result {
+    @include utils.component-layer-overrides('search-result');
+
+    &.str-chat__channel-preview-messenger--active {
+      background-color: var(--str-chat__channel-preview-active-background-color);
+    }
+
+    .str-chat__search-result--display-name {
+      @include utils.channel-preview-display-name-theme;
+    }
+  }
+
+
+
+  .str-chat__search-result:hover,
+  .str-chat__search-result--focused {
+    background-color: var(--str-chat__search-result-hover-background-color);
+  }
+}

package/dist/scss/v2/_icons.scss

@@ -10,6 +10,8 @@
   --str-chat__poll-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNiAwSDJDMC45IDAgMCAwLjkgMCAyVjE2QzAgMTcuMSAwLjkgMTggMiAxOEgxNkMxNy4xIDE4IDE4IDE3LjEgMTggMTZWMkMxOCAwLjkgMTcuMSAwIDE2IDBaTTE2IDE2SDJWMkgxNlYxNlpNNCA3SDZWMTRINFY3Wk04IDRIMTBWMTRIOFY0Wk0xMiAxMEgxNFYxNEgxMlYxMFoiLz4KPC9zdmc+');
   --str-chat__handle-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgNiIgZmlsbD0iY3VycmVuQ29sb3IiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTYgMEgwVjJIMTZWMFpNMCA2SDE2VjRIMFY2WiIvPgo8L3N2Zz4K');
   --str-chat__circle-stop-icon: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiBoZWlnaHQ9IjMyIiB2aWV3Qm94PSI0IDQgMjggMjgiIHdpZHRoPSIzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2LjQ1NTEgMjcuMjQ0MUMyMi42MzA5IDI3LjI0NDEgMjcuNzQ0MSAyMi4xMTk4IDI3Ljc0NDEgMTUuOTU1MUMyNy43NDQxIDkuNzc5MyAyMi42MTk4IDQuNjY2MDIgMTYuNDQ0IDQuNjY2MDJDMTAuMjc5MyA0LjY2NjAyIDUuMTY2MDIgOS43NzkzIDUuMTY2MDIgMTUuOTU1MUM1LjE2NjAyIDIyLjExOTggMTAuMjkwNCAyNy4yNDQxIDE2LjQ1NTEgMjcuMjQ0MVpNMTYuNDU1MSAyNS4zNjI2QzExLjIzMTEgMjUuMzYyNiA3LjA1ODU5IDIxLjE3OSA3LjA1ODU5IDE1Ljk1NTFDNy4wNTg1OSAxMC43MzExIDExLjIyMDEgNi41NDc1MyAxNi40NDQgNi41NDc1M0MyMS42NjggNi41NDc1MyAyNS44NTE2IDEwLjczMTEgMjUuODYyNiAxNS45NTUxQzI1Ljg3MzcgMjEuMTc5IDIxLjY3OSAyNS4zNjI2IDE2LjQ1NTEgMjUuMzYyNlpNMTMuNTIyMSAxOS45ODM3SDE5LjM2NTlDMjAuMDYzMiAxOS45ODM3IDIwLjQ3MjcgMTkuNTc0MiAyMC40NzI3IDE4Ljg5OTFWMTMuMDExMUMyMC40NzI3IDEyLjMyNDkgMjAuMDYzMiAxMS45MjY0IDE5LjM2NTkgMTEuOTI2NEgxMy41MjIxQzEyLjgzNTkgMTEuOTI2NCAxMi40MTU0IDEyLjMyNDkgMTIuNDE1NCAxMy4wMTExVjE4Ljg5OTFDMTIuNDE1NCAxOS41NzQyIDEyLjgzNTkgMTkuOTgzNyAxMy41MjIxIDE5Ljk4MzdaIiBmaWxsPSIjMDA1ZmZmIi8+Cjwvc3ZnPg==');
+  --str-chat__magnifier-glass-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjEgMjEiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOSAwQzEzLjk2OCAwIDE4IDQuMDMyIDE4IDlDMTggMTMuOTY4IDEzLjk2OCAxOCA5IDE4QzQuMDMyIDE4IDAgMTMuOTY4IDAgOUMwIDQuMDMyIDQuMDMyIDAgOSAwWk05IDE2QzEyLjg2NyAxNiAxNiAxMi44NjcgMTYgOUMxNiA1LjEzMiAxMi44NjcgMiA5IDJDNS4xMzIgMiAyIDUuMTMyIDIgOUMyIDEyLjg2NyA1LjEzMiAxNiA5IDE2Wk0yMC4zMTQgMTguODk5TDE3LjQ4NSAxNi4wNzFMMTYuMDcxIDE3LjQ4NUwxOC44OTkgMjAuMzE0TDIwLjMxNCAxOC44OTlaIi8+Cjwvc3ZnPgo=');
+  --str-chat__clear-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDEwQzAgNC40NzcxNSA0LjQ3NzE1IDAgMTAgMEMxNS41MjI4IDAgMjAgNC40NzcxNSAyMCAxMEMyMCAxNS41MjI4IDE1LjUyMjggMjAgMTAgMjBDNC40NzcxNSAyMCAwIDE1LjUyMjggMCAxMFpNMTAgMkM1LjU4MTcyIDIgMiA1LjU4MTcyIDIgMTBDMiAxNC40MTgzIDUuNTgxNzIgMTggMTAgMThDMTQuNDE4MyAxOCAxOCAxNC40MTgzIDE4IDEwQzE4IDUuNTgxNzIgMTQuNDE4MyAyIDEwIDJaTTEzLjUzNTggNi40NjQ0NkMxMy4xNDUzIDYuMDczOTQgMTIuNTEyMSA2LjA3Mzk0IDEyLjEyMTYgNi40NjQ0NkwxMC4wMDAzIDguNTg1NzhMNy44Nzg5OCA2LjQ2NDQ2QzcuNDg4NDYgNi4wNzM5NCA2Ljg1NTI5IDYuMDczOTQgNi40NjQ3NyA2LjQ2NDQ2QzYuMDc0MjQgNi44NTQ5OSA2LjA3NDI0IDcuNDg4MTUgNi40NjQ3NyA3Ljg3ODY4TDguNTg2MDkgMTBMNi40NjQ3NyAxMi4xMjEzQzYuMDc0MjQgMTIuNTExOCA2LjA3NDI0IDEzLjE0NSA2LjQ2NDc3IDEzLjUzNTVDNi44NTUyOSAxMy45MjYxIDcuNDg4NDYgMTMuOTI2MSA3Ljg3ODk4IDEzLjUzNTVMMTAuMDAwMyAxMS40MTQyTDEyLjEyMTYgMTMuNTM1NUMxMi41MTIxIDEzLjkyNjEgMTMuMTQ1MyAxMy45MjYxIDEzLjUzNTggMTMuNTM1NUMxMy45MjY0IDEzLjE0NSAxMy45MjY0IDEyLjUxMTggMTMuNTM1OCAxMi4xMjEzTDExLjQxNDUgMTBMMTMuNTM1OCA3Ljg3ODY4QzEzLjkyNjQgNy40ODgxNSAxMy45MjY0IDYuODU0OTkgMTMuNTM1OCA2LjQ2NDQ2WiIvPgo8L3N2Zz4K');
 }
 
 @font-face {

package/dist/scss/v2/index.layout.scss

@@ -37,6 +37,7 @@
 @use 'Notification/NotificationList-layout';
 @use 'Notification/Notification-layout';
 @use 'Poll/Poll-layout';
+@use 'Search/Search-layout';
 @use 'Thread/Thread-layout';
 @use 'Tooltip/Tooltip-layout';
 @use 'TypingIndicator/TypingIndicator-layout';

package/dist/scss/v2/index.scss

@@ -38,6 +38,7 @@
 @use 'Notification/NotificationList-theme';
 @use 'Notification/Notification-theme';
 @use 'Poll/Poll-theme';
+@use 'Search/Search-theme';
 @use 'Thread/Thread-theme';
 @use 'Tooltip/Tooltip-theme';
 @use 'TypingIndicator/TypingIndicator-theme';

package/dist/store/hooks/useStateStore.js

@@ -1,15 +1,39 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useMemo } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => { };
 export function useStateStore(store, selector) {
-    const [state, setState] = useState(() => {
-        if (!store)
-            return undefined;
-        return selector(store.getLatestValue());
-    });
-    useEffect(() => {
-        if (!store)
-            return;
-        const unsubscribe = store.subscribeWithSelector(selector, setState);
-        return unsubscribe;
+    const wrappedSubscription = useCallback((onStoreChange) => {
+        const unsubscribe = store?.subscribeWithSelector(selector, onStoreChange);
+        return unsubscribe ?? noop;
     }, [store, selector]);
+    const wrappedSnapshot = useMemo(() => {
+        let cachedTuple;
+        return () => {
+            const currentValue = store?.getLatestValue();
+            if (!currentValue)
+                return undefined;
+            // store value hasn't changed, no need to compare individual values
+            if (cachedTuple && cachedTuple[0] === currentValue) {
+                return cachedTuple[1];
+            }
+            const newlySelected = selector(currentValue);
+            // store value changed but selected values wouldn't have to, double-check selected
+            if (cachedTuple) {
+                let selectededAreEqualToCached = true;
+                for (const key in cachedTuple[1]) {
+                    if (cachedTuple[1][key] === newlySelected[key])
+                        continue;
+                    selectededAreEqualToCached = false;
+                    break;
+                }
+                if (selectededAreEqualToCached)
+                    return cachedTuple[1];
+            }
+            cachedTuple = [currentValue, newlySelected];
+            return cachedTuple[1];
+        };
+    }, [store, selector]);
+    const state = useSyncExternalStore(wrappedSubscription, wrappedSnapshot);
     return state;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "12.9.0",
+  "version": "12.11.0",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -122,7 +122,6 @@
     "react-dropzone": "^14.2.3",
     "react-fast-compare": "^3.2.2",
     "react-image-gallery": "1.2.12",
-    "react-is": "^18.1.0",
     "react-markdown": "^8.0.7",
     "react-player": "2.10.1",
     "react-popper": "^2.3.0",
@@ -144,8 +143,8 @@
     "@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",
+    "react": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.8.0",
+    "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0 || ^16.8.0",
     "stream-chat": "^8.50.0"
   },
   "peerDependenciesMeta": {
@@ -182,19 +181,21 @@
     "@commitlint/config-conventional": "^18.4.3",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
+    "@eslint/js": "^9.16.0",
     "@ladle/react": "^0.16.0",
     "@playwright/test": "^1.42.1",
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
-    "@stream-io/stream-chat-css": "^5.6.0",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^13.1.1",
-    "@testing-library/react-hooks": "^8.0.0",
+    "@stream-io/stream-chat-css": "^5.7.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/deep-equal": "^1.0.1",
     "@types/dotenv": "^8.2.0",
     "@types/hast": "^2.3.4",
+    "@types/jest": "^29.5.14",
     "@types/jsdom": "^21.1.5",
     "@types/linkifyjs": "^2.1.3",
     "@types/lodash.debounce": "^4.0.7",
@@ -203,17 +204,13 @@
     "@types/lodash.throttle": "^4.1.7",
     "@types/lodash.uniqby": "^4.7.7",
     "@types/moment": "^2.13.0",
-    "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@types/react-image-gallery": "^1.2.4",
-    "@types/react-is": "^18.2.4",
     "@types/textarea-caret": "3.0.0",
     "@types/use-sync-external-store": "^0.0.6",
     "@types/uuid": "^8.3.0",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
     "autoprefixer": "^10.0.3",
-    "babel-eslint": "^10.1.0",
     "babel-jest": "^28.1.3",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
@@ -225,54 +222,42 @@
     "emoji-mart": "^5.5.2",
     "esbuild": "^0.23.1",
     "esbuild-plugin-replace": "^1.4.0",
-    "eslint": "7.14.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^6.15.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-babel-module": "^5.2.0",
-    "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.3",
-    "eslint-plugin-jest-dom": "^3.3.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-sort-destructure-keys": "1.3.5",
-    "eslint-plugin-sort-keys-fix": "^1.1.2",
-    "eslint-plugin-testing-library": "^6.2.0",
-    "eslint-plugin-typescript-sort-keys": "^2.1.0",
+    "eslint": "^9.16.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-jest-dom": "^5.5.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-sort-destructure-keys": "^2.0.0",
+    "globals": "^15.13.0",
     "husky": "^8.0.3",
     "i18next-parser": "^6.0.0",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
-    "jest-environment-jsdom": "^28.1.3",
+    "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^24.1.1",
     "lint-staged": "^15.2.1",
     "moment-timezone": "^0.5.43",
-    "prettier": "^2.2.0",
-    "react": "^18.1.0",
-    "react-dom": "^18.1.0",
-    "react-test-renderer": "^18.1.0",
+    "prettier": "^3.4.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "semantic-release": "^19.0.5",
     "stream-chat": "^8.50.0",
-    "ts-jest": "^29.1.4",
-    "typescript": "^5.4.5"
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^8.17.0"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-translations && yarn bundle",
     "bundle": "concurrently ./scripts/bundle-esm.mjs ./scripts/copy-css.sh scripts/bundle-cjs.mjs",
     "build-translations": "i18next",
     "coverage": "jest --collectCoverage && codecov",
-    "eslint": "eslint '**/*.{js,md,ts,jsx,tsx}' --max-warnings 0",
-    "lint": "prettier --list-different 'src/**/*.{js,ts,tsx,md,json}' .eslintrc.json .prettierrc babel.config.js && eslint 'src/**/*.{js,ts,tsx,md}' --max-warnings 0 && yarn validate-translations",
-    "lint-fix": "prettier --write 'src/**/*.{js,ts,tsx,md,json}' .eslintrc.json .prettierrc babel.config.js && eslint --fix 'src/**/*.{js,ts,tsx,md}' --max-warnings 0",
-    "prettier": "prettier --list-different '**/*.{js,ts,tsx,md,json}' .eslintrc.json .prettierrc babel.config.js",
-    "prettier-fix": "prettier --write '**/*.{js,ts,tsx,md,json}' .eslintrc.json .prettierrc babel.config.js",
+    "lint": "yarn prettier --list-different && yarn eslint && yarn validate-translations",
+    "lint-fix": "yarn prettier-fix && yarn eslint-fix",
+    "eslint": "eslint --max-warnings 0",
+    "eslint-fix": "eslint --fix",
+    "prettier": "prettier 'src/**/*.{js,ts,jsx,tsx,md,json}' .prettierrc babel.config.js eslint.config.mjs",
+    "prettier-fix": "yarn prettier --write",
     "fix-staged": "lint-staged --config .lintstagedrc.fix.json --concurrent 1",
     "start": "tsc --watch --sourceMap --declarationMap",
     "prepare": "husky install",