@atlaskit/profilecard 19.8.0 → 19.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/client/UserProfileCardClient.js +2 -1
  3. package/dist/cjs/client/getTeamFromAGG.js +1 -1
  4. package/dist/cjs/components/User/ProfileCard.js +12 -3
  5. package/dist/cjs/components/User/ProfileCardTriggerNext.js +41 -18
  6. package/dist/cjs/i18n/en.js +1 -0
  7. package/dist/cjs/i18n/en_GB.js +1 -0
  8. package/dist/cjs/i18n/en_ZZ.js +1 -0
  9. package/dist/cjs/mocks/profile-data.js +22 -11
  10. package/dist/cjs/util/analytics.js +1 -1
  11. package/dist/es2019/client/UserProfileCardClient.js +2 -1
  12. package/dist/es2019/client/getTeamFromAGG.js +1 -1
  13. package/dist/es2019/components/User/ProfileCard.js +13 -4
  14. package/dist/es2019/components/User/ProfileCardTriggerNext.js +39 -20
  15. package/dist/es2019/i18n/en.js +1 -0
  16. package/dist/es2019/i18n/en_GB.js +1 -0
  17. package/dist/es2019/i18n/en_ZZ.js +1 -0
  18. package/dist/es2019/mocks/profile-data.js +22 -11
  19. package/dist/es2019/util/analytics.js +1 -1
  20. package/dist/esm/client/UserProfileCardClient.js +2 -1
  21. package/dist/esm/client/getTeamFromAGG.js +1 -1
  22. package/dist/esm/components/User/ProfileCard.js +13 -4
  23. package/dist/esm/components/User/ProfileCardTriggerNext.js +42 -19
  24. package/dist/esm/i18n/en.js +1 -0
  25. package/dist/esm/i18n/en_GB.js +1 -0
  26. package/dist/esm/i18n/en_ZZ.js +1 -0
  27. package/dist/esm/mocks/profile-data.js +22 -11
  28. package/dist/esm/util/analytics.js +1 -1
  29. package/dist/types/components/User/ProfileCardTriggerNext.d.ts +1 -1
  30. package/dist/types/i18n/en.d.ts +1 -0
  31. package/dist/types/i18n/en_GB.d.ts +1 -0
  32. package/dist/types/i18n/en_ZZ.d.ts +1 -0
  33. package/dist/types/mocks/profile-data.d.ts +3 -0
  34. package/dist/types/types.d.ts +6 -0
  35. package/dist/types-ts4.5/components/User/ProfileCardTriggerNext.d.ts +1 -1
  36. package/dist/types-ts4.5/i18n/en.d.ts +1 -0
  37. package/dist/types-ts4.5/i18n/en_GB.d.ts +1 -0
  38. package/dist/types-ts4.5/i18n/en_ZZ.d.ts +1 -0
  39. package/dist/types-ts4.5/mocks/profile-data.d.ts +3 -0
  40. package/dist/types-ts4.5/types.d.ts +6 -0
  41. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/profilecard
2
2
 
3
+ ## 19.10.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#71508](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71508) [`e6125d2215ef`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e6125d2215ef) - Added accountType prop
8
+
9
+ ## 19.9.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#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
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+
3
19
  ## 19.8.0
4
20
 
5
21
  ### Minor Changes
@@ -48,7 +48,8 @@ var modifyResponse = exports.modifyResponse = function modifyResponse(response)
48
48
  meta: data.meta || undefined,
49
49
  nickname: data.nickname || undefined,
50
50
  companyName: data.companyName || undefined,
51
- timestring: data.remoteTimeString || undefined
51
+ timestring: data.remoteTimeString || undefined,
52
+ accountType: data.accountType || undefined
52
53
  };
53
54
  };
54
55
 
@@ -57,7 +57,7 @@ var addHeaders = exports.addHeaders = function addHeaders(headers) {
57
57
  headers.append('X-ExperimentalApi', 'teams-beta');
58
58
  headers.append('X-ExperimentalApi', 'team-members-beta');
59
59
  headers.append('atl-client-name', "@atlaskit/profilecard");
60
- headers.append('atl-client-version', "19.8.0");
60
+ headers.append('atl-client-version', "19.10.0");
61
61
  return headers;
62
62
  };
63
63
  function getTeamFromAGG(_x, _x2, _x3) {
@@ -131,12 +131,14 @@ var ProfilecardInternal = exports.ProfilecardInternal = function ProfilecardInte
131
131
  fireAnalyticsWithDuration: fireAnalyticsWithDuration
132
132
  })), realActions && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Card.ActionsFlexSpacer, null), /*#__PURE__*/_react.default.createElement(Actions, {
133
133
  actions: realActions,
134
- fireAnalyticsWithDuration: fireAnalyticsWithDuration
134
+ fireAnalyticsWithDuration: fireAnalyticsWithDuration,
135
+ isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard
135
136
  })))));
136
137
  };
137
138
  var Actions = function Actions(_ref) {
138
139
  var actions = _ref.actions,
139
- fireAnalyticsWithDuration = _ref.fireAnalyticsWithDuration;
140
+ fireAnalyticsWithDuration = _ref.fireAnalyticsWithDuration,
141
+ isTriggeredUsingKeyboard = _ref.isTriggeredUsingKeyboard;
140
142
  var onActionClick = (0, _react.useCallback)(function (action, args, event, index) {
141
143
  fireAnalyticsWithDuration(function (duration) {
142
144
  return (0, _analytics.actionClicked)('user', {
@@ -152,6 +154,12 @@ var Actions = function Actions(_ref) {
152
154
  action.callback.apply(action, [event].concat((0, _toConsumableArray2.default)(args)));
153
155
  }
154
156
  }, [fireAnalyticsWithDuration]);
157
+ var buttonRef = (0, _react.useRef)(null);
158
+ (0, _react.useEffect)(function () {
159
+ if (actions.length > 0 && buttonRef.current && isTriggeredUsingKeyboard) {
160
+ buttonRef.current.focus();
161
+ }
162
+ }, [isTriggeredUsingKeyboard, actions.length]);
155
163
  if (!actions || actions.length === 0) {
156
164
  return null;
157
165
  }
@@ -173,7 +181,8 @@ var Actions = function Actions(_ref) {
173
181
  }
174
182
  return onActionClick(action, args, event, index);
175
183
  },
176
- href: action.link
184
+ href: action.link,
185
+ ref: index === 0 ? buttonRef : undefined
177
186
  }, action.label, isKudos && /*#__PURE__*/_react.default.createElement(_Card.AnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null))));
178
187
  if (isKudos) {
179
188
  return /*#__PURE__*/_react.default.createElement(_Card.AnimatedKudosButton, {
@@ -14,7 +14,6 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
14
14
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
15
15
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
16
16
  var _react = _interopRequireWildcard(require("react"));
17
- var _reactIntlNext = require("react-intl-next");
18
17
  var _analyticsNext = require("@atlaskit/analytics-next");
19
18
  var _giveKudos = require("@atlaskit/give-kudos");
20
19
  var _popup = _interopRequireDefault(require("@atlaskit/popup"));
@@ -43,11 +42,11 @@ function ProfilecardTriggerNext(_ref) {
43
42
  children = _ref.children,
44
43
  testId = _ref.testId,
45
44
  addFlag = _ref.addFlag,
46
- onReportingLinesClick = _ref.onReportingLinesClick;
45
+ onReportingLinesClick = _ref.onReportingLinesClick,
46
+ ariaLabel = _ref.ariaLabel,
47
+ ariaLabelledBy = _ref.ariaLabelledBy;
47
48
  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
48
49
  createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
49
- var _useIntl = (0, _reactIntlNext.useIntl)(),
50
- formatMessage = _useIntl.formatMessage;
51
50
  var _useState = (0, _react.useState)(false),
52
51
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
53
52
  isMounted = _useState2[0],
@@ -98,6 +97,11 @@ function ProfilecardTriggerNext(_ref) {
98
97
  _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
99
98
  kudosDrawerOpen = _useState24[0],
100
99
  setKudosDrawerOpen = _useState24[1];
100
+ var _useState25 = (0, _react.useState)(false),
101
+ _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
102
+ isTriggeredUsingKeyboard = _useState26[0],
103
+ setTriggeredUsingKeyboard = _useState26[1];
104
+ var triggerRef = (0, _react.useRef)(null);
101
105
  (0, _react.useEffect)(function () {
102
106
  setIsMounted(true);
103
107
  return function () {
@@ -127,10 +131,23 @@ function ProfilecardTriggerNext(_ref) {
127
131
  var hideProfilecard = (0, _react.useCallback)(function () {
128
132
  clearTimeout(showTimer);
129
133
  clearTimeout(hideTimer);
130
- setHideTimer(window.setTimeout(function () {
131
- setVisible(false);
132
- }, hideDelay));
133
- }, [hideDelay, hideTimer, showTimer]);
134
+ if (!isTriggeredUsingKeyboard) {
135
+ setHideTimer(window.setTimeout(function () {
136
+ setVisible(false);
137
+ }, hideDelay));
138
+ }
139
+ setTriggeredUsingKeyboard(false);
140
+ }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
141
+ var handleKeyboardClose = (0, _react.useCallback)(function (event) {
142
+ if (event.key !== 'Escape') {
143
+ return;
144
+ }
145
+ if (triggerRef.current) {
146
+ triggerRef.current.focus();
147
+ }
148
+ setTriggeredUsingKeyboard(false);
149
+ setVisible(false);
150
+ }, [setTriggeredUsingKeyboard, setVisible]);
134
151
  var handleClientSuccess = (0, _react.useCallback)(function (profileData, reportingLinesData, shouldShowGiveKudos) {
135
152
  if (!isMounted) {
136
153
  return;
@@ -213,6 +230,7 @@ function ProfilecardTriggerNext(_ref) {
213
230
  var onKeyPress = (0, _react.useCallback)(function (event) {
214
231
  if (event.key === 'Enter' || event.key === ' ') {
215
232
  event.preventDefault();
233
+ setTriggeredUsingKeyboard(true);
216
234
  showProfilecard();
217
235
  if (!visible) {
218
236
  fireAnalytics((0, _analytics.cardTriggered)('user', 'click'));
@@ -261,11 +279,15 @@ function ProfilecardTriggerNext(_ref) {
261
279
  isKudosEnabled: shouldShowGiveKudos,
262
280
  teamCentralBaseUrl: teamCentralBaseUrl,
263
281
  cloudId: cloudId,
264
- openKudosDrawer: openKudosDrawer
282
+ openKudosDrawer: openKudosDrawer,
283
+ isTriggeredUsingKeyboard: isTriggeredUsingKeyboard
265
284
  });
266
285
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_popup.default, {
267
286
  isOpen: !!visible,
268
- onClose: hideProfilecard,
287
+ onClose: function onClose(event) {
288
+ hideProfilecard();
289
+ handleKeyboardClose(event);
290
+ },
269
291
  placement: position,
270
292
  content: function content() {
271
293
  return showLoading ? /*#__PURE__*/_react.default.createElement(LoadingView, {
@@ -280,20 +302,21 @@ function ProfilecardTriggerNext(_ref) {
280
302
  }))));
281
303
  },
282
304
  trigger: function trigger(triggerProps) {
283
- var ref = triggerProps.ref,
305
+ var callbackRef = triggerProps.ref,
284
306
  innerProps = (0, _objectWithoutProperties2.default)(triggerProps, _excluded);
307
+ var ref = function ref(element) {
308
+ triggerRef.current = element;
309
+ if (typeof callbackRef === 'function') {
310
+ callbackRef(element);
311
+ }
312
+ };
285
313
  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, innerProps, containerListeners, {
286
314
  ref: ref,
287
315
  "data-testid": testId,
288
316
  role: "button",
289
317
  tabIndex: 0,
290
- "aria-label": formatMessage({
291
- id: 'profilecard.user.trigger.aria-label',
292
- defaultMessage: 'More information about {fullName}',
293
- description: 'Label for profile card trigger'
294
- }, {
295
- fullName: profilecardProps.fullName
296
- })
318
+ "aria-label": ariaLabel,
319
+ "aria-labelledby": ariaLabelledBy
297
320
  }), children);
298
321
  },
299
322
  zIndex: _constants.layers.modal(),
@@ -13,6 +13,7 @@ exports.default = void 0;
13
13
  */
14
14
  //
15
15
  var _default = exports.default = {
16
+ 'profilecard.user.trigger.aria-label': 'More information about {fullName}',
16
17
  'pt.profile-card.closed.account': 'Account deleted',
17
18
  'pt.profile-card.closed.account.has.date.a.few.months': 'Their account has been deleted for a few months.',
18
19
  'pt.profile-card.closed.account.has.date.last.month': 'Their account was deleted last month.',
@@ -13,6 +13,7 @@ exports.default = void 0;
13
13
  */
14
14
  //English (United Kingdom)
15
15
  var _default = exports.default = {
16
+ 'profilecard.user.trigger.aria-label': 'More information about {fullName}',
16
17
  'pt.profile-card.closed.account': 'Account deleted',
17
18
  'pt.profile-card.closed.account.has.date.a.few.months': 'Their account has been deleted for a few months.',
18
19
  'pt.profile-card.closed.account.has.date.last.month': 'Their account was deleted last month.',
@@ -13,6 +13,7 @@ exports.default = void 0;
13
13
  */
14
14
  //
15
15
  var _default = exports.default = {
16
+ 'profilecard.user.trigger.aria-label': '⁣⁢More information about {fullName}⁠‍⁡؜‍‌‌⁡‌؜⁡‌⁣⁤',
16
17
  'pt.profile-card.closed.account': '⁣⁢Account deleted⁠؜⁡‌؜⁠‍⁡⁠؜؜⁣⁤',
17
18
  'pt.profile-card.closed.account.has.date.a.few.months': '⁣⁢Their account has been deleted for a few months.⁠⁡⁠‍‌⁠⁡‍؜‌⁡‌‌؜⁣⁤',
18
19
  'pt.profile-card.closed.account.has.date.last.month': '⁣⁢Their account was deleted last month.⁡‍⁠‌⁡؜‍؜⁠‍⁠؜⁣⁤',
@@ -23,7 +23,8 @@ var profiles = [{
23
23
  meta: 'Manager',
24
24
  remoteTimeString: (0, _util.getTimeString)(),
25
25
  remoteWeekdayIndex: (0, _util.getWeekday)().index,
26
- remoteWeekdayString: (0, _util.getWeekday)().string
26
+ remoteWeekdayString: (0, _util.getWeekday)().string,
27
+ accountType: 'atlassian'
27
28
  }
28
29
  }, {
29
30
  User: {
@@ -35,7 +36,8 @@ var profiles = [{
35
36
  meta: 'Senior Developer',
36
37
  remoteTimeString: (0, _util.getTimeString)(),
37
38
  remoteWeekdayIndex: (0, _util.getWeekday)().index,
38
- remoteWeekdayString: (0, _util.getWeekday)().string
39
+ remoteWeekdayString: (0, _util.getWeekday)().string,
40
+ accountType: 'atlassian'
39
41
  }
40
42
  }, {
41
43
  User: {
@@ -48,7 +50,8 @@ var profiles = [{
48
50
  status: 'inactive',
49
51
  remoteTimeString: (0, _util.getTimeString)(),
50
52
  remoteWeekdayIndex: (0, _util.getWeekday)().index,
51
- remoteWeekdayString: (0, _util.getWeekday)().string
53
+ remoteWeekdayString: (0, _util.getWeekday)().string,
54
+ accountType: 'atlassian'
52
55
  }
53
56
  }, {
54
57
  User: {
@@ -56,7 +59,8 @@ var profiles = [{
56
59
  fullName: 'Cleveland Rodriquez',
57
60
  nickname: 'crodriquez',
58
61
  email: 'crodriquez@slofast.com',
59
- meta: 'Manager'
62
+ meta: 'Manager',
63
+ accountType: 'customer'
60
64
  }
61
65
  }, {
62
66
  User: {
@@ -68,7 +72,8 @@ var profiles = [{
68
72
  meta: 'Manager',
69
73
  remoteTimeString: (0, _util.getTimeString)(),
70
74
  remoteWeekdayIndex: (0, _util.getWeekday)().index,
71
- remoteWeekdayString: (0, _util.getWeekday)().string
75
+ remoteWeekdayString: (0, _util.getWeekday)().string,
76
+ accountType: 'atlassian'
72
77
  }
73
78
  }, {
74
79
  User: {
@@ -80,7 +85,8 @@ var profiles = [{
80
85
  meta: 'Designer',
81
86
  remoteTimeString: (0, _util.getTimeString)(),
82
87
  remoteWeekdayIndex: (0, _util.getWeekday)().index,
83
- remoteWeekdayString: (0, _util.getWeekday)().string
88
+ remoteWeekdayString: (0, _util.getWeekday)().string,
89
+ accountType: 'atlassian'
84
90
  }
85
91
  }, {
86
92
  User: {
@@ -92,7 +98,8 @@ var profiles = [{
92
98
  meta: 'Senior Developer',
93
99
  remoteTimeString: (0, _util.getTimeString)(),
94
100
  remoteWeekdayIndex: (0, _util.getWeekday)().index,
95
- remoteWeekdayString: (0, _util.getWeekday)().string
101
+ remoteWeekdayString: (0, _util.getWeekday)().string,
102
+ accountType: 'atlassian'
96
103
  }
97
104
  }, {
98
105
  User: {
@@ -104,7 +111,8 @@ var profiles = [{
104
111
  meta: 'Senior Developer',
105
112
  remoteTimeString: (0, _util.getTimeString)(),
106
113
  remoteWeekdayIndex: (0, _util.getWeekday)().index,
107
- remoteWeekdayString: (0, _util.getWeekday)().string
114
+ remoteWeekdayString: (0, _util.getWeekday)().string,
115
+ accountType: 'atlassian'
108
116
  }
109
117
  }, {
110
118
  User: {
@@ -116,7 +124,8 @@ var profiles = [{
116
124
  meta: 'Head of Something',
117
125
  remoteTimeString: (0, _util.getTimeString)(),
118
126
  remoteWeekdayIndex: (0, _util.getWeekday)().index,
119
- remoteWeekdayString: (0, _util.getWeekday)().string
127
+ remoteWeekdayString: (0, _util.getWeekday)().string,
128
+ accountType: 'atlassian'
120
129
  }
121
130
  }, {
122
131
  User: {
@@ -128,7 +137,8 @@ var profiles = [{
128
137
  meta: 'Senior Designer',
129
138
  remoteTimeString: (0, _util.getTimeString)(),
130
139
  remoteWeekdayIndex: (0, _util.getWeekday)().index,
131
- remoteWeekdayString: (0, _util.getWeekday)().string
140
+ remoteWeekdayString: (0, _util.getWeekday)().string,
141
+ accountType: 'atlassian'
132
142
  }
133
143
  }, {
134
144
  User: {
@@ -140,7 +150,8 @@ var profiles = [{
140
150
  meta: 'Senior Designer',
141
151
  remoteTimeString: (0, _util.getTimeString)(),
142
152
  remoteWeekdayIndex: (0, _util.getWeekday)().index,
143
- remoteWeekdayString: (0, _util.getWeekday)().string
153
+ remoteWeekdayString: (0, _util.getWeekday)().string,
154
+ accountType: 'atlassian'
144
155
  }
145
156
  }];
146
157
  var _default = exports.default = profiles;
@@ -44,7 +44,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
44
44
  actionSubjectId: actionSubjectId,
45
45
  attributes: _objectSpread(_objectSpread({
46
46
  packageName: "@atlaskit/profilecard",
47
- packageVersion: "19.8.0"
47
+ packageVersion: "19.10.0"
48
48
  }, attributes), {}, {
49
49
  firedAt: Math.round((0, _performance.getPageTime)())
50
50
  })
@@ -32,7 +32,8 @@ export const modifyResponse = response => {
32
32
  meta: data.meta || undefined,
33
33
  nickname: data.nickname || undefined,
34
34
  companyName: data.companyName || undefined,
35
- timestring: data.remoteTimeString || undefined
35
+ timestring: data.remoteTimeString || undefined,
36
+ accountType: data.accountType || undefined
36
37
  };
37
38
  };
38
39
 
@@ -67,7 +67,7 @@ export const addHeaders = headers => {
67
67
  headers.append('X-ExperimentalApi', 'teams-beta');
68
68
  headers.append('X-ExperimentalApi', 'team-members-beta');
69
69
  headers.append('atl-client-name', "@atlaskit/profilecard");
70
- headers.append('atl-client-version', "19.8.0");
70
+ headers.append('atl-client-version', "19.10.0");
71
71
  return headers;
72
72
  };
73
73
  export async function getTeamFromAGG(url, teamId, siteId) {
@@ -1,5 +1,5 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import React, { useCallback, useEffect, useMemo, useState } from 'react';
2
+ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
3
  import { FormattedMessage } from 'react-intl-next';
4
4
  import { withAnalyticsEvents } from '@atlaskit/analytics-next';
5
5
  import Avatar from '@atlaskit/avatar';
@@ -118,12 +118,14 @@ export const ProfilecardInternal = props => {
118
118
  fireAnalyticsWithDuration: fireAnalyticsWithDuration
119
119
  })), realActions && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), /*#__PURE__*/React.createElement(Actions, {
120
120
  actions: realActions,
121
- fireAnalyticsWithDuration: fireAnalyticsWithDuration
121
+ fireAnalyticsWithDuration: fireAnalyticsWithDuration,
122
+ isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard
122
123
  })))));
123
124
  };
124
125
  const Actions = ({
125
126
  actions,
126
- fireAnalyticsWithDuration
127
+ fireAnalyticsWithDuration,
128
+ isTriggeredUsingKeyboard
127
129
  }) => {
128
130
  const onActionClick = useCallback((action, args, event, index) => {
129
131
  fireAnalyticsWithDuration(duration => actionClicked('user', {
@@ -138,6 +140,12 @@ const Actions = ({
138
140
  action.callback(event, ...args);
139
141
  }
140
142
  }, [fireAnalyticsWithDuration]);
143
+ const buttonRef = useRef(null);
144
+ useEffect(() => {
145
+ if (actions.length > 0 && buttonRef.current && isTriggeredUsingKeyboard) {
146
+ buttonRef.current.focus();
147
+ }
148
+ }, [isTriggeredUsingKeyboard, actions.length]);
141
149
  if (!actions || actions.length === 0) {
142
150
  return null;
143
151
  }
@@ -154,7 +162,8 @@ const Actions = ({
154
162
  appearance: "default",
155
163
  key: action.id || index,
156
164
  onClick: (event, ...args) => onActionClick(action, args, event, index),
157
- href: action.link
165
+ href: action.link,
166
+ ref: index === 0 ? buttonRef : undefined
158
167
  }, action.label, isKudos && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null))));
159
168
  if (isKudos) {
160
169
  return /*#__PURE__*/React.createElement(AnimatedKudosButton, {
@@ -1,6 +1,5 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import React, { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
3
- import { useIntl } from 'react-intl-next';
2
+ import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
4
3
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
5
4
  import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
6
5
  import Popup from '@atlaskit/popup';
@@ -21,14 +20,13 @@ export default function ProfilecardTriggerNext({
21
20
  children,
22
21
  testId,
23
22
  addFlag,
24
- onReportingLinesClick
23
+ onReportingLinesClick,
24
+ ariaLabel,
25
+ ariaLabelledBy
25
26
  }) {
26
27
  const {
27
28
  createAnalyticsEvent
28
29
  } = useAnalyticsEvents();
29
- const {
30
- formatMessage
31
- } = useIntl();
32
30
  const [isMounted, setIsMounted] = useState(false);
33
31
  const showDelay = trigger === 'click' ? 0 : DELAY_MS_SHOW;
34
32
  const hideDelay = trigger === 'click' ? 0 : DELAY_MS_HIDE;
@@ -43,6 +41,8 @@ export default function ProfilecardTriggerNext({
43
41
  const [shouldShowGiveKudos, setShouldShowGiveKudos] = useState(false);
44
42
  const [teamCentralBaseUrl, setTeamCentralBaseUrl] = useState(undefined);
45
43
  const [kudosDrawerOpen, setKudosDrawerOpen] = useState(false);
44
+ const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
45
+ const triggerRef = useRef(null);
46
46
  useEffect(() => {
47
47
  setIsMounted(true);
48
48
  return () => {
@@ -72,10 +72,23 @@ export default function ProfilecardTriggerNext({
72
72
  const hideProfilecard = useCallback(() => {
73
73
  clearTimeout(showTimer);
74
74
  clearTimeout(hideTimer);
75
- setHideTimer(window.setTimeout(() => {
76
- setVisible(false);
77
- }, hideDelay));
78
- }, [hideDelay, hideTimer, showTimer]);
75
+ if (!isTriggeredUsingKeyboard) {
76
+ setHideTimer(window.setTimeout(() => {
77
+ setVisible(false);
78
+ }, hideDelay));
79
+ }
80
+ setTriggeredUsingKeyboard(false);
81
+ }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
82
+ const handleKeyboardClose = useCallback(event => {
83
+ if (event.key !== 'Escape') {
84
+ return;
85
+ }
86
+ if (triggerRef.current) {
87
+ triggerRef.current.focus();
88
+ }
89
+ setTriggeredUsingKeyboard(false);
90
+ setVisible(false);
91
+ }, [setTriggeredUsingKeyboard, setVisible]);
79
92
  const handleClientSuccess = useCallback((profileData, reportingLinesData, shouldShowGiveKudos) => {
80
93
  if (!isMounted) {
81
94
  return;
@@ -141,6 +154,7 @@ export default function ProfilecardTriggerNext({
141
154
  const onKeyPress = useCallback(event => {
142
155
  if (event.key === 'Enter' || event.key === ' ') {
143
156
  event.preventDefault();
157
+ setTriggeredUsingKeyboard(true);
144
158
  showProfilecard();
145
159
  if (!visible) {
146
160
  fireAnalytics(cardTriggered('user', 'click'));
@@ -185,11 +199,15 @@ export default function ProfilecardTriggerNext({
185
199
  isKudosEnabled: shouldShowGiveKudos,
186
200
  teamCentralBaseUrl: teamCentralBaseUrl,
187
201
  cloudId: cloudId,
188
- openKudosDrawer: openKudosDrawer
202
+ openKudosDrawer: openKudosDrawer,
203
+ isTriggeredUsingKeyboard: isTriggeredUsingKeyboard
189
204
  };
190
205
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popup, {
191
206
  isOpen: !!visible,
192
- onClose: hideProfilecard,
207
+ onClose: event => {
208
+ hideProfilecard();
209
+ handleKeyboardClose(event);
210
+ },
193
211
  placement: position,
194
212
  content: () => showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
195
213
  fireAnalytics: fireAnalytics
@@ -203,21 +221,22 @@ export default function ProfilecardTriggerNext({
203
221
  })))),
204
222
  trigger: triggerProps => {
205
223
  const {
206
- ref,
224
+ ref: callbackRef,
207
225
  ...innerProps
208
226
  } = triggerProps;
227
+ const ref = element => {
228
+ triggerRef.current = element;
229
+ if (typeof callbackRef === 'function') {
230
+ callbackRef(element);
231
+ }
232
+ };
209
233
  return /*#__PURE__*/React.createElement("span", _extends({}, innerProps, containerListeners, {
210
234
  ref: ref,
211
235
  "data-testid": testId,
212
236
  role: "button",
213
237
  tabIndex: 0,
214
- "aria-label": formatMessage({
215
- id: 'profilecard.user.trigger.aria-label',
216
- defaultMessage: 'More information about {fullName}',
217
- description: 'Label for profile card trigger'
218
- }, {
219
- fullName: profilecardProps.fullName
220
- })
238
+ "aria-label": ariaLabel,
239
+ "aria-labelledby": ariaLabelledBy
221
240
  }), children);
222
241
  },
223
242
  zIndex: layers.modal(),
@@ -7,6 +7,7 @@
7
7
  */
8
8
  //
9
9
  export default {
10
+ 'profilecard.user.trigger.aria-label': 'More information about {fullName}',
10
11
  'pt.profile-card.closed.account': 'Account deleted',
11
12
  'pt.profile-card.closed.account.has.date.a.few.months': 'Their account has been deleted for a few months.',
12
13
  'pt.profile-card.closed.account.has.date.last.month': 'Their account was deleted last month.',
@@ -7,6 +7,7 @@
7
7
  */
8
8
  //English (United Kingdom)
9
9
  export default {
10
+ 'profilecard.user.trigger.aria-label': 'More information about {fullName}',
10
11
  'pt.profile-card.closed.account': 'Account deleted',
11
12
  'pt.profile-card.closed.account.has.date.a.few.months': 'Their account has been deleted for a few months.',
12
13
  'pt.profile-card.closed.account.has.date.last.month': 'Their account was deleted last month.',
@@ -7,6 +7,7 @@
7
7
  */
8
8
  //
9
9
  export default {
10
+ 'profilecard.user.trigger.aria-label': '⁣⁢More information about {fullName}⁠‍⁡؜‍‌‌⁡‌؜⁡‌⁣⁤',
10
11
  'pt.profile-card.closed.account': '⁣⁢Account deleted⁠؜⁡‌؜⁠‍⁡⁠؜؜⁣⁤',
11
12
  'pt.profile-card.closed.account.has.date.a.few.months': '⁣⁢Their account has been deleted for a few months.⁠⁡⁠‍‌⁠⁡‍؜‌⁡‌‌؜⁣⁤',
12
13
  'pt.profile-card.closed.account.has.date.last.month': '⁣⁢Their account was deleted last month.⁡‍⁠‌⁡؜‍؜⁠‍⁠؜⁣⁤',
@@ -14,7 +14,8 @@ const profiles = [{
14
14
  meta: 'Manager',
15
15
  remoteTimeString: getTimeString(),
16
16
  remoteWeekdayIndex: getWeekday().index,
17
- remoteWeekdayString: getWeekday().string
17
+ remoteWeekdayString: getWeekday().string,
18
+ accountType: 'atlassian'
18
19
  }
19
20
  }, {
20
21
  User: {
@@ -26,7 +27,8 @@ const profiles = [{
26
27
  meta: 'Senior Developer',
27
28
  remoteTimeString: getTimeString(),
28
29
  remoteWeekdayIndex: getWeekday().index,
29
- remoteWeekdayString: getWeekday().string
30
+ remoteWeekdayString: getWeekday().string,
31
+ accountType: 'atlassian'
30
32
  }
31
33
  }, {
32
34
  User: {
@@ -39,7 +41,8 @@ const profiles = [{
39
41
  status: 'inactive',
40
42
  remoteTimeString: getTimeString(),
41
43
  remoteWeekdayIndex: getWeekday().index,
42
- remoteWeekdayString: getWeekday().string
44
+ remoteWeekdayString: getWeekday().string,
45
+ accountType: 'atlassian'
43
46
  }
44
47
  }, {
45
48
  User: {
@@ -47,7 +50,8 @@ const profiles = [{
47
50
  fullName: 'Cleveland Rodriquez',
48
51
  nickname: 'crodriquez',
49
52
  email: 'crodriquez@slofast.com',
50
- meta: 'Manager'
53
+ meta: 'Manager',
54
+ accountType: 'customer'
51
55
  }
52
56
  }, {
53
57
  User: {
@@ -59,7 +63,8 @@ const profiles = [{
59
63
  meta: 'Manager',
60
64
  remoteTimeString: getTimeString(),
61
65
  remoteWeekdayIndex: getWeekday().index,
62
- remoteWeekdayString: getWeekday().string
66
+ remoteWeekdayString: getWeekday().string,
67
+ accountType: 'atlassian'
63
68
  }
64
69
  }, {
65
70
  User: {
@@ -71,7 +76,8 @@ const profiles = [{
71
76
  meta: 'Designer',
72
77
  remoteTimeString: getTimeString(),
73
78
  remoteWeekdayIndex: getWeekday().index,
74
- remoteWeekdayString: getWeekday().string
79
+ remoteWeekdayString: getWeekday().string,
80
+ accountType: 'atlassian'
75
81
  }
76
82
  }, {
77
83
  User: {
@@ -83,7 +89,8 @@ const profiles = [{
83
89
  meta: 'Senior Developer',
84
90
  remoteTimeString: getTimeString(),
85
91
  remoteWeekdayIndex: getWeekday().index,
86
- remoteWeekdayString: getWeekday().string
92
+ remoteWeekdayString: getWeekday().string,
93
+ accountType: 'atlassian'
87
94
  }
88
95
  }, {
89
96
  User: {
@@ -95,7 +102,8 @@ const profiles = [{
95
102
  meta: 'Senior Developer',
96
103
  remoteTimeString: getTimeString(),
97
104
  remoteWeekdayIndex: getWeekday().index,
98
- remoteWeekdayString: getWeekday().string
105
+ remoteWeekdayString: getWeekday().string,
106
+ accountType: 'atlassian'
99
107
  }
100
108
  }, {
101
109
  User: {
@@ -107,7 +115,8 @@ const profiles = [{
107
115
  meta: 'Head of Something',
108
116
  remoteTimeString: getTimeString(),
109
117
  remoteWeekdayIndex: getWeekday().index,
110
- remoteWeekdayString: getWeekday().string
118
+ remoteWeekdayString: getWeekday().string,
119
+ accountType: 'atlassian'
111
120
  }
112
121
  }, {
113
122
  User: {
@@ -119,7 +128,8 @@ const profiles = [{
119
128
  meta: 'Senior Designer',
120
129
  remoteTimeString: getTimeString(),
121
130
  remoteWeekdayIndex: getWeekday().index,
122
- remoteWeekdayString: getWeekday().string
131
+ remoteWeekdayString: getWeekday().string,
132
+ accountType: 'atlassian'
123
133
  }
124
134
  }, {
125
135
  User: {
@@ -131,7 +141,8 @@ const profiles = [{
131
141
  meta: 'Senior Designer',
132
142
  remoteTimeString: getTimeString(),
133
143
  remoteWeekdayIndex: getWeekday().index,
134
- remoteWeekdayString: getWeekday().string
144
+ remoteWeekdayString: getWeekday().string,
145
+ accountType: 'atlassian'
135
146
  }
136
147
  }];
137
148
  export default profiles;
@@ -31,7 +31,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
31
31
  actionSubjectId,
32
32
  attributes: {
33
33
  packageName: "@atlaskit/profilecard",
34
- packageVersion: "19.8.0",
34
+ packageVersion: "19.10.0",
35
35
  ...attributes,
36
36
  firedAt: Math.round(getPageTime())
37
37
  }
@@ -42,7 +42,8 @@ export var modifyResponse = function modifyResponse(response) {
42
42
  meta: data.meta || undefined,
43
43
  nickname: data.nickname || undefined,
44
44
  companyName: data.companyName || undefined,
45
- timestring: data.remoteTimeString || undefined
45
+ timestring: data.remoteTimeString || undefined,
46
+ accountType: data.accountType || undefined
46
47
  };
47
48
  };
48
49
 
@@ -48,7 +48,7 @@ export var addHeaders = function addHeaders(headers) {
48
48
  headers.append('X-ExperimentalApi', 'teams-beta');
49
49
  headers.append('X-ExperimentalApi', 'team-members-beta');
50
50
  headers.append('atl-client-name', "@atlaskit/profilecard");
51
- headers.append('atl-client-version', "19.8.0");
51
+ headers.append('atl-client-version', "19.10.0");
52
52
  return headers;
53
53
  };
54
54
  export function getTeamFromAGG(_x, _x2, _x3) {
@@ -1,7 +1,7 @@
1
1
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
- import React, { useCallback, useEffect, useMemo, useState } from 'react';
4
+ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
5
5
  import { FormattedMessage } from 'react-intl-next';
6
6
  import { withAnalyticsEvents } from '@atlaskit/analytics-next';
7
7
  import Avatar from '@atlaskit/avatar';
@@ -121,12 +121,14 @@ export var ProfilecardInternal = function ProfilecardInternal(props) {
121
121
  fireAnalyticsWithDuration: fireAnalyticsWithDuration
122
122
  })), realActions && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionsFlexSpacer, null), /*#__PURE__*/React.createElement(Actions, {
123
123
  actions: realActions,
124
- fireAnalyticsWithDuration: fireAnalyticsWithDuration
124
+ fireAnalyticsWithDuration: fireAnalyticsWithDuration,
125
+ isTriggeredUsingKeyboard: props.isTriggeredUsingKeyboard
125
126
  })))));
126
127
  };
127
128
  var Actions = function Actions(_ref) {
128
129
  var actions = _ref.actions,
129
- fireAnalyticsWithDuration = _ref.fireAnalyticsWithDuration;
130
+ fireAnalyticsWithDuration = _ref.fireAnalyticsWithDuration,
131
+ isTriggeredUsingKeyboard = _ref.isTriggeredUsingKeyboard;
130
132
  var onActionClick = useCallback(function (action, args, event, index) {
131
133
  fireAnalyticsWithDuration(function (duration) {
132
134
  return actionClicked('user', {
@@ -142,6 +144,12 @@ var Actions = function Actions(_ref) {
142
144
  action.callback.apply(action, [event].concat(_toConsumableArray(args)));
143
145
  }
144
146
  }, [fireAnalyticsWithDuration]);
147
+ var buttonRef = useRef(null);
148
+ useEffect(function () {
149
+ if (actions.length > 0 && buttonRef.current && isTriggeredUsingKeyboard) {
150
+ buttonRef.current.focus();
151
+ }
152
+ }, [isTriggeredUsingKeyboard, actions.length]);
145
153
  if (!actions || actions.length === 0) {
146
154
  return null;
147
155
  }
@@ -163,7 +171,8 @@ var Actions = function Actions(_ref) {
163
171
  }
164
172
  return onActionClick(action, args, event, index);
165
173
  },
166
- href: action.link
174
+ href: action.link,
175
+ ref: index === 0 ? buttonRef : undefined
167
176
  }, action.label, isKudos && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null))));
168
177
  if (isKudos) {
169
178
  return /*#__PURE__*/React.createElement(AnimatedKudosButton, {
@@ -8,8 +8,7 @@ var _excluded = ["ref"];
8
8
  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; }
9
9
  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; }
10
10
  import _regeneratorRuntime from "@babel/runtime/regenerator";
11
- import React, { Suspense, useCallback, useEffect, useMemo, useState } from 'react';
12
- import { useIntl } from 'react-intl-next';
11
+ import React, { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
13
12
  import { useAnalyticsEvents } from '@atlaskit/analytics-next';
14
13
  import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
15
14
  import Popup from '@atlaskit/popup';
@@ -33,11 +32,11 @@ export default function ProfilecardTriggerNext(_ref) {
33
32
  children = _ref.children,
34
33
  testId = _ref.testId,
35
34
  addFlag = _ref.addFlag,
36
- onReportingLinesClick = _ref.onReportingLinesClick;
35
+ onReportingLinesClick = _ref.onReportingLinesClick,
36
+ ariaLabel = _ref.ariaLabel,
37
+ ariaLabelledBy = _ref.ariaLabelledBy;
37
38
  var _useAnalyticsEvents = useAnalyticsEvents(),
38
39
  createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
39
- var _useIntl = useIntl(),
40
- formatMessage = _useIntl.formatMessage;
41
40
  var _useState = useState(false),
42
41
  _useState2 = _slicedToArray(_useState, 2),
43
42
  isMounted = _useState2[0],
@@ -88,6 +87,11 @@ export default function ProfilecardTriggerNext(_ref) {
88
87
  _useState24 = _slicedToArray(_useState23, 2),
89
88
  kudosDrawerOpen = _useState24[0],
90
89
  setKudosDrawerOpen = _useState24[1];
90
+ var _useState25 = useState(false),
91
+ _useState26 = _slicedToArray(_useState25, 2),
92
+ isTriggeredUsingKeyboard = _useState26[0],
93
+ setTriggeredUsingKeyboard = _useState26[1];
94
+ var triggerRef = useRef(null);
91
95
  useEffect(function () {
92
96
  setIsMounted(true);
93
97
  return function () {
@@ -117,10 +121,23 @@ export default function ProfilecardTriggerNext(_ref) {
117
121
  var hideProfilecard = useCallback(function () {
118
122
  clearTimeout(showTimer);
119
123
  clearTimeout(hideTimer);
120
- setHideTimer(window.setTimeout(function () {
121
- setVisible(false);
122
- }, hideDelay));
123
- }, [hideDelay, hideTimer, showTimer]);
124
+ if (!isTriggeredUsingKeyboard) {
125
+ setHideTimer(window.setTimeout(function () {
126
+ setVisible(false);
127
+ }, hideDelay));
128
+ }
129
+ setTriggeredUsingKeyboard(false);
130
+ }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
131
+ var handleKeyboardClose = useCallback(function (event) {
132
+ if (event.key !== 'Escape') {
133
+ return;
134
+ }
135
+ if (triggerRef.current) {
136
+ triggerRef.current.focus();
137
+ }
138
+ setTriggeredUsingKeyboard(false);
139
+ setVisible(false);
140
+ }, [setTriggeredUsingKeyboard, setVisible]);
124
141
  var handleClientSuccess = useCallback(function (profileData, reportingLinesData, shouldShowGiveKudos) {
125
142
  if (!isMounted) {
126
143
  return;
@@ -203,6 +220,7 @@ export default function ProfilecardTriggerNext(_ref) {
203
220
  var onKeyPress = useCallback(function (event) {
204
221
  if (event.key === 'Enter' || event.key === ' ') {
205
222
  event.preventDefault();
223
+ setTriggeredUsingKeyboard(true);
206
224
  showProfilecard();
207
225
  if (!visible) {
208
226
  fireAnalytics(cardTriggered('user', 'click'));
@@ -251,11 +269,15 @@ export default function ProfilecardTriggerNext(_ref) {
251
269
  isKudosEnabled: shouldShowGiveKudos,
252
270
  teamCentralBaseUrl: teamCentralBaseUrl,
253
271
  cloudId: cloudId,
254
- openKudosDrawer: openKudosDrawer
272
+ openKudosDrawer: openKudosDrawer,
273
+ isTriggeredUsingKeyboard: isTriggeredUsingKeyboard
255
274
  });
256
275
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Popup, {
257
276
  isOpen: !!visible,
258
- onClose: hideProfilecard,
277
+ onClose: function onClose(event) {
278
+ hideProfilecard();
279
+ handleKeyboardClose(event);
280
+ },
259
281
  placement: position,
260
282
  content: function content() {
261
283
  return showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
@@ -270,20 +292,21 @@ export default function ProfilecardTriggerNext(_ref) {
270
292
  }))));
271
293
  },
272
294
  trigger: function trigger(triggerProps) {
273
- var ref = triggerProps.ref,
295
+ var callbackRef = triggerProps.ref,
274
296
  innerProps = _objectWithoutProperties(triggerProps, _excluded);
297
+ var ref = function ref(element) {
298
+ triggerRef.current = element;
299
+ if (typeof callbackRef === 'function') {
300
+ callbackRef(element);
301
+ }
302
+ };
275
303
  return /*#__PURE__*/React.createElement("span", _extends({}, innerProps, containerListeners, {
276
304
  ref: ref,
277
305
  "data-testid": testId,
278
306
  role: "button",
279
307
  tabIndex: 0,
280
- "aria-label": formatMessage({
281
- id: 'profilecard.user.trigger.aria-label',
282
- defaultMessage: 'More information about {fullName}',
283
- description: 'Label for profile card trigger'
284
- }, {
285
- fullName: profilecardProps.fullName
286
- })
308
+ "aria-label": ariaLabel,
309
+ "aria-labelledby": ariaLabelledBy
287
310
  }), children);
288
311
  },
289
312
  zIndex: layers.modal(),
@@ -7,6 +7,7 @@
7
7
  */
8
8
  //
9
9
  export default {
10
+ 'profilecard.user.trigger.aria-label': 'More information about {fullName}',
10
11
  'pt.profile-card.closed.account': 'Account deleted',
11
12
  'pt.profile-card.closed.account.has.date.a.few.months': 'Their account has been deleted for a few months.',
12
13
  'pt.profile-card.closed.account.has.date.last.month': 'Their account was deleted last month.',
@@ -7,6 +7,7 @@
7
7
  */
8
8
  //English (United Kingdom)
9
9
  export default {
10
+ 'profilecard.user.trigger.aria-label': 'More information about {fullName}',
10
11
  'pt.profile-card.closed.account': 'Account deleted',
11
12
  'pt.profile-card.closed.account.has.date.a.few.months': 'Their account has been deleted for a few months.',
12
13
  'pt.profile-card.closed.account.has.date.last.month': 'Their account was deleted last month.',
@@ -7,6 +7,7 @@
7
7
  */
8
8
  //
9
9
  export default {
10
+ 'profilecard.user.trigger.aria-label': '⁣⁢More information about {fullName}⁠‍⁡؜‍‌‌⁡‌؜⁡‌⁣⁤',
10
11
  'pt.profile-card.closed.account': '⁣⁢Account deleted⁠؜⁡‌؜⁠‍⁡⁠؜؜⁣⁤',
11
12
  'pt.profile-card.closed.account.has.date.a.few.months': '⁣⁢Their account has been deleted for a few months.⁠⁡⁠‍‌⁠⁡‍؜‌⁡‌‌؜⁣⁤',
12
13
  'pt.profile-card.closed.account.has.date.last.month': '⁣⁢Their account was deleted last month.⁡‍⁠‌⁡؜‍؜⁠‍⁠؜⁣⁤',
@@ -16,7 +16,8 @@ var profiles = [{
16
16
  meta: 'Manager',
17
17
  remoteTimeString: getTimeString(),
18
18
  remoteWeekdayIndex: getWeekday().index,
19
- remoteWeekdayString: getWeekday().string
19
+ remoteWeekdayString: getWeekday().string,
20
+ accountType: 'atlassian'
20
21
  }
21
22
  }, {
22
23
  User: {
@@ -28,7 +29,8 @@ var profiles = [{
28
29
  meta: 'Senior Developer',
29
30
  remoteTimeString: getTimeString(),
30
31
  remoteWeekdayIndex: getWeekday().index,
31
- remoteWeekdayString: getWeekday().string
32
+ remoteWeekdayString: getWeekday().string,
33
+ accountType: 'atlassian'
32
34
  }
33
35
  }, {
34
36
  User: {
@@ -41,7 +43,8 @@ var profiles = [{
41
43
  status: 'inactive',
42
44
  remoteTimeString: getTimeString(),
43
45
  remoteWeekdayIndex: getWeekday().index,
44
- remoteWeekdayString: getWeekday().string
46
+ remoteWeekdayString: getWeekday().string,
47
+ accountType: 'atlassian'
45
48
  }
46
49
  }, {
47
50
  User: {
@@ -49,7 +52,8 @@ var profiles = [{
49
52
  fullName: 'Cleveland Rodriquez',
50
53
  nickname: 'crodriquez',
51
54
  email: 'crodriquez@slofast.com',
52
- meta: 'Manager'
55
+ meta: 'Manager',
56
+ accountType: 'customer'
53
57
  }
54
58
  }, {
55
59
  User: {
@@ -61,7 +65,8 @@ var profiles = [{
61
65
  meta: 'Manager',
62
66
  remoteTimeString: getTimeString(),
63
67
  remoteWeekdayIndex: getWeekday().index,
64
- remoteWeekdayString: getWeekday().string
68
+ remoteWeekdayString: getWeekday().string,
69
+ accountType: 'atlassian'
65
70
  }
66
71
  }, {
67
72
  User: {
@@ -73,7 +78,8 @@ var profiles = [{
73
78
  meta: 'Designer',
74
79
  remoteTimeString: getTimeString(),
75
80
  remoteWeekdayIndex: getWeekday().index,
76
- remoteWeekdayString: getWeekday().string
81
+ remoteWeekdayString: getWeekday().string,
82
+ accountType: 'atlassian'
77
83
  }
78
84
  }, {
79
85
  User: {
@@ -85,7 +91,8 @@ var profiles = [{
85
91
  meta: 'Senior Developer',
86
92
  remoteTimeString: getTimeString(),
87
93
  remoteWeekdayIndex: getWeekday().index,
88
- remoteWeekdayString: getWeekday().string
94
+ remoteWeekdayString: getWeekday().string,
95
+ accountType: 'atlassian'
89
96
  }
90
97
  }, {
91
98
  User: {
@@ -97,7 +104,8 @@ var profiles = [{
97
104
  meta: 'Senior Developer',
98
105
  remoteTimeString: getTimeString(),
99
106
  remoteWeekdayIndex: getWeekday().index,
100
- remoteWeekdayString: getWeekday().string
107
+ remoteWeekdayString: getWeekday().string,
108
+ accountType: 'atlassian'
101
109
  }
102
110
  }, {
103
111
  User: {
@@ -109,7 +117,8 @@ var profiles = [{
109
117
  meta: 'Head of Something',
110
118
  remoteTimeString: getTimeString(),
111
119
  remoteWeekdayIndex: getWeekday().index,
112
- remoteWeekdayString: getWeekday().string
120
+ remoteWeekdayString: getWeekday().string,
121
+ accountType: 'atlassian'
113
122
  }
114
123
  }, {
115
124
  User: {
@@ -121,7 +130,8 @@ var profiles = [{
121
130
  meta: 'Senior Designer',
122
131
  remoteTimeString: getTimeString(),
123
132
  remoteWeekdayIndex: getWeekday().index,
124
- remoteWeekdayString: getWeekday().string
133
+ remoteWeekdayString: getWeekday().string,
134
+ accountType: 'atlassian'
125
135
  }
126
136
  }, {
127
137
  User: {
@@ -133,7 +143,8 @@ var profiles = [{
133
143
  meta: 'Senior Designer',
134
144
  remoteTimeString: getTimeString(),
135
145
  remoteWeekdayIndex: getWeekday().index,
136
- remoteWeekdayString: getWeekday().string
146
+ remoteWeekdayString: getWeekday().string,
147
+ accountType: 'atlassian'
137
148
  }
138
149
  }];
139
150
  export default profiles;
@@ -38,7 +38,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
38
38
  actionSubjectId: actionSubjectId,
39
39
  attributes: _objectSpread(_objectSpread({
40
40
  packageName: "@atlaskit/profilecard",
41
- packageVersion: "19.8.0"
41
+ packageVersion: "19.10.0"
42
42
  }, attributes), {}, {
43
43
  firedAt: Math.round(getPageTime())
44
44
  })
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import { ProfileCardTriggerProps } from '../../types';
3
- export default function ProfilecardTriggerNext({ trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, }: ProfileCardTriggerProps): JSX.Element;
3
+ export default function ProfilecardTriggerNext({ trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, }: ProfileCardTriggerProps): JSX.Element;
@@ -5,6 +5,7 @@
5
5
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
6
6
  */
7
7
  declare const _default: {
8
+ 'profilecard.user.trigger.aria-label': string;
8
9
  'pt.profile-card.closed.account': string;
9
10
  'pt.profile-card.closed.account.has.date.a.few.months': string;
10
11
  'pt.profile-card.closed.account.has.date.last.month': string;
@@ -5,6 +5,7 @@
5
5
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
6
6
  */
7
7
  declare const _default: {
8
+ 'profilecard.user.trigger.aria-label': string;
8
9
  'pt.profile-card.closed.account': string;
9
10
  'pt.profile-card.closed.account.has.date.a.few.months': string;
10
11
  'pt.profile-card.closed.account.has.date.last.month': string;
@@ -5,6 +5,7 @@
5
5
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
6
6
  */
7
7
  declare const _default: {
8
+ 'profilecard.user.trigger.aria-label': string;
8
9
  'pt.profile-card.closed.account': string;
9
10
  'pt.profile-card.closed.account.has.date.a.few.months': string;
10
11
  'pt.profile-card.closed.account.has.date.last.month': string;
@@ -9,6 +9,7 @@ declare const profiles: ({
9
9
  remoteTimeString: string;
10
10
  remoteWeekdayIndex: number;
11
11
  remoteWeekdayString: string;
12
+ accountType: string;
12
13
  status?: undefined;
13
14
  };
14
15
  } | {
@@ -23,6 +24,7 @@ declare const profiles: ({
23
24
  remoteTimeString: string;
24
25
  remoteWeekdayIndex: number;
25
26
  remoteWeekdayString: string;
27
+ accountType: string;
26
28
  };
27
29
  } | {
28
30
  User: {
@@ -31,6 +33,7 @@ declare const profiles: ({
31
33
  nickname: string;
32
34
  email: string;
33
35
  meta: string;
36
+ accountType: string;
34
37
  location?: undefined;
35
38
  remoteTimeString?: undefined;
36
39
  remoteWeekdayIndex?: undefined;
@@ -7,6 +7,7 @@ import UserProfileCardClient from './client/UserProfileCardClient';
7
7
  export interface ApiClientResponse {
8
8
  User: {
9
9
  id: string;
10
+ accountType: string;
10
11
  isBot: boolean;
11
12
  isCurrentUser: boolean;
12
13
  avatarUrl: string | null;
@@ -52,6 +53,7 @@ export interface ProfileCardClientData {
52
53
  status: StatusType;
53
54
  statusModifiedDate?: number | null;
54
55
  customLozenges?: LozengeProps[];
56
+ accountType?: string;
55
57
  }
56
58
  export interface ReportingLinesUserPII {
57
59
  name: string;
@@ -111,6 +113,8 @@ export interface ProfileCardTriggerProps {
111
113
  children: React.ReactNode;
112
114
  testId?: string;
113
115
  addFlag?: (flag: any) => void;
116
+ ariaLabel?: string;
117
+ ariaLabelledBy?: string;
114
118
  }
115
119
  export interface ProfileCardTriggerState {
116
120
  visible?: boolean;
@@ -265,6 +269,7 @@ export interface ProfilecardProps {
265
269
  isLoading?: boolean;
266
270
  hasError?: boolean;
267
271
  errorType?: ProfileCardErrorType;
272
+ accountType?: string;
268
273
  status?: StatusType;
269
274
  isBot?: boolean;
270
275
  avatarUrl?: string;
@@ -295,6 +300,7 @@ export interface ProfilecardProps {
295
300
  hasDisabledAccountLozenge?: boolean;
296
301
  customLozenges?: LozengeProps[];
297
302
  openKudosDrawer?: () => void;
303
+ isTriggeredUsingKeyboard?: boolean;
298
304
  }
299
305
  export type AnalyticsFromDuration = (duration: number) => AnalyticsEventPayload;
300
306
  export type AnalyticsFunction = (generator: AnalyticsFromDuration) => void;
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import { ProfileCardTriggerProps } from '../../types';
3
- export default function ProfilecardTriggerNext({ trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, }: ProfileCardTriggerProps): JSX.Element;
3
+ export default function ProfilecardTriggerNext({ trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, }: ProfileCardTriggerProps): JSX.Element;
@@ -5,6 +5,7 @@
5
5
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
6
6
  */
7
7
  declare const _default: {
8
+ 'profilecard.user.trigger.aria-label': string;
8
9
  'pt.profile-card.closed.account': string;
9
10
  'pt.profile-card.closed.account.has.date.a.few.months': string;
10
11
  'pt.profile-card.closed.account.has.date.last.month': string;
@@ -5,6 +5,7 @@
5
5
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
6
6
  */
7
7
  declare const _default: {
8
+ 'profilecard.user.trigger.aria-label': string;
8
9
  'pt.profile-card.closed.account': string;
9
10
  'pt.profile-card.closed.account.has.date.a.few.months': string;
10
11
  'pt.profile-card.closed.account.has.date.last.month': string;
@@ -5,6 +5,7 @@
5
5
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
6
6
  */
7
7
  declare const _default: {
8
+ 'profilecard.user.trigger.aria-label': string;
8
9
  'pt.profile-card.closed.account': string;
9
10
  'pt.profile-card.closed.account.has.date.a.few.months': string;
10
11
  'pt.profile-card.closed.account.has.date.last.month': string;
@@ -9,6 +9,7 @@ declare const profiles: ({
9
9
  remoteTimeString: string;
10
10
  remoteWeekdayIndex: number;
11
11
  remoteWeekdayString: string;
12
+ accountType: string;
12
13
  status?: undefined;
13
14
  };
14
15
  } | {
@@ -23,6 +24,7 @@ declare const profiles: ({
23
24
  remoteTimeString: string;
24
25
  remoteWeekdayIndex: number;
25
26
  remoteWeekdayString: string;
27
+ accountType: string;
26
28
  };
27
29
  } | {
28
30
  User: {
@@ -31,6 +33,7 @@ declare const profiles: ({
31
33
  nickname: string;
32
34
  email: string;
33
35
  meta: string;
36
+ accountType: string;
34
37
  location?: undefined;
35
38
  remoteTimeString?: undefined;
36
39
  remoteWeekdayIndex?: undefined;
@@ -7,6 +7,7 @@ import UserProfileCardClient from './client/UserProfileCardClient';
7
7
  export interface ApiClientResponse {
8
8
  User: {
9
9
  id: string;
10
+ accountType: string;
10
11
  isBot: boolean;
11
12
  isCurrentUser: boolean;
12
13
  avatarUrl: string | null;
@@ -52,6 +53,7 @@ export interface ProfileCardClientData {
52
53
  status: StatusType;
53
54
  statusModifiedDate?: number | null;
54
55
  customLozenges?: LozengeProps[];
56
+ accountType?: string;
55
57
  }
56
58
  export interface ReportingLinesUserPII {
57
59
  name: string;
@@ -111,6 +113,8 @@ export interface ProfileCardTriggerProps {
111
113
  children: React.ReactNode;
112
114
  testId?: string;
113
115
  addFlag?: (flag: any) => void;
116
+ ariaLabel?: string;
117
+ ariaLabelledBy?: string;
114
118
  }
115
119
  export interface ProfileCardTriggerState {
116
120
  visible?: boolean;
@@ -265,6 +269,7 @@ export interface ProfilecardProps {
265
269
  isLoading?: boolean;
266
270
  hasError?: boolean;
267
271
  errorType?: ProfileCardErrorType;
272
+ accountType?: string;
268
273
  status?: StatusType;
269
274
  isBot?: boolean;
270
275
  avatarUrl?: string;
@@ -295,6 +300,7 @@ export interface ProfilecardProps {
295
300
  hasDisabledAccountLozenge?: boolean;
296
301
  customLozenges?: LozengeProps[];
297
302
  openKudosDrawer?: () => void;
303
+ isTriggeredUsingKeyboard?: boolean;
298
304
  }
299
305
  export type AnalyticsFromDuration = (duration: number) => AnalyticsEventPayload;
300
306
  export type AnalyticsFunction = (generator: AnalyticsFromDuration) => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/profilecard",
3
- "version": "19.8.0",
3
+ "version": "19.10.0",
4
4
  "description": "A React component to display a card with user information.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -52,11 +52,11 @@
52
52
  "access": "public"
53
53
  },
54
54
  "dependencies": {
55
- "@atlaskit/analytics-next": "^9.1.0",
55
+ "@atlaskit/analytics-next": "^9.2.0",
56
56
  "@atlaskit/avatar": "^21.4.0",
57
57
  "@atlaskit/avatar-group": "^9.5.0",
58
- "@atlaskit/button": "^17.2.0",
59
- "@atlaskit/dropdown-menu": "^12.1.0",
58
+ "@atlaskit/button": "^17.3.0",
59
+ "@atlaskit/dropdown-menu": "^12.5.0",
60
60
  "@atlaskit/empty-state": "^7.6.0",
61
61
  "@atlaskit/focus-ring": "^1.3.4",
62
62
  "@atlaskit/give-kudos": "^2.1.0",
@@ -64,10 +64,10 @@
64
64
  "@atlaskit/lozenge": "^11.6.0",
65
65
  "@atlaskit/menu": "^2.1.0",
66
66
  "@atlaskit/platform-feature-flags": "^0.2.4",
67
- "@atlaskit/popup": "^1.11.0",
67
+ "@atlaskit/popup": "^1.12.0",
68
68
  "@atlaskit/spinner": "^16.0.0",
69
69
  "@atlaskit/theme": "^12.6.0",
70
- "@atlaskit/tokens": "^1.35.0",
70
+ "@atlaskit/tokens": "^1.36.0",
71
71
  "@atlaskit/tooltip": "^18.1.0",
72
72
  "@babel/runtime": "^7.0.0",
73
73
  "@emotion/react": "^11.7.1",