@atlaskit/profilecard 19.11.0 → 19.11.2

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 (14) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/client/getTeamFromAGG.js +1 -1
  3. package/dist/cjs/components/User/ProfileCardTriggerNext.js +43 -49
  4. package/dist/cjs/styled/Card.js +4 -6
  5. package/dist/cjs/util/analytics.js +1 -1
  6. package/dist/es2019/client/getTeamFromAGG.js +1 -1
  7. package/dist/es2019/components/User/ProfileCardTriggerNext.js +16 -16
  8. package/dist/es2019/styled/Card.js +5 -7
  9. package/dist/es2019/util/analytics.js +1 -1
  10. package/dist/esm/client/getTeamFromAGG.js +1 -1
  11. package/dist/esm/components/User/ProfileCardTriggerNext.js +43 -49
  12. package/dist/esm/styled/Card.js +4 -6
  13. package/dist/esm/util/analytics.js +1 -1
  14. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @atlaskit/profilecard
2
2
 
3
+ ## 19.11.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#74811](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74811) [`c30aee2e855c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c30aee2e855c) - PTC-8751 enforce space token usage in profilecard
8
+ - Updated dependencies
9
+
10
+ ## 19.11.1
11
+
12
+ ### Patch Changes
13
+
14
+ - [#73706](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73706) [`3a5408573683`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3a5408573683) - Fix bug causing profilecard to disappear early in some circumstances
15
+
3
16
  ## 19.11.0
4
17
 
5
18
  ### Minor Changes
package/dist/cjs/client/getTeamFromAGG.js CHANGED
@@ -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.11.0");
60
+ headers.append('atl-client-version', "19.11.2");
61
61
  return headers;
62
62
  };
63
63
  function getTeamFromAGG(_x, _x2, _x3) {
package/dist/cjs/components/User/ProfileCardTriggerNext.js CHANGED
@@ -58,61 +58,55 @@ function ProfilecardTriggerNext(_ref) {
58
58
  setIsMounted = _useState2[1];
59
59
  var showDelay = trigger === 'click' ? 0 : _config.DELAY_MS_SHOW;
60
60
  var hideDelay = trigger === 'click' ? 0 : _config.DELAY_MS_HIDE;
61
- var _useState3 = (0, _react.useState)(0),
61
+ var showTimer = (0, _react.useRef)(0);
62
+ var hideTimer = (0, _react.useRef)(0);
63
+ var _useState3 = (0, _react.useState)(false),
62
64
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
63
- showTimer = _useState4[0],
64
- setShowTimer = _useState4[1];
65
- var _useState5 = (0, _react.useState)(0),
65
+ visible = _useState4[0],
66
+ setVisible = _useState4[1];
67
+ var _useState5 = (0, _react.useState)(undefined),
66
68
  _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
67
- hideTimer = _useState6[0],
68
- setHideTimer = _useState6[1];
69
+ isLoading = _useState6[0],
70
+ setIsLoading = _useState6[1];
69
71
  var _useState7 = (0, _react.useState)(false),
70
72
  _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
71
- visible = _useState8[0],
72
- setVisible = _useState8[1];
73
- var _useState9 = (0, _react.useState)(undefined),
73
+ hasError = _useState8[0],
74
+ setHasError = _useState8[1];
75
+ var _useState9 = (0, _react.useState)(null),
74
76
  _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
75
- isLoading = _useState10[0],
76
- setIsLoading = _useState10[1];
77
- var _useState11 = (0, _react.useState)(false),
77
+ error = _useState10[0],
78
+ setError = _useState10[1];
79
+ var _useState11 = (0, _react.useState)(null),
78
80
  _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
79
- hasError = _useState12[0],
80
- setHasError = _useState12[1];
81
- var _useState13 = (0, _react.useState)(null),
81
+ data = _useState12[0],
82
+ setData = _useState12[1];
83
+ var _useState13 = (0, _react.useState)(undefined),
82
84
  _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
83
- error = _useState14[0],
84
- setError = _useState14[1];
85
- var _useState15 = (0, _react.useState)(null),
85
+ reportingLinesData = _useState14[0],
86
+ setReportingLinesData = _useState14[1];
87
+ var _useState15 = (0, _react.useState)(false),
86
88
  _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
87
- data = _useState16[0],
88
- setData = _useState16[1];
89
+ shouldShowGiveKudos = _useState16[0],
90
+ setShouldShowGiveKudos = _useState16[1];
89
91
  var _useState17 = (0, _react.useState)(undefined),
90
92
  _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
91
- reportingLinesData = _useState18[0],
92
- setReportingLinesData = _useState18[1];
93
+ teamCentralBaseUrl = _useState18[0],
94
+ setTeamCentralBaseUrl = _useState18[1];
93
95
  var _useState19 = (0, _react.useState)(false),
94
96
  _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
95
- shouldShowGiveKudos = _useState20[0],
96
- setShouldShowGiveKudos = _useState20[1];
97
- var _useState21 = (0, _react.useState)(undefined),
97
+ kudosDrawerOpen = _useState20[0],
98
+ setKudosDrawerOpen = _useState20[1];
99
+ var _useState21 = (0, _react.useState)(false),
98
100
  _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
99
- teamCentralBaseUrl = _useState22[0],
100
- setTeamCentralBaseUrl = _useState22[1];
101
- var _useState23 = (0, _react.useState)(false),
102
- _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
103
- kudosDrawerOpen = _useState24[0],
104
- setKudosDrawerOpen = _useState24[1];
105
- var _useState25 = (0, _react.useState)(false),
106
- _useState26 = (0, _slicedToArray2.default)(_useState25, 2),
107
- isTriggeredUsingKeyboard = _useState26[0],
108
- setTriggeredUsingKeyboard = _useState26[1];
101
+ isTriggeredUsingKeyboard = _useState22[0],
102
+ setTriggeredUsingKeyboard = _useState22[1];
109
103
  var triggerRef = (0, _react.useRef)(null);
110
104
  (0, _react.useEffect)(function () {
111
105
  setIsMounted(true);
112
106
  return function () {
113
107
  setIsMounted(false);
114
- clearTimeout(showTimer);
115
- clearTimeout(hideTimer);
108
+ clearTimeout(showTimer.current);
109
+ clearTimeout(hideTimer.current);
116
110
  };
117
111
  // eslint-disable-next-line react-hooks/exhaustive-deps
118
112
  }, []);
@@ -134,14 +128,14 @@ function ProfilecardTriggerNext(_ref) {
134
128
  (0, _analytics.fireEvent)(createAnalyticsEvent, payload);
135
129
  }, [createAnalyticsEvent, isMounted]);
136
130
  var hideProfilecard = (0, _react.useCallback)(function () {
137
- clearTimeout(showTimer);
138
- clearTimeout(hideTimer);
131
+ clearTimeout(showTimer.current);
132
+ clearTimeout(hideTimer.current);
139
133
  if (!isTriggeredUsingKeyboard) {
140
- setHideTimer(window.setTimeout(function () {
134
+ hideTimer.current = window.setTimeout(function () {
141
135
  setVisible(false);
142
- }, hideDelay));
136
+ }, hideDelay);
143
137
  }
144
- }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
138
+ }, [hideDelay, isTriggeredUsingKeyboard]);
145
139
  var handleKeyboardClose = (0, _react.useCallback)(function (event) {
146
140
  if (event.key && event.key !== 'Escape') {
147
141
  return;
@@ -206,15 +200,15 @@ function ProfilecardTriggerNext(_ref) {
206
200
  }, _callee, null, [[7, 15]]);
207
201
  })), [cloudId, fireAnalytics, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
208
202
  var showProfilecard = (0, _react.useCallback)(function () {
209
- clearTimeout(hideTimer);
210
- clearTimeout(showTimer);
211
- setShowTimer(window.setTimeout(function () {
203
+ clearTimeout(hideTimer.current);
204
+ clearTimeout(showTimer.current);
205
+ showTimer.current = window.setTimeout(function () {
212
206
  if (!visible) {
213
207
  void clientFetchProfile();
214
208
  setVisible(true);
215
209
  }
216
- }, showDelay));
217
- }, [hideTimer, showDelay, showTimer, visible, clientFetchProfile]);
210
+ }, showDelay);
211
+ }, [showDelay, visible, clientFetchProfile]);
218
212
  var onClick = (0, _react.useCallback)(function (event) {
219
213
  // If the user clicks on the trigger then we don't want that click event to
220
214
  // propagate out to parent containers. For example when clicking a mention
@@ -295,9 +289,9 @@ function ProfilecardTriggerNext(_ref) {
295
289
  },
296
290
  placement: position,
297
291
  content: function content() {
298
- return showLoading ? /*#__PURE__*/_react.default.createElement(LoadingView, {
292
+ return /*#__PURE__*/_react.default.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/_react.default.createElement(LoadingView, {
299
293
  fireAnalytics: fireAnalytics
300
- }) : /*#__PURE__*/_react.default.createElement("div", wrapperProps, visible && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
294
+ }) : visible && /*#__PURE__*/_react.default.createElement(_react.Suspense, {
301
295
  fallback: null
302
296
  }, /*#__PURE__*/_react.default.createElement(_lazyProfileCard.ProfileCardLazy, (0, _extends2.default)({}, profilecardProps, {
303
297
  actions: filterActions(),
package/dist/cjs/styled/Card.js CHANGED
@@ -15,9 +15,9 @@ var _constants = require("@atlaskit/theme/constants");
15
15
  var _constants2 = require("./constants");
16
16
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
17
17
  var getFullNameMargin = function getFullNameMargin(props) {
18
- return props.noMeta ? "".concat((0, _constants.gridSize)() * 4.5, "px 0 ").concat((0, _constants.gridSize)() * 1.5, "px 0") : "".concat((0, _constants.gridSize)() * 1.5, "px 0 0 0");
18
+ return props.noMeta ? "var(--ds-space-400, 32px)".concat(" 0 ", "var(--ds-space-150, 12px)", " 0") : "var(--ds-space-150, 12px)".concat(" 0 0 0");
19
19
  };
20
- var CardWrapper = exports.CardWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n border-radius: ", "px;\n width: ", "px;\n"])), _constants2.bgColor, _constants.borderRadius, (0, _constants.gridSize)() * 45);
20
+ var CardWrapper = exports.CardWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n border-radius: ", ";\n width: ", "px;\n"])), _constants2.bgColor, "var(--ds-border-radius, 3px)", (0, _constants.gridSize)() * 45);
21
21
  var ProfileImage = exports.ProfileImage = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: ", ";\n left: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
22
22
  var ActionsFlexSpacer = exports.ActionsFlexSpacer = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1 0 auto;\n"])));
23
23
  var kudosButtonAnimationTransformation = (0, _react2.keyframes)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n 0% { transform: translate(-80px, -50px); }\n 100% { transform: translate(90px, -70px); }\n"])));
@@ -29,11 +29,9 @@ var KudosBlobAnimation = exports.KudosBlobAnimation = function KudosBlobAnimatio
29
29
  };
30
30
  var AnimationWrapper = exports.AnimationWrapper = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n clip-path: inset(0px 0px 0px 0px round ", "px);\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n"])), _constants.borderRadius);
31
31
  var AnimatedKudosButton = exports.AnimatedKudosButton = _styled.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: ", ";\n\n /* Need babel-plugin-emotion to use component selector */\n /* Previously with styled-components: &:hover {KudosBlobAnimation} { */\n &:focus-within .kudos-blob-animation,\n &:focus .kudos-blob-animation,\n &:hover .kudos-blob-animation {\n display: block;\n }\n"])), "var(--ds-space-100, 8px)");
32
- var ActionButtonGroup = exports.ActionButtonGroup = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n user-select: none;\n margin: ", " 0 0 0;\n text-align: right;\n display: flex;\n justify-content: flex-end;\n\n button,\n a {\n position: relative;\n }\n\n button,\n a,\n span {\n margin-left: ", ";\n\n &:first-child {\n margin-left: 0;\n }\n }\n\n a,\n button {\n &:focus {\n outline-color: ", ";\n outline-offset: ", ";\n outline-style: solid;\n outline-width: ", ";\n }\n }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
33
- var OverflowActionButtonsWrapper = exports.OverflowActionButtonsWrapper = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n width: 32px;\n height: 32px;\n margin-left: ", ";\n\n button {\n &:focus {\n outline-color: ", ";\n outline-offset: ", ";\n outline-style: solid;\n outline-width: ", ";\n }\n }\n"])), "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
32
+ var ActionButtonGroup = exports.ActionButtonGroup = _styled.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n user-select: none;\n margin: ", " 0 0 0;\n text-align: right;\n display: flex;\n justify-content: flex-end;\n\n button,\n a {\n position: relative;\n }\n\n button,\n a,\n span {\n margin-left: ", ";\n\n &:first-child {\n margin-left: ", ";\n }\n }\n\n a,\n button {\n &:focus {\n outline-color: ", ";\n outline-offset: ", ";\n outline-style: solid;\n outline-width: ", ";\n }\n }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-0, 0px)", "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
33
+ var OverflowActionButtonsWrapper = exports.OverflowActionButtonsWrapper = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n width: ", ";\n height: ", ";\n margin-left: ", ";\n\n button {\n &:focus {\n outline-color: ", ";\n outline-offset: ", ";\n outline-style: solid;\n outline-width: ", ";\n }\n }\n"])), "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(_colors.B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
34
34
  var CardContent = exports.CardContent = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n min-height: ", "px;\n"])), (0, _constants.gridSize)() * 17);
35
-
36
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
37
35
  var DetailsGroup = exports.DetailsGroup = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n margin-left: ", "px;\n width: ", "px;\n"])), (0, _constants.gridSize)() * 14.5, (0, _constants.gridSize)() * 24.5);
38
36
  var DisabledInfo = exports.DisabledInfo = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", "px;\n color: ", ";\n margin: ", " 0 0 0;\n line-height: 16px;\n"])), _constants.fontSizeSmall, _constants2.labelTextColor, "var(--ds-space-150, 12px)");
39
37
  var FullNameLabel = exports.FullNameLabel = _styled.default.h2(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n font-size: 18px;\n font-weight: 400;\n letter-spacing: normal;\n color: ", ";\n margin: ", ";\n line-height: ", "em;\n :first-child {\n margin: ", ";\n }\n"])), function (props) {
package/dist/cjs/util/analytics.js CHANGED
@@ -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.11.0"
47
+ packageVersion: "19.11.2"
48
48
  }, attributes), {}, {
49
49
  firedAt: Math.round((0, _performance.getPageTime)())
50
50
  })
package/dist/es2019/client/getTeamFromAGG.js CHANGED
@@ -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.11.0");
70
+ headers.append('atl-client-version', "19.11.2");
71
71
  return headers;
72
72
  };
73
73
  export async function getTeamFromAGG(url, teamId, siteId) {
package/dist/es2019/components/User/ProfileCardTriggerNext.js CHANGED
@@ -36,8 +36,8 @@ export default function ProfilecardTriggerNext({
36
36
  const [isMounted, setIsMounted] = useState(false);
37
37
  const showDelay = trigger === 'click' ? 0 : DELAY_MS_SHOW;
38
38
  const hideDelay = trigger === 'click' ? 0 : DELAY_MS_HIDE;
39
- const [showTimer, setShowTimer] = useState(0);
40
- const [hideTimer, setHideTimer] = useState(0);
39
+ const showTimer = useRef(0);
40
+ const hideTimer = useRef(0);
41
41
  const [visible, setVisible] = useState(false);
42
42
  const [isLoading, setIsLoading] = useState(undefined);
43
43
  const [hasError, setHasError] = useState(false);
@@ -53,8 +53,8 @@ export default function ProfilecardTriggerNext({
53
53
  setIsMounted(true);
54
54
  return () => {
55
55
  setIsMounted(false);
56
- clearTimeout(showTimer);
57
- clearTimeout(hideTimer);
56
+ clearTimeout(showTimer.current);
57
+ clearTimeout(hideTimer.current);
58
58
  };
59
59
  // eslint-disable-next-line react-hooks/exhaustive-deps
60
60
  }, []);
@@ -76,14 +76,14 @@ export default function ProfilecardTriggerNext({
76
76
  fireEvent(createAnalyticsEvent, payload);
77
77
  }, [createAnalyticsEvent, isMounted]);
78
78
  const hideProfilecard = useCallback(() => {
79
- clearTimeout(showTimer);
80
- clearTimeout(hideTimer);
79
+ clearTimeout(showTimer.current);
80
+ clearTimeout(hideTimer.current);
81
81
  if (!isTriggeredUsingKeyboard) {
82
- setHideTimer(window.setTimeout(() => {
82
+ hideTimer.current = window.setTimeout(() => {
83
83
  setVisible(false);
84
- }, hideDelay));
84
+ }, hideDelay);
85
85
  }
86
- }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
86
+ }, [hideDelay, isTriggeredUsingKeyboard]);
87
87
  const handleKeyboardClose = useCallback(event => {
88
88
  if (event.key && event.key !== 'Escape') {
89
89
  return;
@@ -131,15 +131,15 @@ export default function ProfilecardTriggerNext({
131
131
  }
132
132
  }, [cloudId, fireAnalytics, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
133
133
  const showProfilecard = useCallback(() => {
134
- clearTimeout(hideTimer);
135
- clearTimeout(showTimer);
136
- setShowTimer(window.setTimeout(() => {
134
+ clearTimeout(hideTimer.current);
135
+ clearTimeout(showTimer.current);
136
+ showTimer.current = window.setTimeout(() => {
137
137
  if (!visible) {
138
138
  void clientFetchProfile();
139
139
  setVisible(true);
140
140
  }
141
- }, showDelay));
142
- }, [hideTimer, showDelay, showTimer, visible, clientFetchProfile]);
141
+ }, showDelay);
142
+ }, [showDelay, visible, clientFetchProfile]);
143
143
  const onClick = useCallback(event => {
144
144
  // If the user clicks on the trigger then we don't want that click event to
145
145
  // propagate out to parent containers. For example when clicking a mention
@@ -215,9 +215,9 @@ export default function ProfilecardTriggerNext({
215
215
  handleKeyboardClose(event);
216
216
  },
217
217
  placement: position,
218
- content: () => showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
218
+ content: () => /*#__PURE__*/React.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
219
219
  fireAnalytics: fireAnalytics
220
- }) : /*#__PURE__*/React.createElement("div", wrapperProps, visible && /*#__PURE__*/React.createElement(Suspense, {
220
+ }) : visible && /*#__PURE__*/React.createElement(Suspense, {
221
221
  fallback: null
222
222
  }, /*#__PURE__*/React.createElement(ProfileCardLazy, _extends({}, profilecardProps, {
223
223
  actions: filterActions(),
package/dist/es2019/styled/Card.js CHANGED
@@ -5,10 +5,10 @@ import styled from '@emotion/styled';
5
5
  import { B200, N50A, N60A } from '@atlaskit/theme/colors';
6
6
  import { borderRadius, fontSize, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
7
7
  import { appLabelBgColor, appLabelTextColor, bgColor, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from './constants';
8
- const getFullNameMargin = props => props.noMeta ? `${gridSize() * 4.5}px 0 ${gridSize() * 1.5}px 0` : `${gridSize() * 1.5}px 0 0 0`;
8
+ const getFullNameMargin = props => props.noMeta ? `${"var(--ds-space-400, 32px)"} 0 ${"var(--ds-space-150, 12px)"} 0` : `${"var(--ds-space-150, 12px)"} 0 0 0`;
9
9
  export const CardWrapper = styled.div`
10
10
  background-color: ${bgColor};
11
- border-radius: ${borderRadius}px;
11
+ border-radius: ${"var(--ds-border-radius, 3px)"};
12
12
  width: ${gridSize() * 45}px;
13
13
  `;
14
14
  export const ProfileImage = styled.div`
@@ -81,7 +81,7 @@ export const ActionButtonGroup = styled.div`
81
81
  margin-left: ${"var(--ds-space-100, 8px)"};
82
82
 
83
83
  &:first-child {
84
- margin-left: 0;
84
+ margin-left: ${"var(--ds-space-0, 0px)"};
85
85
  }
86
86
  }
87
87
 
@@ -97,8 +97,8 @@ export const ActionButtonGroup = styled.div`
97
97
  `;
98
98
  export const OverflowActionButtonsWrapper = styled.div`
99
99
  display: inline-block;
100
- width: 32px;
101
- height: 32px;
100
+ width: ${"var(--ds-space-400, 32px)"};
101
+ height: ${"var(--ds-space-400, 32px)"};
102
102
  margin-left: ${"var(--ds-space-100, 8px)"};
103
103
 
104
104
  button {
@@ -115,8 +115,6 @@ export const CardContent = styled.div`
115
115
  flex-direction: column;
116
116
  min-height: ${gridSize() * 17}px;
117
117
  `;
118
-
119
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
120
118
  export const DetailsGroup = styled.div`
121
119
  display: flex;
122
120
  flex-direction: column;
package/dist/es2019/util/analytics.js CHANGED
@@ -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.11.0",
34
+ packageVersion: "19.11.2",
35
35
  ...attributes,
36
36
  firedAt: Math.round(getPageTime())
37
37
  }
package/dist/esm/client/getTeamFromAGG.js CHANGED
@@ -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.11.0");
51
+ headers.append('atl-client-version', "19.11.2");
52
52
  return headers;
53
53
  };
54
54
  export function getTeamFromAGG(_x, _x2, _x3) {
package/dist/esm/components/User/ProfileCardTriggerNext.js CHANGED
@@ -48,61 +48,55 @@ export default function ProfilecardTriggerNext(_ref) {
48
48
  setIsMounted = _useState2[1];
49
49
  var showDelay = trigger === 'click' ? 0 : DELAY_MS_SHOW;
50
50
  var hideDelay = trigger === 'click' ? 0 : DELAY_MS_HIDE;
51
- var _useState3 = useState(0),
51
+ var showTimer = useRef(0);
52
+ var hideTimer = useRef(0);
53
+ var _useState3 = useState(false),
52
54
  _useState4 = _slicedToArray(_useState3, 2),
53
- showTimer = _useState4[0],
54
- setShowTimer = _useState4[1];
55
- var _useState5 = useState(0),
55
+ visible = _useState4[0],
56
+ setVisible = _useState4[1];
57
+ var _useState5 = useState(undefined),
56
58
  _useState6 = _slicedToArray(_useState5, 2),
57
- hideTimer = _useState6[0],
58
- setHideTimer = _useState6[1];
59
+ isLoading = _useState6[0],
60
+ setIsLoading = _useState6[1];
59
61
  var _useState7 = useState(false),
60
62
  _useState8 = _slicedToArray(_useState7, 2),
61
- visible = _useState8[0],
62
- setVisible = _useState8[1];
63
- var _useState9 = useState(undefined),
63
+ hasError = _useState8[0],
64
+ setHasError = _useState8[1];
65
+ var _useState9 = useState(null),
64
66
  _useState10 = _slicedToArray(_useState9, 2),
65
- isLoading = _useState10[0],
66
- setIsLoading = _useState10[1];
67
- var _useState11 = useState(false),
67
+ error = _useState10[0],
68
+ setError = _useState10[1];
69
+ var _useState11 = useState(null),
68
70
  _useState12 = _slicedToArray(_useState11, 2),
69
- hasError = _useState12[0],
70
- setHasError = _useState12[1];
71
- var _useState13 = useState(null),
71
+ data = _useState12[0],
72
+ setData = _useState12[1];
73
+ var _useState13 = useState(undefined),
72
74
  _useState14 = _slicedToArray(_useState13, 2),
73
- error = _useState14[0],
74
- setError = _useState14[1];
75
- var _useState15 = useState(null),
75
+ reportingLinesData = _useState14[0],
76
+ setReportingLinesData = _useState14[1];
77
+ var _useState15 = useState(false),
76
78
  _useState16 = _slicedToArray(_useState15, 2),
77
- data = _useState16[0],
78
- setData = _useState16[1];
79
+ shouldShowGiveKudos = _useState16[0],
80
+ setShouldShowGiveKudos = _useState16[1];
79
81
  var _useState17 = useState(undefined),
80
82
  _useState18 = _slicedToArray(_useState17, 2),
81
- reportingLinesData = _useState18[0],
82
- setReportingLinesData = _useState18[1];
83
+ teamCentralBaseUrl = _useState18[0],
84
+ setTeamCentralBaseUrl = _useState18[1];
83
85
  var _useState19 = useState(false),
84
86
  _useState20 = _slicedToArray(_useState19, 2),
85
- shouldShowGiveKudos = _useState20[0],
86
- setShouldShowGiveKudos = _useState20[1];
87
- var _useState21 = useState(undefined),
87
+ kudosDrawerOpen = _useState20[0],
88
+ setKudosDrawerOpen = _useState20[1];
89
+ var _useState21 = useState(false),
88
90
  _useState22 = _slicedToArray(_useState21, 2),
89
- teamCentralBaseUrl = _useState22[0],
90
- setTeamCentralBaseUrl = _useState22[1];
91
- var _useState23 = useState(false),
92
- _useState24 = _slicedToArray(_useState23, 2),
93
- kudosDrawerOpen = _useState24[0],
94
- setKudosDrawerOpen = _useState24[1];
95
- var _useState25 = useState(false),
96
- _useState26 = _slicedToArray(_useState25, 2),
97
- isTriggeredUsingKeyboard = _useState26[0],
98
- setTriggeredUsingKeyboard = _useState26[1];
91
+ isTriggeredUsingKeyboard = _useState22[0],
92
+ setTriggeredUsingKeyboard = _useState22[1];
99
93
  var triggerRef = useRef(null);
100
94
  useEffect(function () {
101
95
  setIsMounted(true);
102
96
  return function () {
103
97
  setIsMounted(false);
104
- clearTimeout(showTimer);
105
- clearTimeout(hideTimer);
98
+ clearTimeout(showTimer.current);
99
+ clearTimeout(hideTimer.current);
106
100
  };
107
101
  // eslint-disable-next-line react-hooks/exhaustive-deps
108
102
  }, []);
@@ -124,14 +118,14 @@ export default function ProfilecardTriggerNext(_ref) {
124
118
  fireEvent(createAnalyticsEvent, payload);
125
119
  }, [createAnalyticsEvent, isMounted]);
126
120
  var hideProfilecard = useCallback(function () {
127
- clearTimeout(showTimer);
128
- clearTimeout(hideTimer);
121
+ clearTimeout(showTimer.current);
122
+ clearTimeout(hideTimer.current);
129
123
  if (!isTriggeredUsingKeyboard) {
130
- setHideTimer(window.setTimeout(function () {
124
+ hideTimer.current = window.setTimeout(function () {
131
125
  setVisible(false);
132
- }, hideDelay));
126
+ }, hideDelay);
133
127
  }
134
- }, [hideDelay, hideTimer, showTimer, isTriggeredUsingKeyboard]);
128
+ }, [hideDelay, isTriggeredUsingKeyboard]);
135
129
  var handleKeyboardClose = useCallback(function (event) {
136
130
  if (event.key && event.key !== 'Escape') {
137
131
  return;
@@ -196,15 +190,15 @@ export default function ProfilecardTriggerNext(_ref) {
196
190
  }, _callee, null, [[7, 15]]);
197
191
  })), [cloudId, fireAnalytics, isLoading, resourceClient, userId, handleClientSuccess, handleClientError]);
198
192
  var showProfilecard = useCallback(function () {
199
- clearTimeout(hideTimer);
200
- clearTimeout(showTimer);
201
- setShowTimer(window.setTimeout(function () {
193
+ clearTimeout(hideTimer.current);
194
+ clearTimeout(showTimer.current);
195
+ showTimer.current = window.setTimeout(function () {
202
196
  if (!visible) {
203
197
  void clientFetchProfile();
204
198
  setVisible(true);
205
199
  }
206
- }, showDelay));
207
- }, [hideTimer, showDelay, showTimer, visible, clientFetchProfile]);
200
+ }, showDelay);
201
+ }, [showDelay, visible, clientFetchProfile]);
208
202
  var onClick = useCallback(function (event) {
209
203
  // If the user clicks on the trigger then we don't want that click event to
210
204
  // propagate out to parent containers. For example when clicking a mention
@@ -285,9 +279,9 @@ export default function ProfilecardTriggerNext(_ref) {
285
279
  },
286
280
  placement: position,
287
281
  content: function content() {
288
- return showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
282
+ return /*#__PURE__*/React.createElement("div", wrapperProps, showLoading ? /*#__PURE__*/React.createElement(LoadingView, {
289
283
  fireAnalytics: fireAnalytics
290
- }) : /*#__PURE__*/React.createElement("div", wrapperProps, visible && /*#__PURE__*/React.createElement(Suspense, {
284
+ }) : visible && /*#__PURE__*/React.createElement(Suspense, {
291
285
  fallback: null
292
286
  }, /*#__PURE__*/React.createElement(ProfileCardLazy, _extends({}, profilecardProps, {
293
287
  actions: filterActions(),
package/dist/esm/styled/Card.js CHANGED
@@ -8,9 +8,9 @@ import { B200, N50A, N60A } from '@atlaskit/theme/colors';
8
8
  import { borderRadius, fontSize, fontSizeSmall, gridSize } from '@atlaskit/theme/constants';
9
9
  import { appLabelBgColor, appLabelTextColor, bgColor, headerBgColor, headerBgColorDisabledUser, headerTextColor, headerTextColorInactive, labelIconColor, labelTextColor } from './constants';
10
10
  var getFullNameMargin = function getFullNameMargin(props) {
11
- return props.noMeta ? "".concat(gridSize() * 4.5, "px 0 ").concat(gridSize() * 1.5, "px 0") : "".concat(gridSize() * 1.5, "px 0 0 0");
11
+ return props.noMeta ? "var(--ds-space-400, 32px)".concat(" 0 ", "var(--ds-space-150, 12px)", " 0") : "var(--ds-space-150, 12px)".concat(" 0 0 0");
12
12
  };
13
- export var CardWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: ", "px;\n width: ", "px;\n"])), bgColor, borderRadius, gridSize() * 45);
13
+ export var CardWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: ", ";\n width: ", "px;\n"])), bgColor, "var(--ds-border-radius, 3px)", gridSize() * 45);
14
14
  export var ProfileImage = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: absolute;\n top: ", ";\n left: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
15
15
  export var ActionsFlexSpacer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 1 0 auto;\n"])));
16
16
  var kudosButtonAnimationTransformation = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n 0% { transform: translate(-80px, -50px); }\n 100% { transform: translate(90px, -70px); }\n"])));
@@ -22,11 +22,9 @@ export var KudosBlobAnimation = function KudosBlobAnimation(props) {
22
22
  };
23
23
  export var AnimationWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n clip-path: inset(0px 0px 0px 0px round ", "px);\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n"])), borderRadius);
24
24
  export var AnimatedKudosButton = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin-left: ", ";\n\n /* Need babel-plugin-emotion to use component selector */\n /* Previously with styled-components: &:hover {KudosBlobAnimation} { */\n &:focus-within .kudos-blob-animation,\n &:focus .kudos-blob-animation,\n &:hover .kudos-blob-animation {\n display: block;\n }\n"])), "var(--ds-space-100, 8px)");
25
- export var ActionButtonGroup = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n user-select: none;\n margin: ", " 0 0 0;\n text-align: right;\n display: flex;\n justify-content: flex-end;\n\n button,\n a {\n position: relative;\n }\n\n button,\n a,\n span {\n margin-left: ", ";\n\n &:first-child {\n margin-left: 0;\n }\n }\n\n a,\n button {\n &:focus {\n outline-color: ", ";\n outline-offset: ", ";\n outline-style: solid;\n outline-width: ", ";\n }\n }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
26
- export var OverflowActionButtonsWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: inline-block;\n width: 32px;\n height: 32px;\n margin-left: ", ";\n\n button {\n &:focus {\n outline-color: ", ";\n outline-offset: ", ";\n outline-style: solid;\n outline-width: ", ";\n }\n }\n"])), "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
25
+ export var ActionButtonGroup = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n user-select: none;\n margin: ", " 0 0 0;\n text-align: right;\n display: flex;\n justify-content: flex-end;\n\n button,\n a {\n position: relative;\n }\n\n button,\n a,\n span {\n margin-left: ", ";\n\n &:first-child {\n margin-left: ", ";\n }\n }\n\n a,\n button {\n &:focus {\n outline-color: ", ";\n outline-offset: ", ";\n outline-style: solid;\n outline-width: ", ";\n }\n }\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-0, 0px)", "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
26
+ export var OverflowActionButtonsWrapper = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n display: inline-block;\n width: ", ";\n height: ", ";\n margin-left: ", ";\n\n button {\n &:focus {\n outline-color: ", ";\n outline-offset: ", ";\n outline-style: solid;\n outline-width: ", ";\n }\n }\n"])), "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-border-width, 2px)", "var(--ds-border-width, 2px)");
27
27
  export var CardContent = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n min-height: ", "px;\n"])), gridSize() * 17);
28
-
29
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
30
28
  export var DetailsGroup = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n margin-left: ", "px;\n width: ", "px;\n"])), gridSize() * 14.5, gridSize() * 24.5);
31
29
  export var DisabledInfo = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n font-size: ", "px;\n color: ", ";\n margin: ", " 0 0 0;\n line-height: 16px;\n"])), fontSizeSmall, labelTextColor, "var(--ds-space-150, 12px)");
32
30
  export var FullNameLabel = styled.h2(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n font-size: 18px;\n font-weight: 400;\n letter-spacing: normal;\n color: ", ";\n margin: ", ";\n line-height: ", "em;\n :first-child {\n margin: ", ";\n }\n"])), function (props) {
package/dist/esm/util/analytics.js CHANGED
@@ -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.11.0"
41
+ packageVersion: "19.11.2"
42
42
  }, attributes), {}, {
43
43
  firedAt: Math.round(getPageTime())
44
44
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/profilecard",
3
- "version": "19.11.0",
3
+ "version": "19.11.2",
4
4
  "description": "A React component to display a card with user information.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -53,7 +53,7 @@
53
53
  },
54
54
  "dependencies": {
55
55
  "@atlaskit/analytics-next": "^9.2.0",
56
- "@atlaskit/avatar": "^21.4.0",
56
+ "@atlaskit/avatar": "^21.5.0",
57
57
  "@atlaskit/avatar-group": "^9.5.0",
58
58
  "@atlaskit/button": "^17.4.0",
59
59
  "@atlaskit/dropdown-menu": "^12.5.0",
@@ -67,7 +67,7 @@
67
67
  "@atlaskit/popup": "^1.12.0",
68
68
  "@atlaskit/spinner": "^16.0.0",
69
69
  "@atlaskit/theme": "^12.6.0",
70
- "@atlaskit/tokens": "^1.37.0",
70
+ "@atlaskit/tokens": "^1.38.0",
71
71
  "@atlaskit/tooltip": "^18.1.0",
72
72
  "@babel/runtime": "^7.0.0",
73
73
  "@emotion/react": "^11.7.1",