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

package/src/components/Poll/components/PollInputDialog.tsx

@@ -72,19 +72,11 @@ export const PollInputDialog = ({
               />
             </View>
             <View style={[styles.buttonContainer, buttonContainer]}>
-              <Button
-                variant={'secondary'}
-                type={'ghost'}
-                label={t('Cancel')}
-                size='md'
-                onPress={closeDialog}
-                style={styles.button}
-              />
               <Button
                 variant={'primary'}
                 type={'solid'}
                 label={t('Send')}
-                size='md'
+                size='lg'
                 onPress={() => {
                   onSubmit(dialogInput);
                   closeDialog();
@@ -92,6 +84,14 @@ export const PollInputDialog = ({
                 style={styles.button}
                 disabled={!dialogInput}
               />
+              <Button
+                variant={'secondary'}
+                type={'outline'}
+                label={t('Cancel')}
+                size='lg'
+                onPress={closeDialog}
+                style={styles.button}
+              />
             </View>
           </Animated.View>
         </KeyboardAvoidingView>
@@ -112,8 +112,8 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
-        button: { flex: 1, width: undefined, ...button },
-        buttonContainer: { flexDirection: 'row', gap: primitives.spacingXs },
+        button: { width: undefined, ...button },
+        buttonContainer: { gap: primitives.spacingXs },
         container: {
           backgroundColor: semantics.backgroundCoreElevation1,
           borderRadius: primitives.radiusXl,
@@ -132,7 +132,7 @@ const useStyles = () => {
         input: {
           alignItems: 'center',
           borderColor: semantics.borderUtilityActive,
-          borderRadius: primitives.radiusMd,
+          borderRadius: primitives.radiusLg,
           borderWidth: 1,
           fontSize: primitives.typographyFontSizeMd,
           padding: primitives.spacingSm,

package/src/components/Poll/components/PollModal.tsx

@@ -0,0 +1,55 @@
+import React, { PropsWithChildren, useMemo } from 'react';
+import { Modal, ModalProps, StyleSheet } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+import { useTheme } from '../../../contexts';
+import { SafeAreaViewWrapper } from '../../UIComponents/SafeAreaViewWrapper';
+
+export type PollModalProps = PropsWithChildren<{
+  animationType?: ModalProps['animationType'];
+  onRequestClose?: () => void;
+  visible?: boolean;
+}>;
+
+export const PollModal = ({
+  animationType = 'slide',
+  children,
+  onRequestClose,
+  visible,
+}: PollModalProps) => {
+  const styles = useStyles();
+
+  return (
+    <Modal
+      animationType={animationType}
+      navigationBarTranslucent
+      onRequestClose={onRequestClose}
+      presentationStyle='pageSheet'
+      statusBarTranslucent
+      visible={visible}
+    >
+      <GestureHandlerRootView style={styles.root}>
+        <SafeAreaViewWrapper style={styles.safeArea}>{children}</SafeAreaViewWrapper>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+};
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        root: {
+          flex: 1,
+        },
+        safeArea: {
+          flex: 1,
+          backgroundColor: semantics.backgroundCoreElevation1,
+        },
+      }),
+    [semantics],
+  );
+};

package/src/components/Poll/components/PollModalHeader.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { ArrowLeft } from '../../../icons/arrow-left';
+import { Cross } from '../../../icons/xmark-1';
 import { primitives } from '../../../theme';
 import { Button } from '../../ui';
 
@@ -27,10 +27,10 @@ export const PollModalHeader = ({ onPress, title }: PollModalHeaderProps) => {
         <Button
           accessibilityLabelKey='a11y/Close poll'
           variant='secondary'
-          type='ghost'
+          type='outline'
           size='md'
           iconOnly
-          LeadingIcon={ArrowLeft}
+          LeadingIcon={Cross}
           onPress={onPress}
           testID='poll-results-close-button'
         />
@@ -56,8 +56,7 @@ const useStyles = () => {
           alignItems: 'center',
           flexDirection: 'row',
           justifyContent: 'space-between',
-          paddingHorizontal: primitives.spacingMd,
-          paddingVertical: 10,
+          padding: primitives.spacingMd,
           backgroundColor: semantics.backgroundCoreElevation1,
         },
         centerContainer: {

package/src/components/Poll/components/PollResults/PollResultItem.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { Modal, StyleSheet, Text, View } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { StyleSheet, Text, View } from 'react-native';
 
 import { LocalMessage, Poll, PollOption, PollVote as PollVoteClass } from 'stream-chat';
 
@@ -15,9 +14,9 @@ import {
 } from '../../../../contexts';
 
 import { primitives } from '../../../../theme';
-import { SafeAreaViewWrapper } from '../../../UIComponents/SafeAreaViewWrapper';
 import { usePollState } from '../../hooks/usePollState';
 import { GenericPollButton } from '../Button';
+import { PollModal } from '../PollModal';
 import { PollModalHeader } from '../PollModalHeader';
 
 export type ShowAllVotesButtonProps = {
@@ -62,18 +61,14 @@ export const ShowAllVotesButton = (props: ShowAllVotesButtonProps) => {
         </View>
       ) : null}
       {showAllVotes ? (
-        <Modal
+        <PollModal
           animationType='fade'
           onRequestClose={() => setShowAllVotes(false)}
           visible={showAllVotes}
         >
-          <GestureHandlerRootView style={styles.modalRoot}>
-            <SafeAreaViewWrapper style={styles.safeArea}>
-              <PollModalHeader onPress={() => setShowAllVotes(false)} title={t('Votes')} />
-              <PollOptionFullResults message={message} option={option} poll={poll} />
-            </SafeAreaViewWrapper>
-          </GestureHandlerRootView>
-        </Modal>
+          <PollModalHeader onPress={() => setShowAllVotes(false)} title={t('Votes')} />
+          <PollOptionFullResults message={message} option={option} poll={poll} />
+        </PollModal>
       ) : null}
     </>
   );
@@ -156,9 +151,6 @@ const useStyles = () => {
         alignItems: 'center',
         paddingBottom: primitives.spacingXs,
       },
-      modalRoot: {
-        flex: 1,
-      },
       title: {
         flex: 1,
         fontSize: primitives.typographyFontSizeLg,
@@ -183,10 +175,6 @@ const useStyles = () => {
         marginStart: primitives.spacingMd,
         textAlign: 'left',
       },
-      safeArea: {
-        backgroundColor: semantics.backgroundCoreElevation1,
-        flex: 1,
-      },
       inlineButton: {
         borderColor: semantics.borderCoreDefault,
         borderTopWidth: 1,

package/src/components/Poll/components/__tests__/CreatePollHeader.test.tsx

@@ -43,39 +43,8 @@ const collectPathData = (node: unknown): string[] => {
   return [...(typeof props?.d === 'string' ? [props.d] : []), ...collectPathData(children)];
 };
 
-const collectTransforms = (node: unknown): string[] => {
-  if (!node || typeof node !== 'object') {
-    return [];
-  }
-
-  if (Array.isArray(node)) {
-    return node.reduce<string[]>((acc, child) => [...acc, ...collectTransforms(child)], []);
-  }
-
-  const { children, props } = node as {
-    children?: unknown;
-    props?: { style?: StyleProp<ViewStyle> };
-  };
-  const style = StyleSheet.flatten(props?.style);
-  const styleTransforms = Array.isArray(style?.transform)
-    ? style.transform.flatMap((transform) => {
-        if (
-          transform &&
-          typeof transform === 'object' &&
-          'rotate' in transform &&
-          typeof transform.rotate === 'string'
-        ) {
-          return [transform.rotate];
-        }
-        return [];
-      })
-    : [];
-
-  return [...styleTransforms, ...collectTransforms(children)];
-};
-
 describe('CreatePollHeader', () => {
-  it('renders a secondary ghost arrow-left close button', () => {
+  it('renders a secondary outline cross close button', () => {
     render(
       <ThemeProvider>
         <CreatePollHeader onBackPressHandler={jest.fn()} onCreatePollPressHandler={jest.fn()} />
@@ -84,11 +53,10 @@ describe('CreatePollHeader', () => {
 
     const style = getCloseButtonWrapperStyle();
     expect(style.backgroundColor).toBeUndefined();
-    expect(style.borderWidth).toBeUndefined();
-    expect(style.borderColor).toBeUndefined();
+    expect(style.borderWidth).toBe(1);
+    expect(style.borderColor).toBeDefined();
     expect(collectPathData(screen.toJSON())).toContain(
-      'M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75',
+      'M15.625 4.375L4.375 15.625M15.625 15.625L4.375 4.375',
     );
-    expect(collectTransforms(screen.toJSON())).toContain('-90deg');
   });
 });

package/src/components/Poll/components/__tests__/PollModalHeader.test.tsx

@@ -47,41 +47,6 @@ const collectPathData = (node: unknown): string[] => {
   return [...(typeof props?.d === 'string' ? [props.d] : []), ...collectPathData(children)];
 };
 
-const collectTransforms = (node: unknown): string[] => {
-  if (!node || typeof node !== 'object') {
-    return [];
-  }
-
-  if (Array.isArray(node)) {
-    return node.reduce<string[]>((acc, child) => [...acc, ...collectTransforms(child)], []);
-  }
-
-  const { children, props } = node as {
-    children?: unknown;
-    props?: { style?: StyleProp<ViewStyle>; transform?: unknown };
-  };
-  const style = StyleSheet.flatten(props?.style);
-  const styleTransforms = Array.isArray(style?.transform)
-    ? style.transform.flatMap((transform) => {
-        if (
-          transform &&
-          typeof transform === 'object' &&
-          'rotate' in transform &&
-          typeof transform.rotate === 'string'
-        ) {
-          return [transform.rotate];
-        }
-        return [];
-      })
-    : [];
-
-  return [
-    ...(typeof props?.transform === 'string' ? [props.transform] : []),
-    ...styleTransforms,
-    ...collectTransforms(children),
-  ];
-};
-
 const renderPollModalHeader = () =>
   render(
     <ThemeProvider>
@@ -94,33 +59,31 @@ describe('PollModalHeader', () => {
     setPlatform(originalPlatform);
   });
 
-  it('renders a secondary ghost arrow-left button outside Android', () => {
+  it('renders a secondary outline cross button outside Android', () => {
     setPlatform('ios');
 
     renderPollModalHeader();
 
     const style = getCloseButtonWrapperStyle();
     expect(style.backgroundColor).toBeUndefined();
-    expect(style.borderWidth).toBeUndefined();
-    expect(style.borderColor).toBeUndefined();
+    expect(style.borderWidth).toBe(1);
+    expect(style.borderColor).toBeDefined();
     expect(collectPathData(screen.toJSON())).toContain(
-      'M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75',
+      'M15.625 4.375L4.375 15.625M15.625 15.625L4.375 4.375',
     );
-    expect(collectTransforms(screen.toJSON())).toContain('-90deg');
   });
 
-  it('renders a secondary ghost arrow-left button on Android', () => {
+  it('renders a secondary outline cross button on Android', () => {
     setPlatform('android');
 
     renderPollModalHeader();
 
     const style = getCloseButtonWrapperStyle();
     expect(style.backgroundColor).toBeUndefined();
-    expect(style.borderWidth).toBeUndefined();
-    expect(style.borderColor).toBeUndefined();
+    expect(style.borderWidth).toBe(1);
+    expect(style.borderColor).toBeDefined();
     expect(collectPathData(screen.toJSON())).toContain(
-      'M10 16.875V3.125M10 3.125L4.375 8.75M10 3.125L15.625 8.75',
+      'M15.625 4.375L4.375 15.625M15.625 15.625L4.375 4.375',
     );
-    expect(collectTransforms(screen.toJSON())).toContain('-90deg');
   });
 });

package/src/components/Poll/components/index.ts

@@ -6,4 +6,5 @@ export * from './PollInputDialog';
 export * from './MultipleVotesSettings';
 export * from './PollOption';
 export * from './PollResults';
+export * from './PollModal';
 export * from './PollModalHeader';

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

@@ -337,6 +337,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     ],
                     {
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -370,7 +371,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }
@@ -671,6 +671,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     ],
                     {
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -704,7 +705,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }
@@ -1039,6 +1039,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     ],
                     {
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -1072,7 +1073,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }
@@ -1365,7 +1365,9 @@ exports[`Thread should match thread snapshot 1`] = `
                   [
                     undefined,
                     {
+                      "marginBottom": 12,
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -1399,8 +1401,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "marginBottom": 12,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }
@@ -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/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/index.ts

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

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';
@@ -56,6 +57,7 @@ export * from './ChannelPreview/ChannelPreview';
 export * from './ChannelPreview/ChannelPreviewMessage';
 export * from './ChannelPreview/ChannelPreviewView';
 export * from './ChannelPreview/ChannelPreviewMutedStatus';
+export * from './ChannelPreview/ChannelPreviewPinnedStatus';
 export * from './ChannelPreview/ChannelLastMessagePreview';
 export * from './ChannelPreview/ChannelPreviewStatus';
 export * from './ChannelPreview/ChannelPreviewTitle';

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -118,6 +118,7 @@ export type ChannelsContextValue = {
   swipeActionsEnabled?: boolean;
 
   mutedStatusPosition?: 'trailingBottom' | 'inlineTitle';
+  pinnedStatusPosition?: 'trailingBottom' | 'inlineTitle';
 };
 
 export const ChannelsContext = React.createContext(

package/src/contexts/componentsContext/defaultComponents.ts

@@ -24,7 +24,10 @@ import { AttachmentPickerContent } from '../../components/AttachmentPicker/compo
 import { AttachmentPickerSelectionBar } from '../../components/AttachmentPicker/components/AttachmentPickerSelectionBar';
 import { ImageOverlaySelectedComponent } from '../../components/AttachmentPicker/components/ImageOverlaySelectedComponent';
 import { AutoCompleteSuggestionHeader } from '../../components/AutoCompleteInput/AutoCompleteSuggestionHeader';
-import { AutoCompleteSuggestionItem } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
+import {
+  AutoCompleteSuggestionItem,
+  MentionSuggestionItem,
+} from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
 import { AutoCompleteSuggestionList } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import { InputView } from '../../components/AutoCompleteInput/InputView';
 import { ChannelDetailsContent } from '../../components/ChannelDetails/ChannelDetails';
@@ -53,6 +56,7 @@ import { ChannelLastMessagePreview } from '../../components/ChannelPreview/Chann
 import { ChannelMessagePreviewDeliveryStatus } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewMessage } from '../../components/ChannelPreview/ChannelPreviewMessage';
 import { ChannelPreviewMutedStatus } from '../../components/ChannelPreview/ChannelPreviewMutedStatus';
+import { ChannelPreviewPinnedStatus } from '../../components/ChannelPreview/ChannelPreviewPinnedStatus';
 import { ChannelPreviewStatus } from '../../components/ChannelPreview/ChannelPreviewStatus';
 import { ChannelPreviewTitle } from '../../components/ChannelPreview/ChannelPreviewTitle';
 import { ChannelPreviewTypingIndicator } from '../../components/ChannelPreview/ChannelPreviewTypingIndicator';
@@ -195,6 +199,7 @@ const components = {
   AutoCompleteSuggestionHeader,
   AutoCompleteSuggestionItem,
   AutoCompleteSuggestionList,
+  MentionSuggestionItem,
   ChannelDetailsBottomSheet,
   CooldownTimer,
   CircularProgressIndicator,
@@ -271,6 +276,7 @@ const components = {
   ChannelPreviewMessage,
   ChannelPreviewMessageDeliveryStatus: ChannelMessagePreviewDeliveryStatus,
   ChannelPreviewMutedStatus,
+  ChannelPreviewPinnedStatus,
   ChannelPreviewStatus,
   ChannelPreviewTitle,
   ChannelPreviewTypingIndicator,