chore: adjust MessageReactionsDetail to match design spec (#3065)

## New Exports

### `MessageReactionsDetailLoadingIndicator`

New exported component from `stream-chat-react`. Renders a skeleton
loading state (3 placeholder items) for the reactions detail user list.
Can be used standalone or as a replacement via
`ComponentContext.LoadingIndicator`.

```tsx
import { MessageReactionsDetailLoadingIndicator } from 'stream-chat-react';
```

## Behavioral Changes

### `MessageReactionsDetail` — reaction type filter is now toggleable

Clicking an already-selected reaction type in the detail view now
**deselects** it (sets the filter to `null`), showing all reactions.
Previously, clicking the active type was a no-op.

### `MessageReactionsDetail` — reaction emoji shown per user row

When no reaction type filter is active (`selectedReactionType ===
null`), each user row in the detail list now displays the emoji icon for
the reaction type that user sent. This uses `reactionOptions` from
`ComponentContext`.

### `MessageReactionsDetail` — uses `ComponentContext.reactionOptions`

The component now reads `reactionOptions` from `ComponentContext` to
resolve emoji components for individual reaction rows.

### `useFetchReactions` — fetches all reactions when `reactionType` is
`null`

Previously, the hook short-circuited and skipped fetching when
`reactionType` was `null`. It now proceeds with the fetch, passing
`undefined` to the handler, which retrieves all reaction types. This is
what enables the "show all reactions" view.

### `MessageReactions` — `aria-pressed`/`aria-expanded` on clustered
reaction button

The clustered reactions list button now includes an `aria-pressed` and
`aria-expanded` attribute reflecting whether the reactions detail dialog
is open. Improves accessibility for screen readers.

### `useChannelListContext` — warning throttled to single emission

The console warning emitted when `useChannelListContext` is called
outside its provider is now limited to **one occurrence** (module-level
counter). Previously, every call without a provider triggered the
warning, which could flood the console.

Additionally, the warning is now **suppressed entirely** when
`componentName` is not provided.

Author: arnautov-anton

src/components/Reactions/MessageReactions.tsx

@@ -25,7 +25,7 @@ import type {
   ReactionsComparator,
   ReactionType,
 } from './types';
-import { DialogAnchor, useDialogOnNearestManager } from '../Dialog';
+import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
 
 export type MessageReactionsProps = Partial<
   Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>
@@ -103,6 +103,7 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
   const divRef = useRef<ComponentRef<'div'>>(null);
   const dialogId = `message-reactions-detail-${message.id}`;
   const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
+  const isDialogOpen = useDialogIsOpen(dialogId, dialogManager?.id);
 
   const handleReactionButtonClick = (reactionType: ReactionType | null) => {
     if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
@@ -149,6 +150,8 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
         role='figure'
       >
         <FragmentOrButton
+          aria-expanded={isDialogOpen}
+          aria-pressed={isDialogOpen}
           buttonIf={visualStyle === 'clustered'}
           className='str-chat__message-reactions__list-button'
           onClick={() =>
@@ -187,11 +190,7 @@ const UnMemoizedMessageReactions = (props: MessageReactionsProps) => {
               <li className='str-chat__message-reactions__list-item str-chat__message-reactions__list-item--more'>
                 <button
                   className='str-chat__message-reactions__list-item-button'
-                  onClick={() =>
-                    handleReactionButtonClick(
-                      existingReactions.at(-1)?.reactionType ?? null,
-                    )
-                  }
+                  onClick={() => handleReactionButtonClick(null)}
                 >
                   <span className='str-chat__message-reactions__overflow-count'>
                     +{totalReactionCount - cappedExistingReactions.reactionCountToDisplay}

src/components/Reactions/MessageReactionsDetail.tsx

@@ -12,6 +12,7 @@ import {
   useTranslationContext,
 } from '../../context';
 import type { ReactionSort } from 'stream-chat';
+import { defaultReactionOptions } from './reactionOptions';
 
 export type MessageReactionsDetailProps = Partial<
   Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>
@@ -27,6 +28,21 @@ export type MessageReactionsDetailProps = Partial<
 
 const defaultReactionDetailsSort = { created_at: -1 } as const;
 
+export const MessageReactionsDetailLoadingIndicator = () => {
+  const elements = useMemo(
+    () =>
+      Array.from({ length: 3 }, (_, index) => (
+        <div className='str-chat__message-reactions-detail__skeleton-item' key={index}>
+          <div className='str-chat__message-reactions-detail__skeleton-avatar' />
+          <div className='str-chat__message-reactions-detail__skeleton-line' />
+        </div>
+      )),
+    [],
+  );
+
+  return <>{elements}</>;
+};
+
 export function MessageReactionsDetail({
   handleFetchReactions,
   onSelectedReactionTypeChange,
@@ -37,7 +53,11 @@ export function MessageReactionsDetail({
   totalReactionCount,
 }: MessageReactionsDetailProps) {
   const { client } = useChatContext();
-  const { Avatar = DefaultAvatar } = useComponentContext(MessageReactionsDetail.name);
+  const {
+    Avatar = DefaultAvatar,
+    LoadingIndicator = MessageReactionsDetailLoadingIndicator,
+    reactionOptions = defaultReactionOptions,
+  } = useComponentContext(MessageReactionsDetail.name);
   const { t } = useTranslationContext();
 
   const {
@@ -73,7 +93,7 @@ export function MessageReactionsDetail({
   return (
     <div
       className='str-chat__message-reactions-detail'
-      data-testid='reactions-list-modal'
+      data-testid='message-reactions-detail'
     >
       {typeof totalReactionCount === 'number' && (
         <div className='str-chat__message-reactions-detail__total-count'>
@@ -92,7 +112,11 @@ export function MessageReactionsDetail({
                   <button
                     aria-pressed={reactionType === selectedReactionType}
                     className='str-chat__message-reactions-detail__reaction-type-list-item-button'
-                    onClick={() => onSelectedReactionTypeChange?.(reactionType)}
+                    onClick={() =>
+                      onSelectedReactionTypeChange?.(
+                        selectedReactionType === reactionType ? null : reactionType,
+                      )
+                    }
                   >
                     <span className='str-chat__message-reactions-detail__reaction-type-list-item-icon'>
                       <EmojiComponent />
@@ -115,30 +139,20 @@ export function MessageReactionsDetail({
         className='str-chat__message-reactions-detail__user-list'
         data-testid='all-reacting-users'
       >
-        {areReactionsLoading && (
-          <>
-            <div className='str-chat__message-reactions-detail__skeleton-item'>
-              <div className='str-chat__message-reactions-detail__skeleton-avatar' />
-              <div className='str-chat__message-reactions-detail__skeleton-line' />
-            </div>
-            <div className='str-chat__message-reactions-detail__skeleton-item'>
-              <div className='str-chat__message-reactions-detail__skeleton-avatar' />
-              <div className='str-chat__message-reactions-detail__skeleton-line' />
-            </div>
-            <div className='str-chat__message-reactions-detail__skeleton-item'>
-              <div className='str-chat__message-reactions-detail__skeleton-avatar' />
-              <div className='str-chat__message-reactions-detail__skeleton-line' />
-            </div>
-          </>
-        )}
+        {areReactionsLoading && <LoadingIndicator />}
         {!areReactionsLoading && (
           <>
-            {reactionDetailsWithLegacyFallback.map(({ user }) => {
+            {reactionDetailsWithLegacyFallback.map(({ type, user }) => {
               const belongsToCurrentUser = client.user?.id === user?.id;
+              const EmojiComponent = Array.isArray(reactionOptions)
+                ? undefined
+                : (reactionOptions.quick[type]?.Component ??
+                  reactionOptions.extended?.[type]?.Component);
+
               return (
                 <div
                   className='str-chat__message-reactions-detail__user-list-item'
-                  key={user?.id}
+                  key={`${user?.id}-${type}`}
                 >
                   <Avatar
                     className='str-chat__avatar--with-border'
@@ -154,20 +168,22 @@ export function MessageReactionsDetail({
                     >
                       {belongsToCurrentUser ? t('You') : user?.name || user?.id}
                     </span>
-                    {belongsToCurrentUser && selectedReactionType && (
+                    {belongsToCurrentUser && (
                       <button
                         className='str-chat__message-reactions-detail__user-list-item-button'
                         data-testid='remove-reaction-button'
-                        onClick={(e) => {
-                          contextHandleReaction(selectedReactionType, e).then(() => {
-                            refetch();
-                          });
+                        onClick={async (e) => {
+                          await contextHandleReaction(type, e);
+                          refetch();
                         }}
                       >
                         {t('Tap to remove')}
                       </button>
                     )}
                   </div>
+                  <span className='str-chat__message-reactions-detail__user-list-item-icon'>
+                    {EmojiComponent && !selectedReactionType && <EmojiComponent />}
+                  </span>
                 </div>
               );
             })}

src/components/Reactions/ReactionSelectorWithButton.tsx

@@ -1,4 +1,4 @@
-import type { ElementRef } from 'react';
+import type { ComponentRef } from 'react';
 import React, { useRef } from 'react';
 import { ReactionSelector as DefaultReactionSelector } from './ReactionSelector';
 import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
@@ -27,7 +27,7 @@ export const ReactionSelectorWithButton = ({
   const { isMyMessage, message, threadList } = useMessageContext('MessageOptions');
   const { ReactionSelector = DefaultReactionSelector } =
     useComponentContext('MessageOptions');
-  const buttonRef = useRef<ElementRef<'button'>>(null);
+  const buttonRef = useRef<ComponentRef<'button'>>(null);
   const dialogId = DefaultReactionSelector.getDialogId({
     messageId: message.id,
     threadList,

src/components/Reactions/__tests__/MessageReactionsDetail.test.tsx

@@ -104,7 +104,7 @@ describe('MessageReactionsDetail', () => {
       reactions,
     });
 
-    expect(getByTestId('reactions-list-modal')).toBeInTheDocument();
+    expect(getByTestId('message-reactions-detail')).toBeInTheDocument();
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });

src/components/Reactions/hooks/useFetchReactions.ts

@@ -27,7 +27,7 @@ export function useFetchReactions(options: FetchReactionsOptions) {
   const [refetchNonce, setRefetchNonce] = useState<number | null>(null);
 
   useEffect(() => {
-    if (!shouldFetch || !reactionType) {
+    if (!shouldFetch) {
       return;
     }
 
@@ -36,7 +36,7 @@ export function useFetchReactions(options: FetchReactionsOptions) {
     (async () => {
       try {
         setIsLoading(true);
-        const reactions = await handleFetchReactions(reactionType, sort);
+        const reactions = await handleFetchReactions(reactionType ?? undefined, sort);
 
         if (!cancel) {
           setReactions(reactions);

src/components/Reactions/styling/MessageReactionsDetail.scss

@@ -132,10 +132,21 @@
       gap: var(--spacing-xs);
       padding-inline: calc(var(--spacing-sm) + var(--spacing-xxs));
 
+      .str-chat__message-reactions-detail__user-list-item-icon {
+        font-size: 14px;
+        line-height: 20px;
+        font-family: system-ui;
+        font-style: normal;
+        letter-spacing: 0;
+        display: flex;
+      }
+
       .str-chat__message-reactions-detail__user-list-item-info {
         display: flex;
         flex-direction: column;
         gap: var(--spacing-xxxs);
+        flex-grow: 1;
+        min-width: 0;
 
         .str-chat__message-reactions-detail__user-list-item-username {
           color: var(--text-primary);
@@ -149,6 +160,7 @@
           color: var(--text-tertiary);
           font: var(--str-chat__metadata-default-text);
           cursor: pointer;
+          align-self: flex-start;
         }
       }
     }