feat: add ContextMenu animations API and global close-on-click-outside configuration mechanism (#3067)

Author: MartinCupela

src/components/ChannelListItem/ChannelListItemActionButtons.tsx

@@ -2,6 +2,7 @@ import React, { type ComponentProps, type ComponentType, type ReactNode } from '
 
 import clsx from 'clsx';
 import { ContextMenu, useDialogIsOpen, useDialogOnNearestManager } from '../Dialog';
+import { useComponentContext } from '../../context';
 import {
   defaultChannelActionSet,
   useBaseChannelActionSetFilter,
@@ -18,6 +19,7 @@ interface ChannelListItemActionButtonsInterface {
 }
 
 export const ChannelListItemActionButtons: ChannelListItemActionButtonsInterface = () => {
+  const { ContextMenu: ContextMenuComponent = ContextMenu } = useComponentContext();
   const { channel } = useChannelListItemContext();
   const [referenceElement, setReferenceElement] =
     React.useState<HTMLButtonElement | null>(null);
@@ -49,7 +51,7 @@ export const ChannelListItemActionButtons: ChannelListItemActionButtonsInterface
       {quickActionSet.map(({ Component, type }) => (
         <Component key={type} />
       ))}
-      <ContextMenu
+      <ContextMenuComponent
         className='str-chat__channel-list-item__action-buttons-context-menu'
         dialogManagerId={dialogManager?.id}
         id={dialog.id}
@@ -62,7 +64,7 @@ export const ChannelListItemActionButtons: ChannelListItemActionButtonsInterface
         {dropdownActionSet.map(({ Component, type }) => (
           <Component key={type} />
         ))}
-      </ContextMenu>
+      </ContextMenuComponent>
     </div>
   );
 };

src/components/Dialog/__tests__/DialogManagerContext.test.tsx

@@ -173,8 +173,8 @@ describe('DialogManagerContext', () => {
 
     it('creates different managers for different IDs', () => {
       render(
-        <DialogManagerProvider id={MANAGER_1_ID}>
-          <DialogManagerProvider id={MANAGER_2_ID}>
+        <DialogManagerProvider closeOnClickOutside={false} id={MANAGER_1_ID}>
+          <DialogManagerProvider closeOnClickOutside={false} id={MANAGER_2_ID}>
             <DialogTestComponent dialogId='dialog-1' managerId={MANAGER_1_ID} />
             <DialogTestComponent dialogId='dialog-2' managerId={MANAGER_2_ID} />
             <TestComponent dialogManagerId={MANAGER_1_ID} />

src/components/Dialog/__tests__/DialogsManager.test.ts

@@ -36,6 +36,16 @@ describe('DialogManager', () => {
     expect(dialogManager.openDialogCount).toBe(0);
   });
 
+  it('defaults manager closeOnClickOutside to true', () => {
+    const dialogManager = new DialogManager();
+    expect(dialogManager.closeOnClickOutside).toBe(true);
+  });
+
+  it('accepts manager closeOnClickOutside config', () => {
+    const dialogManager = new DialogManager({ closeOnClickOutside: false });
+    expect(dialogManager.closeOnClickOutside).toBe(false);
+  });
+
   it('retrieves an existing dialog', () => {
     const dialogManager = new DialogManager();
     dialogManager.state['next']((current: any) => ({