v10.8.6

package.json

@@ -30,7 +30,7 @@
   "dependencies": {
     "@braintree/sanitize-url": "^6.0.2",
     "@popperjs/core": "^2.11.5",
-    "@stream-io/stream-chat-css": "^3.9.1",
+    "@stream-io/stream-chat-css": "^3.10.2",
     "clsx": "^1.1.1",
     "dayjs": "^1.10.4",
     "emoji-mart": "3.0.1",
@@ -48,7 +48,7 @@
     "react-dropzone": "^14.2.2",
     "react-fast-compare": "^3.2.0",
     "react-file-utils": "^1.2.0",
-    "react-image-gallery": "^1.2.7",
+    "react-image-gallery": "1.2.12",
     "react-is": "^18.1.0",
     "react-markdown": "^8.0.3",
     "react-player": "2.10.1",

src/components/ChannelSearch/ChannelSearch.tsx

@@ -1,6 +1,7 @@
+import clsx from 'clsx';
 import React from 'react';
 
-import { useChatContext } from '../../context/ChatContext';
+import { useChatContext } from '../../context';
 
 import { ChannelSearchControllerParams, useChannelSearch } from './hooks/useChannelSearch';
 
@@ -71,7 +72,12 @@ const UnMemoizedChannelSearch = <
   const showSearchBarV2 = themeVersion === '2';
 
   return (
-    <div className='str-chat__channel-search' data-testid='channel-search'>
+    <div
+      className={clsx('str-chat__channel-search', popupResults ? 'popup' : 'inline', {
+        'str-chat__channel-search--with-results': results.length > 0,
+      })}
+      data-testid='channel-search'
+    >
       {showSearchBarV2 ? (
         <SearchBar
           activateSearch={activateSearch}

src/components/ChannelSearch/__tests__/ChannelSearch.test.js

@@ -38,7 +38,7 @@ describe('ChannelSearch', () => {
     const { channelSearch } = await renderSearch({});
     expect(channelSearch).toMatchInlineSnapshot(`
       <div
-        class="str-chat__channel-search"
+        class="str-chat__channel-search inline"
         data-testid="channel-search"
       >
         <input
@@ -57,7 +57,7 @@ describe('ChannelSearch', () => {
     const { channelSearch } = await renderSearch({ props: { placeholder } });
     expect(channelSearch).toMatchInlineSnapshot(`
       <div
-        class="str-chat__channel-search"
+        class="str-chat__channel-search inline"
         data-testid="channel-search"
       >
         <input

src/components/ChannelSearch/hooks/useChannelSearch.ts

@@ -100,7 +100,7 @@ export const useChannelSearch = <
   searchQueryParams,
   setChannels,
 }: ChannelSearchControllerParams<StreamChatGenerics>): SearchController<StreamChatGenerics> => {
-  const { client, navOpen, setActiveChannel, themeVersion } = useChatContext<StreamChatGenerics>(
+  const { client, setActiveChannel, themeVersion } = useChatContext<StreamChatGenerics>(
     'useChannelSearch',
   );
 
@@ -141,14 +141,14 @@ export const useChannelSearch = <
 
       if (isInputClick) return;
 
-      if ((inputIsFocused && (!query || navOpen)) || clearSearchOnClickOutside) {
+      if ((inputIsFocused && !query) || clearSearchOnClickOutside) {
         exitSearch();
       }
     };
 
     document.addEventListener('click', clickListener);
     return () => document.removeEventListener('click', clickListener);
-  }, [disabled, inputIsFocused, query, exitSearch, navOpen, clearSearchOnClickOutside]);
+  }, [disabled, inputIsFocused, query, exitSearch, clearSearchOnClickOutside]);
 
   useEffect(() => {
     if (!inputRef.current || disabled) return;

yarn.lock

@@ -2256,10 +2256,10 @@
     crypto-browserify "^3.11.0"
     process-es6 "^0.11.2"
 
-"@stream-io/stream-chat-css@^3.9.1":
-  version "3.9.2"
-  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-3.9.2.tgz#7d4a1073c624d548d8a1fcb0170e9f9ad070dd41"
-  integrity sha512-ZZX8zBn65c22I6drDWgK79AJE2WGY/Hj/5zpAAw4fx0i6TrHAM/d9lZJZbNlDXjKh0HXANzrHZg9XEINp1wedg==
+"@stream-io/stream-chat-css@^3.10.2":
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@stream-io/stream-chat-css/-/stream-chat-css-3.10.2.tgz#0340b409dda7429fa2af86ba78f796160e3e96c9"
+  integrity sha512-yaVKWLnuC8e4zS85FUB3DK+z0PsOMmX1AMyM9i/ImBXhclQX3QSi6EJDeHQTbqt8CNSby1CtUK+rGJ22QQb2qA==
 
 "@stream-io/transliterate@^1.5.5":
   version "1.5.5"
@@ -12074,10 +12074,10 @@ react-file-utils@^1.2.0:
   dependencies:
     react-dropzone "^12.0.5"
 
-react-image-gallery@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/react-image-gallery/-/react-image-gallery-1.2.7.tgz#2dfb83c52f32828a5340ca565f91bca58241fcfe"
-  integrity sha512-ts7yMWykvZhslGMuvVAUk7a1dJIx9QtIwK6Clv8dOGxPsJid92FRrLvXbZDvkYcUyj48sHalnBhqU6mZNCB2jg==
+react-image-gallery@1.2.12:
+  version "1.2.12"
+  resolved "https://registry.yarnpkg.com/react-image-gallery/-/react-image-gallery-1.2.12.tgz#b08a633cc336bab2a5afdb96941e023925043c6a"
+  integrity sha512-JIh85lh0Av/yewseGJb/ycg00Y/weQiZEC/BQueC2Z5jnYILGB6mkxnrOevNhsM2NdZJpvcDekCluhy6uzEoTA==
 
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.1.0:
   version "18.1.0"