stream-chat-react 13.9.0 → 13.10.0

package/dist/experimental/MessageActions/MessageActions.js

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useState } from 'react';
 import { useChatContext, useMessageContext, useTranslationContext } from '../../context';
 import { ActionsIcon } from '../../components/Message/icons';
-import { DialogAnchor, useDialog, useDialogIsOpen } from '../../components/Dialog';
+import { DialogAnchor, useDialogIsOpen, useDialogOnNearestManager, } from '../../components/Dialog';
 import { MessageActionsWrapper } from '../../components/MessageActions/MessageActions';
 import { useBaseMessageActionSetFilter, useSplitMessageActionSet } from './hooks';
 import { defaultMessageActionSet } from './defaults';
@@ -21,9 +21,9 @@ export const MessageActions = ({ disableBaseMessageActionSetFilter = false, mess
     const { dropdownActionSet, quickActionSet } = useSplitMessageActionSet(filteredMessageActionSet);
     const dropdownDialogId = `message-actions--${message.id}`;
     const reactionSelectorDialogId = `reaction-selector--${message.id}`;
-    const dialog = useDialog({ id: dropdownDialogId });
-    const dropdownDialogIsOpen = useDialogIsOpen(dropdownDialogId);
-    const reactionSelectorDialogIsOpen = useDialogIsOpen(reactionSelectorDialogId);
+    const { dialog, dialogManager } = useDialogOnNearestManager({ id: dropdownDialogId });
+    const dropdownDialogIsOpen = useDialogIsOpen(dropdownDialogId, dialogManager?.id);
+    const reactionSelectorDialogIsOpen = useDialogIsOpen(reactionSelectorDialogId, dialogManager?.id);
     // do not render anything if total action count is zero
     if (dropdownActionSet.length + quickActionSet.length === 0) {
         return null;
@@ -34,7 +34,7 @@ export const MessageActions = ({ disableBaseMessageActionSetFilter = false, mess
         dropdownActionSet.length > 0 && (React.createElement(MessageActionsWrapper, { inline: false, toggleOpen: dialog?.toggle },
             React.createElement("button", { "aria-expanded": dropdownDialogIsOpen, "aria-haspopup": 'true', "aria-label": t('aria/Open Message Actions Menu'), className: 'str-chat__message-actions-box-button', "data-testid": 'message-actions-toggle-button', ref: setActionsBoxButtonElement },
                 React.createElement(ActionsIcon, { className: 'str-chat__message-action-icon' })),
-            React.createElement(DialogAnchor, { id: dropdownDialogId, placement: isMyMessage() ? 'top-end' : 'top-start', referenceElement: actionsBoxButtonElement, tabIndex: -1, trapFocus: true },
+            React.createElement(DialogAnchor, { dialogManagerId: dialogManager?.id, id: dropdownDialogId, placement: isMyMessage() ? 'top-end' : 'top-start', referenceElement: actionsBoxButtonElement, tabIndex: -1, trapFocus: true },
                 React.createElement(DropdownBox, { open: dropdownDialogIsOpen }, dropdownActionSet.map(({ Component: DropdownActionComponent, type }) => (React.createElement(DropdownActionComponent, { key: type }))))))),
         quickActionSet.map(({ Component: QuickActionComponent, type }) => (React.createElement(QuickActionComponent, { key: type })))));
 };