stream-chat-react 12.13.1 → 13.0.0-rc.1

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

@@ -1,96 +1,42 @@
-import clsx from 'clsx';
-import { nanoid } from 'nanoid';
-import React, { useState } from 'react';
-import { FieldError } from '../../Form/FieldError';
+import React, { useCallback } from 'react';
+import { VotingVisibility } from 'stream-chat';
+import { MultipleAnswersField } from './MultipleAnswersField';
+import { NameField } from './NameField';
 import { OptionFieldSet } from './OptionFieldSet';
 import { PollCreationDialogControls } from './PollCreationDialogControls';
-import { VALID_MAX_VOTES_VALUE_REGEX } from '../constants';
 import { ModalHeader } from '../../Modal/ModalHeader';
 import { SimpleSwitchField } from '../../Form/SwitchField';
-import { useChatContext, useTranslationContext } from '../../../context';
+import { useMessageComposer } from '../../MessageInput';
+import { useTranslationContext } from '../../../context';
+import { useStateStore } from '../../../store';
+const pollComposerStateSelector = (state) => ({
+    allow_answers: state.data.allow_answers,
+    allow_user_suggested_options: state.data.allow_user_suggested_options,
+    voting_visibility: state.data.voting_visibility,
+});
 export const PollCreationDialog = ({ close }) => {
-    const { client } = useChatContext();
     const { t } = useTranslationContext();
-    const [nameError, setNameError] = useState();
-    const [optionsErrors, setOptionsErrors] = useState({});
-    const [multipleAnswerCountError, setMultipleAnswerCountError] = useState();
-    const [state, setState] = useState(() => ({
-        allow_answers: false,
-        allow_user_suggested_options: false,
-        description: '',
-        enforce_unique_vote: true,
-        id: nanoid(),
-        max_votes_allowed: '',
-        name: '',
-        options: [{ id: nanoid(), text: '' }],
-        user_id: client.user?.id,
-        voting_visibility: 'public',
-    }));
+    const { pollComposer } = useMessageComposer();
+    const { allow_answers, allow_user_suggested_options, voting_visibility } = useStateStore(pollComposer.state, pollComposerStateSelector);
+    const onClose = useCallback(() => {
+        pollComposer.initState();
+        close();
+    }, [pollComposer, close]);
     return (React.createElement("div", { className: 'str-chat__dialog str-chat__poll-creation-dialog', "data-testid": 'poll-creation-dialog' },
-        React.createElement(ModalHeader, { close: close, title: t('Create poll') }),
+        React.createElement(ModalHeader, { close: onClose, title: t('Create poll') }),
         React.createElement("div", { className: 'str-chat__dialog__body' },
             React.createElement("form", { autoComplete: 'off' },
-                React.createElement("div", { className: clsx('str-chat__form__field str-chat__form__input-field str-chat__form__input-field--with-label', {
-                        'str-chat__form__input-field--has-error': nameError,
-                    }) },
-                    React.createElement("label", { className: 'str-chat__form__field-label', htmlFor: 'name' }, t('Question')),
-                    React.createElement("div", { className: clsx('str-chat__form__input-field__value') },
-                        React.createElement(FieldError, { className: 'str-chat__form__input-field__error', "data-testid": 'poll-name-input-field-error', text: nameError }),
-                        React.createElement("input", { id: 'name', onBlur: (e) => {
-                                if (!e.target.value) {
-                                    setNameError('The field is required');
-                                }
-                            }, onChange: (e) => {
-                                setState((prev) => ({ ...prev, name: e.target.value }));
-                                if (nameError && e.target.value) {
-                                    setNameError(undefined);
-                                }
-                            }, placeholder: t('Ask a question'), type: 'text', value: state.name }))),
-                React.createElement(OptionFieldSet, { errors: optionsErrors, options: state.options, setErrors: setOptionsErrors, setState: setState }),
-                React.createElement("div", { className: clsx('str-chat__form__expandable-field', {
-                        'str-chat__form__expandable-field--expanded': !state.enforce_unique_vote,
-                    }) },
-                    React.createElement(SimpleSwitchField, { checked: !state.enforce_unique_vote, id: 'enforce_unique_vote', labelText: t('Multiple answers'), onChange: (e) => {
-                            setState((prev) => ({
-                                ...prev,
-                                enforce_unique_vote: !e.target.checked,
-                                max_votes_allowed: '',
-                            }));
-                            setMultipleAnswerCountError(undefined);
-                        } }),
-                    !state.enforce_unique_vote && (React.createElement("div", { className: clsx('str-chat__form__input-field', {
-                            'str-chat__form__input-field--has-error': multipleAnswerCountError,
-                        }) },
-                        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);
-                                    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,
-                                    }));
-                                }, 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'),
-                    })) }),
-                React.createElement(SimpleSwitchField, { checked: state.allow_user_suggested_options, id: 'allow_user_suggested_options', labelText: t('Allow option suggestion'), onChange: (e) => setState((prev) => ({
-                        ...prev,
+                React.createElement(NameField, null),
+                React.createElement(OptionFieldSet, null),
+                React.createElement(MultipleAnswersField, null),
+                React.createElement(SimpleSwitchField, { checked: voting_visibility === 'anonymous', id: 'voting_visibility', labelText: t('Anonymous poll'), onChange: (e) => pollComposer.updateFields({
+                        voting_visibility: e.target.checked
+                            ? VotingVisibility.anonymous
+                            : VotingVisibility.public,
+                    }) }),
+                React.createElement(SimpleSwitchField, { checked: allow_user_suggested_options, id: 'allow_user_suggested_options', labelText: t('Allow option suggestion'), onChange: (e) => pollComposer.updateFields({
                         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 ?? []),
-                ...(multipleAnswerCountError ?? []),
-                ...Object.keys(optionsErrors),
-            ], state: state })));
+                    }) }),
+                React.createElement(SimpleSwitchField, { checked: allow_answers, id: 'allow_answers', labelText: t('Allow comments'), onChange: (e) => pollComposer.updateFields({ allow_answers: e.target.checked }) }))),
+        React.createElement(PollCreationDialogControls, { close: close })));
 };

package/dist/components/Poll/PollCreationDialog/PollCreationDialogControls.d.ts

@@ -1,8 +1,5 @@
 import React from 'react';
-import type { PollFormState } from './types';
 export type PollCreationDialogControlsProps = {
     close: () => void;
-    errors: string[];
-    state: PollFormState;
 };
-export declare const PollCreationDialogControls: ({ close, errors, state, }: PollCreationDialogControlsProps) => React.JSX.Element;
+export declare const PollCreationDialogControls: ({ close, }: PollCreationDialogControlsProps) => React.JSX.Element;

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

@@ -1,47 +1,21 @@
 import React from 'react';
-import { VALID_MAX_VOTES_VALUE_REGEX } from '../constants';
-import { useChatContext, useMessageInputContext, useTranslationContext, } from '../../../context';
-export const PollCreationDialogControls = ({ close, errors, state, }) => {
-    const { client } = useChatContext();
+import { useCanCreatePoll, useMessageComposer } from '../../MessageInput';
+import { useMessageInputContext, useTranslationContext } from '../../../context';
+export const PollCreationDialogControls = ({ close, }) => {
     const { t } = useTranslationContext('PollCreationDialogControls');
-    const { handleSubmit: handleSubmitMessage } = useMessageInputContext('PollCreationDialogControls');
-    const canSubmit = () => {
-        const hasAtLeastOneOption = state.options.filter((o) => !!o.text).length > 0;
-        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));
-        const noErrors = errors.length === 0;
-        return hasAtLeastOneOption && hasName && validMaxVotesAllowed && noErrors;
-    };
+    const { handleSubmit: handleSubmitMessage } = useMessageInputContext();
+    const messageComposer = useMessageComposer();
+    const canCreatePoll = useCanCreatePoll();
     return (React.createElement("div", { className: 'str-chat__dialog__controls' },
-        React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel', onClick: close }, t('Cancel')),
-        React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--submit', disabled: !canSubmit(), onClick: async (e) => {
-                let pollId;
-                try {
-                    const { poll } = await client.createPoll({
-                        ...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 })),
-                    });
-                    pollId = poll.id;
-                }
-                catch (e) {
-                    // todo: add notification
-                    return;
-                }
-                try {
-                    await handleSubmitMessage(e, { poll_id: pollId });
-                }
-                catch (e) {
-                    // todo: add notification
-                    return;
-                }
+        React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--cancel', onClick: () => {
+                messageComposer.pollComposer.initState();
                 close();
+            } }, t('Cancel')),
+        React.createElement("button", { className: 'str-chat__dialog__controls-button str-chat__dialog__controls-button--submit', disabled: !canCreatePoll, onClick: () => {
+                messageComposer
+                    .createPoll()
+                    .then(() => handleSubmitMessage())
+                    .then(close)
+                    .catch(console.error);
             }, type: 'submit' }, t('Create'))));
 };

package/dist/components/Poll/PollCreationDialog/types.d.ts

@@ -1,21 +1,7 @@
-import type { VotingVisibility } from 'stream-chat';
 type Id = string;
 export type PollOptionFormData = {
     id: Id;
     text: string;
 };
-export type PollFormState = {
-    id: Id;
-    max_votes_allowed: string;
-    name: string;
-    options: PollOptionFormData[];
-    allow_answers?: boolean;
-    allow_user_suggested_options?: boolean;
-    description?: string;
-    enforce_unique_vote?: boolean;
-    is_closed?: boolean;
-    user_id?: string;
-    voting_visibility?: VotingVisibility;
-};
 export type OptionErrors = Record<Id, string>;
 export {};

package/dist/components/Poll/PollHeader.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../types';
-export declare const PollHeader: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element | undefined;
+export declare const PollHeader: () => React.JSX.Element | undefined;

package/dist/components/Poll/PollOptionList.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../types';
 export type PollOptionListProps = {
     optionsDisplayCount?: number;
 };
-export declare const PollOptionList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ optionsDisplayCount, }: PollOptionListProps) => React.JSX.Element;
+export declare const PollOptionList: ({ optionsDisplayCount }: PollOptionListProps) => React.JSX.Element;

package/dist/components/Poll/PollOptionList.js

@@ -3,8 +3,10 @@ import React from 'react';
 import { PollOptionSelector as DefaultPollOptionSelector } from './PollOptionSelector';
 import { useStateStore } from '../../store';
 import { useComponentContext, usePollContext } from '../../context';
-const pollStateSelector = (nextValue) => ({ options: nextValue.options });
-export const PollOptionList = ({ optionsDisplayCount, }) => {
+const pollStateSelector = (nextValue) => ({
+    options: nextValue.options,
+});
+export const PollOptionList = ({ optionsDisplayCount }) => {
     const { PollOptionSelector = DefaultPollOptionSelector } = useComponentContext();
     const { poll } = usePollContext();
     const { options } = useStateStore(poll.state, pollStateSelector);

package/dist/components/Poll/PollOptionSelector.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { PollOption } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types';
 type AmountBarProps = {
     amount: number;
     className?: string;
@@ -10,10 +9,10 @@ export type CheckmarkProps = {
     checked?: boolean;
 };
 export declare const Checkmark: ({ checked }: CheckmarkProps) => React.JSX.Element;
-export type PollOptionSelectorProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    option: PollOption<StreamChatGenerics>;
+export type PollOptionSelectorProps = {
+    option: PollOption;
     displayAvatarCount?: number;
     voteCountVerbose?: boolean;
 };
-export declare const PollOptionSelector: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ displayAvatarCount, option, voteCountVerbose, }: PollOptionSelectorProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const PollOptionSelector: ({ displayAvatarCount, option, voteCountVerbose, }: PollOptionSelectorProps) => React.JSX.Element;
 export {};

package/dist/components/Poll/PollVote.d.ts

@@ -1,12 +1,11 @@
 import React from 'react';
 import type { PollVote as PollVoteType } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../types';
-type PollVoteProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    vote: PollVoteType<StreamChatGenerics>;
+type PollVoteProps = {
+    vote: PollVoteType;
 };
-export declare const PollVote: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ vote, }: PollVoteProps<StreamChatGenerics>) => React.JSX.Element;
-export type PollVoteListingProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    votes: PollVoteType<StreamChatGenerics>[];
+export declare const PollVote: ({ vote }: PollVoteProps) => React.JSX.Element;
+export type PollVoteListingProps = {
+    votes: PollVoteType[];
 };
-export declare const PollVoteListing: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ votes, }: PollVoteListingProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const PollVoteListing: ({ votes }: PollVoteListingProps) => React.JSX.Element;
 export {};

package/dist/components/Poll/PollVote.js

@@ -12,7 +12,7 @@ const PollVoteTimestamp = ({ timestamp }) => {
         t('timestamp/PollVote', { timestamp: timestampDate }),
         React.createElement(PopperTooltip, { offset: [0, 5], placement: 'bottom', referenceElement: referenceElement, visible: tooltipVisible }, t('timestamp/PollVoteTooltip', { timestamp: timestampDate }))));
 };
-const PollVoteAuthor = ({ vote, }) => {
+const PollVoteAuthor = ({ vote }) => {
     const { t } = useTranslationContext();
     const { client } = useChatContext();
     const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers();
@@ -25,7 +25,7 @@ const PollVoteAuthor = ({ vote, }) => {
         React.createElement("div", { className: 'str-chat__poll-vote__author__name' }, displayName),
         React.createElement(PopperTooltip, { offset: [0, 5], placement: 'bottom', referenceElement: referenceElement, visible: tooltipVisible }, displayName)));
 };
-export const PollVote = ({ vote, }) => (React.createElement("div", { className: 'str-chat__poll-vote' },
+export const PollVote = ({ vote }) => (React.createElement("div", { className: 'str-chat__poll-vote' },
     React.createElement(PollVoteAuthor, { vote: vote }),
     React.createElement(PollVoteTimestamp, { timestamp: vote.created_at })));
-export const PollVoteListing = ({ votes, }) => (React.createElement("div", { className: 'str-chat__poll-vote-listing' }, votes.map((vote) => (React.createElement(PollVote, { key: `poll-vote-${vote.id}`, vote: vote })))));
+export const PollVoteListing = ({ votes }) => (React.createElement("div", { className: 'str-chat__poll-vote-listing' }, votes.map((vote) => (React.createElement(PollVote, { key: `poll-vote-${vote.id}`, vote: vote })))));

package/dist/components/Poll/QuotedPoll.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../types';
-export declare const QuotedPoll: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => React.JSX.Element;
+export declare const QuotedPoll: () => React.JSX.Element;

package/dist/components/Poll/constants.d.ts

@@ -1,3 +1,2 @@
 export declare const MAX_POLL_OPTIONS: 100;
-export declare const VALID_MAX_VOTES_VALUE_REGEX: RegExp;
 export declare const MAX_OPTIONS_DISPLAYED: 10;

package/dist/components/Poll/constants.js

@@ -1,3 +1,2 @@
 export const MAX_POLL_OPTIONS = 100;
-export const VALID_MAX_VOTES_VALUE_REGEX = /^([2-9]|10)$/;
 export const MAX_OPTIONS_DISPLAYED = 10;

package/dist/components/Poll/hooks/useManagePollVotesRealtime.d.ts

@@ -1,4 +1,3 @@
 import type { PollAnswer, PollVote } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../types';
-import { CursorPaginatorStateStore } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
-export declare function useManagePollVotesRealtime<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics, T extends PollVote<StreamChatGenerics> | PollAnswer<StreamChatGenerics> = PollVote<StreamChatGenerics>>(managedVoteType: 'answer' | 'vote', cursorPaginatorState?: CursorPaginatorStateStore<T>, optionId?: string): T[];
+import type { CursorPaginatorStateStore } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
+export declare function useManagePollVotesRealtime<T extends PollVote | PollAnswer = PollVote>(managedVoteType: 'answer' | 'vote', cursorPaginatorState?: CursorPaginatorStateStore<T>, optionId?: string): T[];

package/dist/components/Poll/hooks/usePollAnswerPagination.d.ts

@@ -1,10 +1,9 @@
 import type { PollAnswer, PollAnswersQueryParams } from 'stream-chat';
-import type { DefaultStreamChatGenerics } from '../../../types';
 type UsePollAnswerPaginationParams = {
     paginationParams?: PollAnswersQueryParams;
 };
-export declare const usePollAnswerPagination: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ paginationParams }?: UsePollAnswerPaginationParams) => {
-    answers: PollAnswer<StreamChatGenerics>[];
+export declare const usePollAnswerPagination: ({ paginationParams, }?: UsePollAnswerPaginationParams) => {
+    answers: PollAnswer[];
     error: Error | undefined;
     hasNextPage: boolean;
     loading: boolean;

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

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useManagePollVotesRealtime } from './useManagePollVotesRealtime';
-import { useCursorPaginator, } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
+import { useCursorPaginator } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
 import { usePollContext } from '../../../context';
 import { useStateStore } from '../../../store';
 const paginationStateSelector = (state) => [
@@ -8,7 +8,7 @@ const paginationStateSelector = (state) => [
     state.hasNextPage,
     state.loading,
 ];
-export const usePollAnswerPagination = ({ paginationParams } = {}) => {
+export const usePollAnswerPagination = ({ paginationParams, } = {}) => {
     const { poll } = usePollContext();
     const paginationFn = useCallback(async (next) => {
         const { next: newNext, votes } = await poll.queryAnswers({

package/dist/components/Poll/hooks/usePollOptionVotesPagination.d.ts

@@ -1,13 +1,12 @@
-import type { DefaultStreamChatGenerics } from '../../../types';
 import type { PollOptionVotesQueryParams, PollVote } from 'stream-chat';
 type UsePollOptionVotesPaginationParams = {
     paginationParams: PollOptionVotesQueryParams;
 };
-export declare const usePollOptionVotesPagination: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ paginationParams, }: UsePollOptionVotesPaginationParams) => {
+export declare const usePollOptionVotesPagination: ({ paginationParams, }: UsePollOptionVotesPaginationParams) => {
     error: Error | undefined;
     hasNextPage: boolean;
     loading: boolean;
     loadMore: () => Promise<void>;
-    votes: PollVote<StreamChatGenerics>[];
+    votes: PollVote[];
 };
 export {};

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

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { useManagePollVotesRealtime } from './useManagePollVotesRealtime';
-import { useCursorPaginator, } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
+import { useCursorPaginator } from '../../InfiniteScrollPaginator/hooks/useCursorPaginator';
 import { useStateStore } from '../../../store';
 import { usePollContext } from '../../../context';
 const paginationStateSelector = (state) => [

package/dist/components/Portal/Portal.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren, ReactPortal } from 'react';
+import type { PropsWithChildren, ReactPortal } from 'react';
 export type PortalProps = {
     getPortalDestination: () => Element | null;
     isOpen?: boolean;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IconType } from './iconMap';
+import type { IconType } from './iconMap';
 export type FileIconProps = {
     big?: boolean;
     className?: string;

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

@@ -1,4 +1,5 @@
-import React, { ComponentPropsWithoutRef } from 'react';
+import type { ComponentPropsWithoutRef } from 'react';
+import React from 'react';
 export type IconTypeV2 = 'standard' | 'alt';
 export type IconProps = {
     mimeType?: string;

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

@@ -1,4 +1,4 @@
-import { GeneralType, SupportedMimeType } from './mimeTypes';
+import type { GeneralType, SupportedMimeType } from './mimeTypes';
 import type { ComponentType } from 'react';
 import type { IconProps } from './FileIconSet';
 export type IconType = 'standard' | 'alt';

package/dist/components/ReactFileUtilities/UploadButton.d.ts

@@ -1,5 +1,6 @@
-import React, { ComponentProps } from 'react';
-import { PartialSelected } from '../../types/types';
+import type { ComponentProps } from 'react';
+import React from 'react';
+import type { PartialSelected } from '../../types/types';
 /**
  * @deprecated Use FileInputProps instead.
  */

package/dist/components/ReactFileUtilities/UploadButton.js

@@ -2,7 +2,14 @@ import clsx from 'clsx';
 import { nanoid } from 'nanoid';
 import React, { forwardRef, useCallback, useMemo } from 'react';
 import { useHandleFileChangeWrapper } from './utils';
-import { useChannelStateContext, useMessageInputContext, useTranslationContext, } from '../../context';
+import { useMessageInputContext, useTranslationContext } from '../../context';
+import { useMessageComposer } from '../MessageInput';
+import { useAttachmentManagerState } from '../MessageInput/hooks/useAttachmentManagerState';
+import { useStateStore } from '../../store';
+const attachmentManagerConfigStateSelector = (state) => ({
+    acceptedFiles: state.attachments.acceptedFiles,
+    maxNumberOfFilesPerMessage: state.attachments.maxNumberOfFilesPerMessage,
+});
 /**
  * @deprecated Use FileInput instead
  */
@@ -13,12 +20,15 @@ export const UploadButton = forwardRef(function UploadButton({ onFileChange, res
 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 { cooldownRemaining } = useMessageInputContext();
+    const messageComposer = useMessageComposer();
+    const { attachmentManager } = messageComposer;
+    const { isUploadEnabled } = useAttachmentManagerState();
+    const { acceptedFiles, maxNumberOfFilesPerMessage } = useStateStore(messageComposer.configState, attachmentManagerConfigStateSelector);
     const id = useMemo(() => nanoid(), []);
     const onFileChange = useCallback((files) => {
-        uploadNewFiles(files);
+        attachmentManager.uploadFiles(files);
         onFileChangeCustom?.(files);
-    }, [onFileChangeCustom, uploadNewFiles]);
-    return (React.createElement(FileInput, { accept: acceptedFiles?.join(','), "aria-label": t('aria/File upload'), "data-testid": 'file-input', disabled: !isUploadEnabled || maxFilesLeft === 0, id: id, multiple: multipleUploads, ...props, className: clsx('str-chat__file-input', className), onFileChange: onFileChange, ref: ref }));
+    }, [onFileChangeCustom, attachmentManager]);
+    return (React.createElement(FileInput, { accept: acceptedFiles?.join(','), "aria-label": t('aria/File upload'), "data-testid": 'file-input', disabled: !isUploadEnabled || !!cooldownRemaining, id: id, multiple: maxNumberOfFilesPerMessage > 1, ...props, className: clsx('str-chat__file-input', className), onFileChange: onFileChange, ref: ref }));
 });

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

@@ -1,5 +1,4 @@
 export * from './FileIcon';
-export * from './ImageDropzone';
 export * from './LoadingIndicator';
 export * from './UploadButton';
 export * from './types';

package/dist/components/ReactFileUtilities/index.js

@@ -1,5 +1,4 @@
 export * from './FileIcon';
-export * from './ImageDropzone';
 export * from './LoadingIndicator';
 export * from './UploadButton';
 export * from './types';

package/dist/components/ReactFileUtilities/utils.d.ts

@@ -1,5 +1,5 @@
-import { FileLike, RecordedMediaType } from './types';
-import { ChangeEvent } from 'react';
+import type { FileLike, RecordedMediaType } from './types';
+import type { ChangeEvent } from 'react';
 export declare const useHandleFileChangeWrapper: (resetOnChange?: boolean, handler?: (files: Array<File>) => void) => ({ currentTarget }: ChangeEvent<HTMLInputElement>) => void;
 export declare function dataTransferItemsHaveFiles(items?: DataTransferItem[]): boolean;
 export declare function dataTransferItemsToFiles(items?: DataTransferItem[]): Promise<FileLike[]>;

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

@@ -1,9 +1,8 @@
 import React from 'react';
 import type { ReactionGroupResponse, ReactionResponse } from 'stream-chat';
 import type { AvatarProps } from '../Avatar';
-import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { ReactionOptions } from './reactionOptions';
-export type ReactionSelectorProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+export type ReactionSelectorProps = {
     /** Custom UI component to display user avatar, defaults to and accepts same props as: [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) */
     Avatar?: React.ElementType<AvatarProps>;
     /** If true, shows the user's avatar with the reaction */
@@ -11,9 +10,9 @@ export type ReactionSelectorProps<StreamChatGenerics extends DefaultStreamChatGe
     /** Function that adds/removes a reaction on a message (overrides the function stored in `MessageContext`) */
     handleReaction?: (reactionType: string, event: React.BaseSyntheticEvent) => Promise<void>;
     /** An array of the reaction objects to display in the list */
-    latest_reactions?: ReactionResponse<StreamChatGenerics>[];
+    latest_reactions?: ReactionResponse[];
     /** An array of the own reaction objects to distinguish own reactions visually */
-    own_reactions?: ReactionResponse<StreamChatGenerics>[];
+    own_reactions?: ReactionResponse[];
     /**
      * An object that keeps track of the count of each type of reaction on a message
      * @deprecated This override value is no longer taken into account. Use `reaction_groups` to override reaction counts instead.
@@ -32,4 +31,4 @@ export type ReactionSelectorProps<StreamChatGenerics extends DefaultStreamChatGe
 /**
  * Component that allows a user to select a reaction.
  */
-export declare const ReactionSelector: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ReactionSelectorProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const ReactionSelector: (props: ReactionSelectorProps) => React.JSX.Element;

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { DefaultStreamChatGenerics } from '../../types';
 import type { IconProps } from '../../types/types';
 type ReactionSelectorWithButtonProps = {
     ReactionIcon: React.ComponentType<IconProps>;
@@ -8,5 +7,5 @@ type ReactionSelectorWithButtonProps = {
  * Internal convenience component - not to be exported. It just groups the button and the dialog anchor and thus prevents
  * cluttering the parent component.
  */
-export declare const ReactionSelectorWithButton: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ ReactionIcon, }: ReactionSelectorWithButtonProps) => React.JSX.Element;
+export declare const ReactionSelectorWithButton: ({ ReactionIcon, }: ReactionSelectorWithButtonProps) => React.JSX.Element;
 export {};

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

@@ -1,12 +1,11 @@
 import React from 'react';
-import { MessageContextValue } from '../../context';
+import type { 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';
-export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
+export type ReactionsListProps = Partial<Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
     /** An array of the own reaction objects to distinguish own reactions visually */
-    own_reactions?: ReactionResponse<StreamChatGenerics>[];
+    own_reactions?: ReactionResponse[];
     /**
      * An object that keeps track of the count of each type of reaction on a message
      * @deprecated This override value is no longer taken into account. Use `reaction_groups` to override reaction counts instead.
@@ -20,17 +19,17 @@ export type ReactionsListProps<StreamChatGenerics extends DefaultStreamChatGener
      * */
     reactionOptions?: ReactionOptions;
     /** An array of the reaction objects to display in the list */
-    reactions?: ReactionResponse<StreamChatGenerics>[];
+    reactions?: ReactionResponse[];
     /** Display the reactions in the list in reverse order, defaults to false */
     reverse?: boolean;
     /** Comparator function to sort the list of reacted users
      * @deprecated use `reactionDetailsSort` instead
      */
-    sortReactionDetails?: ReactionDetailsComparator<StreamChatGenerics>;
+    sortReactionDetails?: ReactionDetailsComparator;
     /** Comparator function to sort reactions, defaults to chronological order */
     sortReactions?: ReactionsComparator;
 };
 /**
  * Component that displays a list of reactions on a message.
  */
-export declare const ReactionsList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ReactionsListProps<StreamChatGenerics>) => React.JSX.Element | null;
+export declare const ReactionsList: (props: ReactionsListProps) => React.JSX.Element | null;

package/dist/components/Reactions/ReactionsList.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
-import { ReactionsListModal as DefaultReactionsListModal, } from './ReactionsListModal';
+import { ReactionsListModal as DefaultReactionsListModal } from './ReactionsListModal';
 import { useProcessReactions } from './hooks/useProcessReactions';
-import { useComponentContext, useTranslationContext, } from '../../context';
+import { useComponentContext, useTranslationContext } from '../../context';
 import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
 const UnMemoizedReactionsList = (props) => {
     const { handleFetchReactions,