@atlaskit/reactions 24.0.1 → 24.2.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 (35) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/analytics/index.js +1 -1
  3. package/dist/cjs/components/ReactionDialog/ReactionView.js +20 -4
  4. package/dist/cjs/components/ReactionDialog/ReactionsDialog.js +83 -37
  5. package/dist/cjs/components/ReactionDialog/ReactionsList.js +4 -2
  6. package/dist/cjs/components/ReactionDialog/styles.js +0 -1
  7. package/dist/cjs/components/Reactions/Reactions.js +10 -3
  8. package/dist/cjs/shared/i18n.js +1 -1
  9. package/dist/es2019/analytics/index.js +1 -1
  10. package/dist/es2019/components/ReactionDialog/ReactionView.js +21 -5
  11. package/dist/es2019/components/ReactionDialog/ReactionsDialog.js +68 -28
  12. package/dist/es2019/components/ReactionDialog/ReactionsList.js +4 -2
  13. package/dist/es2019/components/ReactionDialog/styles.js +0 -1
  14. package/dist/es2019/components/Reactions/Reactions.js +8 -3
  15. package/dist/es2019/shared/i18n.js +2 -2
  16. package/dist/esm/analytics/index.js +1 -1
  17. package/dist/esm/components/ReactionDialog/ReactionView.js +21 -5
  18. package/dist/esm/components/ReactionDialog/ReactionsDialog.js +84 -38
  19. package/dist/esm/components/ReactionDialog/ReactionsList.js +4 -2
  20. package/dist/esm/components/ReactionDialog/styles.js +0 -1
  21. package/dist/esm/components/Reactions/Reactions.js +10 -3
  22. package/dist/esm/shared/i18n.js +1 -1
  23. package/dist/types/components/ReactionDialog/ReactionView.d.ts +3 -2
  24. package/dist/types/components/ReactionDialog/ReactionsDialog.d.ts +3 -2
  25. package/dist/types/components/ReactionDialog/ReactionsList.d.ts +6 -2
  26. package/dist/types/components/Reactions/Reactions.d.ts +6 -2
  27. package/dist/types/types/User.d.ts +1 -0
  28. package/dist/types/types/index.d.ts +15 -0
  29. package/dist/types-ts4.5/components/ReactionDialog/ReactionView.d.ts +3 -2
  30. package/dist/types-ts4.5/components/ReactionDialog/ReactionsDialog.d.ts +3 -2
  31. package/dist/types-ts4.5/components/ReactionDialog/ReactionsList.d.ts +6 -2
  32. package/dist/types-ts4.5/components/Reactions/Reactions.d.ts +6 -2
  33. package/dist/types-ts4.5/types/User.d.ts +1 -0
  34. package/dist/types-ts4.5/types/index.d.ts +18 -0
  35. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/reactions
2
2
 
3
+ ## 24.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#108078](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108078)
8
+ [`d7e3f8c56ff08`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d7e3f8c56ff08) -
9
+ [ux] Adds the profileCardWrapper prop which adds an on-hover interaction to the Avatar picture and
10
+ shows the user's profile card
11
+
12
+ ## 24.1.0
13
+
14
+ ### Minor Changes
15
+
16
+ - [#106745](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/106745)
17
+ [`d3fc0dc988c34`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d3fc0dc988c34) -
18
+ [ux] UI updates to improve spacing and text appearance. Business logic updates on when to render
19
+ dialog entrypoint
20
+
3
21
  ## 24.0.1
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/analytics/index.js CHANGED
@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
11
11
  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; }
12
12
  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; }
13
13
  var packageName = "@atlaskit/reactions";
14
- var packageVersion = "24.0.1";
14
+ var packageVersion = "24.2.0";
15
15
  /**
16
16
  * TODO: move to utility package?
17
17
  * A random sampling function
package/dist/cjs/components/ReactionDialog/ReactionView.js CHANGED
@@ -26,10 +26,14 @@ var _styles = require("./styles");
26
26
 
27
27
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
28
28
 
29
+ var userDescriptionStyle = (0, _primitives.xcss)({
30
+ marginLeft: 'space.200'
31
+ });
29
32
  var ReactionView = exports.ReactionView = function ReactionView(_ref) {
30
33
  var selectedEmojiId = _ref.selectedEmojiId,
31
34
  emojiProvider = _ref.emojiProvider,
32
- reaction = _ref.reaction;
35
+ reaction = _ref.reaction,
36
+ ProfileCardWrapper = _ref.ProfileCardWrapper;
33
37
  var _useState = (0, _react.useState)(''),
34
38
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
35
39
  emojiShortName = _useState2[0],
@@ -85,7 +89,7 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
85
89
  id: selectedEmojiId,
86
90
  shortName: ''
87
91
  },
88
- fitToHeight: 16
92
+ fitToHeight: 24
89
93
  })), alphabeticalNames.length === 0 ?
90
94
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
91
95
  (0, _react2.jsx)("div", {
@@ -104,10 +108,22 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
104
108
  (0, _react2.jsx)("li", {
105
109
  css: _styles.userStyle,
106
110
  key: user.id
111
+ }, ProfileCardWrapper && user.accountId ? (0, _react2.jsx)(ProfileCardWrapper, {
112
+ userId: user.accountId,
113
+ isAnonymous: false,
114
+ canViewProfile: true,
115
+ position: "left-start"
107
116
  }, (0, _react2.jsx)(_Avatar.default, {
108
117
  size: "large",
109
- src: profile
110
- }), (0, _react2.jsx)("span", null, user.displayName))
118
+ src: profile,
119
+ testId: "profile"
120
+ })) : (0, _react2.jsx)(_Avatar.default, {
121
+ size: "large",
122
+ src: profile,
123
+ testId: "profile"
124
+ }), (0, _react2.jsx)(_primitives.Flex, {
125
+ xcss: userDescriptionStyle
126
+ }, (0, _react2.jsx)("div", null, user.displayName)))
111
127
  );
112
128
  })))
113
129
  );
package/dist/cjs/components/ReactionDialog/ReactionsDialog.js CHANGED
@@ -7,12 +7,15 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.ReactionsDialog = exports.RENDER_MODAL_TESTID = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
11
  var _react = require("react");
11
12
  var _reactIntlNext = require("react-intl-next");
12
13
  var _react2 = require("@emotion/react");
13
14
  var _primitives = require("@atlaskit/primitives");
14
15
  var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
16
+ var _heading = _interopRequireDefault(require("@atlaskit/heading"));
15
17
  var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
18
+ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
16
19
  var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-left"));
17
20
  var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-right"));
18
21
  var _constants = require("../../shared/constants");
@@ -29,7 +32,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
29
32
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
30
33
 
31
34
  var fullWidthStyle = (0, _primitives.xcss)({
32
- width: '100%'
35
+ width: '100%',
36
+ padding: 'space.300',
37
+ paddingBlockEnd: 'space.400'
33
38
  });
34
39
 
35
40
  /**
@@ -43,18 +48,70 @@ var getDimensions = function getDimensions(container) {
43
48
  scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
44
49
  };
45
50
  };
46
- var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
51
+ var ReactionsDialogModalHeader = function ReactionsDialogModalHeader(_ref) {
52
+ var totalReactionsCount = _ref.totalReactionsCount,
53
+ handlePreviousPage = _ref.handlePreviousPage,
54
+ handleNextPage = _ref.handleNextPage,
55
+ currentPage = _ref.currentPage,
56
+ maxPages = _ref.maxPages;
57
+ var _useModal = (0, _modalDialog.useModal)(),
58
+ titleId = _useModal.titleId;
59
+ var intl = (0, _reactIntlNext.useIntl)();
60
+ var isSinglePage = maxPages === 1;
61
+ var isOnFirstPage = currentPage === 1;
62
+ var isOnLastPage = currentPage === maxPages;
63
+ return (0, _react2.jsx)(_primitives.Flex, {
64
+ direction: "row",
65
+ justifyContent: "space-between",
66
+ alignItems: "center",
67
+ xcss: fullWidthStyle
68
+ }, (0, _react2.jsx)(_heading.default, {
69
+ size: "medium",
70
+ id: titleId
71
+ }, intl.formatMessage(_i18n.messages.reactionsCount, {
72
+ count: totalReactionsCount
73
+ })), !isSinglePage && (0, _react2.jsx)(_primitives.Flex, {
74
+ alignItems: "center",
75
+ gap: "space.100"
76
+ }, (0, _react2.jsx)(_tooltip.default, {
77
+ content: intl.formatMessage(_i18n.messages.leftNavigateLabel),
78
+ canAppear: function canAppear() {
79
+ return !isOnFirstPage;
80
+ }
81
+ }, function (tooltipProps) {
82
+ return (0, _react2.jsx)(_new.IconButton, (0, _extends2.default)({}, tooltipProps, {
83
+ isDisabled: isOnFirstPage,
84
+ onClick: handlePreviousPage,
85
+ icon: _chevronLeft.default,
86
+ label: intl.formatMessage(_i18n.messages.leftNavigateLabel)
87
+ }));
88
+ }), (0, _react2.jsx)(_tooltip.default, {
89
+ content: intl.formatMessage(_i18n.messages.rightNavigateLabel),
90
+ canAppear: function canAppear() {
91
+ return !isOnLastPage;
92
+ }
93
+ }, function (tooltipProps) {
94
+ return (0, _react2.jsx)(_new.IconButton, (0, _extends2.default)({}, tooltipProps, {
95
+ onClick: handleNextPage,
96
+ isDisabled: isOnLastPage,
97
+ icon: _chevronRight.default,
98
+ label: intl.formatMessage(_i18n.messages.rightNavigateLabel)
99
+ }));
100
+ })));
101
+ };
102
+ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref2) {
47
103
  var _currentReactions$;
48
- var _ref$reactions = _ref.reactions,
49
- reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
50
- _ref$handleCloseReact = _ref.handleCloseReactionsDialog,
51
- handleCloseReactionsDialog = _ref$handleCloseReact === void 0 ? function () {} : _ref$handleCloseReact,
52
- emojiProvider = _ref.emojiProvider,
53
- selectedEmojiId = _ref.selectedEmojiId,
54
- _ref$handleSelectReac = _ref.handleSelectReaction,
55
- handleSelectReaction = _ref$handleSelectReac === void 0 ? function () {} : _ref$handleSelectReac,
56
- _ref$handlePagination = _ref.handlePaginationChange,
57
- handlePaginationChange = _ref$handlePagination === void 0 ? function () {} : _ref$handlePagination;
104
+ var _ref2$reactions = _ref2.reactions,
105
+ reactions = _ref2$reactions === void 0 ? [] : _ref2$reactions,
106
+ _ref2$handleCloseReac = _ref2.handleCloseReactionsDialog,
107
+ handleCloseReactionsDialog = _ref2$handleCloseReac === void 0 ? function () {} : _ref2$handleCloseReac,
108
+ emojiProvider = _ref2.emojiProvider,
109
+ selectedEmojiId = _ref2.selectedEmojiId,
110
+ _ref2$handleSelectRea = _ref2.handleSelectReaction,
111
+ handleSelectReaction = _ref2$handleSelectRea === void 0 ? function () {} : _ref2$handleSelectRea,
112
+ _ref2$handlePaginatio = _ref2.handlePaginationChange,
113
+ handlePaginationChange = _ref2$handlePaginatio === void 0 ? function () {} : _ref2$handlePaginatio,
114
+ ProfileCardWrapper = _ref2.ProfileCardWrapper;
58
115
  var _useState = (0, _react.useState)(),
59
116
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
60
117
  elementToScroll = _useState2[0],
@@ -179,37 +236,26 @@ var ReactionsDialog = exports.ReactionsDialog = function ReactionsDialog(_ref) {
179
236
  onClose: handleCloseReactionsDialog,
180
237
  height: 600,
181
238
  testId: RENDER_MODAL_TESTID
182
- }, (0, _react2.jsx)(_modalDialog.ModalHeader, null, (0, _react2.jsx)(_primitives.Flex, {
183
- direction: "row",
184
- justifyContent: "space-between",
185
- alignItems: "center",
186
- xcss: fullWidthStyle
187
- }, (0, _react2.jsx)("div", null, (0, _react2.jsx)(_modalDialog.ModalTitle, null, intl.formatMessage(_i18n.messages.reactionsCount, {
188
- count: totalReactionsCount
189
- }))), (0, _react2.jsx)(_primitives.Flex, {
190
- alignItems: "center",
191
- gap: "space.100"
192
- }, (0, _react2.jsx)(_new.IconButton, {
193
- isDisabled: currentPage === 1,
194
- onClick: handlePreviousPage,
195
- icon: _chevronLeft.default,
196
- label: intl.formatMessage(_i18n.messages.leftNavigateLabel)
197
- }), (0, _react2.jsx)(_new.IconButton, {
198
- onClick: handleNextPage,
199
- isDisabled: currentPage === maxPages,
200
- icon: _chevronRight.default,
201
- label: intl.formatMessage(_i18n.messages.rightNavigateLabel)
202
- })))), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
239
+ // eslint-disable-next-line jsx-a11y/no-autofocus
240
+ ,
241
+ autoFocus: false
242
+ }, (0, _react2.jsx)(ReactionsDialogModalHeader, {
243
+ totalReactionsCount: totalReactionsCount,
244
+ maxPages: maxPages,
245
+ handlePreviousPage: handlePreviousPage,
246
+ handleNextPage: handleNextPage,
247
+ currentPage: currentPage
248
+ }), (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
203
249
  css: (0, _styles.containerStyle)(reactionsBorderWidth),
204
250
  ref: setRef
205
251
  }, (0, _react2.jsx)(_ReactionsList.ReactionsList, {
206
252
  initialEmojiId: selectedEmojiId,
207
253
  reactions: currentReactions,
208
254
  emojiProvider: emojiProvider,
209
- onReactionChanged: handleSelectReaction
255
+ onReactionChanged: handleSelectReaction,
256
+ ProfileCardWrapper: ProfileCardWrapper
210
257
  }))), (0, _react2.jsx)(_modalDialog.ModalFooter, null, (0, _react2.jsx)(_new.default, {
211
- appearance: "primary",
212
- onClick: handleCloseReactionsDialog,
213
- autoFocus: true
258
+ appearance: "subtle",
259
+ onClick: handleCloseReactionsDialog
214
260
  }, intl.formatMessage(_i18n.messages.closeReactionsDialog))));
215
261
  };
package/dist/cjs/components/ReactionDialog/ReactionsList.js CHANGED
@@ -32,7 +32,8 @@ var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
32
32
  var reactions = _ref.reactions,
33
33
  initialEmojiId = _ref.initialEmojiId,
34
34
  emojiProvider = _ref.emojiProvider,
35
- onReactionChanged = _ref.onReactionChanged;
35
+ onReactionChanged = _ref.onReactionChanged,
36
+ ProfileCardWrapper = _ref.ProfileCardWrapper;
36
37
  var _useState = (0, _react.useState)(function () {
37
38
  // Calculate this only on initialize the List of Tabs and each Reactions View collection
38
39
  return {
@@ -110,7 +111,8 @@ var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
110
111
  key: reaction.emojiId,
111
112
  reaction: reaction,
112
113
  selectedEmojiId: selectedEmoji.id,
113
- emojiProvider: emojiProvider
114
+ emojiProvider: emojiProvider,
115
+ ProfileCardWrapper: ProfileCardWrapper
114
116
  });
115
117
  }));
116
118
  };
package/dist/cjs/components/ReactionDialog/styles.js CHANGED
@@ -110,7 +110,6 @@ var reactionViewStyle = exports.reactionViewStyle = (0, _react.css)({
110
110
  p: {
111
111
  margin: 0,
112
112
  color: "".concat("var(--ds-text, ".concat(_colors.N800, ")")),
113
- textTransform: 'capitalize',
114
113
  font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
115
114
  fontWeight: "var(--ds-font-weight-semibold, 600)",
116
115
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
package/dist/cjs/components/Reactions/Reactions.js CHANGED
@@ -130,7 +130,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
130
130
  _ref$showAddReactionT = _ref.showAddReactionText,
131
131
  showAddReactionText = _ref$showAddReactionT === void 0 ? false : _ref$showAddReactionT,
132
132
  _ref$hideDefaultReact = _ref.hideDefaultReactions,
133
- hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact;
133
+ hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
134
+ ProfileCardWrapper = _ref.ProfileCardWrapper;
134
135
  var _useState = (0, _react.useState)(),
135
136
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
136
137
  selectedEmojiId = _useState2[0],
@@ -293,6 +294,11 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
293
294
  return reactions.concat(items);
294
295
  }, [quickReactionEmojis, reactions, hideDefaultReactions]);
295
296
  var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
297
+
298
+ // criteria to show Reactions Dialog
299
+ var hasEmojiWithFivePlusReactions = reactions.some(function (reaction) {
300
+ return reaction.count >= 5;
301
+ });
296
302
  return (
297
303
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
298
304
  (0, _react2.jsx)("div", {
@@ -345,7 +351,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
345
351
  showOpaqueBackground: showOpaqueBackground,
346
352
  showAddReactionText: showAddReactionText,
347
353
  subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
348
- }), allowUserDialog && reactions.length > 0 && (0, _react2.jsx)(_tooltip.default, {
354
+ }), allowUserDialog && hasEmojiWithFivePlusReactions && (0, _react2.jsx)(_tooltip.default, {
349
355
  content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReactedTooltip),
350
356
  hideTooltipOnClick: true
351
357
  }, (0, _react2.jsx)(_standardButton.default
@@ -365,7 +371,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
365
371
  emojiProvider: emojiProvider,
366
372
  handleCloseReactionsDialog: handleCloseReactionsDialog,
367
373
  handleSelectReaction: handleSelectReactionInDialog,
368
- handlePaginationChange: handlePaginationChange
374
+ handlePaginationChange: handlePaginationChange,
375
+ ProfileCardWrapper: ProfileCardWrapper
369
376
  })))
370
377
  );
371
378
  });
package/dist/cjs/shared/i18n.js CHANGED
@@ -53,7 +53,7 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
53
53
  },
54
54
  reactionsCount: {
55
55
  id: 'reactions.dialog.reactions.count',
56
- defaultMessage: "{count, plural,\n one {# reaction}\n other {# reactions}\n }",
56
+ defaultMessage: "{count, plural,\n one {# total reaction}\n other {# total reactions}\n }",
57
57
  description: 'The count of Reactions displayed in Reactions Dialog'
58
58
  },
59
59
  leftNavigateLabel: {
package/dist/es2019/analytics/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { createAndFireEvent } from '@atlaskit/analytics-next';
2
2
  import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
3
3
  const packageName = "@atlaskit/reactions";
4
- const packageVersion = "24.0.1";
4
+ const packageVersion = "24.2.0";
5
5
  /**
6
6
  * TODO: move to utility package?
7
7
  * A random sampling function
package/dist/es2019/components/ReactionDialog/ReactionView.js CHANGED
@@ -11,13 +11,17 @@ import { ResourcedEmoji } from '@atlaskit/emoji/element';
11
11
  import Avatar from '@atlaskit/avatar/Avatar';
12
12
  import Spinner from '@atlaskit/spinner';
13
13
  import { useTabPanel } from '@atlaskit/tabs';
14
- import { Text } from '@atlaskit/primitives';
14
+ import { Text, Flex, xcss } from '@atlaskit/primitives';
15
15
  import { messages } from '../../shared/i18n';
16
16
  import { reactionViewStyle, userListStyle, userStyle, centerSpinner } from './styles';
17
+ const userDescriptionStyle = xcss({
18
+ marginLeft: 'space.200'
19
+ });
17
20
  export const ReactionView = ({
18
21
  selectedEmojiId,
19
22
  emojiProvider,
20
- reaction
23
+ reaction,
24
+ ProfileCardWrapper
21
25
  }) => {
22
26
  const [emojiShortName, setEmojiShortName] = useState('');
23
27
  useEffect(() => {
@@ -54,7 +58,7 @@ export const ReactionView = ({
54
58
  id: selectedEmojiId,
55
59
  shortName: ''
56
60
  },
57
- fitToHeight: 16
61
+ fitToHeight: 24
58
62
  })), alphabeticalNames.length === 0 ?
59
63
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
60
64
  jsx("div", {
@@ -73,10 +77,22 @@ export const ReactionView = ({
73
77
  jsx("li", {
74
78
  css: userStyle,
75
79
  key: user.id
80
+ }, ProfileCardWrapper && user.accountId ? jsx(ProfileCardWrapper, {
81
+ userId: user.accountId,
82
+ isAnonymous: false,
83
+ canViewProfile: true,
84
+ position: "left-start"
76
85
  }, jsx(Avatar, {
77
86
  size: "large",
78
- src: profile
79
- }), jsx("span", null, user.displayName))
87
+ src: profile,
88
+ testId: "profile"
89
+ })) : jsx(Avatar, {
90
+ size: "large",
91
+ src: profile,
92
+ testId: "profile"
93
+ }), jsx(Flex, {
94
+ xcss: userDescriptionStyle
95
+ }, jsx("div", null, user.displayName)))
80
96
  );
81
97
  })))
82
98
  );
package/dist/es2019/components/ReactionDialog/ReactionsDialog.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  /**
2
3
  * @jsxRuntime classic
3
4
  * @jsx jsx
@@ -8,7 +9,9 @@ import { useIntl } from 'react-intl-next';
8
9
  import { jsx } from '@emotion/react';
9
10
  import { Flex, xcss } from '@atlaskit/primitives';
10
11
  import Button, { IconButton } from '@atlaskit/button/new';
11
- import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
12
+ import Heading from '@atlaskit/heading';
13
+ import Modal, { ModalBody, ModalFooter, useModal } from '@atlaskit/modal-dialog';
14
+ import Tooltip from '@atlaskit/tooltip';
12
15
  import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
13
16
  import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
14
17
  import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
@@ -16,7 +19,9 @@ import { messages } from '../../shared/i18n';
16
19
  import { ReactionsList } from './ReactionsList';
17
20
  import { containerStyle } from './styles';
18
21
  const fullWidthStyle = xcss({
19
- width: '100%'
22
+ width: '100%',
23
+ padding: 'space.300',
24
+ paddingBlockEnd: 'space.400'
20
25
  });
21
26
 
22
27
  /**
@@ -30,13 +35,59 @@ const getDimensions = container => {
30
35
  scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
31
36
  };
32
37
  };
38
+ const ReactionsDialogModalHeader = ({
39
+ totalReactionsCount,
40
+ handlePreviousPage,
41
+ handleNextPage,
42
+ currentPage,
43
+ maxPages
44
+ }) => {
45
+ const {
46
+ titleId
47
+ } = useModal();
48
+ const intl = useIntl();
49
+ const isSinglePage = maxPages === 1;
50
+ const isOnFirstPage = currentPage === 1;
51
+ const isOnLastPage = currentPage === maxPages;
52
+ return jsx(Flex, {
53
+ direction: "row",
54
+ justifyContent: "space-between",
55
+ alignItems: "center",
56
+ xcss: fullWidthStyle
57
+ }, jsx(Heading, {
58
+ size: "medium",
59
+ id: titleId
60
+ }, intl.formatMessage(messages.reactionsCount, {
61
+ count: totalReactionsCount
62
+ })), !isSinglePage && jsx(Flex, {
63
+ alignItems: "center",
64
+ gap: "space.100"
65
+ }, jsx(Tooltip, {
66
+ content: intl.formatMessage(messages.leftNavigateLabel),
67
+ canAppear: () => !isOnFirstPage
68
+ }, tooltipProps => jsx(IconButton, _extends({}, tooltipProps, {
69
+ isDisabled: isOnFirstPage,
70
+ onClick: handlePreviousPage,
71
+ icon: ChevronLeftIcon,
72
+ label: intl.formatMessage(messages.leftNavigateLabel)
73
+ }))), jsx(Tooltip, {
74
+ content: intl.formatMessage(messages.rightNavigateLabel),
75
+ canAppear: () => !isOnLastPage
76
+ }, tooltipProps => jsx(IconButton, _extends({}, tooltipProps, {
77
+ onClick: handleNextPage,
78
+ isDisabled: isOnLastPage,
79
+ icon: ChevronRightIcon,
80
+ label: intl.formatMessage(messages.rightNavigateLabel)
81
+ })))));
82
+ };
33
83
  export const ReactionsDialog = ({
34
84
  reactions = [],
35
85
  handleCloseReactionsDialog = () => {},
36
86
  emojiProvider,
37
87
  selectedEmojiId,
38
88
  handleSelectReaction = () => {},
39
- handlePaginationChange = () => {}
89
+ handlePaginationChange = () => {},
90
+ ProfileCardWrapper
40
91
  }) => {
41
92
  var _currentReactions$;
42
93
  const [elementToScroll, setElementToScroll] = useState();
@@ -149,37 +200,26 @@ export const ReactionsDialog = ({
149
200
  onClose: handleCloseReactionsDialog,
150
201
  height: 600,
151
202
  testId: RENDER_MODAL_TESTID
152
- }, jsx(ModalHeader, null, jsx(Flex, {
153
- direction: "row",
154
- justifyContent: "space-between",
155
- alignItems: "center",
156
- xcss: fullWidthStyle
157
- }, jsx("div", null, jsx(ModalTitle, null, intl.formatMessage(messages.reactionsCount, {
158
- count: totalReactionsCount
159
- }))), jsx(Flex, {
160
- alignItems: "center",
161
- gap: "space.100"
162
- }, jsx(IconButton, {
163
- isDisabled: currentPage === 1,
164
- onClick: handlePreviousPage,
165
- icon: ChevronLeftIcon,
166
- label: intl.formatMessage(messages.leftNavigateLabel)
167
- }), jsx(IconButton, {
168
- onClick: handleNextPage,
169
- isDisabled: currentPage === maxPages,
170
- icon: ChevronRightIcon,
171
- label: intl.formatMessage(messages.rightNavigateLabel)
172
- })))), jsx(ModalBody, null, jsx("div", {
203
+ // eslint-disable-next-line jsx-a11y/no-autofocus
204
+ ,
205
+ autoFocus: false
206
+ }, jsx(ReactionsDialogModalHeader, {
207
+ totalReactionsCount: totalReactionsCount,
208
+ maxPages: maxPages,
209
+ handlePreviousPage: handlePreviousPage,
210
+ handleNextPage: handleNextPage,
211
+ currentPage: currentPage
212
+ }), jsx(ModalBody, null, jsx("div", {
173
213
  css: containerStyle(reactionsBorderWidth),
174
214
  ref: setRef
175
215
  }, jsx(ReactionsList, {
176
216
  initialEmojiId: selectedEmojiId,
177
217
  reactions: currentReactions,
178
218
  emojiProvider: emojiProvider,
179
- onReactionChanged: handleSelectReaction
219
+ onReactionChanged: handleSelectReaction,
220
+ ProfileCardWrapper: ProfileCardWrapper
180
221
  }))), jsx(ModalFooter, null, jsx(Button, {
181
- appearance: "primary",
182
- onClick: handleCloseReactionsDialog,
183
- autoFocus: true
222
+ appearance: "subtle",
223
+ onClick: handleCloseReactionsDialog
184
224
  }, intl.formatMessage(messages.closeReactionsDialog))));
185
225
  };
package/dist/es2019/components/ReactionDialog/ReactionsList.js CHANGED
@@ -19,7 +19,8 @@ export const ReactionsList = ({
19
19
  reactions,
20
20
  initialEmojiId,
21
21
  emojiProvider,
22
- onReactionChanged
22
+ onReactionChanged,
23
+ ProfileCardWrapper
23
24
  }) => {
24
25
  const [selectedEmoji, setSelectedEmoji] = useState(() => {
25
26
  // Calculate this only on initialize the List of Tabs and each Reactions View collection
@@ -91,6 +92,7 @@ export const ReactionsList = ({
91
92
  key: reaction.emojiId,
92
93
  reaction: reaction,
93
94
  selectedEmojiId: selectedEmoji.id,
94
- emojiProvider: emojiProvider
95
+ emojiProvider: emojiProvider,
96
+ ProfileCardWrapper: ProfileCardWrapper
95
97
  })));
96
98
  };
package/dist/es2019/components/ReactionDialog/styles.js CHANGED
@@ -97,7 +97,6 @@ export const reactionViewStyle = css({
97
97
  p: {
98
98
  margin: 0,
99
99
  color: `${`var(--ds-text, ${N800})`}`,
100
- textTransform: 'capitalize',
101
100
  font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
102
101
  fontWeight: "var(--ds-font-weight-semibold, 600)",
103
102
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
package/dist/es2019/components/Reactions/Reactions.js CHANGED
@@ -100,7 +100,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
100
100
  showOpaqueBackground = false,
101
101
  subtleReactionsSummaryAndPicker = false,
102
102
  showAddReactionText = false,
103
- hideDefaultReactions = false
103
+ hideDefaultReactions = false,
104
+ ProfileCardWrapper
104
105
  }) => {
105
106
  const [selectedEmojiId, setSelectedEmojiId] = useState();
106
107
  const {
@@ -258,6 +259,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
258
259
  return reactions.concat(items);
259
260
  }, [quickReactionEmojis, reactions, hideDefaultReactions]);
260
261
  const shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
262
+
263
+ // criteria to show Reactions Dialog
264
+ const hasEmojiWithFivePlusReactions = reactions.some(reaction => reaction.count >= 5);
261
265
  return (
262
266
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
263
267
  jsx("div", {
@@ -308,7 +312,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
308
312
  showOpaqueBackground: showOpaqueBackground,
309
313
  showAddReactionText: showAddReactionText,
310
314
  subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
311
- }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
315
+ }), allowUserDialog && hasEmojiWithFivePlusReactions && jsx(Tooltip, {
312
316
  content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
313
317
  hideTooltipOnClick: true
314
318
  }, jsx(Button
@@ -328,7 +332,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
328
332
  emojiProvider: emojiProvider,
329
333
  handleCloseReactionsDialog: handleCloseReactionsDialog,
330
334
  handleSelectReaction: handleSelectReactionInDialog,
331
- handlePaginationChange: handlePaginationChange
335
+ handlePaginationChange: handlePaginationChange,
336
+ ProfileCardWrapper: ProfileCardWrapper
332
337
  })))
333
338
  );
334
339
  });
package/dist/es2019/shared/i18n.js CHANGED
@@ -48,8 +48,8 @@ export const messages = defineMessages({
48
48
  reactionsCount: {
49
49
  id: 'reactions.dialog.reactions.count',
50
50
  defaultMessage: `{count, plural,
51
- one {# reaction}
52
- other {# reactions}
51
+ one {# total reaction}
52
+ other {# total reactions}
53
53
  }`,
54
54
  description: 'The count of Reactions displayed in Reactions Dialog'
55
55
  },
package/dist/esm/analytics/index.js CHANGED
@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
4
4
  import { createAndFireEvent } from '@atlaskit/analytics-next';
5
5
  import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
6
6
  var packageName = "@atlaskit/reactions";
7
- var packageVersion = "24.0.1";
7
+ var packageVersion = "24.2.0";
8
8
  /**
9
9
  * TODO: move to utility package?
10
10
  * A random sampling function
package/dist/esm/components/ReactionDialog/ReactionView.js CHANGED
@@ -14,13 +14,17 @@ import { ResourcedEmoji } from '@atlaskit/emoji/element';
14
14
  import Avatar from '@atlaskit/avatar/Avatar';
15
15
  import Spinner from '@atlaskit/spinner';
16
16
  import { useTabPanel } from '@atlaskit/tabs';
17
- import { Text } from '@atlaskit/primitives';
17
+ import { Text, Flex, xcss } from '@atlaskit/primitives';
18
18
  import { messages } from '../../shared/i18n';
19
19
  import { reactionViewStyle, userListStyle, userStyle, centerSpinner } from './styles';
20
+ var userDescriptionStyle = xcss({
21
+ marginLeft: 'space.200'
22
+ });
20
23
  export var ReactionView = function ReactionView(_ref) {
21
24
  var selectedEmojiId = _ref.selectedEmojiId,
22
25
  emojiProvider = _ref.emojiProvider,
23
- reaction = _ref.reaction;
26
+ reaction = _ref.reaction,
27
+ ProfileCardWrapper = _ref.ProfileCardWrapper;
24
28
  var _useState = useState(''),
25
29
  _useState2 = _slicedToArray(_useState, 2),
26
30
  emojiShortName = _useState2[0],
@@ -76,7 +80,7 @@ export var ReactionView = function ReactionView(_ref) {
76
80
  id: selectedEmojiId,
77
81
  shortName: ''
78
82
  },
79
- fitToHeight: 16
83
+ fitToHeight: 24
80
84
  })), alphabeticalNames.length === 0 ?
81
85
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
82
86
  jsx("div", {
@@ -95,10 +99,22 @@ export var ReactionView = function ReactionView(_ref) {
95
99
  jsx("li", {
96
100
  css: userStyle,
97
101
  key: user.id
102
+ }, ProfileCardWrapper && user.accountId ? jsx(ProfileCardWrapper, {
103
+ userId: user.accountId,
104
+ isAnonymous: false,
105
+ canViewProfile: true,
106
+ position: "left-start"
98
107
  }, jsx(Avatar, {
99
108
  size: "large",
100
- src: profile
101
- }), jsx("span", null, user.displayName))
109
+ src: profile,
110
+ testId: "profile"
111
+ })) : jsx(Avatar, {
112
+ size: "large",
113
+ src: profile,
114
+ testId: "profile"
115
+ }), jsx(Flex, {
116
+ xcss: userDescriptionStyle
117
+ }, jsx("div", null, user.displayName)))
102
118
  );
103
119
  })))
104
120
  );
package/dist/esm/components/ReactionDialog/ReactionsDialog.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ import _extends from "@babel/runtime/helpers/extends";
2
3
  /**
3
4
  * @jsxRuntime classic
4
5
  * @jsx jsx
@@ -9,7 +10,9 @@ import { useIntl } from 'react-intl-next';
9
10
  import { jsx } from '@emotion/react';
10
11
  import { Flex, xcss } from '@atlaskit/primitives';
11
12
  import Button, { IconButton } from '@atlaskit/button/new';
12
- import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
13
+ import Heading from '@atlaskit/heading';
14
+ import Modal, { ModalBody, ModalFooter, useModal } from '@atlaskit/modal-dialog';
15
+ import Tooltip from '@atlaskit/tooltip';
13
16
  import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
14
17
  import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
15
18
  import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
@@ -17,7 +20,9 @@ import { messages } from '../../shared/i18n';
17
20
  import { ReactionsList } from './ReactionsList';
18
21
  import { containerStyle } from './styles';
19
22
  var fullWidthStyle = xcss({
20
- width: '100%'
23
+ width: '100%',
24
+ padding: 'space.300',
25
+ paddingBlockEnd: 'space.400'
21
26
  });
22
27
 
23
28
  /**
@@ -31,18 +36,70 @@ var getDimensions = function getDimensions(container) {
31
36
  scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
32
37
  };
33
38
  };
34
- export var ReactionsDialog = function ReactionsDialog(_ref) {
39
+ var ReactionsDialogModalHeader = function ReactionsDialogModalHeader(_ref) {
40
+ var totalReactionsCount = _ref.totalReactionsCount,
41
+ handlePreviousPage = _ref.handlePreviousPage,
42
+ handleNextPage = _ref.handleNextPage,
43
+ currentPage = _ref.currentPage,
44
+ maxPages = _ref.maxPages;
45
+ var _useModal = useModal(),
46
+ titleId = _useModal.titleId;
47
+ var intl = useIntl();
48
+ var isSinglePage = maxPages === 1;
49
+ var isOnFirstPage = currentPage === 1;
50
+ var isOnLastPage = currentPage === maxPages;
51
+ return jsx(Flex, {
52
+ direction: "row",
53
+ justifyContent: "space-between",
54
+ alignItems: "center",
55
+ xcss: fullWidthStyle
56
+ }, jsx(Heading, {
57
+ size: "medium",
58
+ id: titleId
59
+ }, intl.formatMessage(messages.reactionsCount, {
60
+ count: totalReactionsCount
61
+ })), !isSinglePage && jsx(Flex, {
62
+ alignItems: "center",
63
+ gap: "space.100"
64
+ }, jsx(Tooltip, {
65
+ content: intl.formatMessage(messages.leftNavigateLabel),
66
+ canAppear: function canAppear() {
67
+ return !isOnFirstPage;
68
+ }
69
+ }, function (tooltipProps) {
70
+ return jsx(IconButton, _extends({}, tooltipProps, {
71
+ isDisabled: isOnFirstPage,
72
+ onClick: handlePreviousPage,
73
+ icon: ChevronLeftIcon,
74
+ label: intl.formatMessage(messages.leftNavigateLabel)
75
+ }));
76
+ }), jsx(Tooltip, {
77
+ content: intl.formatMessage(messages.rightNavigateLabel),
78
+ canAppear: function canAppear() {
79
+ return !isOnLastPage;
80
+ }
81
+ }, function (tooltipProps) {
82
+ return jsx(IconButton, _extends({}, tooltipProps, {
83
+ onClick: handleNextPage,
84
+ isDisabled: isOnLastPage,
85
+ icon: ChevronRightIcon,
86
+ label: intl.formatMessage(messages.rightNavigateLabel)
87
+ }));
88
+ })));
89
+ };
90
+ export var ReactionsDialog = function ReactionsDialog(_ref2) {
35
91
  var _currentReactions$;
36
- var _ref$reactions = _ref.reactions,
37
- reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
38
- _ref$handleCloseReact = _ref.handleCloseReactionsDialog,
39
- handleCloseReactionsDialog = _ref$handleCloseReact === void 0 ? function () {} : _ref$handleCloseReact,
40
- emojiProvider = _ref.emojiProvider,
41
- selectedEmojiId = _ref.selectedEmojiId,
42
- _ref$handleSelectReac = _ref.handleSelectReaction,
43
- handleSelectReaction = _ref$handleSelectReac === void 0 ? function () {} : _ref$handleSelectReac,
44
- _ref$handlePagination = _ref.handlePaginationChange,
45
- handlePaginationChange = _ref$handlePagination === void 0 ? function () {} : _ref$handlePagination;
92
+ var _ref2$reactions = _ref2.reactions,
93
+ reactions = _ref2$reactions === void 0 ? [] : _ref2$reactions,
94
+ _ref2$handleCloseReac = _ref2.handleCloseReactionsDialog,
95
+ handleCloseReactionsDialog = _ref2$handleCloseReac === void 0 ? function () {} : _ref2$handleCloseReac,
96
+ emojiProvider = _ref2.emojiProvider,
97
+ selectedEmojiId = _ref2.selectedEmojiId,
98
+ _ref2$handleSelectRea = _ref2.handleSelectReaction,
99
+ handleSelectReaction = _ref2$handleSelectRea === void 0 ? function () {} : _ref2$handleSelectRea,
100
+ _ref2$handlePaginatio = _ref2.handlePaginationChange,
101
+ handlePaginationChange = _ref2$handlePaginatio === void 0 ? function () {} : _ref2$handlePaginatio,
102
+ ProfileCardWrapper = _ref2.ProfileCardWrapper;
46
103
  var _useState = useState(),
47
104
  _useState2 = _slicedToArray(_useState, 2),
48
105
  elementToScroll = _useState2[0],
@@ -167,37 +224,26 @@ export var ReactionsDialog = function ReactionsDialog(_ref) {
167
224
  onClose: handleCloseReactionsDialog,
168
225
  height: 600,
169
226
  testId: RENDER_MODAL_TESTID
170
- }, jsx(ModalHeader, null, jsx(Flex, {
171
- direction: "row",
172
- justifyContent: "space-between",
173
- alignItems: "center",
174
- xcss: fullWidthStyle
175
- }, jsx("div", null, jsx(ModalTitle, null, intl.formatMessage(messages.reactionsCount, {
176
- count: totalReactionsCount
177
- }))), jsx(Flex, {
178
- alignItems: "center",
179
- gap: "space.100"
180
- }, jsx(IconButton, {
181
- isDisabled: currentPage === 1,
182
- onClick: handlePreviousPage,
183
- icon: ChevronLeftIcon,
184
- label: intl.formatMessage(messages.leftNavigateLabel)
185
- }), jsx(IconButton, {
186
- onClick: handleNextPage,
187
- isDisabled: currentPage === maxPages,
188
- icon: ChevronRightIcon,
189
- label: intl.formatMessage(messages.rightNavigateLabel)
190
- })))), jsx(ModalBody, null, jsx("div", {
227
+ // eslint-disable-next-line jsx-a11y/no-autofocus
228
+ ,
229
+ autoFocus: false
230
+ }, jsx(ReactionsDialogModalHeader, {
231
+ totalReactionsCount: totalReactionsCount,
232
+ maxPages: maxPages,
233
+ handlePreviousPage: handlePreviousPage,
234
+ handleNextPage: handleNextPage,
235
+ currentPage: currentPage
236
+ }), jsx(ModalBody, null, jsx("div", {
191
237
  css: containerStyle(reactionsBorderWidth),
192
238
  ref: setRef
193
239
  }, jsx(ReactionsList, {
194
240
  initialEmojiId: selectedEmojiId,
195
241
  reactions: currentReactions,
196
242
  emojiProvider: emojiProvider,
197
- onReactionChanged: handleSelectReaction
243
+ onReactionChanged: handleSelectReaction,
244
+ ProfileCardWrapper: ProfileCardWrapper
198
245
  }))), jsx(ModalFooter, null, jsx(Button, {
199
- appearance: "primary",
200
- onClick: handleCloseReactionsDialog,
201
- autoFocus: true
246
+ appearance: "subtle",
247
+ onClick: handleCloseReactionsDialog
202
248
  }, intl.formatMessage(messages.closeReactionsDialog))));
203
249
  };
package/dist/esm/components/ReactionDialog/ReactionsList.js CHANGED
@@ -20,7 +20,8 @@ export var ReactionsList = function ReactionsList(_ref) {
20
20
  var reactions = _ref.reactions,
21
21
  initialEmojiId = _ref.initialEmojiId,
22
22
  emojiProvider = _ref.emojiProvider,
23
- onReactionChanged = _ref.onReactionChanged;
23
+ onReactionChanged = _ref.onReactionChanged,
24
+ ProfileCardWrapper = _ref.ProfileCardWrapper;
24
25
  var _useState = useState(function () {
25
26
  // Calculate this only on initialize the List of Tabs and each Reactions View collection
26
27
  return {
@@ -98,7 +99,8 @@ export var ReactionsList = function ReactionsList(_ref) {
98
99
  key: reaction.emojiId,
99
100
  reaction: reaction,
100
101
  selectedEmojiId: selectedEmoji.id,
101
- emojiProvider: emojiProvider
102
+ emojiProvider: emojiProvider,
103
+ ProfileCardWrapper: ProfileCardWrapper
102
104
  });
103
105
  }));
104
106
  };
package/dist/esm/components/ReactionDialog/styles.js CHANGED
@@ -103,7 +103,6 @@ export var reactionViewStyle = css({
103
103
  p: {
104
104
  margin: 0,
105
105
  color: "".concat("var(--ds-text, ".concat(N800, ")")),
106
- textTransform: 'capitalize',
107
106
  font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
108
107
  fontWeight: "var(--ds-font-weight-semibold, 600)",
109
108
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
package/dist/esm/components/Reactions/Reactions.js CHANGED
@@ -117,7 +117,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
117
117
  _ref$showAddReactionT = _ref.showAddReactionText,
118
118
  showAddReactionText = _ref$showAddReactionT === void 0 ? false : _ref$showAddReactionT,
119
119
  _ref$hideDefaultReact = _ref.hideDefaultReactions,
120
- hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact;
120
+ hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact,
121
+ ProfileCardWrapper = _ref.ProfileCardWrapper;
121
122
  var _useState = useState(),
122
123
  _useState2 = _slicedToArray(_useState, 2),
123
124
  selectedEmojiId = _useState2[0],
@@ -280,6 +281,11 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
280
281
  return reactions.concat(items);
281
282
  }, [quickReactionEmojis, reactions, hideDefaultReactions]);
282
283
  var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
284
+
285
+ // criteria to show Reactions Dialog
286
+ var hasEmojiWithFivePlusReactions = reactions.some(function (reaction) {
287
+ return reaction.count >= 5;
288
+ });
283
289
  return (
284
290
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
285
291
  jsx("div", {
@@ -332,7 +338,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
332
338
  showOpaqueBackground: showOpaqueBackground,
333
339
  showAddReactionText: showAddReactionText,
334
340
  subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
335
- }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
341
+ }), allowUserDialog && hasEmojiWithFivePlusReactions && jsx(Tooltip, {
336
342
  content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
337
343
  hideTooltipOnClick: true
338
344
  }, jsx(Button
@@ -352,7 +358,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
352
358
  emojiProvider: emojiProvider,
353
359
  handleCloseReactionsDialog: handleCloseReactionsDialog,
354
360
  handleSelectReaction: handleSelectReactionInDialog,
355
- handlePaginationChange: handlePaginationChange
361
+ handlePaginationChange: handlePaginationChange,
362
+ ProfileCardWrapper: ProfileCardWrapper
356
363
  })))
357
364
  );
358
365
  });
package/dist/esm/shared/i18n.js CHANGED
@@ -47,7 +47,7 @@ export var messages = defineMessages({
47
47
  },
48
48
  reactionsCount: {
49
49
  id: 'reactions.dialog.reactions.count',
50
- defaultMessage: "{count, plural,\n one {# reaction}\n other {# reactions}\n }",
50
+ defaultMessage: "{count, plural,\n one {# total reaction}\n other {# total reactions}\n }",
51
51
  description: 'The count of Reactions displayed in Reactions Dialog'
52
52
  },
53
53
  leftNavigateLabel: {
package/dist/types/components/ReactionDialog/ReactionView.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { type EmojiProvider } from '@atlaskit/emoji/resource';
3
- import { type ReactionSummary } from '../../types';
3
+ import { type ReactionSummary, type ProfileCardWrapper } from '../../types';
4
4
  export interface ReactionViewProps {
5
5
  /**
6
6
  * Selected reaction to get user data from
@@ -14,5 +14,6 @@ export interface ReactionViewProps {
14
14
  * Provider for loading emojis
15
15
  */
16
16
  emojiProvider: Promise<EmojiProvider>;
17
+ ProfileCardWrapper?: ProfileCardWrapper;
17
18
  }
18
- export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction }: ReactionViewProps) => jsx.JSX.Element;
19
+ export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction, ProfileCardWrapper, }: ReactionViewProps) => jsx.JSX.Element;
package/dist/types/components/ReactionDialog/ReactionsDialog.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { type EmojiProvider } from '@atlaskit/emoji/resource';
3
3
  import { type OnCloseHandler } from '@atlaskit/modal-dialog';
4
- import { type onDialogSelectReactionChange, type ReactionSummary } from '../../types';
4
+ import { type onDialogSelectReactionChange, type ReactionSummary, type ProfileCardWrapper } from '../../types';
5
5
  /**
6
6
  * Test id for the Reactions modal dialog
7
7
  */
@@ -28,5 +28,6 @@ export interface ReactionsDialogProps {
28
28
  */
29
29
  handleSelectReaction?: onDialogSelectReactionChange;
30
30
  handlePaginationChange?: (emojiId: string) => void;
31
+ ProfileCardWrapper?: ProfileCardWrapper;
31
32
  }
32
- export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, }: ReactionsDialogProps) => jsx.JSX.Element;
33
+ export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, ProfileCardWrapper, }: ReactionsDialogProps) => jsx.JSX.Element;
package/dist/types/components/ReactionDialog/ReactionsList.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { type EmojiProvider } from '@atlaskit/emoji/resource';
3
- import { type onDialogSelectReactionChange, type ReactionSummary } from '../../types';
3
+ import { type onDialogSelectReactionChange, type ReactionSummary, type ProfileCardWrapper } from '../../types';
4
4
  export interface ReactionsListProps {
5
5
  /**
6
6
  * Sorted list of reactions to render in list
@@ -18,5 +18,9 @@ export interface ReactionsListProps {
18
18
  * Function to handle clicking on an emoji from the list
19
19
  */
20
20
  onReactionChanged: onDialogSelectReactionChange;
21
+ /**
22
+ * A functional component from Confluence to show a profile card on hover
23
+ */
24
+ ProfileCardWrapper?: ProfileCardWrapper;
21
25
  }
22
- export declare const ReactionsList: ({ reactions, initialEmojiId, emojiProvider, onReactionChanged, }: ReactionsListProps) => jsx.JSX.Element;
26
+ export declare const ReactionsList: ({ reactions, initialEmojiId, emojiProvider, onReactionChanged, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;
package/dist/types/components/Reactions/Reactions.d.ts CHANGED
@@ -6,7 +6,7 @@ import React from 'react';
6
6
  import { jsx } from '@emotion/react';
7
7
  import { type OnCloseHandler } from '@atlaskit/modal-dialog';
8
8
  import { type Placement } from '@atlaskit/popper';
9
- import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary } from '../../types';
9
+ import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary, type ProfileCardWrapper } from '../../types';
10
10
  import { type ReactionProps } from '../Reaction';
11
11
  import { type ReactionPickerProps } from '../ReactionPicker';
12
12
  import { type SelectorProps } from '../Selector';
@@ -126,6 +126,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
126
126
  * Optional prop for hiding default reactions displayed when there are no existing reactions
127
127
  */
128
128
  hideDefaultReactions?: boolean;
129
+ /**
130
+ * Optional prop for rendering a profile card wrapper in the Reactions Dialog
131
+ */
132
+ ProfileCardWrapper?: ProfileCardWrapper;
129
133
  }
130
134
  /**
131
135
  * Get content of the tooltip
@@ -134,4 +138,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
134
138
  /**
135
139
  * Renders list of reactions
136
140
  */
137
- export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, }: ReactionsProps) => jsx.JSX.Element>;
141
+ export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, }: ReactionsProps) => jsx.JSX.Element>;
package/dist/types/types/User.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface User {
11
11
  * optional path to a user profile picture
12
12
  */
13
13
  profilePicture?: ProfilePicture;
14
+ accountId?: string;
14
15
  }
15
16
  /**
16
17
  * Type defining the path to a user profile picture
package/dist/types/types/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { ReactNode } from 'react';
1
2
  export type { ReactionAction, Actions } from './Actions';
2
3
  export { ReactionStatus, ReactionUpdateType } from './reaction';
3
4
  export type { ReactionSource, ReactionsError, ReactionsLoading, ReactionsReadyState, ReactionsState, ReactionSummary, ReactionFocused, QuickReactionEmojiSummary, ReactionsNotLoaded, Reactions, ReactionClick, ReactionMouseEnter, onDialogSelectReactionChange, } from './reaction';
@@ -5,3 +6,17 @@ export type { Client, Request } from './client';
5
6
  export type { Updater } from './Updater';
6
7
  export type { User } from './User';
7
8
  export type { Store, StorePropInput, State, OnChangeCallback } from './store';
9
+ type TriggerPosition = 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'top-end' | 'top' | 'top-start' | 'right-end' | 'right' | 'right-start';
10
+ type ProfileCardWrapperProps = {
11
+ userId?: string | null;
12
+ position?: TriggerPosition;
13
+ isAnonymous?: boolean;
14
+ canViewProfile?: boolean;
15
+ children: ReactNode;
16
+ fullName?: string;
17
+ disabledAriaAttributes?: boolean;
18
+ onVisibilityChange?: (isVisible: boolean) => void;
19
+ offset?: [number, number];
20
+ ariaLabel?: string;
21
+ };
22
+ export type ProfileCardWrapper = React.ComponentType<ProfileCardWrapperProps>;
package/dist/types-ts4.5/components/ReactionDialog/ReactionView.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { type EmojiProvider } from '@atlaskit/emoji/resource';
3
- import { type ReactionSummary } from '../../types';
3
+ import { type ReactionSummary, type ProfileCardWrapper } from '../../types';
4
4
  export interface ReactionViewProps {
5
5
  /**
6
6
  * Selected reaction to get user data from
@@ -14,5 +14,6 @@ export interface ReactionViewProps {
14
14
  * Provider for loading emojis
15
15
  */
16
16
  emojiProvider: Promise<EmojiProvider>;
17
+ ProfileCardWrapper?: ProfileCardWrapper;
17
18
  }
18
- export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction }: ReactionViewProps) => jsx.JSX.Element;
19
+ export declare const ReactionView: ({ selectedEmojiId, emojiProvider, reaction, ProfileCardWrapper, }: ReactionViewProps) => jsx.JSX.Element;
package/dist/types-ts4.5/components/ReactionDialog/ReactionsDialog.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { type EmojiProvider } from '@atlaskit/emoji/resource';
3
3
  import { type OnCloseHandler } from '@atlaskit/modal-dialog';
4
- import { type onDialogSelectReactionChange, type ReactionSummary } from '../../types';
4
+ import { type onDialogSelectReactionChange, type ReactionSummary, type ProfileCardWrapper } from '../../types';
5
5
  /**
6
6
  * Test id for the Reactions modal dialog
7
7
  */
@@ -28,5 +28,6 @@ export interface ReactionsDialogProps {
28
28
  */
29
29
  handleSelectReaction?: onDialogSelectReactionChange;
30
30
  handlePaginationChange?: (emojiId: string) => void;
31
+ ProfileCardWrapper?: ProfileCardWrapper;
31
32
  }
32
- export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, }: ReactionsDialogProps) => jsx.JSX.Element;
33
+ export declare const ReactionsDialog: ({ reactions, handleCloseReactionsDialog, emojiProvider, selectedEmojiId, handleSelectReaction, handlePaginationChange, ProfileCardWrapper, }: ReactionsDialogProps) => jsx.JSX.Element;
package/dist/types-ts4.5/components/ReactionDialog/ReactionsList.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { type EmojiProvider } from '@atlaskit/emoji/resource';
3
- import { type onDialogSelectReactionChange, type ReactionSummary } from '../../types';
3
+ import { type onDialogSelectReactionChange, type ReactionSummary, type ProfileCardWrapper } from '../../types';
4
4
  export interface ReactionsListProps {
5
5
  /**
6
6
  * Sorted list of reactions to render in list
@@ -18,5 +18,9 @@ export interface ReactionsListProps {
18
18
  * Function to handle clicking on an emoji from the list
19
19
  */
20
20
  onReactionChanged: onDialogSelectReactionChange;
21
+ /**
22
+ * A functional component from Confluence to show a profile card on hover
23
+ */
24
+ ProfileCardWrapper?: ProfileCardWrapper;
21
25
  }
22
- export declare const ReactionsList: ({ reactions, initialEmojiId, emojiProvider, onReactionChanged, }: ReactionsListProps) => jsx.JSX.Element;
26
+ export declare const ReactionsList: ({ reactions, initialEmojiId, emojiProvider, onReactionChanged, ProfileCardWrapper, }: ReactionsListProps) => jsx.JSX.Element;
package/dist/types-ts4.5/components/Reactions/Reactions.d.ts CHANGED
@@ -6,7 +6,7 @@ import React from 'react';
6
6
  import { jsx } from '@emotion/react';
7
7
  import { type OnCloseHandler } from '@atlaskit/modal-dialog';
8
8
  import { type Placement } from '@atlaskit/popper';
9
- import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary } from '../../types';
9
+ import { type onDialogSelectReactionChange, ReactionStatus, type ReactionClick, type ReactionSummary, type QuickReactionEmojiSummary, type ProfileCardWrapper } from '../../types';
10
10
  import { type ReactionProps } from '../Reaction';
11
11
  import { type ReactionPickerProps } from '../ReactionPicker';
12
12
  import { type SelectorProps } from '../Selector';
@@ -126,6 +126,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
126
126
  * Optional prop for hiding default reactions displayed when there are no existing reactions
127
127
  */
128
128
  hideDefaultReactions?: boolean;
129
+ /**
130
+ * Optional prop for rendering a profile card wrapper in the Reactions Dialog
131
+ */
132
+ ProfileCardWrapper?: ProfileCardWrapper;
129
133
  }
130
134
  /**
131
135
  * Get content of the tooltip
@@ -134,4 +138,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
134
138
  /**
135
139
  * Renders list of reactions
136
140
  */
137
- export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, }: ReactionsProps) => jsx.JSX.Element>;
141
+ export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, }: ReactionsProps) => jsx.JSX.Element>;
package/dist/types-ts4.5/types/User.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface User {
11
11
  * optional path to a user profile picture
12
12
  */
13
13
  profilePicture?: ProfilePicture;
14
+ accountId?: string;
14
15
  }
15
16
  /**
16
17
  * Type defining the path to a user profile picture
package/dist/types-ts4.5/types/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { ReactNode } from 'react';
1
2
  export type { ReactionAction, Actions } from './Actions';
2
3
  export { ReactionStatus, ReactionUpdateType } from './reaction';
3
4
  export type { ReactionSource, ReactionsError, ReactionsLoading, ReactionsReadyState, ReactionsState, ReactionSummary, ReactionFocused, QuickReactionEmojiSummary, ReactionsNotLoaded, Reactions, ReactionClick, ReactionMouseEnter, onDialogSelectReactionChange, } from './reaction';
@@ -5,3 +6,20 @@ export type { Client, Request } from './client';
5
6
  export type { Updater } from './Updater';
6
7
  export type { User } from './User';
7
8
  export type { Store, StorePropInput, State, OnChangeCallback } from './store';
9
+ type TriggerPosition = 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'top-end' | 'top' | 'top-start' | 'right-end' | 'right' | 'right-start';
10
+ type ProfileCardWrapperProps = {
11
+ userId?: string | null;
12
+ position?: TriggerPosition;
13
+ isAnonymous?: boolean;
14
+ canViewProfile?: boolean;
15
+ children: ReactNode;
16
+ fullName?: string;
17
+ disabledAriaAttributes?: boolean;
18
+ onVisibilityChange?: (isVisible: boolean) => void;
19
+ offset?: [
20
+ number,
21
+ number
22
+ ];
23
+ ariaLabel?: string;
24
+ };
25
+ export type ProfileCardWrapper = React.ComponentType<ProfileCardWrapperProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/reactions",
3
- "version": "24.0.1",
3
+ "version": "24.2.0",
4
4
  "description": "Reactions component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"