@atlaskit/profilecard 19.8.0 → 19.9.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/profilecard
 
+## 19.9.0
+
+### Minor Changes
+
+- [#70817](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70817) [`bc59c17947b6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc59c17947b6) - Add focus to view profile button when Profile card display
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 19.8.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.8.0");
+  headers.append('atl-client-version', "19.9.0");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

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

@@ -131,12 +131,14 @@ var ProfilecardInternal = exports.ProfilecardInternal = function ProfilecardInte
     fireAnalyticsWithDuration: fireAnalyticsWithDuration
   })), realActions && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Card.ActionsFlexSpacer, null), /*#__PURE__*/_react.default.createElement(Actions, {
     actions: realActions,
-    fireAnalyticsWithDuration: fireAnalyticsWithDuration
+    fireAnalyticsWithDuration: fireAnalyticsWithDuration,
+    isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard
   })))));
 };
 var Actions = function Actions(_ref) {
   var actions = _ref.actions,
-    fireAnalyticsWithDuration = _ref.fireAnalyticsWithDuration;
+    fireAnalyticsWithDuration = _ref.fireAnalyticsWithDuration,
+    isTriggeredUsingKeyboard = _ref.isTriggeredUsingKeyboard;
   var onActionClick = (0, _react.useCallback)(function (action, args, event, index) {
     fireAnalyticsWithDuration(function (duration) {
       return (0, _analytics.actionClicked)('user', {
@@ -152,6 +154,12 @@ 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;
   }
@@ -173,7 +181,8 @@ var Actions = function Actions(_ref) {
         }
         return onActionClick(action, args, event, index);
       },
-      href: action.link
+      href: action.link,
+      ref: index === 0 ? buttonRef : undefined
     }, 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,7 +14,6 @@ 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"));
@@ -43,11 +42,11 @@ function ProfilecardTriggerNext(_ref) {
     children = _ref.children,
     testId = _ref.testId,
     addFlag = _ref.addFlag,
-    onReportingLinesClick = _ref.onReportingLinesClick;
+    onReportingLinesClick = _ref.onReportingLinesClick,
+    ariaLabel = _ref.ariaLabel,
+    ariaLabelledBy = _ref.ariaLabelledBy;
   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],
@@ -98,6 +97,11 @@ function ProfilecardTriggerNext(_ref) {
     _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];
+  var triggerRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
     setIsMounted(true);
     return function () {
@@ -127,10 +131,23 @@ function ProfilecardTriggerNext(_ref) {
   var hideProfilecard = (0, _react.useCallback)(function () {
     clearTimeout(showTimer);
     clearTimeout(hideTimer);
-    setHideTimer(window.setTimeout(function () {
-      setVisible(false);
-    }, hideDelay));
-  }, [hideDelay, hideTimer, showTimer]);
+    if (!isTriggeredUsingKeyboard) {
+      setHideTimer(window.setTimeout(function () {
+        setVisible(false);
+      }, hideDelay));
+    }
+    setTriggeredUsingKeyboard(false);
+  }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
+  var handleKeyboardClose = (0, _react.useCallback)(function (event) {
+    if (event.key !== 'Escape') {
+      return;
+    }
+    if (triggerRef.current) {
+      triggerRef.current.focus();
+    }
+    setTriggeredUsingKeyboard(false);
+    setVisible(false);
+  }, [setTriggeredUsingKeyboard, setVisible]);
   var handleClientSuccess = (0, _react.useCallback)(function (profileData, reportingLinesData, shouldShowGiveKudos) {
     if (!isMounted) {
       return;
@@ -213,6 +230,7 @@ function ProfilecardTriggerNext(_ref) {
   var onKeyPress = (0, _react.useCallback)(function (event) {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
+      setTriggeredUsingKeyboard(true);
       showProfilecard();
       if (!visible) {
         fireAnalytics((0, _analytics.cardTriggered)('user', 'click'));
@@ -261,11 +279,15 @@ function ProfilecardTriggerNext(_ref) {
     isKudosEnabled: shouldShowGiveKudos,
     teamCentralBaseUrl: teamCentralBaseUrl,
     cloudId: cloudId,
-    openKudosDrawer: openKudosDrawer
+    openKudosDrawer: openKudosDrawer,
+    isTriggeredUsingKeyboard: isTriggeredUsingKeyboard
   });
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_popup.default, {
     isOpen: !!visible,
-    onClose: hideProfilecard,
+    onClose: function onClose(event) {
+      hideProfilecard();
+      handleKeyboardClose(event);
+    },
     placement: position,
     content: function content() {
       return showLoading ? /*#__PURE__*/_react.default.createElement(LoadingView, {
@@ -280,20 +302,21 @@ function ProfilecardTriggerNext(_ref) {
       }))));
     },
     trigger: function trigger(triggerProps) {
-      var ref = triggerProps.ref,
+      var callbackRef = triggerProps.ref,
         innerProps = (0, _objectWithoutProperties2.default)(triggerProps, _excluded);
+      var ref = function ref(element) {
+        triggerRef.current = element;
+        if (typeof callbackRef === 'function') {
+          callbackRef(element);
+        }
+      };
       return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, innerProps, containerListeners, {
         ref: ref,
         "data-testid": testId,
         role: "button",
         tabIndex: 0,
-        "aria-label": formatMessage({
-          id: 'profilecard.user.trigger.aria-label',
-          defaultMessage: 'More information about {fullName}',
-          description: 'Label for profile card trigger'
-        }, {
-          fullName: profilecardProps.fullName
-        })
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy
       }), children);
     },
     zIndex: _constants.layers.modal(),

package/dist/cjs/i18n/en.js

@@ -13,6 +13,7 @@ exports.default = void 0;
  */
 //
 var _default = exports.default = {
+  'profilecard.user.trigger.aria-label': 'More information about {fullName}',
   'pt.profile-card.closed.account': 'Account deleted',
   'pt.profile-card.closed.account.has.date.a.few.months': 'Their account has been deleted for a few months.',
   'pt.profile-card.closed.account.has.date.last.month': 'Their account was deleted last month.',

package/dist/cjs/i18n/en_GB.js

@@ -13,6 +13,7 @@ exports.default = void 0;
  */
 //English (United Kingdom)
 var _default = exports.default = {
+  'profilecard.user.trigger.aria-label': 'More information about {fullName}',
   'pt.profile-card.closed.account': 'Account deleted',
   'pt.profile-card.closed.account.has.date.a.few.months': 'Their account has been deleted for a few months.',
   'pt.profile-card.closed.account.has.date.last.month': 'Their account was deleted last month.',

package/dist/cjs/i18n/en_ZZ.js

@@ -13,6 +13,7 @@ exports.default = void 0;
  */
 //
 var _default = exports.default = {
+  'profilecard.user.trigger.aria-label': '⁣⁢More information about {fullName}⁠‍⁡؜‍‌‌⁡‌؜⁡‌⁣⁤',
   'pt.profile-card.closed.account': '⁣⁢Account deleted⁠؜⁡‌؜⁠‍⁡⁠؜؜⁣⁤',
   'pt.profile-card.closed.account.has.date.a.few.months': '⁣⁢Their account has been deleted for a few months.⁠⁡⁠‍‌⁠⁡‍؜‌⁡‌‌؜⁣⁤',
   'pt.profile-card.closed.account.has.date.last.month': '⁣⁢Their account was deleted last month.⁡‍⁠‌⁡؜‍؜⁠‍⁠؜⁣⁤',

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.8.0"
+      packageVersion: "19.9.0"
     }, 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.8.0");
+  headers.append('atl-client-version', "19.9.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, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Avatar from '@atlaskit/avatar';
@@ -118,12 +118,14 @@ export const ProfilecardInternal = props => {
     fireAnalyticsWithDuration: fireAnalyticsWithDuration
   })), realActions && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), /*#__PURE__*/React.createElement(Actions, {
     actions: realActions,
-    fireAnalyticsWithDuration: fireAnalyticsWithDuration
+    fireAnalyticsWithDuration: fireAnalyticsWithDuration,
+    isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard
   })))));
 };
 const Actions = ({
   actions,
-  fireAnalyticsWithDuration
+  fireAnalyticsWithDuration,
+  isTriggeredUsingKeyboard
 }) => {
   const onActionClick = useCallback((action, args, event, index) => {
     fireAnalyticsWithDuration(duration => actionClicked('user', {
@@ -138,6 +140,12 @@ 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;
   }
@@ -154,7 +162,8 @@ const Actions = ({
       appearance: "default",
       key: action.id || index,
       onClick: (event, ...args) => onActionClick(action, args, event, index),
-      href: action.link
+      href: action.link,
+      ref: index === 0 ? buttonRef : undefined
     }, 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,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
-import { useIntl } from 'react-intl-next';
+import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import Popup from '@atlaskit/popup';
@@ -21,14 +20,13 @@ export default function ProfilecardTriggerNext({
   children,
   testId,
   addFlag,
-  onReportingLinesClick
+  onReportingLinesClick,
+  ariaLabel,
+  ariaLabelledBy
 }) {
   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;
@@ -43,6 +41,8 @@ export default function ProfilecardTriggerNext({
   const [shouldShowGiveKudos, setShouldShowGiveKudos] = useState(false);
   const [teamCentralBaseUrl, setTeamCentralBaseUrl] = useState(undefined);
   const [kudosDrawerOpen, setKudosDrawerOpen] = useState(false);
+  const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
+  const triggerRef = useRef(null);
   useEffect(() => {
     setIsMounted(true);
     return () => {
@@ -72,10 +72,23 @@ export default function ProfilecardTriggerNext({
   const hideProfilecard = useCallback(() => {
     clearTimeout(showTimer);
     clearTimeout(hideTimer);
-    setHideTimer(window.setTimeout(() => {
-      setVisible(false);
-    }, hideDelay));
-  }, [hideDelay, hideTimer, showTimer]);
+    if (!isTriggeredUsingKeyboard) {
+      setHideTimer(window.setTimeout(() => {
+        setVisible(false);
+      }, hideDelay));
+    }
+    setTriggeredUsingKeyboard(false);
+  }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
+  const handleKeyboardClose = useCallback(event => {
+    if (event.key !== 'Escape') {
+      return;
+    }
+    if (triggerRef.current) {
+      triggerRef.current.focus();
+    }
+    setTriggeredUsingKeyboard(false);
+    setVisible(false);
+  }, [setTriggeredUsingKeyboard, setVisible]);
   const handleClientSuccess = useCallback((profileData, reportingLinesData, shouldShowGiveKudos) => {
     if (!isMounted) {
       return;
@@ -141,6 +154,7 @@ export default function ProfilecardTriggerNext({
   const onKeyPress = useCallback(event => {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
+      setTriggeredUsingKeyboard(true);
       showProfilecard();
       if (!visible) {
         fireAnalytics(cardTriggered('user', 'click'));
@@ -185,11 +199,15 @@ export default function ProfilecardTriggerNext({
     isKudosEnabled: shouldShowGiveKudos,
     teamCentralBaseUrl: teamCentralBaseUrl,
     cloudId: cloudId,
-    openKudosDrawer: openKudosDrawer
+    openKudosDrawer: openKudosDrawer,
+    isTriggeredUsingKeyboard: isTriggeredUsingKeyboard
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popup, {
     isOpen: !!visible,
-    onClose: hideProfilecard,
+    onClose: event => {
+      hideProfilecard();
+      handleKeyboardClose(event);
+    },
     placement: position,
     content: () => showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
       fireAnalytics: fireAnalytics
@@ -203,21 +221,22 @@ export default function ProfilecardTriggerNext({
     })))),
     trigger: triggerProps => {
       const {
-        ref,
+        ref: callbackRef,
         ...innerProps
       } = triggerProps;
+      const ref = element => {
+        triggerRef.current = element;
+        if (typeof callbackRef === 'function') {
+          callbackRef(element);
+        }
+      };
       return /*#__PURE__*/React.createElement("span", _extends({}, innerProps, containerListeners, {
         ref: ref,
         "data-testid": testId,
         role: "button",
         tabIndex: 0,
-        "aria-label": formatMessage({
-          id: 'profilecard.user.trigger.aria-label',
-          defaultMessage: 'More information about {fullName}',
-          description: 'Label for profile card trigger'
-        }, {
-          fullName: profilecardProps.fullName
-        })
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy
       }), children);
     },
     zIndex: layers.modal(),

package/dist/es2019/i18n/en.js

@@ -7,6 +7,7 @@
  */
 //
 export default {
+  'profilecard.user.trigger.aria-label': 'More information about {fullName}',
   'pt.profile-card.closed.account': 'Account deleted',
   'pt.profile-card.closed.account.has.date.a.few.months': 'Their account has been deleted for a few months.',
   'pt.profile-card.closed.account.has.date.last.month': 'Their account was deleted last month.',

package/dist/es2019/i18n/en_GB.js

@@ -7,6 +7,7 @@
  */
 //English (United Kingdom)
 export default {
+  'profilecard.user.trigger.aria-label': 'More information about {fullName}',
   'pt.profile-card.closed.account': 'Account deleted',
   'pt.profile-card.closed.account.has.date.a.few.months': 'Their account has been deleted for a few months.',
   'pt.profile-card.closed.account.has.date.last.month': 'Their account was deleted last month.',

package/dist/es2019/i18n/en_ZZ.js

@@ -7,6 +7,7 @@
  */
 //
 export default {
+  'profilecard.user.trigger.aria-label': '⁣⁢More information about {fullName}⁠‍⁡؜‍‌‌⁡‌؜⁡‌⁣⁤',
   'pt.profile-card.closed.account': '⁣⁢Account deleted⁠؜⁡‌؜⁠‍⁡⁠؜؜⁣⁤',
   'pt.profile-card.closed.account.has.date.a.few.months': '⁣⁢Their account has been deleted for a few months.⁠⁡⁠‍‌⁠⁡‍؜‌⁡‌‌؜⁣⁤',
   'pt.profile-card.closed.account.has.date.last.month': '⁣⁢Their account was deleted last month.⁡‍⁠‌⁡؜‍؜⁠‍⁠؜⁣⁤',

package/dist/es2019/util/analytics.js

@@ -31,7 +31,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "19.8.0",
+    packageVersion: "19.9.0",
     ...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.8.0");
+  headers.append('atl-client-version', "19.9.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, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Avatar from '@atlaskit/avatar';
@@ -121,12 +121,14 @@ export var ProfilecardInternal = function ProfilecardInternal(props) {
     fireAnalyticsWithDuration: fireAnalyticsWithDuration
   })), realActions && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), /*#__PURE__*/React.createElement(Actions, {
     actions: realActions,
-    fireAnalyticsWithDuration: fireAnalyticsWithDuration
+    fireAnalyticsWithDuration: fireAnalyticsWithDuration,
+    isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard
   })))));
 };
 var Actions = function Actions(_ref) {
   var actions = _ref.actions,
-    fireAnalyticsWithDuration = _ref.fireAnalyticsWithDuration;
+    fireAnalyticsWithDuration = _ref.fireAnalyticsWithDuration,
+    isTriggeredUsingKeyboard = _ref.isTriggeredUsingKeyboard;
   var onActionClick = useCallback(function (action, args, event, index) {
     fireAnalyticsWithDuration(function (duration) {
       return actionClicked('user', {
@@ -142,6 +144,12 @@ 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;
   }
@@ -163,7 +171,8 @@ var Actions = function Actions(_ref) {
         }
         return onActionClick(action, args, event, index);
       },
-      href: action.link
+      href: action.link,
+      ref: index === 0 ? buttonRef : undefined
     }, 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

@@ -8,8 +8,7 @@ var _excluded = ["ref"];
 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 _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
-import { useIntl } from 'react-intl-next';
+import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import Popup from '@atlaskit/popup';
@@ -33,11 +32,11 @@ export default function ProfilecardTriggerNext(_ref) {
     children = _ref.children,
     testId = _ref.testId,
     addFlag = _ref.addFlag,
-    onReportingLinesClick = _ref.onReportingLinesClick;
+    onReportingLinesClick = _ref.onReportingLinesClick,
+    ariaLabel = _ref.ariaLabel,
+    ariaLabelledBy = _ref.ariaLabelledBy;
   var _useAnalyticsEvents = useAnalyticsEvents(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isMounted = _useState2[0],
@@ -88,6 +87,11 @@ export default function ProfilecardTriggerNext(_ref) {
     _useState24 = _slicedToArray(_useState23, 2),
     kudosDrawerOpen = _useState24[0],
     setKudosDrawerOpen = _useState24[1];
+  var _useState25 = useState(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    isTriggeredUsingKeyboard = _useState26[0],
+    setTriggeredUsingKeyboard = _useState26[1];
+  var triggerRef = useRef(null);
   useEffect(function () {
     setIsMounted(true);
     return function () {
@@ -117,10 +121,23 @@ export default function ProfilecardTriggerNext(_ref) {
   var hideProfilecard = useCallback(function () {
     clearTimeout(showTimer);
     clearTimeout(hideTimer);
-    setHideTimer(window.setTimeout(function () {
-      setVisible(false);
-    }, hideDelay));
-  }, [hideDelay, hideTimer, showTimer]);
+    if (!isTriggeredUsingKeyboard) {
+      setHideTimer(window.setTimeout(function () {
+        setVisible(false);
+      }, hideDelay));
+    }
+    setTriggeredUsingKeyboard(false);
+  }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
+  var handleKeyboardClose = useCallback(function (event) {
+    if (event.key !== 'Escape') {
+      return;
+    }
+    if (triggerRef.current) {
+      triggerRef.current.focus();
+    }
+    setTriggeredUsingKeyboard(false);
+    setVisible(false);
+  }, [setTriggeredUsingKeyboard, setVisible]);
   var handleClientSuccess = useCallback(function (profileData, reportingLinesData, shouldShowGiveKudos) {
     if (!isMounted) {
       return;
@@ -203,6 +220,7 @@ export default function ProfilecardTriggerNext(_ref) {
   var onKeyPress = useCallback(function (event) {
     if (event.key === 'Enter' || event.key === ' ') {
       event.preventDefault();
+      setTriggeredUsingKeyboard(true);
       showProfilecard();
       if (!visible) {
         fireAnalytics(cardTriggered('user', 'click'));
@@ -251,11 +269,15 @@ export default function ProfilecardTriggerNext(_ref) {
     isKudosEnabled: shouldShowGiveKudos,
     teamCentralBaseUrl: teamCentralBaseUrl,
     cloudId: cloudId,
-    openKudosDrawer: openKudosDrawer
+    openKudosDrawer: openKudosDrawer,
+    isTriggeredUsingKeyboard: isTriggeredUsingKeyboard
   });
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popup, {
     isOpen: !!visible,
-    onClose: hideProfilecard,
+    onClose: function onClose(event) {
+      hideProfilecard();
+      handleKeyboardClose(event);
+    },
     placement: position,
     content: function content() {
       return showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
@@ -270,20 +292,21 @@ export default function ProfilecardTriggerNext(_ref) {
       }))));
     },
     trigger: function trigger(triggerProps) {
-      var ref = triggerProps.ref,
+      var callbackRef = triggerProps.ref,
         innerProps = _objectWithoutProperties(triggerProps, _excluded);
+      var ref = function ref(element) {
+        triggerRef.current = element;
+        if (typeof callbackRef === 'function') {
+          callbackRef(element);
+        }
+      };
       return /*#__PURE__*/React.createElement("span", _extends({}, innerProps, containerListeners, {
         ref: ref,
         "data-testid": testId,
         role: "button",
         tabIndex: 0,
-        "aria-label": formatMessage({
-          id: 'profilecard.user.trigger.aria-label',
-          defaultMessage: 'More information about {fullName}',
-          description: 'Label for profile card trigger'
-        }, {
-          fullName: profilecardProps.fullName
-        })
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy
       }), children);
     },
     zIndex: layers.modal(),

package/dist/esm/i18n/en.js

@@ -7,6 +7,7 @@
  */
 //
 export default {
+  'profilecard.user.trigger.aria-label': 'More information about {fullName}',
   'pt.profile-card.closed.account': 'Account deleted',
   'pt.profile-card.closed.account.has.date.a.few.months': 'Their account has been deleted for a few months.',
   'pt.profile-card.closed.account.has.date.last.month': 'Their account was deleted last month.',

package/dist/esm/i18n/en_GB.js

@@ -7,6 +7,7 @@
  */
 //English (United Kingdom)
 export default {
+  'profilecard.user.trigger.aria-label': 'More information about {fullName}',
   'pt.profile-card.closed.account': 'Account deleted',
   'pt.profile-card.closed.account.has.date.a.few.months': 'Their account has been deleted for a few months.',
   'pt.profile-card.closed.account.has.date.last.month': 'Their account was deleted last month.',

package/dist/esm/i18n/en_ZZ.js

@@ -7,6 +7,7 @@
  */
 //
 export default {
+  'profilecard.user.trigger.aria-label': '⁣⁢More information about {fullName}⁠‍⁡؜‍‌‌⁡‌؜⁡‌⁣⁤',
   'pt.profile-card.closed.account': '⁣⁢Account deleted⁠؜⁡‌؜⁠‍⁡⁠؜؜⁣⁤',
   'pt.profile-card.closed.account.has.date.a.few.months': '⁣⁢Their account has been deleted for a few months.⁠⁡⁠‍‌⁠⁡‍؜‌⁡‌‌؜⁣⁤',
   'pt.profile-card.closed.account.has.date.last.month': '⁣⁢Their account was deleted last month.⁡‍⁠‌⁡؜‍؜⁠‍⁠؜⁣⁤',

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.8.0"
+      packageVersion: "19.9.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, }: ProfileCardTriggerProps): JSX.Element;
+export default function ProfilecardTriggerNext({ trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, }: ProfileCardTriggerProps): JSX.Element;

package/dist/types/i18n/en.d.ts

@@ -5,6 +5,7 @@
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
 declare const _default: {
+    'profilecard.user.trigger.aria-label': string;
     'pt.profile-card.closed.account': string;
     'pt.profile-card.closed.account.has.date.a.few.months': string;
     'pt.profile-card.closed.account.has.date.last.month': string;

package/dist/types/i18n/en_GB.d.ts

@@ -5,6 +5,7 @@
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
 declare const _default: {
+    'profilecard.user.trigger.aria-label': string;
     'pt.profile-card.closed.account': string;
     'pt.profile-card.closed.account.has.date.a.few.months': string;
     'pt.profile-card.closed.account.has.date.last.month': string;

package/dist/types/i18n/en_ZZ.d.ts

@@ -5,6 +5,7 @@
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
 declare const _default: {
+    'profilecard.user.trigger.aria-label': string;
     'pt.profile-card.closed.account': string;
     'pt.profile-card.closed.account.has.date.a.few.months': string;
     'pt.profile-card.closed.account.has.date.last.month': string;

package/dist/types/types.d.ts

@@ -111,6 +111,8 @@ export interface ProfileCardTriggerProps {
     children: React.ReactNode;
     testId?: string;
     addFlag?: (flag: any) => void;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 }
 export interface ProfileCardTriggerState {
     visible?: boolean;
@@ -295,6 +297,7 @@ export interface ProfilecardProps {
     hasDisabledAccountLozenge?: boolean;
     customLozenges?: LozengeProps[];
     openKudosDrawer?: () => void;
+    isTriggeredUsingKeyboard?: boolean;
 }
 export type AnalyticsFromDuration = (duration: number) => AnalyticsEventPayload;
 export type AnalyticsFunction = (generator: AnalyticsFromDuration) => void;

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, }: ProfileCardTriggerProps): JSX.Element;
+export default function ProfilecardTriggerNext({ trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, }: ProfileCardTriggerProps): JSX.Element;

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

@@ -5,6 +5,7 @@
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
 declare const _default: {
+    'profilecard.user.trigger.aria-label': string;
     'pt.profile-card.closed.account': string;
     'pt.profile-card.closed.account.has.date.a.few.months': string;
     'pt.profile-card.closed.account.has.date.last.month': string;

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

@@ -5,6 +5,7 @@
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
 declare const _default: {
+    'profilecard.user.trigger.aria-label': string;
     'pt.profile-card.closed.account': string;
     'pt.profile-card.closed.account.has.date.a.few.months': string;
     'pt.profile-card.closed.account.has.date.last.month': string;

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

@@ -5,6 +5,7 @@
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
 declare const _default: {
+    'profilecard.user.trigger.aria-label': string;
     'pt.profile-card.closed.account': string;
     'pt.profile-card.closed.account.has.date.a.few.months': string;
     'pt.profile-card.closed.account.has.date.last.month': string;

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

@@ -111,6 +111,8 @@ export interface ProfileCardTriggerProps {
     children: React.ReactNode;
     testId?: string;
     addFlag?: (flag: any) => void;
+    ariaLabel?: string;
+    ariaLabelledBy?: string;
 }
 export interface ProfileCardTriggerState {
     visible?: boolean;
@@ -295,6 +297,7 @@ export interface ProfilecardProps {
     hasDisabledAccountLozenge?: boolean;
     customLozenges?: LozengeProps[];
     openKudosDrawer?: () => void;
+    isTriggeredUsingKeyboard?: boolean;
 }
 export type AnalyticsFromDuration = (duration: number) => AnalyticsEventPayload;
 export type AnalyticsFunction = (generator: AnalyticsFromDuration) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/profilecard",
-  "version": "19.8.0",
+  "version": "19.9.0",
   "description": "A React component to display a card with user information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -52,11 +52,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.1.0",
+    "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/avatar-group": "^9.5.0",
-    "@atlaskit/button": "^17.2.0",
-    "@atlaskit/dropdown-menu": "^12.1.0",
+    "@atlaskit/button": "^17.3.0",
+    "@atlaskit/dropdown-menu": "^12.5.0",
     "@atlaskit/empty-state": "^7.6.0",
     "@atlaskit/focus-ring": "^1.3.4",
     "@atlaskit/give-kudos": "^2.1.0",
@@ -64,7 +64,7 @@
     "@atlaskit/lozenge": "^11.6.0",
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.4",
-    "@atlaskit/popup": "^1.11.0",
+    "@atlaskit/popup": "^1.12.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.35.0",