@atlaskit/profilecard 19.9.0 → 19.11.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/profilecard
 
+## 19.11.0
+
+### Minor Changes
+
+- [#72021](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/72021) [`bfb147303ac8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bfb147303ac8) - Pass fullName props to ProfileCardTrigger, and update aria-label message
+
+### Patch Changes
+
+- Updated dependencies
+
+## 19.10.0
+
+### Minor Changes
+
+- [#71508](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71508) [`e6125d2215ef`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e6125d2215ef) - Added accountType prop
+
 ## 19.9.0
 
 ### Minor Changes

package/dist/cjs/client/UserProfileCardClient.js

@@ -48,7 +48,8 @@ var modifyResponse = exports.modifyResponse = function modifyResponse(response)
     meta: data.meta || undefined,
     nickname: data.nickname || undefined,
     companyName: data.companyName || undefined,
-    timestring: data.remoteTimeString || undefined
+    timestring: data.remoteTimeString || undefined,
+    accountType: data.accountType || undefined
   };
 };
 

package/dist/cjs/client/getTeamFromAGG.js

@@ -57,7 +57,7 @@ var addHeaders = exports.addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "19.9.0");
+  headers.append('atl-client-version', "19.11.0");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/components/User/ProfileCard.js

@@ -154,12 +154,6 @@ var Actions = function Actions(_ref) {
       action.callback.apply(action, [event].concat((0, _toConsumableArray2.default)(args)));
     }
   }, [fireAnalyticsWithDuration]);
-  var buttonRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    if (actions.length > 0 && buttonRef.current && isTriggeredUsingKeyboard) {
-      buttonRef.current.focus();
-    }
-  }, [isTriggeredUsingKeyboard, actions.length]);
   if (!actions || actions.length === 0) {
     return null;
   }
@@ -182,7 +176,7 @@ var Actions = function Actions(_ref) {
         return onActionClick(action, args, event, index);
       },
       href: action.link,
-      ref: index === 0 ? buttonRef : undefined
+      autoFocus: index === 0 && isTriggeredUsingKeyboard
     }, action.label, isKudos && /*#__PURE__*/_react.default.createElement(_Card.AnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null))));
     if (isKudos) {
       return /*#__PURE__*/_react.default.createElement(_Card.AnimatedKudosButton, {

package/dist/cjs/components/User/ProfileCardTriggerNext.js

@@ -14,11 +14,13 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _giveKudos = require("@atlaskit/give-kudos");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _constants = require("@atlaskit/theme/constants");
 var _filterActions = _interopRequireDefault(require("../../internal/filterActions"));
+var _getLabelMessage = _interopRequireDefault(require("../../internal/getLabelMessage"));
 var _Card = require("../../styled/Card");
 var _analytics = require("../../util/analytics");
 var _config = require("../../util/config");
@@ -44,9 +46,12 @@ function ProfilecardTriggerNext(_ref) {
     addFlag = _ref.addFlag,
     onReportingLinesClick = _ref.onReportingLinesClick,
     ariaLabel = _ref.ariaLabel,
-    ariaLabelledBy = _ref.ariaLabelledBy;
+    ariaLabelledBy = _ref.ariaLabelledBy,
+    prepopulatedData = _ref.prepopulatedData;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isMounted = _useState2[0],
@@ -136,10 +141,9 @@ function ProfilecardTriggerNext(_ref) {
         setVisible(false);
       }, hideDelay));
     }
-    setTriggeredUsingKeyboard(false);
   }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
   var handleKeyboardClose = (0, _react.useCallback)(function (event) {
-    if (event.key !== 'Escape') {
+    if (event.key && event.key !== 'Escape') {
       return;
     }
     if (triggerRef.current) {
@@ -271,6 +275,7 @@ function ProfilecardTriggerNext(_ref) {
   }, [hideProfilecard, onFocus, onMouseEnter, trigger]);
   var profilecardProps = _objectSpread(_objectSpread({
     userId: userId,
+    fullName: prepopulatedData === null || prepopulatedData === void 0 ? void 0 : prepopulatedData.fullName,
     isCurrentUser: data === null || data === void 0 ? void 0 : data.isCurrentUser,
     clientFetchProfile: clientFetchProfile
   }, data), {}, {
@@ -315,7 +320,7 @@ function ProfilecardTriggerNext(_ref) {
         "data-testid": testId,
         role: "button",
         tabIndex: 0,
-        "aria-label": ariaLabel,
+        "aria-label": (0, _getLabelMessage.default)(ariaLabel, profilecardProps.fullName, formatMessage),
         "aria-labelledby": ariaLabelledBy
       }), children);
     },

package/dist/cjs/internal/getLabelMessage.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactIntlNext = require("react-intl-next");
+var getLabelMessage = function getLabelMessage(ariaLabelProp, fullName, formatMessage) {
+  if (ariaLabelProp) {
+    return ariaLabelProp;
+  }
+  return fullName ? formatMessage(messages.label, {
+    fullName: fullName
+  }) : formatMessage(messages.fallbackLabel);
+};
+var messages = (0, _reactIntlNext.defineMessages)({
+  fallbackLabel: {
+    id: 'profilecard.user.trigger.fallback-aria-label',
+    defaultMessage: 'More information about this user',
+    description: 'Label for profile card trigger when we do not have user name'
+  },
+  label: {
+    id: 'profilecard.user.trigger.aria-label',
+    defaultMessage: 'More information about {fullName}',
+    description: 'Label for profile card trigger'
+  }
+});
+var _default = exports.default = getLabelMessage;

package/dist/cjs/mocks/profile-data.js

@@ -23,7 +23,8 @@ var profiles = [{
     meta: 'Manager',
     remoteTimeString: (0, _util.getTimeString)(),
     remoteWeekdayIndex: (0, _util.getWeekday)().index,
-    remoteWeekdayString: (0, _util.getWeekday)().string
+    remoteWeekdayString: (0, _util.getWeekday)().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -35,7 +36,8 @@ var profiles = [{
     meta: 'Senior Developer',
     remoteTimeString: (0, _util.getTimeString)(),
     remoteWeekdayIndex: (0, _util.getWeekday)().index,
-    remoteWeekdayString: (0, _util.getWeekday)().string
+    remoteWeekdayString: (0, _util.getWeekday)().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -48,7 +50,8 @@ var profiles = [{
     status: 'inactive',
     remoteTimeString: (0, _util.getTimeString)(),
     remoteWeekdayIndex: (0, _util.getWeekday)().index,
-    remoteWeekdayString: (0, _util.getWeekday)().string
+    remoteWeekdayString: (0, _util.getWeekday)().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -56,7 +59,8 @@ var profiles = [{
     fullName: 'Cleveland Rodriquez',
     nickname: 'crodriquez',
     email: 'crodriquez@slofast.com',
-    meta: 'Manager'
+    meta: 'Manager',
+    accountType: 'customer'
   }
 }, {
   User: {
@@ -68,7 +72,8 @@ var profiles = [{
     meta: 'Manager',
     remoteTimeString: (0, _util.getTimeString)(),
     remoteWeekdayIndex: (0, _util.getWeekday)().index,
-    remoteWeekdayString: (0, _util.getWeekday)().string
+    remoteWeekdayString: (0, _util.getWeekday)().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -80,7 +85,8 @@ var profiles = [{
     meta: 'Designer',
     remoteTimeString: (0, _util.getTimeString)(),
     remoteWeekdayIndex: (0, _util.getWeekday)().index,
-    remoteWeekdayString: (0, _util.getWeekday)().string
+    remoteWeekdayString: (0, _util.getWeekday)().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -92,7 +98,8 @@ var profiles = [{
     meta: 'Senior Developer',
     remoteTimeString: (0, _util.getTimeString)(),
     remoteWeekdayIndex: (0, _util.getWeekday)().index,
-    remoteWeekdayString: (0, _util.getWeekday)().string
+    remoteWeekdayString: (0, _util.getWeekday)().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -104,7 +111,8 @@ var profiles = [{
     meta: 'Senior Developer',
     remoteTimeString: (0, _util.getTimeString)(),
     remoteWeekdayIndex: (0, _util.getWeekday)().index,
-    remoteWeekdayString: (0, _util.getWeekday)().string
+    remoteWeekdayString: (0, _util.getWeekday)().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -116,7 +124,8 @@ var profiles = [{
     meta: 'Head of Something',
     remoteTimeString: (0, _util.getTimeString)(),
     remoteWeekdayIndex: (0, _util.getWeekday)().index,
-    remoteWeekdayString: (0, _util.getWeekday)().string
+    remoteWeekdayString: (0, _util.getWeekday)().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -128,7 +137,8 @@ var profiles = [{
     meta: 'Senior Designer',
     remoteTimeString: (0, _util.getTimeString)(),
     remoteWeekdayIndex: (0, _util.getWeekday)().index,
-    remoteWeekdayString: (0, _util.getWeekday)().string
+    remoteWeekdayString: (0, _util.getWeekday)().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -140,7 +150,8 @@ var profiles = [{
     meta: 'Senior Designer',
     remoteTimeString: (0, _util.getTimeString)(),
     remoteWeekdayIndex: (0, _util.getWeekday)().index,
-    remoteWeekdayString: (0, _util.getWeekday)().string
+    remoteWeekdayString: (0, _util.getWeekday)().string,
+    accountType: 'atlassian'
   }
 }];
 var _default = exports.default = profiles;

package/dist/cjs/util/analytics.js

@@ -44,7 +44,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "19.9.0"
+      packageVersion: "19.11.0"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/es2019/client/UserProfileCardClient.js

@@ -32,7 +32,8 @@ export const modifyResponse = response => {
     meta: data.meta || undefined,
     nickname: data.nickname || undefined,
     companyName: data.companyName || undefined,
-    timestring: data.remoteTimeString || undefined
+    timestring: data.remoteTimeString || undefined,
+    accountType: data.accountType || undefined
   };
 };
 

package/dist/es2019/client/getTeamFromAGG.js

@@ -67,7 +67,7 @@ export const addHeaders = headers => {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "19.9.0");
+  headers.append('atl-client-version', "19.11.0");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

package/dist/es2019/components/User/ProfileCard.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Avatar from '@atlaskit/avatar';
@@ -140,12 +140,6 @@ const Actions = ({
       action.callback(event, ...args);
     }
   }, [fireAnalyticsWithDuration]);
-  const buttonRef = useRef(null);
-  useEffect(() => {
-    if (actions.length > 0 && buttonRef.current && isTriggeredUsingKeyboard) {
-      buttonRef.current.focus();
-    }
-  }, [isTriggeredUsingKeyboard, actions.length]);
   if (!actions || actions.length === 0) {
     return null;
   }
@@ -163,7 +157,7 @@ const Actions = ({
       key: action.id || index,
       onClick: (event, ...args) => onActionClick(action, args, event, index),
       href: action.link,
-      ref: index === 0 ? buttonRef : undefined
+      autoFocus: index === 0 && isTriggeredUsingKeyboard
     }, action.label, isKudos && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null))));
     if (isKudos) {
       return /*#__PURE__*/React.createElement(AnimatedKudosButton, {

package/dist/es2019/components/User/ProfileCardTriggerNext.js

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
 import filterActionsInner from '../../internal/filterActions';
+import getLabelMessage from '../../internal/getLabelMessage';
 import { CardWrapper } from '../../styled/Card';
 import { cardTriggered, fireEvent } from '../../util/analytics';
 import { DELAY_MS_HIDE, DELAY_MS_SHOW } from '../../util/config';
@@ -22,11 +24,15 @@ export default function ProfilecardTriggerNext({
   addFlag,
   onReportingLinesClick,
   ariaLabel,
-  ariaLabelledBy
+  ariaLabelledBy,
+  prepopulatedData
 }) {
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
+  const {
+    formatMessage
+  } = useIntl();
   const [isMounted, setIsMounted] = useState(false);
   const showDelay = trigger === 'click' ? 0 : DELAY_MS_SHOW;
   const hideDelay = trigger === 'click' ? 0 : DELAY_MS_HIDE;
@@ -77,10 +83,9 @@ export default function ProfilecardTriggerNext({
         setVisible(false);
       }, hideDelay));
     }
-    setTriggeredUsingKeyboard(false);
   }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
   const handleKeyboardClose = useCallback(event => {
-    if (event.key !== 'Escape') {
+    if (event.key && event.key !== 'Escape') {
       return;
     }
     if (triggerRef.current) {
@@ -191,6 +196,7 @@ export default function ProfilecardTriggerNext({
   } : {}, [hideProfilecard, onFocus, onMouseEnter, trigger]);
   const profilecardProps = {
     userId: userId,
+    fullName: prepopulatedData === null || prepopulatedData === void 0 ? void 0 : prepopulatedData.fullName,
     isCurrentUser: data === null || data === void 0 ? void 0 : data.isCurrentUser,
     clientFetchProfile: clientFetchProfile,
     ...data,
@@ -235,7 +241,7 @@ export default function ProfilecardTriggerNext({
         "data-testid": testId,
         role: "button",
         tabIndex: 0,
-        "aria-label": ariaLabel,
+        "aria-label": getLabelMessage(ariaLabel, profilecardProps.fullName, formatMessage),
         "aria-labelledby": ariaLabelledBy
       }), children);
     },

package/dist/es2019/internal/getLabelMessage.js

@@ -0,0 +1,22 @@
+import { defineMessages } from 'react-intl-next';
+const getLabelMessage = (ariaLabelProp, fullName, formatMessage) => {
+  if (ariaLabelProp) {
+    return ariaLabelProp;
+  }
+  return fullName ? formatMessage(messages.label, {
+    fullName
+  }) : formatMessage(messages.fallbackLabel);
+};
+const messages = defineMessages({
+  fallbackLabel: {
+    id: 'profilecard.user.trigger.fallback-aria-label',
+    defaultMessage: 'More information about this user',
+    description: 'Label for profile card trigger when we do not have user name'
+  },
+  label: {
+    id: 'profilecard.user.trigger.aria-label',
+    defaultMessage: 'More information about {fullName}',
+    description: 'Label for profile card trigger'
+  }
+});
+export default getLabelMessage;

package/dist/es2019/mocks/profile-data.js

@@ -14,7 +14,8 @@ const profiles = [{
     meta: 'Manager',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -26,7 +27,8 @@ const profiles = [{
     meta: 'Senior Developer',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -39,7 +41,8 @@ const profiles = [{
     status: 'inactive',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -47,7 +50,8 @@ const profiles = [{
     fullName: 'Cleveland Rodriquez',
     nickname: 'crodriquez',
     email: 'crodriquez@slofast.com',
-    meta: 'Manager'
+    meta: 'Manager',
+    accountType: 'customer'
   }
 }, {
   User: {
@@ -59,7 +63,8 @@ const profiles = [{
     meta: 'Manager',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -71,7 +76,8 @@ const profiles = [{
     meta: 'Designer',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -83,7 +89,8 @@ const profiles = [{
     meta: 'Senior Developer',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -95,7 +102,8 @@ const profiles = [{
     meta: 'Senior Developer',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -107,7 +115,8 @@ const profiles = [{
     meta: 'Head of Something',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -119,7 +128,8 @@ const profiles = [{
     meta: 'Senior Designer',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -131,7 +141,8 @@ const profiles = [{
     meta: 'Senior Designer',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }];
 export default profiles;

package/dist/es2019/util/analytics.js

@@ -31,7 +31,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "19.9.0",
+    packageVersion: "19.11.0",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/esm/client/UserProfileCardClient.js

@@ -42,7 +42,8 @@ export var modifyResponse = function modifyResponse(response) {
     meta: data.meta || undefined,
     nickname: data.nickname || undefined,
     companyName: data.companyName || undefined,
-    timestring: data.remoteTimeString || undefined
+    timestring: data.remoteTimeString || undefined,
+    accountType: data.accountType || undefined
   };
 };
 

package/dist/esm/client/getTeamFromAGG.js

@@ -48,7 +48,7 @@ export var addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "19.9.0");
+  headers.append('atl-client-version', "19.11.0");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

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

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Avatar from '@atlaskit/avatar';
@@ -144,12 +144,6 @@ var Actions = function Actions(_ref) {
       action.callback.apply(action, [event].concat(_toConsumableArray(args)));
     }
   }, [fireAnalyticsWithDuration]);
-  var buttonRef = useRef(null);
-  useEffect(function () {
-    if (actions.length > 0 && buttonRef.current && isTriggeredUsingKeyboard) {
-      buttonRef.current.focus();
-    }
-  }, [isTriggeredUsingKeyboard, actions.length]);
   if (!actions || actions.length === 0) {
     return null;
   }
@@ -172,7 +166,7 @@ var Actions = function Actions(_ref) {
         return onActionClick(action, args, event, index);
       },
       href: action.link,
-      ref: index === 0 ? buttonRef : undefined
+      autoFocus: index === 0 && isTriggeredUsingKeyboard
     }, action.label, isKudos && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null))));
     if (isKudos) {
       return /*#__PURE__*/React.createElement(AnimatedKudosButton, {

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

@@ -9,11 +9,13 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useIntl } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import Popup from '@atlaskit/popup';
 import { layers } from '@atlaskit/theme/constants';
 import filterActionsInner from '../../internal/filterActions';
+import getLabelMessage from '../../internal/getLabelMessage';
 import { CardWrapper } from '../../styled/Card';
 import { cardTriggered, fireEvent } from '../../util/analytics';
 import { DELAY_MS_HIDE, DELAY_MS_SHOW } from '../../util/config';
@@ -34,9 +36,12 @@ export default function ProfilecardTriggerNext(_ref) {
     addFlag = _ref.addFlag,
     onReportingLinesClick = _ref.onReportingLinesClick,
     ariaLabel = _ref.ariaLabel,
-    ariaLabelledBy = _ref.ariaLabelledBy;
+    ariaLabelledBy = _ref.ariaLabelledBy,
+    prepopulatedData = _ref.prepopulatedData;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMounted = _useState2[0],
@@ -126,10 +131,9 @@ export default function ProfilecardTriggerNext(_ref) {
         setVisible(false);
       }, hideDelay));
     }
-    setTriggeredUsingKeyboard(false);
   }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
   var handleKeyboardClose = useCallback(function (event) {
-    if (event.key !== 'Escape') {
+    if (event.key && event.key !== 'Escape') {
       return;
     }
     if (triggerRef.current) {
@@ -261,6 +265,7 @@ export default function ProfilecardTriggerNext(_ref) {
   }, [hideProfilecard, onFocus, onMouseEnter, trigger]);
   var profilecardProps = _objectSpread(_objectSpread({
     userId: userId,
+    fullName: prepopulatedData === null || prepopulatedData === void 0 ? void 0 : prepopulatedData.fullName,
     isCurrentUser: data === null || data === void 0 ? void 0 : data.isCurrentUser,
     clientFetchProfile: clientFetchProfile
   }, data), {}, {
@@ -305,7 +310,7 @@ export default function ProfilecardTriggerNext(_ref) {
         "data-testid": testId,
         role: "button",
         tabIndex: 0,
-        "aria-label": ariaLabel,
+        "aria-label": getLabelMessage(ariaLabel, profilecardProps.fullName, formatMessage),
         "aria-labelledby": ariaLabelledBy
       }), children);
     },

package/dist/esm/internal/getLabelMessage.js

@@ -0,0 +1,22 @@
+import { defineMessages } from 'react-intl-next';
+var getLabelMessage = function getLabelMessage(ariaLabelProp, fullName, formatMessage) {
+  if (ariaLabelProp) {
+    return ariaLabelProp;
+  }
+  return fullName ? formatMessage(messages.label, {
+    fullName: fullName
+  }) : formatMessage(messages.fallbackLabel);
+};
+var messages = defineMessages({
+  fallbackLabel: {
+    id: 'profilecard.user.trigger.fallback-aria-label',
+    defaultMessage: 'More information about this user',
+    description: 'Label for profile card trigger when we do not have user name'
+  },
+  label: {
+    id: 'profilecard.user.trigger.aria-label',
+    defaultMessage: 'More information about {fullName}',
+    description: 'Label for profile card trigger'
+  }
+});
+export default getLabelMessage;

package/dist/esm/mocks/profile-data.js

@@ -16,7 +16,8 @@ var profiles = [{
     meta: 'Manager',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -28,7 +29,8 @@ var profiles = [{
     meta: 'Senior Developer',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -41,7 +43,8 @@ var profiles = [{
     status: 'inactive',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -49,7 +52,8 @@ var profiles = [{
     fullName: 'Cleveland Rodriquez',
     nickname: 'crodriquez',
     email: 'crodriquez@slofast.com',
-    meta: 'Manager'
+    meta: 'Manager',
+    accountType: 'customer'
   }
 }, {
   User: {
@@ -61,7 +65,8 @@ var profiles = [{
     meta: 'Manager',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -73,7 +78,8 @@ var profiles = [{
     meta: 'Designer',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -85,7 +91,8 @@ var profiles = [{
     meta: 'Senior Developer',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -97,7 +104,8 @@ var profiles = [{
     meta: 'Senior Developer',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -109,7 +117,8 @@ var profiles = [{
     meta: 'Head of Something',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -121,7 +130,8 @@ var profiles = [{
     meta: 'Senior Designer',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }, {
   User: {
@@ -133,7 +143,8 @@ var profiles = [{
     meta: 'Senior Designer',
     remoteTimeString: getTimeString(),
     remoteWeekdayIndex: getWeekday().index,
-    remoteWeekdayString: getWeekday().string
+    remoteWeekdayString: getWeekday().string,
+    accountType: 'atlassian'
   }
 }];
 export default profiles;

package/dist/esm/util/analytics.js

@@ -38,7 +38,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "19.9.0"
+      packageVersion: "19.11.0"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/dist/types/components/User/ProfileCardTriggerNext.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { ProfileCardTriggerProps } from '../../types';
-export default function ProfilecardTriggerNext({ trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, }: ProfileCardTriggerProps): JSX.Element;
+export default function ProfilecardTriggerNext({ trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, prepopulatedData, }: ProfileCardTriggerProps): JSX.Element;

package/dist/types/internal/getLabelMessage.d.ts

@@ -0,0 +1,3 @@
+import { MessageDescriptor } from 'react-intl-next';
+declare const getLabelMessage: (ariaLabelProp: string | undefined, fullName: string | undefined, formatMessage: (message: MessageDescriptor, values?: Record<string, string>) => string) => string;
+export default getLabelMessage;

package/dist/types/mocks/profile-data.d.ts

@@ -9,6 +9,7 @@ declare const profiles: ({
         remoteTimeString: string;
         remoteWeekdayIndex: number;
         remoteWeekdayString: string;
+        accountType: string;
         status?: undefined;
     };
 } | {
@@ -23,6 +24,7 @@ declare const profiles: ({
         remoteTimeString: string;
         remoteWeekdayIndex: number;
         remoteWeekdayString: string;
+        accountType: string;
     };
 } | {
     User: {
@@ -31,6 +33,7 @@ declare const profiles: ({
         nickname: string;
         email: string;
         meta: string;
+        accountType: string;
         location?: undefined;
         remoteTimeString?: undefined;
         remoteWeekdayIndex?: undefined;

package/dist/types/types.d.ts

@@ -7,6 +7,7 @@ import UserProfileCardClient from './client/UserProfileCardClient';
 export interface ApiClientResponse {
     User: {
         id: string;
+        accountType: string;
         isBot: boolean;
         isCurrentUser: boolean;
         avatarUrl: string | null;
@@ -52,6 +53,7 @@ export interface ProfileCardClientData {
     status: StatusType;
     statusModifiedDate?: number | null;
     customLozenges?: LozengeProps[];
+    accountType?: string;
 }
 export interface ReportingLinesUserPII {
     name: string;
@@ -113,6 +115,7 @@ export interface ProfileCardTriggerProps {
     addFlag?: (flag: any) => void;
     ariaLabel?: string;
     ariaLabelledBy?: string;
+    prepopulatedData?: PrepopulatedData;
 }
 export interface ProfileCardTriggerState {
     visible?: boolean;
@@ -267,6 +270,7 @@ export interface ProfilecardProps {
     isLoading?: boolean;
     hasError?: boolean;
     errorType?: ProfileCardErrorType;
+    accountType?: string;
     status?: StatusType;
     isBot?: boolean;
     avatarUrl?: string;
@@ -359,3 +363,7 @@ export interface ClientOverrides {
     teamClient?: TeamProfileCardClient;
     teamCentralClient?: TeamCentralCardClient;
 }
+/** This interface represents the data that is prepopulated in the profile card. **/
+export interface PrepopulatedData {
+    fullName?: string;
+}

package/dist/types-ts4.5/components/User/ProfileCardTriggerNext.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { ProfileCardTriggerProps } from '../../types';
-export default function ProfilecardTriggerNext({ trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, }: ProfileCardTriggerProps): JSX.Element;
+export default function ProfilecardTriggerNext({ trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, prepopulatedData, }: ProfileCardTriggerProps): JSX.Element;

package/dist/types-ts4.5/internal/getLabelMessage.d.ts

@@ -0,0 +1,3 @@
+import { MessageDescriptor } from 'react-intl-next';
+declare const getLabelMessage: (ariaLabelProp: string | undefined, fullName: string | undefined, formatMessage: (message: MessageDescriptor, values?: Record<string, string>) => string) => string;
+export default getLabelMessage;

package/dist/types-ts4.5/mocks/profile-data.d.ts

@@ -9,6 +9,7 @@ declare const profiles: ({
         remoteTimeString: string;
         remoteWeekdayIndex: number;
         remoteWeekdayString: string;
+        accountType: string;
         status?: undefined;
     };
 } | {
@@ -23,6 +24,7 @@ declare const profiles: ({
         remoteTimeString: string;
         remoteWeekdayIndex: number;
         remoteWeekdayString: string;
+        accountType: string;
     };
 } | {
     User: {
@@ -31,6 +33,7 @@ declare const profiles: ({
         nickname: string;
         email: string;
         meta: string;
+        accountType: string;
         location?: undefined;
         remoteTimeString?: undefined;
         remoteWeekdayIndex?: undefined;

package/dist/types-ts4.5/types.d.ts

@@ -7,6 +7,7 @@ import UserProfileCardClient from './client/UserProfileCardClient';
 export interface ApiClientResponse {
     User: {
         id: string;
+        accountType: string;
         isBot: boolean;
         isCurrentUser: boolean;
         avatarUrl: string | null;
@@ -52,6 +53,7 @@ export interface ProfileCardClientData {
     status: StatusType;
     statusModifiedDate?: number | null;
     customLozenges?: LozengeProps[];
+    accountType?: string;
 }
 export interface ReportingLinesUserPII {
     name: string;
@@ -113,6 +115,7 @@ export interface ProfileCardTriggerProps {
     addFlag?: (flag: any) => void;
     ariaLabel?: string;
     ariaLabelledBy?: string;
+    prepopulatedData?: PrepopulatedData;
 }
 export interface ProfileCardTriggerState {
     visible?: boolean;
@@ -267,6 +270,7 @@ export interface ProfilecardProps {
     isLoading?: boolean;
     hasError?: boolean;
     errorType?: ProfileCardErrorType;
+    accountType?: string;
     status?: StatusType;
     isBot?: boolean;
     avatarUrl?: string;
@@ -359,3 +363,7 @@ export interface ClientOverrides {
     teamClient?: TeamProfileCardClient;
     teamCentralClient?: TeamCentralCardClient;
 }
+/** This interface represents the data that is prepopulated in the profile card. **/
+export interface PrepopulatedData {
+    fullName?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/profilecard",
-  "version": "19.9.0",
+  "version": "19.11.0",
   "description": "A React component to display a card with user information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -55,9 +55,9 @@
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/avatar-group": "^9.5.0",
-    "@atlaskit/button": "^17.3.0",
+    "@atlaskit/button": "^17.4.0",
     "@atlaskit/dropdown-menu": "^12.5.0",
-    "@atlaskit/empty-state": "^7.6.0",
+    "@atlaskit/empty-state": "^7.7.0",
     "@atlaskit/focus-ring": "^1.3.4",
     "@atlaskit/give-kudos": "^2.1.0",
     "@atlaskit/icon": "^22.0.0",
@@ -67,7 +67,7 @@
     "@atlaskit/popup": "^1.12.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.35.0",
+    "@atlaskit/tokens": "^1.37.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",