stream-chat-react 12.0.0-rc.14 → 12.0.0-rc.15

package/dist/components/Channel/hooks/useCreateChannelStateContext.js

@@ -67,6 +67,7 @@ export const useCreateChannelStateContext = (value) => {
     }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
+        channel.data?.name, // otherwise ChannelHeader will not be updated
         channelId,
         channelUnreadUiState,
         debounceURLEnrichmentMs,

package/dist/components/ChannelHeader/ChannelHeader.js

@@ -5,7 +5,10 @@ import { useChannelPreviewInfo } from '../ChannelPreview/hooks/useChannelPreview
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
-const UnMemoizedChannelHeader = (props) => {
+/**
+ * The ChannelHeader component renders some basic information about a Channel.
+ */
+export const ChannelHeader = (props) => {
     const { Avatar = DefaultAvatar, MenuIcon = DefaultMenuIcon, image: overrideImage, live, title: overrideTitle, } = props;
     const { channel, watcher_count } = useChannelStateContext('ChannelHeader');
     const { openMobileNav } = useChatContext('ChannelHeader');
@@ -35,7 +38,3 @@ const UnMemoizedChannelHeader = (props) => {
                     ' ')),
                 t('{{ watcherCount }} online', { watcherCount: watcher_count })))));
 };
-/**
- * The ChannelHeader component renders some basic information about a Channel.
- */
-export const ChannelHeader = React.memo(UnMemoizedChannelHeader);

package/dist/components/ChannelPreview/hooks/useChannelPreviewInfo.js

@@ -3,26 +3,24 @@ import { getDisplayImage, getDisplayTitle } from '../utils';
 import { useChatContext } from '../../../context';
 export const useChannelPreviewInfo = (props) => {
     const { channel, overrideImage, overrideTitle } = props;
-    const { client } = useChatContext('ChannelPreview');
-    const [displayTitle, setDisplayTitle] = useState(getDisplayTitle(channel, client.user));
-    const [displayImage, setDisplayImage] = useState(getDisplayImage(channel, client.user));
+    const { client } = useChatContext('useChannelPreviewInfo');
+    const [displayTitle, setDisplayTitle] = useState(() => overrideTitle || getDisplayTitle(channel, client.user));
+    const [displayImage, setDisplayImage] = useState(() => overrideImage || getDisplayImage(channel, client.user));
     useEffect(() => {
-        const handleEvent = () => {
-            setDisplayTitle((displayTitle) => {
-                const newDisplayTitle = getDisplayTitle(channel, client.user);
-                return displayTitle !== newDisplayTitle ? newDisplayTitle : displayTitle;
-            });
-            setDisplayImage((displayImage) => {
-                const newDisplayImage = getDisplayImage(channel, client.user);
-                return displayImage !== newDisplayImage ? newDisplayImage : displayImage;
-            });
+        if (overrideTitle && overrideImage)
+            return;
+        const updateTitles = () => {
+            if (!overrideTitle)
+                setDisplayTitle(getDisplayTitle(channel, client.user));
+            if (!overrideImage)
+                setDisplayImage(getDisplayImage(channel, client.user));
         };
-        client.on('user.updated', handleEvent);
+        updateTitles();
+        client.on('user.updated', updateTitles);
         return () => {
-            client.off('user.updated', handleEvent);
+            client.off('user.updated', updateTitles);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [channel, channel.data, client, overrideImage, overrideTitle]);
     return {
         displayImage: overrideImage || displayImage,
         displayTitle: overrideTitle || displayTitle,

package/dist/components/ChannelPreview/utils.js

@@ -23,25 +23,14 @@ export const getLatestMessagePreview = (channel, t, userLanguage = 'en') => {
     }
     return t('Empty message...');
 };
-export const getDisplayTitle = (channel, currentUser) => {
-    let title = channel.data?.name;
+const getChannelDisplayInfo = (info, channel, currentUser) => {
+    if (channel.data?.[info])
+        return channel.data[info];
     const members = Object.values(channel.state.members);
-    if (!title && members.length === 2) {
-        const otherMember = members.find((member) => member.user?.id !== currentUser?.id);
-        if (otherMember?.user?.name) {
-            title = otherMember.user.name;
-        }
-    }
-    return title;
-};
-export const getDisplayImage = (channel, currentUser) => {
-    let image = channel.data?.image;
-    const members = Object.values(channel.state.members);
-    if (!image && members.length === 2) {
-        const otherMember = members.find((member) => member.user?.id !== currentUser?.id);
-        if (otherMember?.user?.image) {
-            image = otherMember.user.image;
-        }
-    }
-    return image;
+    if (members.length !== 2)
+        return;
+    const otherMember = members.find((member) => member.user?.id !== currentUser?.id);
+    return otherMember?.user?.[info];
 };
+export const getDisplayTitle = (channel, currentUser) => getChannelDisplayInfo('name', channel, currentUser);
+export const getDisplayImage = (channel, currentUser) => getChannelDisplayInfo('image', channel, currentUser);

package/dist/components/ChannelSearch/hooks/useChannelSearch.js

@@ -97,13 +97,12 @@ export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClick
             // @ts-expect-error
             {
                 $or: [{ id: { $autocomplete: text } }, { name: { $autocomplete: text } }],
-                id: { $ne: client.userID },
                 ...searchQueryParams?.userFilters?.filters,
             }, { id: 1, ...searchQueryParams?.userFilters?.sort }, { limit: 8, ...searchQueryParams?.userFilters?.options });
             if (!searchForChannels) {
                 searchQueryPromiseInProgress.current = userQueryPromise;
                 const { users } = await searchQueryPromiseInProgress.current;
-                results = users;
+                results = users.filter((u) => u.id !== client.user?.id);
             }
             else {
                 const channelQueryPromise = client.queryChannels(
@@ -117,7 +116,7 @@ export const useChannelSearch = ({ channelType = 'messaging', clearSearchOnClick
                     userQueryPromise,
                 ]);
                 const [channels, { users }] = await searchQueryPromiseInProgress.current;
-                results = [...channels, ...users];
+                results = [...channels, ...users.filter((u) => u.id !== client.user?.id)];
             }
         }
         catch (error) {

package/dist/components/ChatView/ChatView.js

@@ -1,8 +1,9 @@
 import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
-import { ThreadProvider, useStateStore } from '../Threads';
+import { ThreadProvider } from '../Threads';
 import { Icon } from '../Threads/icons';
 import { UnreadCountBadge } from '../Threads/UnreadCountBadge';
 import { useChatContext } from '../../context';
+import { useStateStore } from '../../store';
 import clsx from 'clsx';
 const availableChatViews = ['channels', 'threads'];
 const ChatViewContext = createContext({

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

@@ -0,0 +1,25 @@
+import { Placement } from '@popperjs/core';
+import React, { ComponentProps, PropsWithChildren } from 'react';
+export interface DialogAnchorOptions {
+    open: boolean;
+    placement: Placement;
+    referenceElement: HTMLElement | null;
+}
+export declare function useDialogAnchor<T extends HTMLElement>({ open, placement, referenceElement, }: DialogAnchorOptions): {
+    attributes: {
+        [key: string]: {
+            [key: string]: string;
+        } | undefined;
+    };
+    setPopperElement: React.Dispatch<React.SetStateAction<T | null>>;
+    styles: {
+        [key: string]: React.CSSProperties;
+    };
+};
+type DialogAnchorProps = PropsWithChildren<Partial<DialogAnchorOptions>> & {
+    id: string;
+    focus?: boolean;
+    trapFocus?: boolean;
+} & ComponentProps<'div'>;
+export declare const DialogAnchor: ({ children, className, focus, id, placement, referenceElement, trapFocus, ...restDivProps }: DialogAnchorProps) => React.JSX.Element | null;
+export {};

package/dist/components/Dialog/DialogAnchor.js

@@ -0,0 +1,68 @@
+import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+import { FocusScope } from '@react-aria/focus';
+import { usePopper } from 'react-popper';
+import { DialogPortalEntry } from './DialogPortal';
+import { useDialog, useDialogIsOpen } from './hooks';
+export function useDialogAnchor({ open, placement, referenceElement, }) {
+    const [popperElement, setPopperElement] = useState(null);
+    const { attributes, styles, update } = usePopper(referenceElement, popperElement, {
+        modifiers: [
+            {
+                name: 'eventListeners',
+                options: {
+                    // It's not safe to update popper position on resize and scroll, since popper's
+                    // reference element might not be visible at the time.
+                    resize: false,
+                    scroll: false,
+                },
+            },
+        ],
+        placement,
+    });
+    useEffect(() => {
+        if (open && popperElement) {
+            // Since the popper's reference element might not be (and usually is not) visible
+            // all the time, it's safer to force popper update before showing it.
+            // update is non-null only if popperElement is non-null
+            update?.();
+        }
+    }, [open, popperElement, update]);
+    if (popperElement && !open) {
+        setPopperElement(null);
+    }
+    return {
+        attributes,
+        setPopperElement,
+        styles,
+    };
+}
+export const DialogAnchor = ({ children, className, focus = true, id, placement = 'auto', referenceElement = null, trapFocus, ...restDivProps }) => {
+    const dialog = useDialog({ id });
+    const open = useDialogIsOpen(id);
+    const { attributes, setPopperElement, styles } = useDialogAnchor({
+        open,
+        placement,
+        referenceElement,
+    });
+    useEffect(() => {
+        if (!open)
+            return;
+        const hideOnEscape = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            dialog?.close();
+        };
+        document.addEventListener('keyup', hideOnEscape);
+        return () => {
+            document.removeEventListener('keyup', hideOnEscape);
+        };
+    }, [dialog, open]);
+    // prevent rendering the dialog contents if the dialog should not be open / shown
+    if (!open) {
+        return null;
+    }
+    return (React.createElement(DialogPortalEntry, { dialogId: id },
+        React.createElement(FocusScope, { autoFocus: focus, contain: trapFocus, restoreFocus: true },
+            React.createElement("div", { ...restDivProps, ...attributes.popper, className: clsx('str-chat__dialog-contents', className), "data-testid": 'str-chat__dialog-contents', ref: setPopperElement, style: styles.popper, tabIndex: 0 }, children))));
+};

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

@@ -0,0 +1,43 @@
+import { StateStore } from 'stream-chat';
+export type GetOrCreateDialogParams = {
+    id: DialogId;
+};
+type DialogId = string;
+export type Dialog = {
+    close: () => void;
+    id: DialogId;
+    isOpen: boolean | undefined;
+    open: (zIndex?: number) => void;
+    remove: () => void;
+    toggle: (closeAll?: boolean) => void;
+};
+export type DialogManagerOptions = {
+    id?: string;
+};
+type Dialogs = Record<DialogId, Dialog>;
+export type DialogManagerState = {
+    dialogsById: Dialogs;
+};
+/**
+ * Keeps a map of Dialog objects.
+ * Dialog can be controlled via `Dialog` object retrieved using `useDialog()` hook.
+ * The hook returns an object with the following API:
+ *
+ * - `dialog.open()` - opens the dialog
+ * - `dialog.close()` - closes the dialog
+ * - `dialog.toggle()` - toggles the dialog open state. Accepts boolean argument closeAll. If enabled closes any other dialog that would be open.
+ * - `dialog.remove()` - removes the dialog object reference from the state (primarily for cleanup purposes)
+ */
+export declare class DialogManager {
+    id: string;
+    state: StateStore<DialogManagerState>;
+    constructor({ id }?: DialogManagerOptions);
+    get openDialogCount(): number;
+    getOrCreate({ id }: GetOrCreateDialogParams): Dialog;
+    open(params: GetOrCreateDialogParams, closeRest?: boolean): void;
+    close(id: DialogId): void;
+    closeAll(): void;
+    toggle(params: GetOrCreateDialogParams, closeAll?: boolean): void;
+    remove(id: DialogId): void;
+}
+export {};

package/dist/components/Dialog/DialogManager.js

@@ -0,0 +1,98 @@
+import { StateStore } from 'stream-chat';
+/**
+ * Keeps a map of Dialog objects.
+ * Dialog can be controlled via `Dialog` object retrieved using `useDialog()` hook.
+ * The hook returns an object with the following API:
+ *
+ * - `dialog.open()` - opens the dialog
+ * - `dialog.close()` - closes the dialog
+ * - `dialog.toggle()` - toggles the dialog open state. Accepts boolean argument closeAll. If enabled closes any other dialog that would be open.
+ * - `dialog.remove()` - removes the dialog object reference from the state (primarily for cleanup purposes)
+ */
+export class DialogManager {
+    constructor({ id } = {}) {
+        this.state = new StateStore({
+            dialogsById: {},
+        });
+        this.id = id ?? new Date().getTime().toString();
+    }
+    get openDialogCount() {
+        return Object.values(this.state.getLatestValue().dialogsById).reduce((count, dialog) => {
+            if (dialog.isOpen)
+                return count + 1;
+            return count;
+        }, 0);
+    }
+    getOrCreate({ id }) {
+        let dialog = this.state.getLatestValue().dialogsById[id];
+        if (!dialog) {
+            dialog = {
+                close: () => {
+                    this.close(id);
+                },
+                id,
+                isOpen: false,
+                open: () => {
+                    this.open({ id });
+                },
+                remove: () => {
+                    this.remove(id);
+                },
+                toggle: (closeAll = false) => {
+                    this.toggle({ id }, closeAll);
+                },
+            };
+            this.state.next((current) => ({
+                ...current,
+                ...{ dialogsById: { ...current.dialogsById, [id]: dialog } },
+            }));
+        }
+        return dialog;
+    }
+    open(params, closeRest) {
+        const dialog = this.getOrCreate(params);
+        if (dialog.isOpen)
+            return;
+        if (closeRest) {
+            this.closeAll();
+        }
+        this.state.next((current) => ({
+            ...current,
+            dialogsById: { ...current.dialogsById, [dialog.id]: { ...dialog, isOpen: true } },
+        }));
+    }
+    close(id) {
+        const dialog = this.state.getLatestValue().dialogsById[id];
+        if (!dialog?.isOpen)
+            return;
+        this.state.next((current) => ({
+            ...current,
+            dialogsById: { ...current.dialogsById, [dialog.id]: { ...dialog, isOpen: false } },
+        }));
+    }
+    closeAll() {
+        Object.values(this.state.getLatestValue().dialogsById).forEach((dialog) => dialog.close());
+    }
+    toggle(params, closeAll = false) {
+        if (this.state.getLatestValue().dialogsById[params.id]?.isOpen) {
+            this.close(params.id);
+        }
+        else {
+            this.open(params, closeAll);
+        }
+    }
+    remove(id) {
+        const state = this.state.getLatestValue();
+        const dialog = state.dialogsById[id];
+        if (!dialog)
+            return;
+        this.state.next((current) => {
+            const newDialogs = { ...current.dialogsById };
+            delete newDialogs[id];
+            return {
+                ...current,
+                dialogsById: newDialogs,
+            };
+        });
+    }
+}

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

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

package/dist/components/Dialog/DialogPortal.js

@@ -0,0 +1,25 @@
+import React, { useLayoutEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useDialogIsOpen, useOpenedDialogCount } from './hooks';
+import { useDialogManager } from '../../context';
+export const DialogPortalDestination = () => {
+    const { dialogManager } = useDialogManager();
+    const openedDialogCount = useOpenedDialogCount();
+    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 [portalDestination, setPortalDestination] = useState(null);
+    useLayoutEffect(() => {
+        const destination = document.querySelector(`div[data-str-chat__portal-id="${dialogManager.id}"]`);
+        if (!destination)
+            return;
+        setPortalDestination(destination);
+    }, [dialogManager, dialogIsOpen]);
+    if (!portalDestination)
+        return null;
+    return createPortal(children, portalDestination);
+};

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

@@ -0,0 +1 @@
+export * from './useDialog';

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

@@ -0,0 +1 @@
+export * from './useDialog';

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

@@ -0,0 +1,4 @@
+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;

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

@@ -0,0 +1,26 @@
+import { useCallback, useEffect } from 'react';
+import { useDialogManager } from '../../../context';
+import { useStateStore } from '../../../store';
+export const useDialog = ({ id }) => {
+    const { dialogManager } = useDialogManager();
+    useEffect(() => () => {
+        dialogManager.remove(id);
+    }, [dialogManager, id]);
+    return dialogManager.getOrCreate({ id });
+};
+export const useDialogIsOpen = (id) => {
+    const { dialogManager } = useDialogManager();
+    const dialogIsOpenSelector = useCallback(({ dialogsById }) => [!!dialogsById[id]?.isOpen], [id]);
+    return useStateStore(dialogManager.state, dialogIsOpenSelector)[0];
+};
+const openedDialogCountSelector = (nextValue) => [
+    Object.values(nextValue.dialogsById).reduce((count, dialog) => {
+        if (dialog.isOpen)
+            return count + 1;
+        return count;
+    }, 0),
+];
+export const useOpenedDialogCount = () => {
+    const { dialogManager } = useDialogManager();
+    return useStateStore(dialogManager.state, openedDialogCountSelector)[0];
+};

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

@@ -0,0 +1,4 @@
+export * from './DialogAnchor';
+export * from './DialogManager';
+export * from './DialogPortal';
+export * from './hooks';

package/dist/components/Dialog/index.js

@@ -0,0 +1,4 @@
+export * from './DialogAnchor';
+export * from './DialogManager';
+export * from './DialogPortal';
+export * from './hooks';

package/dist/components/Message/Message.js

@@ -1,5 +1,5 @@
-import React, { useCallback, useMemo, useRef } from 'react';
-import { useActionHandler, useDeleteHandler, useEditHandler, useFlagHandler, useMarkUnreadHandler, useMentionsHandler, useMuteHandler, useOpenThreadHandler, usePinHandler, useReactionClick, useReactionHandler, useReactionsFetcher, useRetryHandler, useUserHandler, useUserRole, } from './hooks';
+import React, { useCallback, useMemo } from 'react';
+import { useActionHandler, useDeleteHandler, useEditHandler, useFlagHandler, useMarkUnreadHandler, useMentionsHandler, useMuteHandler, useOpenThreadHandler, usePinHandler, useReactionHandler, useReactionsFetcher, useRetryHandler, useUserHandler, useUserRole, } from './hooks';
 import { areMessagePropsEqual, getMessageActions, MESSAGE_ACTIONS } from './utils';
 import { MessageProvider, useChannelActionContext, useChannelStateContext, useChatContext, useComponentContext, } from '../../context';
 import { MessageSimple as DefaultMessage } from './MessageSimple';
@@ -76,7 +76,6 @@ export const Message = (props) => {
     const { closeReactionSelectorOnClick, disableQuotedMessages, getDeleteMessageErrorNotification, getFetchReactionsErrorNotification, getFlagMessageErrorNotification, getFlagMessageSuccessNotification, getMarkMessageUnreadErrorNotification, getMarkMessageUnreadSuccessNotification, getMuteUserErrorNotification, getMuteUserSuccessNotification, getPinMessageErrorNotification, message, onlySenderCanEdit = false, onMentionsClick: propOnMentionsClick, onMentionsHover: propOnMentionsHover, openThread: propOpenThread, pinPermissions, reactionDetailsSort, retrySendMessage: propRetrySendMessage, sortReactionDetails, sortReactions, } = props;
     const { addNotification } = useChannelActionContext('Message');
     const { highlightedMessageId, mutes } = useChannelStateContext('Message');
-    const reactionSelectorRef = useRef(null);
     const handleAction = useActionHandler(message);
     const handleOpenThread = useOpenThreadHandler(message, propOpenThread);
     const handleReaction = useReactionHandler(message);
@@ -113,7 +112,6 @@ export const Message = (props) => {
         getErrorNotification: getPinMessageErrorNotification,
         notify: addNotification,
     });
-    const { isReactionEnabled, onReactionListClick, showDetailedReactions } = useReactionClick(message, reactionSelectorRef, undefined, closeReactionSelectorOnClick);
     const highlighted = highlightedMessageId === message.id;
-    return (React.createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, autoscrollToBottom: props.autoscrollToBottom, canPin: canPin, customMessageActions: props.customMessageActions, disableQuotedMessages: props.disableQuotedMessages, endOfGroup: props.endOfGroup, firstOfGroup: props.firstOfGroup, formatDate: props.formatDate, groupedByUser: props.groupedByUser, groupStyles: props.groupStyles, handleAction: handleAction, handleDelete: handleDelete, handleFetchReactions: handleFetchReactions, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handleOpenThread: handleOpenThread, handlePin: handlePin, handleReaction: handleReaction, handleRetry: handleRetry, highlighted: highlighted, initialMessage: props.initialMessage, isReactionEnabled: isReactionEnabled, lastReceivedId: props.lastReceivedId, message: message, Message: props.Message, messageActions: props.messageActions, messageListRect: props.messageListRect, mutes: mutes, onMentionsClickMessage: onMentionsClick, onMentionsHoverMessage: onMentionsHover, onReactionListClick: onReactionListClick, onUserClick: props.onUserClick, onUserHover: props.onUserHover, pinPermissions: props.pinPermissions, reactionDetailsSort: reactionDetailsSort, reactionSelectorRef: reactionSelectorRef, readBy: props.readBy, renderText: props.renderText, showDetailedReactions: showDetailedReactions, sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
+    return (React.createElement(MemoizedMessage, { additionalMessageInputProps: props.additionalMessageInputProps, autoscrollToBottom: props.autoscrollToBottom, canPin: canPin, closeReactionSelectorOnClick: closeReactionSelectorOnClick, customMessageActions: props.customMessageActions, disableQuotedMessages: props.disableQuotedMessages, endOfGroup: props.endOfGroup, firstOfGroup: props.firstOfGroup, formatDate: props.formatDate, groupedByUser: props.groupedByUser, groupStyles: props.groupStyles, handleAction: handleAction, handleDelete: handleDelete, handleFetchReactions: handleFetchReactions, handleFlag: handleFlag, handleMarkUnread: handleMarkUnread, handleMute: handleMute, handleOpenThread: handleOpenThread, handlePin: handlePin, handleReaction: handleReaction, handleRetry: handleRetry, highlighted: highlighted, initialMessage: props.initialMessage, lastReceivedId: props.lastReceivedId, message: message, Message: props.Message, messageActions: props.messageActions, messageListRect: props.messageListRect, mutes: mutes, onMentionsClickMessage: onMentionsClick, onMentionsHoverMessage: onMentionsHover, onUserClick: props.onUserClick, onUserHover: props.onUserHover, pinPermissions: props.pinPermissions, reactionDetailsSort: reactionDetailsSort, readBy: props.readBy, renderText: props.renderText, sortReactionDetails: sortReactionDetails, sortReactions: sortReactions, threadList: props.threadList, unsafeHTML: props.unsafeHTML, userRoles: userRoles }));
 };

package/dist/components/Message/MessageOptions.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import { MessageContextValue } from '../../context/MessageContext';
 import type { DefaultStreamChatGenerics, IconProps } from '../../types/types';
+import type { MessageContextValue } from '../../context/MessageContext';
 export type MessageOptionsProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<Pick<MessageContextValue<StreamChatGenerics>, 'handleOpenThread'>> & {
     ActionsIcon?: React.ComponentType<IconProps>;
     displayReplies?: boolean;
-    messageWrapperRef?: React.RefObject<HTMLDivElement>;
     ReactionIcon?: React.ComponentType<IconProps>;
     theme?: string;
     ThreadIcon?: React.ComponentType<IconProps>;

package/dist/components/Message/MessageOptions.js

@@ -1,13 +1,17 @@
+import clsx from 'clsx';
 import React from 'react';
 import { ActionsIcon as DefaultActionsIcon, ReactionIcon as DefaultReactionIcon, ThreadIcon as DefaultThreadIcon, } from './icons';
 import { MESSAGE_ACTIONS } from './utils';
 import { MessageActions } from '../MessageActions';
-import { useMessageContext } from '../../context/MessageContext';
-import { useTranslationContext } from '../../context';
+import { useDialogIsOpen } from '../Dialog';
+import { ReactionSelectorWithButton } from '../Reactions/ReactionSelectorWithButton';
+import { useMessageContext, useTranslationContext } from '../../context';
 const UnMemoizedMessageOptions = (props) => {
-    const { ActionsIcon = DefaultActionsIcon, displayReplies = true, handleOpenThread: propHandleOpenThread, messageWrapperRef, ReactionIcon = DefaultReactionIcon, theme = 'simple', ThreadIcon = DefaultThreadIcon, } = props;
-    const { getMessageActions, handleOpenThread: contextHandleOpenThread, initialMessage, message, onReactionListClick, showDetailedReactions, threadList, } = useMessageContext('MessageOptions');
+    const { ActionsIcon = DefaultActionsIcon, displayReplies = true, handleOpenThread: propHandleOpenThread, ReactionIcon = DefaultReactionIcon, theme = 'simple', ThreadIcon = DefaultThreadIcon, } = props;
+    const { getMessageActions, handleOpenThread: contextHandleOpenThread, initialMessage, message, threadList, } = useMessageContext('MessageOptions');
     const { t } = useTranslationContext('MessageOptions');
+    const messageActionsDialogIsOpen = useDialogIsOpen(`message-actions--${message.id}`);
+    const reactionSelectorDialogIsOpen = useDialogIsOpen(`reaction-selector--${message.id}`);
     const handleOpenThread = propHandleOpenThread || contextHandleOpenThread;
     const messageActions = getMessageActions();
     const shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
@@ -21,12 +25,12 @@ const UnMemoizedMessageOptions = (props) => {
         initialMessage) {
         return null;
     }
-    const rootClassName = `str-chat__message-${theme}__actions str-chat__message-options`;
-    return (React.createElement("div", { className: rootClassName, "data-testid": 'message-options' },
-        React.createElement(MessageActions, { ActionsIcon: ActionsIcon, messageWrapperRef: messageWrapperRef }),
+    return (React.createElement("div", { className: clsx(`str-chat__message-${theme}__actions str-chat__message-options`, {
+            'str-chat__message-options--active': messageActionsDialogIsOpen || reactionSelectorDialogIsOpen,
+        }), "data-testid": 'message-options' },
+        React.createElement(MessageActions, { ActionsIcon: ActionsIcon }),
         shouldShowReplies && (React.createElement("button", { "aria-label": t('aria/Open Thread'), className: `str-chat__message-${theme}__actions__action str-chat__message-${theme}__actions__action--thread str-chat__message-reply-in-thread-button`, "data-testid": 'thread-action', onClick: handleOpenThread },
             React.createElement(ThreadIcon, { className: 'str-chat__message-action-icon' }))),
-        shouldShowReactions && (React.createElement("button", { "aria-expanded": showDetailedReactions, "aria-label": t('aria/Open Reaction Selector'), className: `str-chat__message-${theme}__actions__action str-chat__message-${theme}__actions__action--reactions str-chat__message-reactions-button`, "data-testid": 'message-reaction-action', onClick: onReactionListClick },
-            React.createElement(ReactionIcon, { className: 'str-chat__message-action-icon' })))));
+        shouldShowReactions && (React.createElement(ReactionSelectorWithButton, { ReactionIcon: ReactionIcon, theme: theme }))));
 };
 export const MessageOptions = React.memo(UnMemoizedMessageOptions);

package/dist/components/Message/MessageSimple.js

@@ -15,18 +15,18 @@ import { CUSTOM_MESSAGE_TYPE } from '../../constants/messageTypes';
 import { EditMessageForm as DefaultEditMessageForm, MessageInput } from '../MessageInput';
 import { MML } from '../MML';
 import { Modal } from '../Modal';
-import { ReactionsList as DefaultReactionList, ReactionSelector as DefaultReactionSelector, } from '../Reactions';
+import { ReactionsList as DefaultReactionList } from '../Reactions';
 import { MessageBounceModal } from '../MessageBounce/MessageBounceModal';
 import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context';
 import { MessageEditedTimestamp } from './MessageEditedTimestamp';
 const MessageSimpleWithContext = (props) => {
-    const { additionalMessageInputProps, clearEditingState, editing, endOfGroup, firstOfGroup, groupedByUser, handleAction, handleOpenThread, handleRetry, highlighted, isMyMessage, isReactionEnabled, message, onUserClick, onUserHover, reactionSelectorRef, renderText, showDetailedReactions, threadList, } = props;
+    const { additionalMessageInputProps, clearEditingState, editing, endOfGroup, firstOfGroup, groupedByUser, handleAction, handleOpenThread, handleRetry, highlighted, isMyMessage, message, onUserClick, onUserHover, renderText, threadList, } = props;
     const { t } = useTranslationContext('MessageSimple');
     const [isBounceDialogOpen, setIsBounceDialogOpen] = useState(false);
     const [isEditedTimestampOpen, setEditedTimestampOpen] = useState(false);
-    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, EditMessageInput = DefaultEditMessageForm, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageOptions = DefaultMessageOptions, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionSelector = DefaultReactionSelector, ReactionsList = DefaultReactionList, PinIndicator, } = useComponentContext('MessageSimple');
+    const { Attachment = DefaultAttachment, Avatar = DefaultAvatar, EditMessageInput = DefaultEditMessageForm, MessageDeleted = DefaultMessageDeleted, MessageBouncePrompt = DefaultMessageBouncePrompt, MessageOptions = DefaultMessageOptions, MessageRepliesCountButton = DefaultMessageRepliesCountButton, MessageStatus = DefaultMessageStatus, MessageTimestamp = DefaultMessageTimestamp, ReactionsList = DefaultReactionList, PinIndicator, } = useComponentContext('MessageSimple');
     const hasAttachment = messageHasAttachments(message);
     const hasReactions = messageHasReactions(message);
     if (message.customType === CUSTOM_MESSAGE_TYPE.date) {
@@ -35,13 +35,6 @@ const MessageSimpleWithContext = (props) => {
     if (message.deleted_at || message.type === 'deleted') {
         return React.createElement(MessageDeleted, { message: message });
     }
-    /** FIXME: isReactionEnabled should be removed with next major version and a proper centralized permissions logic should be put in place
-     * With the current permissions implementation it would be sth like:
-     * const messageActions = getMessageActions();
-     * const canReact = messageActions.includes(MESSAGE_ACTIONS.react);
-     */
-    const canReact = isReactionEnabled;
-    const canShowReactions = hasReactions;
     const showMetadata = !groupedByUser || endOfGroup;
     const showReplyCountButton = !threadList && !!message.reply_count;
     const allowRetry = message.status === 'failed' && message.errorStatusCode !== 403;
@@ -63,7 +56,7 @@ const MessageSimpleWithContext = (props) => {
         'str-chat__message--has-attachment': hasAttachment,
         'str-chat__message--highlighted': highlighted,
         'str-chat__message--pinned pinned-message': message.pinned,
-        'str-chat__message--with-reactions': canShowReactions,
+        'str-chat__message--with-reactions': hasReactions,
         'str-chat__message-send-can-be-retried': message?.status === 'failed' && message?.errorStatusCode !== 403,
         'str-chat__message-with-thread-link': showReplyCountButton,
         'str-chat__virtual-message__wrapper--end': endOfGroup,
@@ -81,9 +74,7 @@ const MessageSimpleWithContext = (props) => {
                     'str-chat__simple-message--error-failed': allowRetry || isBounced,
                 }), "data-testid": 'message-inner', onClick: handleClick, onKeyUp: handleClick },
                 React.createElement(MessageOptions, null),
-                React.createElement("div", { className: 'str-chat__message-reactions-host' },
-                    canShowReactions && React.createElement(ReactionsList, { reverse: true }),
-                    showDetailedReactions && canReact && React.createElement(ReactionSelector, { ref: reactionSelectorRef })),
+                React.createElement("div", { className: 'str-chat__message-reactions-host' }, hasReactions && React.createElement(ReactionsList, { reverse: true })),
                 React.createElement("div", { className: 'str-chat__message-bubble' },
                     message.attachments?.length && !message.quoted_message ? (React.createElement(Attachment, { actionHandler: handleAction, attachments: message.attachments })) : null,
                     React.createElement(MessageText, { message: message, renderText: renderText }),

package/dist/components/Message/hooks/useReactionHandler.d.ts

@@ -1,11 +1,5 @@
-import React, { RefObject } from 'react';
+import React from 'react';
 import { StreamMessage } from '../../../context/ChannelStateContext';
-import type { ReactEventHandler } from '../types';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 export declare const reactionHandlerWarning = "Reaction handler was called, but it is missing one of its required arguments.\nMake sure the ChannelAction and ChannelState contexts are properly set and the hook is initialized with a valid message.";
 export declare const useReactionHandler: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: StreamMessage<StreamChatGenerics>) => (reactionType: string, event?: React.BaseSyntheticEvent) => Promise<void>;
-export declare const useReactionClick: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(message?: StreamMessage<StreamChatGenerics>, reactionSelectorRef?: RefObject<HTMLDivElement | null>, messageWrapperRef?: RefObject<HTMLDivElement | null>, closeReactionSelectorOnClick?: boolean) => {
-    isReactionEnabled: boolean;
-    onReactionListClick: ReactEventHandler;
-    showDetailedReactions: boolean;
-};