@atlaskit/profilecard 24.13.7 → 24.14.1

package/dist/esm/components/User/ProfileCardResourced.js

@@ -13,6 +13,8 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React, { Suspense } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
 import filterActions from '../../internal/filterActions';
 import { CardWrapper } from '../../styled/UserTrigger';
 import { fireEvent } from '../../util/analytics';
@@ -48,10 +50,23 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         fireEvent(_this.props.createAnalyticsEvent, payload);
       }
     });
+    _defineProperty(_this, "fireAnalyticsNext", function (eventKey) {
+      // Don't fire analytics if the component is unmounted
+      if (!_this._isMounted) {
+        return;
+      }
+      if (_this.props.fireEvent) {
+        var _this$props;
+        for (var _len2 = arguments.length, attributes = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+          attributes[_key2 - 1] = arguments[_key2];
+        }
+        (_this$props = _this.props).fireEvent.apply(_this$props, [eventKey].concat(attributes));
+      }
+    });
     _defineProperty(_this, "clientFetchProfile", function () {
-      var _this$props = _this.props,
-        cloudId = _this$props.cloudId,
-        userId = _this$props.userId;
+      var _this$props2 = _this.props,
+        cloudId = _this$props2.cloudId,
+        userId = _this$props2.userId;
       var isLoading = _this.state.isLoading;
       if (isLoading === true) {
         // don't fetch data when fetching is in process
@@ -62,7 +77,7 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         hasError: false,
         data: null
       }, function () {
-        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId, userId, _this.fireAnalytics), _this.props.resourceClient.getReportingLines(userId), _this.props.resourceClient.shouldShowGiveKudos(), _this.props.resourceClient.getTeamCentralBaseUrl({
+        var requests = Promise.all([_this.props.resourceClient.getProfile(cloudId, userId, _this.fireAnalytics, _this.fireAnalyticsNext), _this.props.resourceClient.getReportingLines(userId), _this.props.resourceClient.shouldShowGiveKudos(), _this.props.resourceClient.getTeamCentralBaseUrl({
           withOrgContext: true,
           withSiteContext: true
         })]);
@@ -101,10 +116,10 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props2 = this.props,
-        userId = _this$props2.userId,
-        cloudId = _this$props2.cloudId,
-        resourceClient = _this$props2.resourceClient;
+      var _this$props3 = this.props,
+        userId = _this$props3.userId,
+        cloudId = _this$props3.cloudId,
+        resourceClient = _this$props3.resourceClient;
       if (userId !== prevProps.userId || cloudId !== prevProps.cloudId || resourceClient !== prevProps.resourceClient) {
         this.setState({
           isLoading: undefined
@@ -154,15 +169,16 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         reportingLinesData = _this$state.reportingLinesData,
         isKudosEnabled = _this$state.isKudosEnabled,
         teamCentralBaseUrl = _this$state.teamCentralBaseUrl;
-      var _this$props3 = this.props,
-        onReportingLinesClick = _this$props3.onReportingLinesClick,
-        cloudId = _this$props3.cloudId,
-        userId = _this$props3.userId,
-        addFlag = _this$props3.addFlag;
+      var _this$props4 = this.props,
+        onReportingLinesClick = _this$props4.onReportingLinesClick,
+        cloudId = _this$props4.cloudId,
+        userId = _this$props4.userId,
+        addFlag = _this$props4.addFlag;
       var isFetchingOrNotStartToFetchYet = isLoading === true || isLoading === undefined;
       if (isFetchingOrNotStartToFetchYet) {
         return /*#__PURE__*/React.createElement(CardWrapper, null, /*#__PURE__*/React.createElement(UserLoadingState, {
-          fireAnalytics: this.fireAnalytics
+          fireAnalytics: this.fireAnalytics,
+          fireAnalyticsNext: this.fireAnalyticsNext
         }));
       } else if (hasError) {
         return /*#__PURE__*/React.createElement(CardWrapper, {
@@ -170,7 +186,8 @@ var ProfileCardResourced = /*#__PURE__*/function (_React$PureComponent) {
         }, /*#__PURE__*/React.createElement(ErrorMessage, {
           errorType: error,
           reload: this.clientFetchProfile,
-          fireAnalytics: this.fireAnalytics
+          fireAnalytics: this.fireAnalytics,
+          fireAnalyticsNext: this.fireAnalyticsNext
         }));
       }
       var newProps = _objectSpread(_objectSpread({
@@ -210,4 +227,11 @@ _defineProperty(ProfileCardResourced, "defaultProps", {
   actions: []
 });
 export var ProfileCardResourcedInternal = ProfileCardResourced;
-export default withAnalyticsEvents()(ProfileCardResourced);
+var ProfileCardResourcedWithAnalytics = function ProfileCardResourcedWithAnalytics(props) {
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  return /*#__PURE__*/React.createElement(ProfileCardResourced, _extends({
+    fireEvent: fireEvent
+  }, props));
+};
+export default componentWithFG('ptc-enable-profile-card-analytics-refactor', ProfileCardResourcedWithAnalytics, withAnalyticsEvents()(ProfileCardResourced));

package/dist/esm/components/User/ProfileCardTrigger.js

@@ -21,12 +21,14 @@ import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { Box } from '@atlaskit/primitives/compiled';
+import { useAnalyticsEvents as useAnalyticsEventsNext } from '@atlaskit/teams-app-internal-analytics';
 import { layers } from '@atlaskit/theme/constants';
 import filterActionsInner from '../../internal/filterActions';
 import getLabelMessage from '../../internal/getLabelMessage';
 import { CardWrapper } from '../../styled/UserTrigger';
-import { cardTriggered, fireEvent } from '../../util/analytics';
+import { cardTriggered, fireEvent, PACKAGE_META_DATA } from '../../util/analytics';
 import { DELAY_MS_HIDE, DELAY_MS_SHOW } from '../../util/config';
+import { getPageTime } from '../../util/performance';
 import { AgentProfileCardResourced } from '../Agent/AgentProfileCardResourced';
 import { ProfileCardLazy } from './lazyProfileCard';
 import UserLoadingState from './UserLoadingState';
@@ -147,6 +149,8 @@ export default function ProfilecardTriggerNext(_ref2) {
     isTriggeredUsingKeyboard = _useState18[0],
     setTriggeredUsingKeyboard = _useState18[1];
   var triggerRef = useRef(null);
+  var _useAnalyticsEventsNe = useAnalyticsEventsNext(),
+    fireEventNext = _useAnalyticsEventsNe.fireEvent;
   useEffect(function () {
     isMounted.current = true;
     return function () {
@@ -165,6 +169,17 @@ export default function ProfilecardTriggerNext(_ref2) {
     setShouldShowGiveKudos(false);
     setTeamCentralBaseUrl(undefined);
   }, [userId]);
+
+  // Create a wrapper function that has the same interface as fireEventNext but includes isMounted check
+  var fireAnalyticsNext = useCallback(function (eventKey) {
+    if (!isMounted.current) {
+      return;
+    }
+    for (var _len = arguments.length, attributes = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      attributes[_key - 1] = arguments[_key];
+    }
+    fireEventNext.apply(void 0, [eventKey].concat(attributes));
+  }, [fireEventNext]);
   var fireAnalytics = useCallback(function (payload) {
     // Don't fire any analytics if the component is unmounted
     if (!isMounted.current) {
@@ -228,7 +243,7 @@ export default function ProfilecardTriggerNext(_ref2) {
           setError(null);
           setData(null);
           _context.prev = 6;
-          requests = Promise.all([resourceClient.getProfile(cloudId || '', userId, fireAnalytics), resourceClient.getReportingLines(userId), resourceClient.shouldShowGiveKudos(), resourceClient.getTeamCentralBaseUrl({
+          requests = Promise.all([resourceClient.getProfile(cloudId || '', userId, fireAnalytics, fireAnalyticsNext), resourceClient.getReportingLines(userId), resourceClient.shouldShowGiveKudos(), resourceClient.getTeamCentralBaseUrl({
             withOrgContext: true,
             withSiteContext: true
           })]);
@@ -248,7 +263,7 @@ export default function ProfilecardTriggerNext(_ref2) {
           return _context.stop();
       }
     }, _callee, null, [[6, 14]]);
-  })), [cloudId, fireAnalytics, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
+  })), [cloudId, fireAnalytics, fireAnalyticsNext, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
   var showProfilecard = useCallback(function () {
     clearTimeout(hideTimer.current);
     clearTimeout(showTimer.current);
@@ -267,25 +282,46 @@ export default function ProfilecardTriggerNext(_ref2) {
     event.stopPropagation();
     showProfilecard();
     if (!visible) {
-      fireAnalytics(cardTriggered('user', 'click'));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsNext('ui.profilecard.triggered', _objectSpread({
+          method: 'click',
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA));
+      } else {
+        fireAnalytics(cardTriggered('user', 'click'));
+      }
     }
-  }, [fireAnalytics, showProfilecard, visible]);
+  }, [fireAnalytics, fireAnalyticsNext, showProfilecard, visible]);
   var onMouseEnter = useCallback(function () {
     showProfilecard();
     if (!visible) {
-      fireAnalytics(cardTriggered('user', 'hover'));
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsNext('ui.profilecard.triggered', _objectSpread({
+          method: 'hover',
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA));
+      } else {
+        fireAnalytics(cardTriggered('user', 'hover'));
+      }
     }
-  }, [fireAnalytics, showProfilecard, visible]);
+  }, [fireAnalytics, fireAnalyticsNext, showProfilecard, visible]);
   var onKeyPress = useCallback(function (event) {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
       setTriggeredUsingKeyboard(true);
       showProfilecard();
       if (!visible) {
-        fireAnalytics(cardTriggered('user', 'click'));
+        if (fg('ptc-enable-profile-card-analytics-refactor')) {
+          fireAnalyticsNext('ui.profilecard.triggered', _objectSpread({
+            method: 'click',
+            firedAt: Math.round(getPageTime())
+          }, PACKAGE_META_DATA));
+        } else {
+          fireAnalytics(cardTriggered('user', 'click'));
+        }
       }
     }
-  }, [fireAnalytics, showProfilecard, visible]);
+  }, [fireAnalytics, fireAnalyticsNext, showProfilecard, visible]);
   var onFocus = useCallback(function () {
     showProfilecard();
   }, [showProfilecard]);
@@ -365,7 +401,8 @@ export default function ProfilecardTriggerNext(_ref2) {
       offset: offset !== null && offset !== void 0 ? offset : [0, 8],
       content: function content() {
         return /*#__PURE__*/React.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
-          fireAnalytics: fireAnalytics
+          fireAnalytics: fireAnalytics,
+          fireAnalyticsNext: fireAnalyticsNext
         }) : visible && /*#__PURE__*/React.createElement(ProfileCardContent, {
           profilecardProps: profilecardProps,
           isAgent: !!(data !== null && data !== void 0 && data.isAgent),
@@ -440,7 +477,8 @@ export default function ProfilecardTriggerNext(_ref2) {
     offset: offset !== null && offset !== void 0 ? offset : [0, 8],
     content: function content() {
       return /*#__PURE__*/React.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
-        fireAnalytics: fireAnalytics
+        fireAnalytics: fireAnalytics,
+        fireAnalyticsNext: fireAnalyticsNext
       }) : visible && /*#__PURE__*/React.createElement(ProfileCardContent, {
         profilecardProps: profilecardProps,
         isAgent: !!(data !== null && data !== void 0 && data.isAgent),
@@ -506,10 +544,12 @@ export default function ProfilecardTriggerNext(_ref2) {
   })));
 }
 var LoadingView = function LoadingView(_ref4) {
-  var fireAnalytics = _ref4.fireAnalytics;
+  var fireAnalytics = _ref4.fireAnalytics,
+    fireAnalyticsNext = _ref4.fireAnalyticsNext;
   return /*#__PURE__*/React.createElement(CardWrapper, {
     testId: "profilecard.profilecardtrigger.loading"
   }, /*#__PURE__*/React.createElement(UserLoadingState, {
-    fireAnalytics: fireAnalytics
+    fireAnalytics: fireAnalytics,
+    fireAnalyticsNext: fireAnalyticsNext
   }));
 };

package/dist/esm/components/User/ReportingLinesDetails.js

@@ -1,16 +1,23 @@
 /* ReportingLinesDetails.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./ReportingLinesDetails.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { Pressable } from '@atlaskit/primitives/compiled';
 import messages from '../../messages';
 import { ManagerName, ManagerSection, OffsetWrapper, ReportingLinesSection } from '../../styled/ReportingLines';
-import { reportingLinesClicked } from '../../util/analytics';
+import { PACKAGE_META_DATA, reportingLinesClicked } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
+import { default as ReportingLinesDetailsCompiled } from './ReportingLinesDetailsCompiled';
 function getProfileHref(userId, profileUrl) {
   return profileUrl ? profileUrl + userId : undefined;
 }
@@ -32,6 +39,7 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var fireAnalyticsWithDuration = props.fireAnalyticsWithDuration,
+    fireAnalyticsWithDurationNext = props.fireAnalyticsWithDurationNext,
     _props$reportingLines = props.reportingLines,
     reportingLines = _props$reportingLines === void 0 ? {} : _props$reportingLines,
     reportingLinesProfileUrl = props.reportingLinesProfileUrl,
@@ -44,12 +52,22 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
   var hasReports = reports.length > 0;
   var getReportingLinesOnClick = function getReportingLinesOnClick(user, userType) {
     return onReportingLinesClick ? function () {
-      fireAnalyticsWithDuration(function (duration) {
-        return reportingLinesClicked({
-          duration: duration,
-          userType: userType
+      if (fg('ptc-enable-profile-card-analytics-refactor')) {
+        fireAnalyticsWithDurationNext('ui.profilecard.clicked.reportingLines', function (duration) {
+          return _objectSpread({
+            duration: duration,
+            userType: userType,
+            firedAt: Math.round(getPageTime())
+          }, PACKAGE_META_DATA);
         });
-      });
+      } else {
+        fireAnalyticsWithDuration(function (duration) {
+          return reportingLinesClicked({
+            duration: duration,
+            userType: userType
+          });
+        });
+      }
       onReportingLinesClick(user);
     } : undefined;
   };
@@ -58,12 +76,22 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
     if (onReportingLinesClick) {
       shouldPreventDefault = onReportingLinesClick(user) === false;
     }
-    fireAnalyticsWithDuration(function (duration) {
-      return reportingLinesClicked({
-        duration: duration,
-        userType: userType
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsWithDurationNext('ui.profilecard.clicked.reportingLines', function (duration) {
+        return _objectSpread({
+          duration: duration,
+          userType: userType,
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA);
       });
-    });
+    } else {
+      fireAnalyticsWithDuration(function (duration) {
+        return reportingLinesClicked({
+          duration: duration,
+          userType: userType
+        });
+      });
+    }
     if (shouldPreventDefault) {
       return;
     }
@@ -107,4 +135,5 @@ var ReportingLinesDetails = function ReportingLinesDetails(props) {
     showMoreButtonProps: showMoreButtonProps
   })));
 };
-export default ReportingLinesDetails;
+var ReportingLinesDetailsExport = componentWithFG('profilecard_primitives_compiled', ReportingLinesDetailsCompiled, ReportingLinesDetails);
+export default ReportingLinesDetailsExport;

package/dist/esm/components/User/ReportingLinesDetailsCompiled.compiled.css

@@ -0,0 +1,11 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._k48p1pd9{font-weight:var(--ds-font-weight-semibold,600)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}

package/dist/esm/components/User/ReportingLinesDetailsCompiled.js

@@ -0,0 +1,102 @@
+/* ReportingLinesDetailsCompiled.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./ReportingLinesDetailsCompiled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl-next';
+import Avatar from '@atlaskit/avatar';
+import AvatarGroup from '@atlaskit/avatar-group';
+import { cx } from '@atlaskit/css';
+import { Box, Pressable } from '@atlaskit/primitives/compiled';
+import messages from '../../messages';
+import { ManagerName, ManagerSection, OffsetWrapper, ReportingLinesSection } from '../../styled/ReportingLines';
+import { reportingLinesClicked } from '../../util/analytics';
+function getProfileHref(userId, profileUrl) {
+  return profileUrl ? profileUrl + userId : undefined;
+}
+var styles = {
+  reportingLinesButton: "_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _bfhksm61 _irr3166n",
+  reportingLinesHeadingDefaultStyles: "_11c81vhk _syaz1fxt _k48p1pd9 _otyru2gc",
+  reportingLinesHeadingStyles: "_otyrze3t"
+};
+var avatarGroupMaxCount = 5;
+var ReportingLinesDetails = function ReportingLinesDetails(props) {
+  var _manager$pii, _manager$pii2;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var fireAnalyticsWithDuration = props.fireAnalyticsWithDuration,
+    _props$reportingLines = props.reportingLines,
+    reportingLines = _props$reportingLines === void 0 ? {} : _props$reportingLines,
+    reportingLinesProfileUrl = props.reportingLinesProfileUrl,
+    onReportingLinesClick = props.onReportingLinesClick;
+  var _reportingLines$manag = reportingLines.managers,
+    managers = _reportingLines$manag === void 0 ? [] : _reportingLines$manag,
+    _reportingLines$repor = reportingLines.reports,
+    reports = _reportingLines$repor === void 0 ? [] : _reportingLines$repor;
+  var manager = managers.length >= 1 ? managers[0] : undefined;
+  var hasReports = reports.length > 0;
+  var getReportingLinesOnClick = function getReportingLinesOnClick(user, userType) {
+    return onReportingLinesClick ? function () {
+      fireAnalyticsWithDuration(function (duration) {
+        return reportingLinesClicked({
+          duration: duration,
+          userType: userType
+        });
+      });
+      onReportingLinesClick(user);
+    } : undefined;
+  };
+  var onReportingLinksClick = function onReportingLinksClick(user, userType, href) {
+    var shouldPreventDefault = false;
+    if (onReportingLinesClick) {
+      shouldPreventDefault = onReportingLinesClick(user) === false;
+    }
+    fireAnalyticsWithDuration(function (duration) {
+      return reportingLinesClicked({
+        duration: duration,
+        userType: userType
+      });
+    });
+    if (shouldPreventDefault) {
+      return;
+    }
+    if (href) {
+      window.location.href = href;
+    }
+  };
+  var showMoreButtonProps = {
+    'aria-label': formatMessage(messages.profileCardMoreReportingLinesLabel, {
+      count: reports.length - avatarGroupMaxCount + 1
+    })
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, manager && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.reportingLinesHeadingDefaultStyles, styles.reportingLinesHeadingStyles)
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.managerSectionHeading)), /*#__PURE__*/React.createElement(OffsetWrapper, null, /*#__PURE__*/React.createElement(Pressable, {
+    onClick: function onClick() {
+      return onReportingLinksClick(manager, 'manager', getProfileHref(manager.accountIdentifier, reportingLinesProfileUrl));
+    },
+    isDisabled: !onReportingLinesClick,
+    xcss: styles.reportingLinesButton
+  }, /*#__PURE__*/React.createElement(ManagerSection, null, /*#__PURE__*/React.createElement(Avatar, {
+    size: "xsmall",
+    src: (_manager$pii = manager.pii) === null || _manager$pii === void 0 ? void 0 : _manager$pii.picture
+  }), /*#__PURE__*/React.createElement(ManagerName, null, (_manager$pii2 = manager.pii) === null || _manager$pii2 === void 0 ? void 0 : _manager$pii2.name))))), hasReports && /*#__PURE__*/React.createElement(ReportingLinesSection, null, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.reportingLinesHeadingDefaultStyles
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.directReportsSectionHeading)), /*#__PURE__*/React.createElement(AvatarGroup, {
+    appearance: "stack",
+    size: "small",
+    data: reports.map(function (member) {
+      var _member$pii, _member$pii2;
+      return {
+        key: member.accountIdentifier,
+        name: ((_member$pii = member.pii) === null || _member$pii === void 0 ? void 0 : _member$pii.name) || '',
+        src: (_member$pii2 = member.pii) === null || _member$pii2 === void 0 ? void 0 : _member$pii2.picture,
+        href: getProfileHref(member.accountIdentifier, reportingLinesProfileUrl),
+        onClick: getReportingLinesOnClick(member, 'direct-report')
+      };
+    }),
+    maxCount: avatarGroupMaxCount,
+    testId: "profilecard-reports-avatar-group",
+    showMoreButtonProps: showMoreButtonProps
+  })));
+};
+export default ReportingLinesDetails;

package/dist/esm/components/User/UserLoadingState.js

@@ -1,12 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useEffect } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import AkSpinner from '@atlaskit/spinner';
 import { SpinnerContainer } from '../../styled/UserTrigger';
-import { profileCardRendered } from '../../util/analytics';
+import { PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 var UserLoadingState = function UserLoadingState(_ref) {
-  var fireAnalytics = _ref.fireAnalytics;
+  var fireAnalytics = _ref.fireAnalytics,
+    fireAnalyticsNext = _ref.fireAnalyticsNext;
   useEffect(function () {
-    fireAnalytics(profileCardRendered('user', 'spinner'));
-  }, [fireAnalytics]);
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      fireAnalyticsNext('ui.profilecard.rendered.spinner', _objectSpread({
+        firedAt: Math.round(getPageTime())
+      }, PACKAGE_META_DATA));
+    } else {
+      fireAnalytics(profileCardRendered('user', 'spinner'));
+    }
+  }, [fireAnalytics, fireAnalyticsNext]);
   return /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(AkSpinner, null));
 };
 export default UserLoadingState;

package/dist/esm/components/common/LoadingState.js

@@ -1,14 +1,28 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useEffect } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import AkSpinner from '@atlaskit/spinner';
 import { SpinnerContainer } from '../../styled/UserTrigger';
-import { profileCardRendered } from '../../util/analytics';
+import { getActionSubject, PACKAGE_META_DATA, profileCardRendered } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 export var LoadingState = function LoadingState(_ref) {
   var fireAnalytics = _ref.fireAnalytics,
+    fireAnalyticsNext = _ref.fireAnalyticsNext,
     profileType = _ref.profileType;
   useEffect(function () {
-    if (fireAnalytics) {
-      fireAnalytics(profileCardRendered(profileType, 'spinner'));
+    if (fg('ptc-enable-profile-card-analytics-refactor')) {
+      if (fireAnalyticsNext) {
+        fireAnalyticsNext("ui.".concat(getActionSubject(profileType), ".rendered.spinner"), _objectSpread({
+          firedAt: Math.round(getPageTime())
+        }, PACKAGE_META_DATA));
+      }
+    } else {
+      if (fireAnalytics) {
+        fireAnalytics(profileCardRendered(profileType, 'spinner'));
+      }
     }
-  }, [fireAnalytics, profileType]);
+  }, [fireAnalytics, fireAnalyticsNext, profileType]);
   return /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(AkSpinner, null));
 };

package/dist/esm/components/common/ProfileCardTrigger.js

@@ -1,14 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["trigger", "ariaLabelledBy", "children", "renderProfileCard", "fetchProfile", "disabledAriaAttributes", "profileCardType", "fireAnalytics"],
+var _excluded = ["trigger", "ariaLabelledBy", "children", "renderProfileCard", "fetchProfile", "disabledAriaAttributes", "profileCardType", "testId", "fireAnalytics", "fireAnalyticsNext"],
   _excluded2 = ["aria-expanded", "aria-haspopup"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
-import { cardTriggered } from '../../util/analytics';
+import { cardTriggered, getActionSubject, PACKAGE_META_DATA } from '../../util/analytics';
+import { getPageTime } from '../../util/performance';
 import { useProfileInfo } from '../../util/useProfileInfo';
 import { LoadingState } from './LoadingState';
 import { PopupTrigger } from './PopupTrigger';
@@ -24,7 +29,9 @@ function ProfileCardTriggerInner(_ref, ref) {
     fetchProfile = _ref.fetchProfile,
     disabledAriaAttributes = _ref.disabledAriaAttributes,
     profileCardType = _ref.profileCardType,
+    testId = _ref.testId,
     fireAnalytics = _ref.fireAnalytics,
+    fireAnalyticsNext = _ref.fireAnalyticsNext,
     popupProps = _objectWithoutProperties(_ref, _excluded);
   var showDelay = _trigger === 'click' ? 0 : DELAY_MS_SHOW;
   var hideDelay = _trigger === 'click' ? 0 : DELAY_MS_HIDE;
@@ -69,8 +76,18 @@ function ProfileCardTriggerInner(_ref, ref) {
             if (!visible) {
               getProfileData === null || getProfileData === void 0 || getProfileData();
               setVisible(true);
-              if (fireAnalytics) {
-                fireAnalytics(cardTriggered(profileCardType, _trigger));
+              if (fg('ptc-enable-profile-card-analytics-refactor')) {
+                if (fireAnalyticsNext) {
+                  fireAnalyticsNext("ui.".concat(getActionSubject(profileCardType), ".triggered"), _objectSpread(_objectSpread({
+                    method: _trigger
+                  }, PACKAGE_META_DATA), {}, {
+                    firedAt: Math.round(getPageTime())
+                  }));
+                }
+              } else {
+                if (fireAnalytics) {
+                  fireAnalytics(cardTriggered(profileCardType, _trigger));
+                }
               }
             }
           }, showDelay);
@@ -79,7 +96,7 @@ function ProfileCardTriggerInner(_ref, ref) {
           return _context.stop();
       }
     }, _callee);
-  })), [showDelay, visible, getProfileData, fireAnalytics, profileCardType, _trigger]);
+  })), [showDelay, visible, getProfileData, fireAnalytics, profileCardType, _trigger, fireAnalyticsNext]);
   var onMouseEnter = useCallback(function () {
     showProfilecard();
   }, [showProfilecard]);
@@ -100,7 +117,8 @@ function ProfileCardTriggerInner(_ref, ref) {
         showProfilecard: showProfilecard,
         children: children,
         ariaLabelledBy: ariaLabelledBy,
-        trigger: _trigger
+        trigger: _trigger,
+        "data-testid": testId
       }));
     },
     content: function content() {
@@ -110,9 +128,13 @@ function ProfileCardTriggerInner(_ref, ref) {
         React.createElement("div", {
           onMouseEnter: onMouseEnter,
           onMouseLeave: hideProfilecard,
-          onFocus: showProfilecard
-        }, isLoading ? /*#__PURE__*/React.createElement(ProfileCardWrapper, null, /*#__PURE__*/React.createElement(LoadingState, {
+          onFocus: showProfilecard,
+          "data-testid": "profile-card--trigger-content"
+        }, isLoading ? /*#__PURE__*/React.createElement(ProfileCardWrapper, {
+          testId: "profilecard.profilecardtrigger.loading"
+        }, /*#__PURE__*/React.createElement(LoadingState, {
           fireAnalytics: fireAnalytics,
+          fireAnalyticsNext: fireAnalyticsNext,
           profileType: profileCardType
         })) : renderProfileCard({
           profileData: profileData,

package/dist/esm/components/common/ProfileCardWrapper.compiled.css

@@ -0,0 +1 @@
+._1bsb1gwv{width:360px}

package/dist/esm/components/common/ProfileCardWrapper.js

@@ -1,13 +1,16 @@
+/* ProfileCardWrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./ProfileCardWrapper.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Box, xcss } from '@atlaskit/primitives';
-var styles = xcss({
-  width: '360px'
-});
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  wrapper: "_1bsb1gwv"
+};
 export var ProfileCardWrapper = function ProfileCardWrapper(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+    testId = _ref.testId;
   return /*#__PURE__*/React.createElement(Box, {
-    xcss: styles
+    xcss: styles.wrapper,
+    testId: testId
   }, children);
 };