stream-chat-react 12.0.0-rc.8 → 12.0.0

package/dist/components/ChatView/ChatView.js

@@ -0,0 +1,103 @@
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
+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({
+    activeChatView: 'channels',
+    setActiveChatView: () => undefined,
+});
+export const ChatView = ({ children }) => {
+    const [activeChatView, setActiveChatView] = useState('channels');
+    const { theme } = useChatContext();
+    const value = useMemo(() => ({ activeChatView, setActiveChatView }), [activeChatView]);
+    return (React.createElement(ChatViewContext.Provider, { value: value },
+        React.createElement("div", { className: clsx('str-chat', theme, 'str-chat__chat-view') }, children)));
+};
+const ChannelsView = ({ children }) => {
+    const { activeChatView } = useContext(ChatViewContext);
+    if (activeChatView !== 'channels')
+        return null;
+    return React.createElement("div", { className: 'str-chat__chat-view__channels' }, children);
+};
+const ThreadsViewContext = createContext({
+    activeThread: undefined,
+    setActiveThread: () => undefined,
+});
+export const useThreadsViewContext = () => useContext(ThreadsViewContext);
+const ThreadsView = ({ children }) => {
+    const { activeChatView } = useContext(ChatViewContext);
+    const [activeThread, setActiveThread] = useState(undefined);
+    const value = useMemo(() => ({ activeThread, setActiveThread }), [activeThread]);
+    if (activeChatView !== 'threads')
+        return null;
+    return (React.createElement(ThreadsViewContext.Provider, { value: value },
+        React.createElement("div", { className: 'str-chat__chat-view__threads' }, children)));
+};
+// thread business logic that's impossible to keep within client but encapsulated for ease of use
+export const useActiveThread = ({ activeThread }) => {
+    useEffect(() => {
+        if (!activeThread)
+            return;
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible' && document.hasFocus()) {
+                activeThread.activate();
+            }
+            if (document.visibilityState === 'hidden' || !document.hasFocus()) {
+                activeThread.deactivate();
+            }
+        };
+        handleVisibilityChange();
+        window.addEventListener('focus', handleVisibilityChange);
+        window.addEventListener('blur', handleVisibilityChange);
+        return () => {
+            activeThread.deactivate();
+            window.addEventListener('blur', handleVisibilityChange);
+            window.removeEventListener('focus', handleVisibilityChange);
+        };
+    }, [activeThread]);
+};
+// ThreadList under View.Threads context, will access setting function and on item click will set activeThread
+// which can be accessed for the ease of use by ThreadAdapter which forwards it to required ThreadProvider
+// ThreadList can easily live without this context and click handler can be overriden, ThreadAdapter is then no longer needed
+/**
+ * // this setup still works
+ * const MyCustomComponent = () => {
+ *  const [activeThread, setActiveThread] = useState();
+ *
+ *  return <>
+ *    // simplified
+ *    <ThreadList onItemPointerDown={setActiveThread} />
+ *    <ThreadProvider thread={activeThread}>
+ *      <Thread />
+ *    </ThreadProvider>
+ *  </>
+ * }
+ *
+ */
+const ThreadAdapter = ({ children }) => {
+    const { activeThread } = useThreadsViewContext();
+    useActiveThread({ activeThread });
+    return React.createElement(ThreadProvider, { thread: activeThread }, children);
+};
+const selector = (nextValue) => [nextValue.unreadThreadCount];
+const ChatViewSelector = () => {
+    const { client } = useChatContext();
+    const [unreadThreadCount] = useStateStore(client.threads.state, selector);
+    const { activeChatView, setActiveChatView } = useContext(ChatViewContext);
+    return (React.createElement("div", { className: 'str-chat__chat-view__selector' },
+        React.createElement("button", { "aria-selected": activeChatView === 'channels', className: 'str-chat__chat-view__selector-button', onPointerDown: () => setActiveChatView('channels'), role: 'tab' },
+            React.createElement(Icon.MessageBubbleEmpty, null),
+            React.createElement("div", { className: 'str-chat__chat-view__selector-button-text' }, "Channels")),
+        React.createElement("button", { "aria-selected": activeChatView === 'threads', className: 'str-chat__chat-view__selector-button', onPointerDown: () => setActiveChatView('threads'), role: 'tab' },
+            React.createElement(UnreadCountBadge, { count: unreadThreadCount, position: 'top-right' },
+                React.createElement(Icon.MessageBubble, null)),
+            React.createElement("div", { className: 'str-chat__chat-view__selector-button-text' }, "Threads"))));
+};
+ChatView.Channels = ChannelsView;
+ChatView.Threads = ThreadsView;
+ChatView.ThreadAdapter = ThreadAdapter;
+ChatView.Selector = ChatViewSelector;

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

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

package/dist/components/ChatView/index.js

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

package/dist/components/DateSeparator/DateSeparator.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TimestampFormatterOptions } from '../../i18n/utils';
+import type { TimestampFormatterOptions } from '../../i18n/types';
 export type DateSeparatorProps = TimestampFormatterOptions & {
     /** The date to format */
     date: Date;

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/EventComponent/EventComponent.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { AvatarProps } from '../Avatar';
 import type { StreamMessage } from '../../context/ChannelStateContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { TimestampFormatterOptions } from '../../i18n/utils';
+import type { TimestampFormatterOptions } from '../../i18n/types';
 export type EventComponentProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TimestampFormatterOptions & {
     /** Message object */
     message: StreamMessage<StreamChatGenerics>;

package/dist/components/Message/Message.js

@@ -1,14 +1,15 @@
-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';
 const MessageWithContext = (props) => {
     const { canPin, groupedByUser, Message: propMessage, message, messageActions = Object.keys(MESSAGE_ACTIONS), onUserClick: propOnUserClick, onUserHover: propOnUserHover, userRoles, } = props;
     const { client } = useChatContext('Message');
     const { read } = useChannelStateContext('Message');
     const { Message: contextMessage } = useComponentContext('Message');
     const actionsEnabled = message.type === 'regular' && message.status === 'received';
-    const MessageUIComponent = propMessage || contextMessage;
+    const MessageUIComponent = propMessage ?? contextMessage ?? DefaultMessage;
     const { clearEdit, editing, setEdit } = useEditHandler();
     const { onUserClick, onUserHover } = useUserHandler(message, {
         onUserClickHandler: propOnUserClick,
@@ -75,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);
@@ -112,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,16 +1,19 @@
+import clsx from 'clsx';
 import React from 'react';
 import { ActionsIcon as DefaultActionsIcon, ReactionIcon as DefaultReactionIcon, ThreadIcon as DefaultThreadIcon, } from './icons';
-import { MESSAGE_ACTIONS, showMessageActionsBox } from './utils';
+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 { customMessageActions, 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 showActionsBox = showMessageActionsBox(messageActions, threadList) || !!customMessageActions;
     const shouldShowReactions = messageActions.indexOf(MESSAGE_ACTIONS.react) > -1;
     const shouldShowReplies = messageActions.indexOf(MESSAGE_ACTIONS.reply) > -1 && displayReplies && !threadList;
     if (!message.type ||
@@ -22,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' },
-        showActionsBox && (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

@@ -10,22 +10,23 @@ import { MessageText } from './MessageText';
 import { MessageTimestamp as DefaultMessageTimestamp } from './MessageTimestamp';
 import { areMessageUIPropsEqual, isMessageBounced, isMessageEdited, messageHasAttachments, messageHasReactions, } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
+import { Attachment as DefaultAttachment } from '../Attachment';
 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, 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) {
@@ -34,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;
@@ -62,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,
@@ -80,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/MessageTimestamp.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { StreamMessage } from '../../context/ChannelStateContext';
+import type { TimestampFormatterOptions } from '../../i18n/types';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import type { TimestampFormatterOptions } from '../../i18n/utils';
 export type MessageTimestampProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TimestampFormatterOptions & {
     customClass?: string;
     message?: StreamMessage<StreamChatGenerics>;

package/dist/components/Message/QuotedMessage.js

@@ -5,8 +5,9 @@ import { useComponentContext } from '../../context/ComponentContext';
 import { useMessageContext } from '../../context/MessageContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useChannelActionContext } from '../../context/ChannelActionContext';
+import { Attachment as DefaultAttachment } from '../Attachment';
 export const QuotedMessage = () => {
-    const { Attachment, Avatar: ContextAvatar } = useComponentContext('QuotedMessage');
+    const { Attachment = DefaultAttachment, Avatar: ContextAvatar, } = useComponentContext('QuotedMessage');
     const { isMyMessage, message } = useMessageContext('QuotedMessage');
     const { t, userLanguage } = useTranslationContext('QuotedMessage');
     const { jumpToMessage } = useChannelActionContext('QuotedMessage');