stream-chat-react-native-core 9.0.0-beta.9 → 9.0.0

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/__tests__/useChannelActionItems.test.tsx

@@ -90,31 +90,19 @@ describe('useChannelActionItems', () => {
   it('returns default channel action items', () => {
     const { result } = renderHook(() => useChannelActionItems({ channel }));
 
-    expect(result.current).toHaveLength(4);
+    expect(result.current).toHaveLength(3);
     expect(result.current.map((item) => item.action)).toEqual([
       channelActions.muteChannel,
-      channelActions.archive,
       channelActions.leave,
       expect.any(Function),
     ]);
-    expect(result.current.map((item) => item.id)).toEqual([
-      'mute',
-      'archive',
-      'leave',
-      'deleteChannel',
-    ]);
+    expect(result.current.map((item) => item.id)).toEqual(['mute', 'leave', 'deleteChannel']);
     expect(result.current.map((item) => item.type)).toEqual([
-      'standard',
       'standard',
       'destructive',
       'destructive',
     ]);
-    expect(result.current.map((item) => item.placement)).toEqual([
-      'both',
-      'both',
-      'sheet',
-      'sheet',
-    ]);
+    expect(result.current.map((item) => item.placement)).toEqual(['swipe', 'sheet', 'sheet']);
   });
 
   it('uses custom getChannelActionItems with context and defaultItems when provided', () => {
@@ -178,25 +166,18 @@ describe('getChannelActionItems', () => {
 
     expect(actionItems.map((item) => item.action)).toEqual([
       channelActions.muteChannel,
-      channelActions.archive,
       channelActions.leave,
       expect.any(Function),
     ]);
-    expect(actionItems.map((item) => item.id)).toEqual([
-      'mute',
-      'archive',
-      'leave',
-      'deleteChannel',
-    ]);
+    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'leave', 'deleteChannel']);
     expect(actionItems.map((item) => item.type)).toEqual([
-      'standard',
       'standard',
       'destructive',
       'destructive',
     ]);
   });
 
-  it('returns direct-chat variants for mute, block and archive states', () => {
+  it('returns direct-chat variants for mute and block states', () => {
     const channelActions = createChannelActions();
     const actionItems = buildDefaultChannelActionItems({
       actions: channelActions,
@@ -208,34 +189,20 @@ describe('getChannelActionItems', () => {
       t: (value) => value,
     });
 
-    expect(actionItems.map((item) => item.id)).toEqual([
-      'mute',
-      'block',
-      'archive',
-      'leave',
-      'deleteChannel',
-    ]);
+    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'block', 'leave', 'deleteChannel']);
     expect(actionItems.map((item) => item.action)).toEqual([
       channelActions.unmuteUser,
       channelActions.unblockUser,
-      channelActions.unarchive,
       channelActions.leave,
       expect.any(Function),
     ]);
     expect(actionItems.map((item) => item.label)).toEqual([
       'Unmute User',
       'Unblock User',
-      'Unarchive Chat',
       'Leave Chat',
       'Delete Chat',
     ]);
-    expect(actionItems.map((item) => item.placement)).toEqual([
-      'sheet',
-      'sheet',
-      'sheet',
-      'sheet',
-      'sheet',
-    ]);
+    expect(actionItems.map((item) => item.placement)).toEqual(['sheet', 'sheet', 'sheet', 'sheet']);
   });
 
   it('omits delete action when current user is not the channel creator', () => {
@@ -249,10 +216,10 @@ describe('getChannelActionItems', () => {
       t: (value) => value,
     });
 
-    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'archive', 'leave']);
+    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'leave']);
   });
 
-  it('uses group variants for mute and archive labels and placements', () => {
+  it('uses group mute variants for labels and placements', () => {
     const channelActions = createChannelActions();
     const actionItems = buildDefaultChannelActionItems({
       actions: channelActions,
@@ -266,11 +233,11 @@ describe('getChannelActionItems', () => {
 
     expect(actionItems[0].action).toBe(channelActions.unmuteChannel);
     expect(actionItems[0].label).toBe('Unmute Group');
-    expect(actionItems[0].placement).toBe('both');
+    expect(actionItems[0].placement).toBe('swipe');
 
-    expect(actionItems[1].action).toBe(channelActions.unarchive);
-    expect(actionItems[1].label).toBe('Unarchive Group');
-    expect(actionItems[1].placement).toBe('both');
+    expect(actionItems[1].action).toBe(channelActions.leave);
+    expect(actionItems[1].label).toBe('Leave Group');
+    expect(actionItems[1].placement).toBe('sheet');
   });
 
   it('shows delete confirmation and calls deleteChannel on destructive confirm', async () => {

package/src/components/ChannelList/hooks/useChannelActionItems.tsx

@@ -12,8 +12,8 @@ import { useIsDirectChat } from './useIsDirectChat';
 
 import { useTheme, useTranslationContext } from '../../../contexts';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
-import { Archive, IconProps, Mute, BlockUser, Delete } from '../../../icons';
-import { ArrowBoxLeft } from '../../../icons/ArrowBoxLeft';
+import { IconProps, Mute, BlockUser, Delete, Sound } from '../../../icons';
+import { ArrowBoxLeft } from '../../../icons/leave';
 
 export type ChannelActionHandler = () => Promise<void> | void;
 
@@ -56,10 +56,8 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
 ) => {
   const {
     actions: {
-      archive,
       deleteChannel,
       leave,
-      unarchive,
       muteChannel,
       unmuteChannel,
       muteUser,
@@ -67,7 +65,6 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
       blockUser,
       unblockUser,
     },
-    isArchived,
     isDirectChat,
     muteActive,
     t,
@@ -92,15 +89,18 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
         : muteActive
           ? unmuteChannel
           : muteChannel,
-      Icon: (props) => (
-        <Mute
-          width={20}
-          height={20}
-          {...props}
-          stroke={undefined}
-          fill={props.fill ?? props.stroke}
-        />
-      ),
+      Icon: (props) =>
+        muteActive ? (
+          <Sound width={20} height={20} {...props} />
+        ) : (
+          <Mute
+            width={20}
+            height={20}
+            {...props}
+            stroke={undefined}
+            fill={props.fill ?? props.stroke}
+          />
+        ),
       id: 'mute',
       label: isDirectChat
         ? muteActive
@@ -109,7 +109,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
         : muteActive
           ? t('Unmute Group')
           : t('Mute Group'),
-      placement: isDirectChat ? 'sheet' : 'both',
+      placement: isDirectChat ? 'sheet' : 'swipe',
       type: 'standard',
     },
   ];
@@ -125,21 +125,6 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
     });
   }
 
-  actionItems.push({
-    action: isArchived ? unarchive : archive,
-    Icon: (props) => <ChannelActionsIcon Icon={Archive} {...props} />,
-    id: 'archive',
-    label: isDirectChat
-      ? isArchived
-        ? t('Unarchive Chat')
-        : t('Archive Chat')
-      : isArchived
-        ? t('Unarchive Group')
-        : t('Archive Group'),
-    placement: isDirectChat ? 'sheet' : 'both',
-    type: 'standard',
-  });
-
   actionItems.push({
     action: leave,
     Icon: (props) => <ChannelActionsIcon Icon={ArrowBoxLeft} {...props} />,

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

@@ -4,27 +4,32 @@ import type { FlatListProps } from 'react-native';
 
 import { Pressable } from 'react-native-gesture-handler';
 
-import { Channel } from 'stream-chat';
+import type { Channel } from 'stream-chat';
 
+import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
 import { ChannelPreviewTitle } from './ChannelPreviewTitle';
+import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 
-import { useBottomSheetContext, useTheme, useTranslationContext } from '../../contexts';
+import { useBottomSheetContext } from '../../contexts/bottomSheetContext/BottomSheetContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
-import { useStableCallback } from '../../hooks';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { primitives } from '../../theme';
-import { ChannelActionItem } from '../ChannelList/hooks/useChannelActionItems';
+import type { ChannelActionItem } from '../ChannelList/hooks/useChannelActionItems';
 import { useChannelMembersState } from '../ChannelList/hooks/useChannelMembersState';
+import { useChannelMuteActive } from '../ChannelList/hooks/useChannelMuteActive';
 import { useChannelOnlineMemberCount } from '../ChannelList/hooks/useChannelOnlineMemberCount';
 import { useIsDirectChat } from '../ChannelList/hooks/useIsDirectChat';
-import { ChannelAvatar } from '../ui';
-import { StreamBottomSheetModalFlatList } from '../UIComponents';
+import { ChannelAvatar } from '../ui/Avatar/ChannelAvatar';
+import { StreamBottomSheetModalFlatList } from '../UIComponents/StreamBottomSheetModalFlatList';
 
 export type ChannelDetailsHeaderProps = { channel: Channel };
 
 export type ChannelDetailsBottomSheetProps = {
   additionalFlatListProps?: Partial<FlatListProps<ChannelActionItem>>;
   channel: Channel;
-  ChannelDetailsHeader?: React.ComponentType<ChannelDetailsHeaderProps>;
   items: ChannelActionItem[];
 };
 
@@ -35,6 +40,9 @@ export const ChannelDetailsHeader = ({ channel }: ChannelDetailsHeaderProps) =>
   const memberCount = useMemo(() => Object.keys(members).length, [members]);
   const onlineCount = useChannelOnlineMemberCount(channel);
   const isDirectChat = useIsDirectChat(channel);
+  const { muted: channelMuted } = useIsChannelMuted(channel);
+  const directChatUserMuted = useChannelMuteActive(channel);
+  const muted = isDirectChat ? directChatUserMuted : channelMuted;
   const displayedMemberCount = memberCount > 9 ? '9+' : `${memberCount}`;
   const displayedOnlineCount = onlineCount > 9 ? '9+' : `${onlineCount}`;
   const membersAndOnlineLabel = useMemo(
@@ -49,9 +57,12 @@ export const ChannelDetailsHeader = ({ channel }: ChannelDetailsHeaderProps) =>
 
   return (
     <View style={styles.headerContainer}>
-      <ChannelAvatar channel={channel} size={'lg'} />
+      <ChannelAvatar channel={channel} size={'xl'} />
       <View style={styles.metaContainer}>
-        <ChannelPreviewTitle channel={channel} />
+        <View style={styles.titleContainer}>
+          <ChannelPreviewTitle channel={channel} />
+          {muted ? <ChannelPreviewMutedStatus /> : null}
+        </View>
         <Text style={styles.headerMeta}>
           {isDirectChat ? (onlineCount === 1 ? t('Online') : t('Offline')) : membersAndOnlineLabel}
         </Text>
@@ -93,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 (
     <>
@@ -132,7 +143,7 @@ const useStyles = () => {
           flexDirection: 'row',
           padding: primitives.spacingSm,
           gap: primitives.spacingSm,
-          backgroundColor: semantics.backgroundCoreElevation1,
+          backgroundColor: 'transparent',
           ...header.container,
         },
         headerMeta: {
@@ -145,6 +156,11 @@ const useStyles = () => {
           gap: primitives.spacingXxs,
           ...header.metaContainer,
         },
+        titleContainer: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          gap: primitives.spacingXxs,
+        },
         itemContainer: {
           flexDirection: 'row',
           alignItems: 'center',

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 { ChannelPreview } = useComponentsContext();
 
   const client = propClient || contextClient;
-  const Preview = propPreview || contextPreview;
 
   const { muted, unread, lastMessage } = useChannelPreviewData(channel, client, propForceUpdate);
 
@@ -41,16 +37,12 @@ export const ChannelPreview = (props: ChannelPreviewProps) => {
   const message = translatedLastMessage ? translatedLastMessage : lastMessage;
 
   if (!swipeActionsEnabled) {
-    return <Preview channel={channel} muted={muted} unread={unread} lastMessage={message} />;
+    return <ChannelPreview channel={channel} muted={muted} unread={unread} lastMessage={message} />;
   }
 
   return (
-    <ChannelSwipableWrapper
-      channel={channel}
-      ChannelDetailsBottomSheet={ChannelDetailsBottomSheet}
-      getChannelActionItems={getChannelActionItems}
-    >
-      <Preview channel={channel} muted={muted} unread={unread} lastMessage={message} />
+    <ChannelSwipableWrapper channel={channel} getChannelActionItems={getChannelActionItems}>
+      <ChannelPreview channel={channel} muted={muted} unread={unread} lastMessage={message} />
     </ChannelSwipableWrapper>
   );
 };