@atlaskit/reactions 21.2.5 → 21.3.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/reactions
 
+## 21.3.2
+
+### Patch Changes
+
+- [`1940b04de7d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1940b04de7d) - Adding new UFO experience for contents list of reacted users should be able to be fetched reliably
+- Updated dependencies
+
+## 21.3.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 21.3.0
+
+### Minor Changes
+
+- [`8db47b60a8f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8db47b60a8f) - [ux] Updated reactions count color to be accessible, pluralize the more emojis tooltip, and stopped the reactions button click event from propagating into the reactions tooltip.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 21.2.5
 
 ### Patch Changes

package/dist/cjs/analytics/ufo.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReactionsRendered = exports.ReactionsRemove = exports.ReactionsAdd = exports.PickerRender = exports.ExperienceName = exports.ComponentName = void 0;
+exports.ReactionsRendered = exports.ReactionsRemove = exports.ReactionsAdd = exports.ReactionDetailsFetch = exports.PickerRender = exports.ExperienceName = exports.ComponentName = void 0;
 
 var _ufo = require("@atlaskit/ufo");
 
@@ -37,6 +37,7 @@ exports.ExperienceName = ExperienceName;
   ExperienceName["PICKER_OPENED"] = "reactions-picker-opened";
   ExperienceName["REACTION_ADDED"] = "reaction-added";
   ExperienceName["REACTION_REMOVED"] = "reaction-removed";
+  ExperienceName["REACTION_DETAILS_FETCHED"] = "reaction-details-fetched";
 })(ExperienceName || (exports.ExperienceName = ExperienceName = {}));
 
 var ComponentName;
@@ -49,6 +50,7 @@ exports.ComponentName = ComponentName;
 (function (ComponentName) {
   ComponentName["PICKER_RENDERED"] = "reactions-picker";
   ComponentName["REACTIONS"] = "reactions-list";
+  ComponentName["REACTION_ITEM"] = "reaction-item";
 })(ComponentName || (exports.ComponentName = ComponentName = {}));
 
 var PickerRender = new _ufo.UFOExperience(ExperienceName.PICKER_OPENED, createExperienceConfig(ComponentName.PICKER_RENDERED, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
@@ -65,9 +67,15 @@ var ReactionsRendered = new _ufo.ConcurrentExperience(ExperienceName.REACTIONS_R
 exports.ReactionsRendered = ReactionsRendered;
 var ReactionsAdd = new _ufo.ConcurrentExperience(ExperienceName.REACTION_ADDED, createExperienceConfig(ComponentName.REACTIONS, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
 /**
- * Experience when a reaction emoji gets removed/decrement
+ * Experience when a reaction details gets fetched
  */
 
 exports.ReactionsAdd = ReactionsAdd;
+var ReactionDetailsFetch = new _ufo.ConcurrentExperience(ExperienceName.REACTION_DETAILS_FETCHED, createExperienceConfig(ComponentName.REACTION_ITEM, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when a reaction emoji gets removed/decrement
+ */
+
+exports.ReactionDetailsFetch = ReactionDetailsFetch;
 var ReactionsRemove = new _ufo.ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
 exports.ReactionsRemove = ReactionsRemove;

package/dist/cjs/components/Counter.js

@@ -31,7 +31,7 @@ exports.counterTestId = counterTestId;
 var countStyle = (0, _core.css)({
   fontSize: 11,
   // TODO: nice to have a theme level token for fontSize
-  color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
+  color: (0, _tokens.token)('color.text.subtlest', _colors.N500),
   overflow: 'hidden',
   position: 'relative',
   padding: '4px 8px 4px 0',

package/dist/cjs/components/Reaction.js

@@ -112,6 +112,7 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "mounted", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseDown", function (event) {
       event.preventDefault();
+      event.stopPropagation();
 
       if (_this.props.onClick && (0, _utils.isLeftClick)(event)) {
         var _this$props = _this.props,

package/dist/cjs/components/i18n.js

@@ -14,8 +14,8 @@ var messages = (0, _reactIntlNext.defineMessages)({
     description: 'Message while reactions are being loaded'
   },
   moreEmoji: {
-    id: 'fabric.reactions.more.emoji',
-    defaultMessage: 'More emoji',
+    id: 'fabric.reactions.more.emojis',
+    defaultMessage: 'More emojis',
     description: 'Tooltip of the "show more" button in the quick reaction selector. The full emoji selector is displayed when the user clicks on it.'
   },
   unexpectedError: {

package/dist/cjs/store/ReactionsStore.js

@@ -35,9 +35,25 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Set of all available UFO experiences relating to reaction element
  */
 var ufoExperiences = {
+  /**
+   * Experience when a reaction emoji gets added
+   */
   add: Analytics.UFO.ReactionsAdd,
+
+  /**
+   * Experience when a reaction emoji gets removed/decrement
+   */
   remove: Analytics.UFO.ReactionsRemove,
-  render: Analytics.UFO.ReactionsRendered
+
+  /**
+   * Experience when the list of reactions gets rendered
+   */
+  render: Analytics.UFO.ReactionsRendered,
+
+  /**
+   * Experience when a reaction details gets fetched
+   */
+  fetchDetails: Analytics.UFO.ReactionDetailsFetch
 };
 exports.ufoExperiences = ufoExperiences;
 
@@ -220,7 +236,22 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "toggleReaction", this.withReaction(this.doRemoveReaction, this.doAddReaction));
     (0, _defineProperty2.default)(this, "addReaction", this.withReaction(this.flash, this.doAddReaction));
     (0, _defineProperty2.default)(this, "getDetailedReaction", function (containerAri, ari, emojiId) {
-      _this.client.getDetailedReaction(containerAri, ari, emojiId).then(_this.handleDetailedReactionResponse);
+      var exp = ufoExperiences.fetchDetails.getInstance("".concat(ari, "|").concat(emojiId));
+      exp.start();
+
+      _this.client.getDetailedReaction(containerAri, ari, emojiId).then(function (summary) {
+        // ufo get reaction details success
+        exp.success();
+
+        _this.handleDetailedReactionResponse(summary);
+      }).catch(function (error) {
+        // ufo get reaction details failure
+        exp.failure({
+          metadata: {
+            error: error
+          }
+        });
+      });
     });
     (0, _defineProperty2.default)(this, "getState", function () {
       return _this.state;

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.2.5"
+	"version": "21.3.2"
 }

package/dist/es2019/analytics/ufo.js

@@ -32,6 +32,7 @@ export let ExperienceName;
   ExperienceName["PICKER_OPENED"] = "reactions-picker-opened";
   ExperienceName["REACTION_ADDED"] = "reaction-added";
   ExperienceName["REACTION_REMOVED"] = "reaction-removed";
+  ExperienceName["REACTION_DETAILS_FETCHED"] = "reaction-details-fetched";
 })(ExperienceName || (ExperienceName = {}));
 
 export let ComponentName;
@@ -42,6 +43,7 @@ export let ComponentName;
 (function (ComponentName) {
   ComponentName["PICKER_RENDERED"] = "reactions-picker";
   ComponentName["REACTIONS"] = "reactions-list";
+  ComponentName["REACTION_ITEM"] = "reaction-item";
 })(ComponentName || (ComponentName = {}));
 
 export const PickerRender = new UFOExperience(ExperienceName.PICKER_OPENED, createExperienceConfig(ComponentName.PICKER_RENDERED, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
@@ -55,6 +57,11 @@ export const ReactionsRendered = new ConcurrentExperience(ExperienceName.REACTIO
  */
 
 export const ReactionsAdd = new ConcurrentExperience(ExperienceName.REACTION_ADDED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when a reaction details gets fetched
+ */
+
+export const ReactionDetailsFetch = new ConcurrentExperience(ExperienceName.REACTION_DETAILS_FETCHED, createExperienceConfig(ComponentName.REACTION_ITEM, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
 /**
  * Experience when a reaction emoji gets removed/decrement
  */

package/dist/es2019/components/Counter.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
-import { N90, B400 } from '@atlaskit/theme/colors';
+import { N500, B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React, { memo } from 'react';
 import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
@@ -9,7 +9,7 @@ export const counterTestId = 'counter-container';
 export const countStyle = css({
   fontSize: 11,
   // TODO: nice to have a theme level token for fontSize
-  color: token('color.text.subtlest', N90),
+  color: token('color.text.subtlest', N500),
   overflow: 'hidden',
   position: 'relative',
   padding: '4px 8px 4px 0',

package/dist/es2019/components/Reaction.js

@@ -68,6 +68,7 @@ class ReactionWithoutAnalytics extends PureComponent {
 
     _defineProperty(this, "handleMouseDown", event => {
       event.preventDefault();
+      event.stopPropagation();
 
       if (this.props.onClick && isLeftClick(event)) {
         const {

package/dist/es2019/components/i18n.js

@@ -6,8 +6,8 @@ export const messages = defineMessages({
     description: 'Message while reactions are being loaded'
   },
   moreEmoji: {
-    id: 'fabric.reactions.more.emoji',
-    defaultMessage: 'More emoji',
+    id: 'fabric.reactions.more.emojis',
+    defaultMessage: 'More emojis',
     description: 'Tooltip of the "show more" button in the quick reaction selector. The full emoji selector is displayed when the user clicks on it.'
   },
   unexpectedError: {

package/dist/es2019/store/ReactionsStore.js

@@ -9,9 +9,25 @@ import { isRealErrorFromService } from './utils';
  * Set of all available UFO experiences relating to reaction element
  */
 export const ufoExperiences = {
+  /**
+   * Experience when a reaction emoji gets added
+   */
   add: Analytics.UFO.ReactionsAdd,
+
+  /**
+   * Experience when a reaction emoji gets removed/decrement
+   */
   remove: Analytics.UFO.ReactionsRemove,
-  render: Analytics.UFO.ReactionsRendered
+
+  /**
+   * Experience when the list of reactions gets rendered
+   */
+  render: Analytics.UFO.ReactionsRendered,
+
+  /**
+   * Experience when a reaction details gets fetched
+   */
+  fetchDetails: Analytics.UFO.ReactionDetailsFetch
 };
 export class MemoryReactionsStore {
   constructor(client, state = {
@@ -188,7 +204,20 @@ export class MemoryReactionsStore {
     _defineProperty(this, "addReaction", this.withReaction(this.flash, this.doAddReaction));
 
     _defineProperty(this, "getDetailedReaction", (containerAri, ari, emojiId) => {
-      this.client.getDetailedReaction(containerAri, ari, emojiId).then(this.handleDetailedReactionResponse);
+      const exp = ufoExperiences.fetchDetails.getInstance(`${ari}|${emojiId}`);
+      exp.start();
+      this.client.getDetailedReaction(containerAri, ari, emojiId).then(summary => {
+        // ufo get reaction details success
+        exp.success();
+        this.handleDetailedReactionResponse(summary);
+      }).catch(error => {
+        // ufo get reaction details failure
+        exp.failure({
+          metadata: {
+            error
+          }
+        });
+      });
     });
 
     _defineProperty(this, "getState", () => this.state);

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.2.5"
+	"version": "21.3.2"
 }

package/dist/esm/analytics/ufo.js

@@ -32,6 +32,7 @@ export var ExperienceName;
   ExperienceName["PICKER_OPENED"] = "reactions-picker-opened";
   ExperienceName["REACTION_ADDED"] = "reaction-added";
   ExperienceName["REACTION_REMOVED"] = "reaction-removed";
+  ExperienceName["REACTION_DETAILS_FETCHED"] = "reaction-details-fetched";
 })(ExperienceName || (ExperienceName = {}));
 
 export var ComponentName;
@@ -42,6 +43,7 @@ export var ComponentName;
 (function (ComponentName) {
   ComponentName["PICKER_RENDERED"] = "reactions-picker";
   ComponentName["REACTIONS"] = "reactions-list";
+  ComponentName["REACTION_ITEM"] = "reaction-item";
 })(ComponentName || (ComponentName = {}));
 
 export var PickerRender = new UFOExperience(ExperienceName.PICKER_OPENED, createExperienceConfig(ComponentName.PICKER_RENDERED, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
@@ -55,6 +57,11 @@ export var ReactionsRendered = new ConcurrentExperience(ExperienceName.REACTIONS
  */
 
 export var ReactionsAdd = new ConcurrentExperience(ExperienceName.REACTION_ADDED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when a reaction details gets fetched
+ */
+
+export var ReactionDetailsFetch = new ConcurrentExperience(ExperienceName.REACTION_DETAILS_FETCHED, createExperienceConfig(ComponentName.REACTION_ITEM, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
 /**
  * Experience when a reaction emoji gets removed/decrement
  */

package/dist/esm/components/Counter.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core';
-import { N90, B400 } from '@atlaskit/theme/colors';
+import { N500, B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import React, { memo } from 'react';
 import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
@@ -9,7 +9,7 @@ export var counterTestId = 'counter-container';
 export var countStyle = css({
   fontSize: 11,
   // TODO: nice to have a theme level token for fontSize
-  color: token('color.text.subtlest', N90),
+  color: token('color.text.subtlest', N500),
   overflow: 'hidden',
   position: 'relative',
   padding: '4px 8px 4px 0',

package/dist/esm/components/Reaction.js

@@ -86,6 +86,7 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "handleMouseDown", function (event) {
       event.preventDefault();
+      event.stopPropagation();
 
       if (_this.props.onClick && isLeftClick(event)) {
         var _this$props = _this.props,

package/dist/esm/components/i18n.js

@@ -6,8 +6,8 @@ export var messages = defineMessages({
     description: 'Message while reactions are being loaded'
   },
   moreEmoji: {
-    id: 'fabric.reactions.more.emoji',
-    defaultMessage: 'More emoji',
+    id: 'fabric.reactions.more.emojis',
+    defaultMessage: 'More emojis',
     description: 'Tooltip of the "show more" button in the quick reaction selector. The full emoji selector is displayed when the user clicks on it.'
   },
   unexpectedError: {

package/dist/esm/store/ReactionsStore.js

@@ -16,9 +16,25 @@ import { isRealErrorFromService } from './utils';
  * Set of all available UFO experiences relating to reaction element
  */
 export var ufoExperiences = {
+  /**
+   * Experience when a reaction emoji gets added
+   */
   add: Analytics.UFO.ReactionsAdd,
+
+  /**
+   * Experience when a reaction emoji gets removed/decrement
+   */
   remove: Analytics.UFO.ReactionsRemove,
-  render: Analytics.UFO.ReactionsRendered
+
+  /**
+   * Experience when the list of reactions gets rendered
+   */
+  render: Analytics.UFO.ReactionsRendered,
+
+  /**
+   * Experience when a reaction details gets fetched
+   */
+  fetchDetails: Analytics.UFO.ReactionDetailsFetch
 };
 export var MemoryReactionsStore = /*#__PURE__*/function () {
   function MemoryReactionsStore(client) {
@@ -214,7 +230,22 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
     _defineProperty(this, "addReaction", this.withReaction(this.flash, this.doAddReaction));
 
     _defineProperty(this, "getDetailedReaction", function (containerAri, ari, emojiId) {
-      _this.client.getDetailedReaction(containerAri, ari, emojiId).then(_this.handleDetailedReactionResponse);
+      var exp = ufoExperiences.fetchDetails.getInstance("".concat(ari, "|").concat(emojiId));
+      exp.start();
+
+      _this.client.getDetailedReaction(containerAri, ari, emojiId).then(function (summary) {
+        // ufo get reaction details success
+        exp.success();
+
+        _this.handleDetailedReactionResponse(summary);
+      }).catch(function (error) {
+        // ufo get reaction details failure
+        exp.failure({
+          metadata: {
+            error: error
+          }
+        });
+      });
     });
 
     _defineProperty(this, "getState", function () {

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.2.5"
+	"version": "21.3.2"
 }

package/dist/types/analytics/ufo.d.ts

@@ -6,14 +6,16 @@ export declare enum ExperienceName {
     REACTIONS_RENDERED = "reactions-rendered",
     PICKER_OPENED = "reactions-picker-opened",
     REACTION_ADDED = "reaction-added",
-    REACTION_REMOVED = "reaction-removed"
+    REACTION_REMOVED = "reaction-removed",
+    REACTION_DETAILS_FETCHED = "reaction-details-fetched"
 }
 /**
  * UFO types of components been instrumented
  */
 export declare enum ComponentName {
     PICKER_RENDERED = "reactions-picker",
-    REACTIONS = "reactions-list"
+    REACTIONS = "reactions-list",
+    REACTION_ITEM = "reaction-item"
 }
 /**
  * Experience when the emoji picker is opened
@@ -27,6 +29,10 @@ export declare const ReactionsRendered: ConcurrentExperience;
  * Experience when a reaction emoji gets added
  */
 export declare const ReactionsAdd: ConcurrentExperience;
+/**
+ * Experience when a reaction details gets fetched
+ */
+export declare const ReactionDetailsFetch: ConcurrentExperience;
 /**
  * Experience when a reaction emoji gets removed/decrement
  */

package/dist/types/client/ReactionClient.d.ts

@@ -4,8 +4,22 @@ export declare type ReactionRequest<T> = (containerAri: string, ari: string, emo
     [k: string]: any;
 }) => Promise<T>;
 export interface ReactionClient {
+    /**
+     * Fetch list of reactions for a given ARI.
+     * @param containerAri F
+     * @param aris
+     */
     getReactions(containerAri: string, aris: string[]): Promise<Reactions>;
+    /**
+     * Fetch details for a given reaction.
+     */
     getDetailedReaction: ReactionRequest<ReactionSummary>;
+    /**
+     * Fetch request when adding a reaction to a container.
+     */
     addReaction: ReactionRequest<ReactionSummary[]>;
+    /**
+     * Fetch request when removing a reaction from a container.
+     */
     deleteReaction: ReactionRequest<ReactionSummary[]>;
 }

package/dist/types/store/ReactionsStore.d.ts

@@ -20,9 +20,22 @@ export interface StoreMetadata {
  * Set of all available UFO experiences relating to reaction element
  */
 export declare const ufoExperiences: {
+    /**
+     * Experience when a reaction emoji gets added
+     */
     add: import("@atlaskit/ufo").ConcurrentExperience;
+    /**
+     * Experience when a reaction emoji gets removed/decrement
+     */
     remove: import("@atlaskit/ufo").ConcurrentExperience;
+    /**
+     * Experience when the list of reactions gets rendered
+     */
     render: import("@atlaskit/ufo").ConcurrentExperience;
+    /**
+     * Experience when a reaction details gets fetched
+     */
+    fetchDetails: import("@atlaskit/ufo").ConcurrentExperience;
 };
 export interface ReactionsStore extends Types.Actions {
     getState: () => State;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "21.2.5",
+  "version": "21.3.2",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,12 +30,12 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/ds-lib": "^1.4.0",
-    "@atlaskit/emoji": "^64.5.0",
+    "@atlaskit/emoji": "^64.7.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/motion": "^1.0.3",
+    "@atlaskit/motion": "^1.1.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/ufo": "^0.1.0",
     "@atlaskit/util-service-support": "^6.1.0",