feat: allow to customize ChannelListHeader (#3234)

Author: MartinCupela

src/components/ChannelList/ChannelList.tsx

@@ -39,7 +39,7 @@ import {
 import { moveChannelUpwards } from './utils';
 import type { TranslationContextValue } from '../../context/TranslationContext';
 import type { PaginatorProps } from '../../types/types';
-import { ChannelListHeader } from './ChannelListHeader';
+import { ChannelListHeader as DefaultChannelListHeader } from './ChannelListHeader';
 import { useStableId } from '../UtilityComponents/useStableId';
 
 const DEFAULT_FILTERS = {};
@@ -194,6 +194,7 @@ const UnMemoizedChannelList = (props: ChannelListProps) => {
     useImageFlagEmojisOnWindows,
   } = useChatContext('ChannelList');
   const {
+    ChannelListHeader = DefaultChannelListHeader,
     ChannelListUI = DefaultChannelListUI,
     NotificationList = DefaultNotificationList,
     Search = DefaultSearch,

src/context/ComponentContext.tsx

@@ -113,6 +113,8 @@ export type ComponentContextValue = {
   CalloutDialog?: React.ComponentType<CalloutDialogProps>;
   /** Custom UI component shown instead of the image when it fails to load, defaults to and accepts same props as: [ImagePlaceholder](https://github.com/GetStream/stream-chat-react/blob/master/src/components/BaseImage/ImagePlaceholder.tsx) */
   ImagePlaceholder?: React.ComponentType<ImagePlaceholderProps>;
+  /** Custom UI component to display the header of the `ChannelList`, defaults to and accepts same props as: [ChannelListHeader](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListHeader.tsx) */
+  ChannelListHeader?: React.ComponentType;
   /** Custom UI component to display the container for the queried channels, defaults to and accepts same props as: [ChannelListUI](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListUI.tsx) */
   ChannelListUI?: React.ComponentType<ChannelListUIProps>;
   /** Custom UI component to display set of action buttons within `ChannelListItemUI` component, accepts same props as: [ChannelListItemActionButtons](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChannelList/ChannelListItemActionButtons.tsx) */