stream-chat-react-native-core 9.2.0-beta.1 → 9.2.0-beta.3

package/src/components/MessageMenu/__tests__/MessageUserReactions.test.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import { Text } from 'react-native';
 
+import type { ReactTestInstance } from 'react-test-renderer';
+
 import { fireEvent, render } from '@testing-library/react-native';
 
 import { ReactionResponse } from 'stream-chat';
@@ -39,6 +41,9 @@ const defaultProps = {
   supportedReactions: mockSupportedReactions,
 };
 
+const filterReactionButtons = (buttons: ReactTestInstance[]) =>
+  buttons.filter((button) => button.props.accessibilityLabel !== 'more-reactions-button');
+
 const renderComponent = (props = {}) =>
   render(
     <ThemeProvider theme={defaultTheme}>
@@ -87,35 +92,32 @@ describe('MessageUserReactions when the supportedReactions are defined', () => {
   });
 
   it('renders reaction buttons', () => {
-    const { getByLabelText } = renderComponent();
-    const likeReactionButton = getByLabelText('reaction-button-like-unselected');
-    expect(likeReactionButton).toBeDefined();
-    const loveReactionButton = getByLabelText('reaction-button-love-unselected');
-    expect(loveReactionButton).toBeDefined();
+    const { getAllByRole } = renderComponent();
+    expect(filterReactionButtons(getAllByRole('button'))).toHaveLength(2);
   });
 
   it('starts with no reaction filter selected by default', () => {
-    const { getAllByLabelText } = renderComponent();
-    const reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
-    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
-    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
+    const { getAllByRole } = renderComponent();
+    const reactionButtons = filterReactionButtons(getAllByRole('button'));
+    expect(reactionButtons[0].props.accessibilityState.selected).toBe(false);
+    expect(reactionButtons[1].props.accessibilityState.selected).toBe(false);
   });
 
   it('toggles the selected reaction when a reaction button is pressed twice', () => {
-    const { getAllByLabelText } = renderComponent();
-    let reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+    const { getAllByRole } = renderComponent();
+    let reactionButtons = filterReactionButtons(getAllByRole('button'));
 
     fireEvent.press(reactionButtons[1]);
 
-    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
-    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-selected');
+    expect(reactionButtons[0].props.accessibilityState.selected).toBe(false);
+    expect(reactionButtons[1].props.accessibilityState.selected).toBe(true);
 
     fireEvent.press(reactionButtons[1]);
 
-    reactionButtons = getAllByLabelText(/\breaction-button[^\s]+/);
+    reactionButtons = filterReactionButtons(getAllByRole('button'));
 
-    expect(reactionButtons[0].props.accessibilityLabel).toBe('reaction-button-like-unselected');
-    expect(reactionButtons[1].props.accessibilityLabel).toBe('reaction-button-love-unselected');
+    expect(reactionButtons[0].props.accessibilityState.selected).toBe(false);
+    expect(reactionButtons[1].props.accessibilityState.selected).toBe(false);
   });
 
   it('renders reactions list', () => {
@@ -133,10 +135,10 @@ describe('MessageUserReactions when the supportedReactions are defined', () => {
   });
 
   it("don't render reaction buttons that is of unsupported type", () => {
-    const { queryAllByLabelText } = renderComponent({
+    const { queryAllByRole } = renderComponent({
       message: { ...generateMessage(), reaction_groups: { money: 1 } },
     });
-    const reactionButtons = queryAllByLabelText(/\breaction-button[^\s]+/);
+    const reactionButtons = filterReactionButtons(queryAllByRole('button'));
 
     expect(reactionButtons.length).toBe(0);
   });

package/src/components/MessageMenu/__tests__/ReactionButton.test.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 
 import { Text } from 'react-native';
 
-import { cleanup, fireEvent, render } from '@testing-library/react-native';
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react-native';
 
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { IconProps } from '../../../icons';
@@ -37,28 +38,40 @@ describe('ReactionButton', () => {
     expect(getByText('24')).toBeTruthy();
   });
 
+  it('uses the released reaction button label when accessibility labels are translated', async () => {
+    render(
+      <OverlayProvider accessibility={{ enabled: true }}>
+        <ReactionButton {...defaultProps} />
+      </OverlayProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('reaction-button-like-unselected')).toBeTruthy();
+    });
+  });
+
   it('should call onPress function with the correct reaction type when pressed', () => {
-    const { getByLabelText } = render(
+    const { getByRole } = render(
       <ThemeProvider theme={defaultTheme}>
         <ReactionButton {...defaultProps} />
       </ThemeProvider>,
     );
 
     // Simulate a press event
-    fireEvent.press(getByLabelText('reaction-button-like-unselected'));
+    fireEvent.press(getByRole('button'));
 
     // Verify if the mock function has been called with the correct reaction type
     expect(mockOnPress).toHaveBeenCalledWith('like');
   });
 
   it('should not call onPress when the onPress prop is not provided', () => {
-    const { getByLabelText } = render(
+    const { getByRole } = render(
       <ThemeProvider theme={defaultTheme}>
         <ReactionButton {...defaultProps} onPress={undefined} />
       </ThemeProvider>,
     );
 
-    fireEvent.press(getByLabelText('reaction-button-like-unselected'));
+    fireEvent.press(getByRole('button'));
 
     expect(mockOnPress).not.toHaveBeenCalled();
   });

package/src/components/MessageMenu/hooks/useFetchReactions.ts

@@ -3,6 +3,8 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { LocalMessage, ReactionResponse, ReactionSort } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useNotificationApi } from '../../Notifications';
 
 export type UseFetchReactionParams = {
   limit?: number;
@@ -98,6 +100,8 @@ export const useFetchReactions = ({
   const messageId = message?.id;
 
   const { client } = useChatContext();
+  const { t } = useTranslationContext();
+  const { addNotification } = useNotificationApi();
 
   const sortString = useMemo(() => JSON.stringify(sort), [sort]);
 
@@ -122,10 +126,21 @@ export const useFetchReactions = ({
           setLoading(false);
         }
       } catch (error) {
-        console.log('Error fetching reactions: ', error);
+        addNotification({
+          message: t('Error fetching reactions'),
+          options: {
+            ...(error instanceof Error ? { originalError: error } : {}),
+            severity: 'error',
+            type: 'api:message:reactions:fetch:failed',
+          },
+          origin: {
+            ...(message ? { context: { message } } : {}),
+            emitter: 'Reactions',
+          },
+        });
       }
     },
-    [messageId, client, reactionType, sort, limit],
+    [addNotification, client, limit, message, messageId, reactionType, sort, t],
   );
 
   const loadNextPage = useCallback(async () => {

package/src/components/Notifications/Notification.tsx

@@ -0,0 +1,254 @@
+import React, { type ComponentType, useMemo } from 'react';
+import { StyleSheet, Text, useColorScheme, View } from 'react-native';
+
+import { Pressable } from 'react-native-gesture-handler';
+
+import type { Notification as NotificationType, NotificationSeverity } from 'stream-chat';
+
+import { useNotificationApi } from './hooks/useNotificationApi';
+import { getNotificationDisplayMessage } from './notificationTranslations';
+
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { Check } from '../../icons/checkmark';
+import { Warning } from '../../icons/exclamation-triangle-fill';
+import { Reload } from '../../icons/refresh';
+import { IconProps } from '../../icons/utils/base';
+import { NewClose } from '../../icons/xmark';
+import { primitives } from '../../theme';
+import { Button } from '../ui/Button';
+
+/** Direction from which a snackbar enters and exits the screen. */
+export type NotificationEntryDirection = 'bottom' | 'left' | 'right' | 'top';
+export type NotificationTransitionState = 'enter' | 'exit';
+
+export type NotificationIconProps = {
+  /** Notification rendered by the icon slot. */
+  notification: NotificationType;
+};
+
+/** Visual variant resolved from notification severity. Notifications without severity use `default`. */
+export type NotificationVariant = 'default' | NotificationSeverity;
+
+/** Resolves the visual variant used by the default notification renderer. */
+export const getNotificationVariant = (notification: NotificationType): NotificationVariant =>
+  notification.severity ?? 'default';
+
+const IconsByVariant: Partial<Record<NotificationVariant, ComponentType<IconProps> | null>> = {
+  error: Warning,
+  info: null,
+  loading: Reload,
+  success: Check,
+  warning: Warning,
+};
+
+const getNotificationIconComponent = (notification: NotificationType) => {
+  const variant = getNotificationVariant(notification);
+  if (variant === 'default') return undefined;
+
+  return IconsByVariant[variant] ?? undefined;
+};
+
+export const NotificationIcon = ({ notification }: NotificationIconProps) => {
+  const Icon = getNotificationIconComponent(notification);
+  const { iconColor, styles } = useNotificationIconStyles();
+  if (!Icon) return null;
+
+  return (
+    <View style={styles.iconContainer} testID='notification-icon'>
+      <Icon height={20} pathFill={iconColor} stroke={iconColor} width={20} />
+    </View>
+  );
+};
+
+export type NotificationProps = {
+  /** Notification object produced by the Stream Chat notification manager. */
+  notification: NotificationType;
+  /** Direction used by the surrounding list animation. */
+  entryDirection?: NotificationEntryDirection;
+  /** Optional icon override for this notification instance. */
+  Icon?: React.ComponentType<NotificationIconProps>;
+  /** Called instead of the default notification removal behavior. */
+  onDismiss?: () => void;
+  /** Forces a dismiss button for transient notifications. Persistent notifications always show one. */
+  showClose?: boolean;
+  /** Reserved for custom animated notification implementations. */
+  transitionState?: NotificationTransitionState;
+};
+
+/** Default snackbar notification renderer used by `NotificationList`. */
+export const Notification = ({
+  Icon,
+  notification,
+  onDismiss,
+  showClose = false,
+}: NotificationProps) => {
+  const { NotificationIcon: NotificationIconComponent = NotificationIcon } = useComponentsContext();
+  const { removeNotification } = useNotificationApi();
+  const { t } = useTranslationContext();
+  const displayMessage = getNotificationDisplayMessage({ notification, t });
+  const ResolvedIcon = Icon ?? NotificationIconComponent;
+  const hasResolvedIcon =
+    ResolvedIcon === NotificationIcon
+      ? !!getNotificationIconComponent(notification)
+      : !!ResolvedIcon;
+  const { closeIconColor, styles } = useNotificationStyles({ hasResolvedIcon });
+  const isPersistent = !notification.duration;
+  const closeVisible = showClose || isPersistent;
+
+  const handleDismiss = () => {
+    if (onDismiss) {
+      onDismiss();
+      return;
+    }
+
+    removeNotification(notification.id);
+  };
+
+  return (
+    <View
+      accessibilityLiveRegion={notification.severity === 'error' ? 'assertive' : 'polite'}
+      accessibilityRole={notification.severity === 'error' ? 'alert' : 'summary'}
+      style={styles.container}
+      testID='notification'
+    >
+      <View style={styles.contentContainer}>
+        {hasResolvedIcon ? <ResolvedIcon notification={notification} /> : null}
+        <Text style={styles.message}>{displayMessage}</Text>
+      </View>
+      {notification.actions && notification.actions.length > 0 ? (
+        <View style={styles.actionsContainer}>
+          {notification.actions.map((action, index) => (
+            <Button
+              accessibilityLabel={action.label}
+              key={`${action.label}-${index}`}
+              label={action.label}
+              onPress={action.handler}
+              size='sm'
+              style={styles.actionButton}
+              type='outline'
+              variant='primary'
+            />
+          ))}
+        </View>
+      ) : null}
+      {closeVisible ? (
+        <Pressable
+          accessibilityLabel={t('a11y/Dismiss notification')}
+          accessibilityRole='button'
+          hitSlop={8}
+          onPress={handleDismiss}
+          style={({ pressed }) => (pressed ? styles.closeButtonPressed : styles.closeButton)}
+          testID='notification-close-button'
+        >
+          <NewClose height={20} stroke={closeIconColor} width={20} />
+        </Pressable>
+      ) : null}
+    </View>
+  );
+};
+
+const useNotificationIconStyles = () => {
+  const {
+    theme: { notification: notificationTheme, semantics },
+  } = useTheme();
+
+  return useMemo(() => {
+    const baseStyles = StyleSheet.create({
+      iconContainer: {
+        alignItems: 'center',
+        height: 20,
+        justifyContent: 'center',
+        width: 20,
+      },
+    });
+
+    return {
+      iconColor: semantics.textOnInverse,
+      styles: {
+        iconContainer: [baseStyles.iconContainer, notificationTheme.iconContainer],
+      },
+    };
+  }, [notificationTheme.iconContainer, semantics]);
+};
+
+const useNotificationStyles = ({ hasResolvedIcon }: { hasResolvedIcon: boolean }) => {
+  const {
+    theme: { notification: notificationTheme, semantics },
+  } = useTheme();
+  const scheme = useColorScheme();
+  const notificationShadow =
+    scheme === 'dark' ? primitives.darkElevation3 : primitives.lightElevation3;
+
+  return useMemo(() => {
+    const baseStyles = StyleSheet.create({
+      actionButton: {
+        width: 'auto',
+      },
+      actionsContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: primitives.spacingXs,
+        marginTop: primitives.spacingXs,
+      },
+      closeButton: {
+        alignItems: 'center',
+        borderRadius: primitives.radiusMax,
+        height: 24,
+        justifyContent: 'center',
+        marginLeft: primitives.spacingXs,
+        width: 24,
+      },
+      closeButtonPressed: {
+        backgroundColor: semantics.backgroundUtilityPressed,
+      },
+      container: {
+        alignItems: 'flex-start',
+        alignSelf: 'center',
+        backgroundColor: semantics.backgroundCoreInverse,
+        borderRadius: primitives.radius3xl,
+        flexDirection: 'row',
+        maxWidth: '100%',
+        paddingHorizontal: primitives.spacingSm,
+        ...notificationShadow,
+        shadowOpacity: 0,
+      },
+      contentContainer: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        flexShrink: 1,
+        gap: primitives.spacingXs,
+        minHeight: 48,
+        paddingLeft: hasResolvedIcon ? primitives.spacingXxs : primitives.spacingXs,
+        paddingRight: primitives.spacingXs,
+        paddingVertical: primitives.spacingXxxs,
+      },
+      message: {
+        color: semantics.textOnInverse,
+        flexShrink: 1,
+        fontSize: primitives.typographyFontSizeSm,
+        fontWeight: primitives.typographyFontWeightRegular,
+        lineHeight: primitives.typographyLineHeightNormal,
+        paddingVertical: primitives.spacingSm,
+      },
+    });
+
+    return {
+      closeIconColor: semantics.textOnInverse,
+      styles: {
+        actionButton: [baseStyles.actionButton, notificationTheme.actionButton],
+        actionsContainer: [baseStyles.actionsContainer, notificationTheme.actionsContainer],
+        closeButton: [baseStyles.closeButton, notificationTheme.closeButton],
+        closeButtonPressed: [
+          baseStyles.closeButton,
+          baseStyles.closeButtonPressed,
+          notificationTheme.closeButton,
+        ],
+        container: [baseStyles.container, notificationTheme.container],
+        contentContainer: [baseStyles.contentContainer, notificationTheme.contentContainer],
+        message: [baseStyles.message, notificationTheme.message],
+      },
+    };
+  }, [hasResolvedIcon, notificationShadow, notificationTheme, semantics]);
+};

package/src/components/Notifications/NotificationList.tsx

@@ -0,0 +1,160 @@
+import React, { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+
+import Animated from 'react-native-reanimated';
+
+import type { Notification as NotificationType } from 'stream-chat';
+
+import { useNotificationListController } from './hooks/useNotificationListController';
+import type { NotificationTargetPanel } from './notificationTarget';
+
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { primitives } from '../../theme';
+import { transitions } from '../../utils/animations/transitions';
+
+/** Predicate used to hide notifications from a specific rendered notification list. */
+export type NotificationListFilter = (notification: NotificationType) => boolean;
+/** Direction from which new snackbars animate into the list. */
+export type NotificationListEnterFrom = 'bottom' | 'left' | 'right' | 'top';
+/** Vertical edge used by the absolutely positioned notification host. */
+export type NotificationListVerticalAlignment = 'bottom' | 'top';
+
+export type NotificationListProps = {
+  /** Extra distance from the bottom edge, useful when floating composers cover the default host. */
+  bottomOffset?: number;
+  /** Default enter/exit animation direction when notification metadata does not define one. */
+  enterFrom?: NotificationListEnterFrom;
+  /** Additional per-list filter applied after target filtering. */
+  filter?: NotificationListFilter;
+  /** Exact notification host id. Use together with `panel` when rendering outside a target provider. */
+  hostId?: string;
+  /** Target panel consumed by this list. Defaults to the nearest `NotificationTargetProvider`. */
+  panel?: NotificationTargetPanel;
+  /** Extra distance from the top edge when `verticalAlignment` is `top`. */
+  topOffset?: number;
+  /** Whether the host is anchored to the top or bottom of its parent. */
+  verticalAlignment?: NotificationListVerticalAlignment;
+};
+
+const isEnterFrom = (value: unknown): value is NotificationListEnterFrom =>
+  value === 'bottom' || value === 'left' || value === 'right' || value === 'top';
+
+const getNotificationEnterFrom = (
+  notification: NotificationType,
+  fallbackEnterFrom: NotificationListEnterFrom,
+) => {
+  const metadataEnterFrom = notification.metadata?.entryDirection;
+  if (isEnterFrom(metadataEnterFrom)) return metadataEnterFrom;
+
+  const originEnterFrom = notification.origin.context?.entryDirection;
+  if (isEnterFrom(originEnterFrom)) return originEnterFrom;
+
+  return fallbackEnterFrom;
+};
+
+const getStringValue = (value: unknown) => (typeof value === 'string' ? value : undefined);
+
+const getNotificationPresentationKey = (notification: NotificationType) =>
+  notification.type ??
+  getStringValue(notification.metadata?.dedupeKey) ??
+  getStringValue(notification.origin.context?.dedupeKey) ??
+  [notification.origin.emitter, notification.severity, notification.message]
+    .filter(Boolean)
+    .join(':');
+
+/** Renders the newest matching client notification as an animated snackbar. */
+export const NotificationList = ({
+  bottomOffset,
+  enterFrom = 'bottom',
+  filter,
+  hostId,
+  panel,
+  topOffset,
+  verticalAlignment = 'bottom',
+}: NotificationListProps) => {
+  const { Notification: NotificationComponent } = useComponentsContext();
+  const styles = useStyles({ bottomOffset, topOffset, verticalAlignment });
+  const { t } = useTranslationContext();
+  const { dismissNotification, notification } = useNotificationListController({
+    filter,
+    hostId,
+    panel,
+  });
+
+  if (!notification) return null;
+
+  const notificationEnterFrom = getNotificationEnterFrom(notification, enterFrom);
+  const notificationPresentationKey = getNotificationPresentationKey(notification);
+
+  return (
+    <Animated.View
+      accessibilityLabel={t('a11y/Notifications')}
+      pointerEvents='box-none'
+      layout={transitions.layout200}
+      style={styles.container}
+      testID='notification-list'
+    >
+      <Animated.View
+        entering={transitions.boundedZoomIn200[notificationEnterFrom]}
+        exiting={transitions.boundedZoomOut200[notificationEnterFrom]}
+        key={notificationPresentationKey}
+        style={styles.notificationWrapper}
+        testID='notification-list-item'
+      >
+        <NotificationComponent
+          entryDirection={notificationEnterFrom}
+          notification={notification}
+          onDismiss={dismissNotification}
+          showClose={!notification.duration}
+        />
+      </Animated.View>
+    </Animated.View>
+  );
+};
+
+const useStyles = ({
+  bottomOffset,
+  topOffset,
+  verticalAlignment,
+}: Pick<NotificationListProps, 'bottomOffset' | 'topOffset'> & {
+  verticalAlignment: NotificationListVerticalAlignment;
+}) => {
+  const {
+    theme: {
+      notificationList: { container: notificationListContainer },
+    },
+  } = useTheme();
+
+  return useMemo(() => {
+    const containerAlignmentStyle =
+      verticalAlignment === 'bottom'
+        ? { bottom: primitives.spacingMd }
+        : { top: primitives.spacingMd };
+    const containerOffsetStyle =
+      verticalAlignment === 'bottom' && typeof bottomOffset === 'number'
+        ? { bottom: primitives.spacingMd + bottomOffset }
+        : verticalAlignment === 'top' && typeof topOffset === 'number'
+          ? { top: primitives.spacingMd + topOffset }
+          : undefined;
+
+    return StyleSheet.create({
+      container: {
+        alignItems: 'center',
+        left: primitives.spacingMd,
+        maxHeight: '100%',
+        position: 'absolute',
+        right: primitives.spacingMd,
+        zIndex: 20,
+        ...containerAlignmentStyle,
+        ...notificationListContainer,
+        ...containerOffsetStyle,
+      },
+      notificationWrapper: {
+        alignSelf: 'center',
+        maxWidth: '100%',
+      },
+    });
+  }, [bottomOffset, notificationListContainer, topOffset, verticalAlignment]);
+};

package/src/components/Notifications/NotificationTargetContext.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react';
+
+import type { NotificationTarget, NotificationTargetPanel } from './notificationTarget';
+
+/** Provides the default notification target for SDK actions rendered inside this subtree. */
+export type NotificationTargetProviderProps = PropsWithChildren<NotificationTarget>;
+
+const NotificationTargetContext = createContext<NotificationTarget | undefined>(undefined);
+
+/** Makes notifications emitted by descendants resolve to a specific panel and host id. */
+export const NotificationTargetProvider = ({
+  children,
+  hostId,
+  panel,
+}: NotificationTargetProviderProps) => {
+  const value = useMemo(() => ({ hostId, panel }), [hostId, panel]);
+
+  return (
+    <NotificationTargetContext.Provider value={value}>
+      {children}
+    </NotificationTargetContext.Provider>
+  );
+};
+
+/** Returns the nearest notification target, if the caller is rendered inside a target provider. */
+export const useNotificationTargetContext = () => useContext(NotificationTargetContext);
+
+/** Resolves an explicit target or falls back to the nearest compatible target provider. */
+export const useResolvedNotificationTarget = ({
+  hostId,
+  panel,
+}: {
+  hostId?: string;
+  panel?: NotificationTargetPanel;
+} = {}) => {
+  const contextTarget = useNotificationTargetContext();
+
+  return useMemo(() => {
+    if (hostId && panel) return { hostId, panel };
+    if (!hostId && !panel) return contextTarget;
+    if (panel && contextTarget?.panel === panel) return contextTarget;
+
+    return undefined;
+  }, [contextTarget, hostId, panel]);
+};