feat: promote Search to stable, drop ChannelSearch [REACT-894]

package.json

@@ -34,12 +34,6 @@
       "require": "./dist/cjs/mp3-encoder.js",
       "default": "./dist/cjs/mp3-encoder.js"
     },
-    "./experimental": {
-      "types": "./dist/types/experimental/index.d.ts",
-      "import": "./dist/es/experimental.mjs",
-      "require": "./dist/cjs/experimental.js",
-      "default": "./dist/cjs/experimental.js"
-    },
     "./dist/css/*": {
       "default": "./dist/css/*"
     },

src/components/Channel/Channel.tsx

@@ -87,7 +87,7 @@ import {
   getImageAttachmentConfiguration,
   getVideoAttachmentConfiguration,
 } from '../Attachment/attachment-sizing';
-import { useSearchFocusedMessage } from '../../experimental/Search/hooks';
+import { useSearchFocusedMessage } from '../Search/hooks';
 import { WithAudioPlayback } from '../AudioPlayback';
 
 export type ChannelProps = {

src/components/ChannelList/ChannelList.tsx

@@ -21,7 +21,7 @@ import { useStateStore } from '../../store';
 import { ChannelListMessenger } from './ChannelListMessenger';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
-import { ChannelSearch as DefaultChannelSearch } from '../ChannelSearch/ChannelSearch';
+import { Search as DefaultSearch } from '../Search';
 import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
 import { LoadingChannels } from '../Loading/LoadingChannels';
 import { LoadMorePaginator } from '../LoadMore/LoadMorePaginator';
@@ -36,7 +36,7 @@ import { moveChannelUpwards } from './utils';
 import type { CustomQueryChannelsFn } from './hooks/usePaginatedChannels';
 import type { ChannelListMessengerProps } from './ChannelListMessenger';
 import type { ChannelPreviewUIComponentProps } from '../ChannelPreview/ChannelPreview';
-import type { ChannelSearchProps } from '../ChannelSearch/ChannelSearch';
+import type { SearchProps } from '../Search';
 import type { EmptyStateIndicatorProps } from '../EmptyStateIndicator';
 import type { LoadMorePaginatorProps } from '../LoadMore/LoadMorePaginator';
 import type { ChatContextValue } from '../../context';
@@ -56,8 +56,6 @@ const searchControllerStateSelector = (nextValue: SearchControllerState) => ({
 });
 
 export type ChannelListProps = {
-  /** Additional props for underlying ChannelSearch component and channel search controller, [available props](https://getstream.io/chat/docs/sdk/react/utility-components/channel_search/#props) */
-  additionalChannelSearchProps?: Omit<ChannelSearchProps, 'setChannels'>;
   /**
    * When the client receives `message.new`, `notification.message_new`, and `notification.added_to_channel` events, we automatically
    * push that channel to the top of the list. If the channel doesn't currently exist in the list, we grab the channel from
@@ -69,8 +67,8 @@ export type ChannelListProps = {
   Avatar?: React.ComponentType<ChannelAvatarProps>;
   /** Optional function to filter channels prior to loading in the DOM. Do not use any complex or async logic that would delay the loading of the ChannelList. We recommend using a pure function with array methods like filter/sort/reduce. */
   channelRenderFilterFn?: (channels: Array<Channel>) => Array<Channel>;
-  /** Custom UI component to display search results, defaults to and accepts same props as: [ChannelSearch](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelSearch/ChannelSearch.tsx) */
-  ChannelSearch?: React.ComponentType<ChannelSearchProps>;
+  /** Custom UI component to display search results, defaults to and accepts same props as: [Search](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelSearch/Search.tsx) */
+  ChannelSearch?: React.ComponentType<SearchProps>;
   // FIXME: how is this even legal (WHY IS IT STRING?!)
   /** Set a channel (with this ID) to active and manually move it to the top of the list */
   customActiveChannel?: string;
@@ -172,11 +170,9 @@ export type ChannelListProps = {
 
 const UnMemoizedChannelList = (props: ChannelListProps) => {
   const {
-    additionalChannelSearchProps,
     allowNewMessagesFromUnfilteredChannels = true,
     Avatar = DefaultAvatar,
     channelRenderFilterFn,
-    ChannelSearch = DefaultChannelSearch,
     customActiveChannel,
     customQueryChannels,
     EmptyStateIndicator = DefaultEmptyStateIndicator,
@@ -221,10 +217,9 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
     theme,
     useImageFlagEmojisOnWindows,
   } = useChatContext('ChannelList');
-  const { Search } = useComponentContext(); // FIXME: us component context to retrieve ChannelPreview UI components too
+  const { Search = DefaultSearch } = useComponentContext(); // FIXME: use component context to retrieve ChannelPreview UI components too
   const channelListRef = useRef<HTMLDivElement | null>(null);
   const [channelUpdateCount, setChannelUpdateCount] = useState(0);
-  const [searchActive, setSearchActive] = useState(false);
 
   // Indicator relevant when Search component that relies on SearchController is used
   const { searchIsActive } = useStateStore(
@@ -280,20 +275,6 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
    */
   const forceUpdate = useCallback(() => setChannelUpdateCount((count) => count + 1), []);
 
-  const onSearch = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setSearchActive(!!event.target.value);
-
-      additionalChannelSearchProps?.onSearch?.(event);
-    },
-    [additionalChannelSearchProps],
-  );
-
-  const onSearchExit = useCallback(() => {
-    setSearchActive(false);
-    additionalChannelSearchProps?.onSearchExit?.();
-  }, [additionalChannelSearchProps]);
-
   const { channels, hasNextPage, loadNextPage, setChannels } = usePaginatedChannels(
     client,
     filters || DEFAULT_FILTERS,
@@ -379,33 +360,15 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
     },
   );
 
-  const showChannelList =
-    (!searchActive && !searchIsActive) || additionalChannelSearchProps?.popupResults;
+  const showChannelList = !searchIsActive;
   return (
     <DialogManagerProvider id={`channel-list-dialog-manager-${stableId}`}>
       <ChannelListContextProvider
         value={{ channels, hasNextPage, loadNextPage, setChannels }}
       >
         <div className={className} ref={channelListRef}>
           <ChannelListHeader />
-          {showChannelSearch &&
-            (Search ? (
-              <Search
-                directMessagingChannelType={additionalChannelSearchProps?.channelType}
-                disabled={additionalChannelSearchProps?.disabled}
-                exitSearchOnInputBlur={
-                  additionalChannelSearchProps?.clearSearchOnClickOutside
-                }
-                placeholder={additionalChannelSearchProps?.placeholder}
-              />
-            ) : (
-              <ChannelSearch
-                onSearch={onSearch}
-                onSearchExit={onSearchExit}
-                setChannels={setChannels}
-                {...additionalChannelSearchProps}
-              />
-            ))}
+          {showChannelSearch && <Search />}
           {showChannelList && (
             <List
               error={channelsQueryState.error}