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

package/src/components/Poll/hooks/usePollState.ts

@@ -14,7 +14,8 @@ import {
 
 import { usePollStateStore } from './usePollStateStore';
 
-import { usePollContext } from '../../../contexts';
+import { usePollContext, useTranslationContext } from '../../../contexts';
+import { useNotificationApi } from '../../Notifications';
 
 export type UsePollStateSelectorReturnType = {
   allowAnswers: boolean | undefined;
@@ -62,6 +63,8 @@ const selector = (nextValue: PollState): UsePollStateSelectorReturnType => ({
 
 export const usePollState = (): UsePollStateReturnType => {
   const { message, poll } = usePollContext();
+  const { addNotification } = useNotificationApi();
+  const { t } = useTranslationContext();
   const {
     allowAnswers,
     allowUserSuggestedOptions,
@@ -91,7 +94,28 @@ export const usePollState = (): UsePollStateReturnType => {
     (answerText: string) => poll.addAnswer(answerText, message.id),
     [message.id, poll],
   );
-  const endVote = useCallback(() => poll.close(), [poll]);
+  const endVote = useCallback(async () => {
+    try {
+      const response = await poll.close();
+      addNotification({
+        message: t('Poll ended'),
+        options: { severity: 'success', type: 'api:poll:end:success' },
+        origin: { emitter: 'PollActions' },
+      });
+      return response;
+    } catch (error) {
+      addNotification({
+        message: t('Failed to end the poll'),
+        options: {
+          ...(error instanceof Error ? { originalError: error } : {}),
+          severity: 'error',
+          type: 'api:poll:end:failed',
+        },
+        origin: { emitter: 'PollActions' },
+      });
+      throw error;
+    }
+  }, [addNotification, poll, t]);
 
   return {
     addComment,

package/src/components/Reply/Reply.tsx

@@ -170,7 +170,10 @@ export const ReplyWithContext = (props: ReplyPropsWithContext) => {
       </View>
       {onDismiss ? (
         <View style={[styles.dismissWrapper, dismissWrapper, stylesProp?.dismissWrapper]}>
-          <AttachmentRemoveControl onPress={onDismiss} />
+          <AttachmentRemoveControl
+            accessibilityLabelKey={mode === 'edit' ? 'a11y/Remove edit' : 'a11y/Remove reply'}
+            onPress={onDismiss}
+          />
         </View>
       ) : null}
     </View>

package/src/components/Thread/Thread.tsx

@@ -10,6 +10,8 @@ import { ThreadContextValue, useThreadContext } from '../../contexts/threadConte
 import type { MessageComposerProps } from '../MessageInput/MessageComposer';
 import { MessageFlashList, MessageFlashListProps } from '../MessageList/MessageFlashList';
 import { MessageListProps } from '../MessageList/MessageList';
+import { getThreadNotificationHostId } from '../Notifications/notificationTarget';
+import { NotificationTargetProvider } from '../Notifications/NotificationTargetContext';
 
 let FlashList;
 
@@ -56,6 +58,7 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
      * Call custom function on closing thread if handling thread state elsewhere
      */
     onThreadDismount?: () => void;
+    notificationHostId?: string;
     shouldUseFlashList?: boolean;
   };
 
@@ -70,6 +73,7 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
     disabled,
     loadMoreThread,
     onThreadDismount,
+    notificationHostId: notificationHostIdProp,
     parentMessagePreventPress = true,
     thread,
     threadInstance,
@@ -120,26 +124,30 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
     return null;
   }
 
+  const notificationHostId = notificationHostIdProp ?? getThreadNotificationHostId(thread.id);
+
   return (
     <React.Fragment key={`thread-${thread.id}`}>
-      {FlashList && shouldUseFlashList ? (
-        <MessageFlashList
-          HeaderComponent={MemoizedThreadFooterComponent}
-          threadList
-          {...additionalMessageFlashListProps}
-        />
-      ) : (
-        <MessageList
-          FooterComponent={MemoizedThreadFooterComponent}
+      <NotificationTargetProvider hostId={notificationHostId} panel='thread'>
+        {FlashList && shouldUseFlashList ? (
+          <MessageFlashList
+            HeaderComponent={MemoizedThreadFooterComponent}
+            threadList
+            {...additionalMessageFlashListProps}
+          />
+        ) : (
+          <MessageList
+            FooterComponent={MemoizedThreadFooterComponent}
+            threadList
+            {...additionalMessageListProps}
+          />
+        )}
+        <MessageComposer
+          additionalTextInputProps={additionalTextInputProps}
           threadList
-          {...additionalMessageListProps}
+          {...additionalMessageComposerProps}
         />
-      )}
-      <MessageComposer
-        additionalTextInputProps={additionalTextInputProps}
-        threadList
-        {...additionalMessageComposerProps}
-      />
+      </NotificationTargetProvider>
     </React.Fragment>
   );
 };

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

@@ -1734,6 +1734,9 @@ exports[`Thread should match thread snapshot 1`] = `
         </View>
       </RCTScrollView>
       <View
+        accessibilityElementsHidden={true}
+        accessible={false}
+        importantForAccessibility="no-hide-descendants"
         style={
           {
             "left": 0,

package/src/components/ThreadList/ThreadList.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { FlatList, View } from 'react-native';
+import { FlatList, StyleSheet, View } from 'react-native';
 
 import { Thread, ThreadManagerState } from 'stream-chat';
 
@@ -14,9 +14,12 @@ import {
   useThreadsContext,
 } from '../../contexts/threadsContext/ThreadsContext';
 import { useStateStore } from '../../hooks';
+import { useLazyRef } from '../../hooks/useLazyRef';
+import { generateRandomId } from '../../utils/utils';
 
 import { EmptyStateIndicator } from '../Indicators/EmptyStateIndicator';
 import { LoadingIndicator } from '../Indicators/LoadingIndicator';
+import { NotificationTargetProvider } from '../Notifications/NotificationTargetContext';
 
 const selector = (nextValue: ThreadManagerState) =>
   ({
@@ -28,7 +31,9 @@ const selector = (nextValue: ThreadManagerState) =>
 export type ThreadListProps = Pick<
   ThreadsContextValue,
   'additionalFlatListProps' | 'isFocused' | 'onThreadSelect'
->;
+> & {
+  notificationHostId?: string;
+};
 
 export const DefaultThreadListEmptyPlaceholder = () => <EmptyStateIndicator listType='threads' />;
 
@@ -76,9 +81,11 @@ export const DefaultThreadListComponent = () => {
 };
 
 export const ThreadList = (props: ThreadListProps) => {
-  const { isFocused = true } = props;
-  const { ThreadListComponent: ThreadListContent } = useComponentsContext();
+  const { isFocused = true, notificationHostId: notificationHostIdProp } = props;
+  const { NotificationList, ThreadListComponent: ThreadListContent } = useComponentsContext();
   const { client } = useChatContext();
+  const fallbackNotificationHostIdRef = useLazyRef(() => `thread-list:${generateRandomId()}`);
+  const notificationHostId = notificationHostIdProp ?? fallbackNotificationHostIdRef.current;
 
   useEffect(() => {
     if (!client) {
@@ -109,10 +116,27 @@ export const ThreadList = (props: ThreadListProps) => {
   const { isLoading, isLoadingNext, threads } = useStateStore(client.threads.state, selector);
 
   return (
-    <ThreadsProvider
-      value={{ isLoading, isLoadingNext, loadMore: client.threads.loadNextPage, threads, ...props }}
-    >
-      <ThreadListContent />
-    </ThreadsProvider>
+    <NotificationTargetProvider hostId={notificationHostId} panel='thread-list'>
+      <ThreadsProvider
+        value={{
+          isLoading,
+          isLoadingNext,
+          loadMore: client.threads.loadNextPage,
+          threads,
+          ...props,
+        }}
+      >
+        <View style={styles.container}>
+          <ThreadListContent />
+          <NotificationList />
+        </View>
+      </ThreadsProvider>
+    </NotificationTargetProvider>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/components/index.ts

@@ -175,6 +175,8 @@ export * from './MessageMenu/MessageReactionPicker';
 export * from './MessageMenu/utils/toUnicodeScalarString';
 export * from './MessageMenu/hooks/useFetchReactions';
 
+export * from './Notifications';
+
 export * from './ProgressControl/ProgressControl';
 export * from './ProgressControl/WaveProgressBar';
 export * from './Poll';

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

@@ -46,7 +46,8 @@ export const Avatar = (props: AvatarProps) => {
     style,
   } = props;
   const styles = useStyles();
-  const composedLabel = useA11yLabel('a11y/Avatar of {{name}}', { name: name ?? '' });
+  const accessibilityLabelParams = useMemo(() => ({ name: name ?? '' }), [name]);
+  const composedLabel = useA11yLabel('a11y/Avatar of {{name}}', accessibilityLabelParams);
   const accessibilityLabel = accessibilityLabelOverride ?? (name ? composedLabel : undefined);
 
   const onHandleError = useCallback(() => {

package/src/components/ui/Button/Button.tsx

@@ -6,6 +6,8 @@ import { Pressable, PressableProps } from 'react-native-gesture-handler';
 import { buttonPadding, buttonSizes } from './constants';
 import { useButtonStyles } from './hooks/useButtonStyles';
 
+import { useA11yLabel } from '../../../a11y/hooks/useA11yLabel';
+import { useAccessibilityActivateAction } from '../../../a11y/hooks/useAccessibilityActivateAction';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { IconProps } from '../../../icons/utils/base';
 import { primitives } from '../../../theme';
@@ -34,6 +36,15 @@ const getButtonAccessibilityState = ({
 };
 
 export type ButtonProps = PressableProps & {
+  /**
+   * Translation key used for the button's accessibility label when SDK
+   * accessibility is enabled. Prefer this for SDK-owned icon-only buttons.
+   */
+  accessibilityLabelKey?: string;
+  /**
+   * Optional interpolation params for `accessibilityLabelKey`.
+   */
+  accessibilityLabelParams?: Record<string, unknown>;
   /**
    * The style of the button.
    */
@@ -74,6 +85,9 @@ export type ButtonProps = PressableProps & {
 };
 
 export const Button = ({
+  accessibilityLabel,
+  accessibilityLabelKey,
+  accessibilityLabelParams,
   variant,
   type,
   selected = false,
@@ -100,6 +114,15 @@ export const Button = ({
   const IconOnlyIcon = LeadingIcon ?? TrailingIcon;
   const PrimaryIcon = iconOnly ? IconOnlyIcon : LeftIcon;
   const accessibilityState = getButtonAccessibilityState({ disabled: !!disabled, selected });
+  const translatedAccessibilityLabel = useA11yLabel(
+    accessibilityLabelKey ?? '',
+    accessibilityLabelParams,
+  );
+  const resolvedAccessibilityLabel = translatedAccessibilityLabel ?? accessibilityLabel;
+  const accessibilityActivateActionProps = useAccessibilityActivateAction({
+    onPress: rest.onPress,
+    shouldHandleActivate: !!rest.onPress && !disabled && !!resolvedAccessibilityLabel,
+  });
 
   return (
     <View
@@ -119,6 +142,8 @@ export const Button = ({
       onLayout={onLayout}
     >
       <Pressable
+        accessible
+        accessibilityLabel={resolvedAccessibilityLabel}
         accessibilityRole='button'
         accessibilityState={accessibilityState}
         style={({ pressed }) => [
@@ -133,6 +158,7 @@ export const Button = ({
           styles.container,
         ]}
         disabled={disabled}
+        {...accessibilityActivateActionProps}
         {...rest}
       >
         {PrimaryIcon ? (

package/src/components/ui/Button/__tests__/Button.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { render, screen, waitFor } from '@testing-library/react-native';
+
+import { OverlayProvider } from '../../../../contexts';
+import { Button } from '../Button';
+
+describe('Button accessibilityLabelKey', () => {
+  it('uses the translated accessibility label when accessibility is enabled', async () => {
+    render(
+      <OverlayProvider accessibility={{ enabled: true }}>
+        <Button
+          accessibilityLabelKey='a11y/Add attachment'
+          iconOnly
+          onPress={jest.fn()}
+          size='md'
+          type='outline'
+          variant='secondary'
+        />
+      </OverlayProvider>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByLabelText('Add attachment')).toBeTruthy();
+    });
+  });
+
+  it('supports a plain accessibilityLabel without the translation path', () => {
+    render(
+      <OverlayProvider>
+        <Button
+          accessibilityLabel='Legacy label'
+          iconOnly
+          onPress={jest.fn()}
+          size='md'
+          type='outline'
+          variant='secondary'
+        />
+      </OverlayProvider>,
+    );
+
+    expect(screen.getByLabelText('Legacy label')).toBeTruthy();
+  });
+});

package/src/contexts/accessibilityContext/AccessibilityContext.tsx

@@ -162,4 +162,38 @@ export const AccessibilityProvider = ({
   );
 };
 
-export const useAccessibilityContext = () => useContext(AccessibilityContext);
+export const useAccessibilityContext = (): ResolvedAccessibilityConfig => {
+  const {
+    announceConnectionState,
+    announceNewMessages,
+    announceTypingIndicator,
+    audioRecorderTapMode,
+    enabled,
+    forceScreenReaderMode,
+    imageGalleryScreenReaderMode,
+    messageActionsTrigger,
+  } = useContext(AccessibilityContext);
+
+  return useMemo(
+    () => ({
+      announceConnectionState,
+      announceNewMessages,
+      announceTypingIndicator,
+      audioRecorderTapMode,
+      enabled,
+      forceScreenReaderMode,
+      imageGalleryScreenReaderMode,
+      messageActionsTrigger,
+    }),
+    [
+      announceConnectionState,
+      announceNewMessages,
+      announceTypingIndicator,
+      audioRecorderTapMode,
+      enabled,
+      forceScreenReaderMode,
+      imageGalleryScreenReaderMode,
+      messageActionsTrigger,
+    ],
+  );
+};

package/src/contexts/componentsContext/defaultComponents.ts

@@ -130,6 +130,7 @@ import { MessageReactionPicker } from '../../components/MessageMenu/MessageReact
 import { MessageUserReactions } from '../../components/MessageMenu/MessageUserReactions';
 import { MessageUserReactionsAvatar } from '../../components/MessageMenu/MessageUserReactionsAvatar';
 import { MessageUserReactionsItem } from '../../components/MessageMenu/MessageUserReactionsItem';
+import { Notification, NotificationIcon, NotificationList } from '../../components/Notifications';
 import { PollAnswersListContent } from '../../components/Poll/components/PollAnswersList';
 import { PollButtons } from '../../components/Poll/components/PollButtons';
 import { PollAllOptionsContent } from '../../components/Poll/components/PollOption';
@@ -245,6 +246,9 @@ const components = {
   MessageUserReactionsAvatar,
   MessageUserReactionsItem,
   NetworkDownIndicator,
+  Notification,
+  NotificationIcon,
+  NotificationList,
   ChannelPreview: ChannelPreviewView,
   ChannelPreviewAvatar: ChannelAvatar,
   ChannelPreviewLastMessage: ChannelLastMessagePreview,

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -26,6 +26,7 @@ import { useMessageComposer } from './hooks/useMessageComposer';
 import { dismissKeyboard } from '../../components/KeyboardCompatibleView/KeyboardControllerAvoidingView';
 import { parseLinksFromText } from '../../components/Message/MessageItemView/utils/parseLinks';
 import { useAudioRecorder } from '../../components/MessageInput/hooks/useAudioRecorder';
+import { useNotificationApi } from '../../components/Notifications';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import {
   createAttachmentsCompositionMiddleware,
@@ -220,6 +221,7 @@ export const MessageInputProvider = ({
   const { clearEditingState } = useMessageComposerAPIContext();
   const { thread } = useThreadContext();
   const { t } = useTranslationContext();
+  const { addNotification } = useNotificationApi();
   const inputBoxRef = useRef<InputBoxRef | null>(null);
 
   const [showPollCreationDialog, setShowPollCreationDialog] = useState(false);
@@ -407,6 +409,23 @@ export const MessageInputProvider = ({
           clearEditingState();
           await value.editMessage({ localMessage, options: sendOptions });
         } catch (error) {
+          addNotification(
+            {
+              message: t('Edit message request failed'),
+              options: {
+                ...(error instanceof Error ? { originalError: error } : {}),
+                severity: 'error',
+              },
+              origin: { emitter: 'MessageComposer' },
+            },
+            {
+              incident: {
+                domain: 'api',
+                entity: 'message',
+                operation: 'edit',
+              },
+            },
+          );
           throw new Error('Error while editing message');
         }
       } else {
@@ -433,6 +452,23 @@ export const MessageInputProvider = ({
             options: sendOptions,
           });
         } catch (error) {
+          addNotification(
+            {
+              message: t('Send message request failed'),
+              options: {
+                ...(error instanceof Error ? { originalError: error } : {}),
+                severity: 'error',
+              },
+              origin: { emitter: 'MessageComposer' },
+            },
+            {
+              incident: {
+                domain: 'api',
+                entity: 'message',
+                operation: 'send',
+              },
+            },
+          );
           throw new Error('Error while sending message');
         }
       }

package/src/contexts/themeContext/utils/theme.ts

@@ -532,6 +532,19 @@ export type Theme = {
       rightButtonContainer: ViewStyle;
     };
   };
+  notification: {
+    actionButton: ViewStyle;
+    actionButtonText: TextStyle;
+    actionsContainer: ViewStyle;
+    closeButton: ViewStyle;
+    container: ViewStyle;
+    contentContainer: ViewStyle;
+    iconContainer: ViewStyle;
+    message: TextStyle;
+  };
+  notificationList: {
+    container: ViewStyle;
+  };
   messageMenu: {
     actionList: {
       container: ViewStyle;
@@ -1457,6 +1470,19 @@ export const defaultTheme: Theme = {
     },
     unreadMessagesNotificationContainer: {},
   },
+  notification: {
+    actionButton: {},
+    actionButtonText: {},
+    actionsContainer: {},
+    closeButton: {},
+    container: {},
+    contentContainer: {},
+    iconContainer: {},
+    message: {},
+  },
+  notificationList: {
+    container: {},
+  },
   messageMenu: {
     actionList: {
       container: {},

package/src/hooks/index.ts

@@ -12,6 +12,7 @@ export * from './useQueryReminders';
 export * from './useAfterKeyboardOpenCallback';
 export * from './useClientNotifications';
 export * from './useInAppNotificationsState';
+export * from '../components/Notifications/hooks';
 export * from './usePortalSettledCallback';
 export * from './useRAFCoalescedValue';
 export * from './useAudioPlayer';

package/src/hooks/useAudioPlayer.ts

@@ -1,7 +1,10 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
+import { useNotificationApi } from '../components/Notifications';
 import { useAudioPlayerContext } from '../contexts/audioPlayerContext/AudioPlayerContext';
-import { AudioPlayerOptions } from '../state-store/audio-player';
+import { useChatContext } from '../contexts/chatContext/ChatContext';
+import { useTranslationContext } from '../contexts/translationContext/TranslationContext';
+import { AudioPlayerErrorCode, AudioPlayerOptions } from '../state-store/audio-player';
 
 export type UseAudioPlayerProps = {
   /**
@@ -40,19 +43,57 @@ export const useAudioPlayer = ({
   id: fileId,
 }: UseAudioPlayerProps) => {
   const { audioPlayerPool } = useAudioPlayerContext();
+  const { addNotification } = useNotificationApi();
+  const { client } = useChatContext();
+  const { t } = useTranslationContext();
+  const hasNotificationManager = !!client?.notifications;
   const id = makeAudioPlayerId({ id: fileId, requester, src: uri ?? '' });
+  const onError = useCallback(
+    ({ errCode, error }: { errCode: AudioPlayerErrorCode; error?: Error }) => {
+      if (!hasNotificationManager) return;
+
+      const errorMessages: Record<AudioPlayerErrorCode, string> = {
+        'failed-to-start': t('Failed to play the recording'),
+        'not-playable': t('Recording format is not supported and cannot be reproduced'),
+        'seek-not-supported': t('Cannot seek in the recording'),
+      };
+      const message = errorMessages[errCode];
+
+      addNotification({
+        message,
+        options: {
+          originalError: error ?? new Error(message),
+          severity: 'error',
+          type: 'browser:audio:playback:error',
+        },
+        origin: { emitter: 'AudioPlayer' },
+      });
+    },
+    [addNotification, hasNotificationManager, t],
+  );
   const audioPlayer = useMemo(
     () =>
       audioPlayerPool?.getOrAddPlayer({
         duration: duration ?? 0,
         id,
         mimeType: mimeType ?? '',
+        onError,
         playbackRates,
         previewVoiceRecording,
         type: type ?? 'audio',
         uri: uri ?? '',
       }),
-    [audioPlayerPool, duration, id, mimeType, playbackRates, previewVoiceRecording, type, uri],
+    [
+      audioPlayerPool,
+      duration,
+      id,
+      mimeType,
+      onError,
+      playbackRates,
+      previewVoiceRecording,
+      type,
+      uri,
+    ],
   );
 
   return audioPlayer;

package/src/hooks/useInAppNotificationsState.ts

@@ -14,6 +14,12 @@ const selector = ({ notifications }: InAppNotificationsState) => ({
   notifications,
 });
 
+/**
+ * @deprecated Prefer the client-backed notification APIs exported from
+ * `components/Notifications` (`useNotificationApi`, `useNotifications`, and
+ * `NotificationList`). This hook is kept for apps that already render their own
+ * legacy in-app notification store.
+ */
 export const useInAppNotificationsState = () => {
   const { notifications } = useStateStore(inAppNotificationsStore, selector);
 

package/src/hooks/useLazyRef.ts

@@ -0,0 +1,15 @@
+import { type RefObject, useRef } from 'react';
+
+/**
+ * Creates a stable ref whose initial value is computed only once.
+ * Use this when the initial ref value is expensive or allocates an object.
+ */
+export const useLazyRef = <T>(getInitialValue: () => T) => {
+  const ref = useRef<T | null>(null);
+
+  if (ref.current === null) {
+    ref.current = getInitialValue();
+  }
+
+  return ref as RefObject<T>;
+};