From 3b8fdd10590b2be14a4d5c55474e9dcce09d8265 Mon Sep 17 00:00:00 2001
From: zhirongwang <zhirongwang@box.com>
Date: Wed, 3 Dec 2025 22:31:40 -0800
Subject: [PATCH 1/9] feat(presence-avatar-list): add BP tooltip to
 presenceAvatarList (WEBAPP-41740)

---
 src/features/presence/PresenceAvatarList.tsx | 108 +++++++++++++------
 1 file changed, 75 insertions(+), 33 deletions(-)

diff --git a/src/features/presence/PresenceAvatarList.tsx b/src/features/presence/PresenceAvatarList.tsx
index 3cb30bfd1a..c1072ac81f 100644
--- a/src/features/presence/PresenceAvatarList.tsx
+++ b/src/features/presence/PresenceAvatarList.tsx
@@ -1,6 +1,12 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
+import {
+    Tooltip as BPTooltip,
+    TooltipProvider,
+    BlueprintModernizationProvider,
+    BlueprintModernizationContext,
+} from '@box/blueprint-web';
 // @ts-ignore flow import
 import PresenceAvatar from './PresenceAvatar';
 import PresenceAvatarTooltipContent from './PresenceAvatarTooltipContent';
@@ -27,6 +33,7 @@ export type Props = {
     maxDisplayedAvatars?: number;
     onAvatarMouseEnter?: (id: string) => void;
     onAvatarMouseLeave?: () => void;
+    isPreviewModernizationEnabled?: boolean;
 };
 
 function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.Element | null {
@@ -40,9 +47,10 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
         maxDisplayedAvatars = 3,
         onAvatarMouseEnter = noop,
         onAvatarMouseLeave = noop,
+        isPreviewModernizationEnabled = false,
         ...rest
     } = props;
-
+    const blueprintContext = React.useContext(BlueprintModernizationContext);
     const [activeTooltip, setActiveTooltip] = React.useState<string | null>(null);
 
     const hideTooltip = (): void => {
@@ -63,39 +71,60 @@ 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 (hideTooltips) {
+            return <React.Fragment key={id}>{avatarElement}</React.Fragment>;
+        }
+
+        if (isPreviewModernizationEnabled) {
+            return (
+                <BPTooltip key={id} content={tooltipContent} side="bottom">
+                    <span>{avatarElement}</span>
+                </BPTooltip>
+            );
+        }
+
+        return (
+            <Tooltip
+                key={id}
+                isShown={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,6 +140,19 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
             )}
         </div>
     );
+
+    if (isPreviewModernizationEnabled) {
+        // no blueprint modernization context found from the parent component, so we need to provide our own
+        if (!blueprintContext.enableModernizedComponents) {
+            return (
+                <BlueprintModernizationProvider enableModernizedComponents>
+                    <TooltipProvider>{content}</TooltipProvider>
+                </BlueprintModernizationProvider>
+            );
+        }
+        return <TooltipProvider>{content}</TooltipProvider>;
+    }
+    return content;
 }
 
 export { PresenceAvatarList as PresenceAvatarListComponent };

From 15f0f8e2bc0053117d85e403a8403b2ebbd5ee60 Mon Sep 17 00:00:00 2001
From: zhirongwang <rong131030001@gmail.com>
Date: Wed, 3 Dec 2025 23:17:42 -0800
Subject: [PATCH 2/9] feat(presence-avatar-list): add test (WEBAPP-41740)

---
 .../__tests__/PresenceAvatarList.test.tsx     | 223 +++++++++---------
 1 file changed, 110 insertions(+), 113 deletions(-)

diff --git a/src/features/presence/__tests__/PresenceAvatarList.test.tsx b/src/features/presence/__tests__/PresenceAvatarList.test.tsx
index 33a370617a..0e7c85c494 100644
--- a/src/features/presence/__tests__/PresenceAvatarList.test.tsx
+++ b/src/features/presence/__tests__/PresenceAvatarList.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
+import { Tooltip as BPTooltip } from '@box/blueprint-web';
 import collaboratorList from '../__mocks__/collaborators';
 // @ts-ignore flow import
 import PresenceAvatar from '../PresenceAvatar';
@@ -20,136 +21,132 @@ describe('features/presence/PresenceAvatarList', () => {
             expect(wrapper.exists('.bdl-PresenceAvatarList')).toBe(false);
         });
 
-        test('should correctly render collaborators without additional count when number of collaborators is less than or equal to maxDisplayedAvatars', () => {
-            const maxDisplayedAvatars = 3;
-            const wrapper = getWrapper({
-                collaborators: collaboratorList.slice(0, maxDisplayedAvatars),
-                maxDisplayedAvatars,
-            });
-
-            expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
-            expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(false);
-        });
+        describe.each([true, false])('when isPreviewModernizationEnabled is %s', isPreviewModernizationEnabled => {
+            test('should correctly render collaborators without additional count when number of collaborators is less than or equal to maxDisplayedAvatars', () => {
+                const maxDisplayedAvatars = 3;
+                const wrapper = getWrapper({
+                    collaborators: collaboratorList.slice(0, maxDisplayedAvatars),
+                    maxDisplayedAvatars,
+                    isPreviewModernizationEnabled,
+                });
 
-        test('should correctly render collaborators with additional count when number of collaborators is greater than maxDisplayedAvatars', () => {
-            const maxDisplayedAvatars = 3;
-            const wrapper = getWrapper({
-                maxDisplayedAvatars,
+                expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
+                expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(false);
             });
 
-            expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
-            expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(true);
-        });
+            test('should correctly render collaborators with additional count when number of collaborators is greater than maxDisplayedAvatars', () => {
+                const maxDisplayedAvatars = 3;
+                const wrapper = getWrapper({
+                    maxDisplayedAvatars,
+                    isPreviewModernizationEnabled,
+                });
 
-        test('should hide additional count if hideAdditionalCount is specified', () => {
-            const maxDisplayedAvatars = 3;
-            const wrapper = getWrapper({
-                hideAdditionalCount: true,
-                maxDisplayedAvatars,
+                expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
+                expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(true);
             });
 
-            expect(wrapper.exists('.bdl-PresenceAvatarList')).toBe(true);
-            expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
-            expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(false);
-        });
-
-        test.each(['focus', 'mouseenter'])(
-            'should show tooltip when correponding avatar encounters %s event',
-            event => {
-                const onAvatarMouseEnter = jest.fn();
+            test('should hide additional count if hideAdditionalCount is specified', () => {
+                const maxDisplayedAvatars = 3;
                 const wrapper = getWrapper({
-                    onAvatarMouseEnter,
+                    hideAdditionalCount: true,
+                    maxDisplayedAvatars,
+                    isPreviewModernizationEnabled,
                 });
 
-                expect(
-                    wrapper
-                        .find(Tooltip)
-                        .first()
-                        .prop('isShown'),
-                ).toBe(false);
-
-                // Trigger event on the first avatar
-                wrapper
-                    .find(PresenceAvatar)
-                    .first()
-                    .simulate(event);
-
-                expect(onAvatarMouseEnter).toHaveBeenCalledWith('1');
-                expect(
-                    wrapper
-                        .find(Tooltip)
-                        .first()
-                        .prop('isShown'),
-                ).toBe(true);
-            },
-        );
-
-        test.each(['blur', 'mouseleave'])('should hide tooltip when correponding avatar encounters %s event', event => {
-            const onAvatarMouseLeave = jest.fn();
-            const wrapper = getWrapper({
-                onAvatarMouseLeave,
+                expect(wrapper.exists('.bdl-PresenceAvatarList')).toBe(true);
+                expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
+                expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(false);
             });
 
-            // Cause the tooltip to show
-            wrapper
-                .find(PresenceAvatar)
-                .first()
-                .simulate('focus');
-
-            expect(
-                wrapper
-                    .find(Tooltip)
-                    .first()
-                    .prop('isShown'),
-            ).toBe(true);
-
-            // Trigger event on the first avatar
-            wrapper
-                .find(PresenceAvatar)
-                .first()
-                .simulate(event);
-
-            expect(onAvatarMouseLeave).toHaveBeenCalled();
-            expect(
-                wrapper
-                    .find(Tooltip)
-                    .first()
-                    .prop('isShown'),
-            ).toBe(false);
-        });
+            test.each(['focus', 'mouseenter'])(
+                'should show tooltip when correponding avatar encounters %s event',
+                event => {
+                    const onAvatarMouseEnter = jest.fn();
+                    const wrapper = getWrapper({
+                        onAvatarMouseEnter,
+                        isPreviewModernizationEnabled,
+                    });
+
+                    if (isPreviewModernizationEnabled) {
+                        // Blueprint tooltip doesn't use isShown prop, just verify it exists
+                        expect(wrapper.find(BPTooltip).length).toBeGreaterThan(0);
+                    } else {
+                        expect(wrapper.find(Tooltip).first().prop('isShown')).toBe(false);
+                    }
+
+                    // Trigger event on the first avatar
+                    wrapper.find(PresenceAvatar).first().simulate(event);
+
+                    expect(onAvatarMouseEnter).toHaveBeenCalledWith('1');
+                    if (!isPreviewModernizationEnabled) {
+                        expect(wrapper.find(Tooltip).first().prop('isShown')).toBe(true);
+                    }
+                },
+            );
+
+            test.each(['blur', 'mouseleave'])(
+                'should hide tooltip when correponding avatar encounters %s event',
+                event => {
+                    const onAvatarMouseLeave = jest.fn();
+                    const wrapper = getWrapper({
+                        onAvatarMouseLeave,
+                        isPreviewModernizationEnabled,
+                    });
+
+                    // Cause the tooltip to show
+                    wrapper.find(PresenceAvatar).first().simulate('focus');
+
+                    if (!isPreviewModernizationEnabled) {
+                        expect(wrapper.find(Tooltip).first().prop('isShown')).toBe(true);
+                    }
+
+                    // Trigger event on the first avatar
+                    wrapper.find(PresenceAvatar).first().simulate(event);
+
+                    expect(onAvatarMouseLeave).toHaveBeenCalled();
+                    if (!isPreviewModernizationEnabled) {
+                        expect(wrapper.find(Tooltip).first().prop('isShown')).toBe(false);
+                    }
+                },
+            );
+
+            test('should pass through additional attributes when specified', () => {
+                const avatarAttr = { 'data-resin-target': 'avatar' };
+                const wrapper = getWrapper({
+                    avatarAttributes: avatarAttr,
+                    'data-resin-feature': 'presence',
+                    isPreviewModernizationEnabled,
+                });
 
-        test('should pass through additional attributes when specified', () => {
-            const avatarAttr = { 'data-resin-target': 'avatar' };
-            const wrapper = getWrapper({
-                avatarAttributes: avatarAttr,
-                'data-resin-feature': 'presence',
+                expect(wrapper.find('.bdl-PresenceAvatarList').prop('data-resin-feature')).toEqual('presence');
+                expect(wrapper.find(PresenceAvatar).first().prop('data-resin-target')).toEqual('avatar');
             });
 
-            expect(wrapper.find('.bdl-PresenceAvatarList').prop('data-resin-feature')).toEqual('presence');
-            expect(
-                wrapper
-                    .find(PresenceAvatar)
-                    .first()
-                    .prop('data-resin-target'),
-            ).toEqual('avatar');
-        });
-
-        test('should correctly render collaborators with additional count when number of collaborators is greater than maxAddionalCollaboratorsNum + maxDisplayedAvatars', () => {
-            const maxDisplayedAvatars = 2;
-            const maxAdditionalCollaborators = 1;
-            const wrapper = getWrapper({ maxAdditionalCollaborators, maxDisplayedAvatars });
+            test('should correctly render collaborators with additional count when number of collaborators is greater than maxAddionalCollaboratorsNum + maxDisplayedAvatars', () => {
+                const maxDisplayedAvatars = 2;
+                const maxAdditionalCollaborators = 1;
+                const wrapper = getWrapper({
+                    maxAdditionalCollaborators,
+                    maxDisplayedAvatars,
+                    isPreviewModernizationEnabled,
+                });
 
-            expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
-            expect(wrapper.find('.bdl-PresenceAvatarList-count').text()).toBe('1+');
-        });
+                expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
+                expect(wrapper.find('.bdl-PresenceAvatarList-count').text()).toBe('1+');
+            });
 
-        test('should correctly render collaborators with additional count when number of collaborators is less than maxAddionalCollaboratorsNum + maxDisplayedAvatars', () => {
-            const maxDisplayedAvatars = 2;
-            const maxAdditionalCollaborators = 10;
-            const wrapper = getWrapper({ maxAdditionalCollaborators, maxDisplayedAvatars });
+            test('should correctly render collaborators with additional count when number of collaborators is less than maxAddionalCollaboratorsNum + maxDisplayedAvatars', () => {
+                const maxDisplayedAvatars = 2;
+                const maxAdditionalCollaborators = 10;
+                const wrapper = getWrapper({
+                    maxAdditionalCollaborators,
+                    maxDisplayedAvatars,
+                    isPreviewModernizationEnabled,
+                });
 
-            expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
-            expect(wrapper.find('.bdl-PresenceAvatarList-count').text()).toBe('+3');
+                expect(wrapper.find(PresenceAvatar).length).toBe(maxDisplayedAvatars);
+                expect(wrapper.find('.bdl-PresenceAvatarList-count').text()).toBe('+3');
+            });
         });
     });
 });

From bb4e88b4c0abb413518e14d8f52ab567568fc43d Mon Sep 17 00:00:00 2001
From: zhirongwang <rong131030001@gmail.com>
Date: Thu, 4 Dec 2025 13:09:15 -0800
Subject: [PATCH 3/9] feat(presence-avatar-list): add
 enableModernizedComponents prop (WEBAPP-41740)

---
 src/features/presence/PresenceAvatarList.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/features/presence/PresenceAvatarList.tsx b/src/features/presence/PresenceAvatarList.tsx
index c1072ac81f..4212707afb 100644
--- a/src/features/presence/PresenceAvatarList.tsx
+++ b/src/features/presence/PresenceAvatarList.tsx
@@ -27,6 +27,7 @@ export type Props = {
     avatarAttributes?: React.HTMLAttributes<HTMLDivElement>;
     className?: string;
     collaborators: Array<Collaborator>;
+    enableModernizedComponents?: boolean;
     hideAdditionalCount?: boolean;
     hideTooltips?: boolean;
     maxAdditionalCollaborators?: number;
@@ -41,6 +42,7 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
         avatarAttributes,
         className,
         collaborators,
+        enableModernizedComponents = false,
         hideAdditionalCount,
         hideTooltips,
         maxAdditionalCollaborators = 99,
@@ -50,7 +52,7 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
         isPreviewModernizationEnabled = false,
         ...rest
     } = props;
-    const blueprintContext = React.useContext(BlueprintModernizationContext);
+    const blueprintModernizationContext = React.useContext(BlueprintModernizationContext);
     const [activeTooltip, setActiveTooltip] = React.useState<string | null>(null);
 
     const hideTooltip = (): void => {
@@ -142,14 +144,17 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
     );
 
     if (isPreviewModernizationEnabled) {
-        // no blueprint modernization context found from the parent component, so we need to provide our own
-        if (!blueprintContext.enableModernizedComponents) {
+        // This component can be used standalone when it's not inside a ContentPreview/ContentSidebar,
+        // so we need to provide our own BlueprintModernizationProvider and TooltipProvider
+        // no context found from the parent component, so we need to provide our own
+        if (!blueprintModernizationContext.enableModernizedComponents) {
             return (
-                <BlueprintModernizationProvider enableModernizedComponents>
+                <BlueprintModernizationProvider enableModernizedComponents={enableModernizedComponents}>
                     <TooltipProvider>{content}</TooltipProvider>
                 </BlueprintModernizationProvider>
             );
         }
+        // Context found and is true, use existing context
         return <TooltipProvider>{content}</TooltipProvider>;
     }
     return content;

From 21145a1f9e09c8f0cc0868d1f2244de2dfd1059b Mon Sep 17 00:00:00 2001
From: zhirongwang <rong131030001@gmail.com>
Date: Thu, 4 Dec 2025 13:34:54 -0800
Subject: [PATCH 4/9] feat(presence-avatar-list): polish code (WEBAPP-41740)

---
 src/features/presence/PresenceAvatarList.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/features/presence/PresenceAvatarList.tsx b/src/features/presence/PresenceAvatarList.tsx
index 4212707afb..46cd336fcf 100644
--- a/src/features/presence/PresenceAvatarList.tsx
+++ b/src/features/presence/PresenceAvatarList.tsx
@@ -100,13 +100,9 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
             />
         );
 
-        if (hideTooltips) {
-            return <React.Fragment key={id}>{avatarElement}</React.Fragment>;
-        }
-
         if (isPreviewModernizationEnabled) {
             return (
-                <BPTooltip key={id} content={tooltipContent} side="bottom">
+                <BPTooltip key={id} content={tooltipContent} side="bottom" hidden={hideTooltips}>
                     <span>{avatarElement}</span>
                 </BPTooltip>
             );
@@ -115,7 +111,7 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
         return (
             <Tooltip
                 key={id}
-                isShown={activeTooltip === id}
+                isShown={!hideTooltips && activeTooltip === id}
                 position={TooltipPosition.BOTTOM_CENTER}
                 text={tooltipContent}
             >
@@ -143,10 +139,10 @@ 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 BlueprintModernizationProvider and TooltipProvider
+    // no context found from the parent component, so we need to provide our own
     if (isPreviewModernizationEnabled) {
-        // This component can be used standalone when it's not inside a ContentPreview/ContentSidebar,
-        // so we need to provide our own BlueprintModernizationProvider and TooltipProvider
-        // no context found from the parent component, so we need to provide our own
         if (!blueprintModernizationContext.enableModernizedComponents) {
             return (
                 <BlueprintModernizationProvider enableModernizedComponents={enableModernizedComponents}>

From 25fe792f1e61137ac64601dff5d7aa31ae661706 Mon Sep 17 00:00:00 2001
From: zhirongwang <rong131030001@gmail.com>
Date: Thu, 4 Dec 2025 23:25:15 -0800
Subject: [PATCH 5/9] feat(presence-avatar-list): address comments
 (WEBAPP-41740)

---
 src/features/presence/PresenceAvatarList.tsx | 30 ++++++--------------
 1 file changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/features/presence/PresenceAvatarList.tsx b/src/features/presence/PresenceAvatarList.tsx
index 46cd336fcf..c7359546b1 100644
--- a/src/features/presence/PresenceAvatarList.tsx
+++ b/src/features/presence/PresenceAvatarList.tsx
@@ -1,16 +1,12 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
-import {
-    Tooltip as BPTooltip,
-    TooltipProvider,
-    BlueprintModernizationProvider,
-    BlueprintModernizationContext,
-} from '@box/blueprint-web';
+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 = {
@@ -42,7 +38,6 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
         avatarAttributes,
         className,
         collaborators,
-        enableModernizedComponents = false,
         hideAdditionalCount,
         hideTooltips,
         maxAdditionalCollaborators = 99,
@@ -52,7 +47,6 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
         isPreviewModernizationEnabled = false,
         ...rest
     } = props;
-    const blueprintModernizationContext = React.useContext(BlueprintModernizationContext);
     const [activeTooltip, setActiveTooltip] = React.useState<string | null>(null);
 
     const hideTooltip = (): void => {
@@ -101,8 +95,11 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
         );
 
         if (isPreviewModernizationEnabled) {
+            if (hideTooltips) {
+                return avatarElement;
+            }
             return (
-                <BPTooltip key={id} content={tooltipContent} side="bottom" hidden={hideTooltips}>
+                <BPTooltip key={id} content={tooltipContent} side="bottom">
                     <span>{avatarElement}</span>
                 </BPTooltip>
             );
@@ -140,22 +137,13 @@ function PresenceAvatarList(props: Props, ref: React.Ref<HTMLDivElement>): JSX.E
     );
 
     // This component can be used standalone when it's not inside a ContentPreview/ContentSidebar,
-    // so we need to provide our own BlueprintModernizationProvider and TooltipProvider
-    // no context found from the parent component, so we need to provide our own
+    // so we need to provide our own TooltipProvider when using Blueprint tooltips
     if (isPreviewModernizationEnabled) {
-        if (!blueprintModernizationContext.enableModernizedComponents) {
-            return (
-                <BlueprintModernizationProvider enableModernizedComponents={enableModernizedComponents}>
-                    <TooltipProvider>{content}</TooltipProvider>
-                </BlueprintModernizationProvider>
-            );
-        }
-        // Context found and is true, use existing context
-        return <TooltipProvider>{content}</TooltipProvider>;
+        return <BPTooltipProvider>{content}</BPTooltipProvider>;
     }
     return content;
 }
 
 export { PresenceAvatarList as PresenceAvatarListComponent };
 
-export default React.forwardRef(PresenceAvatarList);
+export default withBlueprintModernization(React.forwardRef(PresenceAvatarList));

From 75b284866019fa964299287d717fa0df6d9cd40e Mon Sep 17 00:00:00 2001
From: zhirongwang <rong131030001@gmail.com>
Date: Thu, 4 Dec 2025 23:33:03 -0800
Subject: [PATCH 6/9] feat(presence-avatar-list): improve test and update
 snapshot (WEBAPP-41740)

---
 .../presence/__tests__/PresenceAvatarList.test.tsx   | 12 ++++++++++++
 .../__tests__/__snapshots__/Presence.test.js.snap    | 10 +++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/features/presence/__tests__/PresenceAvatarList.test.tsx b/src/features/presence/__tests__/PresenceAvatarList.test.tsx
index 0e7c85c494..49afb0f378 100644
--- a/src/features/presence/__tests__/PresenceAvatarList.test.tsx
+++ b/src/features/presence/__tests__/PresenceAvatarList.test.tsx
@@ -58,6 +58,18 @@ describe('features/presence/PresenceAvatarList', () => {
                 expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(false);
             });
 
+            test('should hide tooltips when hideTooltips is true and isPreviewModernizationEnabled is true', () => {
+                const wrapper = getWrapper({
+                    hideTooltips: true,
+                    isPreviewModernizationEnabled: true,
+                });
+
+                // When hideTooltips is true and isPreviewModernizationEnabled is true,
+                // avatars should be rendered without BPTooltip wrapper
+                expect(wrapper.find(PresenceAvatar).length).toBeGreaterThan(0);
+                expect(wrapper.find(BPTooltip).length).toBe(0);
+            });
+
             test.each(['focus', 'mouseenter'])(
                 'should show tooltip when correponding avatar encounters %s event',
                 event => {
diff --git a/src/features/presence/__tests__/__snapshots__/Presence.test.js.snap b/src/features/presence/__tests__/__snapshots__/Presence.test.js.snap
index d8b813fc81..2ff3a3deaf 100644
--- a/src/features/presence/__tests__/__snapshots__/Presence.test.js.snap
+++ b/src/features/presence/__tests__/__snapshots__/Presence.test.js.snap
@@ -17,7 +17,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   portaledClasses={[]}
   position="bottom-left"
 >
-  <ForwardRef(PresenceAvatarList)
+  <WithBlueprintModernization
     aria-label="Recent Activity"
     className="presence-avatar-container"
     collaborators={
@@ -141,7 +141,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   portaledClasses={[]}
   position="bottom-left"
 >
-  <ForwardRef(PresenceAvatarList)
+  <WithBlueprintModernization
     aria-label="Recent Activity"
     className="presence-avatar-container"
     collaborators={
@@ -265,7 +265,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   portaledClasses={[]}
   position="bottom-left"
 >
-  <ForwardRef(PresenceAvatarList)
+  <WithBlueprintModernization
     aria-label="Recent Activity"
     className="presence-avatar-container"
     collaborators={[]}
@@ -312,7 +312,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   portaledClasses={[]}
   position="bottom-left"
 >
-  <ForwardRef(PresenceAvatarList)
+  <WithBlueprintModernization
     aria-label="Recent Activity"
     className="presence-avatar-container"
     collaborators={
@@ -445,7 +445,7 @@ exports[`features/presence/Presence render() Tests for presence autofly - GROWTH
   portaledClasses={[]}
   position="bottom-left"
 >
-  <ForwardRef(PresenceAvatarList)
+  <WithBlueprintModernization
     aria-label="Recent Activity"
     className="presence-avatar-container"
     collaborators={

From 04d4355dfa67ddfc8410819b9de39ee09b73205a Mon Sep 17 00:00:00 2001
From: zhirongwang <rong131030001@gmail.com>
Date: Fri, 5 Dec 2025 08:36:31 -0800
Subject: [PATCH 7/9] feat(presence-avatar-list): improve test  (WEBAPP-41740)

---
 src/features/presence/__tests__/PresenceAvatarList.test.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/features/presence/__tests__/PresenceAvatarList.test.tsx b/src/features/presence/__tests__/PresenceAvatarList.test.tsx
index 49afb0f378..f335816efd 100644
--- a/src/features/presence/__tests__/PresenceAvatarList.test.tsx
+++ b/src/features/presence/__tests__/PresenceAvatarList.test.tsx
@@ -58,14 +58,12 @@ describe('features/presence/PresenceAvatarList', () => {
                 expect(wrapper.exists('.bdl-PresenceAvatarList-count')).toBe(false);
             });
 
-            test('should hide tooltips when hideTooltips is true and isPreviewModernizationEnabled is true', () => {
+            test('should hide tooltips when hideTooltips is true ', () => {
                 const wrapper = getWrapper({
                     hideTooltips: true,
-                    isPreviewModernizationEnabled: true,
+                    isPreviewModernizationEnabled,
                 });
 
-                // When hideTooltips is true and isPreviewModernizationEnabled is true,
-                // avatars should be rendered without BPTooltip wrapper
                 expect(wrapper.find(PresenceAvatar).length).toBeGreaterThan(0);
                 expect(wrapper.find(BPTooltip).length).toBe(0);
             });

From b9885b162638c99ca5f3d4e271546b1c8a241300 Mon Sep 17 00:00:00 2001
From: zhirongwang <rong131030001@gmail.com>
Date: Fri, 5 Dec 2025 08:54:33 -0800
Subject: [PATCH 8/9] feat(presence-avatar-list): address coderabbit comments
 (WEBAPP-41740)

---
 src/features/presence/__tests__/PresenceAvatarList.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/presence/__tests__/PresenceAvatarList.test.tsx b/src/features/presence/__tests__/PresenceAvatarList.test.tsx
index f335816efd..a4d3856af3 100644
--- a/src/features/presence/__tests__/PresenceAvatarList.test.tsx
+++ b/src/features/presence/__tests__/PresenceAvatarList.test.tsx
@@ -69,7 +69,7 @@ describe('features/presence/PresenceAvatarList', () => {
             });
 
             test.each(['focus', 'mouseenter'])(
-                'should show tooltip when correponding avatar encounters %s event',
+                'should show tooltip when corresponding avatar encounters %s event',
                 event => {
                     const onAvatarMouseEnter = jest.fn();
                     const wrapper = getWrapper({

From c66392e515ada3bb96cf46e1006495d01d2a7d3d Mon Sep 17 00:00:00 2001
From: zhirongwang <rong131030001@gmail.com>
Date: Fri, 5 Dec 2025 09:02:54 -0800
Subject: [PATCH 9/9] feat(presence-avatar-list): address coderabbit comments
 (WEBAPP-41740)

---
 src/features/presence/__tests__/PresenceAvatarList.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/presence/__tests__/PresenceAvatarList.test.tsx b/src/features/presence/__tests__/PresenceAvatarList.test.tsx
index a4d3856af3..eaebbb8472 100644
--- a/src/features/presence/__tests__/PresenceAvatarList.test.tsx
+++ b/src/features/presence/__tests__/PresenceAvatarList.test.tsx
@@ -132,7 +132,7 @@ describe('features/presence/PresenceAvatarList', () => {
                 expect(wrapper.find(PresenceAvatar).first().prop('data-resin-target')).toEqual('avatar');
             });
 
-            test('should correctly render collaborators with additional count when number of collaborators is greater than maxAddionalCollaboratorsNum + maxDisplayedAvatars', () => {
+            test('should correctly render collaborators with additional count when number of collaborators is greater than maxAdditionalCollaborators + maxDisplayedAvatars', () => {
                 const maxDisplayedAvatars = 2;
                 const maxAdditionalCollaborators = 1;
                 const wrapper = getWrapper({
@@ -145,7 +145,7 @@ describe('features/presence/PresenceAvatarList', () => {
                 expect(wrapper.find('.bdl-PresenceAvatarList-count').text()).toBe('1+');
             });
 
-            test('should correctly render collaborators with additional count when number of collaborators is less than maxAddionalCollaboratorsNum + maxDisplayedAvatars', () => {
+            test('should correctly render collaborators with additional count when number of collaborators is less than maxAdditionalCollaborators + maxDisplayedAvatars', () => {
                 const maxDisplayedAvatars = 2;
                 const maxAdditionalCollaborators = 10;
                 const wrapper = getWrapper({