chore: adjust MessageReactionsDetail to match design spec

[arnautov-anton]

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.

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.

[github-actions]

Size Change: +254 B (+0.03%)

Total Size: 775 kB

Filename	Size	Change
./dist/cjs/index.js	238 kB	+112 B (+0.05%)
./dist/css/index.css	47.7 kB	+29 B (+0.06%)
./dist/es/index.mjs	237 kB	+113 B (+0.05%)

ℹ️ View Unchanged

Filename	Size
./dist/cjs/audioProcessing.js	1.32 kB
./dist/cjs/emojis.js	2.96 kB
./dist/cjs/mp3-encoder.js	1.27 kB
./dist/cjs/WithAudioPlayback.js	89 kB
./dist/css/v2/emoji-mart.css	1.84 kB
./dist/css/v2/emoji-replacement.css	300 B
./dist/css/v2/index.css	39.4 kB
./dist/css/v2/index.layout.css	22.8 kB
./dist/es/audioProcessing.mjs	1.31 kB
./dist/es/emojis.mjs	2.48 kB
./dist/es/mp3-encoder.mjs	756 B
./dist/es/WithAudioPlayback.mjs	88.7 kB

_{compressed-size-action}

[codecov]

Codecov Report

❌ Patch coverage is 70.37037% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 79.23%. Comparing base (91eba1b) to head (a9fd1ad).
⚠️ Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
...rc/components/Reactions/MessageReactionsDetail.tsx	68.18%	7 Missing ⚠️
src/components/Reactions/MessageReactions.tsx	50.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3065   +/-   ##
=======================================
  Coverage   79.23%   79.23%           
=======================================
  Files         426      426           
  Lines       12221    12234   +13     
  Branches     3912     3918    +6     
=======================================
+ Hits         9683     9694   +11     
- Misses       2538     2540    +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[oliverlaz]

I'm not sure if this is a good idea, as this shows bad integrations one by one instead of all at once.
What do you think?

[arnautov-anton]

I'm more inclined to remove these altogether as you shouldn't get a warning if you decide to use this hook in a component that can comfortably live in multiple contexts:

const HybridComponent = () => {
    const context1 = useChannelListContext();
    const context2 = useChannelStateContext();
   
    const channels: Channel[] = context1?.channels ?? [context2.channel] ?? [];
    
    return ...
}

[arnautov-anton]

This is an example but now we do have hooks that do something similar and now these hooks produce irrelevant warnings.

[MartinCupela]

I am removing the warning in my PR for context menu animations

[oliverlaz]

ok, good to completely remove the warning too.