stream-chat-react-native-core 9.10.1 → 10.0.0-rc.1

package/src/components/Channel/hooks/useCreateThreadContext.ts

@@ -1,55 +1,15 @@
-import { ThreadState } from 'stream-chat';
+import { useMemo } from 'react';
 
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
-import { useStateStore } from '../../../hooks';
-
-const selector = (nextValue: ThreadState) =>
-  ({
-    isLoadingNext: nextValue.pagination.isLoadingNext,
-    isLoadingPrev: nextValue.pagination.isLoadingPrev,
-    latestReplies: nextValue.replies,
-  }) as const;
 
 export const useCreateThreadContext = ({
   allowThreadMessagesInChannel,
-  onAlsoSentToChannelHeaderPress,
-  closeThread,
-  loadMoreThread,
-  openThread,
-  reloadThread,
-  setThreadLoadingMore,
   thread,
-  threadHasMore,
-  threadInstance,
-  threadLoadingMore,
-  threadMessages,
-}: ThreadContextValue) => {
-  const { isLoadingNext, isLoadingPrev, latestReplies } =
-    useStateStore(threadInstance?.state, selector) ?? {};
-
-  const contextAdapter = threadInstance
-    ? {
-        loadMoreRecentThread: threadInstance.loadNextPage,
-        loadMoreThread: threadInstance.loadPrevPage,
-        threadInstance,
-        threadLoadingMore: isLoadingPrev,
-        threadLoadingMoreRecent: isLoadingNext,
-        threadMessages: latestReplies ?? [],
-      }
-    : {};
-
-  return {
-    allowThreadMessagesInChannel,
-    onAlsoSentToChannelHeaderPress,
-    closeThread,
-    loadMoreThread,
-    openThread,
-    reloadThread,
-    setThreadLoadingMore,
-    thread,
-    threadHasMore,
-    threadLoadingMore,
-    threadMessages,
-    ...contextAdapter,
-  };
-};
+}: Pick<ThreadContextValue, 'allowThreadMessagesInChannel' | 'thread'>): ThreadContextValue =>
+  useMemo(
+    () => ({
+      allowThreadMessagesInChannel,
+      thread,
+    }),
+    [allowThreadMessagesInChannel, thread],
+  );

package/src/components/Channel/hooks/useSupersededChannelSwap.ts

@@ -0,0 +1,25 @@
+import type { Channel, ChannelStateData, EditingAuditState } from 'stream-chat';
+
+import { useStateStore } from '../../../hooks/useStateStore';
+
+const supersededBySelector = ({ supersededBy }: ChannelStateData) => ({ supersededBy });
+const activeSelector = ({ active }: ChannelStateData) => ({ active });
+const editingAuditStateSelector = (state: EditingAuditState) => state;
+
+/**
+ * The instance `<Channel>` renders: the one that superseded `channel` (it gets the events from then
+ * on), as stream-chat-react's `SupersededChannelSwap` does. It waits while the successor is open
+ * elsewhere and this composer isn't empty, as stream-chat only moves a composer into an unused one.
+ */
+export const useSupersededChannelSwap = <T extends Channel | undefined>(
+  channel: T,
+): T | Channel => {
+  const { supersededBy } = useStateStore(channel?.state, supersededBySelector) ?? {};
+  const successorActive = useStateStore(supersededBy?.state, activeSelector)?.active ?? false;
+  // re-rendered on every composer change, so the emptiness read below stays current
+  useStateStore(channel?.messageComposer.editingAuditState, editingAuditStateSelector);
+  const composerIsEmpty = channel?.messageComposer.compositionIsEmpty ?? true;
+
+  if (!supersededBy || (successorActive && !composerIsEmpty)) return channel;
+  return supersededBy;
+};

package/src/components/ChannelDetails/__tests__/ChannelDetails.test.tsx

@@ -15,13 +15,14 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import * as useIsDirectChatModule from '../../../hooks/useIsDirectChat';
+import { generateChannelState } from '../../../mock-builders/generator/channelState';
 import { ChannelDetails } from '../ChannelDetails';
 
 const Providers = ({ children }: PropsWithChildren) => (
   <ThemeProvider theme={defaultTheme}>
     <TranslationProvider
       value={{
-        t: ((key: string) => key) as never,
+        t: ((key: string, d?: unknown) => (typeof d === 'string' ? d : key)) as never,
         tDateTimeParser: ((input: unknown) => input) as never,
         userLanguage: 'en',
       }}
@@ -61,7 +62,7 @@ const buildChannel = (capabilities: string[] = []) =>
     data: { own_capabilities: capabilities },
     id: 'test',
     on: jest.fn(() => ({ unsubscribe: jest.fn() })),
-    state: { members: {} },
+    state: generateChannelState({ ownCapabilities: capabilities }),
   }) as unknown as Channel;
 
 const renderContent = () =>

package/src/components/ChannelDetails/__tests__/ChannelDetailsActionsSection.test.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { Switch, Text } from 'react-native';
 
+import { StateStore } from '@stream-io/state-store';
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
-import type { Channel } from 'stream-chat';
+import type { Channel, UserMuteResponse } from 'stream-chat';
 
 import { ChannelDetailsContextProvider } from '../../../contexts/channelDetailsContext/channelDetailsContext';
 import { ChatContext } from '../../../contexts/chatContext/ChatContext';
@@ -13,7 +14,6 @@ import { TranslationProvider } from '../../../contexts/translationContext/Transl
 import type { ChannelActionItem } from '../../../hooks/actions/useChannelActionItems';
 import * as useChannelActionsModule from '../../../hooks/actions/useChannelActions';
 import * as useIsDirectChatModule from '../../../hooks/useIsDirectChat';
-import * as useMutedUsersModule from '../../ChannelList/hooks/useMutedUsers';
 import * as useIsChannelMutedModule from '../../ChannelPreview/hooks/useIsChannelMuted';
 import type { ChannelDetailsActionItemProps } from '../components/ChannelDetailsActionItem';
 import { ChannelDetailsActionsSection } from '../components/ChannelDetailsActionsSection';
@@ -31,6 +31,8 @@ const buildItem = (overrides: Partial<ChannelActionItem> = {}): ChannelActionIte
   ...overrides,
 });
 
+const mutedUsersStore = new StateStore<{ mutedUsers: UserMuteResponse[] }>({ mutedUsers: [] });
+
 const channel = {
   cid: 'messaging:test',
   on: () => ({ unsubscribe: () => undefined }),
@@ -55,7 +57,7 @@ const sectionElement = () => (
   <ThemeProvider theme={defaultTheme}>
     <TranslationProvider
       value={{
-        t: ((key: string) => key) as never,
+        t: ((key: string, d?: unknown) => (typeof d === 'string' ? d : key)) as never,
         tDateTimeParser: ((input: unknown) => input) as never,
         userLanguage: 'en',
       }}
@@ -65,6 +67,7 @@ const sectionElement = () => (
           {
             client: {
               mutedUsers: [],
+              mutedUsersStore,
               on: () => ({ unsubscribe: () => undefined }),
               userID: 'me',
             },
@@ -83,11 +86,13 @@ const sectionElement = () => (
 
 const renderSection = () => render(sectionElement());
 
+const setMutedUsers = (mutedUsers: Array<{ target: { id: string }; user: { id: string } }>) =>
+  act(() => mutedUsersStore.partialNext({ mutedUsers: mutedUsers as UserMuteResponse[] }));
+
 describe('ChannelDetailsActionsSection', () => {
   let useIsDirectChatSpy: jest.SpyInstance;
   let useActionItemsSpy: jest.SpyInstance;
   let useIsChannelMutedSpy: jest.SpyInstance;
-  let useMutedUsersSpy: jest.SpyInstance;
   let getOtherUserSpy: jest.SpyInstance;
 
   beforeEach(() => {
@@ -101,7 +106,7 @@ describe('ChannelDetailsActionsSection', () => {
     useIsChannelMutedSpy = jest
       .spyOn(useIsChannelMutedModule, 'useIsChannelMuted')
       .mockReturnValue({ createdAt: null, expiresAt: null, muted: false });
-    useMutedUsersSpy = jest.spyOn(useMutedUsersModule, 'useMutedUsers').mockReturnValue([]);
+    mutedUsersStore.partialNext({ mutedUsers: [] });
     getOtherUserSpy = jest
       .spyOn(useChannelActionsModule, 'getOtherUserInDirectChannel')
       .mockReturnValue(undefined);
@@ -269,7 +274,7 @@ describe('ChannelDetailsActionsSection', () => {
     it('reflects userMuted state on the muteUser item Switch in direct chats', () => {
       useIsDirectChatSpy.mockReturnValue(true);
       getOtherUserSpy.mockReturnValue({ user: { id: 'other-user' } });
-      useMutedUsersSpy.mockReturnValue([{ target: { id: 'other-user' }, user: { id: 'me' } }]);
+      setMutedUsers([{ target: { id: 'other-user' }, user: { id: 'me' } }]);
       useActionItemsSpy.mockReturnValue([buildItem({ id: 'muteUser', label: 'Unmute User' })]);
       renderSection();
       const userMuteSwitch = screen.getByTestId('channel-details-action-muteUser-switch');
@@ -280,7 +285,7 @@ describe('ChannelDetailsActionsSection', () => {
       const action = jest.fn();
       useIsDirectChatSpy.mockReturnValue(true);
       getOtherUserSpy.mockReturnValue({ user: { id: 'other-user' } });
-      useMutedUsersSpy.mockReturnValue([]);
+      setMutedUsers([]);
       useActionItemsSpy.mockReturnValue([
         buildItem({ action, id: 'muteUser', label: 'Mute User' }),
       ]);
@@ -300,7 +305,7 @@ describe('ChannelDetailsActionsSection', () => {
       const action = jest.fn();
       useIsDirectChatSpy.mockReturnValue(true);
       getOtherUserSpy.mockReturnValue({ user: { id: 'other-user' } });
-      useMutedUsersSpy.mockReturnValue([]);
+      setMutedUsers([]);
       useActionItemsSpy.mockReturnValue([
         buildItem({ action, id: 'muteUser', label: 'Mute User' }),
       ]);
@@ -310,7 +315,7 @@ describe('ChannelDetailsActionsSection', () => {
       fireEvent(userMuteSwitch, 'valueChange', true);
       expect(screen.getByTestId('channel-details-action-muteUser-switch').props.value).toBe(true);
       // A server event reports the user as muted before the request resolves.
-      useMutedUsersSpy.mockReturnValue([{ target: { id: 'other-user' }, user: { id: 'me' } }]);
+      setMutedUsers([{ target: { id: 'other-user' }, user: { id: 'me' } }]);
       rerender(sectionElement());
       // The request fails: revert to the current hook value (true), not !value (false).
       act(() => {
@@ -322,7 +327,7 @@ describe('ChannelDetailsActionsSection', () => {
     it('userMuted is false when the other user is not in mutedUsers', () => {
       useIsDirectChatSpy.mockReturnValue(true);
       getOtherUserSpy.mockReturnValue({ user: { id: 'other-user' } });
-      useMutedUsersSpy.mockReturnValue([{ target: { id: 'someone-else' }, user: { id: 'me' } }]);
+      setMutedUsers([{ target: { id: 'someone-else' }, user: { id: 'me' } }]);
       useActionItemsSpy.mockReturnValue([buildItem({ id: 'muteUser', label: 'Mute User' })]);
       renderSection();
       const userMuteSwitch = screen.getByTestId('channel-details-action-muteUser-switch');

package/src/components/ChannelDetails/__tests__/ChannelDetailsEditButton.test.tsx

@@ -15,6 +15,7 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import { useChannelActions } from '../../../hooks/actions/useChannelActions';
+import { generateChannelState } from '../../../mock-builders/generator/channelState';
 import {
   ChannelDetailsEditButton,
   ChannelDetailsEditButtonProps,
@@ -48,7 +49,7 @@ const buildChannel = (capabilities: string[] = []): Channel =>
     cid: 'messaging:test',
     data: { own_capabilities: capabilities },
     on: () => ({ unsubscribe: () => undefined }),
-    state: { members: {} },
+    state: generateChannelState({ ownCapabilities: capabilities }),
   }) as unknown as Channel;
 
 const Providers = ({ children }: PropsWithChildren) => (
@@ -56,7 +57,7 @@ const Providers = ({ children }: PropsWithChildren) => (
     <AccessibilityProvider value={{ enabled: true }}>
       <TranslationProvider
         value={{
-          t: ((key: string) => key) as never,
+          t: ((key: string, d?: unknown) => (typeof d === 'string' ? d : key)) as never,
           tDateTimeParser: ((input: unknown) => input) as never,
           userLanguage: 'en',
         }}

package/src/components/ChannelDetails/__tests__/ChannelDetailsMemberSection.test.tsx

@@ -18,6 +18,7 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import { useChannelActions } from '../../../hooks/actions/useChannelActions';
+import { generateChannelState } from '../../../mock-builders/generator/channelState';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { ChannelDetailsMemberSection } from '../components/ChannelDetailsMemberSection';
@@ -51,11 +52,12 @@ const buildChannel = (
     cid: 'messaging:test',
     data: { member_count: memberCount ?? members.length },
     on: () => ({ unsubscribe: () => undefined }),
-    state: {
+    state: generateChannelState({
+      memberCount: memberCount ?? members.length,
       members: Object.fromEntries(
         members.map((m) => [m.user?.id ?? m.user_id ?? '', m]).filter(([k]) => Boolean(k)),
       ),
-    },
+    }),
     ...overrides,
   }) as unknown as Channel;
 
@@ -67,10 +69,7 @@ const applyCapabilities = (
   const ownCapabilities = Object.entries(overrides)
     .filter(([, enabled]) => enabled)
     .map(([key]) => allOwnCapabilities[key as OwnCapability]);
-  (channel as { data?: Record<string, unknown> }).data = {
-    ...((channel as { data?: Record<string, unknown> }).data ?? {}),
-    own_capabilities: ownCapabilities,
-  };
+  channel.state.partialNext({ ownCapabilities });
   return channel;
 };
 
@@ -88,7 +87,7 @@ const renderSection = ({
       <AccessibilityProvider value={{ enabled: true }}>
         <TranslationProvider
           value={{
-            t: ((key: string) => key) as never,
+            t: ((key: string, d?: unknown) => (typeof d === 'string' ? d : key)) as never,
             tDateTimeParser: ((input: unknown) => input) as never,
             userLanguage: 'en',
           }}

package/src/components/ChannelDetails/__tests__/ChannelDetailsNavHeader.test.tsx

@@ -33,7 +33,7 @@ const Providers = ({ children }: PropsWithChildren) => (
     <AccessibilityProvider value={{ enabled: true }}>
       <TranslationProvider
         value={{
-          t: ((key: string) => key) as never,
+          t: ((key: string, d?: unknown) => (typeof d === 'string' ? d : key)) as never,
           tDateTimeParser: ((input: unknown) => input) as never,
           userLanguage: 'en',
         }}

package/src/components/ChannelDetails/__tests__/ChannelDetailsNavigationSection.test.tsx

@@ -17,10 +17,13 @@ import {
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import { runtimeDefaults } from '../../../i18n/runtimeDefaults';
 import type { ChannelDetailsActionItemProps } from '../components/ChannelDetailsActionItem';
 import { ChannelDetailsNavigationSection } from '../components/ChannelDetailsNavigationSection';
 import type { GetChannelDetailsNavigationItems } from '../hooks/useChannelDetailsNavigationItems';
 
+type RuntimeDefaultKey = keyof typeof runtimeDefaults;
+
 const probeCalls: ChannelDetailsActionItemProps[] = [];
 
 jest.mock('../components/ChannelDetailsActionItem', () => {
@@ -80,7 +83,12 @@ const renderSection = (
     <ThemeProvider theme={defaultTheme}>
       <TranslationProvider
         value={{
-          t: ((key: string) => key) as never,
+          // Prose keys pass their English copy inline as the second argument; the navigation row
+          // labels are `runtimeDefaults` keys, resolved by name from the bundled catalog.
+          t: ((key: string, d?: unknown) =>
+            typeof d === 'string'
+              ? d
+              : (runtimeDefaults[key as RuntimeDefaultKey] ?? key)) as never,
           tDateTimeParser: ((input: unknown) => input) as never,
           userLanguage: 'en',
         }}

package/src/components/ChannelDetails/__tests__/ChannelDetailsProfile.test.tsx

@@ -40,7 +40,7 @@ const renderProfile = ({ channel = buildChannel() }: { channel?: Channel } = {})
     <ThemeProvider theme={defaultTheme}>
       <TranslationProvider
         value={{
-          t: ((key: string) => key) as never,
+          t: ((key: string, d?: unknown) => (typeof d === 'string' ? d : key)) as never,
           tDateTimeParser: ((input: unknown) => input) as never,
           userLanguage: 'en',
         }}

package/src/components/ChannelDetails/__tests__/ChannelEditDetailsForm.test.tsx

@@ -14,6 +14,8 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import { useChannelActions } from '../../../hooks/actions/useChannelActions';
+import { runtimeDefaults } from '../../../i18n/runtimeDefaults';
+import { generateChannelState } from '../../../mock-builders/generator/channelState';
 import { ChannelEditDetailsForm } from '../components/ChannelEditDetailsForm';
 
 jest.mock('../../../hooks/actions/useChannelActions');
@@ -44,13 +46,15 @@ const EditDetailsProbe = () => {
   );
 };
 
-const buildChannel = (overrides?: { name?: string; cid?: string }): Channel =>
-  ({
+const buildChannel = (overrides?: { name?: string; cid?: string }): Channel => {
+  const name = overrides?.name ?? 'Original';
+  return {
     cid: overrides?.cid ?? 'messaging:test',
-    data: { name: overrides?.name ?? 'Original' },
+    data: { custom: { name } },
     on: () => ({ unsubscribe: () => undefined }),
-    state: { members: {} },
-  }) as unknown as Channel;
+    state: generateChannelState({ data: { custom: { name } } }),
+  } as unknown as Channel;
+};
 
 const renderForm = ({ channel, onClose = jest.fn() }: { channel: Channel; onClose?: () => void }) =>
   render(
@@ -58,7 +62,12 @@ const renderForm = ({ channel, onClose = jest.fn() }: { channel: Channel; onClos
       <AccessibilityProvider value={{ enabled: true }}>
         <TranslationProvider
           value={{
-            t: ((key: string) => key) as never,
+            // Prose keys pass their English copy inline as the second argument; keys resolved by
+            // name (e.g. the close button's `accessibilityLabelKey`) come from `runtimeDefaults`.
+            t: ((key: string, d?: unknown) =>
+              typeof d === 'string'
+                ? d
+                : (runtimeDefaults[key as keyof typeof runtimeDefaults] ?? key)) as never,
             tDateTimeParser: ((input: unknown) => input) as never,
             userLanguage: 'en',
           }}
@@ -231,7 +240,7 @@ describe('ChannelEditDetailsForm', () => {
     renderForm({ channel: buildChannel({ name: 'Original' }), onClose });
 
     fireEvent.changeText(screen.getByTestId('channel-edit-name-input'), 'Renamed');
-    fireEvent.press(screen.getByLabelText('a11y/Close'));
+    fireEvent.press(screen.getByLabelText('Close'));
 
     expect(onClose).toHaveBeenCalledTimes(1);
   });

package/src/components/ChannelDetails/__tests__/ChannelEditDetailsFormContent.test.tsx

@@ -15,6 +15,7 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import { generateFileReference } from '../../../mock-builders/attachments';
+import { generateChannelState } from '../../../mock-builders/generator/channelState';
 import { NativeHandlers } from '../../../native';
 import { EditChannelDetailsStore } from '../../../state-store/edit-channel-details-store';
 import { ChannelEditDetailsFormContent } from '../components/ChannelEditDetailsFormContent';
@@ -47,16 +48,18 @@ const SheetProbe = (props: ChannelEditImageSheetProps) => {
   );
 };
 
-const buildChannel = (overrides?: { image?: string; name?: string }): Channel =>
-  ({
+const buildChannel = (overrides?: { image?: string; name?: string }): Channel => {
+  const custom = {
+    name: overrides && 'name' in overrides ? overrides.name : 'Original',
+    ...(overrides && 'image' in overrides ? { image: overrides.image } : {}),
+  };
+  return {
     cid: 'messaging:test',
-    data: {
-      name: overrides && 'name' in overrides ? overrides.name : 'Original',
-      ...(overrides && 'image' in overrides ? { image: overrides.image } : {}),
-    },
+    data: { custom },
     on: () => ({ unsubscribe: () => undefined }),
-    state: { members: {} },
-  }) as unknown as Channel;
+    state: generateChannelState({ data: { custom } }),
+  } as unknown as Channel;
+};
 
 // The avatar renders its image through the default `SvgAwareImage`, which for a
 // raster URI is a plain RN `Image`. Read back the displayed `uri` (or undefined
@@ -70,7 +73,7 @@ const renderComponent = ({ channel }: { channel: Channel }) => {
     <ThemeProvider theme={defaultTheme}>
       <TranslationProvider
         value={{
-          t: ((key: string) => key) as never,
+          t: ((key: string, d?: unknown) => (typeof d === 'string' ? d : key)) as never,
           tDateTimeParser: ((input: unknown) => input) as never,
           userLanguage: 'en',
         }}
@@ -118,7 +121,7 @@ describe('ChannelEditDetailsFormContent', () => {
       <ThemeProvider theme={defaultTheme}>
         <TranslationProvider
           value={{
-            t: ((key: string) => key) as never,
+            t: ((key: string, d?: unknown) => (typeof d === 'string' ? d : key)) as never,
             tDateTimeParser: ((input: unknown) => input) as never,
             userLanguage: 'en',
           }}

package/src/components/ChannelDetails/__tests__/ChannelEditImageSheet.test.tsx

@@ -9,6 +9,7 @@ import { WithComponents } from '../../../contexts/componentsContext/ComponentsCo
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import { generateChannelState } from '../../../mock-builders/generator/channelState';
 import { EditChannelDetailsStore } from '../../../state-store/edit-channel-details-store';
 import type { ChannelDetailsActionItemProps } from '../components/ChannelDetailsActionItem';
 import { ChannelEditImageSheet } from '../components/ChannelEditImageSheet';
@@ -68,15 +69,17 @@ const ActionItemProbe = (props: Probe) => {
   );
 };
 
-const buildChannel = (overrides?: { image?: string }): Channel =>
-  ({
+const buildChannel = (overrides?: { image?: string }): Channel => {
+  const custom = {
+    ...(overrides && 'image' in overrides ? { image: overrides.image } : {}),
+  };
+  return {
     cid: 'messaging:test',
-    data: {
-      ...(overrides && 'image' in overrides ? { image: overrides.image } : {}),
-    },
+    data: { custom },
     on: () => ({ unsubscribe: () => undefined }),
-    state: { members: {} },
-  }) as unknown as Channel;
+    state: generateChannelState({ data: { custom } }),
+  } as unknown as Channel;
+};
 
 const renderSheet = ({
   channel = buildChannel(),
@@ -92,7 +95,7 @@ const renderSheet = ({
     <ThemeProvider theme={defaultTheme}>
       <TranslationProvider
         value={{
-          t: ((key: string) => key) as never,
+          t: ((key: string, d?: unknown) => (typeof d === 'string' ? d : key)) as never,
           tDateTimeParser: ((input: unknown) => input) as never,
           userLanguage: 'en',
         }}

package/src/components/ChannelDetails/__tests__/ChannelEditName.test.tsx

@@ -8,18 +8,19 @@ import { ChatContext } from '../../../contexts/chatContext/ChatContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
+import { generateChannelState } from '../../../mock-builders/generator/channelState';
 import { EditChannelDetailsStore } from '../../../state-store/edit-channel-details-store';
 import { ChannelEditName } from '../components/ChannelEditName';
 
-const buildChannel = (overrides?: { name?: string }): Channel =>
-  ({
+const buildChannel = (overrides?: { name?: string }): Channel => {
+  const name = overrides && 'name' in overrides ? overrides.name : 'Original';
+  return {
     cid: 'messaging:test',
-    data: {
-      name: overrides && 'name' in overrides ? overrides.name : 'Original',
-    },
+    data: { custom: { name } },
     on: () => ({ unsubscribe: () => undefined }),
-    state: { members: {} },
-  }) as unknown as Channel;
+    state: generateChannelState({ data: { custom: { name } } }),
+  } as unknown as Channel;
+};
 
 const renderComponent = ({ channel }: { channel: Channel }) => {
   const store = new EditChannelDetailsStore(channel);
@@ -27,7 +28,7 @@ const renderComponent = ({ channel }: { channel: Channel }) => {
     <ThemeProvider theme={defaultTheme}>
       <TranslationProvider
         value={{
-          t: ((key: string) => key) as never,
+          t: ((key: string, d?: unknown) => (typeof d === 'string' ? d : key)) as never,
           tDateTimeParser: ((input: unknown) => input) as never,
           userLanguage: 'en',
         }}

package/src/components/ChannelDetails/__tests__/members/AddMemberSearchResultItem.test.tsx

@@ -42,14 +42,24 @@ const renderRow = ({
     <ThemeProvider theme={defaultTheme}>
       <TranslationProvider
         value={{
-          t: ((key: string, options?: Record<string, unknown>) => {
+          // Renders the call site's inline `defaultValue` (falling back to the key) and fills in
+          // `{{…}}` placeholders from the options, as i18next would.
+          t: ((
+            key: string,
+            defaultValueOrOptions?: string | Record<string, unknown>,
+            maybeOptions?: Record<string, unknown>,
+          ) => {
+            const options =
+              typeof defaultValueOrOptions === 'string' ? maybeOptions : defaultValueOrOptions;
+            const template =
+              typeof defaultValueOrOptions === 'string' ? defaultValueOrOptions : key;
             if (options && typeof options === 'object') {
               return Object.entries(options).reduce(
                 (acc, [k, v]) => acc.replace(`{{${k}}}`, String(v)),
-                key,
+                template,
               );
             }
-            return key;
+            return template;
           }) as never,
           tDateTimeParser: ((input: unknown) => input) as never,
           userLanguage: 'en',
@@ -74,7 +84,7 @@ describe('AddMemberSearchResultItem', () => {
 
     const row = screen.getByTestId('channel-add-members-row-u-1');
     expect(row.props.accessibilityState).toMatchObject({ disabled: false, selected: false });
-    expect(screen.getByLabelText('a11y/Select Alice')).toBeTruthy();
+    expect(screen.getByLabelText('Select Alice')).toBeTruthy();
     expect(screen.queryByTestId('channel-add-members-row-u-1-member-label')).toBeNull();
   });
 
@@ -101,7 +111,7 @@ describe('AddMemberSearchResultItem', () => {
     const user = generateUser({ id: 'u-no-name', name: undefined });
     renderRow({ user });
 
-    expect(screen.getByLabelText('a11y/Select u-no-name')).toBeTruthy();
+    expect(screen.getByLabelText('Select u-no-name')).toBeTruthy();
     expect(screen.getByText('u-no-name')).toBeTruthy();
   });
 
@@ -115,7 +125,7 @@ describe('AddMemberSearchResultItem', () => {
       expect(row.props.accessibilityRole).toBeUndefined();
       expect(screen.getByTestId('channel-add-members-row-u-2-member-label')).toBeTruthy();
       expect(screen.getByText('Already a member')).toBeTruthy();
-      expect(screen.getByLabelText('a11y/Bob is already a member')).toBeTruthy();
+      expect(screen.getByLabelText('Bob is already a member')).toBeTruthy();
     });
   });
 });

package/src/components/ChannelDetails/__tests__/members/ChannelAddMembersButton.test.tsx

@@ -16,6 +16,7 @@ import {
 import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
+import { generateChannelState } from '../../../../mock-builders/generator/channelState';
 import { ChannelAddMembersButton } from '../../components/members/ChannelAddMembersButton';
 
 // Replace the modal wrapper with a lightweight probe that renders regardless of `visible`
@@ -38,7 +39,7 @@ const buildChannel = (overrides?: Partial<OwnCapabilitiesContextValue>): Channel
     cid: 'messaging:test',
     data: ownCapabilities ? { own_capabilities: ownCapabilities } : {},
     on: () => ({ unsubscribe: () => undefined }),
-    state: { members: {} },
+    state: generateChannelState({ ownCapabilities: ownCapabilities ?? [] }),
   } as unknown as Channel;
 };
 
@@ -74,7 +75,7 @@ const renderButton = ({
       <AccessibilityProvider value={{ enabled: true }}>
         <TranslationProvider
           value={{
-            t: ((key: string) => key) as never,
+            t: ((key: string, d?: unknown) => (typeof d === 'string' ? d : key)) as never,
             tDateTimeParser: ((input: unknown) => input) as never,
             userLanguage: 'en',
           }}

package/src/components/ChannelDetails/__tests__/members/ChannelAddMembersForm.test.tsx

@@ -19,6 +19,7 @@ import { ThemeProvider } from '../../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
 import { useChannelActions } from '../../../../hooks/actions/useChannelActions';
+import { runtimeDefaults } from '../../../../i18n/runtimeDefaults';
 import { generateMember } from '../../../../mock-builders/generator/member';
 import { generateUser } from '../../../../mock-builders/generator/user';
 import { ChannelAddMembersForm } from '../../components/members/ChannelAddMembersForm';
@@ -90,7 +91,12 @@ const renderForm = ({
       <AccessibilityProvider value={{ enabled: true }}>
         <TranslationProvider
           value={{
-            t: ((key: string) => key) as never,
+            // Prose keys pass their English copy inline as the second argument; keys resolved by
+            // name (e.g. the close button's `accessibilityLabelKey`) come from `runtimeDefaults`.
+            t: ((key: string, d?: unknown) =>
+              typeof d === 'string'
+                ? d
+                : (runtimeDefaults[key as keyof typeof runtimeDefaults] ?? key)) as never,
             tDateTimeParser: ((input: unknown) => input) as never,
             userLanguage: 'en',
           }}
@@ -175,7 +181,7 @@ describe('ChannelAddMembersForm', () => {
 
     renderForm({ channel, onClose });
 
-    fireEvent.press(screen.getByLabelText('a11y/Close'));
+    fireEvent.press(screen.getByLabelText('Close'));
     expect(onClose).toHaveBeenCalledTimes(1);
   });