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

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -1,46 +1,48 @@
 import React, { useCallback, useMemo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
-import type { CommandSuggestion, TextComposerSuggestion, UserSuggestion } from 'stream-chat';
+import type { CommandSuggestion, MentionSuggestion, TextComposerSuggestion } from 'stream-chat';
 
 import { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionCommandIcon';
-
+import {
+  MentionBroadcastItem,
+  MentionRoleItem,
+  MentionUserGroupItem,
+  MentionUserItem,
+} from './mentionItems';
+
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useIsCommandDisabled } from '../../contexts/messageInputContext/hooks/useIsCommandDisabled';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 import type { Emoji } from '../../types/types';
 
-import { UserAvatar } from '../ui/Avatar/UserAvatar';
-
 export type AutoCompleteSuggestionItemProps = {
   itemProps: TextComposerSuggestion;
   triggerType?: string;
 };
 
-export const MentionSuggestionItem = (item: UserSuggestion) => {
-  const { id, name, online } = item;
-  const {
-    theme: {
-      messageComposer: {
-        suggestions: {
-          mention: { column, container: mentionContainer, name: nameStyle },
-        },
-      },
-    },
-  } = useTheme();
-  const styles = useStyles();
-
-  return (
-    <View style={[styles.container, mentionContainer]}>
-      <UserAvatar user={item} size='md' showOnlineIndicator={online} />
-      <View style={[styles.column, column]}>
-        <Text style={[styles.name, nameStyle]} testID='mentions-item-name'>
-          {name || id}
-        </Text>
-      </View>
-    </View>
-  );
+/**
+ * Default `@`-trigger row dispatcher. Routes a `MentionSuggestion` to the
+ * per type component. Each per type component is its own export and can be
+ * composed by integrators who override this dispatcher via
+ * `ComponentsContext.MentionSuggestionItem`.
+ */
+export const MentionSuggestionItem = (item: MentionSuggestion) => {
+  switch (item.mentionType) {
+    case 'user':
+      return <MentionUserItem entity={item} />;
+    case 'channel':
+    case 'here':
+      return <MentionBroadcastItem entity={item} />;
+    case 'role':
+      return <MentionRoleItem entity={item} />;
+    case 'user_group':
+      return <MentionUserGroupItem entity={item} />;
+    default:
+      return null;
+  }
 };
 
 export const EmojiSuggestionItem = (item: Emoji) => {
@@ -114,9 +116,13 @@ const SuggestionItem = ({
   item: TextComposerSuggestion;
   triggerType?: string;
 }) => {
+  // Resolve via context so integrators can swap the mention dispatcher alone
+  // (e.g. to render a custom @channel row) without re-implementing the
+  // emoji/command branches of AutoCompleteSuggestionItem.
+  const { MentionSuggestionItem } = useComponentsContext();
   switch (triggerType) {
     case 'mention':
-      return <MentionSuggestionItem {...(item as UserSuggestion)} />;
+      return <MentionSuggestionItem {...(item as MentionSuggestion)} />;
     case 'emoji':
       return <EmojiSuggestionItem {...(item as Emoji)} />;
     case 'command':
@@ -147,6 +153,7 @@ const UnMemoizedAutoCompleteSuggestionItem = ({
 
   return (
     <Pressable
+      accessibilityRole='button'
       onPress={handlePress}
       style={({ pressed }) => [{ opacity: pressed ? 0.8 : 1 }, itemStyle]}
       testID='suggestion-item'
@@ -194,11 +201,6 @@ const useStyles = () => {
           fontSize: primitives.typographyFontSizeMd,
           color: semantics.textTertiary,
         },
-        column: {
-          flex: 1,
-          justifyContent: 'space-evenly',
-          paddingLeft: 8,
-        },
         container: {
           alignItems: 'center',
           flexDirection: 'row',
@@ -211,16 +213,6 @@ const useStyles = () => {
           paddingHorizontal: primitives.spacingSm,
           paddingVertical: primitives.spacingXs,
         },
-        name: {
-          fontSize: primitives.typographyFontSizeMd,
-          lineHeight: primitives.typographyLineHeightNormal,
-          color: semantics.textPrimary,
-          paddingBottom: 2,
-        },
-        tag: {
-          fontSize: 12,
-          fontWeight: '600',
-        },
         text: {
           fontSize: primitives.typographyFontSizeMd,
           fontWeight: primitives.typographyFontWeightRegular,

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