@atlaskit/reactions 21.0.4 → 21.2.0

package/dist/esm/components/ReactionTooltip.js

@@ -1,38 +1,38 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { style } from 'typestyle';
 import { token } from '@atlaskit/tokens';
 import { N90 } from '@atlaskit/theme/colors';
 import { messages } from './i18n';
 var verticalMargin = 5;
-var tooltipStyle = style({
+var tooltipStyle = css({
   maxWidth: '150px',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   marginBottom: verticalMargin,
-  $nest: {
-    ul: {
-      listStyle: 'none',
-      margin: 0,
-      padding: 0,
-      textAlign: 'left'
-    },
-    li: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      marginTop: verticalMargin
-    }
+  ul: {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    textAlign: 'left'
+  },
+  li: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    marginTop: verticalMargin
   }
 });
-var emojiNameStyle = style({
+var emojiNameStyle = css({
   textTransform: 'capitalize',
   color: token('color.text.inverse', N90),
   fontWeight: 600
 });
-var footerStyle = style({
+var footerStyle = css({
   color: token('color.text.inverse', N90),
   fontWeight: 300
 });
@@ -43,25 +43,25 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
       users = _ref.reaction.users;
 
   if (!users || users.length === 0) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.only(children));
+    return jsx(Fragment, null, React.Children.only(children));
   }
 
-  var content = /*#__PURE__*/React.createElement("div", {
-    className: tooltipStyle
-  }, /*#__PURE__*/React.createElement("ul", null, emojiName ? /*#__PURE__*/React.createElement("li", {
-    className: emojiNameStyle
+  var content = jsx("div", {
+    css: tooltipStyle
+  }, jsx("ul", null, emojiName ? jsx("li", {
+    css: emojiNameStyle
   }, emojiName) : null, users.slice(0, TOOLTIP_USERS_LIMIT).map(function (user, index) {
-    return /*#__PURE__*/React.createElement("li", {
+    return jsx("li", {
       key: index
     }, user.displayName);
-  }), users.length > TOOLTIP_USERS_LIMIT ? /*#__PURE__*/React.createElement("li", {
-    className: footerStyle
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.otherUsers, {
+  }), users.length > TOOLTIP_USERS_LIMIT ? jsx("li", {
+    css: footerStyle
+  }, jsx(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - TOOLTIP_USERS_LIMIT
     }
   }))) : null));
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: content,
     position: "bottom"
   }, React.Children.only(children));

package/dist/esm/components/Reactions.js

@@ -10,22 +10,23 @@ 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 { jsx, css } from '@emotion/core';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { style } from 'typestyle';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionSelectionEvent, createReactionsRenderedEvent } from '../analytics';
 import { ReactionStatus } from '../types/ReactionStatus';
 import { messages } from './i18n';
 import { Reaction } from './Reaction';
 import { ReactionPicker } from './ReactionPicker';
-var reactionStyle = style({
+var reactionStyle = css({
   display: 'inline-block',
   // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
   margin: '2px 4px 0 4px'
 });
-var reactionsStyle = style({
+var reactionsStyle = css({
   display: 'flex',
   flexWrap: 'wrap',
   position: 'relative',
@@ -33,10 +34,8 @@ var reactionsStyle = style({
   borderRadius: '15px',
   // To allow to row spacing of 2px on wrap, and 0px on first row
   marginTop: '-2px',
-  $nest: {
-    '& > :first-child': {
-      marginLeft: 0
-    }
+  '& > :first-of-type': {
+    marginLeft: 0
   }
 });
 export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureComponent) {
@@ -69,11 +68,11 @@ export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureCompone
 
       switch (status) {
         case ReactionStatus.error:
-          return errorMessage ? errorMessage : /*#__PURE__*/React.createElement(FormattedMessage, messages.unexpectedError);
+          return errorMessage ? errorMessage : jsx(FormattedMessage, messages.unexpectedError);
 
         case ReactionStatus.loading:
         case ReactionStatus.notLoaded:
-          return /*#__PURE__*/React.createElement(FormattedMessage, messages.loadingReactions);
+          return jsx(FormattedMessage, messages.loadingReactions);
 
         default:
           return undefined;
@@ -112,9 +111,9 @@ export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureCompone
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderReaction", function (reaction) {
-      return /*#__PURE__*/React.createElement(Reaction, {
+      return jsx(Reaction, {
         key: reaction.emojiId,
-        className: reactionStyle,
+        css: reactionStyle,
         reaction: reaction,
         emojiProvider: _this.props.emojiProvider,
         onClick: _this.props.onReactionClick,
@@ -144,10 +143,10 @@ export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureCompone
           emojiProvider = _this$props2.emojiProvider,
           boundariesElement = _this$props2.boundariesElement,
           allowAllEmojis = _this$props2.allowAllEmojis;
-      return /*#__PURE__*/React.createElement(Tooltip, {
+      return jsx(Tooltip, {
         content: this.getTooltip()
-      }, /*#__PURE__*/React.createElement(ReactionPicker, {
-        className: reactionStyle,
+      }, jsx(ReactionPicker, {
+        css: reactionStyle,
         emojiProvider: emojiProvider,
         miniMode: true,
         boundariesElement: boundariesElement,
@@ -162,8 +161,8 @@ export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureCompone
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: reactionsStyle
+      return jsx("div", {
+        css: reactionsStyle
       }, this.props.reactions.map(this.renderReaction), this.renderPicker());
     }
   }]);

package/dist/esm/components/Selector.js

@@ -10,27 +10,26 @@ 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 { jsx, css, keyframes } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
-import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
-import { keyframes, style } from 'typestyle';
 import { EmojiButton } from './EmojiButton';
 import { ShowMore } from './ShowMore';
 import { equalEmojiId } from './utils';
-var selectorStyle = style({
+export var renderEmojiTestId = 'render-emoji';
+var selectorStyle = css({
   boxSizing: 'border-box',
   display: 'flex',
   padding: 0
 });
-var emojiStyle = style({
+var emojiStyle = css({
   display: 'inline-block',
   opacity: 0,
-  $nest: {
-    '&.selected': {
-      transition: 'transform 200ms ease-in-out  ',
-      transform: 'translateY(-48px) scale(2.667)'
-    }
+  '&.selected': {
+    transition: 'transform 200ms ease-in-out  ',
+    transform: 'translateY(-48px) scale(2.667)'
   }
 });
 var revealAnimation = keyframes({
@@ -46,7 +45,7 @@ var revealAnimation = keyframes({
     transform: 'scale(1)'
   }
 });
-export var revealStyle = style({
+export var revealStyle = css({
   animation: "".concat(revealAnimation, " 150ms ease-in-out forwards")
 });
 
@@ -108,17 +107,16 @@ export var Selector = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "renderEmoji", function (emojiId, index) {
       var emojiProvider = _this.props.emojiProvider;
       var key = emojiId.id || emojiId.shortName;
-      var classNames = cx(emojiStyle, revealStyle, {
-        selected: emojiId === _this.state.selection
-      });
       var style = revealDelay(index);
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         key: key,
-        className: classNames,
-        style: style
-      }, /*#__PURE__*/React.createElement(Tooltip, {
+        className: emojiId === _this.state.selection ? 'selected' : '',
+        css: [emojiStyle, revealStyle],
+        style: style,
+        "data-testid": renderEmojiTestId
+      }, jsx(Tooltip, {
         content: emojiId.shortName
-      }, /*#__PURE__*/React.createElement(EmojiButton, {
+      }, jsx(EmojiButton, {
         emojiId: emojiId,
         emojiProvider: emojiProvider,
         onClick: _this.onEmojiSelected
@@ -126,11 +124,9 @@ export var Selector = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderShowMore", function () {
-      return /*#__PURE__*/React.createElement(ShowMore, {
+      return jsx(ShowMore, {
         key: "more",
-        className: {
-          button: revealStyle
-        },
+        revealStyle: revealStyle,
         style: {
           button: revealDelay(defaultReactions.length)
         },
@@ -154,8 +150,8 @@ export var Selector = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var showMore = this.props.showMore;
-      return /*#__PURE__*/React.createElement("div", {
-        className: selectorStyle
+      return jsx("div", {
+        css: selectorStyle
       }, defaultReactions.map(this.renderEmoji), showMore ? this.renderShowMore() : null);
     }
   }]);

package/dist/esm/components/ShowMore.js

@@ -9,20 +9,21 @@ 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 { jsx, css } from '@emotion/core';
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
-import cx from 'classnames';
 import React from 'react';
-import { style } from 'typestyle';
 import { messages } from './i18n';
 import { FormattedMessage } from 'react-intl-next';
-var moreEmojiContainerStyle = style({
+import { revealStyle } from './Selector';
+var moreEmojiContainerStyle = css({
   display: 'flex'
 });
-var moreButtonStyle = style({
+var moreButtonStyle = css({
   opacity: 0,
   outline: 'none',
   backgroundColor: 'transparent',
@@ -33,19 +34,18 @@ var moreButtonStyle = style({
   padding: '4px',
   width: '38px',
   verticalAlign: 'top',
-  $nest: {
-    '&:hover': {
-      backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
-    }
+  '&:hover': {
+    backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
   }
 });
-var separatorStyle = style({
+var separatorStyle = css({
   backgroundColor: token('color.border', N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',
   display: 'inline-block'
 });
+export var showMoreTestId = 'show-more-button';
 export var ShowMore = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(ShowMore, _React$PureComponent);
 
@@ -64,19 +64,22 @@ export var ShowMore = /*#__PURE__*/function (_React$PureComponent) {
           style = _this$props.style,
           onClick = _this$props.onClick,
           classNameProp = _this$props.className;
-      return /*#__PURE__*/React.createElement("div", {
-        className: cx(moreEmojiContainerStyle, classNameProp.container),
+      return jsx("div", {
+        className: classNameProp.container,
+        css: moreEmojiContainerStyle,
         style: style.container
-      }, /*#__PURE__*/React.createElement("div", {
-        className: separatorStyle
-      }), /*#__PURE__*/React.createElement(FormattedMessage, messages.moreEmoji, function (text) {
-        return /*#__PURE__*/React.createElement(Tooltip, {
+      }, jsx("div", {
+        css: separatorStyle
+      }), jsx(FormattedMessage, messages.moreEmoji, function (text) {
+        return jsx(Tooltip, {
           content: text
-        }, /*#__PURE__*/React.createElement("button", {
-          className: cx(moreButtonStyle, classNameProp.button),
+        }, jsx("button", {
+          className: classNameProp.button,
+          css: [moreButtonStyle, revealStyle],
           style: style.button,
-          onMouseDown: onClick
-        }, /*#__PURE__*/React.createElement(EditorMoreIcon, {
+          onMouseDown: onClick,
+          "data-testid": showMoreTestId
+        }, jsx(EditorMoreIcon, {
           label: "More"
         })));
       }));

package/dist/esm/components/Trigger.js

@@ -1,20 +1,18 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import Button from '@atlaskit/button/standard-button';
 import EmojiAddIcon from '@atlaskit/icon/glyph/emoji-add';
-import cx from 'classnames';
 import React from 'react';
-import { style } from 'typestyle';
-var triggerStyle = style({
+var triggerStyle = css({
   width: '32px',
   height: '32px',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   lineHeight: '16px',
-  $nest: {
-    '&.miniMode': {
-      width: '24px',
-      height: '24px'
-    }
+  '&.miniMode': {
+    width: '24px',
+    height: '24px'
   }
 });
 export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -28,15 +26,13 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
 
-  var classNames = cx(triggerStyle, {
-    miniMode: miniMode
-  });
-  return /*#__PURE__*/React.createElement(Button, {
-    className: classNames,
+  return jsx(Button, {
+    className: miniMode ? 'miniMode' : '',
+    css: triggerStyle,
     appearance: "subtle",
     onClick: handleMouseDown,
     isDisabled: disabled,
-    iconBefore: /*#__PURE__*/React.createElement(EmojiAddIcon, {
+    iconBefore: jsx(EmojiAddIcon, {
       size: "small",
       label: "Add reaction"
     }),

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/i18n/cs.js

@@ -1,12 +1,13 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Czech
+//Czech
 export default {
   'fabric.reactions.error.unexpected': 'Něco se pokazilo',
   'fabric.reactions.loading': 'Načítání...',
-  'fabric.reactions.more.emoji': 'Více emoji'
+  'fabric.reactions.more.emoji': 'Více emoji',
+  'fabric.reactions.other.reacted.users': '{count, plural, one {a jeden další} few {a {count} další} many {a {count} dalšího} other {a {count} dalších}}'
 };

package/dist/esm/i18n/da.js

@@ -1,12 +1,13 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Danish
+//Danish (Denmark)
 export default {
   'fabric.reactions.error.unexpected': 'Noget gik galt',
   'fabric.reactions.loading': 'Indlæser ...',
-  'fabric.reactions.more.emoji': 'Flere emoji'
+  'fabric.reactions.more.emoji': 'Flere emoji',
+  'fabric.reactions.other.reacted.users': '{count, plural, one {og én anden} other {og {count} andre}}'
 };