@atlaskit/profilecard 19.10.0 → 19.11.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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.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/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.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.10.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/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.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.10.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/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.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/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.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.36.0",
+    "@atlaskit/tokens": "^1.37.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",