@atlaskit/profilecard 19.10.0 → 19.11.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/profilecard
 
+## 19.11.1
+
+### Patch Changes
+
+- [#73706](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73706) [`3a5408573683`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3a5408573683) - Fix bug causing profilecard to disappear early in some circumstances
+
+## 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

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.10.0");
+  headers.append('atl-client-version', "19.11.1");
   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,70 +46,67 @@ 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],
     setIsMounted = _useState2[1];
   var showDelay = trigger === 'click' ? 0 : _config.DELAY_MS_SHOW;
   var hideDelay = trigger === 'click' ? 0 : _config.DELAY_MS_HIDE;
-  var _useState3 = (0, _react.useState)(0),
+  var showTimer = (0, _react.useRef)(0);
+  var hideTimer = (0, _react.useRef)(0);
+  var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    showTimer = _useState4[0],
-    setShowTimer = _useState4[1];
-  var _useState5 = (0, _react.useState)(0),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  var _useState5 = (0, _react.useState)(undefined),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    hideTimer = _useState6[0],
-    setHideTimer = _useState6[1];
+    isLoading = _useState6[0],
+    setIsLoading = _useState6[1];
   var _useState7 = (0, _react.useState)(false),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    visible = _useState8[0],
-    setVisible = _useState8[1];
-  var _useState9 = (0, _react.useState)(undefined),
+    hasError = _useState8[0],
+    setHasError = _useState8[1];
+  var _useState9 = (0, _react.useState)(null),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    isLoading = _useState10[0],
-    setIsLoading = _useState10[1];
-  var _useState11 = (0, _react.useState)(false),
+    error = _useState10[0],
+    setError = _useState10[1];
+  var _useState11 = (0, _react.useState)(null),
     _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    hasError = _useState12[0],
-    setHasError = _useState12[1];
-  var _useState13 = (0, _react.useState)(null),
+    data = _useState12[0],
+    setData = _useState12[1];
+  var _useState13 = (0, _react.useState)(undefined),
     _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-    error = _useState14[0],
-    setError = _useState14[1];
-  var _useState15 = (0, _react.useState)(null),
+    reportingLinesData = _useState14[0],
+    setReportingLinesData = _useState14[1];
+  var _useState15 = (0, _react.useState)(false),
     _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-    data = _useState16[0],
-    setData = _useState16[1];
+    shouldShowGiveKudos = _useState16[0],
+    setShouldShowGiveKudos = _useState16[1];
   var _useState17 = (0, _react.useState)(undefined),
     _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-    reportingLinesData = _useState18[0],
-    setReportingLinesData = _useState18[1];
+    teamCentralBaseUrl = _useState18[0],
+    setTeamCentralBaseUrl = _useState18[1];
   var _useState19 = (0, _react.useState)(false),
     _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-    shouldShowGiveKudos = _useState20[0],
-    setShouldShowGiveKudos = _useState20[1];
-  var _useState21 = (0, _react.useState)(undefined),
+    kudosDrawerOpen = _useState20[0],
+    setKudosDrawerOpen = _useState20[1];
+  var _useState21 = (0, _react.useState)(false),
     _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
-    teamCentralBaseUrl = _useState22[0],
-    setTeamCentralBaseUrl = _useState22[1];
-  var _useState23 = (0, _react.useState)(false),
-    _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
-    kudosDrawerOpen = _useState24[0],
-    setKudosDrawerOpen = _useState24[1];
-  var _useState25 = (0, _react.useState)(false),
-    _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
-    isTriggeredUsingKeyboard = _useState26[0],
-    setTriggeredUsingKeyboard = _useState26[1];
+    isTriggeredUsingKeyboard = _useState22[0],
+    setTriggeredUsingKeyboard = _useState22[1];
   var triggerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     setIsMounted(true);
     return function () {
       setIsMounted(false);
-      clearTimeout(showTimer);
-      clearTimeout(hideTimer);
+      clearTimeout(showTimer.current);
+      clearTimeout(hideTimer.current);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -129,17 +128,16 @@ function ProfilecardTriggerNext(_ref) {
     (0, _analytics.fireEvent)(createAnalyticsEvent, payload);
   }, [createAnalyticsEvent, isMounted]);
   var hideProfilecard = (0, _react.useCallback)(function () {
-    clearTimeout(showTimer);
-    clearTimeout(hideTimer);
+    clearTimeout(showTimer.current);
+    clearTimeout(hideTimer.current);
     if (!isTriggeredUsingKeyboard) {
-      setHideTimer(window.setTimeout(function () {
+      hideTimer.current = window.setTimeout(function () {
         setVisible(false);
-      }, hideDelay));
+      }, hideDelay);
     }
-    setTriggeredUsingKeyboard(false);
-  }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
+  }, [hideDelay, isTriggeredUsingKeyboard]);
   var handleKeyboardClose = (0, _react.useCallback)(function (event) {
-    if (event.key !== 'Escape') {
+    if (event.key && event.key !== 'Escape') {
       return;
     }
     if (triggerRef.current) {
@@ -202,15 +200,15 @@ function ProfilecardTriggerNext(_ref) {
     }, _callee, null, [[7, 15]]);
   })), [cloudId, fireAnalytics, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
   var showProfilecard = (0, _react.useCallback)(function () {
-    clearTimeout(hideTimer);
-    clearTimeout(showTimer);
-    setShowTimer(window.setTimeout(function () {
+    clearTimeout(hideTimer.current);
+    clearTimeout(showTimer.current);
+    showTimer.current = window.setTimeout(function () {
       if (!visible) {
         void clientFetchProfile();
         setVisible(true);
       }
-    }, showDelay));
-  }, [hideTimer, showDelay, showTimer, visible, clientFetchProfile]);
+    }, showDelay);
+  }, [showDelay, visible, clientFetchProfile]);
   var onClick = (0, _react.useCallback)(function (event) {
     // If the user clicks on the trigger then we don't want that click event to
     // propagate out to parent containers. For example when clicking a mention
@@ -271,6 +269,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), {}, {
@@ -290,9 +289,9 @@ function ProfilecardTriggerNext(_ref) {
     },
     placement: position,
     content: function content() {
-      return showLoading ? /*#__PURE__*/_react.default.createElement(LoadingView, {
+      return /*#__PURE__*/_react.default.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/_react.default.createElement(LoadingView, {
         fireAnalytics: fireAnalytics
-      }) : /*#__PURE__*/_react.default.createElement("div", wrapperProps, visible && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+      }) : visible && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
         fallback: null
       }, /*#__PURE__*/_react.default.createElement(_lazyProfileCard.ProfileCardLazy, (0, _extends2.default)({}, profilecardProps, {
         actions: filterActions(),
@@ -315,7 +314,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/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.10.0"
+      packageVersion: "19.11.1"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

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.10.0");
+  headers.append('atl-client-version', "19.11.1");
   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,16 +24,20 @@ 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;
-  const [showTimer, setShowTimer] = useState(0);
-  const [hideTimer, setHideTimer] = useState(0);
+  const showTimer = useRef(0);
+  const hideTimer = useRef(0);
   const [visible, setVisible] = useState(false);
   const [isLoading, setIsLoading] = useState(undefined);
   const [hasError, setHasError] = useState(false);
@@ -47,8 +53,8 @@ export default function ProfilecardTriggerNext({
     setIsMounted(true);
     return () => {
       setIsMounted(false);
-      clearTimeout(showTimer);
-      clearTimeout(hideTimer);
+      clearTimeout(showTimer.current);
+      clearTimeout(hideTimer.current);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -70,17 +76,16 @@ export default function ProfilecardTriggerNext({
     fireEvent(createAnalyticsEvent, payload);
   }, [createAnalyticsEvent, isMounted]);
   const hideProfilecard = useCallback(() => {
-    clearTimeout(showTimer);
-    clearTimeout(hideTimer);
+    clearTimeout(showTimer.current);
+    clearTimeout(hideTimer.current);
     if (!isTriggeredUsingKeyboard) {
-      setHideTimer(window.setTimeout(() => {
+      hideTimer.current = window.setTimeout(() => {
         setVisible(false);
-      }, hideDelay));
+      }, hideDelay);
     }
-    setTriggeredUsingKeyboard(false);
-  }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
+  }, [hideDelay, isTriggeredUsingKeyboard]);
   const handleKeyboardClose = useCallback(event => {
-    if (event.key !== 'Escape') {
+    if (event.key && event.key !== 'Escape') {
       return;
     }
     if (triggerRef.current) {
@@ -126,15 +131,15 @@ export default function ProfilecardTriggerNext({
     }
   }, [cloudId, fireAnalytics, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
   const showProfilecard = useCallback(() => {
-    clearTimeout(hideTimer);
-    clearTimeout(showTimer);
-    setShowTimer(window.setTimeout(() => {
+    clearTimeout(hideTimer.current);
+    clearTimeout(showTimer.current);
+    showTimer.current = window.setTimeout(() => {
       if (!visible) {
         void clientFetchProfile();
         setVisible(true);
       }
-    }, showDelay));
-  }, [hideTimer, showDelay, showTimer, visible, clientFetchProfile]);
+    }, showDelay);
+  }, [showDelay, visible, clientFetchProfile]);
   const onClick = useCallback(event => {
     // If the user clicks on the trigger then we don't want that click event to
     // propagate out to parent containers. For example when clicking a mention
@@ -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,
@@ -209,9 +215,9 @@ export default function ProfilecardTriggerNext({
       handleKeyboardClose(event);
     },
     placement: position,
-    content: () => showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
+    content: () => /*#__PURE__*/React.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
       fireAnalytics: fireAnalytics
-    }) : /*#__PURE__*/React.createElement("div", wrapperProps, visible && /*#__PURE__*/React.createElement(Suspense, {
+    }) : visible && /*#__PURE__*/React.createElement(Suspense, {
       fallback: null
     }, /*#__PURE__*/React.createElement(ProfileCardLazy, _extends({}, profilecardProps, {
       actions: filterActions(),
@@ -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/util/analytics.js

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

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.10.0");
+  headers.append('atl-client-version', "19.11.1");
   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,70 +36,67 @@ 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],
     setIsMounted = _useState2[1];
   var showDelay = trigger === 'click' ? 0 : DELAY_MS_SHOW;
   var hideDelay = trigger === 'click' ? 0 : DELAY_MS_HIDE;
-  var _useState3 = useState(0),
+  var showTimer = useRef(0);
+  var hideTimer = useRef(0);
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    showTimer = _useState4[0],
-    setShowTimer = _useState4[1];
-  var _useState5 = useState(0),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  var _useState5 = useState(undefined),
     _useState6 = _slicedToArray(_useState5, 2),
-    hideTimer = _useState6[0],
-    setHideTimer = _useState6[1];
+    isLoading = _useState6[0],
+    setIsLoading = _useState6[1];
   var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    visible = _useState8[0],
-    setVisible = _useState8[1];
-  var _useState9 = useState(undefined),
+    hasError = _useState8[0],
+    setHasError = _useState8[1];
+  var _useState9 = useState(null),
     _useState10 = _slicedToArray(_useState9, 2),
-    isLoading = _useState10[0],
-    setIsLoading = _useState10[1];
-  var _useState11 = useState(false),
+    error = _useState10[0],
+    setError = _useState10[1];
+  var _useState11 = useState(null),
     _useState12 = _slicedToArray(_useState11, 2),
-    hasError = _useState12[0],
-    setHasError = _useState12[1];
-  var _useState13 = useState(null),
+    data = _useState12[0],
+    setData = _useState12[1];
+  var _useState13 = useState(undefined),
     _useState14 = _slicedToArray(_useState13, 2),
-    error = _useState14[0],
-    setError = _useState14[1];
-  var _useState15 = useState(null),
+    reportingLinesData = _useState14[0],
+    setReportingLinesData = _useState14[1];
+  var _useState15 = useState(false),
     _useState16 = _slicedToArray(_useState15, 2),
-    data = _useState16[0],
-    setData = _useState16[1];
+    shouldShowGiveKudos = _useState16[0],
+    setShouldShowGiveKudos = _useState16[1];
   var _useState17 = useState(undefined),
     _useState18 = _slicedToArray(_useState17, 2),
-    reportingLinesData = _useState18[0],
-    setReportingLinesData = _useState18[1];
+    teamCentralBaseUrl = _useState18[0],
+    setTeamCentralBaseUrl = _useState18[1];
   var _useState19 = useState(false),
     _useState20 = _slicedToArray(_useState19, 2),
-    shouldShowGiveKudos = _useState20[0],
-    setShouldShowGiveKudos = _useState20[1];
-  var _useState21 = useState(undefined),
+    kudosDrawerOpen = _useState20[0],
+    setKudosDrawerOpen = _useState20[1];
+  var _useState21 = useState(false),
     _useState22 = _slicedToArray(_useState21, 2),
-    teamCentralBaseUrl = _useState22[0],
-    setTeamCentralBaseUrl = _useState22[1];
-  var _useState23 = useState(false),
-    _useState24 = _slicedToArray(_useState23, 2),
-    kudosDrawerOpen = _useState24[0],
-    setKudosDrawerOpen = _useState24[1];
-  var _useState25 = useState(false),
-    _useState26 = _slicedToArray(_useState25, 2),
-    isTriggeredUsingKeyboard = _useState26[0],
-    setTriggeredUsingKeyboard = _useState26[1];
+    isTriggeredUsingKeyboard = _useState22[0],
+    setTriggeredUsingKeyboard = _useState22[1];
   var triggerRef = useRef(null);
   useEffect(function () {
     setIsMounted(true);
     return function () {
       setIsMounted(false);
-      clearTimeout(showTimer);
-      clearTimeout(hideTimer);
+      clearTimeout(showTimer.current);
+      clearTimeout(hideTimer.current);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -119,17 +118,16 @@ export default function ProfilecardTriggerNext(_ref) {
     fireEvent(createAnalyticsEvent, payload);
   }, [createAnalyticsEvent, isMounted]);
   var hideProfilecard = useCallback(function () {
-    clearTimeout(showTimer);
-    clearTimeout(hideTimer);
+    clearTimeout(showTimer.current);
+    clearTimeout(hideTimer.current);
     if (!isTriggeredUsingKeyboard) {
-      setHideTimer(window.setTimeout(function () {
+      hideTimer.current = window.setTimeout(function () {
         setVisible(false);
-      }, hideDelay));
+      }, hideDelay);
     }
-    setTriggeredUsingKeyboard(false);
-  }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
+  }, [hideDelay, isTriggeredUsingKeyboard]);
   var handleKeyboardClose = useCallback(function (event) {
-    if (event.key !== 'Escape') {
+    if (event.key && event.key !== 'Escape') {
       return;
     }
     if (triggerRef.current) {
@@ -192,15 +190,15 @@ export default function ProfilecardTriggerNext(_ref) {
     }, _callee, null, [[7, 15]]);
   })), [cloudId, fireAnalytics, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
   var showProfilecard = useCallback(function () {
-    clearTimeout(hideTimer);
-    clearTimeout(showTimer);
-    setShowTimer(window.setTimeout(function () {
+    clearTimeout(hideTimer.current);
+    clearTimeout(showTimer.current);
+    showTimer.current = window.setTimeout(function () {
       if (!visible) {
         void clientFetchProfile();
         setVisible(true);
       }
-    }, showDelay));
-  }, [hideTimer, showDelay, showTimer, visible, clientFetchProfile]);
+    }, showDelay);
+  }, [showDelay, visible, clientFetchProfile]);
   var onClick = useCallback(function (event) {
     // If the user clicks on the trigger then we don't want that click event to
     // propagate out to parent containers. For example when clicking a mention
@@ -261,6 +259,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), {}, {
@@ -280,9 +279,9 @@ export default function ProfilecardTriggerNext(_ref) {
     },
     placement: position,
     content: function content() {
-      return showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
+      return /*#__PURE__*/React.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
         fireAnalytics: fireAnalytics
-      }) : /*#__PURE__*/React.createElement("div", wrapperProps, visible && /*#__PURE__*/React.createElement(Suspense, {
+      }) : visible && /*#__PURE__*/React.createElement(Suspense, {
         fallback: null
       }, /*#__PURE__*/React.createElement(ProfileCardLazy, _extends({}, profilecardProps, {
         actions: filterActions(),
@@ -305,7 +304,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/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.10.0"
+      packageVersion: "19.11.1"
     }, 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/types.d.ts

@@ -115,6 +115,7 @@ export interface ProfileCardTriggerProps {
     addFlag?: (flag: any) => void;
     ariaLabel?: string;
     ariaLabelledBy?: string;
+    prepopulatedData?: PrepopulatedData;
 }
 export interface ProfileCardTriggerState {
     visible?: boolean;
@@ -362,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/types.d.ts

@@ -115,6 +115,7 @@ export interface ProfileCardTriggerProps {
     addFlag?: (flag: any) => void;
     ariaLabel?: string;
     ariaLabelledBy?: string;
+    prepopulatedData?: PrepopulatedData;
 }
 export interface ProfileCardTriggerState {
     visible?: boolean;
@@ -362,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.10.0",
+  "version": "19.11.1",
   "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.36.0",
+    "@atlaskit/tokens": "^1.37.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",