stream-chat-react-native-core 9.4.0-beta.1 → 9.4.0-beta.11

package/src/components/AutoCompleteInput/mentionItems/EnhancedMentionContent.tsx

@@ -0,0 +1,71 @@
+import React, { ReactNode, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { primitives } from '../../../theme';
+
+export type EnhancedMentionContentProps = {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  testID?: string;
+};
+
+/**
+ * Title + optional subtitle pair used by every non-user mention row
+ * (channel / here / role / user_group). Override styling via
+ * `theme.messageComposer.suggestions.mention.enhancedMention{Container,Title,Subtitle}`.
+ */
+export const EnhancedMentionContent = ({
+  subtitle,
+  testID,
+  title,
+}: EnhancedMentionContentProps) => {
+  const {
+    theme: {
+      semantics,
+      messageComposer: {
+        suggestions: {
+          mention: { enhancedMentionContainer, enhancedMentionSubtitle, enhancedMentionTitle },
+        },
+      },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  return (
+    <View style={[styles.container, enhancedMentionContainer]}>
+      <Text
+        style={[styles.title, { color: semantics.textPrimary }, enhancedMentionTitle]}
+        testID={testID}
+      >
+        {title}
+      </Text>
+      {subtitle ? (
+        <Text
+          style={[styles.subtitle, { color: semantics.textSecondary }, enhancedMentionSubtitle]}
+        >
+          {subtitle}
+        </Text>
+      ) : null}
+    </View>
+  );
+};
+
+const useStyles = () =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          gap: primitives.spacingXxxs,
+        },
+        subtitle: {
+          fontSize: primitives.typographyFontSizeXs,
+          lineHeight: primitives.typographyLineHeightTight,
+        },
+        title: {
+          fontSize: primitives.typographyFontSizeMd,
+          lineHeight: primitives.typographyLineHeightNormal,
+        },
+      }),
+    [],
+  );

package/src/components/AutoCompleteInput/mentionItems/EnhancedMentionIcon.tsx

@@ -0,0 +1,71 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import type { IconProps } from '../../../icons/utils/base';
+import { primitives } from '../../../theme';
+
+export type EnhancedMentionIconProps = {
+  /**
+   * Any icon component from `package/src/icons` (or a custom one matching the
+   * same `IconProps` shape). The wrapper standardizes size + color and wraps
+   * the icon in a circular chip — per-type mention items don't have to know
+   * about any of that.
+   */
+  Icon: React.ComponentType<IconProps>;
+  /**
+   * Icon size in px. Defaults to 16. The surrounding chip scales with this.
+   */
+  size?: IconProps['size'];
+  /**
+   * Stroke / fill color. Defaults to `semantics.textSecondary`.
+   */
+  color?: IconProps['pathFill'];
+};
+
+/**
+ * Universal wrapper for non-user mention-row icons. Renders the supplied
+ * `Icon` inside a circular chip. Override chip styling via
+ * `theme.messageComposer.suggestions.mention.enhancedMentionIcon`.
+ */
+export const EnhancedMentionIcon = ({ color, Icon, size = 32 }: EnhancedMentionIconProps) => {
+  const {
+    theme: {
+      semantics,
+      messageComposer: {
+        suggestions: {
+          mention: { enhancedMentionIcon },
+        },
+      },
+    },
+  } = useTheme();
+  const styles = useStyles(size);
+
+  return (
+    <View style={[styles.chip, enhancedMentionIcon]}>
+      <Icon pathFill={color ?? semantics.textPrimary} size={size / 2} />
+    </View>
+  );
+};
+
+const useStyles = (chipSize: number) => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        chip: {
+          alignItems: 'center',
+          backgroundColor: semantics.backgroundCoreSurfaceSubtle,
+          borderColor: semantics.borderCoreSubtle,
+          borderRadius: primitives.radiusMax,
+          borderWidth: 1,
+          height: chipSize,
+          justifyContent: 'center',
+          width: chipSize,
+        },
+      }),
+    [chipSize, semantics.backgroundCoreSurfaceSubtle, semantics.borderCoreSubtle],
+  );
+};

package/src/components/AutoCompleteInput/mentionItems/MentionBroadcastItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import type { ChannelMentionSuggestion, HereMentionSuggestion } from 'stream-chat';
+
+import { EnhancedMentionContent } from './EnhancedMentionContent';
+import { EnhancedMentionIcon } from './EnhancedMentionIcon';
+import { MentionItem } from './MentionItem';
+
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { Megaphone } from '../../../icons/megaphone';
+
+export type MentionBroadcastItemProps = {
+  entity: ChannelMentionSuggestion | HereMentionSuggestion;
+};
+
+// @channel and @here are literal SDK command keywords (matching mentioned_channel
+// and mentioned_here on the wire). The title is not localized; only the
+// description below it is.
+const TITLE = { channel: '@channel', here: '@here' } as const;
+const SUBTITLE_KEY = {
+  channel: 'mention/Channel Description',
+  here: 'mention/Here Description',
+} as const;
+
+export const MentionBroadcastItem = ({ entity }: MentionBroadcastItemProps) => {
+  const { t } = useTranslationContext();
+  return (
+    <MentionItem leading={<EnhancedMentionIcon Icon={Megaphone} />}>
+      <EnhancedMentionContent
+        subtitle={t(SUBTITLE_KEY[entity.mentionType])}
+        testID='mentions-item-name'
+        title={TITLE[entity.mentionType]}
+      />
+    </MentionItem>
+  );
+};

package/src/components/AutoCompleteInput/mentionItems/MentionItem.tsx

@@ -0,0 +1,59 @@
+import React, { PropsWithChildren, ReactNode, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { primitives } from '../../../theme';
+
+export type MentionItemProps = PropsWithChildren<{
+  /**
+   * Leading visual rendered to the left of the row. UserAvatar for user
+   * mentions, an `EnhancedMentionIcon` for the rest.
+   */
+  leading?: ReactNode;
+  testID?: string;
+}>;
+
+/**
+ * Layout primitive for every mention-suggestion row: `[leading | content]`.
+ * The per-type content (tokenized user name, or `EnhancedMentionContent` for
+ * channel/here/role/user_group) is passed as children. Container and column
+ * styles come from `theme.messageComposer.suggestions.mention`.
+ */
+export const MentionItem = ({ children, leading, testID }: MentionItemProps) => {
+  const {
+    theme: {
+      messageComposer: {
+        suggestions: {
+          mention: { column, container },
+        },
+      },
+    },
+  } = useTheme();
+  const styles = useStyles();
+
+  return (
+    <View style={[styles.container, container]} testID={testID}>
+      {leading}
+      <View style={[styles.column, column]}>{children}</View>
+    </View>
+  );
+};
+
+const useStyles = () =>
+  useMemo(
+    () =>
+      StyleSheet.create({
+        column: {
+          flex: 1,
+          justifyContent: 'space-evenly',
+        },
+        container: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          paddingHorizontal: primitives.spacingXs,
+          paddingVertical: primitives.spacingXs,
+          gap: primitives.spacingSm,
+        },
+      }),
+    [],
+  );

package/src/components/AutoCompleteInput/mentionItems/MentionRoleItem.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import type { RoleMentionSuggestion } from 'stream-chat';
+
+import { EnhancedMentionContent } from './EnhancedMentionContent';
+import { EnhancedMentionIcon } from './EnhancedMentionIcon';
+import { MentionItem } from './MentionItem';
+
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { Shield } from '../../../icons/shield';
+
+export type MentionRoleItemProps = {
+  entity: RoleMentionSuggestion;
+};
+
+export const MentionRoleItem = ({ entity }: MentionRoleItemProps) => {
+  const { t } = useTranslationContext();
+  return (
+    <MentionItem leading={<EnhancedMentionIcon Icon={Shield} />}>
+      <EnhancedMentionContent
+        subtitle={t('Notify all {{ role }} members', { role: entity.name })}
+        testID='mentions-item-name'
+        title={`@${entity.name}`}
+      />
+    </MentionItem>
+  );
+};

package/src/components/AutoCompleteInput/mentionItems/MentionUserGroupItem.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import type { UserGroupMentionSuggestion } from 'stream-chat';
+
+import { EnhancedMentionContent } from './EnhancedMentionContent';
+import { EnhancedMentionIcon } from './EnhancedMentionIcon';
+import { MentionItem } from './MentionItem';
+
+import { PeopleIcon } from '../../../icons/users';
+
+export type MentionUserGroupItemProps = {
+  entity: UserGroupMentionSuggestion;
+};
+
+export const MentionUserGroupItem = ({ entity }: MentionUserGroupItemProps) => (
+  <MentionItem leading={<EnhancedMentionIcon Icon={PeopleIcon} />}>
+    <EnhancedMentionContent
+      subtitle={entity.description}
+      testID='mentions-item-name'
+      title={`@${entity.name}`}
+    />
+  </MentionItem>
+);

package/src/components/AutoCompleteInput/mentionItems/MentionUserItem.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+
+import type { UserSuggestion } from 'stream-chat';
+
+import { MentionItem } from './MentionItem';
+import { TokenizedSuggestionParts } from './TokenizedSuggestionParts';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { primitives } from '../../../theme';
+import { UserAvatar } from '../../ui/Avatar/UserAvatar';
+
+export type MentionUserItemProps = {
+  entity: UserSuggestion;
+};
+
+export const MentionUserItem = ({ entity }: MentionUserItemProps) => {
+  const styles = useStyles();
+
+  return (
+    <MentionItem
+      leading={
+        <View importantForAccessibility='no-hide-descendants'>
+          <UserAvatar showOnlineIndicator={!!entity.online} size='md' user={entity} />
+        </View>
+      }
+    >
+      <TokenizedSuggestionParts
+        fallback={entity.name || entity.id}
+        matchStyle={styles.match}
+        style={styles.name}
+        testID='mentions-item-name'
+        tokenizedDisplayName={entity.tokenizedDisplayName}
+      />
+    </MentionItem>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () => ({
+      match: { fontWeight: primitives.typographyFontWeightBold },
+      name: {
+        color: semantics.textPrimary,
+        fontSize: primitives.typographyFontSizeMd,
+        lineHeight: primitives.typographyLineHeightNormal,
+        paddingBottom: 2,
+      },
+    }),
+    [semantics.textPrimary],
+  );
+};

package/src/components/AutoCompleteInput/mentionItems/TokenizedSuggestionParts.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleProp, Text, TextStyle } from 'react-native';
+
+import type { TokenizationPayload } from 'stream-chat';
+
+export type TokenizedSuggestionPartsProps = {
+  /**
+   * Token + parts payload produced by the stream-chat-js text composer search
+   * source. When the consumer matches against a display name the source splits
+   * the name into substrings around the matched token; we render each part and
+   * bold whichever part case-insensitively equals the token.
+   */
+  tokenizedDisplayName?: TokenizationPayload['tokenizedDisplayName'];
+  /**
+   * Fallback string rendered when the tokenized payload is absent (or empty).
+   */
+  fallback?: string;
+  style?: StyleProp<TextStyle>;
+  matchStyle?: StyleProp<TextStyle>;
+  testID?: string;
+};
+
+const partMatchesToken = (part: string, token: string) =>
+  token.length > 0 && part.toLowerCase() === token.toLowerCase();
+
+export const TokenizedSuggestionParts = ({
+  fallback,
+  matchStyle,
+  style,
+  tokenizedDisplayName,
+  testID,
+}: TokenizedSuggestionPartsProps) => {
+  if (!tokenizedDisplayName || tokenizedDisplayName.parts.length === 0) {
+    if (!fallback) return null;
+    return (
+      <Text style={style} testID={testID}>
+        {fallback}
+      </Text>
+    );
+  }
+
+  const { parts, token } = tokenizedDisplayName;
+  return (
+    <Text style={style} testID={testID}>
+      {parts.map((part, index) =>
+        partMatchesToken(part, token) ? (
+          <Text key={index} style={matchStyle}>
+            {part}
+          </Text>
+        ) : (
+          part
+        ),
+      )}
+    </Text>
+  );
+};

package/src/components/AutoCompleteInput/mentionItems/__tests__/MentionItems.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+
+import { cleanup, render } from '@testing-library/react-native';
+
+// UserAvatar pulls in ComponentsContext defaults which transitively load
+// stream-chat-js's CJS dist; that fails to resolve @babel/runtime when the
+// SDK is consumed from a workspace symlink during tests. The avatar itself
+// isn't what we assert on here, so substitute a no-op.
+jest.mock('../../../ui/Avatar/UserAvatar', () => ({
+  UserAvatar: () => null,
+}));
+
+// Same reason — useMessageComposer (used by AutoCompleteSuggestionItem) pulls
+// stream-chat-js's CJS dist at module load. The dispatcher we're testing
+// doesn't use these hooks itself, so stub them.
+jest.mock('../../../../contexts/messageInputContext/hooks/useMessageComposer', () => ({
+  useMessageComposer: () => ({ textComposer: { handleSelect: () => {} } }),
+}));
+jest.mock('../../../../contexts/messageInputContext/hooks/useIsCommandDisabled', () => ({
+  useIsCommandDisabled: () => false,
+}));
+
+import type {
+  ChannelMentionSuggestion,
+  HereMentionSuggestion,
+  RoleMentionSuggestion,
+  UserGroupMentionSuggestion,
+  UserSuggestion,
+} from 'stream-chat';
+
+import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
+import { MentionSuggestionItem } from '../../AutoCompleteSuggestionItem';
+
+const wrap = (ui: React.ReactElement) =>
+  render(<ThemeProvider theme={defaultTheme}>{ui}</ThemeProvider>);
+
+const userEntity: UserSuggestion = {
+  id: 'u1',
+  mentionType: 'user',
+  name: 'Alice',
+  tokenizedDisplayName: { parts: ['Alice'], token: '' },
+} as unknown as UserSuggestion;
+
+const channelEntity: ChannelMentionSuggestion = {
+  id: 'channel',
+  mentionType: 'channel',
+  name: 'channel',
+  tokenizedDisplayName: { parts: ['channel'], token: '' },
+} as unknown as ChannelMentionSuggestion;
+
+const hereEntity: HereMentionSuggestion = {
+  id: 'here',
+  mentionType: 'here',
+  name: 'here',
+  tokenizedDisplayName: { parts: ['here'], token: '' },
+} as unknown as HereMentionSuggestion;
+
+const roleEntity: RoleMentionSuggestion = {
+  id: 'admin',
+  mentionType: 'role',
+  name: 'admin',
+  tokenizedDisplayName: { parts: ['admin'], token: '' },
+} as unknown as RoleMentionSuggestion;
+
+const groupEntity: UserGroupMentionSuggestion = {
+  description: 'Engineering org',
+  id: 'eng',
+  memberCount: 42,
+  mentionType: 'user_group',
+  name: 'engineering',
+  tokenizedDisplayName: { parts: ['engineering'], token: '' },
+} as unknown as UserGroupMentionSuggestion;
+
+describe('MentionSuggestionItem', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders a user row with the display name', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...userEntity} />);
+    expect(getByText('Alice')).toBeTruthy();
+  });
+
+  it('renders a broadcast row for @channel with description subtitle', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...channelEntity} />);
+    expect(getByText('@channel')).toBeTruthy();
+    expect(getByText('mention/Channel Description')).toBeTruthy();
+  });
+
+  it('renders a broadcast row for @here with description subtitle', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...hereEntity} />);
+    expect(getByText('@here')).toBeTruthy();
+    expect(getByText('mention/Here Description')).toBeTruthy();
+  });
+
+  it('renders a role row with the role name and the notify subtitle', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...roleEntity} />);
+    expect(getByText('@admin')).toBeTruthy();
+    // The test translation context echoes the i18n key; the {{ role }}
+    // interpolation is left as-is, which is enough to assert the right key
+    // was selected with the right argument.
+    expect(getByText(/Notify all .* members/)).toBeTruthy();
+  });
+
+  it('renders a user group row with name + description', () => {
+    const { getByText } = wrap(<MentionSuggestionItem {...groupEntity} />);
+    expect(getByText('@engineering')).toBeTruthy();
+    expect(getByText('Engineering org')).toBeTruthy();
+  });
+
+  it('omits the subtitle slot when a user group has no description', () => {
+    const { queryByText } = wrap(
+      <MentionSuggestionItem
+        {...({ ...groupEntity, description: undefined } as UserGroupMentionSuggestion)}
+      />,
+    );
+    expect(queryByText('Engineering org')).toBeNull();
+  });
+
+  it('renders nothing for an unknown mention type', () => {
+    const { toJSON } = wrap(
+      <MentionSuggestionItem
+        {...({ id: 'x', mentionType: 'unknown' } as unknown as ChannelMentionSuggestion)}
+      />,
+    );
+    expect(toJSON()).toBeNull();
+  });
+});

package/src/components/AutoCompleteInput/mentionItems/__tests__/TokenizedSuggestionParts.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { cleanup, render } from '@testing-library/react-native';
+
+import { TokenizedSuggestionParts } from '../TokenizedSuggestionParts';
+
+describe('TokenizedSuggestionParts', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('renders the fallback when no tokenized payload is provided', () => {
+    const { getByText } = render(<TokenizedSuggestionParts fallback='Jane Doe' />);
+    expect(getByText('Jane Doe')).toBeTruthy();
+  });
+
+  it('renders nothing when neither tokenized payload nor fallback is provided', () => {
+    const { toJSON } = render(<TokenizedSuggestionParts />);
+    expect(toJSON()).toBeNull();
+  });
+
+  it('renders all parts when the tokenized payload is present', () => {
+    const { queryByText } = render(
+      <TokenizedSuggestionParts tokenizedDisplayName={{ parts: ['Al', 'i', 'ce'], token: 'i' }} />,
+    );
+    // The full name still reads through because RN concatenates nested Text children.
+    expect(queryByText('Alice')).toBeTruthy();
+  });
+
+  it('wraps the matched part in a separate Text node so it can be styled', () => {
+    const matchStyle = { fontWeight: 'bold' as const };
+    const { UNSAFE_root } = render(
+      <TokenizedSuggestionParts
+        matchStyle={matchStyle}
+        tokenizedDisplayName={{ parts: ['Al', 'ice', 'son'], token: 'ice' }}
+      />,
+    );
+    // The matched substring is rendered inside a nested Text — the only one
+    // carrying our matchStyle — so the count of styled descendants equals the
+    // number of matching parts (case-insensitive).
+    const matchedNodes = UNSAFE_root.findAll(
+      (node) =>
+        typeof node.type !== 'string' &&
+        Array.isArray(node.props?.style) === false &&
+        node.props?.style === matchStyle,
+    );
+    expect(matchedNodes.length).toBe(1);
+  });
+
+  it('matches case-insensitively', () => {
+    const matchStyle = { fontWeight: 'bold' as const };
+    const { UNSAFE_root } = render(
+      <TokenizedSuggestionParts
+        matchStyle={matchStyle}
+        tokenizedDisplayName={{ parts: ['Channel'], token: 'channel' }}
+      />,
+    );
+    const matchedNodes = UNSAFE_root.findAll(
+      (node) => typeof node.type !== 'string' && node.props?.style === matchStyle,
+    );
+    expect(matchedNodes.length).toBe(1);
+  });
+});

package/src/components/AutoCompleteInput/mentionItems/index.ts

@@ -0,0 +1,16 @@
+export { EnhancedMentionContent } from './EnhancedMentionContent';
+export type { EnhancedMentionContentProps } from './EnhancedMentionContent';
+export { EnhancedMentionIcon } from './EnhancedMentionIcon';
+export type { EnhancedMentionIconProps } from './EnhancedMentionIcon';
+export { MentionBroadcastItem } from './MentionBroadcastItem';
+export type { MentionBroadcastItemProps } from './MentionBroadcastItem';
+export { MentionItem } from './MentionItem';
+export type { MentionItemProps } from './MentionItem';
+export { MentionRoleItem } from './MentionRoleItem';
+export type { MentionRoleItemProps } from './MentionRoleItem';
+export { MentionUserGroupItem } from './MentionUserGroupItem';
+export type { MentionUserGroupItemProps } from './MentionUserGroupItem';
+export { MentionUserItem } from './MentionUserItem';
+export type { MentionUserItemProps } from './MentionUserItem';
+export { TokenizedSuggestionParts } from './TokenizedSuggestionParts';
+export type { TokenizedSuggestionPartsProps } from './TokenizedSuggestionParts';

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

@@ -51,7 +51,11 @@ describe('useChannelDetailsActionItems', () => {
     renderHook(() => useChannelDetailsActionItems());
 
     expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith({ channel, getChannelActionItems: undefined });
+    expect(spy).toHaveBeenCalledWith({
+      channel,
+      getChannelActionItems: undefined,
+      surface: 'details',
+    });
   });
 
   it('forwards the getChannelActionItems prop from context unchanged', () => {
@@ -61,7 +65,7 @@ describe('useChannelDetailsActionItems', () => {
 
     renderHook(() => useChannelDetailsActionItems());
 
-    expect(spy).toHaveBeenCalledWith({ channel, getChannelActionItems });
+    expect(spy).toHaveBeenCalledWith({ channel, getChannelActionItems, surface: 'details' });
   });
 
   it('returns non-leave/non-delete items referentially unchanged', () => {

package/src/components/ChannelDetails/hooks/useChannelDetailsActionItems.ts

@@ -12,7 +12,7 @@ import {
 export const useChannelDetailsActionItems = (): ChannelActionItem[] => {
   const { channel, getChannelActionItems, onChannelDismiss } = useChannelDetailsContext();
 
-  const items = useChannelActionItems({ channel, getChannelActionItems });
+  const items = useChannelActionItems({ channel, getChannelActionItems, surface: 'details' });
 
   return useMemo(
     () =>

package/src/components/ChannelList/ChannelList.tsx

@@ -41,6 +41,7 @@ export type ChannelListProps = Partial<
     | 'maxUnreadCount'
     | 'numberOfSkeletons'
     | 'mutedStatusPosition'
+    | 'pinnedStatusPosition'
   >
 > & {
   /** Optional function to filter channels prior to rendering the list. Do not use any complex logic that would delay the loading of the ChannelList. We recommend using a pure function with array methods like filter/sort/reduce. */
@@ -252,6 +253,7 @@ export const ChannelList = (props: ChannelListProps) => {
     queryChannelsOverride,
     notificationHostId: notificationHostIdProp,
     mutedStatusPosition = 'inlineTitle',
+    pinnedStatusPosition = 'inlineTitle',
     swipeActionsEnabled = true,
   } = props;
 
@@ -375,6 +377,7 @@ export const ChannelList = (props: ChannelListProps) => {
       }
     },
     mutedStatusPosition,
+    pinnedStatusPosition,
   });
 
   return (