feat: add centralized dialog management

docusaurus/docs/React/guides/theming/message-ui.mdx

@@ -387,7 +387,7 @@ const CustomMessageUi = () => {
 
 Message grouping is being managed automatically by the SDK and each parent element (which holds our message UI) receives an appropriate class name based on which we can adjust our rules to display metadata elements only when it's appropriate to make our UI look less busy.
 
-{/_ TODO: link to grouping logic (maybe how to adjust it if needed) _/}
+[//]: # 'TODO: link to grouping logic (maybe how to adjust it if needed)'
 
 ```css
 .custom-message-ui__metadata {

src/components/Dialog/DialogAnchor.tsx

@@ -0,0 +1,116 @@
+import clsx from 'clsx';
+import { Placement } from '@popperjs/core';
+import React, { ComponentProps, PropsWithChildren, 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 interface DialogAnchorOptions {
+  open: boolean;
+  placement: Placement;
+  referenceElement: HTMLElement | null;
+}
+
+export function useDialogAnchor<T extends HTMLElement>({
+  open,
+  placement,
+  referenceElement,
+}: DialogAnchorOptions) {
+  const [popperElement, setPopperElement] = useState<T | null>(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,
+  };
+}
+
+type DialogAnchorProps = PropsWithChildren<Partial<DialogAnchorOptions>> & {
+  id: string;
+  focus?: boolean;
+  trapFocus?: boolean;
+} & ComponentProps<'div'>;
+
+export const DialogAnchor = ({
+  children,
+  className,
+  focus = true,
+  id,
+  placement = 'auto',
+  referenceElement = null,
+  trapFocus,
+  ...restDivProps
+}: DialogAnchorProps) => {
+  const dialog = useDialog({ id });
+  const open = useDialogIsOpen(id);
+  const { attributes, setPopperElement, styles } = useDialogAnchor<HTMLDivElement>({
+    open,
+    placement,
+    referenceElement,
+  });
+
+  useEffect(() => {
+    if (!open) return;
+    const hideOnEscape = (event: KeyboardEvent) => {
+      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 (
+    <DialogPortalEntry dialogId={id}>
+      <FocusScope autoFocus={focus} contain={trapFocus} restoreFocus>
+        <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}
+        </div>
+      </FocusScope>
+    </DialogPortalEntry>
+  );
+};

src/components/Dialog/DialogPortal.tsx

@@ -0,0 +1,60 @@
+import React, { PropsWithChildren, useEffect, useLayoutEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useDialogIsOpen } from './hooks';
+import { useDialogsManager } from '../../context';
+
+export const DialogPortalDestination = () => {
+  const { dialogsManager } = useDialogsManager();
+  const [shouldRender, setShouldRender] = useState(
+    !!dialogsManager.state.getLatestValue().openDialogCount,
+  );
+
+  useEffect(
+    () =>
+      dialogsManager.state.subscribeWithSelector<number[]>(
+        ({ openDialogCount }) => [openDialogCount],
+        ([openDialogCount]) => {
+          setShouldRender(openDialogCount > 0);
+        },
+      ),
+    [dialogsManager],
+  );
+
+  return (
+    <div
+      className='str-chat__dialog-overlay'
+      data-str-chat__portal-id={dialogsManager.id}
+      data-testid='str-chat__dialog-overlay'
+      onClick={() => dialogsManager.closeAll()}
+      style={
+        {
+          '--str-chat__dialog-overlay-height': shouldRender ? '100%' : '0',
+        } as React.CSSProperties
+      }
+    ></div>
+  );
+};
+
+type DialogPortalEntryProps = {
+  dialogId: string;
+};
+
+export const DialogPortalEntry = ({
+  children,
+  dialogId,
+}: PropsWithChildren<DialogPortalEntryProps>) => {
+  const { dialogsManager } = useDialogsManager();
+  const dialogIsOpen = useDialogIsOpen(dialogId);
+  const [portalDestination, setPortalDestination] = useState<Element | null>(null);
+  useLayoutEffect(() => {
+    const destination = document.querySelector(
+      `div[data-str-chat__portal-id="${dialogsManager.id}"]`,
+    );
+    if (!destination) return;
+    setPortalDestination(destination);
+  }, [dialogsManager, dialogIsOpen]);
+
+  if (!portalDestination) return null;
+
+  return createPortal(children, portalDestination);
+};

src/components/Dialog/DialogsManager.ts

@@ -0,0 +1,133 @@
+import { StateStore } from 'stream-chat';
+
+type DialogId = string;
+
+export type GetOrCreateParams = {
+  id: DialogId;
+};
+
+export type Dialog = {
+  close: () => void;
+  id: DialogId;
+  isOpen: boolean | undefined;
+  open: (zIndex?: number) => void;
+  remove: () => void;
+  toggle: () => void;
+  toggleSingle: () => void;
+};
+
+type DialogInitOptions = {
+  id?: string;
+};
+
+type Dialogs = Record<DialogId, Dialog>;
+
+type DialogsManagerState = {
+  dialogs: Dialogs;
+  openDialogCount: number;
+};
+
+export class DialogsManager {
+  id: string;
+  state = new StateStore<DialogsManagerState>({
+    dialogs: {},
+    openDialogCount: 0,
+  });
+
+  constructor({ id }: DialogInitOptions = {}) {
+    this.id = id ?? new Date().getTime().toString();
+  }
+
+  getOrCreate({ id }: GetOrCreateParams) {
+    let dialog = this.state.getLatestValue().dialogs[id];
+    if (!dialog) {
+      dialog = {
+        close: () => {
+          this.close(id);
+        },
+        id,
+        isOpen: false,
+        open: () => {
+          this.open({ id });
+        },
+        remove: () => {
+          this.remove(id);
+        },
+        toggle: () => {
+          this.toggleOpen({ id });
+        },
+        toggleSingle: () => {
+          this.toggleOpenSingle({ id });
+        },
+      };
+      this.state.next((current) => ({
+        ...current,
+        ...{ dialogs: { ...current.dialogs, [id]: dialog } },
+      }));
+    }
+    return dialog;
+  }
+
+  open(params: GetOrCreateParams, single?: boolean) {
+    const dialog = this.getOrCreate(params);
+    if (dialog.isOpen) return;
+    if (single) {
+      this.closeAll();
+    }
+    this.state.next((current) => ({
+      ...current,
+      dialogs: { ...current.dialogs, [dialog.id]: { ...dialog, isOpen: true } },
+      openDialogCount: ++current.openDialogCount,
+    }));
+  }
+
+  close(id: DialogId) {
+    const dialog = this.state.getLatestValue().dialogs[id];
+    if (!dialog?.isOpen) return;
+    dialog.isOpen = false;
+    this.state.next((current) => ({
+      ...current,
+      dialogs: { ...current.dialogs, [dialog.id]: { ...dialog, isOpen: false } },
+      openDialogCount: --current.openDialogCount,
+    }));
+  }
+
+  closeAll() {
+    Object.values(this.state.getLatestValue().dialogs).forEach((dialog) => dialog.close());
+  }
+
+  toggleOpen(params: GetOrCreateParams) {
+    if (this.state.getLatestValue().dialogs[params.id]?.isOpen) {
+      this.close(params.id);
+    } else {
+      this.open(params);
+    }
+  }
+
+  toggleOpenSingle(params: GetOrCreateParams) {
+    if (this.state.getLatestValue().dialogs[params.id]?.isOpen) {
+      this.close(params.id);
+    } else {
+      this.open(params, true);
+    }
+  }
+
+  remove(id: DialogId) {
+    const state = this.state.getLatestValue();
+    const dialog = state.dialogs[id];
+    if (!dialog) return;
+
+    this.state.next((current) => ({
+      ...current,
+      dialogs: Object.entries(current.dialogs).reduce<Dialogs>((acc, [dialogId, dialog]) => {
+        if (id !== dialogId) {
+          acc[id] = dialog;
+        }
+        return acc;
+      }, {}),
+      openDialogCount:
+        current.openDialogCount &&
+        (dialog.isOpen ? current.openDialogCount - 1 : current.openDialogCount),
+    }));
+  }
+}