@atlaskit/reactions 19.1.3 → 20.1.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 (57) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/dist/cjs/analytics/index.js +1 -1
  3. package/dist/cjs/client/MockReactionsClient.js +2 -2
  4. package/dist/cjs/client/ReactionServiceClient.js +10 -6
  5. package/dist/cjs/components/Counter.js +5 -3
  6. package/dist/cjs/components/FlashAnimation.js +9 -4
  7. package/dist/cjs/components/Reaction.js +18 -5
  8. package/dist/cjs/components/ReactionPicker.js +5 -7
  9. package/dist/cjs/components/ReactionTooltip.js +25 -7
  10. package/dist/cjs/components/Reactions.js +1 -1
  11. package/dist/cjs/components/Selector.js +3 -3
  12. package/dist/cjs/components/ShowMore.js +4 -2
  13. package/dist/cjs/components/i18n.js +5 -0
  14. package/dist/cjs/components/utils.js +1 -1
  15. package/dist/cjs/i18n/en.js +2 -1
  16. package/dist/cjs/i18n/en_GB.js +2 -1
  17. package/dist/cjs/i18n/index.js +36 -36
  18. package/dist/cjs/index.js +16 -16
  19. package/dist/cjs/reaction-store/ReactionsStore.js +4 -2
  20. package/dist/cjs/reaction-store/index.js +4 -4
  21. package/dist/cjs/reaction-store/utils.js +2 -1
  22. package/dist/cjs/version.json +1 -1
  23. package/dist/es2019/client/MockReactionsClient.js +1 -1
  24. package/dist/es2019/client/ReactionServiceClient.js +10 -4
  25. package/dist/es2019/components/Counter.js +3 -2
  26. package/dist/es2019/components/FlashAnimation.js +8 -4
  27. package/dist/es2019/components/Reaction.js +20 -6
  28. package/dist/es2019/components/ReactionPicker.js +4 -7
  29. package/dist/es2019/components/ReactionTooltip.js +20 -7
  30. package/dist/es2019/components/Selector.js +2 -2
  31. package/dist/es2019/components/ShowMore.js +3 -2
  32. package/dist/es2019/components/i18n.js +5 -0
  33. package/dist/es2019/i18n/en.js +2 -1
  34. package/dist/es2019/i18n/en_GB.js +2 -1
  35. package/dist/es2019/reaction-store/ReactionsStore.js +4 -3
  36. package/dist/es2019/version.json +1 -1
  37. package/dist/esm/client/MockReactionsClient.js +1 -1
  38. package/dist/esm/client/ReactionServiceClient.js +10 -6
  39. package/dist/esm/components/Counter.js +3 -2
  40. package/dist/esm/components/FlashAnimation.js +8 -4
  41. package/dist/esm/components/Reaction.js +18 -6
  42. package/dist/esm/components/ReactionPicker.js +4 -7
  43. package/dist/esm/components/ReactionTooltip.js +20 -7
  44. package/dist/esm/components/Selector.js +2 -2
  45. package/dist/esm/components/ShowMore.js +3 -2
  46. package/dist/esm/components/i18n.js +5 -0
  47. package/dist/esm/i18n/en.js +2 -1
  48. package/dist/esm/i18n/en_GB.js +2 -1
  49. package/dist/esm/reaction-store/ReactionsStore.js +4 -2
  50. package/dist/esm/version.json +1 -1
  51. package/dist/types/client/ReactionClient.d.ts +3 -1
  52. package/dist/types/client/ReactionServiceClient.d.ts +6 -2
  53. package/dist/types/components/i18n.d.ts +5 -0
  54. package/dist/types/i18n/en.d.ts +1 -0
  55. package/dist/types/i18n/en_GB.d.ts +1 -0
  56. package/dist/types/reaction-store/ReactionsStore.d.ts +6 -1
  57. package/package.json +13 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,34 @@
1
1
  # @atlaskit/reactions
2
2
 
3
+ ## 20.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`e82f9588eff`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e82f9588eff) - Instrumented `@atlaskit/reactions` with the new theming package, `@atlaskit/tokens`. New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
8
+
9
+ ## 20.0.0
10
+
11
+ ### Major Changes
12
+
13
+ - [`814356508d3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/814356508d3) - [ux] Design changes to help distinguish reactions and users. User list tooltip now shows the emoji name in grey and the additional users past the first five users in grey.Reactions that you have reacted to now have a blue border and slightly blue transparent background.Updated the heart emoji in the default emoji set.
14
+
15
+ ### Minor Changes
16
+
17
+ - [`ef61c4df3e5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ef61c4df3e5) - Add metadata when creating reaction store and pass it down to client
18
+
19
+ ## 19.1.5
20
+
21
+ ### Patch Changes
22
+
23
+ - Updated dependencies
24
+
25
+ ## 19.1.4
26
+
27
+ ### Patch Changes
28
+
29
+ - [`b90c0237824`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b90c0237824) - Update package.jsons to remove unused dependencies.
30
+ - Updated dependencies
31
+
3
32
  ## 19.1.3
4
33
 
5
34
  ### Patch Changes
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.createReactionClickedEvent = exports.createReactionHoveredEvent = exports.createReactionSelectionEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createReactionsRenderedEvent = exports.createRestFailedEvent = exports.createRestSucceededEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
8
+ exports.createRestSucceededEvent = exports.createRestFailedEvent = exports.createReactionsRenderedEvent = exports.createReactionSelectionEvent = exports.createReactionHoveredEvent = exports.createReactionClickedEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
9
9
 
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
 
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.MockReactionsClient = exports.user = exports.reaction = exports.ari = exports.containerAri = void 0;
8
+ exports.user = exports.reaction = exports.containerAri = exports.ari = exports.MockReactionsClient = void 0;
9
9
 
10
10
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
11
 
@@ -59,7 +59,7 @@ var MockReactionsClient = /*#__PURE__*/function () {
59
59
 
60
60
  var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
61
61
  (0, _classCallCheck2.default)(this, MockReactionsClient);
62
- (0, _defineProperty3.default)(this, "mockData", (0, _defineProperty3.default)({}, objectReactionKey(containerAri, ari), [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':hearts:', 100, false)]));
62
+ (0, _defineProperty3.default)(this, "mockData", (0, _defineProperty3.default)({}, objectReactionKey(containerAri, ari), [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':heart:', 100, false)]));
63
63
  (0, _defineProperty3.default)(this, "delayPromise", function () {
64
64
  return new Promise(function (resolve) {
65
65
  return window.setTimeout(resolve, _this.delay);
@@ -88,16 +88,18 @@ var ReactionServiceClient = /*#__PURE__*/function () {
88
88
  }
89
89
  }, {
90
90
  key: "addReaction",
91
- value: function addReaction(containerAri, ari, emojiId) {
91
+ value: function addReaction(containerAri, ari, emojiId, metadata) {
92
92
  return this.requestService('reactions', {
93
93
  requestInit: {
94
94
  method: 'POST',
95
95
  headers: this.getHeaders(),
96
- body: JSON.stringify({
96
+ body: JSON.stringify(_objectSpread({
97
97
  emojiId: emojiId,
98
98
  ari: ari,
99
99
  containerAri: containerAri
100
- }),
100
+ }, metadata ? {
101
+ metadata: JSON.stringify(metadata)
102
+ } : {})),
101
103
  credentials: 'include'
102
104
  }
103
105
  }).then(function (_ref) {
@@ -107,13 +109,15 @@ var ReactionServiceClient = /*#__PURE__*/function () {
107
109
  }
108
110
  }, {
109
111
  key: "deleteReaction",
110
- value: function deleteReaction(containerAri, ari, emojiId) {
112
+ value: function deleteReaction(containerAri, ari, emojiId, metadata) {
111
113
  return this.requestService('reactions', {
112
- queryParams: {
114
+ queryParams: _objectSpread({
113
115
  ari: ari,
114
116
  emojiId: emojiId,
115
117
  containerAri: containerAri
116
- },
118
+ }, metadata ? {
119
+ metadata: JSON.stringify(metadata)
120
+ } : {}),
117
121
  requestInit: {
118
122
  method: 'DELETE',
119
123
  headers: this.getHeaders(),
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.Counter = exports.slideDownStyle = exports.slideUpStyle = exports.containerStyle = exports.highlightStyle = exports.countStyle = void 0;
8
+ exports.slideUpStyle = exports.slideDownStyle = exports.highlightStyle = exports.countStyle = exports.containerStyle = exports.Counter = void 0;
9
9
 
10
10
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
11
11
 
@@ -23,6 +23,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
23
23
 
24
24
  var _colors = require("@atlaskit/theme/colors");
25
25
 
26
+ var _tokens = require("@atlaskit/tokens");
27
+
26
28
  var _classnames = _interopRequireDefault(require("classnames"));
27
29
 
28
30
  var _react = _interopRequireDefault(require("react"));
@@ -40,14 +42,14 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
40
42
  var animationTime = 300;
41
43
  var countStyle = (0, _typestyle.style)({
42
44
  fontSize: '11px',
43
- color: _colors.N90,
45
+ color: (0, _tokens.token)('color.text.lowEmphasis', _colors.N90),
44
46
  overflow: 'hidden',
45
47
  height: "".concat(_utils.akHeight, "px"),
46
48
  transition: "width ".concat(animationTime, "ms ease-in-out")
47
49
  });
48
50
  exports.countStyle = countStyle;
49
51
  var highlightStyle = (0, _typestyle.style)({
50
- color: _colors.B400,
52
+ color: (0, _tokens.token)('color.text.selected', _colors.B400),
51
53
  fontWeight: 600
52
54
  });
53
55
  exports.highlightStyle = highlightStyle;
@@ -5,12 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.FlashAnimation = exports.flashStyle = void 0;
8
+ exports.flashStyle = exports.FlashAnimation = void 0;
9
9
 
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
 
12
12
  var _colors = require("@atlaskit/theme/colors");
13
13
 
14
+ var _tokens = require("@atlaskit/tokens");
15
+
14
16
  var _classnames = _interopRequireDefault(require("classnames"));
15
17
 
16
18
  var _react = _interopRequireDefault(require("react"));
@@ -27,13 +29,16 @@ var flashAnimation = (0, _typestyle.keyframes)({
27
29
  backgroundColor: 'transparent'
28
30
  },
29
31
  '20%': {
30
- backgroundColor: _colors.B75
32
+ backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
33
+ borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
31
34
  },
32
35
  '75%': {
33
- backgroundColor: _colors.B75
36
+ backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
37
+ borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
34
38
  },
35
39
  '100%': {
36
- backgroundColor: 'transparent'
40
+ backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
41
+ borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300)
37
42
  }
38
43
  });
39
44
  var flashStyle = (0, _typestyle.style)({
@@ -29,6 +29,8 @@ var _element = require("@atlaskit/emoji/element");
29
29
 
30
30
  var _colors = require("@atlaskit/theme/colors");
31
31
 
32
+ var _tokens = require("@atlaskit/tokens");
33
+
32
34
  var _classnames = _interopRequireDefault(require("classnames"));
33
35
 
34
36
  var _react = _interopRequireWildcard(require("react"));
@@ -71,25 +73,36 @@ var reactionStyle = (0, _typestyle.style)({
71
73
  minWidth: '36px',
72
74
  height: "".concat(_utils.akHeight, "px"),
73
75
  background: 'transparent',
74
- border: "1px solid ".concat(_colors.N40),
76
+ border: "1px solid ".concat((0, _tokens.token)('color.border.neutral', _colors.N40)),
75
77
  boxSizing: 'border-box',
76
78
  borderRadius: '20px',
77
- color: "".concat(_colors.N400),
79
+ color: "".concat((0, _tokens.token)('color.text.mediumEmphasis', _colors.N400)),
78
80
  cursor: 'pointer',
79
81
  margin: 0,
80
82
  padding: 0,
81
83
  transition: '200ms ease-in-out',
82
84
  $nest: {
83
85
  '&:hover': {
84
- background: "".concat(_colors.N20)
86
+ background: "".concat((0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N20))
85
87
  }
86
88
  }
87
89
  });
90
+ var reactedStyle = (0, _typestyle.style)({
91
+ backgroundColor: (0, _tokens.token)('color.background.selected.resting', _colors.B50),
92
+ borderColor: (0, _tokens.token)('color.iconBorder.brand', _colors.B300),
93
+ $nest: {
94
+ '&:hover': {
95
+ background: "".concat((0, _tokens.token)('color.background.selected.hover', _colors.B75))
96
+ }
97
+ }
98
+ });
99
+ var flashHeight = _utils.akHeight - 2; // height without the 1px border
100
+
88
101
  var flashStyle = (0, _typestyle.style)({
89
102
  display: 'flex',
90
103
  flexDirection: 'row',
91
104
  borderRadius: '10px',
92
- height: "".concat(_utils.akHeight, "px")
105
+ height: "".concat(flashHeight, "px")
93
106
  });
94
107
  var counterStyle = (0, _typestyle.style)({
95
108
  padding: '4px 8px 4px 0',
@@ -181,7 +194,7 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
181
194
  classNameProp = _this$props3.className,
182
195
  flash = _this$props3.flash;
183
196
  var emojiName = this.state.emojiName;
184
- var classNames = (0, _classnames.default)(reactionStyle, classNameProp);
197
+ var classNames = (0, _classnames.default)(reactionStyle, classNameProp, (0, _defineProperty2.default)({}, reactedStyle, reaction.reacted));
185
198
  var emojiId = {
186
199
  id: reaction.emojiId,
187
200
  shortName: ''
@@ -31,6 +31,8 @@ var _constants = require("@atlaskit/theme/constants");
31
31
 
32
32
  var _colors = require("@atlaskit/theme/colors");
33
33
 
34
+ var _tokens = require("@atlaskit/tokens");
35
+
34
36
  var _classnames = _interopRequireDefault(require("classnames"));
35
37
 
36
38
  var _react = _interopRequireWildcard(require("react"));
@@ -55,10 +57,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
55
57
 
56
58
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
57
59
 
58
- var akBorderRadius = "".concat((0, _constants.borderRadius)(), "px");
59
- var akColorN0 = _colors.N0;
60
- var akColorN50A = _colors.N50A;
61
- var akColorN60A = _colors.N60A;
62
60
  var pickerStyle = (0, _typestyle.style)({
63
61
  verticalAlign: 'middle',
64
62
  $nest: {
@@ -72,9 +70,9 @@ var contentStyle = (0, _typestyle.style)({
72
70
  display: 'flex'
73
71
  });
74
72
  var popupStyle = (0, _typestyle.style)({
75
- background: akColorN0,
76
- borderRadius: akBorderRadius,
77
- boxShadow: "0 4px 8px -2px ".concat(akColorN50A, ", 0 0 1px ").concat(akColorN60A),
73
+ background: (0, _tokens.token)('color.background.overlay', _colors.N0),
74
+ borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
75
+ boxShadow: (0, _tokens.token)('shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
78
76
  $nest: {
79
77
  '&> div': {
80
78
  boxShadow: undefined
@@ -7,17 +7,29 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.ReactionTooltip = void 0;
9
9
 
10
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
11
+
10
12
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
11
13
 
12
14
  var _react = _interopRequireDefault(require("react"));
13
15
 
16
+ var _reactIntl = require("react-intl");
17
+
14
18
  var _typestyle = require("typestyle");
15
19
 
20
+ var _tokens = require("@atlaskit/tokens");
21
+
22
+ var _colors = require("@atlaskit/theme/colors");
23
+
24
+ var _i18n = require("./i18n");
25
+
26
+ var verticalMargin = 5;
16
27
  var tooltipStyle = (0, _typestyle.style)({
17
28
  maxWidth: '150px',
18
29
  textOverflow: 'ellipsis',
19
30
  whiteSpace: 'nowrap',
20
31
  overflow: 'hidden',
32
+ marginBottom: verticalMargin,
21
33
  $nest: {
22
34
  ul: {
23
35
  listStyle: 'none',
@@ -28,16 +40,18 @@ var tooltipStyle = (0, _typestyle.style)({
28
40
  li: {
29
41
  overflow: 'hidden',
30
42
  textOverflow: 'ellipsis',
31
- marginTop: 0
43
+ marginTop: verticalMargin
32
44
  }
33
45
  }
34
46
  });
35
47
  var emojiNameStyle = (0, _typestyle.style)({
36
48
  textTransform: 'capitalize',
37
- marginBottom: 5
49
+ color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N90),
50
+ fontWeight: 600
38
51
  });
39
52
  var footerStyle = (0, _typestyle.style)({
40
- marginTop: 5
53
+ color: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N90),
54
+ fontWeight: 300
41
55
  });
42
56
  var TOOLTIP_USERS_LIMIT = 5;
43
57
 
@@ -52,15 +66,19 @@ var ReactionTooltip = function ReactionTooltip(_ref) {
52
66
 
53
67
  var content = /*#__PURE__*/_react.default.createElement("div", {
54
68
  className: tooltipStyle
55
- }, emojiName ? /*#__PURE__*/_react.default.createElement("span", {
69
+ }, /*#__PURE__*/_react.default.createElement("ul", null, emojiName ? /*#__PURE__*/_react.default.createElement("li", {
56
70
  className: emojiNameStyle
57
- }, emojiName) : null, /*#__PURE__*/_react.default.createElement("ul", null, users.slice(0, TOOLTIP_USERS_LIMIT).map(function (user, index) {
71
+ }, emojiName) : null, users.slice(0, TOOLTIP_USERS_LIMIT).map(function (user, index) {
58
72
  return /*#__PURE__*/_react.default.createElement("li", {
59
73
  key: index
60
74
  }, user.displayName);
61
- })), users.length > TOOLTIP_USERS_LIMIT ? /*#__PURE__*/_react.default.createElement("span", {
75
+ }), users.length > TOOLTIP_USERS_LIMIT ? /*#__PURE__*/_react.default.createElement("li", {
62
76
  className: footerStyle
63
- }, "+", users.length - TOOLTIP_USERS_LIMIT, "...") : null);
77
+ }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.otherUsers, {
78
+ values: {
79
+ count: users.length - TOOLTIP_USERS_LIMIT
80
+ }
81
+ }))) : null));
64
82
 
65
83
  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
66
84
  content: content,
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.Reactions = exports.ReactionsWithoutAnalytics = void 0;
8
+ exports.ReactionsWithoutAnalytics = exports.Reactions = void 0;
9
9
 
10
10
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
11
11
 
@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
7
7
  Object.defineProperty(exports, "__esModule", {
8
8
  value: true
9
9
  });
10
- exports.Selector = exports.isDefaultReaction = exports.defaultReactionsByShortName = exports.defaultReactions = exports.revealStyle = void 0;
10
+ exports.revealStyle = exports.isDefaultReaction = exports.defaultReactionsByShortName = exports.defaultReactions = exports.Selector = void 0;
11
11
 
12
12
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
13
13
 
@@ -94,8 +94,8 @@ var defaultReactions = [{
94
94
  id: '1f525',
95
95
  shortName: ':fire:'
96
96
  }, {
97
- id: '2665',
98
- shortName: ':hearts:'
97
+ id: '2764',
98
+ shortName: ':heart:'
99
99
  }, {
100
100
  id: '1f632',
101
101
  shortName: ':astonished:'
@@ -25,6 +25,8 @@ var _constants = require("@atlaskit/theme/constants");
25
25
 
26
26
  var _colors = require("@atlaskit/theme/colors");
27
27
 
28
+ var _tokens = require("@atlaskit/tokens");
29
+
28
30
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
29
31
 
30
32
  var _classnames = _interopRequireDefault(require("classnames"));
@@ -57,12 +59,12 @@ var moreButtonStyle = (0, _typestyle.style)({
57
59
  verticalAlign: 'top',
58
60
  $nest: {
59
61
  '&:hover': {
60
- backgroundColor: _colors.N30A
62
+ backgroundColor: (0, _tokens.token)('color.background.transparentNeutral.hover', _colors.N30A)
61
63
  }
62
64
  }
63
65
  });
64
66
  var separatorStyle = (0, _typestyle.style)({
65
- backgroundColor: _colors.N30A,
67
+ backgroundColor: (0, _tokens.token)('color.border.neutral', _colors.N30A),
66
68
  margin: '8px 8px 8px 4px',
67
69
  width: '1px',
68
70
  height: '60%',
@@ -22,6 +22,11 @@ var messages = (0, _reactIntl.defineMessages)({
22
22
  id: 'fabric.reactions.error.unexpected',
23
23
  defaultMessage: 'Something went wrong',
24
24
  description: 'Unexpected error message'
25
+ },
26
+ otherUsers: {
27
+ id: 'fabric.reactions.other.reacted.users',
28
+ defaultMessage: '{count, plural, one {and one other} other {and {count} others}}',
29
+ description: "The number of users that have reacted similarly, but aren't shown"
25
30
  }
26
31
  });
27
32
  exports.messages = messages;
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.equalEmojiId = exports.isLeftClick = exports.akHeight = void 0;
6
+ exports.isLeftClick = exports.equalEmojiId = exports.akHeight = void 0;
7
7
  var akHeight = 24;
8
8
  exports.akHeight = akHeight;
9
9
 
@@ -8,6 +8,7 @@ exports.default = void 0;
8
8
  var _default = {
9
9
  'fabric.reactions.loading': 'Loading...',
10
10
  'fabric.reactions.more.emoji': 'More emoji',
11
- 'fabric.reactions.error.unexpected': 'Something went wrong'
11
+ 'fabric.reactions.error.unexpected': 'Something went wrong',
12
+ 'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and "{count}" others}}'
12
13
  };
13
14
  exports.default = _default;
@@ -8,6 +8,7 @@ exports.default = void 0;
8
8
  var _default = {
9
9
  'fabric.reactions.loading': 'Loading...',
10
10
  'fabric.reactions.more.emoji': 'More emoji',
11
- 'fabric.reactions.error.unexpected': 'Something went wrong'
11
+ 'fabric.reactions.error.unexpected': 'Something went wrong',
12
+ 'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and "{count}" others}}'
12
13
  };
13
14
  exports.default = _default;
@@ -5,34 +5,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- Object.defineProperty(exports, "zh", {
8
+ Object.defineProperty(exports, "cs", {
9
9
  enumerable: true,
10
10
  get: function get() {
11
- return _zh.default;
11
+ return _cs.default;
12
12
  }
13
13
  });
14
- Object.defineProperty(exports, "zh_TW", {
14
+ Object.defineProperty(exports, "da", {
15
15
  enumerable: true,
16
16
  get: function get() {
17
- return _zh_TW.default;
17
+ return _da.default;
18
18
  }
19
19
  });
20
- Object.defineProperty(exports, "cs", {
20
+ Object.defineProperty(exports, "de", {
21
21
  enumerable: true,
22
22
  get: function get() {
23
- return _cs.default;
23
+ return _de.default;
24
24
  }
25
25
  });
26
- Object.defineProperty(exports, "da", {
26
+ Object.defineProperty(exports, "en", {
27
27
  enumerable: true,
28
28
  get: function get() {
29
- return _da.default;
29
+ return _en.default;
30
30
  }
31
31
  });
32
- Object.defineProperty(exports, "nl", {
32
+ Object.defineProperty(exports, "en_GB", {
33
33
  enumerable: true,
34
34
  get: function get() {
35
- return _nl.default;
35
+ return _en_GB.default;
36
+ }
37
+ });
38
+ Object.defineProperty(exports, "es", {
39
+ enumerable: true,
40
+ get: function get() {
41
+ return _es.default;
36
42
  }
37
43
  });
38
44
  Object.defineProperty(exports, "et", {
@@ -53,16 +59,16 @@ Object.defineProperty(exports, "fr", {
53
59
  return _fr.default;
54
60
  }
55
61
  });
56
- Object.defineProperty(exports, "de", {
62
+ Object.defineProperty(exports, "hu", {
57
63
  enumerable: true,
58
64
  get: function get() {
59
- return _de.default;
65
+ return _hu.default;
60
66
  }
61
67
  });
62
- Object.defineProperty(exports, "hu", {
68
+ Object.defineProperty(exports, "is", {
63
69
  enumerable: true,
64
70
  get: function get() {
65
- return _hu.default;
71
+ return _is.default;
66
72
  }
67
73
  });
68
74
  Object.defineProperty(exports, "it", {
@@ -89,6 +95,12 @@ Object.defineProperty(exports, "nb", {
89
95
  return _nb.default;
90
96
  }
91
97
  });
98
+ Object.defineProperty(exports, "nl", {
99
+ enumerable: true,
100
+ get: function get() {
101
+ return _nl.default;
102
+ }
103
+ });
92
104
  Object.defineProperty(exports, "pl", {
93
105
  enumerable: true,
94
106
  get: function get() {
@@ -107,22 +119,22 @@ Object.defineProperty(exports, "pt_PT", {
107
119
  return _pt_PT.default;
108
120
  }
109
121
  });
110
- Object.defineProperty(exports, "ru", {
122
+ Object.defineProperty(exports, "ro", {
111
123
  enumerable: true,
112
124
  get: function get() {
113
- return _ru.default;
125
+ return _ro.default;
114
126
  }
115
127
  });
116
- Object.defineProperty(exports, "sk", {
128
+ Object.defineProperty(exports, "ru", {
117
129
  enumerable: true,
118
130
  get: function get() {
119
- return _sk.default;
131
+ return _ru.default;
120
132
  }
121
133
  });
122
- Object.defineProperty(exports, "es", {
134
+ Object.defineProperty(exports, "sk", {
123
135
  enumerable: true,
124
136
  get: function get() {
125
- return _es.default;
137
+ return _sk.default;
126
138
  }
127
139
  });
128
140
  Object.defineProperty(exports, "sv", {
@@ -155,28 +167,16 @@ Object.defineProperty(exports, "vi", {
155
167
  return _vi.default;
156
168
  }
157
169
  });
158
- Object.defineProperty(exports, "en", {
159
- enumerable: true,
160
- get: function get() {
161
- return _en.default;
162
- }
163
- });
164
- Object.defineProperty(exports, "en_GB", {
165
- enumerable: true,
166
- get: function get() {
167
- return _en_GB.default;
168
- }
169
- });
170
- Object.defineProperty(exports, "is", {
170
+ Object.defineProperty(exports, "zh", {
171
171
  enumerable: true,
172
172
  get: function get() {
173
- return _is.default;
173
+ return _zh.default;
174
174
  }
175
175
  });
176
- Object.defineProperty(exports, "ro", {
176
+ Object.defineProperty(exports, "zh_TW", {
177
177
  enumerable: true,
178
178
  get: function get() {
179
- return _ro.default;
179
+ return _zh_TW.default;
180
180
  }
181
181
  });
182
182
 
package/dist/cjs/index.js CHANGED
@@ -3,52 +3,52 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- Object.defineProperty(exports, "ReactionServiceClient", {
6
+ Object.defineProperty(exports, "ConnectedReactionPicker", {
7
7
  enumerable: true,
8
8
  get: function get() {
9
- return _client.ReactionServiceClient;
9
+ return _containers.ConnectedReactionPicker;
10
10
  }
11
11
  });
12
- Object.defineProperty(exports, "Reaction", {
12
+ Object.defineProperty(exports, "ConnectedReactionsView", {
13
13
  enumerable: true,
14
14
  get: function get() {
15
- return _components.Reaction;
15
+ return _containers.ConnectedReactionsView;
16
16
  }
17
17
  });
18
- Object.defineProperty(exports, "ReactionPicker", {
18
+ Object.defineProperty(exports, "MemoryReactionsStore", {
19
19
  enumerable: true,
20
20
  get: function get() {
21
- return _components.ReactionPicker;
21
+ return _reactionStore.MemoryReactionsStore;
22
22
  }
23
23
  });
24
- Object.defineProperty(exports, "Reactions", {
24
+ Object.defineProperty(exports, "Reaction", {
25
25
  enumerable: true,
26
26
  get: function get() {
27
- return _components.Reactions;
27
+ return _components.Reaction;
28
28
  }
29
29
  });
30
- Object.defineProperty(exports, "ConnectedReactionPicker", {
30
+ Object.defineProperty(exports, "ReactionConsumer", {
31
31
  enumerable: true,
32
32
  get: function get() {
33
- return _containers.ConnectedReactionPicker;
33
+ return _reactionStore.ReactionConsumer;
34
34
  }
35
35
  });
36
- Object.defineProperty(exports, "ConnectedReactionsView", {
36
+ Object.defineProperty(exports, "ReactionPicker", {
37
37
  enumerable: true,
38
38
  get: function get() {
39
- return _containers.ConnectedReactionsView;
39
+ return _components.ReactionPicker;
40
40
  }
41
41
  });
42
- Object.defineProperty(exports, "MemoryReactionsStore", {
42
+ Object.defineProperty(exports, "ReactionServiceClient", {
43
43
  enumerable: true,
44
44
  get: function get() {
45
- return _reactionStore.MemoryReactionsStore;
45
+ return _client.ReactionServiceClient;
46
46
  }
47
47
  });
48
- Object.defineProperty(exports, "ReactionConsumer", {
48
+ Object.defineProperty(exports, "Reactions", {
49
49
  enumerable: true,
50
50
  get: function get() {
51
- return _reactionStore.ReactionConsumer;
51
+ return _components.Reactions;
52
52
  }
53
53
  });
54
54