stream-chat-react-native-core 9.0.0-beta.30 → 9.0.0-beta.32

package/src/components/ChannelList/__tests__/ChannelListView.test.js

@@ -1,11 +1,8 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 
 import { cleanup, render, waitFor } from '@testing-library/react-native';
 
-import {
-  ChannelsProvider,
-  useChannelsContext,
-} from '../../../contexts/channelsContext/ChannelsContext';
+import { ChannelsProvider } from '../../../contexts/channelsContext/ChannelsContext';
 import { ChatContext, ChatProvider } from '../../../contexts/chatContext/ChatContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { queryChannelsApi } from '../../../mock-builders/api/queryChannels';
@@ -16,43 +13,67 @@ import { Chat } from '../../Chat/Chat';
 import { ChannelList } from '../ChannelList';
 import { ChannelListView } from '../ChannelListView';
 
-let mockChannels;
 let chatClient;
 
-const ListMessenger = ({ error, loadingChannels, ...props }) => {
-  const channelsContext = useChannelsContext();
+/**
+ * Renders the full ChannelList (which now always uses ChannelListView internally).
+ */
+const Component = () => (
+  <Chat client={chatClient}>
+    <ChatContext.Consumer>
+      {(context) => (
+        <ChatProvider value={{ ...context, isOnline: true }}>
+          <ChannelList
+            filters={{
+              members: {
+                $in: ['vishal', 'neil'],
+              },
+            }}
+          />
+        </ChatProvider>
+      )}
+    </ChatContext.Consumer>
+  </Chat>
+);
 
-  return (
-    <ChannelsProvider value={{ ...channelsContext, error, loadingChannels }}>
-      <ChannelListView {...props} />
-    </ChannelsProvider>
-  );
-};
+const noop = () => {};
 
-const Component = ({ error = false, loadingChannels = false }) => {
-  const List = useCallback(
-    (...props) => <ListMessenger {...props} error={error} loadingChannels={loadingChannels} />,
-    [error, loadingChannels],
-  );
-  return (
-    <Chat client={chatClient}>
-      <ChatContext.Consumer>
-        {(context) => (
-          <ChatProvider value={{ ...context, isOnline: true }}>
-            <ChannelList
-              filters={{
-                members: {
-                  $in: ['vishal', 'neil'],
-                },
-              }}
-              List={List}
-            />
-          </ChatProvider>
-        )}
-      </ChatContext.Consumer>
-    </Chat>
-  );
-};
+/**
+ * Renders ChannelListView directly with a mock ChannelsContext for testing
+ * error and loading states.
+ */
+const ComponentWithContextOverrides = ({ error, loadingChannels }) => (
+  <Chat client={chatClient}>
+    <ChatContext.Consumer>
+      {(context) => (
+        <ChatProvider value={{ ...context, isOnline: true }}>
+          <ChannelsProvider
+            value={{
+              additionalFlatListProps: {},
+              channelListInitialized: !loadingChannels && !error,
+              channels: error ? null : [],
+              error: error ? new Error('test error') : undefined,
+              forceUpdate: 0,
+              hasNextPage: false,
+              loadingChannels,
+              loadingNextPage: false,
+              loadMoreThreshold: 0.1,
+              loadNextPage: noop,
+              maxUnreadCount: 255,
+              numberOfSkeletons: 8,
+              refreshing: false,
+              refreshList: noop,
+              reloadList: noop,
+              setFlatListRef: noop,
+            }}
+          >
+            <ChannelListView />
+          </ChannelsProvider>
+        </ChatProvider>
+      )}
+    </ChatContext.Consumer>
+  </Chat>
+);
 
 describe('ChannelListView', () => {
   beforeAll(async () => {
@@ -77,7 +98,7 @@ describe('ChannelListView', () => {
 
   it('renders the `EmptyStateIndicator` when no channels are present', async () => {
     useMockedApis(chatClient, [queryChannelsApi([])]);
-    const { getByTestId } = render(<Component channels={[]} />);
+    const { getByTestId } = render(<Component />);
     await waitFor(() => {
       expect(getByTestId('empty-channel-state-title')).toBeTruthy();
     });
@@ -85,7 +106,7 @@ describe('ChannelListView', () => {
 
   it('renders the `LoadingErrorIndicator` when `error` prop is true', async () => {
     const { getByTestId } = render(
-      <Component channels={mockChannels} error={true} loadingChannels={false} />,
+      <ComponentWithContextOverrides error={true} loadingChannels={false} />,
     );
     await waitFor(() => {
       expect(getByTestId('loading-error')).toBeTruthy();
@@ -93,7 +114,9 @@ describe('ChannelListView', () => {
   });
 
   it('renders the `LoadingIndicator` when when channels have not yet loaded', async () => {
-    const { getByTestId } = render(<Component channels={[]} loadingChannels={true} />);
+    const { getByTestId } = render(
+      <ComponentWithContextOverrides error={false} loadingChannels={true} />,
+    );
     await waitFor(() => {
       expect(getByTestId('channel-list-loading-indicator')).toBeTruthy();
     });

package/src/components/ChannelList/hooks/useCreateChannelsContext.ts

@@ -6,41 +6,22 @@ export const useCreateChannelsContext = ({
   additionalFlatListProps,
   channelListInitialized,
   channels,
-  EmptyStateIndicator,
   error,
-  FooterLoadingIndicator,
   forceUpdate,
   hasNextPage,
-  HeaderErrorIndicator,
-  HeaderNetworkDownIndicator,
-  ListHeaderComponent,
   loadingChannels,
-  LoadingErrorIndicator,
-  LoadingIndicator,
   loadingNextPage,
   loadMoreThreshold,
   loadNextPage,
   maxUnreadCount,
   numberOfSkeletons,
   onSelect,
-  Preview,
   getChannelActionItems,
-  PreviewAvatar,
-  PreviewMessage,
-  PreviewMutedStatus,
-  PreviewStatus,
-  PreviewTitle,
-  PreviewLastMessage,
-  PreviewTypingIndicator,
-  PreviewMessageDeliveryStatus,
-  PreviewUnreadCount,
-  ChannelDetailsBottomSheet,
   swipeActionsEnabled,
   refreshing,
   refreshList,
   reloadList,
   setFlatListRef,
-  Skeleton,
   mutedStatusPosition,
 }: ChannelsContextValue) => {
   const channelValueString = channels
@@ -58,41 +39,22 @@ export const useCreateChannelsContext = ({
       additionalFlatListProps,
       channelListInitialized,
       channels,
-      EmptyStateIndicator,
       error,
-      FooterLoadingIndicator,
       forceUpdate,
       hasNextPage,
-      HeaderErrorIndicator,
-      HeaderNetworkDownIndicator,
-      ListHeaderComponent,
       loadingChannels,
-      LoadingErrorIndicator,
-      LoadingIndicator,
       loadingNextPage,
       loadMoreThreshold,
       loadNextPage,
       maxUnreadCount,
       numberOfSkeletons,
       onSelect,
-      Preview,
       getChannelActionItems,
-      PreviewAvatar,
-      PreviewMessage,
-      PreviewMutedStatus,
-      PreviewStatus,
-      PreviewTitle,
-      PreviewUnreadCount,
-      PreviewTypingIndicator,
-      PreviewMessageDeliveryStatus,
-      PreviewLastMessage,
-      ChannelDetailsBottomSheet,
       swipeActionsEnabled,
       refreshing,
       refreshList,
       reloadList,
       setFlatListRef,
-      Skeleton,
       mutedStatusPosition,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -104,7 +66,6 @@ export const useCreateChannelsContext = ({
       loadingChannels,
       loadingNextPage,
       channelListInitialized,
-      ChannelDetailsBottomSheet,
       swipeActionsEnabled,
       refreshing,
       mutedStatusPosition,

package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx

@@ -11,6 +11,7 @@ import { ChannelPreviewTitle } from './ChannelPreviewTitle';
 import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 
 import { useBottomSheetContext } from '../../contexts/bottomSheetContext/BottomSheetContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
@@ -29,7 +30,6 @@ export type ChannelDetailsHeaderProps = { channel: Channel };
 export type ChannelDetailsBottomSheetProps = {
   additionalFlatListProps?: Partial<FlatListProps<ChannelActionItem>>;
   channel: Channel;
-  ChannelDetailsHeader?: React.ComponentType<ChannelDetailsHeaderProps>;
   items: ChannelActionItem[];
 };
 
@@ -104,10 +104,10 @@ const keyExtractor = (item: ChannelActionItem) => item.id;
 
 export const ChannelDetailsBottomSheet = ({
   additionalFlatListProps,
-  ChannelDetailsHeader: ChannelDetailsHeaderComponent = ChannelDetailsHeader,
   items,
   channel,
 }: ChannelDetailsBottomSheetProps) => {
+  const { ChannelDetailsHeader: ChannelDetailsHeaderComponent } = useComponentsContext();
   const styles = useStyles();
   return (
     <>

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -10,10 +10,11 @@ import {
   useChannelsContext,
 } from '../../contexts/channelsContext/ChannelsContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTranslatedMessage } from '../../hooks/useTranslatedMessage';
 
 export type ChannelPreviewProps = Partial<Pick<ChatContextValue, 'client'>> &
-  Partial<Pick<ChannelsContextValue, 'Preview' | 'forceUpdate'>> & {
+  Partial<Pick<ChannelsContextValue, 'forceUpdate'>> & {
     /**
      * Instance of Channel from stream-chat package.
      */
@@ -21,18 +22,13 @@ export type ChannelPreviewProps = Partial<Pick<ChatContextValue, 'client'>> &
   };
 
 export const ChannelPreview = (props: ChannelPreviewProps) => {
-  const { channel, client: propClient, forceUpdate: propForceUpdate, Preview: propPreview } = props;
+  const { channel, client: propClient, forceUpdate: propForceUpdate } = props;
 
   const { client: contextClient } = useChatContext();
-  const {
-    Preview: contextPreview,
-    ChannelDetailsBottomSheet,
-    getChannelActionItems,
-    swipeActionsEnabled,
-  } = useChannelsContext();
+  const { getChannelActionItems, swipeActionsEnabled } = useChannelsContext();
+  const { Preview } = useComponentsContext();
 
   const client = propClient || contextClient;
-  const Preview = propPreview || contextPreview;
 
   const { muted, unread, lastMessage } = useChannelPreviewData(channel, client, propForceUpdate);
 
@@ -45,11 +41,7 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
   }
 
   return (
-    <ChannelSwipableWrapper
-      channel={channel}
-      ChannelDetailsBottomSheet={ChannelDetailsBottomSheet}
-      getChannelActionItems={getChannelActionItems}
-    >
+    <ChannelSwipableWrapper channel={channel} getChannelActionItems={getChannelActionItems}>
       <Preview channel={channel} muted={muted} unread={unread} lastMessage={message} />
     </ChannelSwipableWrapper>
   );

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -1,11 +1,8 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import { ChannelLastMessagePreview } from './ChannelLastMessagePreview';
-import { ChannelMessagePreviewDeliveryStatus } from './ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewProps } from './ChannelPreview';
 
-import { ChannelPreviewTypingIndicator } from './ChannelPreviewTypingIndicator';
 import { LastMessageType } from './hooks/useChannelPreviewData';
 
 import { useChannelPreviewDraftMessage } from './hooks/useChannelPreviewDraftMessage';
@@ -13,11 +10,8 @@ import { useChannelPreviewPollLabel } from './hooks/useChannelPreviewPollLabel';
 
 import { useChannelTypingState } from './hooks/useChannelTypingState';
 
-import {
-  ChannelsContextValue,
-  useChannelsContext,
-} from '../../contexts/channelsContext/ChannelsContext';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
@@ -26,34 +20,14 @@ import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 import { ErrorBadge } from '../ui';
 
-export type ChannelPreviewMessageProps = Pick<ChannelPreviewProps, 'channel'> &
-  Partial<
-    Pick<
-      ChannelsContextValue,
-      'PreviewTypingIndicator' | 'PreviewMessageDeliveryStatus' | 'PreviewLastMessage'
-    >
-  > & {
-    lastMessage?: LastMessageType;
-  };
+export type ChannelPreviewMessageProps = Pick<ChannelPreviewProps, 'channel'> & {
+  lastMessage?: LastMessageType;
+};
 
 export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
-  const {
-    channel,
-    lastMessage,
-    PreviewTypingIndicator: PreviewTypingIndicatorProp = ChannelPreviewTypingIndicator,
-    PreviewMessageDeliveryStatus:
-      PreviewMessageDeliveryStatusProp = ChannelMessagePreviewDeliveryStatus,
-    PreviewLastMessage: PreviewLastMessageProp = ChannelLastMessagePreview,
-  } = props;
-  const {
-    PreviewTypingIndicator: PreviewTypingIndicatorContext,
-    PreviewMessageDeliveryStatus: PreviewMessageDeliveryStatusContext,
-    PreviewLastMessage: PreviewLastMessageContext,
-  } = useChannelsContext();
-  const PreviewTypingIndicator = PreviewTypingIndicatorProp || PreviewTypingIndicatorContext;
-  const PreviewMessageDeliveryStatus =
-    PreviewMessageDeliveryStatusProp || PreviewMessageDeliveryStatusContext;
-  const PreviewLastMessage = PreviewLastMessageProp || PreviewLastMessageContext;
+  const { channel, lastMessage } = props;
+  const { PreviewTypingIndicator, PreviewMessageDeliveryStatus, PreviewLastMessage } =
+    useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();

package/src/components/ChannelPreview/ChannelPreviewView.tsx

@@ -2,11 +2,6 @@ import React, { useMemo } from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 
 import type { ChannelPreviewProps } from './ChannelPreview';
-import { ChannelPreviewMessage } from './ChannelPreviewMessage';
-import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
-import { ChannelPreviewStatus } from './ChannelPreviewStatus';
-import { ChannelPreviewTitle } from './ChannelPreviewTitle';
-import { ChannelPreviewUnreadCount } from './ChannelPreviewUnreadCount';
 
 import type { LastMessageType } from './hooks/useChannelPreviewData';
 
@@ -14,25 +9,14 @@ import {
   ChannelsContextValue,
   useChannelsContext,
 } from '../../contexts/channelsContext/ChannelsContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
-import { ChannelAvatar } from '../ui/Avatar/ChannelAvatar';
 
 export type ChannelPreviewViewPropsWithContext = Pick<ChannelPreviewProps, 'channel'> &
-  Pick<
-    ChannelsContextValue,
-    | 'maxUnreadCount'
-    | 'onSelect'
-    | 'PreviewAvatar'
-    | 'PreviewMessage'
-    | 'PreviewMutedStatus'
-    | 'PreviewStatus'
-    | 'PreviewTitle'
-    | 'PreviewUnreadCount'
-    | 'mutedStatusPosition'
-  > & {
+  Pick<ChannelsContextValue, 'maxUnreadCount' | 'onSelect' | 'mutedStatusPosition'> & {
     /**
      * Formatter function for date of latest message.
      * @param date Message date
@@ -57,16 +41,18 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
     maxUnreadCount,
     muted,
     onSelect,
-    PreviewAvatar = ChannelAvatar,
-    PreviewMessage = ChannelPreviewMessage,
-    PreviewMutedStatus = ChannelPreviewMutedStatus,
-    PreviewStatus = ChannelPreviewStatus,
-    PreviewTitle = ChannelPreviewTitle,
-    PreviewUnreadCount = ChannelPreviewUnreadCount,
     unread,
     mutedStatusPosition,
     lastMessage,
   } = props;
+  const {
+    PreviewAvatar,
+    PreviewMessage,
+    PreviewMutedStatus,
+    PreviewStatus,
+    PreviewTitle,
+    PreviewUnreadCount,
+  } = useComponentsContext();
 
   const {
     theme: {
@@ -158,28 +144,13 @@ const MemoizedChannelPreviewViewWithContext = React.memo(
  * from the ChannelPreview component.
  */
 export const ChannelPreviewView = (props: ChannelPreviewViewProps) => {
-  const {
-    forceUpdate,
-    maxUnreadCount,
-    onSelect,
-    PreviewMessage,
-    PreviewMutedStatus,
-    PreviewStatus,
-    PreviewTitle,
-    PreviewUnreadCount,
-    mutedStatusPosition,
-  } = useChannelsContext();
+  const { forceUpdate, maxUnreadCount, onSelect, mutedStatusPosition } = useChannelsContext();
   return (
     <MemoizedChannelPreviewViewWithContext
       {...{
         forceUpdate,
         maxUnreadCount,
         onSelect,
-        PreviewMessage,
-        PreviewMutedStatus,
-        PreviewStatus,
-        PreviewTitle,
-        PreviewUnreadCount,
         mutedStatusPosition,
       }}
       {...props}

package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx

@@ -5,10 +5,9 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import type { Channel } from 'stream-chat';
 
-import { ChannelDetailsBottomSheet as DefaultChannelDetailsBottomSheet } from './ChannelDetailsBottomSheet';
-import type { ChannelDetailsBottomSheetProps } from './ChannelDetailsBottomSheet';
 import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { MenuPointHorizontal, Mute, Sound } from '../../icons';
@@ -33,15 +32,14 @@ export const OpenChannelDetailsButton = () => {
 export const ChannelSwipableWrapper = ({
   channel,
   getChannelActionItems,
-  ChannelDetailsBottomSheet: ChannelDetailsBottomSheetComponent = DefaultChannelDetailsBottomSheet,
   swipableProps: _swipableProps,
   children,
 }: PropsWithChildren<{
   channel: Channel;
-  ChannelDetailsBottomSheet?: React.ComponentType<ChannelDetailsBottomSheetProps>;
   getChannelActionItems?: GetChannelActionItems;
   swipableProps?: SwipableWrapperProps['swipableProps'];
 }>) => {
+  const { ChannelDetailsBottomSheet: ChannelDetailsBottomSheetComponent } = useComponentsContext();
   const [channelDetailSheetOpen, setChannelDetailSheetOpen] = useState(false);
   const { muteChannel, unmuteChannel } = useChannelActions(channel);
   const channelActionItems = useChannelActionItems({ channel, getChannelActionItems });

package/src/components/ChannelPreview/__tests__/ChannelDetailsBottomSheet.test.tsx

@@ -5,6 +5,7 @@ import { render } from '@testing-library/react-native';
 import type { Channel } from 'stream-chat';
 
 import { ThemeProvider, defaultTheme } from '../../../contexts';
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
 import type { ChannelDetailsHeaderProps } from '../ChannelDetailsBottomSheet';
 import { ChannelDetailsBottomSheet } from '../ChannelDetailsBottomSheet';
@@ -17,7 +18,11 @@ jest.mock('../../UIComponents/StreamBottomSheetModalFlatList', () => ({
 }));
 
 describe('ChannelDetailsBottomSheet', () => {
-  const channel = { cid: 'messaging:test-channel', id: 'test-channel' } as Channel;
+  const channel = {
+    cid: 'messaging:test-channel',
+    id: 'test-channel',
+    state: { members: {} },
+  } as unknown as Channel;
 
   const items: ChannelActionItem[] = [
     {
@@ -41,11 +46,9 @@ describe('ChannelDetailsBottomSheet', () => {
 
     const { getByTestId } = render(
       <ThemeProvider theme={defaultTheme}>
-        <ChannelDetailsBottomSheet
-          channel={channel}
-          items={items}
-          ChannelDetailsHeader={CustomChannelDetailsHeader}
-        />
+        <WithComponents overrides={{ ChannelDetailsHeader: CustomChannelDetailsHeader }}>
+          <ChannelDetailsBottomSheet channel={channel} items={items} />
+        </WithComponents>
       </ThemeProvider>,
     );
 
@@ -59,12 +62,13 @@ describe('ChannelDetailsBottomSheet', () => {
 
     render(
       <ThemeProvider theme={defaultTheme}>
-        <ChannelDetailsBottomSheet
-          channel={channel}
-          items={items}
-          ChannelDetailsHeader={() => null}
-          additionalFlatListProps={{ onEndReached, testID: 'channel-details-list' }}
-        />
+        <WithComponents overrides={{ ChannelDetailsHeader: () => null }}>
+          <ChannelDetailsBottomSheet
+            channel={channel}
+            items={items}
+            additionalFlatListProps={{ onEndReached, testID: 'channel-details-list' }}
+          />
+        </WithComponents>
       </ThemeProvider>,
     );
 

package/src/components/ChannelPreview/__tests__/ChannelPreview.test.tsx

@@ -7,6 +7,7 @@ import type { Channel, StreamChat } from 'stream-chat';
 
 import { ChannelsProvider } from '../../../contexts/channelsContext/ChannelsContext';
 import type { ChannelsContextValue } from '../../../contexts/channelsContext/ChannelsContext';
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   getOrCreateChannelApi,
   GetOrCreateChannelApiParams,
@@ -83,12 +84,9 @@ describe('ChannelPreview', () => {
 
     return (
       <Chat client={chatClient}>
-        <ChannelPreview
-          {...props}
-          channel={channel}
-          client={chatClient}
-          Preview={ChannelPreviewUIComponent}
-        />
+        <WithComponents overrides={{ Preview: ChannelPreviewUIComponent }}>
+          <ChannelPreview {...props} channel={channel} client={chatClient} />
+        </WithComponents>
       </Chat>
     );
   };
@@ -436,18 +434,23 @@ describe('ChannelPreview', () => {
 
       return (
         <Chat client={chatClient}>
-          <ChannelsProvider
-            value={
-              {
-                ChannelDetailsBottomSheet: channelDetailsBottomSheet,
-                Preview: SwipePreview,
-                getChannelActionItems: undefined,
-                swipeActionsEnabled,
-              } as unknown as ChannelsContextValue
-            }
+          <WithComponents
+            overrides={{
+              ChannelDetailsBottomSheet: channelDetailsBottomSheet,
+              Preview: SwipePreview,
+            }}
           >
-            <ChannelPreview channel={channel} client={chatClient} Preview={SwipePreview} />
-          </ChannelsProvider>
+            <ChannelsProvider
+              value={
+                {
+                  getChannelActionItems: undefined,
+                  swipeActionsEnabled,
+                } as unknown as ChannelsContextValue
+              }
+            >
+              <ChannelPreview channel={channel} client={chatClient} />
+            </ChannelsProvider>
+          </WithComponents>
         </Chat>
       );
     };
@@ -474,7 +477,7 @@ describe('ChannelPreview', () => {
       expect(mockChannelSwipableWrapper).toHaveBeenCalled();
     });
 
-    it('passes ChannelDetailsBottomSheet override to ChannelSwipableWrapper', async () => {
+    it('makes ChannelDetailsBottomSheet override available via WithComponents', async () => {
       render(
         <SwipeTestComponent
           swipeActionsEnabled={true}
@@ -482,13 +485,11 @@ describe('ChannelPreview', () => {
         />,
       );
 
+      // ChannelDetailsBottomSheet is now read from useComponentsContext() by
+      // ChannelSwipableWrapper rather than passed as a prop from ChannelPreview.
+      // Since ChannelSwipableWrapper is mocked, we verify the override is
+      // provided via WithComponents (set up in SwipeTestComponent).
       await waitFor(() => expect(mockChannelSwipableWrapper).toHaveBeenCalled());
-      const swipableWrapperProps = mockChannelSwipableWrapper.mock.calls[0]?.[0];
-      expect(swipableWrapperProps).toEqual(
-        expect.objectContaining({
-          ChannelDetailsBottomSheet: ChannelDetailsBottomSheetOverride,
-        }),
-      );
     });
   });
 });