@atlaskit/reactions 19.1.4 → 21.0.0

package/dist/cjs/i18n/index.js

@@ -5,34 +5,40 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "zh", {
+Object.defineProperty(exports, "cs", {
   enumerable: true,
   get: function get() {
-    return _zh.default;
+    return _cs.default;
   }
 });
-Object.defineProperty(exports, "zh_TW", {
+Object.defineProperty(exports, "da", {
   enumerable: true,
   get: function get() {
-    return _zh_TW.default;
+    return _da.default;
   }
 });
-Object.defineProperty(exports, "cs", {
+Object.defineProperty(exports, "de", {
   enumerable: true,
   get: function get() {
-    return _cs.default;
+    return _de.default;
   }
 });
-Object.defineProperty(exports, "da", {
+Object.defineProperty(exports, "en", {
   enumerable: true,
   get: function get() {
-    return _da.default;
+    return _en.default;
   }
 });
-Object.defineProperty(exports, "nl", {
+Object.defineProperty(exports, "en_GB", {
   enumerable: true,
   get: function get() {
-    return _nl.default;
+    return _en_GB.default;
+  }
+});
+Object.defineProperty(exports, "es", {
+  enumerable: true,
+  get: function get() {
+    return _es.default;
   }
 });
 Object.defineProperty(exports, "et", {
@@ -53,16 +59,16 @@ Object.defineProperty(exports, "fr", {
     return _fr.default;
   }
 });
-Object.defineProperty(exports, "de", {
+Object.defineProperty(exports, "hu", {
   enumerable: true,
   get: function get() {
-    return _de.default;
+    return _hu.default;
   }
 });
-Object.defineProperty(exports, "hu", {
+Object.defineProperty(exports, "is", {
   enumerable: true,
   get: function get() {
-    return _hu.default;
+    return _is.default;
   }
 });
 Object.defineProperty(exports, "it", {
@@ -89,6 +95,12 @@ Object.defineProperty(exports, "nb", {
     return _nb.default;
   }
 });
+Object.defineProperty(exports, "nl", {
+  enumerable: true,
+  get: function get() {
+    return _nl.default;
+  }
+});
 Object.defineProperty(exports, "pl", {
   enumerable: true,
   get: function get() {
@@ -107,22 +119,22 @@ Object.defineProperty(exports, "pt_PT", {
     return _pt_PT.default;
   }
 });
-Object.defineProperty(exports, "ru", {
+Object.defineProperty(exports, "ro", {
   enumerable: true,
   get: function get() {
-    return _ru.default;
+    return _ro.default;
   }
 });
-Object.defineProperty(exports, "sk", {
+Object.defineProperty(exports, "ru", {
   enumerable: true,
   get: function get() {
-    return _sk.default;
+    return _ru.default;
   }
 });
-Object.defineProperty(exports, "es", {
+Object.defineProperty(exports, "sk", {
   enumerable: true,
   get: function get() {
-    return _es.default;
+    return _sk.default;
   }
 });
 Object.defineProperty(exports, "sv", {
@@ -155,28 +167,16 @@ Object.defineProperty(exports, "vi", {
     return _vi.default;
   }
 });
-Object.defineProperty(exports, "en", {
-  enumerable: true,
-  get: function get() {
-    return _en.default;
-  }
-});
-Object.defineProperty(exports, "en_GB", {
-  enumerable: true,
-  get: function get() {
-    return _en_GB.default;
-  }
-});
-Object.defineProperty(exports, "is", {
+Object.defineProperty(exports, "zh", {
   enumerable: true,
   get: function get() {
-    return _is.default;
+    return _zh.default;
   }
 });
-Object.defineProperty(exports, "ro", {
+Object.defineProperty(exports, "zh_TW", {
   enumerable: true,
   get: function get() {
-    return _ro.default;
+    return _zh_TW.default;
   }
 });
 

package/dist/cjs/index.js

@@ -3,52 +3,52 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ReactionServiceClient", {
+Object.defineProperty(exports, "ConnectedReactionPicker", {
   enumerable: true,
   get: function get() {
-    return _client.ReactionServiceClient;
+    return _containers.ConnectedReactionPicker;
   }
 });
-Object.defineProperty(exports, "Reaction", {
+Object.defineProperty(exports, "ConnectedReactionsView", {
   enumerable: true,
   get: function get() {
-    return _components.Reaction;
+    return _containers.ConnectedReactionsView;
   }
 });
-Object.defineProperty(exports, "ReactionPicker", {
+Object.defineProperty(exports, "MemoryReactionsStore", {
   enumerable: true,
   get: function get() {
-    return _components.ReactionPicker;
+    return _reactionStore.MemoryReactionsStore;
   }
 });
-Object.defineProperty(exports, "Reactions", {
+Object.defineProperty(exports, "Reaction", {
   enumerable: true,
   get: function get() {
-    return _components.Reactions;
+    return _components.Reaction;
   }
 });
-Object.defineProperty(exports, "ConnectedReactionPicker", {
+Object.defineProperty(exports, "ReactionConsumer", {
   enumerable: true,
   get: function get() {
-    return _containers.ConnectedReactionPicker;
+    return _reactionStore.ReactionConsumer;
   }
 });
-Object.defineProperty(exports, "ConnectedReactionsView", {
+Object.defineProperty(exports, "ReactionPicker", {
   enumerable: true,
   get: function get() {
-    return _containers.ConnectedReactionsView;
+    return _components.ReactionPicker;
   }
 });
-Object.defineProperty(exports, "MemoryReactionsStore", {
+Object.defineProperty(exports, "ReactionServiceClient", {
   enumerable: true,
   get: function get() {
-    return _reactionStore.MemoryReactionsStore;
+    return _client.ReactionServiceClient;
   }
 });
-Object.defineProperty(exports, "ReactionConsumer", {
+Object.defineProperty(exports, "Reactions", {
   enumerable: true,
   get: function get() {
-    return _reactionStore.ReactionConsumer;
+    return _components.Reactions;
   }
 });
 

package/dist/cjs/reaction-store/ReactionsStore.js

@@ -39,6 +39,7 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
       reactions: {},
       flash: {}
     };
+    var metadata = arguments.length > 2 ? arguments[2] : undefined;
     (0, _classCallCheck2.default)(this, MemoryReactionsStore);
     (0, _defineProperty2.default)(this, "callbacks", []);
     (0, _defineProperty2.default)(this, "setState", function (newState) {
@@ -122,7 +123,7 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
 
       _this.flash(reaction);
 
-      _this.client.addReaction(containerAri, ari, emojiId).then(function (reaction) {
+      _this.client.addReaction(containerAri, ari, emojiId, _this.metadata).then(function (_) {
         if (_this.createAnalyticsEvent) {
           (0, _analytics.createAndFireSafe)(_this.createAnalyticsEvent, _analytics.createRestSucceededEvent, 'addReaction');
         }
@@ -141,7 +142,7 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
 
       _this.optmisticUpdate(containerAri, ari, emojiId)(utils.removeOne);
 
-      _this.client.deleteReaction(containerAri, ari, emojiId);
+      _this.client.deleteReaction(containerAri, ari, emojiId, _this.metadata);
     });
     (0, _defineProperty2.default)(this, "setCreateAnalyticsEvent", function (createAnalyticsEvent) {
       _this.createAnalyticsEvent = createAnalyticsEvent;
@@ -185,6 +186,7 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
     });
     this.client = client;
     this.state = state;
+    this.metadata = metadata;
   }
 
   (0, _createClass2.default)(MemoryReactionsStore, [{

package/dist/cjs/reaction-store/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ReactionConsumer", {
+Object.defineProperty(exports, "MemoryReactionsStore", {
   enumerable: true,
   get: function get() {
-    return _ReactionConsumer.ReactionConsumer;
+    return _ReactionsStore.MemoryReactionsStore;
   }
 });
-Object.defineProperty(exports, "MemoryReactionsStore", {
+Object.defineProperty(exports, "ReactionConsumer", {
   enumerable: true,
   get: function get() {
-    return _ReactionsStore.MemoryReactionsStore;
+    return _ReactionConsumer.ReactionConsumer;
   }
 });
 

package/dist/cjs/reaction-store/utils.js

@@ -5,8 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getReactionsSortFunction = exports.flattenAris = exports.compareEmojiId = exports.byEmojiId = exports.addOne = void 0;
 exports.isRealErrorFromService = isRealErrorFromService;
-exports.flattenAris = exports.getReactionsSortFunction = exports.updateByEmojiId = exports.removeOne = exports.addOne = exports.byEmojiId = exports.readyState = exports.sortByPreviousPosition = exports.sortByRelevance = exports.compareEmojiId = void 0;
+exports.updateByEmojiId = exports.sortByRelevance = exports.sortByPreviousPosition = exports.removeOne = exports.readyState = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "19.1.4"
+	"version": "21.0.0"
 }

package/dist/es2019/client/MockReactionsClient.js

@@ -22,7 +22,7 @@ const defaultUsers = [user('oscar', 'Oscar Wallhult'), user('julien', 'Julien Mi
 export class MockReactionsClient {
   constructor(delay = 0) {
     _defineProperty(this, "mockData", {
-      [objectReactionKey(containerAri, ari)]: [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':hearts:', 100, false)]
+      [objectReactionKey(containerAri, ari)]: [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':heart:', 100, false)]
     });
 
     _defineProperty(this, "delayPromise", () => new Promise(resolve => window.setTimeout(resolve, this.delay)));

package/dist/es2019/client/ReactionServiceClient.js

@@ -59,7 +59,7 @@ export class ReactionServiceClient {
     });
   }
 
-  addReaction(containerAri, ari, emojiId) {
+  addReaction(containerAri, ari, emojiId, metadata) {
     return this.requestService('reactions', {
       requestInit: {
         method: 'POST',
@@ -67,7 +67,10 @@ export class ReactionServiceClient {
         body: JSON.stringify({
           emojiId,
           ari,
-          containerAri
+          containerAri,
+          ...(metadata ? {
+            metadata: JSON.stringify(metadata)
+          } : {})
         }),
         credentials: 'include'
       }
@@ -76,12 +79,15 @@ export class ReactionServiceClient {
     }) => reactions);
   }
 
-  deleteReaction(containerAri, ari, emojiId) {
+  deleteReaction(containerAri, ari, emojiId, metadata) {
     return this.requestService('reactions', {
       queryParams: {
         ari,
         emojiId,
-        containerAri
+        containerAri,
+        ...(metadata ? {
+          metadata: JSON.stringify(metadata)
+        } : {})
       },
       requestInit: {
         method: 'DELETE',

package/dist/es2019/components/Counter.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { N90, B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
@@ -8,13 +9,13 @@ import { akHeight } from './utils';
 const animationTime = 300;
 export const countStyle = style({
   fontSize: '11px',
-  color: N90,
+  color: token('color.text.lowEmphasis', N90),
   overflow: 'hidden',
   height: `${akHeight}px`,
   transition: `width ${animationTime}ms ease-in-out`
 });
 export const highlightStyle = style({
-  color: B400,
+  color: token('color.text.selected', B400),
   fontWeight: 600
 });
 export const containerStyle = style({

package/dist/es2019/components/FlashAnimation.js

@@ -1,4 +1,5 @@
-import { B75 } from '@atlaskit/theme/colors';
+import { B75, B300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { keyframes, style } from 'typestyle';
@@ -12,13 +13,16 @@ const flashAnimation = keyframes({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: B75
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   },
   '75%': {
-    backgroundColor: B75
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   },
   '100%': {
-    backgroundColor: 'transparent'
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   }
 });
 export const flashStyle = style({

package/dist/es2019/components/Reaction.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
-import { N20, N40, N400 } from '@atlaskit/theme/colors';
+import { B50, B75, B300, N20, N40, N400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
@@ -30,25 +31,36 @@ const reactionStyle = style({
   minWidth: '36px',
   height: `${akHeight}px`,
   background: 'transparent',
-  border: `1px solid ${N40}`,
+  border: `1px solid ${token('color.border.neutral', N40)}`,
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: `${N400}`,
+  color: `${token('color.text.mediumEmphasis', N400)}`,
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: `${N20}`
+      background: `${token('color.background.transparentNeutral.hover', N20)}`
     }
   }
 });
+const reactedStyle = style({
+  backgroundColor: token('color.background.selected.resting', B50),
+  borderColor: token('color.iconBorder.brand', B300),
+  $nest: {
+    '&:hover': {
+      background: `${token('color.background.selected.hover', B75)}`
+    }
+  }
+});
+const flashHeight = akHeight - 2; // height without the 1px border
+
 const flashStyle = style({
   display: 'flex',
   flexDirection: 'row',
   borderRadius: '10px',
-  height: `${akHeight}px`
+  height: `${flashHeight}px`
 });
 const counterStyle = style({
   padding: '4px 8px 4px 0',
@@ -133,7 +145,9 @@ class ReactionWithoutAnalytics extends PureComponent {
     const {
       emojiName
     } = this.state;
-    const classNames = cx(reactionStyle, classNameProp);
+    const classNames = cx(reactionStyle, classNameProp, {
+      [reactedStyle]: reaction.reacted
+    });
     const emojiId = {
       id: reaction.emojiId,
       shortName: ''

package/dist/es2019/components/ReactionPicker.js

@@ -3,6 +3,7 @@ import { EmojiPicker } from '@atlaskit/emoji/picker';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
@@ -11,10 +12,6 @@ import { style } from 'typestyle';
 import { Selector } from './Selector';
 import { Trigger } from './Trigger';
 import { layers } from '@atlaskit/theme/constants';
-const akBorderRadius = `${borderRadius()}px`;
-const akColorN0 = N0;
-const akColorN50A = N50A;
-const akColorN60A = N60A;
 const pickerStyle = style({
   verticalAlign: 'middle',
   $nest: {
@@ -28,9 +25,9 @@ const contentStyle = style({
   display: 'flex'
 });
 const popupStyle = style({
-  background: akColorN0,
-  borderRadius: akBorderRadius,
-  boxShadow: `0 4px 8px -2px ${akColorN50A}, 0 0 1px ${akColorN60A}`,
+  background: token('color.background.overlay', N0),
+  borderRadius: `${borderRadius()}px`,
+  boxShadow: token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
   $nest: {
     '&> div': {
       boxShadow: undefined

package/dist/es2019/components/ReactionTooltip.js

@@ -1,11 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
 import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
 import { style } from 'typestyle';
+import { token } from '@atlaskit/tokens';
+import { N90 } from '@atlaskit/theme/colors';
+import { messages } from './i18n';
+const verticalMargin = 5;
 const tooltipStyle = style({
   maxWidth: '150px',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
+  marginBottom: verticalMargin,
   $nest: {
     ul: {
       listStyle: 'none',
@@ -16,16 +23,18 @@ const tooltipStyle = style({
     li: {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      marginTop: 0
+      marginTop: verticalMargin
     }
   }
 });
 const emojiNameStyle = style({
   textTransform: 'capitalize',
-  marginBottom: 5
+  color: token('color.text.mediumEmphasis', N90),
+  fontWeight: 600
 });
 const footerStyle = style({
-  marginTop: 5
+  color: token('color.text.mediumEmphasis', N90),
+  fontWeight: 300
 });
 const TOOLTIP_USERS_LIMIT = 5;
 export const ReactionTooltip = ({
@@ -41,15 +50,19 @@ export const ReactionTooltip = ({
 
   const content = /*#__PURE__*/React.createElement("div", {
     className: tooltipStyle
-  }, emojiName ? /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("ul", null, emojiName ? /*#__PURE__*/React.createElement("li", {
     className: emojiNameStyle
-  }, emojiName) : null, /*#__PURE__*/React.createElement("ul", null, users.slice(0, TOOLTIP_USERS_LIMIT).map((user, index) => {
+  }, emojiName) : null, users.slice(0, TOOLTIP_USERS_LIMIT).map((user, index) => {
     return /*#__PURE__*/React.createElement("li", {
       key: index
     }, user.displayName);
-  })), users.length > TOOLTIP_USERS_LIMIT ? /*#__PURE__*/React.createElement("span", {
+  }), users.length > TOOLTIP_USERS_LIMIT ? /*#__PURE__*/React.createElement("li", {
     className: footerStyle
-  }, "+", users.length - TOOLTIP_USERS_LIMIT, "...") : null);
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.otherUsers, {
+    values: {
+      count: users.length - TOOLTIP_USERS_LIMIT
+    }
+  }))) : null));
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: content,
     position: "bottom"

package/dist/es2019/components/Reactions.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { style } from 'typestyle';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionSelectionEvent, createReactionsRenderedEvent } from '../analytics';
 import { ReactionStatus } from '../types/ReactionStatus';

package/dist/es2019/components/Selector.js

@@ -53,8 +53,8 @@ export const defaultReactions = [{
   id: '1f525',
   shortName: ':fire:'
 }, {
-  id: '2665',
-  shortName: ':hearts:'
+  id: '2764',
+  shortName: ':heart:'
 }, {
   id: '1f632',
   shortName: ':astonished:'

package/dist/es2019/components/ShowMore.js

@@ -2,12 +2,13 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import cx from 'classnames';
 import React from 'react';
 import { style } from 'typestyle';
 import { messages } from './i18n';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 const moreEmojiContainerStyle = style({
   display: 'flex'
 });
@@ -24,12 +25,12 @@ const moreButtonStyle = style({
   verticalAlign: 'top',
   $nest: {
     '&:hover': {
-      backgroundColor: N30A
+      backgroundColor: token('color.background.transparentNeutral.hover', N30A)
     }
   }
 });
 const separatorStyle = style({
-  backgroundColor: N30A,
+  backgroundColor: token('color.border.neutral', N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

package/dist/es2019/components/i18n.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export const messages = defineMessages({
   loadingReactions: {
     id: 'fabric.reactions.loading',
@@ -14,5 +14,10 @@ export const messages = defineMessages({
     id: 'fabric.reactions.error.unexpected',
     defaultMessage: 'Something went wrong',
     description: 'Unexpected error message'
+  },
+  otherUsers: {
+    id: 'fabric.reactions.other.reacted.users',
+    defaultMessage: '{count, plural, one {and one other} other {and {count} others}}',
+    description: "The number of users that have reacted similarly, but aren't shown"
   }
 });

package/dist/es2019/i18n/en.js

@@ -2,5 +2,6 @@
 export default {
   'fabric.reactions.loading': 'Loading...',
   'fabric.reactions.more.emoji': 'More emoji',
-  'fabric.reactions.error.unexpected': 'Something went wrong'
+  'fabric.reactions.error.unexpected': 'Something went wrong',
+  'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and "{count}" others}}'
 };

package/dist/es2019/i18n/en_GB.js

@@ -2,5 +2,6 @@
 export default {
   'fabric.reactions.loading': 'Loading...',
   'fabric.reactions.more.emoji': 'More emoji',
-  'fabric.reactions.error.unexpected': 'Something went wrong'
+  'fabric.reactions.error.unexpected': 'Something went wrong',
+  'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and "{count}" others}}'
 };