@atlaskit/reactions 22.2.0 → 22.2.1

package/dist/esm/store/MemoryReactionsStore.js

@@ -1,11 +1,8 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { Analytics, UFO } from '../analytics';
 import * as Types from '../types';
 import { batch, batchByKey } from './batched';
@@ -14,33 +11,31 @@ import { isRealErrorFromService } from './utils';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../analytics/constants';
 import { sampledReactionsRendered } from '../analytics/ufo';
 import { extractErrorInfo } from '../analytics/analytics';
+
 /**
  * Set of all available UFO experiences relating to reaction element
  */
-
 export var ufoExperiences = {
   /**
    * Experience when a reaction emoji gets added
    */
   add: UFO.ReactionsAdd,
-
   /**
    * Experience when a reaction emoji gets removed/decrement
    */
   remove: UFO.ReactionsRemove,
-
   /**
    * Experience when the list of reactions gets rendered with sampling
    */
   render: function render(instanceId) {
     return sampledReactionsRendered(instanceId);
   },
-
   /**
    * Experience when a reaction details gets fetched
    */
   fetchDetails: UFO.ReactionDetailsFetch
 };
+
 /**
  * Optional metadata information in the store used in sending the API client requests
  */
@@ -49,56 +44,45 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
   /**
    * default initial store data
    */
+
   function MemoryReactionsStore(client, state, metadata) {
     var _this = this;
-
     _classCallCheck(this, MemoryReactionsStore);
-
     _defineProperty(this, "callbacks", []);
-
     _defineProperty(this, "initialState", {
       reactions: {},
       flash: {}
     });
-
     _defineProperty(this, "setState", function (newState) {
       _this.state = _objectSpread(_objectSpread({}, _this.state), newState);
-
       _this.triggerOnChange();
     });
-
     _defineProperty(this, "triggerOnChange", batch(function () {
       return _this.callbacks.forEach(function (callback) {
         return callback(_this.state);
       });
     }));
-
     _defineProperty(this, "setReactions", function (containerAri, ari, reactions) {
       _this.setState({
         reactions: _objectSpread(_objectSpread({}, _this.state.reactions), {}, _defineProperty({}, "".concat(containerAri, "|").concat(ari), reactions))
       });
     });
-
     _defineProperty(this, "handleDetailedReactionResponse", function (detailedReaction) {
       var containerAri = detailedReaction.containerAri,
-          ari = detailedReaction.ari,
-          emojiId = detailedReaction.emojiId;
-
+        ari = detailedReaction.ari,
+        emojiId = detailedReaction.emojiId;
       _this.withReaction(function (reaction) {
         return _objectSpread(_objectSpread({}, reaction), {}, {
           users: detailedReaction.users
         });
       })(containerAri, ari, emojiId);
     });
-
     _defineProperty(this, "flash", function (reaction) {
       _this.setFlash(reaction.containerAri, reaction.ari, reaction.emojiId, true);
-
       window.setTimeout(function () {
         return _this.setFlash(reaction.containerAri, reaction.ari, reaction.emojiId, false);
       }, 700);
     });
-
     _defineProperty(this, "optmisticUpdate", function (containerAri, ari, emojiId) {
       return function (updater) {
         _this.withReadyReaction(containerAri, ari)(function (reactionState) {
@@ -107,17 +91,14 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
             if (reaction.emojiId === emojiId) {
               found = true;
               var updated = updater(reaction);
-
               if (updated) {
                 return _objectSpread(_objectSpread({}, updated), {}, {
                   optimisticallyUpdated: true
                 });
               }
             }
-
             return reaction;
           });
-
           if (!found) {
             var updated = updater({
               containerAri: containerAri,
@@ -126,30 +107,24 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
               count: 0,
               reacted: false
             });
-
             if (updated) {
               reactions.push(_objectSpread(_objectSpread({}, updated), {}, {
                 optimisticallyUpdated: true
               }));
             }
           }
-
           return utils.readyState(reactions);
         });
       };
     });
-
     _defineProperty(this, "doAddReaction", function (reaction) {
       var containerAri = reaction.containerAri,
-          ari = reaction.ari,
-          emojiId = reaction.emojiId;
-
+        ari = reaction.ari,
+        emojiId = reaction.emojiId;
       _this.optmisticUpdate(containerAri, ari, emojiId)(utils.addOne);
-
       _this.flash(reaction);
-
-      var exp = ufoExperiences.add.getInstance("".concat(ari, "|").concat(emojiId)); // ufo start reaction experience
-
+      var exp = ufoExperiences.add.getInstance("".concat(ari, "|").concat(emojiId));
+      // ufo start reaction experience
       exp.start();
       exp.addMetadata({
         source: 'MemoryReactionsStore',
@@ -158,18 +133,16 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         containerAri: containerAri,
         emojiId: emojiId
       });
-
       _this.client.addReaction(containerAri, ari, emojiId, _this.metadata).then(function (_) {
         if (_this.createAnalyticsEvent) {
           Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'addReaction');
-        } // ufo add reaction success
-
-
+        }
+        // ufo add reaction success
         exp.success();
       }).catch(function (error) {
         if (isRealErrorFromService(error.code)) {
-          _this.createAnalyticsEvent && Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'addReaction', error.code); // ufo add reaction failure
-
+          _this.createAnalyticsEvent && Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'addReaction', error.code);
+          // ufo add reaction failure
           exp.failure({
             metadata: {
               error: extractErrorInfo(error),
@@ -177,16 +150,16 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
             }
           });
         }
-
         return Promise.reject(error);
       });
     });
-
     _defineProperty(this, "doRemoveReaction", function (reaction) {
       var containerAri = reaction.containerAri,
-          ari = reaction.ari,
-          emojiId = reaction.emojiId;
-      var exp = ufoExperiences.remove.getInstance("".concat(ari, "|").concat(emojiId)); // ufo start reaction experience
+        ari = reaction.ari,
+        emojiId = reaction.emojiId;
+      var exp = ufoExperiences.remove.getInstance("".concat(ari, "|").concat(emojiId));
+
+      // ufo start reaction experience
 
       exp.start();
       exp.addMetadata({
@@ -196,9 +169,7 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         containerAri: containerAri,
         emojiId: emojiId
       });
-
       _this.optmisticUpdate(containerAri, ari, emojiId)(utils.removeOne);
-
       _this.client.deleteReaction(containerAri, ari, emojiId, _this.metadata).then(function (_) {
         // ufo add reaction success
         exp.success();
@@ -212,19 +183,17 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         });
       });
     });
-
     _defineProperty(this, "setCreateAnalyticsEvent", function (createAnalyticsEvent) {
       _this.createAnalyticsEvent = createAnalyticsEvent;
     });
-
     _defineProperty(this, "getReactions", batchByKey(function (containerAri, aris) {
       /**
        * TODO:
        * All reactions are usually fetched in a single call to reactions-service. Need to check why "getReactions" gets called randomly 1-2 times everytime on each fetch request despite using same containerAri.
        */
       var sampledExp = ufoExperiences.render(containerAri);
-      var arisArr = aris.reduce(utils.flattenAris); // ufo start reaction experience
-
+      var arisArr = aris.reduce(utils.flattenAris);
+      // ufo start reaction experience
       sampledExp.start({
         samplingRate: SAMPLING_RATE_REACTIONS_RENDERED_EXP
       });
@@ -234,27 +203,22 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         containerAri: containerAri,
         aris: arisArr.join(',')
       });
-
       _this.client.getReactions(containerAri, arisArr).then(function (value) {
         Object.keys(value).map(function (ari) {
           var reactionsState = _this.getReactionsState(containerAri, ari);
-
           var reactions = reactionsState && reactionsState.status === Types.ReactionStatus.ready ? reactionsState.reactions : undefined;
-
           _this.setReactions(containerAri, ari, utils.readyState(value[ari].sort(utils.getReactionsSortFunction(reactions))));
         });
       }).then(function () {
         if (_this.createAnalyticsEvent) {
           Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'getReactions');
         }
-
         sampledExp.success();
       }).catch(function (error) {
         if (isRealErrorFromService(error.code)) {
           if (_this.createAnalyticsEvent) {
             Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'getReactions');
           }
-
           sampledExp.failure({
             metadata: {
               error: extractErrorInfo(error),
@@ -262,26 +226,20 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
             }
           });
         }
-
         var reactionsState = arisArr.reduce(function (acc, ari) {
           return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, "".concat(containerAri, "|").concat(ari), {
             reactions: [],
             status: Types.ReactionStatus.error
           }));
         }, {});
-
         _this.setState(_objectSpread(_objectSpread({}, _this.state), {}, {
           reactions: _objectSpread(_objectSpread({}, _this.state.reactions), reactionsState)
         }));
-
         return Promise.reject(error);
       });
     }));
-
     _defineProperty(this, "toggleReaction", this.withReaction(this.doRemoveReaction, this.doAddReaction));
-
     _defineProperty(this, "addReaction", this.withReaction(this.flash, this.doAddReaction));
-
     _defineProperty(this, "getDetailedReaction", function (containerAri, ari, emojiId) {
       var exp = ufoExperiences.fetchDetails.getInstance("".concat(ari, "|").concat(emojiId));
       exp.start();
@@ -292,11 +250,9 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         containerAri: containerAri,
         emojiId: emojiId
       });
-
       _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
@@ -308,31 +264,26 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
         });
       });
     });
-
     _defineProperty(this, "getState", function () {
       return _this.state;
     });
-
     _defineProperty(this, "onChange", function (callback) {
       _this.callbacks.push(callback);
     });
-
     _defineProperty(this, "removeOnChangeListener", function (toRemove) {
       _this.callbacks = _this.callbacks.filter(function (callback) {
         return callback !== toRemove;
       });
     });
-
     this.client = client;
     this.state = state !== null && state !== void 0 ? state : this.initialState;
     this.metadata = metadata;
   }
+
   /**
    * Update the store state data with a new data
    * @param newState new store data
    */
-
-
   _createClass(MemoryReactionsStore, [{
     key: "getReactionsState",
     value: function getReactionsState(containerAri, ari) {
@@ -361,19 +312,17 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
      */
     function withReadyReaction(containerAri, ari) {
       var _this2 = this;
-
       return function (updater) {
         var reactionsState = _this2.getReactionsState(containerAri, ari);
-
         if (reactionsState && reactionsState.status === Types.ReactionStatus.ready) {
           var updated = updater(reactionsState);
-
           if (updated) {
             _this2.setReactions(containerAri, ari, updated);
           }
         }
       };
     }
+
     /**
      * Utility function to help execute actions with a reaction. It handles reaction discovery
      * and branching between reacted and not reacted.
@@ -387,12 +336,10 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
      *  A function that will execute the correct callback to the triple containerAri, ari and
      *  emojiId. If some state is returned, the new state will be applied.
      */
-
   }, {
     key: "withReaction",
     value: function withReaction(reactedCallback, notReactedCallback) {
       var _this3 = this;
-
       return function (containerAri, ari, emojiId) {
         _this3.withReadyReaction(containerAri, ari)(function (reactionsState) {
           var reaction = reactionsState.reactions.find(utils.byEmojiId(emojiId)) || {
@@ -404,16 +351,13 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
           };
           var callback = reaction.reacted || !notReactedCallback ? reactedCallback : notReactedCallback;
           var updatedReaction = callback(reaction);
-
           if (updatedReaction && !(updatedReaction instanceof Function)) {
             return utils.readyState(reactionsState.reactions.map(utils.updateByEmojiId(emojiId, updatedReaction)));
           }
-
           return;
         });
       };
     }
   }]);
-
   return MemoryReactionsStore;
 }();

package/dist/esm/store/ReactionConsumer.js

@@ -7,67 +7,50 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 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; } }
-
 import React from 'react';
-
 /**
  * A custom mapper class that takes the store instance and mapper functions "mapStateToProps" and "mapActionsToProps" to return the renderProps pattern as a child component
  * @deprecated please avoid using this class as it will be removed in a future release
  */
 export var ReactionConsumer = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(ReactionConsumer, _React$PureComponent);
-
   var _super = _createSuper(ReactionConsumer);
-
   function ReactionConsumer(props) {
     var _this;
-
     _classCallCheck(this, ReactionConsumer);
-
     _this = _super.call(this, props);
-
     _defineProperty(_assertThisInitialized(_this), "getPropsFromActions", function (actions) {
       var mapActionsToProps = _this.props.mapActionsToProps;
-
       if (mapActionsToProps) {
         if (!_this.previousActions || !_this.propsFromActions || _this.previousActions !== actions) {
           _this.propsFromActions = mapActionsToProps(actions);
         }
       }
-
       _this.previousActions = actions;
       return _this.propsFromActions;
     });
-
     _defineProperty(_assertThisInitialized(_this), "getPropsFromState", function (state) {
       var mapStateToProps = _this.props.mapStateToProps;
       return mapStateToProps ? mapStateToProps(state) : undefined;
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleOnChange", function () {
       _this.forceUpdate();
     });
-
     _this.state = {
       store: undefined
     };
     return _this;
   }
-
   _createClass(ReactionConsumer, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-
       Promise.resolve(this.props.store).then(function (store) {
         _this2.setState({
           store: store
         });
-
         store.onChange(_this2.handleOnChange);
       });
     }
@@ -82,7 +65,6 @@ export var ReactionConsumer = /*#__PURE__*/function (_React$PureComponent) {
                 if (this.state.store) {
                   this.state.store.removeOnChangeListener(this.handleOnChange);
                 }
-
               case 1:
               case "end":
                 return _context.stop();
@@ -90,27 +72,22 @@ export var ReactionConsumer = /*#__PURE__*/function (_React$PureComponent) {
           }
         }, _callee, this);
       }));
-
       function componentWillUnmount() {
         return _componentWillUnmount.apply(this, arguments);
       }
-
       return componentWillUnmount;
     }()
     /**
      * Get the actions the child component might need to dispatch from its props
      */
-
   }, {
     key: "render",
     value: function render() {
       if (!this.state.store) {
         return null;
       }
-
       return this.props.children(Object.assign({}, this.getPropsFromState(this.state.store.getState()), this.getPropsFromActions(this.state.store)));
     }
   }]);
-
   return ReactionConsumer;
 }(React.PureComponent);

package/dist/esm/store/batched.js

@@ -8,11 +8,9 @@ export function batch(callback) {
       });
       calls = [];
     }
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     calls.push(args);
   };
 }
@@ -26,11 +24,9 @@ export function batchByKey(callback) {
       });
       calls[key] = [];
     }
-
     for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
       args[_key2 - 1] = arguments[_key2];
     }
-
     calls[key].push(args);
   };
 }

package/dist/esm/store/utils.js

@@ -1,15 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import { ReactionStatus } from '../types';
-
 var compareEmojiId = function compareEmojiId(l, r) {
   return l.localeCompare(r);
 };
-
 var sortByRelevance = function sortByRelevance(a, b) {
   if (a.count > b.count) {
     return -1;
@@ -19,23 +14,19 @@ var sortByRelevance = function sortByRelevance(a, b) {
     return compareEmojiId(a.emojiId, b.emojiId);
   }
 };
-
 var sortByPreviousPosition = function sortByPreviousPosition(reactions) {
   var indexes = reactions.reduce(function (map, reaction, index) {
     map[reaction.emojiId] = index;
     return map;
   }, {});
-
   var getPosition = function getPosition(_ref) {
     var emojiId = _ref.emojiId;
     return indexes[emojiId] === undefined ? reactions.length : indexes[emojiId];
   };
-
   return function (a, b) {
     return getPosition(a) - getPosition(b);
   };
 };
-
 export var readyState = function readyState(reactions) {
   return {
     status: ReactionStatus.ready,

package/dist/esm/types/reaction.js

@@ -38,10 +38,10 @@
  * Condition of the reaction when gets loaded from the store
  */
 export var ReactionStatus;
+
 /**
  * state in which the reaction is at
  */
-
 (function (ReactionStatus) {
   ReactionStatus["ready"] = "READY";
   ReactionStatus["loading"] = "LOADING";

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.2.0"
+	"version": "22.2.1"
 }

package/dist/types/components/ReactionDialog/styles.d.ts

@@ -1,8 +1,7 @@
-import { ThemeIds } from '@atlaskit/tokens';
 export declare const containerStyle: (reactionsBorderWidth: number) => import("@emotion/react").SerializedStyles;
 export declare const titleStyle: import("@emotion/react").SerializedStyles;
 export declare const counterStyle: (isSelected: boolean) => import("@emotion/react").SerializedStyles;
-export declare const customTabWrapper: (isSelected: boolean, selectedEmojiId: string, theme: ThemeIds | null) => import("@emotion/react").SerializedStyles;
+export declare const customTabWrapper: (isSelected: boolean, selectedEmojiId: string, theme?: "auto" | "dark" | "light" | undefined) => import("@emotion/react").SerializedStyles;
 export declare const navigationContainerStyle: import("@emotion/react").SerializedStyles;
 export declare const reactionViewStyle: import("@emotion/react").SerializedStyles;
 export declare const userListStyle: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "22.2.0",
+  "version": "22.2.1",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/tabs": "^13.2.12",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
     "@atlaskit/util-service-support": "^6.1.0",