@atlaskit/profilecard 19.11.6 → 19.11.8

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.
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import { ProfileCardTriggerProps } from '../../types';
3
- export default function ProfilecardTriggerSwitch(props: ProfileCardTriggerProps): JSX.Element;
3
+ export default function ProfilecardTrigger({ trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, prepopulatedData, disabledAriaAttributes, onVisibilityChange, }: ProfileCardTriggerProps): JSX.Element;
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import { ProfileCardTriggerProps } from '../../types';
3
- export default function ProfilecardTriggerSwitch(props: ProfileCardTriggerProps): JSX.Element;
3
+ export default function ProfilecardTrigger({ trigger, userId, cloudId, resourceClient, actions, position, children, testId, addFlag, onReportingLinesClick, ariaLabel, ariaLabelledBy, prepopulatedData, disabledAriaAttributes, onVisibilityChange, }: ProfileCardTriggerProps): JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/profilecard",
3
- "version": "19.11.6",
3
+ "version": "19.11.8",
4
4
  "description": "A React component to display a card with user information.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -53,22 +53,21 @@
53
53
  },
54
54
  "dependencies": {
55
55
  "@atlaskit/analytics-next": "^9.3.0",
56
- "@atlaskit/avatar": "^21.5.0",
56
+ "@atlaskit/avatar": "^21.6.0",
57
57
  "@atlaskit/avatar-group": "^9.5.0",
58
58
  "@atlaskit/button": "^17.14.0",
59
- "@atlaskit/dropdown-menu": "^12.9.0",
59
+ "@atlaskit/dropdown-menu": "^12.10.0",
60
60
  "@atlaskit/empty-state": "^7.8.0",
61
- "@atlaskit/focus-ring": "^1.3.4",
61
+ "@atlaskit/focus-ring": "^1.4.0",
62
62
  "@atlaskit/give-kudos": "^2.1.1",
63
63
  "@atlaskit/icon": "^22.1.0",
64
64
  "@atlaskit/lozenge": "^11.7.0",
65
- "@atlaskit/menu": "^2.1.0",
66
- "@atlaskit/platform-feature-flags": "^0.2.4",
67
- "@atlaskit/popup": "^1.14.0",
68
- "@atlaskit/spinner": "^16.0.0",
65
+ "@atlaskit/menu": "^2.2.0",
66
+ "@atlaskit/popup": "^1.15.0",
67
+ "@atlaskit/spinner": "^16.1.0",
69
68
  "@atlaskit/theme": "^12.7.0",
70
- "@atlaskit/tokens": "^1.43.0",
71
- "@atlaskit/tooltip": "^18.2.0",
69
+ "@atlaskit/tokens": "^1.45.0",
70
+ "@atlaskit/tooltip": "^18.3.0",
72
71
  "@babel/runtime": "^7.0.0",
73
72
  "@emotion/react": "^11.7.1",
74
73
  "@emotion/styled": "^11.0.0",
@@ -109,10 +108,5 @@
109
108
  ]
110
109
  }
111
110
  },
112
- "platform-feature-flags": {
113
- "platform.profile-card-trigger-next": {
114
- "type": "boolean"
115
- }
116
- },
117
111
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
118
112
  }
@@ -1,357 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = ProfilecardTriggerNext;
9
- var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
- var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
11
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
14
- var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
15
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
16
- var _react = _interopRequireWildcard(require("react"));
17
- var _reactIntlNext = require("react-intl-next");
18
- var _analyticsNext = require("@atlaskit/analytics-next");
19
- var _giveKudos = require("@atlaskit/give-kudos");
20
- var _popup = _interopRequireDefault(require("@atlaskit/popup"));
21
- var _constants = require("@atlaskit/theme/constants");
22
- var _filterActions = _interopRequireDefault(require("../../internal/filterActions"));
23
- var _getLabelMessage = _interopRequireDefault(require("../../internal/getLabelMessage"));
24
- var _Card = require("../../styled/Card");
25
- var _analytics = require("../../util/analytics");
26
- var _config = require("../../util/config");
27
- var _lazyProfileCard = require("./lazyProfileCard");
28
- var _UserLoadingState = _interopRequireDefault(require("./UserLoadingState"));
29
- var _excluded = ["ref"],
30
- _excluded2 = ["aria-expanded", "aria-haspopup"];
31
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
32
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
33
- 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; }
34
- 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) { (0, _defineProperty2.default)(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; }
35
- function ProfilecardTriggerNext(_ref) {
36
- var _ref$trigger = _ref.trigger,
37
- trigger = _ref$trigger === void 0 ? 'hover' : _ref$trigger,
38
- userId = _ref.userId,
39
- cloudId = _ref.cloudId,
40
- resourceClient = _ref.resourceClient,
41
- _ref$actions = _ref.actions,
42
- actions = _ref$actions === void 0 ? [] : _ref$actions,
43
- _ref$position = _ref.position,
44
- position = _ref$position === void 0 ? 'bottom-start' : _ref$position,
45
- children = _ref.children,
46
- testId = _ref.testId,
47
- addFlag = _ref.addFlag,
48
- onReportingLinesClick = _ref.onReportingLinesClick,
49
- ariaLabel = _ref.ariaLabel,
50
- ariaLabelledBy = _ref.ariaLabelledBy,
51
- prepopulatedData = _ref.prepopulatedData,
52
- disabledAriaAttributes = _ref.disabledAriaAttributes,
53
- onVisibilityChange = _ref.onVisibilityChange;
54
- var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
55
- createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
56
- var _useIntl = (0, _reactIntlNext.useIntl)(),
57
- formatMessage = _useIntl.formatMessage;
58
- var _useState = (0, _react.useState)(false),
59
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
60
- isMounted = _useState2[0],
61
- setIsMounted = _useState2[1];
62
- var showDelay = trigger === 'click' ? 0 : _config.DELAY_MS_SHOW;
63
- var hideDelay = trigger === 'click' ? 0 : _config.DELAY_MS_HIDE;
64
- var showTimer = (0, _react.useRef)(0);
65
- var hideTimer = (0, _react.useRef)(0);
66
- var _useState3 = (0, _react.useState)(false),
67
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
68
- visible = _useState4[0],
69
- setVisible = _useState4[1];
70
- var _useState5 = (0, _react.useState)(undefined),
71
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
72
- isLoading = _useState6[0],
73
- setIsLoading = _useState6[1];
74
- var _useState7 = (0, _react.useState)(false),
75
- _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
76
- hasError = _useState8[0],
77
- setHasError = _useState8[1];
78
- var _useState9 = (0, _react.useState)(null),
79
- _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
80
- error = _useState10[0],
81
- setError = _useState10[1];
82
- var _useState11 = (0, _react.useState)(null),
83
- _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
84
- data = _useState12[0],
85
- setData = _useState12[1];
86
- var _useState13 = (0, _react.useState)(undefined),
87
- _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
88
- reportingLinesData = _useState14[0],
89
- setReportingLinesData = _useState14[1];
90
- var _useState15 = (0, _react.useState)(false),
91
- _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
92
- shouldShowGiveKudos = _useState16[0],
93
- setShouldShowGiveKudos = _useState16[1];
94
- var _useState17 = (0, _react.useState)(undefined),
95
- _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
96
- teamCentralBaseUrl = _useState18[0],
97
- setTeamCentralBaseUrl = _useState18[1];
98
- var _useState19 = (0, _react.useState)(false),
99
- _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
100
- kudosDrawerOpen = _useState20[0],
101
- setKudosDrawerOpen = _useState20[1];
102
- var _useState21 = (0, _react.useState)(false),
103
- _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
104
- isTriggeredUsingKeyboard = _useState22[0],
105
- setTriggeredUsingKeyboard = _useState22[1];
106
- var triggerRef = (0, _react.useRef)(null);
107
- (0, _react.useEffect)(function () {
108
- setIsMounted(true);
109
- return function () {
110
- setIsMounted(false);
111
- clearTimeout(showTimer.current);
112
- clearTimeout(hideTimer.current);
113
- };
114
- // eslint-disable-next-line react-hooks/exhaustive-deps
115
- }, []);
116
- (0, _react.useEffect)(function () {
117
- // Reset state when the userId changes
118
- setIsLoading(undefined);
119
- setHasError(false);
120
- setError(null);
121
- setData(null);
122
- setReportingLinesData(undefined);
123
- setShouldShowGiveKudos(false);
124
- setTeamCentralBaseUrl(undefined);
125
- }, [userId]);
126
- var fireAnalytics = (0, _react.useCallback)(function (payload) {
127
- // Don't fire any analytics if the component is unmounted
128
- if (!isMounted) {
129
- return;
130
- }
131
- (0, _analytics.fireEvent)(createAnalyticsEvent, payload);
132
- }, [createAnalyticsEvent, isMounted]);
133
- var hideProfilecard = (0, _react.useCallback)(function () {
134
- clearTimeout(showTimer.current);
135
- clearTimeout(hideTimer.current);
136
- if (!isTriggeredUsingKeyboard) {
137
- hideTimer.current = window.setTimeout(function () {
138
- setVisible(false);
139
- onVisibilityChange && onVisibilityChange(false);
140
- }, hideDelay);
141
- }
142
- }, [hideDelay, isTriggeredUsingKeyboard, onVisibilityChange]);
143
- var handleKeyboardClose = (0, _react.useCallback)(function (event) {
144
- if (event.key && event.key !== 'Escape') {
145
- return;
146
- }
147
- if (triggerRef.current) {
148
- triggerRef.current.focus();
149
- }
150
- setTriggeredUsingKeyboard(false);
151
- setVisible(false);
152
- onVisibilityChange && onVisibilityChange(false);
153
- }, [setTriggeredUsingKeyboard, setVisible, onVisibilityChange]);
154
- var handleClientSuccess = (0, _react.useCallback)(function (profileData, reportingLinesData, shouldShowGiveKudos) {
155
- if (!isMounted) {
156
- return;
157
- }
158
- setIsLoading(false);
159
- setHasError(false);
160
- setData(profileData);
161
- setReportingLinesData(reportingLinesData);
162
- setShouldShowGiveKudos(shouldShowGiveKudos);
163
- }, [isMounted, setHasError, setIsLoading, setData, setReportingLinesData, setShouldShowGiveKudos]);
164
- var handleClientError = (0, _react.useCallback)(function (err) {
165
- if (!isMounted) {
166
- return;
167
- }
168
- setIsLoading(false);
169
- setHasError(true);
170
- setError(err);
171
- }, [isMounted, setHasError, setIsLoading, setError]);
172
- var clientFetchProfile = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
173
- var requests, responses;
174
- return _regenerator.default.wrap(function _callee$(_context) {
175
- while (1) switch (_context.prev = _context.next) {
176
- case 0:
177
- if (!(isLoading === true)) {
178
- _context.next = 2;
179
- break;
180
- }
181
- return _context.abrupt("return");
182
- case 2:
183
- setTeamCentralBaseUrl(resourceClient.getTeamCentralBaseUrl());
184
- setIsLoading(true);
185
- setHasError(false);
186
- setError(null);
187
- setData(null);
188
- _context.prev = 7;
189
- requests = Promise.all([resourceClient.getProfile(cloudId || '', userId, fireAnalytics), resourceClient.getReportingLines(userId), resourceClient.shouldShowGiveKudos()]);
190
- _context.next = 11;
191
- return requests;
192
- case 11:
193
- responses = _context.sent;
194
- handleClientSuccess.apply(void 0, (0, _toConsumableArray2.default)(responses));
195
- _context.next = 18;
196
- break;
197
- case 15:
198
- _context.prev = 15;
199
- _context.t0 = _context["catch"](7);
200
- handleClientError(_context.t0);
201
- case 18:
202
- case "end":
203
- return _context.stop();
204
- }
205
- }, _callee, null, [[7, 15]]);
206
- })), [cloudId, fireAnalytics, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
207
- var showProfilecard = (0, _react.useCallback)(function () {
208
- clearTimeout(hideTimer.current);
209
- clearTimeout(showTimer.current);
210
- showTimer.current = window.setTimeout(function () {
211
- if (!visible) {
212
- void clientFetchProfile();
213
- setVisible(true);
214
- onVisibilityChange && onVisibilityChange(true);
215
- }
216
- }, showDelay);
217
- }, [showDelay, visible, clientFetchProfile, onVisibilityChange]);
218
- var onClick = (0, _react.useCallback)(function (event) {
219
- // If the user clicks on the trigger then we don't want that click event to
220
- // propagate out to parent containers. For example when clicking a mention
221
- // lozenge in an inline-edit.
222
- event.stopPropagation();
223
- showProfilecard();
224
- if (!visible) {
225
- fireAnalytics((0, _analytics.cardTriggered)('user', 'click'));
226
- }
227
- }, [fireAnalytics, showProfilecard, visible]);
228
- var onMouseEnter = (0, _react.useCallback)(function () {
229
- showProfilecard();
230
- if (!visible) {
231
- fireAnalytics((0, _analytics.cardTriggered)('user', 'hover'));
232
- }
233
- }, [fireAnalytics, showProfilecard, visible]);
234
- var onKeyPress = (0, _react.useCallback)(function (event) {
235
- if (event.key === 'Enter' || event.key === ' ') {
236
- event.preventDefault();
237
- setTriggeredUsingKeyboard(true);
238
- showProfilecard();
239
- if (!visible) {
240
- fireAnalytics((0, _analytics.cardTriggered)('user', 'click'));
241
- }
242
- }
243
- }, [fireAnalytics, showProfilecard, visible]);
244
- var onFocus = (0, _react.useCallback)(function () {
245
- showProfilecard();
246
- }, [showProfilecard]);
247
- var containerListeners = (0, _react.useMemo)(function () {
248
- return trigger === 'hover' ? {
249
- onMouseEnter: onMouseEnter,
250
- onMouseLeave: hideProfilecard,
251
- onBlur: hideProfilecard,
252
- onKeyPress: onKeyPress
253
- } : {
254
- onClick: onClick,
255
- onKeyPress: onKeyPress
256
- };
257
- }, [hideProfilecard, onClick, onKeyPress, onMouseEnter, trigger]);
258
- var filterActions = (0, _react.useCallback)(function () {
259
- return (0, _filterActions.default)(actions, data);
260
- }, [actions, data]);
261
- var openKudosDrawer = function openKudosDrawer() {
262
- hideProfilecard();
263
- setKudosDrawerOpen(true);
264
- };
265
- var closeKudosDrawer = function closeKudosDrawer() {
266
- setKudosDrawerOpen(false);
267
- };
268
- var showLoading = isLoading === true || isLoading === undefined;
269
- var wrapperProps = (0, _react.useMemo)(function () {
270
- return trigger === 'hover' ? {
271
- onMouseEnter: onMouseEnter,
272
- onMouseLeave: hideProfilecard,
273
- onFocus: onFocus
274
- } : {};
275
- }, [hideProfilecard, onFocus, onMouseEnter, trigger]);
276
- var profilecardProps = _objectSpread(_objectSpread({
277
- userId: userId,
278
- fullName: prepopulatedData === null || prepopulatedData === void 0 ? void 0 : prepopulatedData.fullName,
279
- isCurrentUser: data === null || data === void 0 ? void 0 : data.isCurrentUser,
280
- clientFetchProfile: clientFetchProfile
281
- }, data), {}, {
282
- reportingLines: reportingLinesData,
283
- onReportingLinesClick: onReportingLinesClick,
284
- isKudosEnabled: shouldShowGiveKudos,
285
- teamCentralBaseUrl: teamCentralBaseUrl,
286
- cloudId: cloudId,
287
- openKudosDrawer: openKudosDrawer,
288
- isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
289
- disabledAriaAttributes: disabledAriaAttributes
290
- });
291
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_popup.default, {
292
- isOpen: !!visible,
293
- onClose: function onClose(event) {
294
- hideProfilecard();
295
- handleKeyboardClose(event);
296
- },
297
- placement: position,
298
- content: function content() {
299
- return /*#__PURE__*/_react.default.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/_react.default.createElement(LoadingView, {
300
- fireAnalytics: fireAnalytics
301
- }) : visible && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
302
- fallback: null
303
- }, /*#__PURE__*/_react.default.createElement(_lazyProfileCard.ProfileCardLazy, (0, _extends2.default)({}, profilecardProps, {
304
- actions: filterActions(),
305
- hasError: hasError,
306
- errorType: error,
307
- withoutElevation: true
308
- }))));
309
- },
310
- trigger: function trigger(triggerProps) {
311
- var callbackRef = triggerProps.ref,
312
- innerProps = (0, _objectWithoutProperties2.default)(triggerProps, _excluded);
313
- var ref = function ref(element) {
314
- triggerRef.current = element;
315
- if (typeof callbackRef === 'function') {
316
- callbackRef(element);
317
- }
318
- };
319
- var _ = innerProps['aria-expanded'],
320
- __ = innerProps['aria-haspopup'],
321
- restInnerProps = (0, _objectWithoutProperties2.default)(innerProps, _excluded2);
322
- return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, disabledAriaAttributes ? restInnerProps : triggerProps, containerListeners, {
323
- ref: ref,
324
- "data-testid": testId,
325
- "aria-labelledby": ariaLabelledBy
326
- }, disabledAriaAttributes ? {} : {
327
- role: 'button',
328
- tabIndex: 0,
329
- 'aria-label': (0, _getLabelMessage.default)(ariaLabel, profilecardProps.fullName, formatMessage)
330
- }), children);
331
- },
332
- zIndex: _constants.layers.modal(),
333
- shouldUseCaptureOnOutsideClick: true,
334
- autoFocus: trigger === 'click'
335
- }), shouldShowGiveKudos && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
336
- fallback: null
337
- }, /*#__PURE__*/_react.default.createElement(_giveKudos.GiveKudosLauncherLazy, {
338
- isOpen: kudosDrawerOpen,
339
- recipient: {
340
- type: _giveKudos.KudosType.INDIVIDUAL,
341
- recipientId: userId
342
- },
343
- analyticsSource: "profile-card",
344
- teamCentralBaseUrl: teamCentralBaseUrl,
345
- cloudId: cloudId,
346
- addFlag: addFlag,
347
- onClose: closeKudosDrawer
348
- })));
349
- }
350
- var LoadingView = function LoadingView(_ref3) {
351
- var fireAnalytics = _ref3.fireAnalytics;
352
- return /*#__PURE__*/_react.default.createElement(_Card.CardWrapper, {
353
- "data-testId": "profilecard.profilecardtrigger.loading"
354
- }, /*#__PURE__*/_react.default.createElement(_UserLoadingState.default, {
355
- fireAnalytics: fireAnalytics
356
- }));
357
- };