Next iteration

Author: arnautov-anton

src/components/Dialog/hooks/usePopoverPosition.ts

@@ -21,7 +21,7 @@ function autoMiddlewareFor(p: PopperLikePlacement) {
   return autoPlacement({ alignment });
 }
 
-type OffsetOpt =
+export type OffsetOpt =
   | number
   | { mainAxis?: number; crossAxis?: number; alignmentAxis?: number }
   | [crossAxis: number, mainAxis: number]; // keep your tuple compat

src/components/Dialog/service/DialogAnchor.tsx

@@ -4,31 +4,54 @@ import React, { useEffect, useRef, useState } from 'react';
 import { FocusScope } from '@react-aria/focus';
 import { DialogPortalEntry } from './DialogPortal';
 import { useDialog, useDialogIsOpen } from '../hooks';
-import { usePopoverPosition } from '../hooks/usePopoverPosition';
+import { type OffsetOpt, usePopoverPosition } from '../hooks/usePopoverPosition';
 import type { PopperLikePlacement } from '../hooks';
+import type { Placement } from '@floating-ui/react';
 
 export interface DialogAnchorOptions {
   open: boolean;
   placement: PopperLikePlacement;
   referenceElement: HTMLElement | null;
   allowFlip?: boolean;
   updateKey?: unknown;
+  updatePositionOnContentResize?: boolean;
+  offset?: OffsetOpt;
 }
 
 export function useDialogAnchor<T extends HTMLElement>({
   allowFlip,
+  offset,
   open,
   placement,
   referenceElement,
   updateKey,
+  updatePositionOnContentResize = false,
 }: DialogAnchorOptions) {
   const [popperElement, setPopperElement] = useState<T | null>(null);
-  const { refs, strategy, update, x, y } = usePopoverPosition({
+  // keeps track of the first "chosen" placement (after popperElement is set) to avoid popper "jumping" to a different placement when it updates and finds a better fit; resets when popperElement is unset (!open)
+  const [stabilisedChosenPlacement, setStabilisedChosenPlacement] =
+    useState<Placement | null>(null);
+
+  const {
+    placement: chosenPlacement,
+    refs,
+    strategy,
+    update,
+    x,
+    y,
+  } = usePopoverPosition({
     allowFlip,
     freeze: true,
-    placement,
+    offset,
+    placement: stabilisedChosenPlacement ?? placement,
   });
 
+  if (!stabilisedChosenPlacement && popperElement && placement !== chosenPlacement) {
+    setStabilisedChosenPlacement(chosenPlacement);
+  } else if (stabilisedChosenPlacement && !popperElement) {
+    setStabilisedChosenPlacement(null);
+  }
+
   // Freeze reference when dialog opens so submenus (e.g. ContextMenu level 2+) stay aligned to the original anchor
   const frozenReferenceRef = useRef<HTMLElement | null>(null);
   if (open && referenceElement && !frozenReferenceRef.current) {
@@ -57,6 +80,18 @@ export function useDialogAnchor<T extends HTMLElement>({
     }
   }, [open, placement, popperElement, update, updateKey, effectiveReference]);
 
+  useEffect(() => {
+    if (!popperElement || !updatePositionOnContentResize) return;
+
+    const resizeObserver = new ResizeObserver(update);
+
+    resizeObserver.observe(popperElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [popperElement, update, updatePositionOnContentResize]);
+
   if (popperElement && !open) {
     setPopperElement(null);
   }
@@ -85,22 +120,26 @@ export const DialogAnchor = ({
   dialogManagerId,
   focus = true,
   id,
+  offset,
   placement = 'auto',
   referenceElement = null,
   tabIndex,
   trapFocus,
   updateKey,
+  updatePositionOnContentResize,
   ...restDivProps
 }: DialogAnchorProps) => {
   const dialog = useDialog({ dialogManagerId, id });
   const open = useDialogIsOpen(id, dialogManagerId);
 
   const { setPopperElement, styles } = useDialogAnchor<HTMLDivElement>({
     allowFlip,
+    offset,
     open,
     placement,
     referenceElement,
     updateKey,
+    updatePositionOnContentResize,
   });
 
   useEffect(() => {

src/components/Message/hooks/useReactionsFetcher.ts

@@ -1,4 +1,5 @@
 import { useChatContext, useTranslationContext } from '../../../context';
+import { useStableCallback } from '../../../utils/useStableCallback';
 import type {
   LocalMessage,
   ReactionResponse,
@@ -22,15 +23,15 @@ export function useReactionsFetcher(
   const { t } = useTranslationContext('useReactionFetcher');
   const { getErrorNotification, notify } = notifications;
 
-  return async (reactionType?: ReactionType, sort?: ReactionSort) => {
+  return useStableCallback(async (reactionType?: ReactionType, sort?: ReactionSort) => {
     try {
       return await fetchMessageReactions(client, message.id, reactionType, sort);
     } catch (e) {
       const errorMessage = getErrorNotification?.(message);
       notify?.(errorMessage || t('Error fetching reactions'), 'error');
       throw e;
     }
-  };
+  });
 }
 
 async function fetchMessageReactions(

src/components/Reactions/ReactionsList.tsx

@@ -1,11 +1,20 @@
-import React, { type ComponentPropsWithoutRef, useMemo, useState } from 'react';
+import React, {
+  type ComponentPropsWithoutRef,
+  type ComponentRef,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import clsx from 'clsx';
 
-import type { ReactionsListModalProps } from './ReactionsListModal';
 import { ReactionsListModal as DefaultReactionsListModal } from './ReactionsListModal';
 import { useProcessReactions } from './hooks/useProcessReactions';
 import type { MessageContextValue } from '../../context';
-import { useComponentContext, useTranslationContext } from '../../context';
+import {
+  useComponentContext,
+  useMessageContext,
+  useTranslationContext,
+} from '../../context';
 
 import { MAX_MESSAGE_REACTIONS_TO_FETCH } from '../Message/hooks';
 
@@ -16,6 +25,7 @@ import type {
   ReactionsComparator,
   ReactionType,
 } from './types';
+import { DialogAnchor, useDialogOnNearestManager } from '../Dialog';
 
 export type ReactionsListProps = Partial<
   Pick<MessageContextValue, 'handleFetchReactions' | 'reactionDetailsSort'>
@@ -87,13 +97,20 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
   );
   const { t } = useTranslationContext('ReactionsList');
   const { ReactionsListModal = DefaultReactionsListModal } = useComponentContext();
+  const { isMyMessage, message } = useMessageContext('ReactionsList');
+
+  const divRef = useRef<ComponentRef<'div'>>(null);
+  const dialogId = `message-reactions-detail-${message.id}`;
+  const { dialog, dialogManager } = useDialogOnNearestManager({ id: dialogId });
 
   const handleReactionButtonClick = (reactionType: ReactionType | null) => {
     if (totalReactionCount > MAX_MESSAGE_REACTIONS_TO_FETCH) {
       return;
     }
 
     setSelectedReactionType(reactionType);
+
+    dialog.open();
   };
 
   /**
@@ -127,13 +144,14 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
           [`str-chat__message-reactions--${visualStyle}`]:
             typeof visualStyle === 'string',
         })}
+        ref={divRef}
         role='figure'
       >
         <FragmentOrButton
           buttonIf={visualStyle === 'clustered'}
           className='str-chat__message-reactions__list-button'
           onClick={() =>
-            setSelectedReactionType(existingReactions[0]?.reactionType ?? null)
+            handleReactionButtonClick(existingReactions[0]?.reactionType ?? null)
           }
         >
           <ul className='str-chat__message-reactions__list'>
@@ -149,12 +167,12 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
                       className='str-chat__message-reactions__list-item-button'
                       onClick={() => handleReactionButtonClick(reactionType)}
                     >
-                      <span className='str-chat__message-reactions__item-icon'>
+                      <span className='str-chat__message-reactions__list-item-icon'>
                         <EmojiComponent />
                       </span>
                       {visualStyle === 'segmented' && reactionCount > 1 && (
                         <span
-                          className='str-chat__message-reactions__item-count'
+                          className='str-chat__message-reactions__list-item-count'
                           data-testclass='message-reactions-item-count'
                         >
                           {reactionCount}
@@ -174,7 +192,9 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
                     )
                   }
                 >
-                  +{totalReactionCount - cappedExistingReactions.reactionCountToDisplay}
+                  <span className='str-chat__message-reactions__overflow-count'>
+                    +{totalReactionCount - cappedExistingReactions.reactionCountToDisplay}
+                  </span>
                 </button>
               </li>
             )}
@@ -186,19 +206,25 @@ const UnMemoizedReactionsList = (props: ReactionsListProps) => {
           )}
         </FragmentOrButton>
       </div>
-      {selectedReactionType !== null && (
+
+      <DialogAnchor
+        dialogManagerId={dialogManager?.id}
+        id={dialogId}
+        offset={8}
+        placement={isMyMessage() ? 'bottom-end' : 'bottom-start'}
+        referenceElement={divRef.current}
+        trapFocus
+        updatePositionOnContentResize
+      >
         <ReactionsListModal
           handleFetchReactions={handleFetchReactions}
-          onClose={() => setSelectedReactionType(null)}
-          onSelectedReactionTypeChange={
-            setSelectedReactionType as ReactionsListModalProps['onSelectedReactionTypeChange']
-          }
-          open={selectedReactionType !== null}
+          onSelectedReactionTypeChange={setSelectedReactionType}
           reactions={existingReactions}
           selectedReactionType={selectedReactionType}
           sortReactionDetails={sortReactionDetails}
+          totalReactionCount={totalReactionCount}
         />
-      )}
+      </DialogAnchor>
     </>
   );
 };