@atlaskit/reactions 21.1.0 → 21.2.2

package/dist/esm/analytics/ufo.js

@@ -0,0 +1,62 @@
+import { ConcurrentExperience, UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+/**
+ * Initial experience config object (deferred from @atlaskit/ufo inner types)
+ * TODO: Check if possible to add this to exported types from @atlaskit/ufo
+ */
+
+/**
+ * Helper method for create the config type for an individual/Concurrent experience
+ * @param componentName
+ */
+var createExperienceConfig = function createExperienceConfig(componentName, type, performanceType) {
+  return {
+    platform: {
+      component: componentName
+    },
+    type: type,
+    performanceType: performanceType
+  };
+};
+/**
+ * Types of experiences
+ */
+
+
+export var ExperienceName;
+/**
+ * UFO types of components been instrumented
+ */
+
+(function (ExperienceName) {
+  ExperienceName["REACTIONS_RENDERED"] = "reactions-rendered";
+  ExperienceName["PICKER_OPENED"] = "reactions-picker-opened";
+  ExperienceName["REACTION_ADDED"] = "reaction-added";
+  ExperienceName["REACTION_REMOVED"] = "reaction-removed";
+})(ExperienceName || (ExperienceName = {}));
+
+export var ComponentName;
+/**
+ * Experience when the emoji picker is opened
+ */
+
+(function (ComponentName) {
+  ComponentName["PICKER_RENDERED"] = "reactions-picker";
+  ComponentName["REACTIONS"] = "reactions-list";
+})(ComponentName || (ComponentName = {}));
+
+export var PickerRender = new UFOExperience(ExperienceName.PICKER_OPENED, createExperienceConfig(ComponentName.PICKER_RENDERED, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when the list of reactions gets rendered
+ */
+
+export var ReactionsRendered = new ConcurrentExperience(ExperienceName.REACTIONS_RENDERED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Load, ExperiencePerformanceTypes.PageSegmentLoad));
+/**
+ * Experience when a reaction emoji gets added
+ */
+
+export var ReactionsAdd = new ConcurrentExperience(ExperienceName.REACTION_ADDED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when a reaction emoji gets removed/decrement
+ */
+
+export var ReactionsRemove = new ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));

package/dist/esm/components/ReactionPicker.js

@@ -15,17 +15,17 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 /** @jsx jsx */
+import React, { Fragment, PureComponent } from 'react';
+import ReactDOM from 'react-dom';
 import { jsx, css } from '@emotion/core';
 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 React, { Fragment } from 'react';
-import { PureComponent } from 'react';
-import ReactDOM from 'react-dom';
 import { Selector } from './Selector';
 import { Trigger } from './Trigger';
+import { UFO } from '../analytics';
 import { layers } from '@atlaskit/theme/constants';
 var pickerStyle = css({
   verticalAlign: 'middle',
@@ -110,6 +110,9 @@ export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onTriggerClick", function () {
+      // ufo start reaction experience
+      UFO.PickerRender.start();
+
       if (_this.props.onOpen) {
         _this.props.onOpen();
       }
@@ -117,6 +120,9 @@ export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
       _this.setState({
         isOpen: !_this.state.isOpen,
         showFullPicker: false
+      }, function () {
+        // ufo add reaction success
+        UFO.PickerRender.success();
       });
     });
 
@@ -160,6 +166,7 @@ export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       document.removeEventListener('click', this.handleClickOutside);
+      UFO.PickerRender.abort();
     }
   }, {
     key: "close",
@@ -167,6 +174,9 @@ export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
       this.setState({
         isOpen: false,
         showFullPicker: false
+      }, function () {
+        // ufo abort reaction experience
+        UFO.PickerRender.abort();
       });
     }
   }, {

package/dist/esm/components/UfoErrorBoundary.js

@@ -0,0 +1,54 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+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';
+export var UfoErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(UfoErrorBoundary, _React$Component);
+
+  var _super = _createSuper(UfoErrorBoundary);
+
+  function UfoErrorBoundary() {
+    _classCallCheck(this, UfoErrorBoundary);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(UfoErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch() {
+      var _iterator = _createForOfIteratorHelper(this.props.experiences),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var e = _step.value;
+          e.failure();
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
+
+  return UfoErrorBoundary;
+}(React.Component);

package/dist/esm/components/index.js

@@ -1,3 +1,4 @@
 export { Reaction } from './Reaction';
 export { ReactionPicker } from './ReactionPicker';
-export { Reactions } from './Reactions';
+export { Reactions } from './Reactions';
+export { UfoErrorBoundary } from './UfoErrorBoundary';

package/dist/esm/containers/ConnectedReactionPicker.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { ReactionPicker, UfoErrorBoundary } from '../components';
+import { ReactionConsumer } from '../store/ReactionConsumer';
+import { UFO } from '../analytics';
+
+/**
+ * UFO Instance for picker
+ */
+export var ConnectedReactionPicker = function ConnectedReactionPicker(props) {
+  var renderChild = function renderChild(innerProps) {
+    return /*#__PURE__*/React.createElement(ReactionPicker, _extends({}, props, innerProps));
+  };
+
+  var actionsMapper = function actionsMapper(actions) {
+    return {
+      onSelection: function onSelection(emojiId) {
+        actions.addReaction(props.containerAri, props.ari, emojiId);
+      }
+    };
+  };
+
+  return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+    experiences: [UFO.PickerRender]
+  }, /*#__PURE__*/React.createElement(ReactionConsumer, {
+    store: props.store,
+    actionsMapper: actionsMapper
+  }, renderChild));
+};

package/dist/esm/containers/ConnectedReactionsView.js

@@ -0,0 +1,108 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useEffect, useRef } from 'react';
+import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { Reactions, UfoErrorBoundary } from '../components';
+import { ReactionConsumer } from '../store/ReactionConsumer';
+import { ReactionStatus } from '../types/ReactionStatus';
+import { ufoExperiences } from '../store/ReactionsStore';
+
+var ReactionsView = function ReactionsView(props) {
+  // // compose a UFO experience object
+  var experienceInstance = useRef();
+  var ari = props.ari,
+      createAnalyticsEvent = props.createAnalyticsEvent,
+      store = props.store;
+  useEffect(function () {
+    experienceInstance.current = ufoExperiences.render.getInstance(ari);
+  }, [ari]);
+  useEffect(function () {
+    Promise.resolve(store).then(function (_store) {
+      if (_store.setCreateAnalyticsEvent && createAnalyticsEvent) {
+        _store.setCreateAnalyticsEvent(createAnalyticsEvent);
+      }
+    });
+  }, [createAnalyticsEvent, store]); // abort when component gets unmounted
+
+  useEffect(function () {
+    return function () {
+      var _experienceInstance$c;
+
+      (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort();
+    };
+  }, [experienceInstance]);
+
+  var renderChildren = function renderChildren(innerProps) {
+    var containerAri = props.containerAri,
+        ari = props.ari;
+    return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+      data: {
+        containerAri: containerAri,
+        ari: ari
+      }
+    }, /*#__PURE__*/React.createElement(Reactions, _extends({
+      key: "".concat(props.containerAri, "|").concat(props.ari)
+    }, props, innerProps)));
+  };
+
+  var stateMapper = function stateMapper(state) {
+    var containerAri = props.containerAri,
+        ari = props.ari;
+    var reactionsState = state && state.reactions["".concat(containerAri, "|").concat(ari)];
+
+    if (!state || !reactionsState) {
+      return {
+        status: ReactionStatus.notLoaded,
+        reactions: []
+      };
+    }
+
+    switch (reactionsState.status) {
+      case ReactionStatus.ready:
+        return {
+          reactions: reactionsState.reactions,
+          status: reactionsState.status,
+          flash: state.flash["".concat(containerAri, "|").concat(ari)]
+        };
+
+      case ReactionStatus.error:
+        return {
+          status: ReactionStatus.error,
+          reactions: []
+        };
+
+      default:
+        return {
+          status: ReactionStatus.loading,
+          reactions: []
+        };
+    }
+  };
+
+  var actionsMapper = function actionsMapper(actions) {
+    return {
+      loadReaction: function loadReaction() {
+        actions.getReactions(props.containerAri, props.ari);
+      },
+      onReactionClick: function onReactionClick(emojiId) {
+        actions.toggleReaction(props.containerAri, props.ari, emojiId);
+      },
+      onReactionHover: function onReactionHover(emojiId) {
+        actions.getDetailedReaction(props.containerAri, props.ari, emojiId);
+      },
+      onSelection: function onSelection(emojiId) {
+        actions.addReaction(props.containerAri, props.ari, emojiId);
+      }
+    };
+  };
+
+  return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
+    experiences: experienceInstance.current ? [experienceInstance.current] : []
+  }, /*#__PURE__*/React.createElement(ReactionConsumer, {
+    store: props.store,
+    actionsMapper: actionsMapper,
+    stateMapper: stateMapper
+  }, renderChildren));
+};
+
+export var ConnectedReactionsView = withAnalyticsEvents()(ReactionsView);

package/dist/esm/containers/index.js

@@ -1,2 +1,2 @@
-export { default as ConnectedReactionPicker } from './ReactionsPickerContainer';
-export { default as ConnectedReactionsView } from './ReactionsContainer';
+export { ConnectedReactionPicker } from './ConnectedReactionPicker';
+export { ConnectedReactionsView } from './ConnectedReactionsView';

package/dist/esm/index.js

@@ -1,4 +1,5 @@
+export { UFO } from './analytics';
 export { ReactionServiceClient } from './client';
 export { Reaction, ReactionPicker, Reactions } from './components';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
-export { MemoryReactionsStore, ReactionConsumer } from './reaction-store';
+export { MemoryReactionsStore, ReactionConsumer } from './store';

package/dist/esm/{reaction-store → store}/ReactionsStore.js

@@ -6,11 +6,20 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 { createRestSucceededEvent, createRestFailedEvent, createAndFireSafe } from '../analytics';
-import { ReactionStatus } from '../types';
+import * as Analytics from '../analytics';
+import * as Types from '../types';
 import { batch, batchByKey } from './batched';
 import * as utils from './utils';
 import { isRealErrorFromService } from './utils';
+
+/**
+ * Set of all available UFO experiences relating to reaction element
+ */
+export var ufoExperiences = {
+  add: Analytics.UFO.ReactionsAdd,
+  remove: Analytics.UFO.ReactionsRemove,
+  render: Analytics.UFO.ReactionsRendered
+};
 export var MemoryReactionsStore = /*#__PURE__*/function () {
   function MemoryReactionsStore(client) {
     var _this = this;
@@ -112,13 +121,26 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
 
       _this.flash(reaction);
 
+      var exp = ufoExperiences.add.getInstance("".concat(ari, "|").concat(emojiId)); // ufo start reaction experience
+
+      exp.start();
+
       _this.client.addReaction(containerAri, ari, emojiId, _this.metadata).then(function (_) {
         if (_this.createAnalyticsEvent) {
-          createAndFireSafe(_this.createAnalyticsEvent, createRestSucceededEvent, 'addReaction');
-        }
+          Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'addReaction');
+        } // ufo add reaction success
+
+
+        exp.success();
       }).catch(function (error) {
         if (_this.createAnalyticsEvent && isRealErrorFromService(error.code)) {
-          createAndFireSafe(_this.createAnalyticsEvent, createRestFailedEvent, 'addReaction', error.code);
+          _this.createAnalyticsEvent && Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'addReaction', error.code); // ufo add reaction failure
+
+          exp.failure({
+            metadata: {
+              error: error
+            }
+          });
         }
 
         return Promise.reject(error);
@@ -129,10 +151,23 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
       var containerAri = reaction.containerAri,
           ari = reaction.ari,
           emojiId = reaction.emojiId;
+      var exp = ufoExperiences.remove.getInstance("".concat(ari, "|").concat(emojiId)); // ufo start reaction experience
+
+      exp.start();
 
       _this.optmisticUpdate(containerAri, ari, emojiId)(utils.removeOne);
 
-      _this.client.deleteReaction(containerAri, ari, emojiId, _this.metadata);
+      _this.client.deleteReaction(containerAri, ari, emojiId, _this.metadata).then(function (_) {
+        // ufo add reaction success
+        exp.success();
+      }).catch(function (error) {
+        // ufo add reaction failure
+        exp.failure({
+          metadata: {
+            error: error
+          }
+        });
+      });
     });
 
     _defineProperty(this, "setCreateAnalyticsEvent", function (createAnalyticsEvent) {
@@ -140,24 +175,37 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
     });
 
     _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 exp = ufoExperiences.render.getInstance(containerAri); // ufo start reaction experience
+
+      exp.start();
+
       _this.client.getReactions(containerAri, aris.reduce(utils.flattenAris)).then(function (value) {
         Object.keys(value).map(function (ari) {
           var reactionsState = _this.getReactionsState(containerAri, ari);
 
-          var reactions = reactionsState && reactionsState.status === ReactionStatus.ready ? reactionsState.reactions : undefined;
+          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) {
-          createAndFireSafe(_this.createAnalyticsEvent, createRestSucceededEvent, 'getReactions');
+          Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'getReactions');
         }
+
+        exp.success();
       }).catch(function (error) {
-        if (_this.createAnalyticsEvent && isRealErrorFromService(error.code)) {
-          createAndFireSafe(_this.createAnalyticsEvent, createRestFailedEvent, 'getReactions', error.code);
-        }
+        if (isRealErrorFromService(error.code)) {
+          if (_this.createAnalyticsEvent) {
+            Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'getReactions', error.code);
+          }
 
-        return Promise.reject(error);
+          exp.failure();
+          return Promise.reject(error);
+        }
       });
     }));
 
@@ -220,7 +268,7 @@ export var MemoryReactionsStore = /*#__PURE__*/function () {
       return function (updater) {
         var reactionsState = _this2.getReactionsState(containerAri, ari);
 
-        if (reactionsState.status === ReactionStatus.ready) {
+        if (reactionsState.status === Types.ReactionStatus.ready) {
           var updated = updater(reactionsState);
 
           if (updated) {

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.1.0"
+	"version": "21.2.2"
 }

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

@@ -1,6 +1,7 @@
 import { AnalyticsEventPayload, CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { EventType } from '@atlaskit/analytics-gas-types';
 import { ReactionSummary, ReactionSource } from '../types';
+export * as UFO from './ufo';
 export declare type PreviousState = 'new' | 'existingNotReacted' | 'existingReacted';
 export declare const createAndFireEventInElementsChannel: (payload: Record<string, any>) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
 export declare const createAndFireSafe: <U extends any[], T extends (...args: U) => AnalyticsEventPayload>(createAnalyticsEvent: CreateUIAnalyticsEvent | void, creator: T, ...args: U) => void;

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

@@ -0,0 +1,33 @@
+import { ConcurrentExperience, UFOExperience } from '@atlaskit/ufo';
+/**
+ * Types of experiences
+ */
+export declare enum ExperienceName {
+    REACTIONS_RENDERED = "reactions-rendered",
+    PICKER_OPENED = "reactions-picker-opened",
+    REACTION_ADDED = "reaction-added",
+    REACTION_REMOVED = "reaction-removed"
+}
+/**
+ * UFO types of components been instrumented
+ */
+export declare enum ComponentName {
+    PICKER_RENDERED = "reactions-picker",
+    REACTIONS = "reactions-list"
+}
+/**
+ * Experience when the emoji picker is opened
+ */
+export declare const PickerRender: UFOExperience;
+/**
+ * Experience when the list of reactions gets rendered
+ */
+export declare const ReactionsRendered: ConcurrentExperience;
+/**
+ * Experience when a reaction emoji gets added
+ */
+export declare const ReactionsAdd: ConcurrentExperience;
+/**
+ * Experience when a reaction emoji gets removed/decrement
+ */
+export declare const ReactionsRemove: ConcurrentExperience;

package/dist/types/components/ReactionPicker.d.ts

@@ -1,5 +1,6 @@
-import { EmojiProvider } from '@atlaskit/emoji/resource';
+/** @jsx jsx */
 import { PureComponent } from 'react';
+import { EmojiProvider } from '@atlaskit/emoji/resource';
 import { ReactionSource } from '../types';
 export interface Props {
     emojiProvider: Promise<EmojiProvider>;

package/dist/types/components/Reactions.d.ts

@@ -4,17 +4,19 @@ import React from 'react';
 import { OnEmoji, OnReaction } from '../types';
 import { ReactionStatus } from '../types/ReactionStatus';
 import { ReactionSummary } from '../types/ReactionSummary';
-export interface Props {
+export interface StateMapperProps {
     reactions: ReactionSummary[];
     status: ReactionStatus;
+    flash?: {
+        [emojiId: string]: boolean;
+    };
+}
+export interface Props extends StateMapperProps {
     loadReaction: () => void;
     onSelection: OnEmoji;
     onReactionClick: OnEmoji;
     onReactionHover?: OnReaction;
     allowAllEmojis?: boolean;
-    flash?: {
-        [emojiId: string]: boolean;
-    };
     boundariesElement?: string;
     errorMessage?: string;
     emojiProvider: Promise<EmojiProvider>;
@@ -41,7 +43,7 @@ export declare class ReactionsWithoutAnalytics extends React.PureComponent<Props
     private renderReaction;
     render(): JSX.Element;
 }
-export declare const Reactions: React.ForwardRefExoticComponent<Pick<Pick<Props & WithAnalyticsEventsProps, "reactions" | "emojiProvider" | "flash" | "onSelection" | "boundariesElement" | "allowAllEmojis" | "status" | "loadReaction" | "onReactionClick" | "onReactionHover" | "errorMessage">, "emojiProvider" | "onSelection" | "boundariesElement" | "allowAllEmojis" | "status" | "loadReaction" | "onReactionClick" | "onReactionHover" | "errorMessage"> & Partial<Pick<Pick<Props & WithAnalyticsEventsProps, "reactions" | "emojiProvider" | "flash" | "onSelection" | "boundariesElement" | "allowAllEmojis" | "status" | "loadReaction" | "onReactionClick" | "onReactionHover" | "errorMessage">, "reactions" | "flash">> & Partial<Pick<{
+export declare const Reactions: React.ForwardRefExoticComponent<Pick<Pick<Props & WithAnalyticsEventsProps, "reactions" | "emojiProvider" | "flash" | "onSelection" | "boundariesElement" | "allowAllEmojis" | "loadReaction" | "onReactionClick" | "onReactionHover" | "errorMessage" | "status">, "emojiProvider" | "onSelection" | "boundariesElement" | "allowAllEmojis" | "loadReaction" | "onReactionClick" | "onReactionHover" | "errorMessage" | "status"> & Partial<Pick<Pick<Props & WithAnalyticsEventsProps, "reactions" | "emojiProvider" | "flash" | "onSelection" | "boundariesElement" | "allowAllEmojis" | "loadReaction" | "onReactionClick" | "onReactionHover" | "errorMessage" | "status">, "reactions" | "flash">> & Partial<Pick<{
     flash: {};
     reactions: never[];
 }, never>> & React.RefAttributes<any>>;

package/dist/types/components/UfoErrorBoundary.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { UFOExperience } from '@atlaskit/ufo';
+export declare class UfoErrorBoundary extends React.Component<{
+    experiences: UFOExperience[];
+}> {
+    componentDidCatch(): void;
+    render(): React.ReactNode;
+}

package/dist/types/components/index.d.ts

@@ -1,3 +1,5 @@
 export { Reaction } from './Reaction';
 export { ReactionPicker } from './ReactionPicker';
 export { Reactions } from './Reactions';
+export type { StateMapperProps } from './Reactions';
+export { UfoErrorBoundary } from './UfoErrorBoundary';

package/dist/types/containers/ConnectedReactionPicker.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { Props as ReactionsViewProps } from './ConnectedReactionsView';
+export declare type Props = ReactionsViewProps & {
+    miniMode?: boolean;
+    className?: string;
+};
+/**
+ * UFO Instance for picker
+ */
+export declare const ConnectedReactionPicker: React.FC<Props>;

package/dist/types/containers/ConnectedReactionsView.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { EmojiProvider } from '@atlaskit/emoji/resource';
+import { ReactionStoreProp } from '../store/ReactionConsumer';
+export declare type Props = {
+    /**
+     * Wrapper id for reactions list
+     */
+    containerAri: string;
+    /**
+     * Individual id for a reaction
+     */
+    ari: string;
+    allowAllEmojis?: boolean;
+    boundariesElement?: string;
+    emojiProvider: Promise<EmojiProvider>;
+    store: ReactionStoreProp;
+};
+export declare const ConnectedReactionsView: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<Props & WithAnalyticsEventsProps>, "children" | "emojiProvider" | "boundariesElement" | "allowAllEmojis" | "containerAri" | "ari" | "store"> & React.RefAttributes<any>>;

package/dist/types/containers/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ConnectedReactionPicker } from './ReactionsPickerContainer';
-export { default as ConnectedReactionsView } from './ReactionsContainer';
+export { ConnectedReactionPicker } from './ConnectedReactionPicker';
+export { ConnectedReactionsView } from './ConnectedReactionsView';

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
+export { UFO } from './analytics';
 export { ReactionServiceClient } from './client';
 export type { ReactionClient, ReactionRequest } from './client';
 export { Reaction, ReactionPicker, Reactions } from './components';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
-export { MemoryReactionsStore, ReactionConsumer } from './reaction-store';
-export type { ReactionsStore } from './reaction-store';
+export { MemoryReactionsStore, ReactionConsumer } from './store';
+export type { ReactionsStore } from './store';