From ef4e206d44653724b6bb42d268a66a06cfcacdf9 Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Mon, 29 Aug 2022 16:27:09 +0200
Subject: [PATCH 1/2] fix: adjust variable names

---
 src/components/Message/MessageStatus.tsx               | 8 ++++----
 src/components/Reactions/ReactionsList.tsx             | 8 ++++----
 src/components/Reactions/hooks/useProcessReactions.tsx | 4 ++--
 src/components/Tooltip/hooks/useEnterLeaveHandlers.ts  | 8 ++++----
 4 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Message/MessageStatus.tsx b/src/components/Message/MessageStatus.tsx
index c67f345982..287cec0cd8 100644
--- a/src/components/Message/MessageStatus.tsx
+++ b/src/components/Message/MessageStatus.tsx
@@ -33,7 +33,7 @@ const UnMemoizedMessageStatus = <
     tooltipUserNameMapper = mapToUserNameOrId,
   } = props;
 
-  const { handleEnter, handleLeave, popperVisible } = useEnterLeaveHandlers<HTMLSpanElement>();
+  const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers<HTMLSpanElement>();
 
   const { client } = useChatContext<StreamChatGenerics>('MessageStatus');
   const { Avatar: contextAvatar } = useComponentContext<StreamChatGenerics>('MessageStatus');
@@ -82,7 +82,7 @@ const UnMemoizedMessageStatus = <
             <PopperTooltip
               offset={[0, 5]}
               referenceElement={referenceElement}
-              visible={popperVisible}
+              visible={tooltipVisible}
             >
               {t<string>('Sending...')}
             </PopperTooltip>
@@ -98,7 +98,7 @@ const UnMemoizedMessageStatus = <
             <PopperTooltip
               offset={[0, 5]}
               referenceElement={referenceElement}
-              visible={popperVisible}
+              visible={tooltipVisible}
             >
               {t<string>('Delivered')}
             </PopperTooltip>
@@ -116,7 +116,7 @@ const UnMemoizedMessageStatus = <
             <PopperTooltip
               offset={[0, 5]}
               referenceElement={referenceElement}
-              visible={popperVisible}
+              visible={tooltipVisible}
             >
               {getReadByTooltipText(readBy, t, client, tooltipUserNameMapper)}
             </PopperTooltip>
diff --git a/src/components/Reactions/ReactionsList.tsx b/src/components/Reactions/ReactionsList.tsx
index 3871f1d9f2..7866c1505e 100644
--- a/src/components/Reactions/ReactionsList.tsx
+++ b/src/components/Reactions/ReactionsList.tsx
@@ -44,7 +44,7 @@ const ButtonWithTooltip = ({
 }: Omit<ComponentProps<'button'>, 'ref'>) => {
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
 
-  const { handleEnter, handleLeave, popperVisible } = useEnterLeaveHandlers({
+  const { handleEnter, handleLeave, tooltipVisible } = useEnterLeaveHandlers({
     onMouseEnter,
     onMouseLeave,
   });
@@ -54,7 +54,7 @@ const ButtonWithTooltip = ({
   return (
     <>
       {themeVersion === '2' && (
-        <PopperTooltip referenceElement={referenceElement} visible={popperVisible}>
+        <PopperTooltip referenceElement={referenceElement} visible={tooltipVisible}>
           {rest.title}
         </PopperTooltip>
       )}
@@ -82,7 +82,7 @@ const UnMemoizedReactionsList = <
 
   const {
     additionalEmojiProps,
-    aggregatedNamesByType,
+    aggregatedUserNamesByType,
     emojiData,
     getEmojiByReactionType,
     iHaveReactedWithReaction,
@@ -121,7 +121,7 @@ const UnMemoizedReactionsList = <
             >
               <ButtonWithTooltip
                 aria-label={`Reactions: ${reactionType}`}
-                title={aggregatedNamesByType[reactionType].join(', ')}
+                title={aggregatedUserNamesByType[reactionType].join(', ')}
                 type='button'
               >
                 {
diff --git a/src/components/Reactions/hooks/useProcessReactions.tsx b/src/components/Reactions/hooks/useProcessReactions.tsx
index 49c95dc056..bc15e2e2d3 100644
--- a/src/components/Reactions/hooks/useProcessReactions.tsx
+++ b/src/components/Reactions/hooks/useProcessReactions.tsx
@@ -86,7 +86,7 @@ export const useProcessReactions = <
     [reactionCounts, supportedReactionsArePresent],
   );
 
-  const aggregatedNamesByType = useMemo(
+  const aggregatedUserNamesByType = useMemo(
     () =>
       latestReactions.reduce<Record<string, Array<string>>>((typeMap, { type, user }) => {
         typeMap[type] ??= [];
@@ -100,7 +100,7 @@ export const useProcessReactions = <
 
   return {
     additionalEmojiProps: reactionsAreCustom ? additionalEmojiProps : emojiSetDef,
-    aggregatedNamesByType,
+    aggregatedUserNamesByType,
     emojiData,
     getEmojiByReactionType,
     iHaveReactedWithReaction,
diff --git a/src/components/Tooltip/hooks/useEnterLeaveHandlers.ts b/src/components/Tooltip/hooks/useEnterLeaveHandlers.ts
index f887044a38..7a02224b3e 100644
--- a/src/components/Tooltip/hooks/useEnterLeaveHandlers.ts
+++ b/src/components/Tooltip/hooks/useEnterLeaveHandlers.ts
@@ -4,11 +4,11 @@ export const useEnterLeaveHandlers = <T extends HTMLElement>({
   onMouseEnter,
   onMouseLeave,
 }: Partial<Record<'onMouseEnter' | 'onMouseLeave', React.MouseEventHandler<T>>> = {}) => {
-  const [popperVisible, setPopperVisible] = useState(false);
+  const [tooltipVisible, setTooltipVisible] = useState(false);
 
   const handleEnter: React.MouseEventHandler<T> = useCallback(
     (e) => {
-      setPopperVisible(true);
+      setTooltipVisible(true);
       onMouseEnter?.(e);
     },
     [onMouseEnter],
@@ -16,11 +16,11 @@ export const useEnterLeaveHandlers = <T extends HTMLElement>({
 
   const handleLeave: React.MouseEventHandler<T> = useCallback(
     (e) => {
-      setPopperVisible(false);
+      setTooltipVisible(false);
       onMouseLeave?.(e);
     },
     [onMouseLeave],
   );
 
-  return { handleEnter, handleLeave, popperVisible };
+  return { handleEnter, handleLeave, tooltipVisible };
 };

From 2a34ab863ee919f7e6981444abfab286429caf4d Mon Sep 17 00:00:00 2001
From: Anton Arnautov <arnautov.anton@gmail.com>
Date: Mon, 29 Aug 2022 16:28:19 +0200
Subject: [PATCH 2/2] fix(PopperTooltip): add type export, document properties,
 remove unused className

---
 src/components/Tooltip/Tooltip.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
index 33cb15d78a..fa369e16bc 100644
--- a/src/components/Tooltip/Tooltip.tsx
+++ b/src/components/Tooltip/Tooltip.tsx
@@ -7,18 +7,24 @@ export const Tooltip = ({ children, ...rest }: ComponentProps<'div'>) => (
   </div>
 );
 
+export type PopperTooltipProps<T extends HTMLElement> = React.PropsWithChildren<{
+  /** Reference element to which the tooltip should attach to */
+  referenceElement: T | null;
+  /** Popper's modifier (offset) property - [xAxis offset, yAxis offset], default [0, 10] */
+  offset?: [number, number];
+  /** Popper's placement property defining default position of the tooltip, default 'top' */
+  placement?: PopperProps<unknown>['placement'];
+  /** Tells component whether to render it's contents */
+  visible?: boolean;
+}>;
+
 export const PopperTooltip = <T extends HTMLElement>({
   children,
   offset = [0, 10],
   referenceElement,
   placement = 'top',
-  visible: visible = false,
-}: React.PropsWithChildren<{
-  referenceElement: T | null;
-  offset?: [number, number];
-  placement?: PopperProps<unknown>['placement'];
-  visible?: boolean;
-}>) => {
+  visible = false,
+}: PopperTooltipProps<T>) => {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   const { attributes, styles } = usePopper(referenceElement, popperElement, {
     modifiers: [
@@ -36,7 +42,7 @@ export const PopperTooltip = <T extends HTMLElement>({
 
   return (
     <div
-      className='str-chat__tooltip str-chat__button-tooltip'
+      className='str-chat__tooltip'
       ref={setPopperElement}
       style={styles.popper}
       {...attributes.popper}