stream-chat-react 13.5.1 → 13.6.1

package/dist/components/Channel/Channel.d.ts

@@ -5,7 +5,7 @@ import type { OnMentionAction } from './hooks/useMentionsHandlers';
 import type { LoadingErrorIndicatorProps } from '../Loading';
 import type { ComponentContextValue } from '../../context';
 import type { ChannelUnreadUiState, GiphyVersions, ImageAttachmentSizeHandler, VideoAttachmentSizeHandler } from '../../types/types';
-type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'ShareLocationDialog' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageIsThreadReplyInChannelButtonIndicator' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'ReminderNotification' | 'SendButton' | 'SendToChannelCheckbox' | 'StartRecordingAudioButton' | 'TextareaComposer' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
+type ChannelPropsForwardedToComponentContext = Pick<ComponentContextValue, 'Attachment' | 'AttachmentPreviewList' | 'AttachmentSelector' | 'AttachmentSelectorInitiationButtonContents' | 'AudioRecorder' | 'AutocompleteSuggestionItem' | 'AutocompleteSuggestionList' | 'Avatar' | 'BaseImage' | 'CooldownTimer' | 'CustomMessageActionsList' | 'DateSeparator' | 'EditMessageInput' | 'EmojiPicker' | 'emojiSearchIndex' | 'EmptyStateIndicator' | 'FileUploadIcon' | 'GiphyPreviewMessage' | 'HeaderComponent' | 'Input' | 'LinkPreviewList' | 'LoadingIndicator' | 'ShareLocationDialog' | 'Message' | 'MessageActions' | 'MessageBouncePrompt' | 'MessageBlocked' | 'MessageDeleted' | 'MessageIsThreadReplyInChannelButtonIndicator' | 'MessageListNotifications' | 'MessageListMainPanel' | 'MessageNotification' | 'MessageOptions' | 'MessageRepliesCountButton' | 'MessageStatus' | 'MessageSystem' | 'MessageTimestamp' | 'Modal' | 'ModalGallery' | 'PinIndicator' | 'PollActions' | 'PollContent' | 'PollCreationDialog' | 'PollHeader' | 'PollOptionSelector' | 'QuotedMessage' | 'QuotedMessagePreview' | 'QuotedPoll' | 'reactionOptions' | 'ReactionSelector' | 'ReactionsList' | 'ReactionsListModal' | 'ReminderNotification' | 'SendButton' | 'SendToChannelCheckbox' | 'StartRecordingAudioButton' | 'TextareaComposer' | 'ThreadHead' | 'ThreadHeader' | 'ThreadStart' | 'Timestamp' | 'TypingIndicator' | 'UnreadMessagesNotification' | 'UnreadMessagesSeparator' | 'VirtualMessage' | 'StopAIGenerationButton' | 'StreamedMessageText'>;
 export type ChannelProps = ChannelPropsForwardedToComponentContext & {
     /** Custom handler function that runs when the active channel has unread messages and the app is running on a separate browser tab */
     activeUnreadHandler?: (unread: number, documentTitle: string) => void;

package/dist/components/Channel/Channel.js

@@ -747,6 +747,7 @@ const ChannelInner = (props) => {
         MessageStatus: props.MessageStatus,
         MessageSystem: props.MessageSystem,
         MessageTimestamp: props.MessageTimestamp,
+        Modal: props.Modal,
         ModalGallery: props.ModalGallery,
         PinIndicator: props.PinIndicator,
         PollActions: props.PollActions,
@@ -813,6 +814,7 @@ const ChannelInner = (props) => {
         props.MessageStatus,
         props.MessageSystem,
         props.MessageTimestamp,
+        props.Modal,
         props.ModalGallery,
         props.PinIndicator,
         props.PollActions,

package/dist/components/Chat/Chat.d.ts

@@ -3,7 +3,7 @@ import { SearchController } from 'stream-chat';
 import type { PropsWithChildren } from 'react';
 import type { StreamChat } from 'stream-chat';
 import type { CustomClasses } from '../../context/ChatContext';
-import type { MessageContextValue } from '../../context';
+import { type MessageContextValue } from '../../context';
 import type { SupportedTranslations } from '../../i18n/types';
 import type { Streami18n } from '../../i18n/Streami18n';
 export type ChatProps = {

package/dist/components/Chat/Chat.js

@@ -5,6 +5,7 @@ import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useChannelsQueryState } from './hooks/useChannelsQueryState';
 import { ChatProvider } from '../../context/ChatContext';
 import { TranslationProvider } from '../../context/TranslationContext';
+import { ModalDialogManagerProvider } from '../../context';
 /**
  * Wrapper component for a StreamChat application. Chat needs to be placed around any other chat components
  * as it provides the ChatContext.
@@ -41,5 +42,6 @@ export const Chat = (props) => {
     if (!translators.t)
         return null;
     return (React.createElement(ChatProvider, { value: chatContextValue },
-        React.createElement(TranslationProvider, { value: translators }, children)));
+        React.createElement(TranslationProvider, { value: translators },
+            React.createElement(ModalDialogManagerProvider, null, children))));
 };

package/dist/components/Chat/hooks/useChat.js

@@ -24,7 +24,7 @@ export const useChat = ({ client, defaultLanguage = 'en', i18nInstance, initialN
     useEffect(() => {
         if (!client)
             return;
-        const version = "13.5.1";
+        const version = "13.6.1";
         const userAgent = client.getUserAgent();
         if (!userAgent.includes('stream-chat-react')) {
             // result looks like: 'stream-chat-react-2.3.2-stream-chat-javascript-client-browser-2.2.2'

package/dist/components/Dialog/DialogManager.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="node" />
 import { StateStore } from 'stream-chat';
-export type GetOrCreateDialogParams = {
+export type GetDialogParams = {
     id: DialogId;
 };
+export type GetOrCreateDialogParams = GetDialogParams;
 type DialogId = string;
 export type Dialog = {
     close: () => void;
@@ -35,6 +36,7 @@ export declare class DialogManager {
     state: StateStore<DialogManagerState>;
     constructor({ id }?: DialogManagerOptions);
     get openDialogCount(): number;
+    get(id: DialogId): Dialog;
     getOrCreate({ id }: GetOrCreateDialogParams): Dialog;
     open(params: GetOrCreateDialogParams, closeRest?: boolean): void;
     close(id: DialogId): void;

package/dist/components/Dialog/DialogManager.js

@@ -24,6 +24,9 @@ export class DialogManager {
             return count;
         }, 0);
     }
+    get(id) {
+        return this.state.getLatestValue().dialogsById[id];
+    }
     getOrCreate({ id }) {
         let dialog = this.state.getLatestValue().dialogsById[id];
         if (!dialog) {

package/dist/components/Dialog/DialogPortal.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-export declare const DialogPortalDestination: () => React.JSX.Element;
+export declare const DialogPortalDestination: () => React.JSX.Element | null;
 type DialogPortalEntryProps = {
     dialogId: string;
 };

package/dist/components/Dialog/DialogPortal.js

@@ -5,13 +5,15 @@ import { useDialogManager } from '../../context';
 export const DialogPortalDestination = () => {
     const { dialogManager } = useDialogManager();
     const openedDialogCount = useOpenedDialogCount();
+    if (!openedDialogCount)
+        return null;
     return (React.createElement("div", { className: 'str-chat__dialog-overlay', "data-str-chat__portal-id": dialogManager.id, "data-testid": 'str-chat__dialog-overlay', onClick: () => dialogManager.closeAll(), style: {
             '--str-chat__dialog-overlay-height': openedDialogCount > 0 ? '100%' : '0',
         } }));
 };
 export const DialogPortalEntry = ({ children, dialogId, }) => {
-    const { dialogManager } = useDialogManager();
-    const dialogIsOpen = useDialogIsOpen(dialogId);
+    const { dialogManager } = useDialogManager({ dialogId });
+    const dialogIsOpen = useDialogIsOpen(dialogId, dialogManager.id);
     const getPortalDestination = useCallback(() => document.querySelector(`div[data-str-chat__portal-id="${dialogManager.id}"]`), [dialogManager.id]);
     return (React.createElement(Portal, { getPortalDestination: getPortalDestination, isOpen: dialogIsOpen }, children));
 };

package/dist/components/Dialog/hooks/useDialog.d.ts

@@ -1,4 +1,12 @@
 import type { GetOrCreateDialogParams } from '../DialogManager';
-export declare const useDialog: ({ id }: GetOrCreateDialogParams) => import("../DialogManager").Dialog;
-export declare const useDialogIsOpen: (id: string) => boolean;
-export declare const useOpenedDialogCount: () => number;
+export type UseDialogParams = GetOrCreateDialogParams & {
+    dialogManagerId?: string;
+};
+export declare const useDialog: ({ dialogManagerId, id }: UseDialogParams) => import("../DialogManager").Dialog;
+export declare const modalDialogId: "modal-dialog";
+export declare const useModalDialog: () => import("../DialogManager").Dialog;
+export declare const useDialogIsOpen: (id: string, dialogManagerId?: string) => boolean;
+export declare const useModalDialogIsOpen: () => boolean;
+export declare const useOpenedDialogCount: ({ dialogManagerId, }?: {
+    dialogManagerId?: string;
+}) => number;

package/dist/components/Dialog/hooks/useDialog.js

@@ -1,8 +1,8 @@
 import { useCallback, useEffect } from 'react';
-import { useDialogManager } from '../../../context';
+import { modalDialogManagerId, useDialogManager } from '../../../context';
 import { useStateStore } from '../../../store';
-export const useDialog = ({ id }) => {
-    const { dialogManager } = useDialogManager();
+export const useDialog = ({ dialogManagerId, id }) => {
+    const { dialogManager } = useDialogManager({ dialogManagerId });
     useEffect(() => () => {
         // Since this cleanup can run even if the component is still mounted
         // and dialog id is unchanged (e.g. in <StrictMode />), it's safer to
@@ -12,11 +12,14 @@ export const useDialog = ({ id }) => {
     }, [dialogManager, id]);
     return dialogManager.getOrCreate({ id });
 };
-export const useDialogIsOpen = (id) => {
-    const { dialogManager } = useDialogManager();
+export const modalDialogId = 'modal-dialog';
+export const useModalDialog = () => useDialog({ dialogManagerId: modalDialogManagerId, id: modalDialogId });
+export const useDialogIsOpen = (id, dialogManagerId) => {
+    const { dialogManager } = useDialogManager({ dialogManagerId });
     const dialogIsOpenSelector = useCallback(({ dialogsById }) => ({ isOpen: !!dialogsById[id]?.isOpen }), [id]);
     return useStateStore(dialogManager.state, dialogIsOpenSelector).isOpen;
 };
+export const useModalDialogIsOpen = () => useDialogIsOpen(modalDialogId, modalDialogManagerId);
 const openedDialogCountSelector = (nextValue) => ({
     openedDialogCount: Object.values(nextValue.dialogsById).reduce((count, dialog) => {
         if (dialog.isOpen)
@@ -24,7 +27,7 @@ const openedDialogCountSelector = (nextValue) => ({
         return count;
     }, 0),
 });
-export const useOpenedDialogCount = () => {
-    const { dialogManager } = useDialogManager();
+export const useOpenedDialogCount = ({ dialogManagerId, } = {}) => {
+    const { dialogManager } = useDialogManager({ dialogManagerId });
     return useStateStore(dialogManager.state, openedDialogCountSelector).openedDialogCount;
 };

package/dist/components/Gallery/Gallery.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import clsx from 'clsx';
 import { BaseImage as DefaultBaseImage } from './BaseImage';
-import { Modal } from '../Modal';
+import { Modal as DefaultModal } from '../Modal';
 import { ModalGallery as DefaultModalGallery } from './ModalGallery';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useTranslationContext } from '../../context/TranslationContext';
@@ -10,7 +10,7 @@ const UnMemoizedGallery = (props) => {
     const { images, innerRefs } = props;
     const [index, setIndex] = useState(0);
     const [modalOpen, setModalOpen] = useState(false);
-    const { BaseImage = DefaultBaseImage, ModalGallery = DefaultModalGallery } = useComponentContext('Gallery');
+    const { BaseImage = DefaultBaseImage, Modal = DefaultModal, ModalGallery = DefaultModalGallery, } = useComponentContext('Gallery');
     const { t } = useTranslationContext('Gallery');
     const imageFallbackTitle = t('User uploaded content');
     const countImagesDisplayedInPreview = 4;

package/dist/components/Gallery/Image.js

@@ -1,7 +1,8 @@
+import { useCallback } from 'react';
 import React, { useState } from 'react';
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import { BaseImage as DefaultBaseImage } from './BaseImage';
-import { Modal } from '../Modal';
+import { Modal as DefaultModal } from '../Modal';
 import { ModalGallery as DefaultModalGallery } from './ModalGallery';
 import { useComponentContext } from '../../context';
 /**
@@ -10,11 +11,16 @@ import { useComponentContext } from '../../context';
 export const ImageComponent = (props) => {
     const { dimensions = {}, fallback, image_url, innerRef, previewUrl, style, thumb_url, } = props;
     const [modalIsOpen, setModalIsOpen] = useState(false);
-    const { BaseImage = DefaultBaseImage, ModalGallery = DefaultModalGallery } = useComponentContext('ImageComponent');
+    const { BaseImage = DefaultBaseImage, Modal = DefaultModal, ModalGallery = DefaultModalGallery, } = useComponentContext('ImageComponent');
     const imageSrc = sanitizeUrl(previewUrl || image_url || thumb_url);
-    const toggleModal = () => setModalIsOpen((modalIsOpen) => !modalIsOpen);
+    const closeModal = useCallback(() => {
+        setModalIsOpen(false);
+    }, []);
+    const openModal = useCallback(() => {
+        setModalIsOpen(true);
+    }, []);
     return (React.createElement(React.Fragment, null,
-        React.createElement(BaseImage, { alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: toggleModal, src: imageSrc, style: style, tabIndex: 0, title: fallback, ...dimensions, ...(innerRef && { ref: innerRef }) }),
-        React.createElement(Modal, { className: 'str-chat__image-modal', onClose: toggleModal, open: modalIsOpen },
+        React.createElement(BaseImage, { alt: fallback, className: 'str-chat__message-attachment--img', "data-testid": 'image-test', onClick: openModal, src: imageSrc, style: style, tabIndex: 0, title: fallback, ...dimensions, ...(innerRef && { ref: innerRef }) }),
+        React.createElement(Modal, { className: 'str-chat__image-modal', onClose: closeModal, open: modalIsOpen },
             React.createElement(ModalGallery, { images: [props], index: 0 }))));
 };

package/dist/components/Message/utils.js

@@ -135,14 +135,14 @@ export const getMessageActions = (actions, { canDelete, canEdit, canFlag, canMar
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.react);
     }
     if (channelConfig?.['user_message_reminders'] &&
-        messageActions.indexOf(MESSAGE_ACTIONS.remindMe)) {
+        messageActions.indexOf(MESSAGE_ACTIONS.remindMe) > -1) {
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.remindMe);
     }
     if (canReply && messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1) {
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.reply);
     }
     if (channelConfig?.['user_message_reminders'] &&
-        messageActions.indexOf(MESSAGE_ACTIONS.saveForLater)) {
+        messageActions.indexOf(MESSAGE_ACTIONS.saveForLater) > -1) {
         messageActionsAfterPermission.push(MESSAGE_ACTIONS.saveForLater);
     }
     return messageActionsAfterPermission;

package/dist/components/MessageBounce/MessageBounceModal.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import { Modal } from '../Modal';
-import { MessageBounceProvider } from '../../context';
+import { Modal as DefaultModal } from '../Modal';
+import { MessageBounceProvider, useComponentContext } from '../../context';
 export function MessageBounceModal({ MessageBouncePrompt, ...modalProps }) {
+    const { Modal = DefaultModal } = useComponentContext();
     return (React.createElement(Modal, { className: 'str-chat__message-bounce-modal', ...modalProps },
         React.createElement(MessageBounceProvider, null,
             React.createElement(MessageBouncePrompt, { onClose: modalProps.onClose }))));

package/dist/components/MessageInput/AttachmentSelector.js

@@ -4,7 +4,7 @@ import { useAttachmentManagerState } from './hooks/useAttachmentManagerState';
 import { CHANNEL_CONTAINER_ID } from '../Channel/constants';
 import { DialogAnchor, useDialog, useDialogIsOpen } from '../Dialog';
 import { DialogMenuButton } from '../Dialog/DialogMenu';
-import { Modal } from '../Modal';
+import { Modal as DefaultModal } from '../Modal';
 import { ShareLocationDialog as DefaultLocationDialog } from '../Location';
 import { PollCreationDialog as DefaultPollCreationDialog } from '../Poll';
 import { Portal } from '../Portal/Portal';
@@ -111,6 +111,7 @@ const useAttachmentSelectorActionsFiltered = (original) => {
 };
 export const AttachmentSelector = ({ attachmentSelectorActionSet = defaultAttachmentSelectorActionSet, getModalPortalDestination, }) => {
     const { t } = useTranslationContext();
+    const { Modal = DefaultModal } = useComponentContext();
     const { channelCapabilities } = useChannelStateContext();
     const messageComposer = useMessageComposer();
     const actions = useAttachmentSelectorActionsFiltered(attachmentSelectorActionSet);

package/dist/components/MessageInput/EditMessageForm.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { MessageInput } from './MessageInput';
 import { MessageInputFlat } from './MessageInputFlat';
-import { Modal } from '../Modal';
+import { Modal as DefaultModal } from '../Modal';
 import { useComponentContext, useMessageContext, useMessageInputContext, useTranslationContext, } from '../../context';
 import { useMessageComposer, useMessageComposerHasSendableData } from './hooks';
 const EditMessageFormSendButton = () => {
@@ -32,7 +32,7 @@ export const EditMessageForm = () => {
             React.createElement(EditMessageFormSendButton, null))));
 };
 export const EditMessageModal = ({ additionalMessageInputProps, }) => {
-    const { EditMessageInput = EditMessageForm } = useComponentContext();
+    const { EditMessageInput = EditMessageForm, Modal = DefaultModal } = useComponentContext();
     const { clearEditingState } = useMessageContext();
     const messageComposer = useMessageComposer();
     const onEditModalClose = useCallback(() => {

package/dist/components/Modal/GlobalModal.d.ts

@@ -0,0 +1,4 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+import type { ModalProps } from './Modal';
+export declare const GlobalModal: ({ children, className, onClose, onCloseAttempt, open, }: PropsWithChildren<ModalProps>) => React.JSX.Element | null;

package/dist/components/Modal/GlobalModal.js

@@ -0,0 +1,57 @@
+import clsx from 'clsx';
+import { useCallback } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { FocusScope } from '@react-aria/focus';
+import { CloseIconRound } from './icons';
+import { useTranslationContext } from '../../context';
+import { DialogPortalEntry, modalDialogId, useModalDialog, useModalDialogIsOpen, } from '../Dialog';
+export const GlobalModal = ({ children, className, onClose, onCloseAttempt, open, }) => {
+    const { t } = useTranslationContext('Modal');
+    const dialog = useModalDialog();
+    const isOpen = useModalDialogIsOpen();
+    const innerRef = useRef(null);
+    const closeButtonRef = useRef(null);
+    const maybeClose = useCallback((source, event) => {
+        const allow = onCloseAttempt?.(source, event);
+        if (allow !== false) {
+            onClose?.(event);
+            dialog.close();
+        }
+    }, [dialog, onClose, onCloseAttempt]);
+    const handleClick = (event) => {
+        const target = event.target;
+        if (!innerRef.current || !closeButtonRef.current)
+            return;
+        if (innerRef.current?.contains(target))
+            return;
+        if (closeButtonRef.current.contains(target)) {
+            maybeClose('button', event);
+        }
+        else if (!innerRef.current.contains(target)) {
+            maybeClose('overlay', event);
+        }
+    };
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape')
+                maybeClose('escape', event);
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [isOpen, maybeClose]);
+    useEffect(() => {
+        if (open && !dialog.isOpen) {
+            dialog.open();
+        }
+    }, [dialog, open]);
+    if (!open || !isOpen)
+        return null;
+    return (React.createElement(DialogPortalEntry, { dialogId: modalDialogId },
+        React.createElement("div", { className: clsx('str-chat str-chat__modal str-chat-react__modal str-chat__modal--open', className), onClick: handleClick },
+            React.createElement(FocusScope, { autoFocus: true, contain: true },
+                React.createElement("button", { className: 'str-chat__modal__close-button', ref: closeButtonRef, title: t('Close'), type: 'button' },
+                    React.createElement(CloseIconRound, null)),
+                React.createElement("div", { className: 'str-chat__modal__inner str-chat-react__modal__inner', ref: innerRef }, children)))));
+};

package/dist/components/Modal/Modal.d.ts

@@ -1,6 +1,6 @@
 import { type PropsWithChildren } from 'react';
 import React from 'react';
-type CloseEvent = KeyboardEvent | React.KeyboardEvent | React.MouseEvent<HTMLButtonElement | HTMLDivElement>;
+export type ModalCloseEvent = KeyboardEvent | React.KeyboardEvent | React.MouseEvent<HTMLButtonElement | HTMLDivElement>;
 export type ModalCloseSource = 'overlay' | 'button' | 'escape';
 export type ModalProps = {
     /** If true, modal is opened or visible. */
@@ -8,9 +8,8 @@ export type ModalProps = {
     /** Custom class to be applied to the modal root div */
     className?: string;
     /** Callback handler for closing of modal. */
-    onClose?: (event: CloseEvent) => void;
+    onClose?: (event: ModalCloseEvent) => void;
     /** Optional handler to intercept closing logic. Return false to prevent onClose. */
-    onCloseAttempt?: (source: ModalCloseSource, event: CloseEvent) => boolean;
+    onCloseAttempt?: (source: ModalCloseSource, event: ModalCloseEvent) => boolean;
 };
 export declare const Modal: ({ children, className, onClose, onCloseAttempt, open, }: PropsWithChildren<ModalProps>) => React.JSX.Element | null;
-export {};

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

@@ -1 +1,2 @@
+export * from './GlobalModal';
 export * from './Modal';

package/dist/components/Modal/index.js

@@ -1 +1,2 @@
+export * from './GlobalModal';
 export * from './Modal';

package/dist/components/Poll/PollActions/PollAction.js

@@ -1,5 +1,9 @@
 import React from 'react';
-import { Modal } from '../../Modal';
-export const PollAction = ({ buttonText, children, closeModal, modalClassName, modalIsOpen, openModal, }) => (React.createElement(React.Fragment, null,
-    React.createElement("button", { className: 'str-chat__poll-action', onClick: openModal }, buttonText),
-    React.createElement(Modal, { className: modalClassName, onClose: closeModal, open: modalIsOpen }, children)));
+import { Modal as DefaultModal } from '../../Modal';
+import { useComponentContext } from '../../../context';
+export const PollAction = ({ buttonText, children, closeModal, modalClassName, modalIsOpen, openModal, }) => {
+    const { Modal = DefaultModal } = useComponentContext();
+    return (React.createElement(React.Fragment, null,
+        React.createElement("button", { className: 'str-chat__poll-action', onClick: openModal }, buttonText),
+        React.createElement(Modal, { className: modalClassName, onClose: closeModal, open: modalIsOpen }, children)));
+};

package/dist/components/Poll/PollActions/PollActions.js

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 import { PollAction } from './PollAction';
 import { AddCommentForm as DefaultAddCommentForm } from './AddCommentForm';
@@ -9,6 +10,7 @@ import { PollResults as DefaultPollResults } from './PollResults';
 import { MAX_OPTIONS_DISPLAYED, MAX_POLL_OPTIONS } from '../constants';
 import { useChannelStateContext, useChatContext, useMessageContext, usePollContext, useTranslationContext, } from '../../../context';
 import { useStateStore } from '../../../store';
+const COMMON_MODAL_CLASS = 'str-chat__poll-action-modal';
 const pollStateSelector = (nextValue) => ({
     allow_answers: nextValue.allow_answers,
     allow_user_suggested_options: nextValue.allow_user_suggested_options,
@@ -31,18 +33,18 @@ export const PollActions = ({ AddCommentForm = DefaultAddCommentForm, EndPollDia
     return (React.createElement("div", { className: 'str-chat__poll-actions' },
         options.length > MAX_OPTIONS_DISPLAYED && (React.createElement(PollAction, { buttonText: t('See all options ({{count}})', {
                 count: options.length,
-            }), closeModal: closeModal, modalIsOpen: modalOpen === 'view-all-options', openModal: () => setModalOpen('view-all-options') },
+            }), closeModal: closeModal, modalClassName: COMMON_MODAL_CLASS, modalIsOpen: modalOpen === 'view-all-options', openModal: () => setModalOpen('view-all-options') },
             React.createElement(PollOptionsFullList, { close: closeModal }))),
         !is_closed &&
             allow_user_suggested_options &&
-            options.length < MAX_POLL_OPTIONS && (React.createElement(PollAction, { buttonText: t('Suggest an option'), closeModal: closeModal, modalClassName: 'str-chat__suggest-poll-option-modal', modalIsOpen: modalOpen === 'suggest-option', openModal: () => setModalOpen('suggest-option') },
+            options.length < MAX_POLL_OPTIONS && (React.createElement(PollAction, { buttonText: t('Suggest an option'), closeModal: closeModal, modalClassName: clsx(COMMON_MODAL_CLASS, 'str-chat__suggest-poll-option-modal'), modalIsOpen: modalOpen === 'suggest-option', openModal: () => setModalOpen('suggest-option') },
             React.createElement(SuggestPollOptionForm, { close: closeModal, messageId: message.id }))),
-        !is_closed && allow_answers && (React.createElement(PollAction, { buttonText: ownAnswer ? t('Update your comment') : t('Add a comment'), closeModal: closeModal, modalClassName: 'str-chat__add-poll-answer-modal', modalIsOpen: modalOpen === 'add-comment', openModal: () => setModalOpen('add-comment') },
+        !is_closed && allow_answers && (React.createElement(PollAction, { buttonText: ownAnswer ? t('Update your comment') : t('Add a comment'), closeModal: closeModal, modalClassName: clsx(COMMON_MODAL_CLASS, 'str-chat__add-poll-answer-modal'), modalIsOpen: modalOpen === 'add-comment', openModal: () => setModalOpen('add-comment') },
             React.createElement(AddCommentForm, { close: closeModal, messageId: message.id }))),
-        answers_count > 0 && channelCapabilities['query-poll-votes'] && (React.createElement(PollAction, { buttonText: t('View {{count}} comments', { count: answers_count }), closeModal: closeModal, modalClassName: 'str-chat__poll-answer-list-modal', modalIsOpen: modalOpen === 'view-comments', openModal: () => setModalOpen('view-comments') },
+        answers_count > 0 && channelCapabilities['query-poll-votes'] && (React.createElement(PollAction, { buttonText: t('View {{count}} comments', { count: answers_count }), closeModal: closeModal, modalClassName: clsx(COMMON_MODAL_CLASS, 'str-chat__poll-answer-list-modal'), modalIsOpen: modalOpen === 'view-comments', openModal: () => setModalOpen('view-comments') },
             React.createElement(PollAnswerList, { close: closeModal, onUpdateOwnAnswerClick: onUpdateAnswerClick }))),
-        React.createElement(PollAction, { buttonText: t('View results'), closeModal: closeModal, modalClassName: 'str-chat__poll-results-modal', modalIsOpen: modalOpen === 'view-results', openModal: () => setModalOpen('view-results') },
+        React.createElement(PollAction, { buttonText: t('View results'), closeModal: closeModal, modalClassName: clsx(COMMON_MODAL_CLASS, 'str-chat__poll-results-modal'), modalIsOpen: modalOpen === 'view-results', openModal: () => setModalOpen('view-results') },
             React.createElement(PollResults, { close: closeModal })),
-        !is_closed && created_by_id === client.user?.id && (React.createElement(PollAction, { buttonText: t('End vote'), closeModal: closeModal, modalClassName: 'str-chat__end-poll-modal', modalIsOpen: modalOpen === 'end-vote', openModal: () => setModalOpen('end-vote') },
+        !is_closed && created_by_id === client.user?.id && (React.createElement(PollAction, { buttonText: t('End vote'), closeModal: closeModal, modalClassName: clsx(COMMON_MODAL_CLASS, 'str-chat__end-poll-modal'), modalIsOpen: modalOpen === 'end-vote', openModal: () => setModalOpen('end-vote') },
             React.createElement(EndPollDialog, { close: closeModal })))));
 };

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { ReactionDetailsComparator, ReactionSummary, ReactionType } from './types';
+import type { ReactionSort } from 'stream-chat';
 import type { ModalProps } from '../Modal';
 import type { MessageContextValue } from '../../context';
-import type { ReactionSort } from 'stream-chat';
 export type ReactionsListModalProps = ModalProps & Partial<Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>> & {
     reactions: ReactionSummary[];
     selectedReactionType: ReactionType;

package/dist/components/Reactions/ReactionsListModal.js

@@ -1,12 +1,13 @@
 import React, { useMemo } from 'react';
 import clsx from 'clsx';
-import { Modal } from '../Modal';
+import { Modal as DefaultModal } from '../Modal';
 import { useFetchReactions } from './hooks/useFetchReactions';
 import { LoadingIndicator } from '../Loading';
 import { Avatar } from '../Avatar';
-import { useMessageContext } from '../../context';
+import { useComponentContext, useMessageContext } from '../../context';
 const defaultReactionDetailsSort = { created_at: -1 };
 export function ReactionsListModal({ handleFetchReactions, onSelectedReactionTypeChange, reactionDetailsSort: propReactionDetailsSort, reactions, selectedReactionType, sortReactionDetails: propSortReactionDetails, ...modalProps }) {
+    const { Modal = DefaultModal } = useComponentContext();
     const selectedReaction = reactions.find(({ reactionType }) => reactionType === selectedReactionType);
     const SelectedEmojiComponent = selectedReaction?.EmojiComponent ?? null;
     const { reactionDetailsSort: contextReactionDetailsSort, sortReactionDetails: contextSortReactionDetails, } = useMessageContext('ReactionsListModal');

package/dist/components/TextareaComposer/TextareaComposer.js

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import Textarea from 'react-textarea-autosize';
 import { useMessageComposer } from '../MessageInput';
 import { useComponentContext, useMessageInputContext, useTranslationContext, } from '../../context';
@@ -116,7 +116,6 @@ export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, co
                 event.preventDefault();
             }
             handleSubmit();
-            textareaRef.current.selectionEnd = 0;
         }
     }, [
         focusedItemIndex,
@@ -135,23 +134,13 @@ export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, co
             textComposer.closeSuggestions();
         }
     }, [onScroll, textComposer]);
-    const setSelectionDebounced = useCallback((e) => {
+    const setSelection = useCallback((e) => {
         onSelect?.(e);
         textComposer.setSelection({
             end: e.target.selectionEnd,
             start: e.target.selectionStart,
         });
     }, [onSelect, textComposer]);
-    useEffect(() => {
-        // FIXME: find the real reason for cursor being set to the end on each change
-        // This is a workaround to prevent the cursor from jumping
-        // to the end of the textarea when the user is typing
-        // at the position that is not at the end of the textarea value.
-        if (textareaRef.current && !isComposing) {
-            textareaRef.current.selectionStart = selection.start;
-            textareaRef.current.selectionEnd = selection.end;
-        }
-    }, [text, textareaRef, selection.start, selection.end, isComposing]);
     useEffect(() => {
         if (textComposer.suggestions) {
             setFocusedItemIndex(0);
@@ -163,24 +152,26 @@ export const TextareaComposer = ({ className, closeSuggestionsOnClickOutside, co
             return;
         textareaRef.current.focus();
     }, [attachments, focus, quotedMessage, textareaRef]);
-    useEffect(() => {
+    useLayoutEffect(() => {
         /**
-         * The textarea value has to be overridden outside the render cycle so that the events like compositionend can be triggered.
-         * If we have overridden the value during the component rendering, the compositionend event would not be triggered, and
-         * it would not be possible to type composed characters (ô).
-         * On the other hand, just removing the value override via prop (value={text}) would not allow us to change the text based on
-         * middleware results (e.g. replace characters with emojis)
+         * It is important to perform set text and after that the range
+         * to prevent cursor reset to the end of the textarea if doing it in separate effects.
          */
         const textarea = textareaRef.current;
-        if (!textarea)
+        if (!textarea || isComposing)
+            return;
+        const length = textarea.value.length;
+        const start = Math.max(0, Math.min(selection.start, length));
+        const end = Math.max(start, Math.min(selection.end, length));
+        if (textarea.selectionStart === start && textarea.selectionEnd === end)
             return;
-        textarea.value = text;
-    }, [textareaRef, text]);
+        textarea.setSelectionRange(start, end, 'forward');
+    }, [text, selection.start, selection.end, isComposing, textareaRef]);
     return (React.createElement("div", { className: clsx('rta', 'str-chat__textarea str-chat__message-textarea-react-host', containerClassName, {
             ['rta--loading']: isLoadingItems,
         }), ref: containerRef },
-        React.createElement(Textarea, { ...additionalTextareaProps, ...restTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: clsx('rta__textarea', 'str-chat__textarea__textarea str-chat__message-textarea', className), "data-testid": 'message-input', disabled: !enabled || !!cooldownRemaining, maxRows: maxRows, minRows: minRows, onBlur: onBlur, onChange: changeHandler, onCompositionEnd: onCompositionEnd, onCompositionStart: onCompositionStart, onKeyDown: keyDownHandler, onPaste: onPaste, onScroll: scrollHandler, onSelect: setSelectionDebounced, placeholder: placeholder || t('Type your message'), ref: (ref) => {
+        React.createElement(Textarea, { ...additionalTextareaProps, ...restTextareaProps, "aria-label": cooldownRemaining ? t('Slow Mode ON') : placeholder, className: clsx('rta__textarea', 'str-chat__textarea__textarea str-chat__message-textarea', className), "data-testid": 'message-input', disabled: !enabled || !!cooldownRemaining, maxRows: maxRows, minRows: minRows, onBlur: onBlur, onChange: changeHandler, onCompositionEnd: onCompositionEnd, onCompositionStart: onCompositionStart, onKeyDown: keyDownHandler, onPaste: onPaste, onScroll: scrollHandler, onSelect: setSelection, placeholder: placeholder || t('Type your message'), ref: (ref) => {
                 textareaRef.current = ref;
-            } }),
+            }, value: text }),
         !isComposing && (React.createElement(AutocompleteSuggestionList, { className: listClassName, closeOnClickOutside: closeSuggestionsOnClickOutside, focusedItemIndex: focusedItemIndex, setFocusedItemIndex: setFocusedItemIndex }))));
 };

package/dist/context/ComponentContext.d.ts

@@ -1,6 +1,6 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
-import type { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListModalProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, ReminderNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, TextareaComposerProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
+import type { AttachmentPreviewListProps, AttachmentProps, AvatarProps, BaseImageProps, ChannelPreviewActionButtonsProps, CooldownTimerProps, CustomMessageActionsListProps, DateSeparatorProps, EmojiSearchIndex, EmptyStateIndicatorProps, EventComponentProps, FixedHeightMessageProps, GiphyPreviewMessageProps, LoadingIndicatorProps, MessageBouncePromptProps, MessageDeletedProps, MessageInputProps, MessageListNotificationsProps, MessageNotificationProps, MessageOptionsProps, MessageProps, MessageRepliesCountButtonProps, MessageStatusProps, MessageTimestampProps, MessageUIComponentProps, ModalGalleryProps, ModalProps, PinIndicatorProps, PollCreationDialogProps, PollOptionSelectorProps, QuotedMessagePreviewProps, ReactionOptions, ReactionSelectorProps, ReactionsListModalProps, ReactionsListProps, RecordingPermissionDeniedNotificationProps, ReminderNotificationProps, SendButtonProps, StartRecordingAudioButtonProps, StreamedMessageTextProps, TextareaComposerProps, ThreadHeaderProps, ThreadListItemProps, ThreadListItemUIProps, TimestampProps, TypingIndicatorProps, UnreadMessagesNotificationProps, UnreadMessagesSeparatorProps } from '../components';
 import type { SuggestionItemProps, SuggestionListProps } from '../components/TextareaComposer';
 import type { SearchProps, SearchResultsPresearchProps, SearchSourceResultListProps } from '../experimental';
 import type { PropsWithChildrenOnly, UnknownType } from '../types/types';
@@ -87,6 +87,8 @@ export type ComponentContextValue = {
     MessageSystem?: React.ComponentType<EventComponentProps>;
     /** Custom UI component to display a timestamp on a message, defaults to and accepts same props as: [MessageTimestamp](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageTimestamp.tsx) */
     MessageTimestamp?: React.ComponentType<MessageTimestampProps>;
+    /** Custom UI component for viewing content in a modal, defaults to and accepts the same props as [Modal](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Modal/Modal.tsx) */
+    Modal?: React.ComponentType<ModalProps>;
     /** Custom UI component for viewing message's image attachments, defaults to and accepts the same props as [ModalGallery](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Gallery/ModalGallery.tsx) */
     ModalGallery?: React.ComponentType<ModalGalleryProps>;
     /** Custom UI component to override default pinned message indicator, defaults to and accepts same props as: [PinIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icons.tsx) */