@atlaskit/reactions 21.5.1 → 21.6.0

package/dist/cjs/components/ReactionPicker/ReactionPicker.js

@@ -0,0 +1,272 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
+
+var _picker = require("@atlaskit/emoji/picker");
+
+var _popper = require("@atlaskit/popper");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _Selector = require("../Selector");
+
+var _Trigger = require("../Trigger");
+
+var _analytics = require("../../analytics");
+
+var _hooks = require("../../hooks");
+
+var styles = _interopRequireWildcard(require("./styles"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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) { (0, _defineProperty2.default)(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; }
+
+/**
+ * Test id for wrapper ReactionPicker div
+ */
+var RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
+exports.RENDER_REACTIONPICKER_TESTID = RENDER_REACTIONPICKER_TESTID;
+var popperModifiers = [
+/**
+ Removing this applyStyle modifier as it throws client errors ref:
+https://popper.js.org/docs/v1/#modifiers
+https://popper.js.org/docs/v1/#modifiers..applyStyle
+{ name: 'applyStyle', enabled: false },
+ */
+{
+  name: 'hide',
+  enabled: false
+}, {
+  name: 'offset',
+  enabled: true,
+  options: {
+    offset: [0, 0]
+  }
+}, {
+  name: 'flip',
+  enabled: true,
+  options: {
+    flipVariations: true,
+    boundariesElement: 'scrollParent'
+  }
+}, {
+  name: 'preventOverflow',
+  enabled: true
+}];
+
+/**
+ * Picker component for adding reactions
+ */
+var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
+  var miniMode = props.miniMode,
+      className = props.className,
+      emojiProvider = props.emojiProvider,
+      onSelection = props.onSelection,
+      allowAllEmojis = props.allowAllEmojis,
+      disabled = props.disabled,
+      pickerQuickReactionEmojiIds = props.pickerQuickReactionEmojiIds,
+      onShowMore = props.onShowMore,
+      onOpen = props.onOpen,
+      onCancel = props.onCancel;
+  /**
+   * Container <div /> reference (used by custom hook to detect click outside)
+   */
+
+  var wrapperRef = (0, _react.useRef)(null);
+  /**
+   * a function you can ask Popper to recompute your tooltip's position. It will directly call the Popper#update method
+   */
+
+  var updatePopper = (0, _react.useRef)(function () {
+    return Promise.resolve();
+  });
+
+  var _useState = (0, _react.useState)({
+    /**
+     * Show the picker floating panel
+     */
+    isOpen: false,
+
+    /**
+     * Show the full custom emoji list picker or the default list of emojis
+     */
+    showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+  }),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      settings = _useState2[0],
+      setSettings = _useState2[1];
+  /**
+   * Custom hook triggers when user clicks outside the reactions picker
+   */
+
+
+  (0, _hooks.useClickAway)(wrapperRef, function () {
+    if (onCancel) {
+      onCancel();
+    }
+
+    close();
+  });
+  /**
+   * Event callback when the picker is closed
+   * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
+   */
+
+  var close = (0, _react.useCallback)(function (_id) {
+    setSettings({
+      isOpen: false,
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+    }); // ufo abort reaction experience
+
+    _analytics.UFO.PickerRender.abort({
+      metadata: {
+        emojiId: _id,
+        source: 'Reaction-Picker',
+        reason: 'close dialog'
+      }
+    });
+  }, [allowAllEmojis, pickerQuickReactionEmojiIds]);
+  /**
+   * Event handle rwhen selecting to show the custom emoji icons picker
+   * @param e event param
+   */
+
+  var onSelectMoreClick = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              _context.next = 3;
+              return updatePopper.current();
+
+            case 3:
+              // Update popper position
+              setSettings({
+                isOpen: true,
+                showFullPicker: true
+              });
+
+              if (onShowMore) {
+                onShowMore();
+              }
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [onShowMore]);
+  /**
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
+
+  var onEmojiSelected = (0, _react.useCallback)(function (item) {
+    // no emoji was selected
+    if (!item.id) {
+      return;
+    }
+
+    onSelection(item.id, settings.showFullPicker ? 'emojiPicker' : 'quickSelector');
+    close(item.id);
+  }, [close, onSelection, settings.showFullPicker]);
+  /**
+   * Event handler when the emoji icon to open the custom picker is selected
+   */
+
+  var onTriggerClick = function onTriggerClick() {
+    // ufo start reactions picker open experience
+    _analytics.UFO.PickerRender.start();
+
+    setSettings({
+      isOpen: !settings.isOpen,
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+    });
+
+    if (onOpen) {
+      onOpen();
+    } // ufo reactions picker opened success
+
+
+    _analytics.UFO.PickerRender.success();
+  };
+
+  var wrapperClassName = " ".concat(settings.isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
+  return (0, _core.jsx)("div", {
+    className: wrapperClassName,
+    css: styles.pickerStyle,
+    ref: wrapperRef,
+    "data-testid": RENDER_REACTIONPICKER_TESTID
+  }, (0, _core.jsx)(_popper.Manager, null, (0, _core.jsx)(_popper.Reference, null, function (_ref2) {
+    var popperRef = _ref2.ref;
+    return (// Render a button to open the <Selector /> panel
+      (0, _core.jsx)(_Trigger.Trigger, {
+        ref: popperRef,
+        onClick: onTriggerClick,
+        miniMode: miniMode,
+        disabled: disabled
+      })
+    );
+  }), (0, _core.jsx)(_popper.Popper, {
+    placement: "bottom-start",
+    modifiers: popperModifiers
+  }, function (_ref3) {
+    var ref = _ref3.ref,
+        style = _ref3.style,
+        update = _ref3.update;
+    updatePopper.current = update;
+    return (0, _core.jsx)(_react.Fragment, null, settings.isOpen && (0, _core.jsx)("div", {
+      style: _objectSpread({
+        zIndex: _constants.layers.layer()
+      }, style),
+      ref: ref
+    }, (0, _core.jsx)("div", {
+      css: styles.popupStyle
+    }, settings.showFullPicker ? (0, _core.jsx)(_picker.EmojiPicker, {
+      emojiProvider: emojiProvider,
+      onSelection: onEmojiSelected
+    }) : (0, _core.jsx)("div", {
+      css: styles.contentStyle
+    }, (0, _core.jsx)(_Selector.Selector, {
+      emojiProvider: emojiProvider,
+      onSelection: onEmojiSelected,
+      showMore: allowAllEmojis,
+      onMoreClick: onSelectMoreClick,
+      pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
+    })))));
+  })));
+});
+
+exports.ReactionPicker = ReactionPicker;

package/dist/cjs/components/ReactionPicker/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "RENDER_REACTIONPICKER_TESTID", {
+  enumerable: true,
+  get: function get() {
+    return _ReactionPicker.RENDER_REACTIONPICKER_TESTID;
+  }
+});
+Object.defineProperty(exports, "ReactionPicker", {
+  enumerable: true,
+  get: function get() {
+    return _ReactionPicker.ReactionPicker;
+  }
+});
+
+var _ReactionPicker = require("./ReactionPicker");

package/dist/cjs/components/ReactionPicker/styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.popupStyle = exports.pickerStyle = exports.contentStyle = void 0;
+
+var _core = require("@emotion/core");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _tokens = require("@atlaskit/tokens");
+
+/** @jsx jsx */
+var pickerStyle = (0, _core.css)({
+  verticalAlign: 'middle',
+  '&.miniMode': {
+    display: 'inline-block',
+    marginRight: '4px'
+  }
+});
+exports.pickerStyle = pickerStyle;
+var contentStyle = (0, _core.css)({
+  display: 'flex'
+});
+exports.contentStyle = contentStyle;
+var popupStyle = (0, _core.css)({
+  background: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
+  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
+  boxShadow: (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
+  '&> div': {
+    boxShadow: undefined
+  }
+});
+exports.popupStyle = popupStyle;

package/dist/cjs/components/ReactionTooltip/ReactionTooltip.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionTooltip = exports.RENDER_REACTIONTOOLTIP_TESTID = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _core = require("@emotion/core");
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _shared = require("../../shared");
+
+var styles = _interopRequireWildcard(require("./styles"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsx jsx */
+
+/**
+ * Test id for wrapper ReactionTooltip div
+ */
+var RENDER_REACTIONTOOLTIP_TESTID = 'render-reactionTooltip';
+exports.RENDER_REACTIONTOOLTIP_TESTID = RENDER_REACTIONTOOLTIP_TESTID;
+
+var ReactionTooltip = function ReactionTooltip(_ref) {
+  var emojiName = _ref.emojiName,
+      children = _ref.children,
+      _ref$maxReactions = _ref.maxReactions,
+      maxReactions = _ref$maxReactions === void 0 ? _shared.constants.TOOLTIP_USERS_LIMIT : _ref$maxReactions,
+      _ref$reaction$users = _ref.reaction.users,
+      users = _ref$reaction$users === void 0 ? [] : _ref$reaction$users;
+
+  /**
+   * Render list of users in the tooltip box
+   */
+  var content = !users || users.length === 0 ? null : (0, _core.jsx)("div", {
+    css: styles.tooltipStyle
+  }, (0, _core.jsx)("ul", null, emojiName ? (0, _core.jsx)("li", {
+    css: styles.emojiNameStyle
+  }, emojiName) : null, users.slice(0, maxReactions).map(function (user, index) {
+    return (0, _core.jsx)("li", {
+      key: index
+    }, user.displayName);
+  }), users.length > maxReactions ? (0, _core.jsx)("li", {
+    css: styles.footerStyle
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _shared.i18n.messages.otherUsers, {
+    values: {
+      count: users.length - maxReactions
+    }
+  }))) : null));
+  return (0, _core.jsx)(_tooltip.default, {
+    content: content,
+    position: "bottom",
+    "data-testid": RENDER_REACTIONTOOLTIP_TESTID
+  }, _react.default.Children.only(children));
+};
+
+exports.ReactionTooltip = ReactionTooltip;

package/dist/cjs/components/ReactionTooltip/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "RENDER_REACTIONTOOLTIP_TESTID", {
+  enumerable: true,
+  get: function get() {
+    return _ReactionTooltip.RENDER_REACTIONTOOLTIP_TESTID;
+  }
+});
+Object.defineProperty(exports, "ReactionTooltip", {
+  enumerable: true,
+  get: function get() {
+    return _ReactionTooltip.ReactionTooltip;
+  }
+});
+
+var _ReactionTooltip = require("./ReactionTooltip");

package/dist/cjs/components/ReactionTooltip/styles.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.verticalMargin = exports.tooltipStyle = exports.footerStyle = exports.emojiNameStyle = void 0;
+
+var _core = require("@emotion/core");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _colors = require("@atlaskit/theme/colors");
+
+/** @jsx jsx */
+var verticalMargin = 5;
+exports.verticalMargin = verticalMargin;
+var tooltipStyle = (0, _core.css)({
+  maxWidth: '150px',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  marginBottom: verticalMargin,
+  ul: {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    textAlign: 'left'
+  },
+  li: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    marginTop: verticalMargin
+  }
+});
+exports.tooltipStyle = tooltipStyle;
+var emojiNameStyle = (0, _core.css)({
+  textTransform: 'capitalize',
+  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
+  fontWeight: 600
+});
+exports.emojiNameStyle = emojiNameStyle;
+var footerStyle = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
+  fontWeight: 300
+});
+exports.footerStyle = footerStyle;

package/dist/cjs/components/Reactions/Reactions.js

@@ -0,0 +1,200 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Reactions = exports.RENDER_TOOLTIP_TESTID = exports.RENDER_REACTIONS_TESTID = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _core = require("@emotion/core");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _analytics = require("../../analytics");
+
+var _types = require("../../types");
+
+var _shared = require("../../shared");
+
+var _Reaction = require("../Reaction");
+
+var _ReactionPicker = require("../ReactionPicker");
+
+var styles = _interopRequireWildcard(require("./styles"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsx jsx */
+
+/**
+ * Test id for wrapper Reactions div
+ */
+var RENDER_REACTIONS_TESTID = 'render-reactions';
+/**
+ * Test id for the tooltip
+ */
+
+exports.RENDER_REACTIONS_TESTID = RENDER_REACTIONS_TESTID;
+var RENDER_TOOLTIP_TESTID = 'render-tooltip';
+exports.RENDER_TOOLTIP_TESTID = RENDER_TOOLTIP_TESTID;
+
+/**
+ * Renders list of reactions
+ */
+var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var _ref$flash = _ref.flash,
+      flash = _ref$flash === void 0 ? {} : _ref$flash,
+      status = _ref.status,
+      errorMessage = _ref.errorMessage,
+      loadReaction = _ref.loadReaction,
+      quickReactionEmojiIds = _ref.quickReactionEmojiIds,
+      containerAri = _ref.containerAri,
+      ari = _ref.ari,
+      pickerQuickReactionEmojiIds = _ref.pickerQuickReactionEmojiIds,
+      onReactionHover = _ref.onReactionHover,
+      onSelection = _ref.onSelection,
+      _ref$reactions = _ref.reactions,
+      reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
+      emojiProvider = _ref.emojiProvider,
+      allowAllEmojis = _ref.allowAllEmojis,
+      onReactionClick = _ref.onReactionClick;
+
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  var openTime = (0, _react.useRef)();
+  var renderTime = (0, _react.useRef)();
+
+  if (status !== _types.ReactionStatus.ready) {
+    renderTime.current = Date.now();
+  }
+
+  (0, _react.useEffect)(function () {
+    if (status === _types.ReactionStatus.notLoaded) {
+      loadReaction();
+    }
+  }, [status, loadReaction]);
+  (0, _react.useEffect)(function () {
+    if (status === _types.ReactionStatus.ready && renderTime.current) {
+      _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createReactionsRenderedEvent, renderTime.current);
+
+      renderTime.current = undefined;
+    }
+  }, [createAnalyticsEvent, status]);
+  /**
+   * Get content of the tooltip
+   */
+
+  var getTooltip = function getTooltip() {
+    switch (status) {
+      case _types.ReactionStatus.error:
+        return errorMessage || (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.unexpectedError);
+
+      case _types.ReactionStatus.loading:
+      case _types.ReactionStatus.notLoaded:
+        return (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.loadingReactions);
+
+      default:
+        return undefined;
+    }
+  };
+
+  var handleReactionMouseEnter = function handleReactionMouseEnter(summary) {
+    if (onReactionHover) {
+      onReactionHover(summary.emojiId);
+    }
+  };
+
+  var handlePickerOpen = (0, _react.useCallback)(function () {
+    openTime.current = Date.now();
+
+    _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createPickerButtonClickedEvent, reactions.length);
+  }, [createAnalyticsEvent, reactions]);
+  var handleOnCancel = (0, _react.useCallback)(function () {
+    _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createPickerCancelledEvent, openTime.current);
+
+    openTime.current = undefined;
+  }, [createAnalyticsEvent]);
+  var handleOnMore = (0, _react.useCallback)(function () {
+    _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createPickerMoreClickedEvent, openTime.current);
+  }, [createAnalyticsEvent]);
+  var handleOnSelection = (0, _react.useCallback)(function (emojiId, source) {
+    _analytics.Analytics.createAndFireSafe(createAnalyticsEvent, _analytics.Analytics.createReactionSelectionEvent, source, emojiId, reactions.find(function (reaction) {
+      return reaction.emojiId === emojiId;
+    }), openTime.current);
+
+    openTime.current = undefined;
+    onSelection(emojiId);
+  }, [createAnalyticsEvent, onSelection, reactions]);
+  /**
+   * Get the reactions that we want to render are any reactions with a count greater than zero as well as any default emoji not already shown
+   */
+
+  var memorizedReactions = (0, _react.useMemo)(function () {
+    //
+
+    /**
+     * If reactions not empty, don't show quick reactions Pre defined emoji or if its empty => return the current list of reactions
+     */
+    if (reactions.length > 0 || !quickReactionEmojiIds) {
+      return reactions;
+    } // add any missing default reactions
+
+
+    var items = quickReactionEmojiIds.filter(function (emojiId) {
+      return !reactions.some(function (reaction) {
+        return reaction.emojiId === emojiId;
+      });
+    }).map(function (emojiId) {
+      return {
+        ari: ari,
+        containerAri: containerAri,
+        emojiId: emojiId,
+        count: 0,
+        reacted: false
+      };
+    });
+    return reactions.concat(items);
+  }, [ari, containerAri, quickReactionEmojiIds, reactions]);
+  return (0, _core.jsx)("div", {
+    css: styles.wrapperStyle,
+    "data-testid": RENDER_REACTIONS_TESTID
+  }, memorizedReactions.map(function (reaction) {
+    return (0, _core.jsx)(_Reaction.Reaction, {
+      key: reaction.emojiId,
+      css: styles.reactionStyle,
+      reaction: reaction,
+      emojiProvider: emojiProvider,
+      onClick: onReactionClick,
+      onMouseEnter: handleReactionMouseEnter,
+      flash: flash[reaction.emojiId]
+    });
+  }), (0, _core.jsx)(_tooltip.default, {
+    testId: RENDER_TOOLTIP_TESTID,
+    content: getTooltip()
+  }, (0, _core.jsx)(_ReactionPicker.ReactionPicker, {
+    css: styles.reactionStyle,
+    emojiProvider: emojiProvider,
+    miniMode: true,
+    allowAllEmojis: allowAllEmojis,
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    disabled: status !== _types.ReactionStatus.ready,
+    onSelection: handleOnSelection,
+    onOpen: handlePickerOpen,
+    onCancel: handleOnCancel,
+    onShowMore: handleOnMore
+  })));
+});
+
+exports.Reactions = Reactions;

package/dist/cjs/components/Reactions/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "RENDER_REACTIONS_TESTID", {
+  enumerable: true,
+  get: function get() {
+    return _Reactions.RENDER_REACTIONS_TESTID;
+  }
+});
+Object.defineProperty(exports, "RENDER_TOOLTIP_TESTID", {
+  enumerable: true,
+  get: function get() {
+    return _Reactions.RENDER_TOOLTIP_TESTID;
+  }
+});
+Object.defineProperty(exports, "Reactions", {
+  enumerable: true,
+  get: function get() {
+    return _Reactions.Reactions;
+  }
+});
+
+var _Reactions = require("./Reactions");