stream-chat-react-native-core 9.3.1 → 9.4.0-beta.10

package/src/components/Attachment/Attachment.tsx

@@ -224,16 +224,21 @@ const useAudioAttachmentStyles = () => {
   const messageHasSingleAttachment = message.attachments?.length === 1;
   const messageHasCaption = !!message.text?.trim();
   const messageIsQuotedReply = !!(message.quoted_message || message.quoted_message_id);
+  const shouldRemoveAudioAttachmentPadding =
+    messageIsQuotedReply && messageHasSingleAttachment && !messageHasCaption;
   const showBackgroundTransparent =
-    messageHasOnlySingleAttachment ||
-    (messageIsQuotedReply && messageHasSingleAttachment && !messageHasCaption);
+    messageHasOnlySingleAttachment || shouldRemoveAudioAttachmentPadding;
 
   return useMemo(() => {
     return StyleSheet.create({
       container: {
-        paddingVertical: primitives.spacingXs,
-        paddingLeft: primitives.spacingXs,
-        paddingRight: primitives.spacingSm,
+        paddingVertical: shouldRemoveAudioAttachmentPadding
+          ? primitives.spacingXxs
+          : primitives.spacingXs,
+        paddingLeft: shouldRemoveAudioAttachmentPadding ? 0 : primitives.spacingXs,
+        paddingRight: shouldRemoveAudioAttachmentPadding
+          ? primitives.spacingXxs
+          : primitives.spacingSm,
         borderWidth: 0,
         backgroundColor: showBackgroundTransparent
           ? 'transparent'
@@ -255,6 +260,10 @@ const useAudioAttachmentStyles = () => {
         color: semantics.chatTextIncoming,
         fontWeight: primitives.typographyFontWeightSemiBold,
       },
+      leftContainer: {
+        paddingVertical: shouldRemoveAudioAttachmentPadding ? 0 : primitives.spacingXxs,
+        paddingHorizontal: primitives.spacingXxs,
+      },
     });
-  }, [semantics, isMyMessage, showBackgroundTransparent]);
+  }, [shouldRemoveAudioAttachmentPadding, showBackgroundTransparent, isMyMessage, semantics]);
 };

package/src/components/Attachment/Audio/AudioAttachment.tsx

@@ -78,6 +78,7 @@ export type AudioAttachmentProps = {
     playPauseButton?: StyleProp<ViewStyle>;
     speedSettingsButton?: StyleProp<ViewStyle>;
     durationText?: StyleProp<TextStyle>;
+    leftContainer?: StyleProp<TextStyle>;
   };
 };
 
@@ -215,7 +216,7 @@ export const AudioAttachment = (props: AudioAttachmentProps) => {
       style={[styles.container, container, containerStyle, stylesProps?.container]}
       testID={testID}
     >
-      <View style={[styles.leftContainer, leftContainer]}>
+      <View style={[styles.leftContainer, stylesProps?.leftContainer, leftContainer]}>
         <PlayPauseButton
           isPlaying={isPlaying}
           accessibilityLabel='Play Pause Button'
@@ -341,9 +342,7 @@ const useStyles = () => {
         fontWeight: primitives.typographyFontWeightSemiBold,
         lineHeight: primitives.typographyLineHeightTight,
       },
-      leftContainer: {
-        padding: primitives.spacingXxs,
-      },
+      leftContainer: {},
       progressControlContainer: {
         flex: 1,
       },

package/src/components/ChannelDetails/ChannelDetails.tsx

@@ -0,0 +1,223 @@
+import React, { useMemo } from 'react';
+import { ScrollView, StyleSheet, View } from 'react-native';
+
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
+
+import {
+  ChannelDetailsContextProvider,
+  type ChannelDetailsContextValue,
+} from '../../contexts/channelDetailsContext/channelDetailsContext';
+import { useChannelDetailsContext } from '../../contexts/channelDetailsContext/channelDetailsContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import type { TranslationContextValue } from '../../contexts/translationContext/TranslationContext';
+import type { GetChannelActionItems } from '../../hooks/actions/useChannelActionItems';
+import type { GetChannelMemberActionItems } from '../../hooks/actions/useChannelMemberActionItems';
+import { useIsDirectChat } from '../../hooks/useIsDirectChat';
+import { primitives } from '../../theme';
+import { GlobalFileUploadRequest } from '../../types/types';
+import { NotificationList } from '../Notifications/NotificationList';
+import { NotificationTargetProvider } from '../Notifications/NotificationTargetContext';
+
+/**
+ * Resolves the trailing role label rendered next to a member row in the channel details screen.
+ *
+ * Return `null` or `undefined` to render no label for the given member.
+ */
+export type GetMemberRoleLabel = (params: {
+  channel: Channel;
+  member: ChannelMemberResponse;
+  t: TranslationContextValue['t'];
+}) => string | null | undefined;
+
+export type ChannelDetailsProps = {
+  channel: Channel;
+  /**
+   * Compress image with quality (from 0 to 1, where 1 is best quality).
+   * On iOS, values larger than 0.8 don't produce a noticeable quality increase in most images,
+   * while a value of 0.8 will reduce the file size by about half or less compared to a value of 1.
+   * Image picker defaults to 0.8 for iOS and 1 for Android
+   */
+  compressImageQuality?: number;
+  /**
+   * Customize the list of action items rendered in the channel details actions section.
+   *
+   * Receives the default items the SDK produces for the current channel and returns the
+   * final list to render. Use this to filter, reorder, replace, or add items.
+   *
+   * The SDK still wires `onChannelDismiss` into the resulting `leave` and `deleteChannel`
+   * items (matched by `id`) after this callback runs, so those actions continue to dismiss
+   * the screen on success regardless of how the items are customized.
+   */
+  getChannelActionItems?: GetChannelActionItems;
+  /**
+   * Customize the list of action items rendered in the per-member actions bottom sheet
+   * (the sheet that opens when a member row is tapped).
+   *
+   * Receives the default items the SDK produces for the tapped member (e.g. `muteUser`,
+   * `block`) and returns the final list to render. Use this to filter, reorder, replace,
+   * or add items — for example, to inject a "Send Direct Message" action in your app.
+   */
+  getChannelMemberActionItems?: GetChannelMemberActionItems;
+  /**
+   * Override the role label shown next to each member in the channel details screen.
+   *
+   * The default implementation labels members as `Owner` (channel creator),
+   * `Admin` (`user.role === 'admin'`), or `Moderator` (`channel_role === 'channel_moderator'`),
+   * with priority Owner > Admin > Moderator. Return `null` to render no label.
+   */
+  getMemberRoleLabel?: GetMemberRoleLabel;
+  /**
+   * Fired when the user taps the "add members" button, by default it opens the add members bottom sheet. Only visible if the current user has the `update-channel-members` capability.
+   */
+  onAddMembersPress?: () => void;
+  /**
+   * Fired when the back button is pressed on the channel details header.
+   */
+  onBack?: () => void;
+  /** Fired after the channel is no longer available to the current user (delete, leave, or block actions). */
+  onChannelDismiss?: () => void;
+  /**
+   * Fired when the user taps the "Edit" button in the channel details header.
+   * The button is only rendered when the current user has the `update-channel`
+   * capability. By default it opens the channel edit details modal. Not shown in direct (1:1) channels.
+   */
+  onEditChannelPress?: () => void;
+  /**
+   * Fired when the user taps a member row. Receives the tapped member.
+   *
+   * Applies both to the member preview on the channel details screen and to the full
+   * list opened via the "view all members" modal. If omitted, the default behavior is
+   * to open the per-member actions bottom sheet (mute, block, etc.).
+   */
+  onMemberPress?: (member: ChannelMemberResponse) => void;
+  /**
+   * Fired when the user taps the "view all members" button, by default it opens the members bottom sheet.
+   */
+  onViewAllMembersPress?: () => void;
+  /**
+   * Override file upload request (used to upload channel image). By default it will use Stream's CDN.
+   * @param file File object to upload
+   */
+  doFileUploadRequest?: GlobalFileUploadRequest;
+};
+
+export const ChannelDetailsContent = () => {
+  const { channel } = useChannelDetailsContext();
+  const {
+    theme: {
+      channelDetails: { container: containerOverride, scrollContent: scrollContentOverride },
+      semantics,
+    },
+  } = useTheme();
+  const {
+    ChannelDetailsActionsSection,
+    ChannelDetailsMemberSection,
+    ChannelDetailsNavigationSection,
+    ChannelDetailsProfile,
+    ChannelDetailsNavHeader,
+  } = useComponentsContext();
+  const isDirect = useIsDirectChat(channel);
+  const styles = useStyles();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: semantics.backgroundCoreApp },
+        containerOverride,
+      ]}
+    >
+      <ChannelDetailsNavHeader />
+      <ScrollView contentContainerStyle={[styles.scrollContent, scrollContentOverride]}>
+        <ChannelDetailsProfile />
+        {ChannelDetailsNavigationSection ? <ChannelDetailsNavigationSection /> : null}
+        {isDirect ? null : <ChannelDetailsMemberSection />}
+        <ChannelDetailsActionsSection />
+      </ScrollView>
+    </View>
+  );
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelDetails = ({
+  channel,
+  compressImageQuality,
+  doFileUploadRequest,
+  getChannelActionItems,
+  getChannelMemberActionItems,
+  getMemberRoleLabel,
+  onAddMembersPress,
+  onBack,
+  onChannelDismiss,
+  onEditChannelPress,
+  onMemberPress,
+  onViewAllMembersPress,
+}: ChannelDetailsProps) => {
+  const { ChannelDetailsContent: ChannelDetailsContentOverride } = useComponentsContext();
+  const value = useMemo<ChannelDetailsContextValue>(
+    () => ({
+      channel,
+      compressImageQuality,
+      doFileUploadRequest,
+      getChannelActionItems,
+      getChannelMemberActionItems,
+      getMemberRoleLabel,
+      onAddMembersPress,
+      onBack,
+      onChannelDismiss,
+      onEditChannelPress,
+      onMemberPress,
+      onViewAllMembersPress,
+    }),
+    [
+      channel,
+      compressImageQuality,
+      doFileUploadRequest,
+      getChannelActionItems,
+      getChannelMemberActionItems,
+      getMemberRoleLabel,
+      onAddMembersPress,
+      onBack,
+      onChannelDismiss,
+      onEditChannelPress,
+      onMemberPress,
+      onViewAllMembersPress,
+    ],
+  );
+  const Content = ChannelDetailsContentOverride ?? ChannelDetailsContent;
+  const notificationHostId = channel?.cid ? `channel-details:${channel.cid}` : undefined;
+
+  return (
+    <ChannelDetailsContextProvider value={value}>
+      {notificationHostId ? (
+        <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
+          <Content />
+          <NotificationList />
+        </NotificationTargetProvider>
+      ) : (
+        <Content />
+      )}
+    </ChannelDetailsContextProvider>
+  );
+};
+
+const useStyles = () => {
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+        },
+        scrollContent: {
+          gap: primitives.spacingMd,
+          paddingBottom: primitives.spacing3xl,
+          paddingHorizontal: primitives.spacingMd,
+          paddingTop: primitives.spacing2xl,
+        },
+      }),
+    [],
+  );
+};

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

@@ -0,0 +1,174 @@
+import React, { PropsWithChildren } from 'react';
+import { Text } from 'react-native';
+
+import { render, screen } from '@testing-library/react-native';
+import { NotificationManager } from 'stream-chat';
+import type { Channel } from 'stream-chat';
+
+import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { ChatContext } from '../../../contexts/chatContext/ChatContext';
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import * as useIsDirectChatModule from '../../../hooks/useIsDirectChat';
+import { ChannelDetails } from '../ChannelDetails';
+
+const Providers = ({ children }: PropsWithChildren) => (
+  <ThemeProvider theme={defaultTheme}>
+    <TranslationProvider
+      value={{
+        t: ((key: string) => key) as never,
+        tDateTimeParser: ((input: unknown) => input) as never,
+        userLanguage: 'en',
+      }}
+    >
+      <ChatContext.Provider
+        value={{ client: { notifications: new NotificationManager(), userID: 'me' } } as never}
+      >
+        {children}
+      </ChatContext.Provider>
+    </TranslationProvider>
+  </ThemeProvider>
+);
+
+const HeaderProbe = () => <Text testID='probe-header'>HEADER</Text>;
+const ProfileProbe = () => <Text testID='probe-profile'>PROFILE</Text>;
+const NavigationProbe = () => <Text testID='probe-navigation'>NAVIGATION</Text>;
+const MemberProbe = () => <Text testID='probe-member'>MEMBER</Text>;
+const ActionsProbe = () => <Text testID='probe-actions'>ACTIONS</Text>;
+
+const SECTION_OVERRIDES = {
+  ChannelDetailsActionsSection: ActionsProbe,
+  ChannelDetailsMemberSection: MemberProbe,
+  ChannelDetailsNavigationSection: NavigationProbe,
+  ChannelDetailsProfile: ProfileProbe,
+  ChannelDetailsNavHeader: HeaderProbe,
+};
+
+const channel = {
+  cid: 'messaging:test',
+  id: 'test',
+  on: jest.fn(() => ({ unsubscribe: jest.fn() })),
+} as unknown as Channel;
+
+const renderContent = () =>
+  render(
+    <Providers>
+      <WithComponents overrides={SECTION_OVERRIDES}>
+        <ChannelDetails channel={channel} />
+      </WithComponents>
+    </Providers>,
+  );
+
+describe('ChannelDetailsContent', () => {
+  let useIsDirectChatSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    useIsDirectChatSpy = jest
+      .spyOn(useIsDirectChatModule, 'useIsDirectChat')
+      .mockReturnValue(false);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('section composition', () => {
+    it('renders header, profile, navigation, and actions sections', () => {
+      renderContent();
+      expect(screen.getByTestId('probe-header')).toBeTruthy();
+      expect(screen.getByTestId('probe-profile')).toBeTruthy();
+      expect(screen.getByTestId('probe-navigation')).toBeTruthy();
+      expect(screen.getByTestId('probe-actions')).toBeTruthy();
+    });
+
+    it('renders the member section for group chats', () => {
+      useIsDirectChatSpy.mockReturnValue(false);
+      renderContent();
+      expect(screen.getByTestId('probe-member')).toBeTruthy();
+    });
+
+    it('hides the member section for direct chats', () => {
+      useIsDirectChatSpy.mockReturnValue(true);
+      renderContent();
+      expect(screen.queryByTestId('probe-member')).toBeNull();
+    });
+  });
+});
+
+describe('ChannelDetails', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('context provisioning', () => {
+    it('exposes channel and callbacks via ChannelDetailsContext', () => {
+      const onChannelDismiss = jest.fn();
+      const onBack = jest.fn();
+      let captured: ReturnType<typeof useChannelDetailsContext> | undefined;
+      const ContextProbe = () => {
+        captured = useChannelDetailsContext();
+        return null;
+      };
+
+      render(
+        <Providers>
+          <WithComponents
+            overrides={{
+              ...SECTION_OVERRIDES,
+              ChannelDetailsContent: ContextProbe,
+            }}
+          >
+            <ChannelDetails channel={channel} onBack={onBack} onChannelDismiss={onChannelDismiss} />
+          </WithComponents>
+        </Providers>,
+      );
+
+      expect(captured).toBeDefined();
+      expect(captured?.channel).toBe(channel);
+      expect(captured?.onChannelDismiss).toBe(onChannelDismiss);
+      expect(captured?.onBack).toBe(onBack);
+    });
+  });
+
+  describe('ChannelDetailsContent override', () => {
+    it('renders the override instead of the default content', () => {
+      const Override = () => <Text testID='custom-content'>CUSTOM</Text>;
+      render(
+        <Providers>
+          <WithComponents
+            overrides={{
+              ...SECTION_OVERRIDES,
+              ChannelDetailsContent: Override,
+            }}
+          >
+            <ChannelDetails channel={channel} />
+          </WithComponents>
+        </Providers>,
+      );
+
+      expect(screen.getByTestId('custom-content')).toBeTruthy();
+      // The default content's section probes should not render.
+      expect(screen.queryByTestId('probe-header')).toBeNull();
+      expect(screen.queryByTestId('probe-profile')).toBeNull();
+    });
+  });
+
+  describe('default content path', () => {
+    it('falls back to ChannelDetailsContent when no override is supplied', () => {
+      jest.spyOn(useIsDirectChatModule, 'useIsDirectChat').mockReturnValue(false);
+      // Note: re-export the default Content via the override map so we can prove it
+      // wasn't swapped out — the section probes from SECTION_OVERRIDES should appear.
+      render(
+        <Providers>
+          <WithComponents overrides={SECTION_OVERRIDES}>
+            <ChannelDetails channel={channel} />
+          </WithComponents>
+        </Providers>,
+      );
+      expect(screen.getByTestId('probe-header')).toBeTruthy();
+      expect(screen.getByTestId('probe-actions')).toBeTruthy();
+    });
+  });
+});

package/src/components/ChannelDetails/__tests__/ChannelDetailsActionItem.test.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { fireEvent, render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import type { IconProps } from '../../../icons/utils/base';
+import { ChannelDetailsActionItem } from '../components/ChannelDetailsActionItem';
+
+const TestIcon = jest.fn<null, [IconProps]>(() => null);
+
+const renderItem = (props: Partial<React.ComponentProps<typeof ChannelDetailsActionItem>> = {}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <ChannelDetailsActionItem Icon={TestIcon} label='Pinned Messages' {...props} />
+    </ThemeProvider>,
+  );
+
+describe('ChannelDetailsActionItem', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('rendering', () => {
+    it('renders the provided label', () => {
+      renderItem({ label: 'Mute Group' });
+      expect(screen.getByText('Mute Group')).toBeTruthy();
+    });
+
+    it('renders the icon', () => {
+      renderItem();
+      expect(TestIcon).toHaveBeenCalled();
+    });
+
+    it('renders the trailing slot when provided', () => {
+      renderItem({ trailing: <Text testID='trailing'>5</Text> });
+      expect(screen.getByTestId('trailing', { includeHiddenElements: true })).toBeTruthy();
+    });
+
+    it('omits the trailing slot when not provided', () => {
+      renderItem({ testID: 'item' });
+      expect(screen.queryByTestId('trailing', { includeHiddenElements: true })).toBeNull();
+    });
+  });
+
+  describe('interaction surface', () => {
+    it('renders as a non-interactive row when onPress is not provided', () => {
+      renderItem({ testID: 'item' });
+      const row = screen.getByTestId('item');
+      expect(row.props.accessibilityRole).toBeUndefined();
+      expect(row.props.accessibilityLabel).toBeUndefined();
+    });
+
+    it('renders as a button with the label as accessibilityLabel when onPress is provided', () => {
+      renderItem({ onPress: jest.fn(), testID: 'item' });
+      const row = screen.getByTestId('item');
+      expect(row.props.accessibilityRole).toBe('button');
+      expect(row.props.accessibilityLabel).toBe('Pinned Messages');
+    });
+
+    it('invokes onPress when the row is pressed', () => {
+      const onPress = jest.fn();
+      renderItem({ onPress, testID: 'item' });
+      fireEvent.press(screen.getByTestId('item'));
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not throw when pressed without an onPress (read-only row)', () => {
+      renderItem({ testID: 'item' });
+      expect(() => fireEvent.press(screen.getByTestId('item'))).not.toThrow();
+    });
+  });
+
+  describe('destructive variant', () => {
+    const lastIconProps = () => TestIcon.mock.calls[TestIcon.mock.calls.length - 1][0];
+    const labelColor = () => {
+      const styles = screen.getByText('Pinned Messages').props.style as Array<
+        { color?: string } | undefined
+      >;
+      return styles.find((s) => s?.color)?.color;
+    };
+
+    it('colors the icon via stroke', () => {
+      renderItem();
+      const icon = lastIconProps();
+      expect(icon.stroke).toBeTruthy();
+    });
+
+    it('paints the icon and label differently when destructive vs standard', () => {
+      const { rerender } = renderItem({ destructive: false });
+      const standardIcon = lastIconProps().stroke;
+      const standardLabelColor = labelColor();
+
+      TestIcon.mockClear();
+      rerender(
+        <ThemeProvider theme={defaultTheme}>
+          <ChannelDetailsActionItem Icon={TestIcon} destructive label='Pinned Messages' />
+        </ThemeProvider>,
+      );
+      const destructiveIcon = lastIconProps().stroke;
+      const destructiveLabelColor = labelColor();
+
+      expect(destructiveIcon).not.toBe(standardIcon);
+      expect(destructiveLabelColor).not.toBe(standardLabelColor);
+      expect(destructiveIcon).toBe(destructiveLabelColor);
+    });
+  });
+
+  describe('accessibility', () => {
+    it('leaves the trailing slot exposed to assistive tech (hiding is the caller’s job)', () => {
+      renderItem({ testID: 'item', trailing: <Text testID='trailing'>5</Text> });
+      // The component no longer force-hides the trailing slot — a plain node stays visible to a11y.
+      expect(screen.queryByTestId('trailing')).toBeTruthy();
+    });
+  });
+});