stream-chat-react 12.10.0 → 12.11.1

package/dist/components/Poll/PollCreationDialog/OptionFieldSet.js

@@ -6,7 +6,7 @@ import { FieldError } from '../../Form/FieldError';
 import { DragAndDropContainer } from '../../DragAndDrop/DragAndDropContainer';
 import { useTranslationContext } from '../../../context';
 const VALIDATION_ERRORS = { 'Option already exists': true };
-export const OptionFieldSet = ({ errors, options, setErrors, setState }) => {
+export const OptionFieldSet = ({ errors, options, setErrors, setState, }) => {
     const { t } = useTranslationContext('OptionFieldSet');
     const findOptionDuplicate = (sourceOption) => {
         const isDuplicateFilter = (option) => !!sourceOption.text.trim() && // do not include empty options into consideration
@@ -15,7 +15,10 @@ export const OptionFieldSet = ({ errors, options, setErrors, setState }) => {
         return options.find(isDuplicateFilter);
     };
     const onSetNewOrder = useCallback((newOrder) => {
-        setState((prev) => ({ ...prev, options: newOrder.map((index) => prev.options[index]) }));
+        setState((prev) => ({
+            ...prev,
+            options: newOrder.map((index) => prev.options[index]),
+        }));
     }, [setState]);
     const draggable = options.length > 1;
     return (React.createElement("fieldset", { className: 'str-chat__form__field str-chat__form__input-fieldset' },
@@ -38,7 +41,9 @@ export const OptionFieldSet = ({ errors, options, setErrors, setState }) => {
                             const shouldAddEmptyOption = prev.options.length < MAX_POLL_OPTIONS &&
                                 (!prev.options ||
                                     (prev.options.slice(i + 1).length === 0 && !!e.target.value));
-                            const shouldRemoveOption = prev.options && prev.options.slice(i + 1).length > 0 && !e.target.value;
+                            const shouldRemoveOption = prev.options &&
+                                prev.options.slice(i + 1).length > 0 &&
+                                !e.target.value;
                             const optionListHead = prev.options ? prev.options.slice(0, i) : [];
                             const optionListTail = shouldAddEmptyOption
                                 ? [{ id: nanoid(), text: '' }]
@@ -55,7 +60,9 @@ export const OptionFieldSet = ({ errors, options, setErrors, setState }) => {
                                 ...prev,
                                 options: [
                                     ...optionListHead,
-                                    ...(shouldRemoveOption ? [] : [{ ...option, text: e.target.value }]),
+                                    ...(shouldRemoveOption
+                                        ? []
+                                        : [{ ...option, text: e.target.value }]),
                                     ...optionListTail,
                                 ],
                             };

package/dist/components/Poll/PollCreationDialog/PollCreationDialog.js

@@ -64,20 +64,29 @@ export const PollCreationDialog = ({ close }) => {
                         React.createElement("div", { className: clsx('str-chat__form__input-field__value') },
                             React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-max-votes-allowed-input-field-error', text: multipleAnswerCountError }),
                             React.createElement("input", { id: 'max_votes_allowed', onChange: (e) => {
-                                    const isValidValue = !e.target.value || e.target.value.match(VALID_MAX_VOTES_VALUE_REGEX);
+                                    const isValidValue = !e.target.value ||
+                                        e.target.value.match(VALID_MAX_VOTES_VALUE_REGEX);
                                     if (!isValidValue) {
                                         setMultipleAnswerCountError(t('Type a number from 2 to 10'));
                                     }
                                     else if (multipleAnswerCountError) {
                                         setMultipleAnswerCountError(undefined);
                                     }
-                                    setState((prev) => ({ ...prev, max_votes_allowed: e.target.value }));
+                                    setState((prev) => ({
+                                        ...prev,
+                                        max_votes_allowed: e.target.value,
+                                    }));
                                 }, placeholder: t('Maximum number of votes (from 2 to 10)'), type: 'number', value: state.max_votes_allowed }))))),
                 React.createElement(SimpleSwitchField, { checked: state.voting_visibility === 'anonymous', id: 'voting_visibility', labelText: t('Anonymous poll'), onChange: (e) => setState((prev) => ({
                         ...prev,
-                        voting_visibility: (e.target.checked ? 'anonymous' : 'public'),
+                        voting_visibility: (e.target.checked
+                            ? 'anonymous'
+                            : 'public'),
+                    })) }),
+                React.createElement(SimpleSwitchField, { checked: state.allow_user_suggested_options, id: 'allow_user_suggested_options', labelText: t('Allow option suggestion'), onChange: (e) => setState((prev) => ({
+                        ...prev,
+                        allow_user_suggested_options: e.target.checked,
                     })) }),
-                React.createElement(SimpleSwitchField, { checked: state.allow_user_suggested_options, id: 'allow_user_suggested_options', labelText: t('Allow option suggestion'), onChange: (e) => setState((prev) => ({ ...prev, allow_user_suggested_options: e.target.checked })) }),
                 React.createElement(SimpleSwitchField, { checked: state.allow_answers, id: 'allow_answers', labelText: t('Allow comments'), onChange: (e) => setState((prev) => ({ ...prev, allow_answers: e.target.checked })) }))),
         React.createElement(PollCreationDialogControls, { close: close, errors: [
                 ...(nameError ?? []),

package/dist/components/Poll/PollCreationDialog/PollCreationDialogControls.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { VALID_MAX_VOTES_VALUE_REGEX } from '../constants';
-import { useChatContext, useMessageInputContext, useTranslationContext } from '../../../context';
+import { useChatContext, useMessageInputContext, useTranslationContext, } from '../../../context';
 export const PollCreationDialogControls = ({ close, errors, state, }) => {
     const { client } = useChatContext();
     const { t } = useTranslationContext('PollCreationDialogControls');
@@ -10,7 +10,8 @@ export const PollCreationDialogControls = ({ close, errors, state, }) => {
         const hasName = !!state.name;
         const maxVotesAllowedNumber = parseInt(state.max_votes_allowed?.match(VALID_MAX_VOTES_VALUE_REGEX)?.[0] || '');
         const validMaxVotesAllowed = state.max_votes_allowed === '' ||
-            (!!maxVotesAllowedNumber && (2 <= maxVotesAllowedNumber || maxVotesAllowedNumber <= 10));
+            (!!maxVotesAllowedNumber &&
+                (2 <= maxVotesAllowedNumber || maxVotesAllowedNumber <= 10));
         const noErrors = errors.length === 0;
         return hasAtLeastOneOption && hasName && validMaxVotesAllowed && noErrors;
     };
@@ -24,7 +25,9 @@ export const PollCreationDialogControls = ({ close, errors, state, }) => {
                         max_votes_allowed: state.max_votes_allowed
                             ? parseInt(state.max_votes_allowed)
                             : undefined,
-                        options: state.options?.filter((o) => o.text).map((o) => ({ text: o.text })),
+                        options: state.options
+                            ?.filter((o) => o.text)
+                            .map((o) => ({ text: o.text })),
                     });
                     pollId = poll.id;
                 }

package/dist/components/Poll/PollOptionList.js

@@ -5,7 +5,7 @@ import { useStateStore } from '../../store';
 import { useComponentContext, usePollContext } from '../../context';
 const pollStateSelector = (nextValue) => ({ options: nextValue.options });
 export const PollOptionList = ({ optionsDisplayCount, }) => {
-    const { PollOptionSelector = DefaultPollOptionSelector, } = useComponentContext();
+    const { PollOptionSelector = DefaultPollOptionSelector } = useComponentContext();
     const { poll } = usePollContext();
     const { options } = useStateStore(poll.state, pollStateSelector);
     return (React.createElement("div", { className: clsx('str-chat__poll-option-list', {

package/dist/components/Poll/PollOptionSelector.js

@@ -24,7 +24,9 @@ export const PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbos
     const { poll } = usePollContext();
     const { is_closed, latest_votes_by_option, maxVotedOptionIds, ownVotesByOptionId, vote_counts_by_option, voting_visibility, } = useStateStore(poll.state, pollStateSelector);
     const canCastVote = channelCapabilities['cast-poll-vote'] && !is_closed;
-    const winningOptionCount = maxVotedOptionIds[0] ? vote_counts_by_option[maxVotedOptionIds[0]] : 0;
+    const winningOptionCount = maxVotedOptionIds[0]
+        ? vote_counts_by_option[maxVotedOptionIds[0]]
+        : 0;
     const toggleVote = useMemo(() => debounce(() => {
         if (!canCastVote)
             return;
@@ -45,9 +47,14 @@ export const PollOptionSelector = ({ displayAvatarCount, option, voteCountVerbos
                     .slice(0, displayAvatarCount)
                     .map(({ user }) => (React.createElement(Avatar, { image: user?.image, key: `poll-option-${option.id}-avatar-${user?.id}`, name: user?.name }))))),
             React.createElement("div", { className: 'str-chat__poll-option-vote-count' }, voteCountVerbose
-                ? t('{{count}} votes', { count: vote_counts_by_option[option.id] ?? 0 })
-                : vote_counts_by_option[option.id] ?? 0)),
-        React.createElement(AmountBar, { amount: (winningOptionCount && (vote_counts_by_option[option.id] ?? 0) / winningOptionCount) * 100, className: clsx('str-chat__poll-option__votes-bar', {
-                'str-chat__poll-option__votes-bar--winner': is_closed && maxVotedOptionIds.length === 1 && maxVotedOptionIds[0] === option.id,
+                ? t('{{count}} votes', {
+                    count: vote_counts_by_option[option.id] ?? 0,
+                })
+                : (vote_counts_by_option[option.id] ?? 0))),
+        React.createElement(AmountBar, { amount: (winningOptionCount &&
+                (vote_counts_by_option[option.id] ?? 0) / winningOptionCount) * 100, className: clsx('str-chat__poll-option__votes-bar', {
+                'str-chat__poll-option__votes-bar--winner': is_closed &&
+                    maxVotedOptionIds.length === 1 &&
+                    maxVotedOptionIds[0] === option.id,
             }) })));
 };

package/dist/components/Poll/hooks/useManagePollVotesRealtime.js

@@ -11,16 +11,21 @@ export function useManagePollVotesRealtime(managedVoteType, cursorPaginatorState
                 return;
             const isAnswer = isVoteAnswer(event.poll_vote);
             if ((managedVoteType === 'answer' && !isAnswer) ||
-                (managedVoteType === 'vote' && (isAnswer || event.poll_vote.option_id !== optionId)))
+                (managedVoteType === 'vote' &&
+                    (isAnswer || event.poll_vote.option_id !== optionId)))
                 return;
             if (event.type === 'poll.vote_removed') {
-                setVotesInRealtime((prev) => event.poll_vote ? prev.filter((vote) => vote.id !== event.poll_vote.id) : prev);
+                setVotesInRealtime((prev) => event.poll_vote
+                    ? prev.filter((vote) => vote.id !== event.poll_vote.id)
+                    : prev);
             }
             if (event.type === 'poll.vote_changed') {
-                setVotesInRealtime((prev) => event.poll_vote ? prev.filter((vote) => vote.id !== event.poll_vote.id) : prev);
+                setVotesInRealtime((prev) => event.poll_vote
+                    ? prev.filter((vote) => vote.id !== event.poll_vote.id)
+                    : prev);
             }
             if (['poll.vote_casted', 'poll.vote_changed'].includes(event.type)) {
-                setVotesInRealtime((prev) => (event.poll_vote ? [event.poll_vote, ...prev] : prev));
+                setVotesInRealtime((prev) => event.poll_vote ? [event.poll_vote, ...prev] : prev);
             }
         };
         const voteCastedSubscription = client.on('poll.vote_casted', handleVoteEvent);

package/dist/components/Poll/hooks/usePollAnswerPagination.js

@@ -3,13 +3,19 @@ import { useManagePollVotesRealtime } from './useManagePollVotesRealtime';
 import { useCursorPaginator, } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
 import { usePollContext } from '../../../context';
 import { useStateStore } from '../../../store';
-const paginationStateSelector = (state) => [state.error, state.hasNextPage, state.loading];
+const paginationStateSelector = (state) => [
+    state.error,
+    state.hasNextPage,
+    state.loading,
+];
 export const usePollAnswerPagination = ({ paginationParams } = {}) => {
     const { poll } = usePollContext();
     const paginationFn = useCallback(async (next) => {
         const { next: newNext, votes } = await poll.queryAnswers({
             filter: paginationParams?.filter,
-            options: !next ? paginationParams?.options : { ...paginationParams?.options, next },
+            options: !next
+                ? paginationParams?.options
+                : { ...paginationParams?.options, next },
             sort: { created_at: -1, ...paginationParams?.sort },
         });
         return { items: votes, next: newNext };

package/dist/components/Poll/hooks/usePollOptionVotesPagination.js

@@ -3,13 +3,19 @@ import { useManagePollVotesRealtime } from './useManagePollVotesRealtime';
 import { useCursorPaginator, } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
 import { useStateStore } from '../../../store';
 import { usePollContext } from '../../../context';
-const paginationStateSelector = (state) => [state.error, state.hasNextPage, state.loading];
+const paginationStateSelector = (state) => [
+    state.error,
+    state.hasNextPage,
+    state.loading,
+];
 export const usePollOptionVotesPagination = ({ paginationParams, }) => {
     const { poll } = usePollContext();
     const paginationFn = useCallback(async (next) => {
         const { next: newNext, votes } = await poll.queryOptionVotes({
             filter: paginationParams.filter,
-            options: !next ? paginationParams?.options : { ...paginationParams?.options, next },
+            options: !next
+                ? paginationParams?.options
+                : { ...paginationParams?.options, next },
             sort: { created_at: -1, ...paginationParams?.sort },
         });
         return { items: votes, next: newNext };

package/dist/components/ReactFileUtilities/FileIcon/mimeTypes.d.ts

@@ -1,5 +1,5 @@
 export type GeneralType = 'audio/' | 'video/' | 'image/' | 'text/';
-export type SupportedMimeType = typeof wordMimeTypes[number] | typeof excelMimeTypes[number] | typeof powerpointMimeTypes[number] | typeof archiveFileTypes[number] | typeof codeFileTypes[number];
+export type SupportedMimeType = (typeof wordMimeTypes)[number] | (typeof excelMimeTypes)[number] | (typeof powerpointMimeTypes)[number] | (typeof archiveFileTypes)[number] | (typeof codeFileTypes)[number];
 export declare const wordMimeTypes: string[];
 export declare const excelMimeTypes: string[];
 export declare const powerpointMimeTypes: string[];

package/dist/components/ReactFileUtilities/ImageDropzone.js

@@ -12,7 +12,9 @@ export const ImageDropzone = ({ accept: acceptedFiles = [], children, disabled,
             handleFiles(accepted);
         }
     }, [handleFiles]);
-    const accept = useMemo(() => (typeof acceptedFiles === 'string' ? acceptedFiles.split(',') : acceptedFiles).reduce((mediaTypeMap, mediaType) => {
+    const accept = useMemo(() => (typeof acceptedFiles === 'string'
+        ? acceptedFiles.split(',')
+        : acceptedFiles).reduce((mediaTypeMap, mediaType) => {
         mediaTypeMap[mediaType] ?? (mediaTypeMap[mediaType] = []);
         return mediaTypeMap;
     }, {}), [acceptedFiles]);

package/dist/components/ReactFileUtilities/UploadButton.js

@@ -14,7 +14,7 @@ export const FileInput = UploadButton;
 export const UploadFileInput = forwardRef(function UploadFileInput({ className, onFileChange: onFileChangeCustom, ...props }, ref) {
     const { t } = useTranslationContext('UploadFileInput');
     const { acceptedFiles = [], multipleUploads } = useChannelStateContext('UploadFileInput');
-    const { isUploadEnabled, maxFilesLeft, uploadNewFiles, } = useMessageInputContext('UploadFileInput');
+    const { isUploadEnabled, maxFilesLeft, uploadNewFiles } = useMessageInputContext('UploadFileInput');
     const id = useMemo(() => nanoid(), []);
     const onFileChange = useCallback((files) => {
         uploadNewFiles(files);

package/dist/components/ReactFileUtilities/utils.js

@@ -74,7 +74,9 @@ async function getImageSource(fileLikes, src) {
     fileLikes.push(blob);
 }
 const extractImageSources = (s) => {
-    const imageTags = new DOMParser().parseFromString(s, 'text/html').getElementsByTagName('img');
+    const imageTags = new DOMParser()
+        .parseFromString(s, 'text/html')
+        .getElementsByTagName('img');
     return Array.from(imageTags, (tag) => tag.src).filter((tag) => tag);
 };
 export const isBlobButNotFile = (obj) => obj instanceof Blob && !(obj instanceof File);

package/dist/components/Reactions/ReactionSelector.js

@@ -36,7 +36,9 @@ const UnMemoizedReactionSelector = (props) => {
             return;
         const tooltip = tooltipRef.current?.getBoundingClientRect();
         const target = targetRef.current?.getBoundingClientRect();
-        const container = isMutableRef(rootRef) ? rootRef.current?.getBoundingClientRect() : null;
+        const container = isMutableRef(rootRef)
+            ? rootRef.current?.getBoundingClientRect()
+            : null;
         if (!tooltip || !target || !container)
             return;
         const tooltipPosition = tooltip.width === container.width || tooltip.x < container.x

package/dist/components/Reactions/ReactionSelectorWithButton.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { ReactionSelector as DefaultReactionSelector } from './ReactionSelector';
 import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
-import { useComponentContext, useMessageContext, useTranslationContext } from '../../context';
+import { useComponentContext, useMessageContext, useTranslationContext, } from '../../context';
 /**
  * Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents
  * cluttering the parent component.

package/dist/components/Reactions/ReactionsList.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
+import { MessageContextValue } from '../../context';
 import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
 import type { ReactionDetailsComparator, ReactionsComparator } from './types';
-import { MessageContextValue } from '../../context';
 export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
     /** An array of the own reaction objects to distinguish own reactions visually */
     own_reactions?: ReactionResponse<StreamChatGenerics>[];
@@ -26,7 +26,7 @@ export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGener
     /** Comparator function to sort the list of reacted users
      * @deprecated use `reactionDetailsSort` instead
      */
-    sortReactionDetails?: ReactionDetailsComparator;
+    sortReactionDetails?: ReactionDetailsComparator<StreamChatGenerics>;
     /** Comparator function to sort reactions, defaults to chronological order */
     sortReactions?: ReactionsComparator;
 };

package/dist/components/Reactions/ReactionsList.js

@@ -1,14 +1,17 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
+import { ReactionsListModal as DefaultReactionsListModal, } from './ReactionsListModal';
 import { useProcessReactions } from './hooks/useProcessReactions';
-import { ReactionsListModal } from './ReactionsListModal';
-import { useTranslationContext } from '../../context';
+import { useComponentContext, useTranslationContext, } from '../../context';
 import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
 const UnMemoizedReactionsList = (props) => {
-    const { handleFetchReactions, reactionDetailsSort, reverse = false, sortReactionDetails, ...rest } = props;
+    const { handleFetchReactions, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    reactionDetailsSort, reverse = false, sortReactionDetails, ...rest } = props;
     const { existingReactions, hasReactions, totalReactionCount } = useProcessReactions(rest);
-    const [selectedReactionType, setSelectedReactionType,] = useState(null);
+    const [selectedReactionType, setSelectedReactionType] = useState(null);
     const { t } = useTranslationContext('ReactionsList');
+    const { ReactionsListModal = DefaultReactionsListModal } = useComponentContext();
     const handleReactionButtonClick = (reactionType) => {
         if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
             return;

package/dist/components/Reactions/ReactionsListModal.d.ts

@@ -4,7 +4,7 @@ import { ModalProps } from '../Modal';
 import { MessageContextValue } from '../../context';
 import { DefaultStreamChatGenerics } from '../../types/types';
 import { ReactionSort } from 'stream-chat';
-type ReactionsListModalProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ModalProps & Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
+export type ReactionsListModalProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = ModalProps & Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
     reactions: ReactionSummary[];
     selectedReactionType: ReactionType<StreamChatGenerics>;
     onSelectedReactionTypeChange?: (reactionType: ReactionType<StreamChatGenerics>) => void;
@@ -13,4 +13,3 @@ type ReactionsListModalProps<StreamChatGenerics extends DefaultStreamChatGeneric
     sortReactionDetails?: ReactionDetailsComparator<StreamChatGenerics>;
 };
 export declare function ReactionsListModal<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ handleFetchReactions, onSelectedReactionTypeChange, reactionDetailsSort: propReactionDetailsSort, reactions, selectedReactionType, sortReactionDetails: propSortReactionDetails, ...modalProps }: ReactionsListModalProps<StreamChatGenerics>): React.JSX.Element;
-export {};

package/dist/components/Reactions/ReactionsListModal.js

@@ -12,7 +12,7 @@ export function ReactionsListModal({ handleFetchReactions, onSelectedReactionTyp
     const { reactionDetailsSort: contextReactionDetailsSort, sortReactionDetails: contextSortReactionDetails, } = useMessageContext('ReactionsListModal');
     const legacySortReactionDetails = propSortReactionDetails ?? contextSortReactionDetails;
     const reactionDetailsSort = propReactionDetailsSort ?? contextReactionDetailsSort ?? defaultReactionDetailsSort;
-    const { isLoading: areReactionsLoading, reactions: reactionDetails, } = useFetchReactions({
+    const { isLoading: areReactionsLoading, reactions: reactionDetails } = useFetchReactions({
         handleFetchReactions,
         reactionType: selectedReactionType,
         shouldFetch: modalProps.open,

package/dist/components/Reactions/SpriteImage.js

@@ -15,8 +15,12 @@ export const SpriteImage = ({ columns, fallback, height, position, rows, spriteU
             '--str-chat__sprite-image-resize-ratio-y': 'calc(var(--str-chat__sprite-image-height) / var(--str-chat__sprite-item-height))',
             '--str-chat__sprite-item-height': `${spriteHeight / rows}`,
             '--str-chat__sprite-item-width': `${spriteWidth / columns}`,
-            ...(Number.isFinite(height) ? { '--str-chat__sprite-image-height': `${height}px` } : {}),
-            ...(Number.isFinite(width) ? { '--str-chat__sprite-image-width': `${width}px` } : {}),
+            ...(Number.isFinite(height)
+                ? { '--str-chat__sprite-image-height': `${height}px` }
+                : {}),
+            ...(Number.isFinite(width)
+                ? { '--str-chat__sprite-image-width': `${width}px` }
+                : {}),
             backgroundImage: `url('${spriteUrl}')`,
             backgroundPosition: `${x * (100 / (columns - 1))}% ${y * (100 / (rows - 1))}%`,
             backgroundSize: `${columns * 100}% ${rows * 100}%`,

package/dist/components/Reactions/hooks/useFetchReactions.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useMessageContext } from '../../../context';
 export function useFetchReactions(options) {
-    const { handleFetchReactions: contextHandleFetchReactions, } = useMessageContext('useFetchReactions');
+    const { handleFetchReactions: contextHandleFetchReactions } = useMessageContext('useFetchReactions');
     const [reactions, setReactions] = useState([]);
     const { handleFetchReactions: propHandleFetchReactions, reactionType, shouldFetch, sort, } = options;
     const [isLoading, setIsLoading] = useState(shouldFetch);

package/dist/components/Reactions/hooks/useProcessReactions.js

@@ -10,7 +10,7 @@ export const defaultReactionsSort = (a, b) => {
 export const useProcessReactions = (params) => {
     const { own_reactions: propOwnReactions, reaction_groups: propReactionGroups, reactionOptions: propReactionOptions, reactions: propReactions, sortReactions: propSortReactions, } = params;
     const { message, sortReactions: contextSortReactions } = useMessageContext('useProcessReactions');
-    const { reactionOptions: contextReactionOptions = defaultReactionOptions, } = useComponentContext('useProcessReactions');
+    const { reactionOptions: contextReactionOptions = defaultReactionOptions } = useComponentContext('useProcessReactions');
     const reactionOptions = propReactionOptions ?? contextReactionOptions;
     const sortReactions = propSortReactions ?? contextSortReactions ?? defaultReactionsSort;
     const latestReactions = propReactions || message.latest_reactions;

package/dist/components/Reactions/index.d.ts

@@ -1,5 +1,6 @@
 export * from './ReactionSelector';
 export * from './ReactionsList';
+export * from './ReactionsListModal';
 export * from './SimpleReactionsList';
 export * from './SpriteImage';
 export * from './StreamEmoji';

package/dist/components/Reactions/index.js

@@ -1,5 +1,6 @@
 export * from './ReactionSelector';
 export * from './ReactionsList';
+export * from './ReactionsListModal';
 export * from './SimpleReactionsList';
 export * from './SpriteImage';
 export * from './StreamEmoji';

package/dist/components/Reactions/reactionOptions.js

@@ -1,11 +1,26 @@
 /* eslint-disable sort-keys */
-/* eslint-disable react/display-name */
 import React from 'react';
 import { StreamEmoji } from './StreamEmoji';
 export const defaultReactionOptions = [
-    { type: 'haha', Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE02', type: 'haha' }), name: 'Joy' },
-    { type: 'like', Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDC4D', type: 'like' }), name: 'Thumbs up' },
-    { type: 'love', Component: () => React.createElement(StreamEmoji, { fallback: '\u2764\uFE0F', type: 'love' }), name: 'Heart' },
+    {
+        type: 'haha',
+        Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE02', type: 'haha' }),
+        name: 'Joy',
+    },
+    {
+        type: 'like',
+        Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDC4D', type: 'like' }),
+        name: 'Thumbs up',
+    },
+    {
+        type: 'love',
+        Component: () => React.createElement(StreamEmoji, { fallback: '\u2764\uFE0F', type: 'love' }),
+        name: 'Heart',
+    },
     { type: 'sad', Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE14', type: 'sad' }), name: 'Sad' },
-    { type: 'wow', Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE32', type: 'wow' }), name: 'Astonished' },
+    {
+        type: 'wow',
+        Component: () => React.createElement(StreamEmoji, { fallback: '\uD83D\uDE32', type: 'wow' }),
+        name: 'Astonished',
+    },
 ];

package/dist/components/Thread/Thread.js

@@ -34,7 +34,7 @@ const ThreadInner = (props) => {
     const { thread, threadHasMore, threadLoadingMore, threadMessages = [], threadSuppressAutoscroll, } = useChannelStateContext('Thread');
     const { closeThread, loadMoreThread } = useChannelActionContext('Thread');
     const { customClasses } = useChatContext('Thread');
-    const { ThreadInput: ContextInput, Message: ContextMessage, ThreadHead = DefaultThreadHead, ThreadHeader = DefaultThreadHeader, VirtualMessage, } = useComponentContext('Thread');
+    const { Message: ContextMessage, ThreadHead = DefaultThreadHead, ThreadHeader = DefaultThreadHeader, ThreadInput: ContextInput, VirtualMessage, } = useComponentContext('Thread');
     const ThreadInput = PropInput ?? additionalMessageInputProps?.Input ?? ContextInput ?? MessageInputFlat;
     const ThreadMessage = PropMessage || additionalMessageListProps?.Message;
     const FallbackMessage = virtualized && VirtualMessage ? VirtualMessage : ContextMessage;
@@ -45,7 +45,6 @@ const ThreadInner = (props) => {
             // FIXME: integrators can customize channel query options but cannot customize channel.getReplies() options
             loadMoreThread();
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [thread, loadMoreThread]);
     const threadProps = threadInstance
         ? {
@@ -71,6 +70,8 @@ const ThreadInner = (props) => {
     const head = (React.createElement(ThreadHead, { key: messageAsThread.id, message: messageAsThread, Message: MessageUIComponent, ...additionalParentMessageProps }));
     return (React.createElement("div", { className: threadClass },
         React.createElement(ThreadHeader, { closeThread: closeThread, thread: messageAsThread }),
-        React.createElement(ThreadMessageList, { disableDateSeparator: !enableDateSeparator, head: head, Message: MessageUIComponent, messageActions: messageActions, suppressAutoscroll: threadSuppressAutoscroll, threadList: true, ...threadProps, ...(virtualized ? additionalVirtualizedMessageListProps : additionalMessageListProps) }),
+        React.createElement(ThreadMessageList, { disableDateSeparator: !enableDateSeparator, head: head, Message: MessageUIComponent, messageActions: messageActions, suppressAutoscroll: threadSuppressAutoscroll, threadList: true, ...threadProps, ...(virtualized
+                ? additionalVirtualizedMessageListProps
+                : additionalMessageListProps) }),
         React.createElement(MessageInput, { focus: autoFocus, Input: ThreadInput, isThreadInput: true, parent: thread ?? parentMessage, publishTypingEvent: false, ...additionalMessageInputProps })));
 };

package/dist/components/Threads/ThreadContext.d.ts

@@ -4,6 +4,6 @@ import { Thread } from 'stream-chat';
 export type ThreadContextValue = Thread | undefined;
 export declare const ThreadContext: React.Context<ThreadContextValue>;
 export declare const useThreadContext: () => Thread<import("stream-chat").DefaultGenerics> | undefined;
-export declare const ThreadProvider: ({ children, thread }: PropsWithChildren<{
+export declare const ThreadProvider: ({ children, thread, }: PropsWithChildren<{
     thread?: Thread;
 }>) => React.JSX.Element;

package/dist/components/Threads/ThreadContext.js

@@ -5,5 +5,5 @@ export const useThreadContext = () => {
     const thread = useContext(ThreadContext);
     return thread ?? undefined;
 };
-export const ThreadProvider = ({ children, thread }) => (React.createElement(ThreadContext.Provider, { value: thread },
+export const ThreadProvider = ({ children, thread, }) => (React.createElement(ThreadContext.Provider, { value: thread },
     React.createElement(Channel, { channel: thread?.channel }, children)));

package/dist/components/Threads/ThreadList/ThreadList.js

@@ -29,7 +29,7 @@ export const useThreadList = () => {
 };
 export const ThreadList = ({ virtuosoProps }) => {
     const { client } = useChatContext();
-    const { ThreadListItem = DefaultThreadListItem, ThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder, ThreadListLoadingIndicator = DefaultThreadListLoadingIndicator, ThreadListUnseenThreadsBanner = DefaultThreadListUnseenThreadsBanner, } = useComponentContext();
+    const { ThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder, ThreadListItem = DefaultThreadListItem, ThreadListLoadingIndicator = DefaultThreadListLoadingIndicator, ThreadListUnseenThreadsBanner = DefaultThreadListUnseenThreadsBanner, } = useComponentContext();
     const { threads } = useStateStore(client.threads.state, selector);
     useThreadList();
     return (React.createElement("div", { className: 'str-chat__thread-list-container' },

package/dist/components/Threads/ThreadList/ThreadListItem.d.ts

@@ -6,4 +6,4 @@ export type ThreadListItemProps = {
     threadListItemUIProps?: ThreadListItemUIProps;
 };
 export declare const useThreadListItemContext: () => Thread<import("stream-chat").DefaultGenerics> | undefined;
-export declare const ThreadListItem: ({ thread, threadListItemUIProps }: ThreadListItemProps) => React.JSX.Element;
+export declare const ThreadListItem: ({ thread, threadListItemUIProps, }: ThreadListItemProps) => React.JSX.Element;

package/dist/components/Threads/ThreadList/ThreadListItem.js

@@ -3,7 +3,7 @@ import { useComponentContext } from '../../../context';
 import { ThreadListItemUI as DefaultThreadListItemUI } from './ThreadListItemUI';
 const ThreadListItemContext = createContext(undefined);
 export const useThreadListItemContext = () => useContext(ThreadListItemContext);
-export const ThreadListItem = ({ thread, threadListItemUIProps }) => {
+export const ThreadListItem = ({ thread, threadListItemUIProps, }) => {
     const { ThreadListItemUI = DefaultThreadListItemUI } = useComponentContext();
     return (React.createElement(ThreadListItemContext.Provider, { value: thread },
         React.createElement(ThreadListItemUI, { ...threadListItemUIProps })));

package/dist/components/Threads/ThreadList/ThreadListItemUI.js

@@ -26,8 +26,7 @@ const getTitleFromMessage = ({ currentUserId, message, }) => {
     let attachmentIcon = '';
     if (attachment) {
         attachmentIcon +=
-            attachmentTypeIconMap[attachment.type ?? 'file'] ??
-                attachmentTypeIconMap.file;
+            attachmentTypeIconMap[attachment.type ?? 'file'] ?? attachmentTypeIconMap.file;
     }
     const messageBelongsToCurrentUser = message?.user?.id === currentUserId;
     if (message?.deleted_at && message.parent_id)
@@ -69,7 +68,10 @@ export const ThreadListItemUI = (props) => {
                 React.createElement("div", { className: 'str-chat__thread-list-item__latest-reply-text-and-timestamp' },
                     React.createElement("div", { className: 'str-chat__thread-list-item__latest-reply-text' }, deletedAt
                         ? 'This thread was deleted'
-                        : getTitleFromMessage({ currentUserId: client.user?.id, message: latestReply })),
+                        : getTitleFromMessage({
+                            currentUserId: client.user?.id,
+                            message: latestReply,
+                        })),
                     React.createElement("div", { className: 'str-chat__thread-list-item__latest-reply-timestamp' },
                         React.createElement(Timestamp, { timestamp: deletedAt ?? latestReply?.created_at })))))));
 };

package/dist/components/Threads/icons.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/display-name */
 import React from 'react';
 // TODO: unify icons across SDK
 export const Icon = {

package/dist/components/Tooltip/Tooltip.d.ts

@@ -11,4 +11,4 @@ export type PopperTooltipProps<T extends HTMLElement> = React.PropsWithChildren<
     /** Tells component whether to render its contents */
     visible?: boolean;
 }>;
-export declare const PopperTooltip: <T extends HTMLElement>({ children, offset, referenceElement, placement, visible, }: PopperTooltipProps<T>) => React.JSX.Element | null;
+export declare const PopperTooltip: <T extends HTMLElement>({ children, offset, placement, referenceElement, visible, }: PopperTooltipProps<T>) => React.JSX.Element | null;

package/dist/components/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { usePopper } from 'react-popper';
 export const Tooltip = ({ children, ...rest }) => (React.createElement("div", { className: 'str-chat__tooltip', ...rest }, children));
-export const PopperTooltip = ({ children, offset = [0, 10], referenceElement, placement = 'top', visible = false, }) => {
+export const PopperTooltip = ({ children, offset = [0, 10], placement = 'top', referenceElement, visible = false, }) => {
     const [popperElement, setPopperElement] = useState(null);
     const { attributes, styles } = usePopper(referenceElement, popperElement, {
         modifiers: [

package/dist/context/ComponentContext.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LinkPreviewListProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, SuggestionItemProps, SuggestionListProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
+import { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LinkPreviewListProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListModalProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, SuggestionItemProps, SuggestionListProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
 import type { CustomTrigger, DefaultStreamChatGenerics, PropsWithChildrenOnly, UnknownType } from '../types/types';
 import type { StopAIGenerationButtonProps } from '../components/MessageInput/StopAIGenerationButton';
 export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, V extends CustomTrigger = CustomTrigger> = {
@@ -105,6 +105,8 @@ export type ComponentContextValue<StreamChatGenerics extends DefaultStreamChatGe
     ReactionSelector?: React.ForwardRefExoticComponent<ReactionSelectorProps<StreamChatGenerics>>;
     /** Custom UI component to display the list of reactions on a message, defaults to and accepts same props as: [ReactionsList](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsList.tsx) */
     ReactionsList?: React.ComponentType<ReactionsListProps<StreamChatGenerics>>;
+    /** Custom UI component to display the reactions modal, defaults to and accepts same props as: [ReactionsListModal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Reactions/ReactionsListModal.tsx) */
+    ReactionsListModal?: React.ComponentType<ReactionsListModalProps<StreamChatGenerics>>;
     RecordingPermissionDeniedNotification?: React.ComponentType<RecordingPermissionDeniedNotificationProps>;
     /** Custom UI component for send button, defaults to and accepts same props as: [SendButton](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
     SendButton?: React.ComponentType<SendButtonProps<StreamChatGenerics>>;

package/dist/context/ComponentContext.js

@@ -5,7 +5,7 @@ export const useComponentContext = (
 /**
  * @deprecated
  */
-// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 _componentName) => useContext(ComponentContext);
 /**
  * Typescript currently does not support partial inference, so if ComponentContext

package/dist/context/DialogManagerContext.d.ts

@@ -3,7 +3,7 @@ import { DialogManager } from '../components/Dialog/DialogManager';
 type DialogManagerProviderContextValue = {
     dialogManager: DialogManager;
 };
-export declare const DialogManagerProvider: ({ children, id }: PropsWithChildren<{
+export declare const DialogManagerProvider: ({ children, id, }: PropsWithChildren<{
     id?: string;
 }>) => React.JSX.Element;
 export declare const useDialogManager: () => DialogManagerProviderContextValue;