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

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

@@ -9,9 +9,11 @@ import { useChannelMembersState } from '../../ChannelList/hooks/useChannelMember
 import { useChannelOnlineMemberCount } from '../../ChannelList/hooks/useChannelOnlineMemberCount';
 
 /**
- * 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')`.
+ * Resolves the status line shown under the channel title: "Online" for a direct chat whose other
+ * member is online, an empty string when offline, and the member and online counts for a group.
+ *
+ * @param channel The channel.
+ * @returns The translated status text.
  */
 export const useChannelDetailsMemberStatusText = (channel: Channel): string => {
   const { t } = useTranslationContext();
@@ -22,7 +24,7 @@ export const useChannelDetailsMemberStatusText = (channel: Channel): string => {
 
   return useMemo(() => {
     if (isDirect) {
-      const ownUserId = channel.getClient().userID;
+      const ownUserId = channel.getClient().userId;
       const otherMember = Object.values(members).find((member) => member.user?.id !== ownUserId);
       return otherMember?.user?.online ? t('common.presence.online.label', 'Online') : '';
     }

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

@@ -7,9 +7,8 @@ import { asDynamicKey } from '../../../i18n/utils';
 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.
+ * Identifies a navigation row: one of the built-in sections or, for rows added through
+ * `getNavigationItems`, any string.
  */
 export type ChannelDetailsNavigationSectionType =
   | 'pinned-messages'
@@ -17,27 +16,21 @@ export type ChannelDetailsNavigationSectionType =
   | 'files'
   | string;
 
-/**
- * A single row in the channel details navigation section.
- */
+/** A row in the channel details navigation section. */
 export type ChannelDetailsNavigationItem = {
-  /** Icon rendered at the start of the row and reused in the built-in modal header. */
+  /** Icon at the start of the row, reused in the built-in modal header. */
   Icon: React.ComponentType<IconProps>;
-  /** Already-translated label rendered for the row and its built-in modal header. */
+  /** Translated label of the row, reused in the built-in modal header. */
   label: string;
-  /** Identifies which built-in section this row represents. */
+  /** The section this row represents. */
   section: ChannelDetailsNavigationSectionType;
-  /**
-   * Fired when the user taps the row. Leave unset to keep the built-in behavior (opening the
-   * built-in modal for the section); set it to route the row somewhere else (e.g. your own screen).
-   */
+  /** Fired when the row is tapped. When unset, the row opens the built-in modal for its section. */
   onPress?: () => void;
 };
 
 /**
- * Maps each navigation section to the icon (by its key in the components-context icons map) and
- * (translatable) label rendered for its row and, when opened, its modal header. The declaration
- * order also drives the order of the rendered rows.
+ * Maps each built-in section to its icon (a key of the components-context icons map) and label key.
+ * The declaration order is the order of the rows.
  */
 const SECTION_CONFIG: Record<
   'pinned-messages' | 'photos-and-videos' | 'files',
@@ -58,11 +51,9 @@ export type ChannelDetailsNavigationItemsContext = {
 };
 
 /**
- * Customizes the navigation rows rendered by `ChannelDetailsNavigationSection`. Receives the
- * built-in `defaultItems` (and a `context`) and returns the items to render. Map over
- * `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.
+ * Customizes the rows rendered by `ChannelDetailsNavigationSection`. Receives the built-in
+ * `defaultItems` (and a `context`) and returns the rows to render. Set a row's `onPress` to route
+ * it elsewhere, or add and remove rows. A row without `onPress` opens the built-in modal.
  */
 export type GetChannelDetailsNavigationItems = (params: {
   context: ChannelDetailsNavigationItemsContext;
@@ -74,10 +65,11 @@ export const getChannelDetailsNavigationItems: GetChannelDetailsNavigationItems
 }) => defaultItems;
 
 /**
- * Builds the navigation rows rendered by `ChannelDetailsNavigationSection`. Returns the items as a
- * 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}).
+ * Builds the rows rendered by `ChannelDetailsNavigationSection`, customized by
+ * {@link GetChannelDetailsNavigationItems}.
+ *
+ * @param params.getNavigationItems Customizes the default rows.
+ * @returns The navigation rows.
  */
 export const useChannelDetailsNavigationItems = ({
   getNavigationItems = getChannelDetailsNavigationItems,
@@ -93,7 +85,7 @@ export const useChannelDetailsNavigationItems = ({
     () =>
       SECTIONS.map((section) => {
         const { icon, label } = SECTION_CONFIG[section];
-        // `label` comes from SECTION_CONFIG, so the key is a runtime value here.
+        // The label key comes from `SECTION_CONFIG`, so it is only known at runtime.
         return { Icon: icons[icon], label: t(asDynamicKey(label)), section };
       }),
     [icons, t],

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

@@ -9,29 +9,23 @@ import { compressedImageURI } from '../../../utils/compressImage';
 
 export type UseEditChannelImageResult = {
   /**
-   * Open the device's native image picker and return a single picked image
-   * with the compression configured on `ChannelDetails` already applied
-   * to its `uri`. Returns `undefined` if the user cancels or denies access.
+   * Opens the native image picker and resolves to the picked image, with `compressImageQuality`
+   * applied to its `uri`, or `undefined` when the user cancels or denies access.
    */
   pickImageFromNativePicker: () => Promise<File | undefined>;
   /**
-   * Launch the device's camera and return the captured image. Returns
-   * `undefined` if the user cancels or denies access. The native camera
-   * handler already honors `compressImageQuality`, so no extra compression
-   * pass is needed for camera files.
+   * Opens the camera and resolves to the captured image, or `undefined` when the user cancels or
+   * denies access. The native camera handler applies `compressImageQuality` itself.
    */
   takePhoto: () => Promise<File | undefined>;
 };
 
 /**
- * Hook that exposes the two image-acquisition flows used by the channel edit
- * screen — camera capture and native gallery pick — using the same control
- * flow and compression behavior as the message composer (`takeAndUploadImage`
- * and `pickAndUploadImageFromNativePicker` in `MessageInputContext`). The
- * hook intentionally does NOT upload the picked file; the consumer receives a
- * `File` and decides what to do with it.
+ * The image acquisition flows of the channel edit screen: camera capture and native gallery pick.
+ * Neither uploads the file; the caller receives it. Reads `compressImageQuality` from
+ * `ChannelEditDetailsContext`.
  *
- * Reads `compressImageQuality` from `ChannelEditDetailsContext`.
+ * @returns The `takePhoto` and `pickImageFromNativePicker` functions.
  */
 export const useEditChannelImage = (): UseEditChannelImageResult => {
   const { compressImageQuality } = useChannelEditDetailsContext();
@@ -46,7 +40,10 @@ export const useEditChannelImage = (): UseEditChannelImageResult => {
     if (file.askToOpenSettings) {
       Alert.alert(
         t('common.cameraPermission.title', 'Allow camera access in device settings'),
-        t('common.cameraPermission.text', 'Device camera is used to take photos or videos.'),
+        t(
+          'channelDetails.editImageSheet.cameraPermission.text',
+          'The camera is used to take the channel image.',
+        ),
         [
           { style: 'cancel', text: t('common.cancel.label', 'Cancel') },
           {
@@ -73,8 +70,8 @@ export const useEditChannelImage = (): UseEditChannelImageResult => {
       Alert.alert(
         t('common.galleryPermission.title', 'Allow access to your Gallery'),
         t(
-          'common.galleryPermission.text',
-          'Device gallery permissions is used to take photos or videos.',
+          'channelDetails.editImageSheet.galleryPermission.text',
+          'Gallery access is used to choose the channel image.',
         ),
         [
           { style: 'cancel', text: t('common.cancel.label', 'Cancel') },

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

@@ -13,20 +13,19 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { getDateString } from '../../../i18n/utils';
 
 /**
- * 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.
+ * A file or audio attachment with its message. A message with several file attachments yields one
+ * tile per attachment.
  */
 export type FileAttachmentTile = { attachment: Attachment; message: MessageResponse };
 
 export type FileAttachmentSection = { data: FileAttachmentTile[]; title: string };
 
-/**
- * Gathers the file/audio attachments from a message, excluding scraped/OG link-preview content.
- */
+// File and audio attachments of a message, excluding scraped link previews.
 const getFileAttachments = (message: MessageResponse): Attachment[] =>
   (message.attachments ?? []).filter(
     (attachment) =>
-      // We provide mime_type here to avoid attachments with mime_type being categorized as file
+      // The attachment's own `mime_type` is passed as a supported video format so that attachments
+      // carrying one are not classified as files.
       (isFileAttachment(
         attachment,
         attachment?.custom?.mime_type ? [attachment.custom.mime_type] : [],
@@ -36,14 +35,12 @@ const getFileAttachments = (message: MessageResponse): Attachment[] =>
   );
 
 /**
- * Gathers and filters the file/audio attachments from a list of messages, then groups them into
- * newest-first month sections for the file attachment list. Each section's `data` is a flat list
- * of `{ attachment, message }` tiles; messages without renderable file attachments are skipped.
+ * Groups the file and audio attachments of the messages into month sections, in message order.
+ * Messages without file attachments are skipped. The month title follows the configured locale and
+ * can be customized through the `timestamp.FileAttachmentListSection` translation key.
  *
- * The month label is produced through the shared `getDateString` + translation-key
- * pipeline used by message timestamps (see `useUserActivityStatus`), so the format
- * follows the configured locale and can be customized via the
- * `timestamp/FileAttachmentListSection` translation key.
+ * @param messages The messages to gather attachments from.
+ * @returns The sections, each with a title and its `{ attachment, message }` tiles.
  */
 export const useFileAttachmentListSections = (
   messages?: MessageResponse[],

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

@@ -5,18 +5,15 @@ import { type Attachment, isScrapedContent, type MessageResponse } from 'stream-
 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.
+ * An image or video attachment with its message. A message with several media attachments yields
+ * one tile per attachment.
  */
 export type MediaTile = {
   attachment: Attachment;
   message: MessageResponse;
 };
 
-/**
- * Flattens search-result messages into one tile per renderable image/video attachment, applying
- * the same attachment rules the message list uses to decide what counts as gallery media.
- */
+// One tile per image or video attachment, excluding scraped link previews.
 const getMediaTiles = (messages: MessageResponse[] | undefined): MediaTile[] => {
   if (!messages) {
     return [];
@@ -39,9 +36,11 @@ 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.
+ * Flattens the messages into one tile per image or video attachment. Scraped link previews and
+ * other attachment types are excluded.
+ *
+ * @param messages The messages to gather attachments from.
+ * @returns The media tiles.
  */
 export const useMediaList = (messages?: MessageResponse[]): MediaTile[] =>
   useMemo(() => getMediaTiles(messages), [messages]);

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

@@ -8,14 +8,12 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { getDateString } from '../../../i18n/utils';
 
 /**
- * Returns the localized presence status string for a user:
- *   - `t('Online')` when `user.online === true`
- *   - `t('timestamp/UserActivityStatus')` (e.g. "Last seen 10 minutes ago") when offline
- *     with a valid `last_active`
- *   - `t('Offline')` otherwise (including `user === undefined` or an unparseable date)
+ * Returns the localized presence status of a user: "Online", a last-seen time such as "Last seen
+ * 10 minutes ago" (the `timestamp.UserActivityStatus` translation key) when offline with a known
+ * `last_active`, and "Offline" otherwise.
  *
- * The relative time is produced through the shared `getDateString` + translation-key
- * pipeline used by message timestamps, so the format follows the configured locale.
+ * @param user The user.
+ * @returns The translated status text.
  */
 export const useUserActivityStatus = (user?: UserResponse): string => {
   const { t, tDateTimeParser } = useTranslationContext();

package/src/components/ChannelList/ChannelList.tsx

@@ -36,13 +36,14 @@ export type ChannelListProps = Partial<
     | 'pinnedStatusPosition'
   >
 > & {
-  /** Optional function to filter channels prior to rendering the list. Do not use any complex logic that would delay the loading of the ChannelList. We recommend using a pure function with array methods like filter/sort/reduce. */
+  /**
+   * Filters the channels before they render. It runs on every render, so use a cheap pure function.
+   */
   channelRenderFilterFn?: (channels: Array<Channel>) => Array<Channel>;
   /**
-   * The `ChannelPaginator` this list renders. The app creates it with the list's filters, sort and
-   * request options, and registers it on `client.channelManager` with `insertPaginator` so it receives
-   * events. The list loads its first page when it has none and never disposes it, so a list that
-   * mounts again shows the channels it already has.
+   * The `ChannelPaginator` this list renders. The app creates it with the filters, sort and request
+   * options, and registers it with `client.channelManager.insertPaginator` so it receives events.
+   * The list loads the first page when there is none and never disposes the paginator.
    */
   paginator: ChannelPaginator;
   notificationHostId?: string;
@@ -51,8 +52,8 @@ export type ChannelListProps = Partial<
 const DEFAULT_ADDITIONAL_FLAT_LIST_PROPS: Partial<FlatListProps<Channel>> = {};
 
 /**
- * Renders the channels of an app-owned `ChannelPaginator` and lets the user select one to open.
- * The ChannelList renders a ChannelListView which provides the UI for the underlying React Native FlatList.
+ * Renders the channels of an app-owned `ChannelPaginator` and lets the user select one to open,
+ * through a `ChannelListView`.
  *
  * @example ./ChannelList.md
  */
@@ -80,7 +81,7 @@ export const ChannelList = (props: ChannelListProps) => {
   const channelManager = client.channelManager;
   const { NotificationList } = useComponentsContext();
 
-  // Ref-counted on the shared manager: subscriptions live only while at least one ChannelList is mounted.
+  // Ref-counted on the shared manager: subscriptions live while at least one list is mounted.
   useEffect(() => channelManager.registerSubscriptions(), [channelManager]);
 
   const {

package/src/components/ChannelList/ChannelListView.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo } from 'react';
-// RNGR's FlatList ist currently breaking the pull-to-refresh behaviour on Android
-// See https://github.com/software-mansion/react-native-gesture-handler/issues/598
+// The gesture handler's FlatList breaks pull-to-refresh on Android.
 import { FlatList, StyleSheet, View } from 'react-native';
 
 import type { Channel } from 'stream-chat';
@@ -17,44 +16,27 @@ import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
 import { useNetworkConnectionState } from '../Chat/hooks/useNetworkConnectionState';
 import { useSettledWSConnectionHealth } from '../Chat/hooks/useWSConnectionState';
 
-/**
- * The list's query state, passed down by `ChannelList`.
- */
+/** The list's query state, passed down by `ChannelList`. */
 export type ChannelListState = {
-  /**
-   * A control prop used to determine whether the first query of the channel list has succeeded.
-   */
+  /** Whether the first page of channels has loaded. */
   channelListInitialized: boolean;
-  /**
-   * The channels to render.
-   */
+  /** The channels to render. */
   channels: Channel[] | null;
-  /**
-   * Whether or not the FlatList has another page to render
-   */
+  /** Whether another page of channels can be loaded. */
   hasNextPage: boolean;
-  /**
-   * Initial channels query loading state, triggers the LoadingIndicator
-   */
+  /** Whether the initial channels query is loading, which shows the loading indicator. */
   loadingChannels: boolean;
-  /**
-   * Whether or not additional channels are being loaded, triggers the
-   * ChannelListFooterLoadingIndicator
-   */
+  /** Whether the next page is loading, which shows `ChannelListFooterLoadingIndicator`. */
   loadingNextPage: boolean;
-  /**
-   * Triggered when the channel list is refreshing, displays a loading spinner at the top of the list
-   */
+  /** Whether a pull-to-refresh is in progress, shown as a spinner at the top of the list. */
   refreshing: boolean;
-  /**
-   * Error in channels query, if any
-   */
+  /** Error of the channels query, if any. */
   error?: Error;
 };
 
 export type ChannelListViewPropsWithContext = Omit<
   ChannelsContextValue,
-  'maxUnreadCount' | 'numberOfSkeletons' | 'onSelect'
+  'maxUnreadCount' | 'numberOfSkeletons' | 'onSelect' | 'paginator'
 > &
   ChannelListState;
 
@@ -73,8 +55,8 @@ const StatusIndicator = ({
     return null;
   }
 
-  // `=== false` for the network (unknown must not read as offline), plain falsy for the socket
-  // (always a boolean).
+  // `=== false` for the network, as an unknown status must not read as offline. The socket status
+  // is always a boolean.
   if (isNetworkOnline === false || !isWSOnline) {
     return (
       <View style={styles.statusIndicator}>
@@ -155,7 +137,7 @@ const ChannelListViewWithContext = (props: ChannelListViewPropsWithContext) => {
         ref={setFlatListRef}
         refreshing={refreshing}
         renderItem={renderItem}
-        // Rows subscribe to their own channel, so a list update re-renders only the cells it changed.
+        // Rows subscribe to their own channel, so a list update re-renders only the changed cells.
         strictMode
         style={styles.flatList}
         testID='channel-list-view'
@@ -172,8 +154,7 @@ export type ChannelListViewProps = Partial<
   ChannelListState;
 
 /**
- * This UI component displays the preview list of channels and handles Channel navigation. It
- * receives all props from the ChannelList component.
+ * The preview list of channels, rendered by `ChannelList` with its state.
  *
  * @example ./ChannelListView.md
  */
@@ -182,7 +163,6 @@ export const ChannelListView = (props: ChannelListViewProps) => {
     additionalFlatListProps,
     loadMoreThreshold,
     loadNextPage,
-    paginator,
     refreshList,
     reloadList,
     setFlatListRef,
@@ -194,7 +174,6 @@ export const ChannelListView = (props: ChannelListViewProps) => {
         additionalFlatListProps,
         loadMoreThreshold,
         loadNextPage,
-        paginator,
         refreshList,
         reloadList,
         setFlatListRef,

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

@@ -62,7 +62,7 @@ const ChannelPreviewComponent = ({ channel }: { channel: ChannelType }) => {
   return (
     <View accessibilityLabel='list-item' testID={channel.id}>
       <Text>{name}</Text>
-      <Text>{channel.messagePaginator.headItems[0]?.text}</Text>
+      <Text>{channel.messagePaginator.latestMessage?.text}</Text>
     </View>
   );
 };
@@ -513,7 +513,7 @@ describe('ChannelList', () => {
     describe('message.new', () => {
       // The message must carry the target channel's `cid`: v10's `MessageIntervalPaginator` filters
       // ingested messages by `cid` (`buildMatchFilters`), so a message without one is dropped and never
-      // reaches the channel's `messagePaginator.headItems` that the preview reads.
+      // reaches the channel's `messagePaginator.anchoredHeadItems` that the preview reads.
       const sendNewMessageOnChannel3 = () => {
         const newMessage = generateMessage({
           cid: testChannel3.channel.cid,
@@ -1084,6 +1084,50 @@ describe('ChannelList', () => {
       executeQuery.mockRestore();
     });
 
+    it('keeps the footer loading indicator while a next page loads', async () => {
+      useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
+      const paginator = createPaginator({ paginatorOptions: { pageSize: 1 } });
+      let loadNextPage: (() => Promise<void>) | undefined;
+      const LoadNextPageProbe = () => {
+        loadNextPage = useChannelsContext().loadNextPage;
+        return null;
+      };
+
+      render(
+        <Chat client={chatClient}>
+          <WithComponents overrides={{ ListHeaderComponent: LoadNextPageProbe }}>
+            <ChannelList paginator={paginator} />
+          </WithComponents>
+        </Chat>,
+      );
+      await waitFor(() => expect(paginator.hasMoreTail).toBe(true));
+
+      useMockedApis(chatClient, [queryChannelsApi([testChannel2])]);
+      const nextPage = new DeferredPromise<void>();
+      const queryChannels = chatClient.queryChannels.bind(chatClient);
+      jest.spyOn(chatClient, 'queryChannels').mockImplementation(async (...args) => {
+        await nextPage.promise;
+        return queryChannels(...args);
+      });
+      act(() => {
+        loadNextPage?.();
+      });
+      expect(screen.getByTestId('channel-list-footer-loading-indicator')).toBeTruthy();
+
+      // FlatList asks again when the footer changes the content length
+      await act(async () => {
+        await loadNextPage?.();
+      });
+      expect(screen.getByTestId('channel-list-footer-loading-indicator')).toBeTruthy();
+
+      await act(async () => {
+        nextPage.resolve();
+        await nextPage.promise;
+      });
+      await waitFor(() => expect(paginator.items).toHaveLength(2));
+      expect(screen.queryByTestId('channel-list-footer-loading-indicator')).toBeNull();
+    });
+
     it('shows the channels it already has when it mounts again, without a query', async () => {
       useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
 

package/src/components/ChannelList/hooks/useChannelMembersState.ts

@@ -6,9 +6,7 @@ import { useStateStore } from '../../../hooks/useStateStore';
 
 type MembersState = { members: Record<string, ChannelMemberResponse> };
 
-/**
- * The fields of a member a caller reads. Define it at module scope, so it stays the same function.
- */
+/** Picks the member fields a caller reads. Define it at module scope to keep it stable. */
 export type ChannelMemberPick = (member: ChannelMemberResponse) => Record<string, unknown>;
 
 const selector = (state: MembersState) => ({
@@ -20,7 +18,7 @@ const isShallowEqual = (a: Record<string, unknown>, b: Record<string, unknown>)
   return keys.length === Object.keys(b).length && keys.every((key) => Object.is(a[key], b[key]));
 };
 
-// keeps the previous members while every member's picked fields are unchanged
+// Keeps the previous members while every member's picked fields are unchanged.
 const createPickedMembersSelector = (pick: ChannelMemberPick) => {
   let previous: { members: MembersState['members']; picked: Record<string, unknown>[] } | undefined;
   return (state: MembersState) => {
@@ -39,16 +37,27 @@ const createPickedMembersSelector = (pick: ChannelMemberPick) => {
 };
 
 /**
- * Returns the channel's members, sourced reactively from `channel.state`.
+ * Returns the channel's members from `channel.state`, updating reactively.
+ *
+ * With `pick`, the members update only when a picked field changes for some member, or when members
+ * join or leave. A presence change swaps in new member objects for that user, so a caller that does
+ * not read `online` should pick what it reads to skip those re-renders.
  *
- * With `pick`, the members update only when one of the picked fields changes for some member, or
- * when members join or leave. A presence change replaces every member object of that user, so a caller
- * that does not read `online` should pick what it reads to skip those re-renders.
+ * @param channel The channel.
+ * @param pick Picks the member fields the caller reads.
+ * @returns The members by user ID.
  */
 export function useChannelMembersState(
   channel: Channel,
   pick?: ChannelMemberPick,
 ): Record<string, ChannelMemberResponse>;
+/**
+ * Same as above for an optional channel, returning `undefined` without one.
+ *
+ * @param channel The channel.
+ * @param pick Picks the member fields the caller reads.
+ * @returns The members by user ID, or `undefined` without a channel.
+ */
 export function useChannelMembersState(
   channel?: Channel,
   pick?: ChannelMemberPick,

package/src/components/ChannelList/hooks/useChannelOnlineMemberCount.ts

@@ -5,10 +5,18 @@ import { useStateStore } from '../../../hooks/useStateStore';
 const selector = (state: { watcherCount: number }) => ({ watcherCount: state.watcherCount });
 
 /**
- * Returns the channel's online (watcher) count, sourced reactively from
- * `channel.state`.
+ * Returns the channel's online (watcher) count from `channel.state`, updating reactively.
+ *
+ * @param channel The channel.
+ * @returns The watcher count.
  */
 export function useChannelOnlineMemberCount(channel: Channel): number;
+/**
+ * Same as above for an optional channel, returning `undefined` without one.
+ *
+ * @param channel The channel.
+ * @returns The watcher count, or `undefined` without a channel.
+ */
 export function useChannelOnlineMemberCount(channel?: Channel): number | undefined;
 export function useChannelOnlineMemberCount(channel?: Channel) {
   return useStateStore(channel?.state, selector)?.watcherCount;

package/src/components/ChannelList/hooks/useMutedChannels.ts

@@ -7,7 +7,10 @@ const selector = (client: StreamChat) => client.mutedChannels;
 const keys: EventType[] = ['health.check', 'notification.channel_mutes_updated'];
 
 /**
- * Returns the current user's muted channels.
+ * Returns the current user's muted channels, updating on `health.check` and
+ * `notification.channel_mutes_updated`.
+ *
+ * @returns The channel mutes.
  */
 export const useMutedChannels = (): Array<ChannelMute> => {
   const { client } = useChatContext();

package/src/components/ChannelList/hooks/useMutedUsers.ts

@@ -6,7 +6,9 @@ import { useStateStore } from '../../../hooks/useStateStore';
 const selector = (state: { mutedUsers: UserMuteResponse[] }) => ({ mutedUsers: state.mutedUsers });
 
 /**
- * Returns the current user's muted users, sourced reactively from `client.mutedUsersStore`.
+ * Returns the current user's muted users from `client.mutedUsersStore`, updating reactively.
+ *
+ * @returns The user mutes.
  */
 export function useMutedUsers(): UserMuteResponse[] {
   const { client } = useChatContext();