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

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -7,13 +7,17 @@ import Animated, { LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanim
 
 import { SearchSourceState, TextComposerState, TextComposerSuggestion } from 'stream-chat';
 
+import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
+import { useAnnounceOnShow } from '../../a11y/hooks/useAnnounceOnShow';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { useStateStore } from '../../hooks/useStateStore';
+import { primitives } from '../../theme';
+import { ClippingFadeBottom } from '../UIComponents/ClippingFadeBottom';
 
-export const DEFAULT_LIST_HEIGHT = 208;
+export const DEFAULT_LIST_HEIGHT = 240;
 
 export type AutoCompleteSuggestionListProps = Record<string, never>;
 
@@ -48,6 +52,7 @@ export const AutoCompleteSuggestionList = () => {
 
   const {
     theme: {
+      semantics,
       messageComposer: {
         container: { maxHeight },
       },
@@ -72,12 +77,25 @@ export const AutoCompleteSuggestionList = () => {
 
   const loadMore = useStableCallback(() => suggestions?.searchSource.search());
 
+  // Polite announcement when the suggestion list appears. Different label per
+  // trigger type so the user knows whether they're looking at mentions,
+  // commands, or emoji without having to swipe in to find out.
+  const announceLabelKey =
+    triggerType === 'command'
+      ? 'a11y/Command suggestions available'
+      : triggerType === 'emoji'
+        ? 'a11y/Emoji suggestions available'
+        : 'a11y/Mention suggestions available';
+  const announceLabel = useA11yLabel(announceLabelKey);
+  useAnnounceOnShow(!!(showList && triggerType), announceLabel);
+
   if (!showList || !triggerType) {
     return null;
   }
 
   return (
     <Animated.View
+      accessibilityRole='menu'
       entering={ZoomIn.duration(200)}
       exiting={ZoomOut.duration(200)}
       layout={LinearTransition.duration(200)}
@@ -92,8 +110,10 @@ export const AutoCompleteSuggestionList = () => {
         onEndReachedThreshold={0.1}
         renderItem={renderItem}
         style={[styles.flatlist, { maxHeight }]}
+        contentContainerStyle={styles.flatlistContentContainer}
         testID={'auto-complete-suggestion-list'}
       />
+      <ClippingFadeBottom backgroundColor={String(semantics.backgroundCoreElevation1)} />
     </Animated.View>
   );
 };
@@ -103,7 +123,7 @@ const useStyles = () => {
     theme: {
       semantics,
       messageComposer: {
-        suggestionsListContainer: { flatlist },
+        suggestionsListContainer: { flatlist, flatlistContentContainer },
       },
     },
   } = useTheme();
@@ -116,6 +136,11 @@ const useStyles = () => {
           borderTopWidth: 1,
           borderColor: semantics.borderCoreDefault,
         },
+        flatlistContentContainer: {
+          paddingVertical: primitives.spacingXs,
+          backgroundColor: 'transparent',
+          ...flatlistContentContainer,
+        },
         flatlist: {
           backgroundColor: semantics.backgroundCoreElevation1,
           shadowColor: semantics.textOnAccent,
@@ -131,7 +156,7 @@ const useStyles = () => {
           ...flatlist,
         },
       }),
-    [semantics, flatlist],
+    [semantics, flatlist, flatlistContentContainer],
   );
 };
 

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);
+  });
+});