stream-chat-react-native-core 9.5.0-beta.6 → 9.5.0-beta.8

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react-native';
+
+import { ThemeProvider } from '../../../../../contexts';
+import { defaultTheme } from '../../../../../contexts/themeContext/utils/theme';
+import type { RoleLabel } from '../../../hooks/members/useMemberRoles';
+import { RoleList } from '../RoleList';
+
+const renderList = (roles: RoleLabel[]) =>
+  render(
+    <ThemeProvider theme={defaultTheme}>
+      <RoleList roles={roles} />
+    </ThemeProvider>,
+  );
+
+describe('RoleList', () => {
+  it('renders a badge for each role', () => {
+    renderList([
+      { key: 'owner', label: 'Owner' },
+      { key: 'admin', label: 'Admin' },
+    ]);
+    expect(screen.getByText('Owner')).toBeTruthy();
+    expect(screen.getByText('Admin')).toBeTruthy();
+  });
+
+  it('renders nothing when there are no roles', () => {
+    const { toJSON } = renderList([]);
+    expect(toJSON()).toBeNull();
+  });
+});

package/src/components/ChannelDetails/components/roles/index.ts

@@ -0,0 +1,2 @@
+export * from './RoleItem';
+export * from './RoleList';

package/src/components/ChannelDetails/hooks/members/index.ts

@@ -1 +1 @@
-export * from './useMemberRoleLabel';
+export * from './useMemberRoles';

package/src/components/ChannelDetails/hooks/members/useMemberRoles.ts

@@ -0,0 +1,63 @@
+import type { Channel, ChannelMemberResponse } from 'stream-chat';
+
+import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import type { TranslationContextValue } from '../../../../contexts/translationContext/TranslationContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+
+/**
+ * A single role shown next to a member row.
+ *
+ * - `key` is the raw role identifier (`'owner'`, `'admin'`, `'moderator'`, …).
+ * - `label` is the translated, user-facing text.
+ */
+export type RoleLabel = {
+  key: string;
+  label: string;
+};
+
+/**
+ * Override the roles shown next to each member in the channel details screen.
+ *
+ * Receives `defaultRoleLabels` — the roles the default implementation computed for this member —
+ * so a custom implementation can reuse or extend them (e.g. `[...defaultRoleLabels, customRole]`),
+ * and returns the list of roles to render (or an empty array to render none). The default
+ * implementation marks members as `owner` (channel creator), `admin` (`user.role === 'admin'`)
+ * and `moderator` (`channel_role === 'channel_moderator'`), returning every role that applies.
+ */
+export type GetMemberRoles = (params: {
+  channel: Channel;
+  defaultRoleLabels: RoleLabel[];
+  member: ChannelMemberResponse;
+  t: TranslationContextValue['t'];
+}) => RoleLabel[];
+
+/**
+ * Resolves the trailing role badges for a channel member row in the channel details screen.
+ *
+ * Returns every applicable role in the order Owner > Admin > Moderator. When a member matches
+ * none of the rules (and no custom `getMemberRoles` is provided), returns an empty array.
+ */
+export const useMemberRoles = (
+  member: ChannelMemberResponse,
+  getMemberRoles?: GetMemberRoles,
+): RoleLabel[] => {
+  const { channel } = useChannelDetailsContext();
+  const { t } = useTranslationContext();
+
+  const defaultRoleLabels: RoleLabel[] = [];
+  const userId = member.user?.id;
+  if (userId && userId === channel?.data?.created_by?.id) {
+    defaultRoleLabels.push({ key: 'owner', label: t('Owner') });
+  }
+  if (member.user?.role === 'admin') {
+    defaultRoleLabels.push({ key: 'admin', label: t('Admin') });
+  }
+  if (member.channel_role === 'channel_moderator') {
+    defaultRoleLabels.push({ key: 'moderator', label: t('Moderator') });
+  }
+
+  if (getMemberRoles) {
+    return getMemberRoles({ channel, defaultRoleLabels, member, t }) ?? [];
+  }
+  return defaultRoleLabels;
+};

package/src/components/ChannelDetails/hooks/useChannelDetailsActionItems.ts

@@ -3,14 +3,18 @@ import { useMemo } from 'react';
 import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
 import {
   ChannelActionItem,
+  GetChannelActionItems,
   useChannelActionItems,
 } from '../../../hooks/actions/useChannelActionItems';
 
-/**
- * @experimental This hook is experimental and is subject to change.
- */
-export const useChannelDetailsActionItems = (): ChannelActionItem[] => {
-  const { channel, getChannelActionItems, onChannelDismiss } = useChannelDetailsContext();
+export const useChannelDetailsActionItems = ({
+  getChannelActionItems,
+  onChannelDismiss,
+}: {
+  getChannelActionItems?: GetChannelActionItems;
+  onChannelDismiss?: () => void;
+} = {}): ChannelActionItem[] => {
+  const { channel } = useChannelDetailsContext();
 
   const items = useChannelActionItems({ channel, getChannelActionItems, surface: 'details' });
 

package/src/components/ChannelDetails/hooks/useChannelDetailsMemberStatusText.ts

@@ -12,7 +12,6 @@ import { useChannelOnlineMemberCount } from '../../ChannelList/hooks/useChannelO
  * Resolves the subtitle status line shown under the channel title.
  *   - Direct chats: `t('Online')` when the other member is online, otherwise an empty string.
  *   - Group chats: `t('{{memberCount}} members, {{onlineCount}} online')`.
- * @experimental This hook is experimental and is subject to change.
  */
 export const useChannelDetailsMemberStatusText = (channel: Channel): string => {
   const { t } = useTranslationContext();

package/src/components/ChannelDetails/hooks/useChannelDetailsMembersPreview.ts

@@ -13,9 +13,6 @@ export type ChannelDetailsMembersPreview = {
   visible: ChannelMemberResponse[];
 };
 
-/**
- * @experimental This hook is experimental and is subject to change.
- */
 export const useChannelDetailsMembersPreview = (
   channel: Channel,
   max: number = DEFAULT_VISIBLE_MEMBER_COUNT,

package/src/components/ChannelDetails/hooks/useChannelDetailsNavigationItems.ts

@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react';
 
-import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { Picture } from '../../../icons';
@@ -13,8 +12,6 @@ import type { IconProps } from '../../../icons/utils/base';
  * Identifies a navigation row. The literals are the built-in sections rendered by default;
  * consumers can also add their own rows with arbitrary section identifiers via `getNavigationItems`,
  * so any string is allowed.
- *
- * @experimental This type is experimental and is subject to change.
  */
 export type ChannelDetailsNavigationSectionType =
   | 'pinned-messages'
@@ -24,8 +21,6 @@ export type ChannelDetailsNavigationSectionType =
 
 /**
  * A single row in the channel details navigation section.
- *
- * @experimental This type is experimental and is subject to change.
  */
 export type ChannelDetailsNavigationItem = {
   /** Icon rendered at the start of the row and reused in the built-in modal header. */
@@ -66,8 +61,6 @@ export type ChannelDetailsNavigationItemsContext = {
  * `defaultItems` to set a row's `onPress` (e.g. to push your own screen), or add/remove rows. Any
  * row whose `onPress` you leave unset keeps its built-in behavior (opening the built-in modal) —
  * including sections added in future SDK versions.
- *
- * @experimental This type is experimental and is subject to change.
  */
 export type GetChannelDetailsNavigationItems = (params: {
   context: ChannelDetailsNavigationItemsContext;
@@ -83,12 +76,13 @@ export const getChannelDetailsNavigationItems: GetChannelDetailsNavigationItems
  * plain array — the section component owns the built-in modal and supplies the default open-modal
  * behavior for any row without a custom `onPress`. Customize the rows by passing `getNavigationItems`
  * to `ChannelDetails` (see {@link GetChannelDetailsNavigationItems}).
- *
- * @experimental This hook is experimental and is subject to change.
  */
-export const useChannelDetailsNavigationItems = (): ChannelDetailsNavigationItem[] => {
+export const useChannelDetailsNavigationItems = ({
+  getNavigationItems = getChannelDetailsNavigationItems,
+}: {
+  getNavigationItems?: GetChannelDetailsNavigationItems;
+} = {}): ChannelDetailsNavigationItem[] => {
   const { t } = useTranslationContext();
-  const { getNavigationItems = getChannelDetailsNavigationItems } = useChannelDetailsContext();
 
   const context = useMemo<ChannelDetailsNavigationItemsContext>(() => ({ t }), [t]);
 

package/src/components/ChannelDetails/hooks/useEditChannelImage.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { Alert, Linking } from 'react-native';
 
-import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
+import { useChannelEditDetailsContext } from '../../../contexts/channelEditDetailsContext/ChannelEditDetailsContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { NativeHandlers } from '../../../native';
 import type { File } from '../../../types/types';
@@ -31,11 +31,10 @@ export type UseEditChannelImageResult = {
  * hook intentionally does NOT upload the picked file; the consumer receives a
  * `File` and decides what to do with it.
  *
- * Reads `compressImageQuality` from `ChannelDetailsContext`.
- * @experimental This hook is experimental and is subject to change.
+ * Reads `compressImageQuality` from `ChannelEditDetailsContext`.
  */
 export const useEditChannelImage = (): UseEditChannelImageResult => {
-  const { compressImageQuality } = useChannelDetailsContext();
+  const { compressImageQuality } = useChannelEditDetailsContext();
   const { t } = useTranslationContext();
 
   const takePhoto = useCallback(async (): Promise<File | undefined> => {

package/src/components/ChannelDetails/hooks/useFileAttachmentListSections.ts

@@ -14,8 +14,6 @@ import { getDateString } from '../../../utils/i18n/getDateString';
 /**
  * A single file/audio attachment paired with the message it belongs to. The file attachment list
  * renders one row per attachment, so a message with multiple file attachments yields multiple rows.
- *
- * @experimental This type is experimental and is subject to change.
  */
 export type FileAttachmentTile = { attachment: Attachment; message: MessageResponse };
 
@@ -42,7 +40,6 @@ const getFileAttachments = (message: MessageResponse): Attachment[] =>
  * pipeline used by message timestamps (see `useUserActivityStatus`), so the format
  * follows the configured locale and can be customized via the
  * `timestamp/FileAttachmentListSection` translation key.
- * @experimental This hook is experimental and is subject to change.
  */
 export const useFileAttachmentListSections = (
   messages?: MessageResponse[],

package/src/components/ChannelDetails/hooks/useMediaList.ts

@@ -7,8 +7,6 @@ import { FileTypes } from '../../../types/types';
 /**
  * A single image/video attachment paired with the message it belongs to. The media grid renders
  * one tile per attachment, so a message with multiple media attachments yields multiple tiles.
- *
- * @experimental This type is experimental and is subject to change.
  */
 export type MediaTile = {
   attachment: Attachment;
@@ -44,8 +42,6 @@ const getMediaTiles = (messages: MessageResponse[] | undefined): MediaTile[] =>
  * Gathers and filters the image/video attachments from a list of messages into a flat list of
  * media tiles, ready to render in the media grid. Scraped/OG link-preview attachments and
  * non-media attachments are excluded.
- *
- * @experimental This hook is experimental and is subject to change.
  */
 export const useMediaList = (messages?: MessageResponse[]): MediaTile[] =>
   useMemo(() => getMediaTiles(messages), [messages]);

package/src/components/ChannelDetails/hooks/useUserActivityStatus.ts

@@ -14,7 +14,6 @@ import { getDateString } from '../../../utils/i18n/getDateString';
  *
  * The relative time is produced through the shared `getDateString` + translation-key
  * pipeline used by message timestamps, so the format follows the configured locale.
- * @experimental This hook is experimental and is subject to change.
  */
 export const useUserActivityStatus = (user?: UserResponse): string => {
   const { t, tDateTimeParser } = useTranslationContext();

package/src/components/UIComponents/EmptyList.tsx

@@ -20,9 +20,6 @@ export type EmptyListProps = {
   subtitle?: string;
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const EmptyList = ({ icon: Icon, subtitle, title }: EmptyListProps) => {
   const {
     theme: {

package/src/components/UIComponents/EmptySearchResult.tsx

@@ -9,9 +9,6 @@ export type EmptySearchResultProps = {
   label: string;
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const EmptySearchResult = ({ label }: EmptySearchResultProps) => {
   const {
     theme: {

package/src/components/UIComponents/GenericListLoadingSkeleton.tsx

@@ -56,9 +56,6 @@ const SkeletonRow = ({ skeleton }: { skeleton: ListLoadingSkeletonTheme }) => {
   );
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const GenericListLoadingSkeleton = ({
   skeleton,
   testID,

package/src/components/UIComponents/SearchInput.tsx

@@ -13,9 +13,6 @@ import { Input, InputProps } from '../ui/Input/Input';
 
 export type SearchInputProps = Partial<InputProps>;
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const SearchInput = ({ onChangeText, ...props }: SearchInputProps) => {
   const { t } = useTranslationContext();
   const {

package/src/components/UIComponents/SelectionCircle.tsx

@@ -9,9 +9,6 @@ export type SelectionCircleProps = {
   selected: boolean;
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
 export const SelectionCircle = ({ selected }: SelectionCircleProps) => {
   const {
     theme: {

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

@@ -36,8 +36,8 @@ const sizes = {
     height: 48,
   },
   lg: {
-    width: 44,
-    height: 44,
+    width: 40,
+    height: 40,
   },
 };
 

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

@@ -5,7 +5,13 @@ import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import { UserResponse } from 'stream-chat';
 
 import { Avatar, AvatarProps } from './Avatar';
-import { fontSizes, iconSizes, indicatorSizes, numberOfInitials } from './constants';
+import {
+  fontSizes,
+  iconSizes,
+  indicatorPositions,
+  indicatorSizes,
+  numberOfInitials,
+} from './constants';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { PeopleIcon } from '../../../icons/users';
@@ -57,7 +63,7 @@ export const UserAvatar = (props: UserAvatarProps) => {
         style={style}
       />
       {showOnlineIndicator ? (
-        <View style={styles.onlineIndicatorWrapper}>
+        <View style={[styles.onlineIndicatorWrapper, indicatorPositions[size]]}>
           <OnlineIndicator online={true} size={indicatorSizes[size]} />
         </View>
       ) : null}
@@ -71,8 +77,6 @@ const useStyles = () => {
       StyleSheet.create({
         onlineIndicatorWrapper: {
           position: 'absolute',
-          right: -2,
-          top: -2,
         },
       }),
     [],

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

@@ -41,6 +41,45 @@ const indicatorSizes: Record<UserAvatarProps['size'], OnlineIndicatorProps['size
   xs: 'sm',
 };
 
+const onlineIndicatorSizes: Record<
+  OnlineIndicatorProps['size'],
+  { borderWidth: number; height: number; width: number }
+> = {
+  xl: {
+    borderWidth: 2,
+    height: 16,
+    width: 16,
+  },
+  lg: {
+    borderWidth: 2,
+    height: 14,
+    width: 14,
+  },
+  md: {
+    borderWidth: 2,
+    height: 12,
+    width: 12,
+  },
+  sm: {
+    borderWidth: 1,
+    height: 8,
+    width: 8,
+  },
+};
+
+// Anchors the presence dot on the avatar's circular edge at 45°:
+// offset = avatarWidth / 2 * (1 - Math.SQRT1_2) - indicatorDiameter / 2  (rounded to px)
+const indicatorPositions = (Object.keys(avatarSizes) as UserAvatarProps['size'][]).reduce(
+  (acc, size) => {
+    const avatarDiameter = avatarSizes[size].width;
+    const indicatorDiameter = onlineIndicatorSizes[indicatorSizes[size]].width;
+    const offset = Math.round((avatarDiameter / 2) * (1 - Math.SQRT1_2) - indicatorDiameter / 2);
+    acc[size] = { right: offset, top: offset };
+    return acc;
+  },
+  {} as Record<UserAvatarProps['size'], { right: number; top: number }>,
+);
+
 const iconSizes: Record<UserAvatarProps['size'], number> = {
   xs: 10,
   sm: 12,
@@ -99,4 +138,12 @@ const numberOfInitials: Record<UserAvatarProps['size'], number> = {
   '2xl': 2,
 };
 
-export { indicatorSizes, iconSizes, fontSizes, numberOfInitials, avatarSizes };
+export {
+  indicatorSizes,
+  onlineIndicatorSizes,
+  indicatorPositions,
+  iconSizes,
+  fontSizes,
+  numberOfInitials,
+  avatarSizes,
+};

package/src/components/ui/Badge/OnlineIndicator.tsx

@@ -3,38 +3,24 @@ import { StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../theme';
+import { onlineIndicatorSizes } from '../Avatar/constants';
 
 export type OnlineIndicatorProps = {
   online: boolean;
   size: 'xl' | 'lg' | 'sm' | 'md';
 };
 
-const sizes = {
-  xl: {
-    borderWidth: 2,
-    height: 16,
-    width: 16,
-  },
-  lg: {
-    borderWidth: 2,
-    height: 14,
-    width: 14,
-  },
-  md: {
-    borderWidth: 2,
-    height: 12,
-    width: 12,
-  },
-  sm: {
-    borderWidth: 1,
-    height: 8,
-    width: 8,
-  },
-};
-
 export const OnlineIndicator = ({ online, size = 'md' }: OnlineIndicatorProps) => {
   const styles = useStyles();
-  return <View style={[styles.indicator, sizes[size], online ? styles.online : styles.offline]} />;
+  return (
+    <View
+      style={[
+        styles.indicator,
+        onlineIndicatorSizes[size],
+        online ? styles.online : styles.offline,
+      ]}
+    />
+  );
 };
 
 const useStyles = () => {

package/src/contexts/channelAddMembersContext/ChannelAddMembersContext.tsx

@@ -1,31 +1,62 @@
-import React, { PropsWithChildren, useContext, useState } from 'react';
+import React, { PropsWithChildren, useContext, useMemo, useState } from 'react';
 
 import { UserSearchSource } from 'stream-chat';
 
 import { useChatContext } from '..';
+import { NotificationTargetProvider } from '../../components/Notifications/NotificationTargetContext';
+import { useChannelActions } from '../../hooks/actions/useChannelActions';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { SelectionStore } from '../../state-store/selection-store';
+import { useChannelDetailsContext } from '../channelDetailsContext/channelDetailsContext';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export type ChannelAddMembersContextValue = {
   selectionStore: SelectionStore;
   searchSource: UserSearchSource;
+  /**
+   * Adds the currently selected members to the channel. Resolves on success and
+   * rejects if the request fails.
+   */
+  submit: () => Promise<void>;
 };
 
+/**
+ * Props for the {@link ChannelAddMembersProvider} that seed the add-members
+ * configuration into the context.
+ */
+export type ChannelAddMembersProviderProps = PropsWithChildren<{
+  /**
+   * A custom `UserSearchSource` used to query and paginate the users to add.
+   * Overrides the source the provider creates by default (pre-configured to
+   * autocomplete by `name`). The provider uses it as-is, so the consumer owns
+   * its activation/sorting.
+   */
+  searchSource?: UserSearchSource;
+}>;
+
 export const ChannelAddMembersContext = React.createContext(
   DEFAULT_BASE_CONTEXT_VALUE as ChannelAddMembersContextValue,
 );
 
 /**
- * @experimental This API is experimental and is subject to change.
+ * Builds the {@link ChannelAddMembersContextValue}. Rendered inside the
+ * {@link NotificationTargetProvider} so that notifications emitted by `submit`
+ * (via {@link useChannelActions}) resolve to the add-members host.
  */
-export const ChannelAddMembersProvider = ({ children }: PropsWithChildren<unknown>) => {
+const ChannelAddMembersContextProviderInner = ({
+  children,
+  searchSource: searchSourceProp,
+}: ChannelAddMembersProviderProps) => {
   const { client } = useChatContext();
+  const { channel } = useChannelDetailsContext();
+  const { addMembers } = useChannelActions(channel);
   const [selectionStore] = useState(() => new SelectionStore());
   const [searchSource] = useState(() => {
+    // A custom source is used as-is; the consumer owns its activation/sorting.
+    if (searchSourceProp) {
+      return searchSourceProp;
+    }
     const source = new UserSearchSource(
       client,
       { pageSize: 25, allowEmptySearchString: true, resetOnNewSearchQuery: false },
@@ -48,16 +79,49 @@ export const ChannelAddMembersProvider = ({ children }: PropsWithChildren<unknow
     return source;
   });
 
+  const submit = useStableCallback(async () => {
+    const ids = Array.from(selectionStore.state.getLatestValue().selectedIds);
+    let failed = false;
+    let firstError: unknown;
+    await addMembers(ids, {
+      onFailure: (error) => {
+        failed = true;
+        firstError = error;
+      },
+    });
+    if (failed) {
+      throw firstError;
+    }
+  });
+
+  const value = useMemo(
+    () => ({ selectionStore, searchSource, submit }),
+    [selectionStore, searchSource, submit],
+  );
+
   return (
-    <ChannelAddMembersContext.Provider value={{ selectionStore, searchSource }}>
-      {children}
-    </ChannelAddMembersContext.Provider>
+    <ChannelAddMembersContext.Provider value={value}>{children}</ChannelAddMembersContext.Provider>
+  );
+};
+
+export const ChannelAddMembersProvider = ({
+  children,
+  searchSource,
+}: ChannelAddMembersProviderProps) => {
+  const { channel } = useChannelDetailsContext();
+
+  return (
+    <NotificationTargetProvider
+      hostId={`channel-add-members:${channel.cid}`}
+      panel='channel-details'
+    >
+      <ChannelAddMembersContextProviderInner searchSource={searchSource}>
+        {children}
+      </ChannelAddMembersContextProviderInner>
+    </NotificationTargetProvider>
   );
 };
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export const useChannelAddMembersContext = () => {
   const contextValue = useContext(
     ChannelAddMembersContext,

package/src/contexts/channelDetailsContext/channelDetailsContext.tsx

@@ -1,35 +1,40 @@
-import React, { PropsWithChildren, useContext } from 'react';
+import React, { PropsWithChildren, useCallback, useContext, useMemo, useState } from 'react';
 
-import { ChannelDetailsProps } from '../../components';
+import type { Channel } from 'stream-chat';
 
+import { SignalStore } from '../../state-store/signal-store';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
-export type ChannelDetailsContextValue = ChannelDetailsProps;
+export type ChannelDetailsContextValue = {
+  channel: Channel;
+  /**
+   * Signals all ChannelDetails modals to close themselves.
+   */
+  closeModals: () => void;
+  signalStore: SignalStore;
+};
 export const ChannelDetailsContext = React.createContext(
   DEFAULT_BASE_CONTEXT_VALUE as ChannelDetailsContextValue,
 );
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export const ChannelDetailsContextProvider = ({
+  channel,
   children,
-  value,
 }: PropsWithChildren<{
-  value: ChannelDetailsContextValue;
-}>) => (
-  <ChannelDetailsContext.Provider value={value as unknown as ChannelDetailsContextValue}>
-    {children}
-  </ChannelDetailsContext.Provider>
-);
+  channel: Channel;
+}>) => {
+  const [signalStore] = useState(() => new SignalStore());
+  const closeModals = useCallback(() => signalStore.signal(), [signalStore]);
+
+  const value = useMemo(
+    () => ({ channel, closeModals, signalStore }),
+    [channel, closeModals, signalStore],
+  );
+
+  return <ChannelDetailsContext.Provider value={value}>{children}</ChannelDetailsContext.Provider>;
+};
 
-/**
- * @experimental This API is experimental and is subject to change.
- */
 export const useChannelDetailsContext = () => {
   const contextValue = useContext(ChannelDetailsContext) as unknown as ChannelDetailsContextValue;