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

package/src/components/Attachment/Giphy/Giphy.tsx

@@ -17,7 +17,8 @@ import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 
 import { EyeOpen } from '../../../icons/EyeOpen';
-import { primitives } from '../../../theme';
+import { components, primitives } from '../../../theme';
+import { Button } from '../../ui/';
 
 export type GiphyPropsWithContext = Pick<
   MessageContextValue,
@@ -45,15 +46,8 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
-        giphy: {
-          actionButtonContainer,
-          actionButton,
-          actionButtonText,
-          container,
-          giphyHeaderText,
-          header,
-        },
+      messageItemView: {
+        giphy: { actionButtonContainer, actionButton, container, giphyHeaderText, header },
       },
       semantics,
     },
@@ -68,7 +62,10 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
   }
 
   return actions ? (
-    <View style={[styles.container, container]} testID='giphy-action-attachment'>
+    <View
+      style={[styles.container, styles.actionContainer, container]}
+      testID='giphy-action-attachment'
+    >
       <View style={[styles.header, header]}>
         <EyeOpen height={16} width={16} fill={semantics.chatTextOutgoing} />
         <Text style={[styles.headerText, giphyHeaderText]}>{t('Only visible to you')}</Text>
@@ -76,33 +73,23 @@ const GiphyWithContext = (props: GiphyPropsWithContext) => {
       <GiphyImage attachment={attachment} giphyVersion={giphyVersion} preview />
       <View style={[styles.actionButtonContainer, actionButtonContainer]}>
         {actions.map((action) => {
+          const isPrimaryAction = action.text === 'Send';
           return (
-            <Pressable
+            <Button
               key={action.value}
+              variant={isPrimaryAction ? 'primary' : 'secondary'}
+              type='ghost'
+              size='sm'
+              testID={`${action.value}-action-button`}
               onPress={() => {
                 if (action?.name && action?.value && handleAction) {
                   handleAction(action.name, action.value);
                 }
               }}
+              iconOnly={false}
+              label={action.text}
               style={[styles.actionButton, actionButton]}
-              testID={`${action.value}-action-button`}
-            >
-              <Text
-                numberOfLines={1}
-                style={[
-                  styles.actionButtonText,
-                  {
-                    color:
-                      action.text === 'Send'
-                        ? semantics.buttonPrimaryText
-                        : semantics.buttonSecondaryText,
-                  },
-                  actionButtonText,
-                ]}
-              >
-                {action.text}
-              </Text>
-            </Pressable>
+            />
           );
         })}
       </View>
@@ -210,7 +197,7 @@ export const Giphy = (props: GiphyProps) => {
   );
 };
 
-Giphy.displayName = 'Giphy{messageSimple{giphy}}';
+Giphy.displayName = 'Giphy{messageItemView{giphy}}';
 
 const useStyles = () => {
   const {
@@ -225,20 +212,19 @@ const useStyles = () => {
         overflow: 'hidden',
       },
       actionButtonContainer: {
+        alignSelf: 'center',
         flexDirection: 'row',
         gap: primitives.spacingXs,
-      },
-      actionButton: {
-        alignItems: 'center',
-        flex: 1,
+        paddingHorizontal: primitives.spacingXxs,
         justifyContent: 'center',
-        paddingVertical: primitives.spacingSm,
       },
-      actionButtonText: {
-        fontSize: primitives.typographyFontSizeMd,
-        fontWeight: primitives.typographyFontWeightSemiBold,
-        lineHeight: primitives.typographyLineHeightNormal,
-        color: semantics.buttonSecondaryText,
+      actionContainer: {},
+      actionButton: {
+        alignSelf: 'flex-start',
+        flexGrow: 0,
+        flexShrink: 0,
+        width: undefined,
+        minHeight: components.buttonHitTargetMinHeight,
       },
       header: {
         alignItems: 'center',

package/src/components/Attachment/Giphy/GiphyImage.tsx

@@ -49,7 +49,7 @@ const GiphyImageWithContext = (props: GiphyImagePropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         giphy: { giphyMask, giphy, imageIndicatorContainer },
       },
     },

package/src/components/Attachment/UnsupportedAttachment.tsx

@@ -34,7 +34,7 @@ export const UnsupportedAttachment = (props: UnsupportedAttachmentProps) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         unsupportedAttachment: { container, details, title },
       },
     },
@@ -53,7 +53,7 @@ export const UnsupportedAttachment = (props: UnsupportedAttachmentProps) => {
   );
 };
 
-UnsupportedAttachment.displayName = 'UnsupportedAttachment{messageSimple{file}}';
+UnsupportedAttachment.displayName = 'UnsupportedAttachment{messageItemView{file}}';
 
 const useStyles = ({ isMyMessage }: { isMyMessage: boolean }) => {
   const {

package/src/components/Attachment/UrlPreview/URLPreview.tsx

@@ -73,7 +73,7 @@ const URLPreviewWithContext = (props: URLPreviewPropsWithContext) => {
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         card: {
           container,
           cover,
@@ -292,4 +292,4 @@ const useStyles = () => {
   );
 };
 
-URLPreview.displayName = 'URLPreview{messageSimple{card}}';
+URLPreview.displayName = 'URLPreview{messageItemView{card}}';

package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx

@@ -69,7 +69,7 @@ const URLPreviewCompactWithContext = (props: URLPreviewCompactPropsWithContext)
 
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         compactUrlPreview: {
           wrapper,
           container,
@@ -296,4 +296,4 @@ const useStyles = () => {
   );
 };
 
-URLPreviewCompact.displayName = 'URLPreviewCompact{messageSimple{urlPreviewCompact}}';
+URLPreviewCompact.displayName = 'URLPreviewCompact{messageItemView{urlPreviewCompact}}';

package/src/components/Attachment/VideoThumbnail.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ImageBackground, ImageStyle, StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { VideoPlayIndicator } from '../ui';
+import { VideoPlayIndicator } from '../ui/VideoPlayIndicator';
 
 const styles = StyleSheet.create({
   container: {
@@ -22,7 +22,7 @@ export type VideoThumbnailProps = {
 export const VideoThumbnail = (props: VideoThumbnailProps) => {
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         videoThumbnail: { container },
       },
     },

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentMediaPicker.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Linking, StyleSheet } from 'react-native';
 
 import { renderAttachmentPickerItem } from './AttachmentPickerItem';
+import { IOS_LIMITED_DEEPLINK, type PhotoContentItemType } from './shared';
 
 import { useAttachmentPickerContext, useTheme, useTranslationContext } from '../../../../contexts';
 
@@ -9,21 +10,11 @@ import { useStableCallback } from '../../../../hooks';
 import { Picture } from '../../../../icons';
 
 import { NativeHandlers } from '../../../../native';
-import type { File } from '../../../../types/types';
 import { BottomSheetFlatList } from '../../../BottomSheetCompatibility/BottomSheetFlatList';
 import {
-  AttachmentPickerContentProps,
   AttachmentPickerGenericContent,
-} from '../AttachmentPickerContent';
-
-export const IOS_LIMITED_DEEPLINK = '@getstream/ios-limited-button' as const;
-
-export type IosLimitedItemType = { uri: typeof IOS_LIMITED_DEEPLINK };
-
-export type PhotoContentItemType = File | IosLimitedItemType;
-
-export const isIosLimited = (item: PhotoContentItemType): item is IosLimitedItemType =>
-  'uri' in item && item.uri === '@getstream/ios-limited-button';
+  type AttachmentPickerContentProps,
+} from '../AttachmentPickerGenericContent';
 
 const keyExtractor = (item: PhotoContentItemType) => item.uri;
 

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx

@@ -4,7 +4,7 @@ import { Alert, ImageBackground, StyleSheet, Text, View } from 'react-native';
 
 import { FileReference, isLocalImageAttachment, isLocalVideoAttachment } from 'stream-chat';
 
-import { isIosLimited, PhotoContentItemType } from './AttachmentMediaPicker';
+import { isIosLimited, type PhotoContentItemType } from './shared';
 
 import { useAttachmentPickerContext } from '../../../../contexts';
 import { useAttachmentManagerState } from '../../../../contexts/messageInputContext/hooks/useAttachmentManagerState';

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/shared.ts

@@ -0,0 +1,10 @@
+import type { File } from '../../../../types/types';
+
+export const IOS_LIMITED_DEEPLINK = '@getstream/ios-limited-button' as const;
+
+export type IosLimitedItemType = { uri: typeof IOS_LIMITED_DEEPLINK };
+
+export type PhotoContentItemType = File | IosLimitedItemType;
+
+export const isIosLimited = (item: PhotoContentItemType): item is IosLimitedItemType =>
+  'uri' in item && item.uri === IOS_LIMITED_DEEPLINK;

package/src/components/AttachmentPicker/components/AttachmentPickerContent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Linking, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Linking, Platform, Pressable, StyleSheet, Text } from 'react-native';
 
 import { FlatList } from 'react-native-gesture-handler';
 
@@ -7,6 +7,11 @@ import { CommandSearchSource, CommandSuggestion } from 'stream-chat';
 
 import { AttachmentMediaPicker } from './AttachmentMediaPicker/AttachmentMediaPicker';
 
+import {
+  AttachmentPickerGenericContent,
+  type AttachmentPickerContentProps,
+} from './AttachmentPickerGenericContent';
+
 import {
   useAttachmentPickerContext,
   useBottomSheetContext,
@@ -16,90 +21,9 @@ import {
 } from '../../../contexts';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useAttachmentPickerState, useStableCallback } from '../../../hooks';
-import { Camera, FilePickerIcon, IconProps, PollThumbnail, Recorder } from '../../../icons';
+import { Camera, FilePickerIcon, PollThumbnail, Recorder } from '../../../icons';
 import { primitives } from '../../../theme';
 import { CommandSuggestionItem } from '../../AutoCompleteInput/AutoCompleteSuggestionItem';
-import { Button } from '../../ui';
-
-const useStyles = () => {
-  const {
-    theme: { semantics },
-  } = useTheme();
-
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        container: {
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: semantics.backgroundCoreElevation1,
-          paddingHorizontal: primitives.spacing2xl,
-          paddingBottom: primitives.spacing3xl,
-        },
-        infoContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
-        text: {
-          fontSize: primitives.typographyFontSizeMd,
-          color: semantics.textSecondary,
-          marginTop: 8,
-          marginHorizontal: 24,
-          textAlign: 'center',
-          maxWidth: 200,
-        },
-      }),
-    [semantics.backgroundCoreElevation1, semantics.textSecondary],
-  );
-};
-
-export type AttachmentPickerGenericContentProps = {
-  Icon: React.ComponentType<IconProps>;
-  onPress: () => void;
-  height?: number;
-  buttonText?: string;
-  description?: string;
-};
-
-export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericContentProps) => {
-  const { height, buttonText, Icon, description, onPress } = props;
-  const styles = useStyles();
-
-  const {
-    theme: {
-      semantics,
-      attachmentPicker: {
-        content: { container, text, infoContainer },
-      },
-    },
-  } = useTheme();
-
-  const ThemedIcon = useCallback(
-    () => <Icon width={22} height={22} stroke={semantics.textTertiary} />,
-    [Icon, semantics.textTertiary],
-  );
-
-  return (
-    <View
-      style={[
-        styles.container,
-        {
-          height,
-        },
-        container,
-      ]}
-    >
-      <View style={[styles.infoContainer, infoContainer]}>
-        <ThemedIcon />
-        <Text style={[styles.text, text]}>{description}</Text>
-      </View>
-      <Button
-        variant={'secondary'}
-        type={'outline'}
-        size={'lg'}
-        label={buttonText}
-        onPress={onPress}
-      />
-    </View>
-  );
-};
 
 const keyExtractor = (item: { id: string }) => item.id;
 
@@ -298,7 +222,8 @@ export const AttachmentFilePicker = (props: AttachmentPickerContentProps) => {
   );
 };
 
-export type AttachmentPickerContentProps = Pick<AttachmentPickerGenericContentProps, 'height'>;
+export type { AttachmentPickerContentProps } from './AttachmentPickerGenericContent';
+export { AttachmentPickerGenericContent } from './AttachmentPickerGenericContent';
 
 export const AttachmentPickerContent = (props: AttachmentPickerContentProps) => {
   const { height } = props;

package/src/components/AttachmentPicker/components/AttachmentPickerGenericContent.tsx

@@ -0,0 +1,90 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { IconProps } from '../../../icons';
+import { primitives } from '../../../theme';
+import { Button } from '../../ui';
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: semantics.backgroundCoreElevation1,
+          paddingHorizontal: primitives.spacing2xl,
+          paddingBottom: primitives.spacing3xl,
+        },
+        infoContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+        text: {
+          fontSize: primitives.typographyFontSizeMd,
+          color: semantics.textSecondary,
+          marginTop: 8,
+          marginHorizontal: 24,
+          textAlign: 'center',
+          maxWidth: 200,
+        },
+      }),
+    [semantics.backgroundCoreElevation1, semantics.textSecondary],
+  );
+};
+
+export type AttachmentPickerContentProps = {
+  height?: number;
+};
+
+export type AttachmentPickerGenericContentProps = AttachmentPickerContentProps & {
+  Icon: React.ComponentType<IconProps>;
+  onPress: () => void;
+  buttonText?: string;
+  description?: string;
+};
+
+export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericContentProps) => {
+  const { height, buttonText, Icon, description, onPress } = props;
+  const styles = useStyles();
+
+  const {
+    theme: {
+      semantics,
+      attachmentPicker: {
+        content: { container, text, infoContainer },
+      },
+    },
+  } = useTheme();
+
+  const ThemedIcon = useCallback(
+    () => <Icon width={22} height={22} stroke={semantics.textTertiary} />,
+    [Icon, semantics.textTertiary],
+  );
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          height,
+        },
+        container,
+      ]}
+    >
+      <View style={[styles.infoContainer, infoContainer]}>
+        <ThemedIcon />
+        <Text style={[styles.text, text]}>{description}</Text>
+      </View>
+      <Button
+        variant={'secondary'}
+        type={'outline'}
+        size={'lg'}
+        label={buttonText}
+        onPress={onPress}
+      />
+    </View>
+  );
+};

package/src/components/AutoCompleteInput/AutoCompleteInput.tsx

@@ -50,7 +50,7 @@ type AutoCompleteInputPropsWithContext = TextInputProps &
   Pick<MessageInputContextValue, 'setInputBoxRef'> &
   Pick<TranslationContextValue, 't'> & {
     /**
-     * This is currently passed in from MessageInput to avoid rerenders
+     * This is currently passed in from MessageComposer to avoid rerenders
      * that would happen if we put this in the MessageInputContext
      */
     cooldownRemainingSeconds?: number;
@@ -134,7 +134,7 @@ const AutoCompleteInputWithContext = (props: AutoCompleteInputPropsWithContext)
 
   const {
     theme: {
-      messageInput: { inputBox },
+      messageComposer: { inputBox },
       semantics,
     },
   } = useTheme();
@@ -258,4 +258,4 @@ const useStyles = () => {
   }, [semantics]);
 };
 
-AutoCompleteInput.displayName = 'AutoCompleteInput{messageInput{inputBox}}';
+AutoCompleteInput.displayName = 'AutoCompleteInput{messageComposer{inputBox}}';

package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx

@@ -35,7 +35,7 @@ export const SuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
 export const AutoCompleteSuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: {
           command: { iconContainer },
         },

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -15,7 +15,7 @@ export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () =>
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         suggestions: {
           header: { container, title },
         },
@@ -39,7 +39,7 @@ export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () =>
 export const EmojiHeader: React.FC<AutoCompleteSuggestionHeaderProps> = ({ queryText }) => {
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: {
           header: { container, title },
         },
@@ -102,7 +102,7 @@ export const AutoCompleteSuggestionHeader = (props: AutoCompleteSuggestionHeader
 );
 
 AutoCompleteSuggestionHeader.displayName =
-  'AutoCompleteSuggestionHeader{messageInput{suggestions{Header}}}';
+  'AutoCompleteSuggestionHeader{messageComposer{suggestions{Header}}}';
 
 const useStyles = () => {
   const {

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -21,7 +21,7 @@ export const MentionSuggestionItem = (item: UserSuggestion) => {
   const { id, name, online } = item;
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: {
           mention: { column, container: mentionContainer, name: nameStyle },
         },
@@ -46,7 +46,7 @@ export const EmojiSuggestionItem = (item: Emoji) => {
   const { native, name } = item;
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: {
           emoji: { container: emojiContainer, text },
         },
@@ -72,7 +72,7 @@ export const CommandSuggestionItem = (item: CommandSuggestion) => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         suggestions: {
           command: { args: argsStyle, container: commandContainer, title },
         },
@@ -128,7 +128,7 @@ const UnMemoizedAutoCompleteSuggestionItem = ({
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         suggestions: { item: itemStyle },
       },
     },

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -62,7 +62,7 @@ export const AutoCompleteSuggestionList = ({
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         container: { maxHeight },
       },
     },
@@ -116,7 +116,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         suggestionsListContainer: { flatlist },
       },
     },
@@ -150,4 +150,4 @@ const useStyles = () => {
 };
 
 AutoCompleteSuggestionList.displayName =
-  'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';
+  'AutoCompleteSuggestionList{messageComposer{suggestions{List}}}';