fix: ThemingV2 beta adjustments

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>

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'
               >
                 {

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,

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}

src/components/Tooltip/hooks/useEnterLeaveHandlers.ts

@@ -4,23 +4,23 @@ 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],
   );
 
   const handleLeave: React.MouseEventHandler<T> = useCallback(
     (e) => {
-      setPopperVisible(false);
+      setTooltipVisible(false);
       onMouseLeave?.(e);
     },
     [onMouseLeave],
   );
 
-  return { handleEnter, handleLeave, popperVisible };
+  return { handleEnter, handleLeave, tooltipVisible };
 };