feat(presence-avatar-list): add BP tooltip to presenceAvatarList (WEBAPP-41740)

src/features/presence/PresenceAvatarList.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
+import { Tooltip as BPTooltip, TooltipProvider as BPTooltipProvider } from '@box/blueprint-web';
 // @ts-ignore flow import
 import PresenceAvatar from './PresenceAvatar';
 import PresenceAvatarTooltipContent from './PresenceAvatarTooltipContent';
 import Tooltip, { TooltipPosition } from '../../components/tooltip';
+import { withBlueprintModernization } from '../../elements/common/withBlueprintModernization';
 import './PresenceAvatarList.scss';
 
 export type Collaborator = {
@@ -21,12 +23,14 @@ export type Props = {
     avatarAttributes?: React.HTMLAttributes<HTMLDivElement>;
     className?: string;
     collaborators: Array<Collaborator>;
+    enableModernizedComponents?: boolean;
     hideAdditionalCount?: boolean;
     hideTooltips?: boolean;
     maxAdditionalCollaborators?: number;
     maxDisplayedAvatars?: number;
     onAvatarMouseEnter?: (id: string) => void;
     onAvatarMouseLeave?: () => void;
+    isPreviewModernizationEnabled?: boolean;
 };
 
 function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.Element | null {
@@ -40,9 +44,9 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
         maxDisplayedAvatars = 3,
         onAvatarMouseEnter = noop,
         onAvatarMouseLeave = noop,
+        isPreviewModernizationEnabled = false,
         ...rest
     } = props;
-
     const [activeTooltip, setActiveTooltip] = React.useState<string | null>(null);
 
     const hideTooltip = (): void => {
@@ -63,39 +67,59 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
         return null;
     }
 
-    return (
+    const renderAvatar = (collaborator: Collaborator) => {
+        const { id, avatarUrl, name, isActive, interactedAt, interactionType } = collaborator;
+
+        const avatarElement = (
+            <PresenceAvatar
+                aria-hidden="true"
+                avatarUrl={avatarUrl}
+                id={id}
+                isActive={isActive}
+                name={name}
+                onBlur={hideTooltip}
+                onFocus={() => showTooltip(id)}
+                onMouseEnter={() => showTooltip(id)}
+                onMouseLeave={hideTooltip}
+                {...avatarAttributes}
+            />
+        );
+
+        const tooltipContent = (
+            <PresenceAvatarTooltipContent
+                name={name}
+                interactedAt={interactedAt}
+                interactionType={interactionType}
+                isActive={isActive}
+            />
+        );
+
+        if (isPreviewModernizationEnabled) {
+            if (hideTooltips) {
+                return avatarElement;
+            }
+            return (
+                <BPTooltip key={id} content={tooltipContent} side="bottom">
+                    <span>{avatarElement}</span>
+                </BPTooltip>
+            );
+        }
+
+        return (
+            <Tooltip
+                key={id}
+                isShown={!hideTooltips && activeTooltip === id}
+                position={TooltipPosition.BOTTOM_CENTER}
+                text={tooltipContent}
+            >
+                {avatarElement}
+            </Tooltip>
+        );
+    };
+
+    const content = (
         <div ref={ref} className={classNames('bdl-PresenceAvatarList', className)} {...rest}>
-            {collaborators.slice(0, maxDisplayedAvatars).map(collaborator => {
-                const { id, avatarUrl, name, isActive, interactedAt, interactionType } = collaborator;
-                return (
-                    <Tooltip
-                        key={id}
-                        isShown={!hideTooltips && activeTooltip === id}
-                        position={TooltipPosition.BOTTOM_CENTER}
-                        text={
-                            <PresenceAvatarTooltipContent
-                                name={name}
-                                interactedAt={interactedAt}
-                                interactionType={interactionType}
-                                isActive={isActive}
-                            />
-                        }
-                    >
-                        <PresenceAvatar
-                            aria-hidden="true"
-                            avatarUrl={avatarUrl}
-                            id={id}
-                            isActive={isActive}
-                            name={name}
-                            onBlur={hideTooltip}
-                            onFocus={() => showTooltip(id)}
-                            onMouseEnter={() => showTooltip(id)}
-                            onMouseLeave={hideTooltip}
-                            {...avatarAttributes}
-                        />
-                    </Tooltip>
-                );
-            })}
+            {collaborators.slice(0, maxDisplayedAvatars).map(renderAvatar)}
 
             {!hideAdditionalCount && collaborators.length > maxDisplayedAvatars && (
                 <div
@@ -111,8 +135,15 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
             )}
         </div>
     );
+
+    // This component can be used standalone when it's not inside a ContentPreview/ContentSidebar,
+    // so we need to provide our own TooltipProvider when using Blueprint tooltips
+    if (isPreviewModernizationEnabled) {
+        return <BPTooltipProvider>{content}</BPTooltipProvider>;
+    }
+    return content;
 }
 
 export { PresenceAvatarList as PresenceAvatarListComponent };
 
-export default React.forwardRef(PresenceAvatarList);
+export default withBlueprintModernization(React.forwardRef(PresenceAvatarList));