@atlaskit/reactions 21.6.2 → 21.8.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/reactions
 
+## 21.8.0
+
+### Minor Changes
+
+- [`cb37ece1f9e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb37ece1f9e) - Add aria expanded and aria cotrols to reaction picker toggle
+
+### Patch Changes
+
+- [`d74d5065a25`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d74d5065a25) - minor analytics update
+- [`2d0d8c066d4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d0d8c066d4) - Upgrade emotion library inside Reactions to use version 11
+- [`ee2a087d647`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ee2a087d647) - Reducing Enzyme dependencies across reactions unit tests and move the testint-library
+- Updated dependencies
+
+## 21.7.0
+
+### Minor Changes
+
+- [`e2635f36d53`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e2635f36d53) - Adds new optional prop to <ReactionPicker /> component to setup the content for the tooltip on the add new reaction element
+  [ux] This adds a border around the Add reaction button according with new design requirements
+- [`ce1ceee9114`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ce1ceee9114) - Refactor props of <Reactions /> component to better infer types from quickReactionEmojiIds to quickReactionEmojis
+
+### Patch Changes
+
+- [`4b6f775e6c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4b6f775e6c0) - update reaction picker position at the edge of window
+- [`b2be1d1c8d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2be1d1c8d2) - removing title of reaction buttons
+- [`458aabb9add`](https://bitbucket.org/atlassian/atlassian-frontend/commits/458aabb9add) - Remove tooltip when reactions are disabled
+- [`a62cf3c2b49`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a62cf3c2b49) - fix emoji upload in reaction picker
+- Updated dependencies
+
 ## 21.6.2
 
 ### Patch Changes

package/dist/cjs/MockReactionsClient.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getUser = exports.getReactionSummary = exports.containerAri = exports.ari = exports.MockReactionsClient = void 0;
+exports.mockData = exports.getUser = exports.getReactionSummary = exports.containerAri = exports.ari = exports.MockReactionsClient = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -61,6 +61,8 @@ var mockData = (0, _defineProperty2.default)({}, getReactionKey(containerAri, ar
  * Mocked version of the client to fetch user information
  */
 
+exports.mockData = mockData;
+
 var MockReactionsClient = /*#__PURE__*/function () {
   function MockReactionsClient() {
     var _this = this;

package/dist/cjs/analytics/analytics.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createRestSucceededEvent = exports.createRestFailedEvent = exports.createReactionsRenderedEvent = exports.createReactionSelectionEvent = exports.createReactionHoveredEvent = exports.createReactionClickedEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
+exports.extractErrorInfo = exports.createRestSucceededEvent = exports.createRestFailedEvent = exports.createReactionsRenderedEvent = exports.createReactionSelectionEvent = exports.createReactionHoveredEvent = exports.createReactionClickedEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -137,5 +137,24 @@ var createReactionClickedEvent = function createReactionClickedEvent(added, emoj
     emojiId: emojiId
   });
 };
+/**
+ * Used for store failure metadata for analytics
+ * @param error The error could be a service error with {code, reason} or an Error
+ * @returns any
+ */
 
-exports.createReactionClickedEvent = createReactionClickedEvent;
+
+exports.createReactionClickedEvent = createReactionClickedEvent;
+
+var extractErrorInfo = function extractErrorInfo(error) {
+  if (error instanceof Error) {
+    return {
+      name: error.name,
+      message: error.message
+    };
+  }
+
+  return error;
+};
+
+exports.extractErrorInfo = extractErrorInfo;

package/dist/cjs/components/Counter/Counter.js

@@ -7,16 +7,18 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RENDER_COUNTER_WRAPPER_TESTID = exports.RENDER_COUNTER_TESTID = exports.Counter = void 0;
+exports.getLabel = exports.RENDER_LABEL_TESTID = exports.RENDER_COUNTER_TESTID = exports.RENDER_COMPONENT_WRAPPER = exports.Counter = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _motion = require("@atlaskit/motion");
 
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
 
+var _shared = require("../../shared");
+
 var styles = _interopRequireWildcard(require("./styles"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -27,68 +29,74 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
 
 /**
- * Test id for wrapper div
+ * Test id for component top level div
+ */
+var RENDER_COMPONENT_WRAPPER = 'counter-wrapper';
+/**
+ * Test id for wrapper div of the counter inside the slider
  */
+
+exports.RENDER_COMPONENT_WRAPPER = RENDER_COMPONENT_WRAPPER;
 var RENDER_COUNTER_TESTID = 'counter-container';
 /**
- * Test id for container div
+ * Counter label value wrapper div
  */
 
 exports.RENDER_COUNTER_TESTID = RENDER_COUNTER_TESTID;
-var RENDER_COUNTER_WRAPPER_TESTID = 'counter-wrapper';
-exports.RENDER_COUNTER_WRAPPER_TESTID = RENDER_COUNTER_WRAPPER_TESTID;
-
+var RENDER_LABEL_TESTID = 'counter_label_wrapper';
+exports.RENDER_LABEL_TESTID = RENDER_LABEL_TESTID;
+
+var getLabel = function getLabel(value, overLimitLabel, limit) {
+  // Check if reached limit
+  if (limit && value >= limit) {
+    return overLimitLabel || '';
+  } else if (value === 0) {
+    return '';
+  } else {
+    return value.toString();
+  }
+};
 /**
  * Display reaction count next to the emoji button
  */
+
+
+exports.getLabel = getLabel;
+
 var Counter = function Counter(_ref) {
   var _ref$highlight = _ref.highlight,
       highlight = _ref$highlight === void 0 ? false : _ref$highlight,
       _ref$limit = _ref.limit,
-      limit = _ref$limit === void 0 ? 1000 : _ref$limit,
+      limit = _ref$limit === void 0 ? _shared.constants.DEFAULT_REACTION_TOP_LIMIT : _ref$limit,
       _ref$overLimitLabel = _ref.overLimitLabel,
-      overLimitLabel = _ref$overLimitLabel === void 0 ? '1k+' : _ref$overLimitLabel,
+      overLimitLabel = _ref$overLimitLabel === void 0 ? _shared.constants.DEFAULT_OVER_THE_LIMIT_REACTION_LABEL : _ref$overLimitLabel,
       className = _ref.className,
       value = _ref.value,
       _ref$animationDuratio = _ref.animationDuration,
       animationDuration = _ref$animationDuratio === void 0 ? _motion.mediumDurationMs : _ref$animationDuratio;
-
-  var hasReachedLimit = function hasReachedLimit(value) {
-    return limit && value >= limit;
-  };
-
-  var getLabel = function getLabel(value) {
-    if (hasReachedLimit(value)) {
-      return overLimitLabel || '';
-    } else if (value === 0) {
-      return '';
-    } else {
-      return value.toString();
-    }
-  };
-
   var previousValue = (0, _usePreviousValue.default)(value);
-  var label = getLabel(value);
+  var label = getLabel(value, overLimitLabel, limit);
   var increase = previousValue ? previousValue < value : false;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     className: className,
-    "data-testid": RENDER_COUNTER_WRAPPER_TESTID,
+    "data-testid": RENDER_COMPONENT_WRAPPER,
     css: [styles.countStyle, {
       width: label.length * 7
     }]
-  }, (0, _core.jsx)(_motion.ExitingPersistence, null, (0, _core.jsx)(_motion.SlideIn, {
+  }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_motion.SlideIn, {
     enterFrom: increase ? 'bottom' : 'top',
     key: value,
     duration: animationDuration
   }, function (motion, direction) {
-    return (0, _core.jsx)("div", {
+    return (0, _react2.jsx)("div", {
       ref: motion.ref,
-      css: [styles.containerStyle, (0, _core.css)({
+      css: [styles.containerStyle, (0, _react2.css)({
         position: direction === 'exiting' ? 'absolute' : undefined
       })],
       className: motion.className,
       "data-testid": RENDER_COUNTER_TESTID
-    }, (0, _core.jsx)("div", {
+    }, (0, _react2.jsx)("div", {
+      "data-testid": RENDER_LABEL_TESTID,
       css: highlight && styles.highlightStyle,
       key: value
     }, label));

package/dist/cjs/components/Counter/index.js

@@ -11,16 +11,22 @@ Object.defineProperty(exports, "Counter", {
     return _Counter.Counter;
   }
 });
+Object.defineProperty(exports, "RENDER_COMPONENT_WRAPPER", {
+  enumerable: true,
+  get: function get() {
+    return _Counter.RENDER_COMPONENT_WRAPPER;
+  }
+});
 Object.defineProperty(exports, "RENDER_COUNTER_TESTID", {
   enumerable: true,
   get: function get() {
     return _Counter.RENDER_COUNTER_TESTID;
   }
 });
-Object.defineProperty(exports, "RENDER_COUNTER_WRAPPER_TESTID", {
+Object.defineProperty(exports, "RENDER_LABEL_TESTID", {
   enumerable: true,
   get: function get() {
-    return _Counter.RENDER_COUNTER_WRAPPER_TESTID;
+    return _Counter.RENDER_LABEL_TESTID;
   }
 });
 exports.styles = void 0;

package/dist/cjs/components/Counter/styles.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.highlightStyle = exports.countStyle = exports.containerStyle = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
 /** @jsx jsx */
-var countStyle = (0, _core.css)({
+var countStyle = (0, _react.css)({
   fontSize: 11,
   color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
   overflow: 'hidden',
@@ -21,12 +21,12 @@ var countStyle = (0, _core.css)({
   lineHeight: '14px'
 });
 exports.countStyle = countStyle;
-var highlightStyle = (0, _core.css)({
+var highlightStyle = (0, _react.css)({
   color: (0, _tokens.token)('color.text.selected', _colors.B400),
   fontWeight: 600
 });
 exports.highlightStyle = highlightStyle;
-var containerStyle = (0, _core.css)({
+var containerStyle = (0, _react.css)({
   display: 'flex',
   flexDirection: 'column'
 });

package/dist/cjs/components/EmojiButton/EmojiButton.js

@@ -11,7 +11,9 @@ exports.RENDER_BUTTON_TESTID = exports.EmojiButton = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _reactIntlNext = require("react-intl-next");
+
+var _react2 = require("@emotion/react");
 
 var _emoji = require("@atlaskit/emoji");
 
@@ -43,13 +45,16 @@ var EmojiButton = function EmojiButton(_ref) {
     }
   };
 
-  return (0, _core.jsx)("button", {
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react2.jsx)("button", {
     "data-testid": RENDER_BUTTON_TESTID,
     onClick: onButtonClick,
-    title: emojiId.shortName,
+    "aria-label": intl.formatMessage(_shared.i18n.messages.reactWithEmoji, {
+      emoji: emojiId.shortName
+    }),
     type: "button",
     css: styles.emojiButtonStyle
-  }, (0, _core.jsx)(_emoji.ResourcedEmoji, {
+  }, (0, _react2.jsx)(_emoji.ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId
   }));

package/dist/cjs/components/EmojiButton/styles.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.emojiButtonStyle = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 /** @jsx jsx */
-var emojiButtonStyle = (0, _core.css)({
+var emojiButtonStyle = (0, _react.css)({
   outline: 'none',
   display: 'flex',
   backgroundColor: 'transparent',

package/dist/cjs/components/FlashAnimation/FlashAnimation.js

@@ -11,7 +11,7 @@ exports.RENDER_FLASHANIMATION_TESTID = exports.FlashAnimation = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var styles = _interopRequireWildcard(require("./styles"));
 
@@ -32,7 +32,7 @@ var RENDER_FLASHANIMATION_TESTID = 'flash-animation';
 exports.RENDER_FLASHANIMATION_TESTID = RENDER_FLASHANIMATION_TESTID;
 
 var FlashAnimation = function FlashAnimation(props) {
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     className: props.className,
     css: [styles.containerStyle, props.flash && styles.flashStyle],
     "data-testid": RENDER_FLASHANIMATION_TESTID

package/dist/cjs/components/FlashAnimation/styles.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.flashStyle = exports.flashAnimation = exports.containerStyle = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -13,7 +13,7 @@ var _tokens = require("@atlaskit/tokens");
 
 /** @jsx jsx */
 var flashTime = 700;
-var flashAnimation = (0, _core.keyframes)({
+var flashAnimation = (0, _react.keyframes)({
   '0%': {
     backgroundColor: 'transparent'
   },
@@ -31,12 +31,12 @@ var flashAnimation = (0, _core.keyframes)({
   }
 });
 exports.flashAnimation = flashAnimation;
-var containerStyle = (0, _core.css)({
+var containerStyle = (0, _react.css)({
   width: '100%',
   height: '100%'
 });
 exports.containerStyle = containerStyle;
-var flashStyle = (0, _core.css)({
+var flashStyle = (0, _react.css)({
   animation: "".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out")
 });
 exports.flashStyle = flashStyle;

package/dist/cjs/components/Reaction/Reaction.js

@@ -17,7 +17,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _reactIntlNext = require("react-intl-next");
+
+var _react2 = require("@emotion/react");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -87,10 +89,7 @@ var Reaction = function Reaction(_ref) {
             case 2:
               emojiResource = _context.sent;
               _context.next = 5;
-              return emojiResource.findByEmojiId({
-                shortName: '',
-                id: reaction.emojiId
-              });
+              return emojiResource.findById(reaction.emojiId);
 
             case 5:
               foundEmoji = _context.sent;
@@ -132,29 +131,33 @@ var Reaction = function Reaction(_ref) {
       onMouseEnter(reaction, event);
     }
   }, [createAnalyticsEvent, reaction, onMouseEnter]);
-  return (0, _core.jsx)(_ReactionTooltip.ReactionTooltip, {
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (0, _react2.jsx)(_ReactionTooltip.ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction
-  }, (0, _core.jsx)("button", {
+  }, (0, _react2.jsx)("button", {
     className: className,
     css: [styles.reactionStyle, reaction.reacted && styles.reactedStyle],
-    title: reaction.emojiId,
+    "aria-label": intl.formatMessage(_shared.i18n.messages.reactWithEmoji, {
+      emoji: emojiName
+    }),
     type: "button",
+    "data-emoji-id": reaction.emojiId,
     "data-testid": RENDER_REACTION_TESTID,
     onMouseUp: handleMouseUp,
     onMouseEnter: handleMouseEnter
-  }, (0, _core.jsx)(_FlashAnimation.FlashAnimation, {
+  }, (0, _react2.jsx)(_FlashAnimation.FlashAnimation, {
     flash: flash,
     css: styles.flashStyle
-  }, (0, _core.jsx)("div", {
+  }, (0, _react2.jsx)("div", {
     css: [styles.emojiStyle, reaction.count === 0 && {
       padding: '4px 2px 4px 10px'
     }]
-  }, (0, _core.jsx)(_emoji.ResourcedEmoji, {
+  }, (0, _react2.jsx)(_emoji.ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
     fitToHeight: 16
-  })), (0, _core.jsx)(_Counter.Counter, {
+  })), (0, _react2.jsx)(_Counter.Counter, {
     value: reaction.count,
     highlight: reaction.reacted
   }))));

package/dist/cjs/components/Reaction/styles.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.reactionStyle = exports.reactedStyle = exports.flashStyle = exports.flashHeight = exports.emojiStyle = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -23,13 +23,13 @@ var akHeight = 24;
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
 
-var emojiStyle = (0, _core.css)({
+var emojiStyle = (0, _react.css)({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
   padding: '4px 4px 4px 8px'
 });
 exports.emojiStyle = emojiStyle;
-var reactionStyle = (0, _core.css)({
+var reactionStyle = (0, _react.css)({
   outline: 'none',
   display: 'flex',
   flexDirection: 'row',
@@ -50,7 +50,7 @@ var reactionStyle = (0, _core.css)({
   }
 });
 exports.reactionStyle = reactionStyle;
-var reactedStyle = (0, _core.css)({
+var reactedStyle = (0, _react.css)({
   backgroundColor: (0, _tokens.token)('color.background.selected', _colors.B50),
   borderColor: (0, _tokens.token)('color.border.selected', _colors.B300),
   '&:hover': {
@@ -61,7 +61,7 @@ exports.reactedStyle = reactedStyle;
 var flashHeight = akHeight - 2; // height without the 1px border
 
 exports.flashHeight = flashHeight;
-var flashStyle = (0, _core.css)({
+var flashStyle = (0, _react.css)({
   display: 'flex',
   flexDirection: 'row',
   borderRadius: '10px',