@atlaskit/reactions 21.1.0 → 21.2.0

package/dist/cjs/version.json

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

package/dist/es2019/analytics/index.js

@@ -1,6 +1,8 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 import { name as packageName, version as packageVersion } from '../version.json';
+import * as _UFO from './ufo';
+export { _UFO as UFO };
 export const createAndFireEventInElementsChannel = createAndFireEvent('fabric-elements');
 export const createAndFireSafe = (createAnalyticsEvent, creator, ...args) => {
   if (createAnalyticsEvent) {

package/dist/es2019/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
+ */
+const createExperienceConfig = (componentName, type, performanceType) => {
+  return {
+    platform: {
+      component: componentName
+    },
+    type,
+    performanceType
+  };
+};
+/**
+ * Types of experiences
+ */
+
+
+export let 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 = {}));
+
+var ComponentName;
+/**
+ * Experience when the emoji picker is opened
+ */
+
+(function (ComponentName) {
+  ComponentName["PICKER_RENDERED"] = "reactions-picker";
+  ComponentName["REACTIONS"] = "reactions-list";
+})(ComponentName || (ComponentName = {}));
+
+export const PickerRender = new UFOExperience(ExperienceName.PICKER_OPENED, createExperienceConfig(ComponentName.PICKER_RENDERED, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when the list of reactions gets rendered
+ */
+
+export const ReactionsRendered = new ConcurrentExperience(ExperienceName.REACTIONS_RENDERED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when a reaction emoji gets added
+ */
+
+export const ReactionsAdd = new ConcurrentExperience(ExperienceName.REACTION_ADDED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when a reaction emoji gets removed/decrement
+ */
+
+export const ReactionsRemove = new ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));

package/dist/es2019/components/ReactionPicker.js

@@ -1,17 +1,17 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @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';
 const pickerStyle = css({
   verticalAlign: 'middle',
@@ -91,6 +91,9 @@ export class ReactionPicker extends PureComponent {
     });
 
     _defineProperty(this, "onTriggerClick", () => {
+      // ufo start reaction experience
+      UFO.PickerRender.start();
+
       if (this.props.onOpen) {
         this.props.onOpen();
       }
@@ -98,6 +101,9 @@ export class ReactionPicker extends PureComponent {
       this.setState({
         isOpen: !this.state.isOpen,
         showFullPicker: false
+      }, () => {
+        // ufo add reaction success
+        UFO.PickerRender.success();
       });
     });
 
@@ -137,12 +143,16 @@ export class ReactionPicker extends PureComponent {
 
   componentWillUnmount() {
     document.removeEventListener('click', this.handleClickOutside);
+    UFO.PickerRender.abort();
   }
 
   close(_emojiId) {
     this.setState({
       isOpen: false,
       showFullPicker: false
+    }, () => {
+      // ufo abort reaction experience
+      UFO.PickerRender.abort();
     });
   }
 

package/dist/es2019/components/UfoErrorBoundary.js

@@ -0,0 +1,13 @@
+import React from 'react';
+export class UfoErrorBoundary extends React.Component {
+  componentDidCatch() {
+    for (const e of this.props.experiences) {
+      e.failure();
+    }
+  }
+
+  render() {
+    return this.props.children;
+  }
+
+}

package/dist/es2019/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/es2019/containers/ConnectedReactionPicker.js

@@ -0,0 +1,27 @@
+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 const ConnectedReactionPicker = props => {
+  const renderChild = innerProps => {
+    return /*#__PURE__*/React.createElement(ReactionPicker, _extends({}, props, innerProps));
+  };
+
+  const actionsMapper = actions => ({
+    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/es2019/containers/ConnectedReactionsView.js

@@ -0,0 +1,112 @@
+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';
+
+const ReactionsView = props => {
+  // // compose a UFO experience object
+  let experienceInstance = useRef();
+  const {
+    ari,
+    createAnalyticsEvent,
+    store
+  } = props;
+  useEffect(() => {
+    experienceInstance.current = ufoExperiences.render.getInstance(ari);
+  }, [ari]);
+  useEffect(() => {
+    Promise.resolve(store).then(_store => {
+      if (_store.setCreateAnalyticsEvent && createAnalyticsEvent) {
+        _store.setCreateAnalyticsEvent(createAnalyticsEvent);
+      }
+    });
+  }, [createAnalyticsEvent, store]); // abort when component gets unmounted
+
+  useEffect(() => {
+    return () => {
+      var _experienceInstance$c;
+
+      (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort();
+    };
+  }, [experienceInstance]);
+
+  const renderChildren = innerProps => {
+    const {
+      containerAri,
+      ari
+    } = props;
+    return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+      data: {
+        containerAri,
+        ari
+      }
+    }, /*#__PURE__*/React.createElement(Reactions, _extends({
+      key: `${props.containerAri}|${props.ari}`
+    }, props, innerProps)));
+  };
+
+  const stateMapper = state => {
+    const {
+      containerAri,
+      ari
+    } = props;
+    const reactionsState = state && state.reactions[`${containerAri}|${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[`${containerAri}|${ari}`]
+        };
+
+      case ReactionStatus.error:
+        return {
+          status: ReactionStatus.error,
+          reactions: []
+        };
+
+      default:
+        return {
+          status: ReactionStatus.loading,
+          reactions: []
+        };
+    }
+  };
+
+  const actionsMapper = actions => ({
+    loadReaction: () => {
+      actions.getReactions(props.containerAri, props.ari);
+    },
+    onReactionClick: emojiId => {
+      actions.toggleReaction(props.containerAri, props.ari, emojiId);
+    },
+    onReactionHover: emojiId => {
+      actions.getDetailedReaction(props.containerAri, props.ari, emojiId);
+    },
+    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 const ConnectedReactionsView = withAnalyticsEvents()(ReactionsView);

package/dist/es2019/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/es2019/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/es2019/{reaction-store → store}/ReactionsStore.js

@@ -1,9 +1,18 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 const ufoExperiences = {
+  add: Analytics.UFO.ReactionsAdd,
+  remove: Analytics.UFO.ReactionsRemove,
+  render: Analytics.UFO.ReactionsRendered
+};
 export class MemoryReactionsStore {
   constructor(client, state = {
     reactions: {},
@@ -90,13 +99,25 @@ export class MemoryReactionsStore {
       } = reaction;
       this.optmisticUpdate(containerAri, ari, emojiId)(utils.addOne);
       this.flash(reaction);
+      const exp = ufoExperiences.add.getInstance(`${ari}|${emojiId}`); // ufo start reaction experience
+
+      exp.start();
       this.client.addReaction(containerAri, ari, emojiId, this.metadata).then(_ => {
         if (this.createAnalyticsEvent) {
-          createAndFireSafe(this.createAnalyticsEvent, createRestSucceededEvent, 'addReaction');
-        }
+          Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'addReaction');
+        } // ufo add reaction success
+
+
+        exp.success();
       }).catch(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
+            }
+          });
         }
 
         return Promise.reject(error);
@@ -109,8 +130,21 @@ export class MemoryReactionsStore {
         ari,
         emojiId
       } = reaction;
+      const exp = ufoExperiences.remove.getInstance(`${ari}|${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(_ => {
+        // ufo add reaction success
+        exp.success();
+      }).catch(error => {
+        // ufo add reaction failure
+        exp.failure({
+          metadata: {
+            error
+          }
+        });
+      });
     });
 
     _defineProperty(this, "setCreateAnalyticsEvent", createAnalyticsEvent => {
@@ -118,22 +152,34 @@ export class MemoryReactionsStore {
     });
 
     _defineProperty(this, "getReactions", batchByKey((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.
+       */
+      const exp = ufoExperiences.render.getInstance(containerAri); // ufo start reaction experience
+
+      exp.start();
       this.client.getReactions(containerAri, aris.reduce(utils.flattenAris)).then(value => {
         Object.keys(value).map(ari => {
           const reactionsState = this.getReactionsState(containerAri, ari);
-          const reactions = reactionsState && reactionsState.status === ReactionStatus.ready ? reactionsState.reactions : undefined;
+          const reactions = reactionsState && reactionsState.status === Types.ReactionStatus.ready ? reactionsState.reactions : undefined;
           this.setReactions(containerAri, ari, utils.readyState(value[ari].sort(utils.getReactionsSortFunction(reactions))));
         });
       }).then(() => {
         if (this.createAnalyticsEvent) {
-          createAndFireSafe(this.createAnalyticsEvent, createRestSucceededEvent, 'getReactions');
+          Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'getReactions');
         }
+
+        exp.success();
       }).catch(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);
+        }
       });
     }));
 
@@ -189,7 +235,7 @@ export class MemoryReactionsStore {
     return updater => {
       const reactionsState = this.getReactionsState(containerAri, ari);
 
-      if (reactionsState.status === ReactionStatus.ready) {
+      if (reactionsState.status === Types.ReactionStatus.ready) {
         const updated = updater(reactionsState);
 
         if (updated) {

package/dist/es2019/version.json

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

package/dist/esm/analytics/index.js

@@ -7,6 +7,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 import { name as packageName, version as packageVersion } from '../version.json';
+import * as _UFO from './ufo';
+export { _UFO as UFO };
 export var createAndFireEventInElementsChannel = createAndFireEvent('fabric-elements');
 export var createAndFireSafe = function createAndFireSafe(createAnalyticsEvent, creator) {
   if (createAnalyticsEvent) {

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 = {}));
+
+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.Experience, ExperiencePerformanceTypes.InlineResult));
+/**
+ * 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';