@atlaskit/reactions 27.2.1 → 29.0.0

package/dist/cjs/components/compiled/StaticReaction.js

@@ -0,0 +1,34 @@
+/* StaticReaction.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StaticReaction = void 0;
+require("./StaticReaction.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _compiled = require("@atlaskit/primitives/compiled");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  staticReaction: "_1reo15vq _18m915vq _19itglyw _2rkoglpi _1e0c1txw _2lx2vrvc _4cvr1y6m _1ul914no _4t3i1tcg _syaz1gjq _1pfh1b66 _12l21b66 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _d0al73ad"
+};
+var StaticReaction = exports.StaticReaction = function StaticReaction(_ref) {
+  var onMouseEnter = _ref.onMouseEnter,
+    onFocus = _ref.onFocus,
+    children = _ref.children,
+    testId = _ref.testId,
+    _ref$dataAttributes = _ref.dataAttributes,
+    dataAttributes = _ref$dataAttributes === void 0 ? {} : _ref$dataAttributes;
+  return /*#__PURE__*/React.createElement(_compiled.Box, (0, _extends2.default)({
+    onMouseEnter: onMouseEnter,
+    onFocus: onFocus,
+    testId: testId,
+    xcss: styles.staticReaction,
+    backgroundColor: "color.background.neutral.subtle"
+  }, dataAttributes), children);
+};

package/dist/cjs/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -15,8 +15,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _components = require("../../components");
+var _Reactions = require("../../components/Reactions");
+var _Reactions2 = require("../../components/compiled/Reactions");
 var _store2 = require("../../store");
 var _types = require("../../types");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled", "onReactionSuccess"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -220,7 +223,9 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
     }
   }, /*#__PURE__*/_react.default.createElement(_components.UfoErrorBoundary, {
     experiences: experienceInstance.current ? [experienceInstance.current] : []
-  }, stateData && dispatchData ? /*#__PURE__*/_react.default.createElement(_components.Reactions, (0, _extends2.default)({
+  }, stateData && dispatchData && (0, _platformFeatureFlags.fg)('platform_editor_css_migrate_reactions') ? /*#__PURE__*/_react.default.createElement(_Reactions2.Reactions, (0, _extends2.default)({
+    key: "".concat(containerAri, "|").concat(ari)
+  }, rest, dispatchData, stateData)) : null, stateData && dispatchData && !(0, _platformFeatureFlags.fg)('platform_editor_css_migrate_reactions') ? /*#__PURE__*/_react.default.createElement(_Reactions.Reactions, (0, _extends2.default)({
     key: "".concat(containerAri, "|").concat(ari)
   }, rest, dispatchData, stateData)) : null));
 };

package/dist/cjs/index.js

@@ -21,12 +21,7 @@ Object.defineProperty(exports, "MemoryReactionsStore", {
     return _store.MemoryReactionsStore;
   }
 });
-Object.defineProperty(exports, "Reaction", {
-  enumerable: true,
-  get: function get() {
-    return _components.Reaction;
-  }
-});
+exports.Reaction = void 0;
 Object.defineProperty(exports, "ReactionConsumer", {
   enumerable: true,
   get: function get() {
@@ -36,7 +31,7 @@ Object.defineProperty(exports, "ReactionConsumer", {
 Object.defineProperty(exports, "ReactionPicker", {
   enumerable: true,
   get: function get() {
-    return _components.ReactionPicker;
+    return _ReactionPicker.ReactionPicker;
   }
 });
 Object.defineProperty(exports, "ReactionServiceClient", {
@@ -57,13 +52,7 @@ Object.defineProperty(exports, "ReactionUpdateType", {
     return _types.ReactionUpdateType;
   }
 });
-Object.defineProperty(exports, "Reactions", {
-  enumerable: true,
-  get: function get() {
-    return _components.Reactions;
-  }
-});
-exports.constants = exports.UFO = void 0;
+exports.constants = exports.UFO = exports.Reactions = void 0;
 Object.defineProperty(exports, "useCloseManager", {
   enumerable: true,
   get: function get() {
@@ -72,12 +61,20 @@ Object.defineProperty(exports, "useCloseManager", {
 });
 var _constants = require("./shared/constants");
 var _ufo = require("./ufo");
+var _Reaction = require("./components/Reaction");
+var _Reaction2 = require("./components/compiled/Reaction");
+var _Reactions = require("./components/Reactions");
+var _Reactions2 = require("./components/compiled/Reactions");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _client = require("./client");
-var _components = require("./components");
+var _ReactionPicker = require("./components/ReactionPicker/ReactionPicker");
 var _useCloseManager = require("./hooks/useCloseManager");
 var _containers = require("./containers");
 var _store = require("./store");
 var _types = require("./types");
+var Reaction = exports.Reaction = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_reactions', _Reaction2.Reaction, _Reaction.Reaction);
+var Reactions = exports.Reactions = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_reactions', _Reactions2.Reactions, _Reactions.Reactions);
+
 // TODO: Convert all calls for ReactionRequest to Request, RequestClient to Client and ReactionsStore to Store
 
 var constants = exports.constants = {

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "27.2.1";
+const packageVersion = "29.0.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/ReactionPicker/ReactionPicker.js

@@ -52,7 +52,6 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showOpaqueBackground = false,
     subtleReactionsSummaryAndPicker = false,
     showAddReactionText = false,
-    showRoundTrigger = false,
     reactionPickerAdditionalStyle = undefined,
     reactionPickerTriggerIcon,
     useButtonAlignmentStyling,
@@ -67,7 +66,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
   const wrapperRef = useRef(null);
   const [selectionStyle, setSelectionStyle] = useState(undefined);
   const updatePopper = useRef();
-  const popperPlacement = showRoundTrigger ? 'left' : reactionPickerPlacement || 'bottom-start';
+  const popperPlacement = reactionPickerPlacement || 'bottom-start';
   const popperModifiers = [
   /**
     Removing this applyStyle modifier as it throws client errors ref:
@@ -108,7 +107,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
      */
     showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
     /**
-     * Use left placement for popper - using value based on showRoundTrigger for now since it needs the left placement
+     * Placement for popper
      */
     popperPlacement
   });
@@ -234,7 +233,6 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-    showRoundTrigger: showRoundTrigger,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     useButtonAlignmentStyling: useButtonAlignmentStyling
   })), settings.isOpen && jsx(PopperWrapper, {

package/dist/es2019/components/ReactionSummary/ReactionSummaryViewEmojiPicker.js

@@ -1,11 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback, useState } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React, { useCallback, useState } from 'react';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
 import Popup from '@atlaskit/popup';
 import { PickerRender } from '../../ufo';
@@ -58,17 +52,17 @@ export const ReactionSummaryViewEmojiPicker = ({
     onSelection(item.id, 'emojiPicker');
     close(item.id);
   }, [onSelection, close]);
-  return jsx(Popup, {
+  return /*#__PURE__*/React.createElement(Popup, {
     testId: "reaction-summary-view-emoji-picker",
     isOpen: isOpen,
     placement: "right",
     onClose: () => close(),
-    content: () => jsx(EmojiPicker, {
+    content: () => /*#__PURE__*/React.createElement(EmojiPicker, {
       emojiProvider: emojiProvider,
       onSelection: onEmojiSelected,
       size: emojiPickerSize
     }),
-    trigger: triggerProps => jsx(Trigger, _extends({}, triggerProps, {
+    trigger: triggerProps => /*#__PURE__*/React.createElement(Trigger, _extends({}, triggerProps, {
       disabled: disabled,
       reactionPickerTriggerIcon: reactionPickerTriggerIcon,
       tooltipContent: tooltipContent,

package/dist/es2019/components/Reactions/Reactions.js

@@ -117,7 +117,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
   hideDefaultReactions = false,
   ProfileCardWrapper,
   onlyRenderPicker = false,
-  showRoundTrigger = false,
   reactionPickerPlacement,
   reactionsPickerPreventOverflowOptions,
   isViewOnly = false,
@@ -329,7 +328,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
-    showRoundTrigger: showRoundTrigger,
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
     useButtonAlignmentStyling: useButtonAlignmentStyling,

package/dist/es2019/components/Trigger/Trigger.js

@@ -47,11 +47,6 @@ const expandedTriggerStyles = xcss({
 const triggerStylesRefresh = xcss({
   borderRadius: 'border.radius'
 });
-const roundTriggerStyles = xcss({
-  borderRadius: '50%',
-  height: '2rem',
-  width: '2rem'
-});
 const transparentEnabledTriggerStyles = xcss({
   borderColor: 'color.border',
   backgroundColor: 'color.background.neutral.subtle',
@@ -107,7 +102,6 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     showOpaqueBackground = false,
     showAddReactionText = false,
     subtleReactionsSummaryAndPicker = false,
-    showRoundTrigger = false,
     selectionStyle,
     reactionPickerTriggerIcon,
     useButtonAlignmentStyling
@@ -122,7 +116,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     content: tooltipContent
   }, jsx(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles,
+    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     selectionStyle],
     onClick: handleMouseDown,

package/dist/es2019/components/compiled/Counter.compiled.css

@@ -0,0 +1,16 @@
+._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18m915vq{overflow-y:hidden}
+._19bvidpf{padding-left:0}
+._19pk1b66{margin-top:var(--ds-space-050,4px)}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._1x821ts4{font-variant-numeric:tabular-nums}
+._2lx21bp4{flex-direction:column}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._kqswh2mm{position:relative}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._syaz1ifp{color:var(--ds-text-subtlest,#8993a4)}
+._syaz1ldt{color:var(--ds-text-selected,#0052cc)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vwz4dlk8{line-height:14px}

package/dist/es2019/components/compiled/Counter.js

@@ -0,0 +1,86 @@
+/* Counter.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./Counter.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import { SlideIn, ExitingPersistence } from '@atlaskit/motion';
+import { formatLargeNumber } from '../../shared/utils';
+import { B400, N90 } from '@atlaskit/theme/colors';
+const containerStyle = null;
+const counterLabelStyle = null;
+const countStyle = null;
+const highlightStyle = null;
+const darkerFontStyle = null;
+const updatedStyles = null;
+
+/**
+ * Test id for component top level div
+ */
+export const RENDER_COMPONENT_WRAPPER = 'counter-wrapper';
+
+/**
+ * Test id for wrapper div of the counter inside the slider
+ */
+export const RENDER_COUNTER_TESTID = 'counter-container';
+
+/**
+ * Counter label value wrapper div
+ */
+export const RENDER_LABEL_TESTID = 'counter_label_wrapper';
+/**
+ * Display reaction count next to the emoji button
+ */
+export const Counter = ({
+  highlight = false,
+  limit,
+  overLimitLabel,
+  className,
+  value,
+  animationDuration = 'medium',
+  useDarkerFont,
+  useUpdatedStyles
+}) => {
+  const getLabel = value => {
+    // Check if reached limit
+    if (limit && overLimitLabel && value >= limit) {
+      return overLimitLabel || '';
+    } else if (value === 0) {
+      return '';
+    } else {
+      return formatLargeNumber(value);
+    }
+  };
+  const lastValue = useRef();
+  const label = getLabel(value);
+  useEffect(() => {
+    lastValue.current = value;
+  }, [value]);
+  const isIncreasing = useMemo(() => {
+    return lastValue.current ? lastValue.current < value : false;
+  }, [value]);
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_11c81o8v _1reo15vq _18m915vq _syaz1ifp _kqswh2mm _ca0q1b66 _u5f3u2gc _n3td1b66 _19bvidpf _vwz4dlk8", useDarkerFont && "_syaz1gjq", useUpdatedStyles && "_19pk1b66", className]),
+    "data-testid": RENDER_COMPONENT_WRAPPER
+  }, /*#__PURE__*/React.createElement(ExitingPersistence, null, /*#__PURE__*/React.createElement(SlideIn, {
+    enterFrom: isIncreasing ? 'top' : 'bottom',
+    exitTo: isIncreasing ? 'top' : 'bottom',
+    key: value,
+    duration: animationDuration
+  }, (motion, direction) => {
+    return /*#__PURE__*/React.createElement("div", {
+      ref: motion.ref,
+      style: {
+        position: direction === 'exiting' ? 'absolute' : undefined
+      }
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: ax(["_1e0c1txw _2lx21bp4", motion.className]),
+      "data-testid": RENDER_COUNTER_TESTID
+    }, /*#__PURE__*/React.createElement("span", {
+      "data-testid": RENDER_LABEL_TESTID,
+      key: value,
+      className: ax(["_1x821ts4", highlight && "_syaz1ldt"])
+    }, label));
+  })));
+};

package/dist/es2019/components/compiled/FlashAnimation.compiled.css

@@ -0,0 +1,4 @@
+
+._y44v1li1{animation:k1qrjcqm .7s ease-in-out}._1bsb1osq{width:100%}
+._4t3i1osq{height:100%}
+@keyframes k1qrjcqm{20%{border-color:var(--ds-border-selected,#0065ff);background-color:var(--ds-background-selected-pressed,#b3d4ff)}75%{border-color:var(--ds-border-selected,#0065ff);background-color:var(--ds-background-selected-pressed,#b3d4ff)}to{border-color:var(--ds-border-selected,#0065ff);background-color:var(--ds-background-selected-pressed,#b3d4ff)}0%{background-color:transparent}}

package/dist/es2019/components/compiled/FlashAnimation.js

@@ -0,0 +1,21 @@
+/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./FlashAnimation.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { B75, B300 } from '@atlaskit/theme/colors';
+const flashTime = 700;
+const flashAnimation = null;
+const containerStyle = null;
+const flashStyle = null;
+/**
+ * Test id for wrapper FlashAnimation div
+ */
+export const RENDER_FLASHANIMATION_TESTID = 'flash-animation';
+/**
+ * Flash animation background component. See Reaction component for usage.
+ */
+export const FlashAnimation = props => /*#__PURE__*/React.createElement("div", {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  className: ax(["_1bsb1osq _4t3i1osq", props.flash && "", props.flash && "_y44v1li1", props.className]),
+  "data-testid": RENDER_FLASHANIMATION_TESTID
+}, props.children);

package/dist/es2019/components/compiled/Reaction.compiled.css

@@ -0,0 +1,9 @@
+._19bv19bv{padding-left:10px}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._8hrz1nam{transform-origin:center center 0}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._kqswh2mm{position:relative}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3v77o{padding-right:var(--ds-space-025,2px)}
+._vwz41crf{line-height:9pt}

package/dist/es2019/components/compiled/Reaction.js

@@ -0,0 +1,151 @@
+/* Reaction.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./Reaction.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useIntl } from 'react-intl-next';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ResourcedEmoji } from '@atlaskit/emoji';
+import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEvent, createReactionHoveredEvent } from '../../analytics';
+import { Counter } from '../Counter';
+import { ReactionParticleEffect } from './ReactionParticleEffect';
+import { ReactionTooltip } from './ReactionTooltip';
+import { messages } from '../../shared/i18n';
+import { isLeftClick } from '../../shared/utils';
+import { ReactionButton } from './ReactionButton';
+import { StaticReaction } from './StaticReaction';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
+const styles = {
+  container: "_kqswh2mm"
+};
+const emojiStyle = null;
+const emojiNoReactionStyle = null;
+
+/**
+ * Test id for Reaction item wrapper div
+ */
+export const RENDER_REACTION_TESTID = 'render_reaction_wrapper';
+/**
+ * Render an emoji reaction button
+ */
+export const Reaction = ({
+  emojiProvider,
+  onClick,
+  reaction,
+  onMouseEnter = () => {},
+  onFocused = () => {},
+  flash = false,
+  showParticleEffect = false,
+  showOpaqueBackground = false,
+  allowUserDialog,
+  handleOpenReactionsDialog,
+  isViewOnly = false,
+  showSubtleStyle
+}) => {
+  const intl = useIntl();
+  const hoverStart = useRef();
+  const focusStart = useRef();
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const [emojiName, setEmojiName] = useState();
+  const [isTooltipEnabled, setIsTooltipEnabled] = useState(true);
+  const {
+    reacted
+  } = reaction;
+  const emojiId = {
+    id: reaction.emojiId,
+    shortName: ''
+  };
+
+  // TODO: Extract the flow to a custom hook to retrieve emoji detailed description from an id using a custom hook. This will benefit a better optimization instead of the emojiProvider resolving everytime.
+  // Also optimize in future version to fetch in batch several emojiIds
+  useEffect(() => {
+    (async () => {
+      const emojiResource = await Promise.resolve(emojiProvider);
+      const foundEmoji = await emojiResource.findById(reaction.emojiId);
+      if (foundEmoji) {
+        setEmojiName(foundEmoji.name);
+      }
+    })();
+  }, [emojiProvider, reaction.emojiId]);
+  const handleClick = useCallback(event => {
+    event.preventDefault();
+    if (isLeftClick(event)) {
+      const {
+        reacted,
+        emojiId
+      } = reaction;
+      createAndFireSafe(createAnalyticsEvent, createReactionClickedEvent, !reacted, emojiId);
+      onClick(reaction.emojiId, event);
+    }
+  }, [createAnalyticsEvent, reaction, onClick]);
+  const handleMouseEnter = useCallback(event => {
+    event.preventDefault();
+    setIsTooltipEnabled(true);
+    if (!reaction.users || !reaction.users.length) {
+      focusStart.current = Date.now();
+    }
+    createAndFireSafe(createAnalyticsEvent, createReactionHoveredEvent, focusStart.current);
+    onMouseEnter(reaction.emojiId, event);
+  }, [createAnalyticsEvent, reaction, onMouseEnter]);
+  const handleFocused = useCallback(event => {
+    event.preventDefault();
+    setIsTooltipEnabled(true);
+    if (!reaction.users || !reaction.users.length) {
+      hoverStart.current = Date.now();
+    }
+    createAndFireSafe(createAnalyticsEvent, createReactionFocusedEvent, hoverStart.current);
+    onFocused(reaction.emojiId, event);
+  }, [createAnalyticsEvent, reaction, onFocused]);
+  const dismissTooltip = () => {
+    setIsTooltipEnabled(false);
+  };
+  const emojiAndCount = /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_8hrz1nam _vwz41crf _ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc", reaction.count === 0 && "_ca0q1b66 _u5f3v77o _n3td1b66 _19bv19bv"])
+  }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: emojiId,
+    fitToHeight: 16
+  })), /*#__PURE__*/React.createElement(Counter, {
+    value: reaction.count,
+    highlight: !isViewOnly && reaction.reacted
+  }));
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.container
+  }, showParticleEffect && /*#__PURE__*/React.createElement(ReactionParticleEffect, {
+    emojiId: emojiId,
+    emojiProvider: emojiProvider
+  }), /*#__PURE__*/React.createElement(ReactionTooltip, {
+    emojiName: emojiName,
+    reaction: reaction,
+    isEnabled: isTooltipEnabled,
+    allowUserDialog: allowUserDialog,
+    handleOpenReactionsDialog: handleOpenReactionsDialog,
+    dismissTooltip: dismissTooltip
+  }, isViewOnly ? /*#__PURE__*/React.createElement(StaticReaction, {
+    onMouseEnter: handleMouseEnter,
+    onFocus: handleFocused,
+    testId: RENDER_REACTION_TESTID,
+    dataAttributes: {
+      'data-emoji-id': reaction.emojiId
+    }
+  }, emojiAndCount) : /*#__PURE__*/React.createElement(ReactionButton, {
+    onClick: handleClick,
+    flash: flash,
+    ariaLabel: intl.formatMessage(messages.reactWithEmoji, {
+      emoji: emojiName
+    }),
+    ariaPressed: reacted,
+    onMouseEnter: handleMouseEnter,
+    onFocus: handleFocused,
+    testId: RENDER_REACTION_TESTID,
+    dataAttributes: {
+      'data-emoji-id': reaction.emojiId,
+      'data-emoji-button-id': reaction.emojiId
+    },
+    showOpaqueBackground: showOpaqueBackground,
+    showSubtleStyle: showSubtleStyle,
+    reacted: reacted
+  }, emojiAndCount)));
+};

package/dist/es2019/components/compiled/ReactionButton.compiled.css

@@ -0,0 +1,37 @@
+
+._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
+._2rko19bv{border-radius:10px}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._1dqonqa1{border-style:solid}
+._1h6d1yqz{border-color:var(--ds-border-selected,#0c66e4)}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}
+._1kl7glyw{border-left:none}
+._1s7zglyw{border-right:none}
+._n7zlglyw{border-bottom:none}
+._x3doglyw{border-top:none}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._18m915vq{overflow-y:hidden}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1e0c1txw{display:flex}
+._1pfh1b66{margin-block-start:var(--ds-space-050,4px)}
+._1reo15vq{overflow-x:hidden}
+._1ul914no{min-width:36px}
+._2lx2vrvc{flex-direction:row}
+._4cvr1h6o{align-items:center}
+._4cvr1y6m{align-items:flex-start}
+._4t3i1tcg{height:24px}
+._4t3iqslr{height:22px}
+._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._irr3108i:hover{background-color:var(--ds-surface-hovered,#f1f2f4)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._irr3i1yw:hover{background-color:var(--ds-background-selected-hovered,#cce0ff)}
+._1di619ru:active{background-color:var(--ds-background-selected-pressed,#85b8ff)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
+._1di61ji5:active{background-color:var(--ds-surface-pressed,#dcdfe4)}

package/dist/es2019/components/compiled/ReactionButton.js

@@ -0,0 +1,56 @@
+/* ReactionButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./ReactionButton.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@compiled/react';
+import { FlashAnimation } from './FlashAnimation';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Pressable } from '@atlaskit/primitives/compiled';
+const styles = {
+  reactionButton: "_2rko14q2 _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _2lx2vrvc _4cvr1y6m _1ul914no _4t3i1tcg _bfhksm61 _syaz1gjq _1pfh1b66 _12l21b66 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _irr3166n _1di61dty",
+  reactionStylesRefresh: "_2rkoglpi",
+  borderless: "_x3doglyw _1kl7glyw _1s7zglyw _n7zlglyw",
+  reacted: "_1h6d1yqz _bfhkfg4m _irr3i1yw _1di619ru",
+  opaqueBackground: "_bfhkvuon _irr3108i _1di61ji5"
+};
+
+/**
+ * Default styling px height for an emoji reaction
+ */
+const akHeight = 24;
+const flashHeight = akHeight - 2; // height without the 1px border
+
+const flashStyle = null;
+const flashStyleOld = null;
+export const ReactionButton = ({
+  onClick,
+  flash = false,
+  showSubtleStyle,
+  showOpaqueBackground,
+  reacted,
+  ariaLabel,
+  ariaPressed,
+  onMouseEnter,
+  onFocus,
+  children,
+  dataAttributes = {},
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement(Pressable, _extends({
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onFocus: onFocus,
+    "aria-label": ariaLabel,
+    "aria-pressed": ariaPressed,
+    testId: testId,
+    xcss: cx(styles.reactionButton, reacted && styles.reacted, !reacted && showSubtleStyle && styles.borderless, !reacted && showOpaqueBackground && styles.opaqueBackground,
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    fg('platform-component-visual-refresh') && styles.reactionStylesRefresh)
+  }, dataAttributes), /*#__PURE__*/React.createElement(FlashAnimation, {
+    flash: flash
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    ,
+    className: ax([fg('platform-component-visual-refresh') ? "_2rkogqwt _1e0c1txw _2lx2vrvc _4cvr1h6o _4t3iqslr" : "_2rko19bv _1e0c1txw _2lx2vrvc _4cvr1h6o _4t3iqslr"])
+  }, children));
+};

package/dist/es2019/components/compiled/ReactionParticleEffect.compiled.css

@@ -0,0 +1,19 @@
+
+._y44vik89{animation:k102rpwx ease-in-out,k4txmy4 ease}._154iidpf{top:0}
+._1lac188d:nth-child(3){animation-delay:.3s}
+._1ltvftgi{left:8px}
+._1ltvidpf{left:0}
+._1pbyifev{z-index:10000}
+._1qen1lpd:nth-child(2){left:-5px}
+._5sagpwmj{animation-duration:.7s}
+._7vm81dfm:nth-child(4){animation-delay:.45s}
+._91vyftgi:nth-child(3){left:8px}
+._jsy51n1a:nth-child(4){left:-1px}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
+._tzy4idpf{opacity:0}
+._xg4k6ebc:nth-child(2){animation-delay:.15s}
+@keyframes k102rpwx{0%{opacity:0}20%{opacity:1}60%{opacity:1}to{opacity:0}}
+@keyframes k4txmy4{0%{transform:translateY(0) scale(1)}to{transform:translateY(-90pt) scale(1.7)}}
+@media (prefers-reduced-motion:reduce){._m602idpf{opacity:0}}