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

package/src/components/MessageList/MessageList.tsx

@@ -74,6 +74,7 @@ import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { useIncomingMessageAnnouncements } from '../Accessibility/hooks/useIncomingMessageAnnouncements';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
+import { PortalWhileClosingView } from '../UIComponents';
 
 // This is just to make sure that the scrolling happens in a different task queue.
 // TODO: Think if we really need this and strive to remove it if we can.
@@ -92,6 +93,9 @@ const useStyles = () => {
         scrollToBottomButtonContainer,
         unreadMessagesNotificationContainer,
       },
+      messageComposer: {
+        suggestionsListContainer: { container: suggestionListContainer },
+      },
     },
   } = useTheme();
 
@@ -100,6 +104,12 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
+        suggestionsListContainer: {
+          backgroundColor: 'transparent',
+          position: 'absolute',
+          width: '100%',
+          ...suggestionListContainer,
+        },
         container: {
           flex: 1,
           width: '100%',
@@ -151,6 +161,7 @@ const useStyles = () => {
       scrollToBottomButtonContainer,
       stickyHeaderContainer,
       unreadMessagesNotificationContainer,
+      suggestionListContainer,
     ],
   );
 };
@@ -360,6 +371,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     TypingIndicator,
     TypingIndicatorContainer,
     UnreadMessagesNotification,
+    AutoCompleteSuggestionList,
   } = useComponentsContext();
   const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
   const { theme } = useTheme();
@@ -1363,6 +1375,22 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           />
         </View>
       ) : null}
+      <Animated.View
+        layout={transitions.layout200}
+        style={[
+          {
+            bottom: messageInputFloating ? messageInputHeight + 16 : 0,
+          },
+          styles.suggestionsListContainer,
+        ]}
+      >
+        <PortalWhileClosingView
+          portalHostName='overlay-suggestion-list'
+          portalName='autocomplete-suggestion-list'
+        >
+          <AutoCompleteSuggestionList />
+        </PortalWhileClosingView>
+      </Animated.View>
       <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
     </View>
   );

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -1715,6 +1715,30 @@ exports[`Thread should match thread snapshot 1`] = `
           }
         }
       />
+      <View
+        layout={BaseAnimationMock {}}
+        style={
+          [
+            {
+              "bottom": 0,
+            },
+            {
+              "backgroundColor": "transparent",
+              "position": "absolute",
+              "width": "100%",
+            },
+          ]
+        }
+      >
+        <View
+          name="autocomplete-suggestion-list"
+        >
+          <View
+            collapsable={false}
+            onLayout={[Function]}
+          />
+        </View>
+      </View>
     </View>
     <View
       layout={BaseAnimationMock {}}
@@ -2327,21 +2351,6 @@ exports[`Thread should match thread snapshot 1`] = `
               </View>
             </View>
           </View>
-          <View
-            style={
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                  "position": "absolute",
-                  "width": "100%",
-                },
-                {
-                  "bottom": 0,
-                },
-                {},
-              ]
-            }
-          />
         </View>
       </View>
     </View>

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -39,12 +39,12 @@ import {
 } from './BottomSheetModal.utils';
 
 import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
+import { useAnnounceOnShow } from '../../a11y/hooks/useAnnounceOnShow';
 import { useResolvedModalAccessibilityProps } from '../../a11y/hooks/useResolvedModalAccessibilityProps';
 import { BottomSheetProvider } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
-import { useAccessibilityAnnouncer } from '../Accessibility/useAccessibilityAnnouncer';
 
 export type BottomSheetModalProps = {
   /**
@@ -544,25 +544,10 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
 
   const modalA11yProps = useResolvedModalAccessibilityProps();
 
-  const announce = useAccessibilityAnnouncer();
   const openAnnouncement = useA11yLabel(
     'a11y/Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.',
   );
-  const announcedOpenRef = useRef(false);
-  useEffect(() => {
-    if (!visible) {
-      announcedOpenRef.current = false;
-      return;
-    }
-    if (!openAnnouncement || announcedOpenRef.current) {
-      return;
-    }
-    const id = setTimeout(() => {
-      announce(openAnnouncement, 'polite');
-      announcedOpenRef.current = true;
-    }, 800);
-    return () => clearTimeout(id);
-  }, [visible, openAnnouncement, announce]);
+  useAnnounceOnShow(visible, openAnnouncement, { delayMs: 800 });
 
   const closeLabel = useA11yLabel('a11y/Close');
   const closeAccessibilityActions = useMemo(

package/src/components/UIComponents/ClippingFadeBottom.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+
+const CLIPPING_FADE_HEIGHT = 16;
+const CLIPPING_FADE_GRADIENT_ID = 'sdk-clipping-fade-bottom';
+
+export type ClippingFadeBottomProps = {
+  /**
+   * Color the fade ramps toward at the bottom edge. Typically the
+   * background color of the surface beneath the fade so the bottom edge of
+   * scrolling content visually melts into it.
+   */
+  backgroundColor: string;
+};
+
+/**
+ * Bottom edge fade overlay. Draws a 16px tall SVG linear gradient that
+ * ramps from the supplied background's transparent variant at the top to
+ * fully opaque at the bottom - visually clipping any content that scrolls
+ * past the lower edge of its parent. `pointerEvents='none'` so it doesn't
+ * intercept taps/scrolls on the rows underneath.
+ */
+export const ClippingFadeBottom = ({ backgroundColor }: ClippingFadeBottomProps) => (
+  <View pointerEvents='none' style={styles.fade}>
+    <Svg height='100%' width='100%'>
+      <Defs>
+        <LinearGradient id={CLIPPING_FADE_GRADIENT_ID} x1='0' x2='0' y1='0' y2='1'>
+          <Stop offset='0' stopColor={backgroundColor} stopOpacity='0' />
+          <Stop offset='1' stopColor={backgroundColor} stopOpacity='1' />
+        </LinearGradient>
+      </Defs>
+      <Rect fill={`url(#${CLIPPING_FADE_GRADIENT_ID})`} height='100%' width='100%' />
+    </Svg>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  fade: {
+    bottom: 0,
+    height: CLIPPING_FADE_HEIGHT,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+  },
+});

package/src/components/UIComponents/EmptyList.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { I18nManager, StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { IconProps } from '../../icons/utils/base';
+import { primitives } from '../../theme';
+
+export type EmptyListProps = {
+  /**
+   * Icon component to render. Its size and color are set by `EmptyList`.
+   */
+  icon: React.ComponentType<IconProps>;
+  /**
+   * Title text shown below the icon.
+   */
+  title: string;
+  /**
+   * Optional supporting text shown below the title.
+   */
+  subtitle?: string;
+};
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const EmptyList = ({ icon: Icon, subtitle, title }: EmptyListProps) => {
+  const {
+    theme: {
+      emptyList: { container, subtitle: subtitleStyle, title: titleStyle },
+      semantics,
+    },
+  } = useTheme();
+
+  return (
+    <View style={[styles.container, container]} testID='empty-list'>
+      <Icon stroke={semantics.textTertiary} size={32} />
+      <View style={styles.content}>
+        <Text style={[styles.title, { color: semantics.textPrimary }, titleStyle]}>{title}</Text>
+        {subtitle ? (
+          <Text style={[styles.subtitle, { color: semantics.textSecondary }, subtitleStyle]}>
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+EmptyList.displayName = 'EmptyList{emptyList}';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    gap: primitives.spacingSm,
+    height: '100%',
+    justifyContent: 'center',
+    paddingHorizontal: primitives.spacingMd,
+    paddingVertical: primitives.spacing3xl,
+    width: '100%',
+  },
+  content: {
+    alignItems: 'center',
+    gap: primitives.spacingXs,
+    width: '100%',
+  },
+  subtitle: {
+    fontSize: primitives.typographyFontSizeMd,
+    fontWeight: primitives.typographyFontWeightRegular,
+    lineHeight: primitives.typographyLineHeightNormal,
+    textAlign: 'center',
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+  },
+  title: {
+    fontSize: primitives.typographyFontSizeMd,
+    fontWeight: primitives.typographyFontWeightSemiBold,
+    lineHeight: primitives.typographyLineHeightNormal,
+    textAlign: 'center',
+    writingDirection: I18nManager.isRTL ? 'rtl' : 'ltr',
+  },
+});

package/src/components/UIComponents/PortalWhileClosingView.tsx

@@ -130,10 +130,6 @@ const useSyncingApi = (portalHostName: string, registrationId: string) => {
         y: y + (Platform.OS === 'android' ? insets.top : 0),
       };
 
-      if (!width || !height) {
-        return;
-      }
-
       placeholderLayout.value = { h: height, w: width };
 
       setClosingPortalLayout(portalHostName, registrationId, {

package/src/components/UIComponents/__tests__/EmptyList.test.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
+import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
+import { Pin } from '../../../icons/pin';
+import { EmptyList } from '../EmptyList';
+
+type EmptyListProps = React.ComponentProps<typeof EmptyList>;
+
+const renderComponent = (props: Partial<EmptyListProps> = {}) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <EmptyList icon={Pin} title='No pinned messages' {...props} />
+    </ThemeProvider>,
+  );
+
+describe('EmptyList', () => {
+  it('renders the empty-list testID', () => {
+    renderComponent();
+    expect(screen.getByTestId('empty-list')).toBeTruthy();
+  });
+
+  it('renders the title text', () => {
+    renderComponent({ title: 'Nothing here' });
+    expect(screen.getByText('Nothing here')).toBeTruthy();
+  });
+
+  it('renders the subtitle when provided', () => {
+    renderComponent({ subtitle: 'Long-press a message to pin it to the chat' });
+    expect(screen.getByText('Long-press a message to pin it to the chat')).toBeTruthy();
+  });
+
+  it('does not render a subtitle when omitted', () => {
+    renderComponent({ subtitle: undefined });
+    expect(screen.queryByText('Long-press a message to pin it to the chat')).toBeNull();
+  });
+
+  it('honors a custom container style override from the theme', () => {
+    const customTheme = {
+      ...defaultTheme,
+      emptyList: {
+        container: { backgroundColor: 'rgb(255, 0, 0)' },
+        subtitle: {},
+        title: {},
+      },
+    };
+
+    render(
+      <ThemeProvider theme={customTheme}>
+        <EmptyList icon={Pin} title='Empty' />
+      </ThemeProvider>,
+    );
+
+    const container = screen.getByTestId('empty-list');
+    const flattened = Array.isArray(container.props.style)
+      ? Object.assign({}, ...container.props.style.flat(Infinity).filter(Boolean))
+      : container.props.style;
+    expect(flattened.backgroundColor).toBe('rgb(255, 0, 0)');
+  });
+
+  it('honors custom title and subtitle style overrides from the theme', () => {
+    const customTheme = {
+      ...defaultTheme,
+      emptyList: {
+        container: {},
+        subtitle: { color: 'rgb(0, 0, 255)' },
+        title: { color: 'rgb(0, 255, 0)' },
+      },
+    };
+
+    render(
+      <ThemeProvider theme={customTheme}>
+        <EmptyList icon={Pin} subtitle='Subtitle' title='Title' />
+      </ThemeProvider>,
+    );
+
+    const flatten = (node: { props: { style: unknown } }) =>
+      Array.isArray(node.props.style)
+        ? Object.assign({}, ...(node.props.style as unknown[]).flat(Infinity).filter(Boolean))
+        : node.props.style;
+
+    const title = screen.getByText('Title') as unknown as { props: { style: unknown } };
+    const subtitle = screen.getByText('Subtitle') as unknown as { props: { style: unknown } };
+
+    expect((flatten(title) as { color?: string }).color).toBe('rgb(0, 255, 0)');
+    expect((flatten(subtitle) as { color?: string }).color).toBe('rgb(0, 0, 255)');
+  });
+});

package/src/components/UIComponents/index.ts

@@ -1,5 +1,7 @@
 export * from './BottomSheetModal';
+export * from './ClippingFadeBottom';
 export * from './StreamBottomSheetModalFlatList';
+export * from './EmptyList';
 export * from './EmptySearchResult';
 export * from './ImageBackground';
 export * from './SearchInput';

package/src/components/index.ts

@@ -28,6 +28,7 @@ export * from './AutoCompleteInput/AutoCompleteSuggestionHeader';
 export * from './AutoCompleteInput/AutoCompleteSuggestionItem';
 export * from './AutoCompleteInput/AutoCompleteSuggestionList';
 export * from './AutoCompleteInput/InputView';
+export * from './AutoCompleteInput/mentionItems';
 
 export * from './Channel/Channel';
 export * from './Channel/hooks/useCreateChannelContext';

package/src/components/ui/Avatar/AvatarGroup.tsx

@@ -28,8 +28,8 @@ export type AvatarGroupProps = {
 // Sizes accounts for the border width as well
 const sizes = {
   '2xl': {
-    width: 64,
-    height: 64,
+    width: 80,
+    height: 80,
   },
   xl: {
     width: 48,
@@ -165,7 +165,7 @@ export type UserAvatarGroupProps = Pick<AvatarGroupProps, 'size'> & {
 };
 
 const userAvatarSize: Record<UserAvatarGroupProps['size'], UserAvatarProps['size']> = {
-  '2xl': 'lg',
+  '2xl': 'xl',
   xl: 'md',
   lg: 'sm',
 };

package/src/components/ui/Avatar/constants.ts

@@ -7,8 +7,8 @@ import { OnlineIndicatorProps } from '../Badge';
 
 const avatarSizes = {
   '2xl': {
-    height: 64,
-    width: 64,
+    height: 80,
+    width: 80,
   },
   xl: {
     height: 48,

package/src/contexts/channelFileAttachmentListContext/ChannelFileAttachmentListContext.tsx

@@ -0,0 +1,67 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { Channel, MessageSearchSource } from 'stream-chat';
+
+import { useChatContext } from '..';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export type ChannelFileAttachmentListContextValue = {
+  channel: Channel;
+  searchSource: MessageSearchSource;
+};
+
+export const ChannelFileAttachmentListContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelFileAttachmentListContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelFileAttachmentListProvider = ({
+  channel,
+  children,
+}: PropsWithChildren<{ channel: Channel }>) => {
+  const { client } = useChatContext();
+  const [searchSource] = useState(() => {
+    const source = new MessageSearchSource(client, {
+      allowEmptySearchString: true,
+      pageSize: 25,
+      resetOnNewSearchQuery: false,
+    });
+    source.messageSearchChannelFilters = { cid: channel.cid, members: undefined };
+    source.messageSearchFilters = {
+      $or: [{ 'attachments.type': 'file' }, { 'attachments.type': 'audio' }],
+    };
+    // Newest first so the list groups cleanly under month section headers.
+    source.messageSearchSort = { created_at: -1 };
+    source.activate();
+    return source;
+  });
+
+  return (
+    <ChannelFileAttachmentListContext.Provider value={{ channel, searchSource }}>
+      {children}
+    </ChannelFileAttachmentListContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelFileAttachmentListContext = () => {
+  const contextValue = useContext(
+    ChannelFileAttachmentListContext,
+  ) as unknown as ChannelFileAttachmentListContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelFileAttachmentListContext hook was called outside of the ChannelFileAttachmentListContext provider. Render the file attachment list UI inside a ChannelFileAttachmentListProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/channelMediaListContext/ChannelMediaListContext.tsx

@@ -0,0 +1,68 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { Channel, MessageSearchSource } from 'stream-chat';
+
+import { useChatContext } from '..';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export type ChannelMediaListContextValue = {
+  channel: Channel;
+  searchSource: MessageSearchSource;
+};
+
+export const ChannelMediaListContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelMediaListContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelMediaListProvider = ({
+  channel,
+  children,
+}: PropsWithChildren<{ channel: Channel }>) => {
+  const { client } = useChatContext();
+  const [searchSource] = useState(() => {
+    const source = new MessageSearchSource(client, {
+      allowEmptySearchString: true,
+      pageSize: 25,
+      resetOnNewSearchQuery: false,
+    });
+    source.messageSearchChannelFilters = { cid: channel.cid, members: undefined };
+    source.messageSearchFilters = {
+      'attachments.type': { $in: ['image', 'video'] },
+      type: undefined,
+    };
+    // Newest media first so the grid reads top-to-bottom from most recent.
+    source.messageSearchSort = { created_at: -1 };
+    source.activate();
+    return source;
+  });
+
+  return (
+    <ChannelMediaListContext.Provider value={{ channel, searchSource }}>
+      {children}
+    </ChannelMediaListContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelMediaListContext = () => {
+  const contextValue = useContext(
+    ChannelMediaListContext,
+  ) as unknown as ChannelMediaListContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelMediaListContext hook was called outside of the ChannelMediaListContext provider. Render the media list UI inside a ChannelMediaListProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/channelPinnedMessageListContext/ChannelPinnedMessageListContext.tsx

@@ -0,0 +1,72 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { Channel, MessageSearchSource } from 'stream-chat';
+
+import { useChatContext } from '..';
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export type ChannelPinnedMessageListContextValue = {
+  channel: Channel;
+  searchSource: MessageSearchSource;
+};
+
+export const ChannelPinnedMessageListContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelPinnedMessageListContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelPinnedMessageListProvider = ({
+  channel,
+  children,
+}: PropsWithChildren<{ channel: Channel }>) => {
+  const { client } = useChatContext();
+  const [searchSource] = useState(() => {
+    const source = new MessageSearchSource(
+      client,
+      { pageSize: 25, allowEmptySearchString: true, resetOnNewSearchQuery: false },
+      {
+        messageSearch: {
+          initialFilterConfig: {
+            $or: {
+              enabled: true,
+              generate: ({ searchQuery }) => (searchQuery ? { text: { $q: searchQuery } } : {}),
+            },
+          },
+        },
+      },
+    );
+    source.messageSearchChannelFilters = { cid: channel.cid, members: undefined };
+    source.messageSearchFilters = { pinned: true, type: undefined };
+    source.activate();
+    return source;
+  });
+
+  return (
+    <ChannelPinnedMessageListContext.Provider value={{ channel, searchSource }}>
+      {children}
+    </ChannelPinnedMessageListContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelPinnedMessageListContext = () => {
+  const contextValue = useContext(
+    ChannelPinnedMessageListContext,
+  ) as unknown as ChannelPinnedMessageListContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelPinnedMessageListContext hook was called outside of the ChannelPinnedMessageListContext provider. Render the pinned message list UI inside a ChannelPinnedMessageListProvider.',
+    );
+  }
+
+  return contextValue;
+};