@atlaskit/reactions 30.0.7 → 30.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "30.0.7",
+	"version": "30.0.8",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/emoji": "^69.0.0",
-		"@atlaskit/heading": "^5.1.0",
+		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^25.5.0",
 		"@atlaskit/modal-dialog": "^14.1.0",
 		"@atlaskit/motion": "^5.1.0",
@@ -47,7 +47,7 @@
 		"@atlaskit/platform-feature-flags-react": "^0.1.0",
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/popup": "^4.0.0",
-		"@atlaskit/primitives": "^14.3.0",
+		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/react-ufo": "^3.4.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.0.0",
@@ -58,7 +58,6 @@
 		"@atlaskit/util-service-support": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
-		"@emotion/react": "^11.7.1",
 		"focus-trap": "^2.4.5"
 	},
 	"peerDependencies": {
@@ -72,7 +71,6 @@
 		"@atlaskit/elements-test-helpers": "^0.9.0",
 		"@atlaskit/util-data-test": "^18.0.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
-		"@emotion/jest": "^11.8.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^13.4.0",
@@ -102,7 +100,6 @@
 				"color"
 			],
 			"styling": [
-				"emotion",
 				"compiled"
 			]
 		},
@@ -127,9 +124,6 @@
 		"platform_fix_analytics_error": {
 			"type": "boolean"
 		},
-		"platform_editor_css_migrate_reactions": {
-			"type": "boolean"
-		},
 		"platform-make-accessible-close-button": {
 			"type": "boolean"
 		}

package/dist/cjs/components/Counter/Counter.js

@@ -1,104 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RENDER_LABEL_TESTID = exports.RENDER_COUNTER_TESTID = exports.RENDER_COMPONENT_WRAPPER = exports.Counter = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _motion = require("@atlaskit/motion");
-var _utils = require("../../shared/utils");
-var _styles = require("./styles");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/design-system/no-banned-imports
-
-/**
- * Test id for component top level div
- */
-var RENDER_COMPONENT_WRAPPER = exports.RENDER_COMPONENT_WRAPPER = 'counter-wrapper';
-
-/**
- * Test id for wrapper div of the counter inside the slider
- */
-var RENDER_COUNTER_TESTID = exports.RENDER_COUNTER_TESTID = 'counter-container';
-
-/**
- * Counter label value wrapper div
- */
-var RENDER_LABEL_TESTID = exports.RENDER_LABEL_TESTID = 'counter_label_wrapper';
-/**
- * Display reaction count next to the emoji button
- */
-var Counter = exports.Counter = function Counter(_ref) {
-  var _ref$highlight = _ref.highlight,
-    highlight = _ref$highlight === void 0 ? false : _ref$highlight,
-    limit = _ref.limit,
-    overLimitLabel = _ref.overLimitLabel,
-    className = _ref.className,
-    value = _ref.value,
-    _ref$animationDuratio = _ref.animationDuration,
-    animationDuration = _ref$animationDuratio === void 0 ? 'medium' : _ref$animationDuratio,
-    useDarkerFont = _ref.useDarkerFont,
-    useUpdatedStyles = _ref.useUpdatedStyles;
-  var getLabel = function getLabel(value) {
-    // Check if reached limit
-    if (limit && overLimitLabel && value >= limit) {
-      return overLimitLabel || '';
-    } else if (value === 0) {
-      return '';
-    } else {
-      return (0, _utils.formatLargeNumber)(value);
-    }
-  };
-  var lastValue = (0, _react.useRef)();
-  var label = getLabel(value);
-  (0, _react.useEffect)(function () {
-    lastValue.current = value;
-  }, [value]);
-  var isIncreasing = (0, _react.useMemo)(function () {
-    return lastValue.current ? lastValue.current < value : false;
-  }, [value]);
-  var fontStyles = useDarkerFont ? [_styles.darkerFontStyle] : [];
-  var additionalStyles = useUpdatedStyles ? [_styles.updatedStyles] : [];
-  return (0, _react2.jsx)("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: className,
-    "data-testid": RENDER_COMPONENT_WRAPPER
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: [_styles.countStyle].concat(fontStyles, additionalStyles)
-  }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_motion.SlideIn, {
-    enterFrom: isIncreasing ? 'top' : 'bottom',
-    exitTo: isIncreasing ? 'top' : 'bottom',
-    key: value,
-    duration: animationDuration
-  }, function (motion, direction) {
-    return (0, _react2.jsx)("div", {
-      ref: motion.ref,
-      css: [
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      _styles.containerStyle,
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      (0, _react2.css)({
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        position: direction === 'exiting' ? 'absolute' : undefined
-      })]
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: motion.className,
-      "data-testid": RENDER_COUNTER_TESTID
-    }, (0, _react2.jsx)("span", {
-      "data-testid": RENDER_LABEL_TESTID
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: highlight ? [_styles.counterLabelStyle, _styles.highlightStyle] : _styles.counterLabelStyle,
-      key: value
-    }, label));
-  })));
-};

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

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Counter", {
-  enumerable: true,
-  get: function get() {
-    return _Counter.Counter;
-  }
-});
-Object.defineProperty(exports, "RENDER_COMPONENT_WRAPPER", {
-  enumerable: true,
-  get: function get() {
-    return _Counter.RENDER_COMPONENT_WRAPPER;
-  }
-});
-Object.defineProperty(exports, "RENDER_COUNTER_TESTID", {
-  enumerable: true,
-  get: function get() {
-    return _Counter.RENDER_COUNTER_TESTID;
-  }
-});
-Object.defineProperty(exports, "RENDER_LABEL_TESTID", {
-  enumerable: true,
-  get: function get() {
-    return _Counter.RENDER_LABEL_TESTID;
-  }
-});
-var _Counter = require("./Counter");

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

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.updatedStyles = exports.highlightStyle = exports.darkerFontStyle = exports.counterLabelStyle = exports.countStyle = exports.containerStyle = void 0;
-var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var countStyle = exports.countStyle = (0, _react.css)({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  color: "var(--ds-text-subtlest, ".concat(_colors.N90, ")"),
-  overflow: 'hidden',
-  position: 'relative',
-  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)", " 0"),
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '14px'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var containerStyle = exports.containerStyle = (0, _react.css)({
-  display: 'flex',
-  flexDirection: 'column'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var highlightStyle = exports.highlightStyle = (0, _react.css)({
-  color: "var(--ds-text-selected, ".concat(_colors.B400, ")")
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var counterLabelStyle = exports.counterLabelStyle = (0, _react.css)({
-  fontVariantNumeric: 'tabular-nums'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var darkerFontStyle = exports.darkerFontStyle = (0, _react.css)({
-  color: "var(--ds-text-subtle, #44546F)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var updatedStyles = exports.updatedStyles = (0, _react.css)({
-  marginTop: "var(--ds-space-025, 2px)"
-});

package/dist/cjs/components/EmojiButton/EmojiButton.js

@@ -1,63 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RENDER_BUTTON_TESTID = exports.EmojiButton = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactIntlNext = require("react-intl-next");
-var _react2 = require("@emotion/react");
-var _emoji = require("@atlaskit/emoji");
-var _primitives = require("@atlaskit/primitives");
-var _i18n = require("../../shared/i18n");
-var _utils = require("../../shared/utils");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var emojiButtonStyles = (0, _primitives.xcss)({
-  outline: 'none',
-  display: 'flex',
-  backgroundColor: 'color.background.neutral.subtle',
-  border: 0,
-  borderRadius: 'border.radius',
-  margin: 'space.0',
-  padding: 'space.100',
-  // @ts-expect-error - Nested selectors not supported in XCSS
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  ':hover > span': {
-    transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
-    transform: 'scale(1.33)'
-  }
-});
-var RENDER_BUTTON_TESTID = exports.RENDER_BUTTON_TESTID = 'button-emoji-id';
-/**
- * custom button to render the custom emoji selector inside the reaction picker
- */
-var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
-  var emojiId = _ref.emojiId,
-    onClick = _ref.onClick,
-    emojiProvider = _ref.emojiProvider;
-  var onButtonClick = function onButtonClick(event) {
-    event.preventDefault();
-    if (onClick && (0, _utils.isLeftClick)(event)) {
-      onClick(emojiId, undefined, event);
-    }
-  };
-  var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _react2.jsx)(_primitives.Pressable, {
-    testId: RENDER_BUTTON_TESTID,
-    onClick: onButtonClick,
-    "aria-label": intl.formatMessage(_i18n.messages.reactWithEmoji, {
-      emoji: emojiId.shortName
-    }),
-    xcss: emojiButtonStyles
-  }, (0, _react2.jsx)(_emoji.ResourcedEmoji, {
-    emojiProvider: emojiProvider,
-    emojiId: emojiId
-  }));
-};

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

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "EmojiButton", {
-  enumerable: true,
-  get: function get() {
-    return _EmojiButton.EmojiButton;
-  }
-});
-Object.defineProperty(exports, "RENDER_BUTTON_TESTID", {
-  enumerable: true,
-  get: function get() {
-    return _EmojiButton.RENDER_BUTTON_TESTID;
-  }
-});
-var _EmojiButton = require("./EmojiButton");

package/dist/cjs/components/FlashAnimation/FlashAnimation.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RENDER_FLASHANIMATION_TESTID = exports.FlashAnimation = void 0;
-var _react = require("@emotion/react");
-var _styles = require("./styles");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-/**
- * Test id for wrapper FlashAnimation div
- */
-var RENDER_FLASHANIMATION_TESTID = exports.RENDER_FLASHANIMATION_TESTID = 'flash-animation';
-
-/**
- * Flash animation background component. See Reaction component for usage.
- */
-var FlashAnimation = exports.FlashAnimation = function FlashAnimation(props) {
-  return (0, _react.jsx)("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: props.className
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: [_styles.containerStyle, props.flash && _styles.flashStyle],
-    "data-testid": RENDER_FLASHANIMATION_TESTID
-  }, props.children);
-};

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

@@ -1,18 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "FlashAnimation", {
-  enumerable: true,
-  get: function get() {
-    return _FlashAnimation.FlashAnimation;
-  }
-});
-Object.defineProperty(exports, "RENDER_FLASHANIMATION_TESTID", {
-  enumerable: true,
-  get: function get() {
-    return _FlashAnimation.RENDER_FLASHANIMATION_TESTID;
-  }
-});
-var _FlashAnimation = require("./FlashAnimation");

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

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.flashStyle = exports.flashAnimation = exports.containerStyle = void 0;
-var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var flashTime = 700;
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var flashAnimation = exports.flashAnimation = (0, _react.keyframes)({
-  '0%': {
-    backgroundColor: 'transparent'
-  },
-  '20%': {
-    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B75, ")"),
-    borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")")
-  },
-  '75%': {
-    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B75, ")"),
-    borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")")
-  },
-  '100%': {
-    backgroundColor: "var(--ds-background-selected-pressed, ".concat(_colors.B75, ")"),
-    borderColor: "var(--ds-border-selected, ".concat(_colors.B300, ")")
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var containerStyle = exports.containerStyle = (0, _react.css)({
-  width: '100%',
-  height: '100%'
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var flashStyle = exports.flashStyle = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  animation: "".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out")
-});

package/dist/cjs/components/Reaction/Reaction.js

@@ -1,210 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Reaction = exports.RENDER_REACTION_TESTID = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactIntlNext = require("react-intl-next");
-var _react2 = require("@emotion/react");
-var _analyticsNext = require("@atlaskit/analytics-next");
-var _emoji = require("@atlaskit/emoji");
-var _primitives = require("@atlaskit/primitives");
-var _analytics = require("../../analytics");
-var _Counter = require("../Counter");
-var _ReactionParticleEffect = require("../ReactionParticleEffect");
-var _ReactionTooltip = require("../ReactionTooltip");
-var _i18n = require("../../shared/i18n");
-var _utils = require("../../shared/utils");
-var _styles = require("./styles");
-var _ReactionButton = require("./ReactionButton");
-var _StaticReaction = require("./StaticReaction");
-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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-/**
- * Test id for Reaction item wrapper div
- */
-var RENDER_REACTION_TESTID = exports.RENDER_REACTION_TESTID = 'render_reaction_wrapper';
-var containerStyles = (0, _primitives.xcss)({
-  position: 'relative'
-});
-var borderlessStyle = (0, _primitives.xcss)({
-  border: 'none'
-});
-var reactedStyles = (0, _primitives.xcss)({
-  backgroundColor: 'color.background.selected',
-  borderColor: 'color.border.selected',
-  ':hover': {
-    backgroundColor: 'color.background.selected.hovered'
-  },
-  ':active': {
-    backgroundColor: 'color.background.selected.pressed'
-  }
-});
-var opaqueBackgroundStyles = (0, _primitives.xcss)({
-  backgroundColor: 'elevation.surface',
-  ':hover': {
-    backgroundColor: 'elevation.surface.hovered'
-  },
-  ':active': {
-    backgroundColor: 'elevation.surface.pressed'
-  }
-});
-
-/**
- * Render an emoji reaction button
- */
-var Reaction = exports.Reaction = function Reaction(_ref) {
-  var emojiProvider = _ref.emojiProvider,
-    onClick = _ref.onClick,
-    reaction = _ref.reaction,
-    _ref$onMouseEnter = _ref.onMouseEnter,
-    onMouseEnter = _ref$onMouseEnter === void 0 ? function () {} : _ref$onMouseEnter,
-    _ref$onFocused = _ref.onFocused,
-    onFocused = _ref$onFocused === void 0 ? function () {} : _ref$onFocused,
-    _ref$flash = _ref.flash,
-    flash = _ref$flash === void 0 ? false : _ref$flash,
-    _ref$showParticleEffe = _ref.showParticleEffect,
-    showParticleEffect = _ref$showParticleEffe === void 0 ? false : _ref$showParticleEffe,
-    _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
-    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
-    allowUserDialog = _ref.allowUserDialog,
-    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
-    _ref$isViewOnly = _ref.isViewOnly,
-    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly,
-    showSubtleStyle = _ref.showSubtleStyle;
-  var intl = (0, _reactIntlNext.useIntl)();
-  var hoverStart = (0, _react.useRef)();
-  var focusStart = (0, _react.useRef)();
-  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
-    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var _useState = (0, _react.useState)(),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    emojiName = _useState2[0],
-    setEmojiName = _useState2[1];
-  var _useState3 = (0, _react.useState)(true),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isTooltipEnabled = _useState4[0],
-    setIsTooltipEnabled = _useState4[1];
-  var reacted = reaction.reacted;
-  var 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
-  (0, _react.useEffect)(function () {
-    (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var emojiResource, foundEmoji;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.next = 2;
-            return Promise.resolve(emojiProvider);
-          case 2:
-            emojiResource = _context.sent;
-            _context.next = 5;
-            return emojiResource.findById(reaction.emojiId);
-          case 5:
-            foundEmoji = _context.sent;
-            if (foundEmoji) {
-              setEmojiName(foundEmoji.name);
-            }
-          case 7:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }))();
-  }, [emojiProvider, reaction.emojiId]);
-  var handleClick = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    if ((0, _utils.isLeftClick)(event)) {
-      var _reacted = reaction.reacted,
-        _emojiId = reaction.emojiId;
-      (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionClickedEvent, !_reacted, _emojiId);
-      onClick(reaction.emojiId, event);
-    }
-  }, [createAnalyticsEvent, reaction, onClick]);
-  var handleMouseEnter = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    setIsTooltipEnabled(true);
-    if (!reaction.users || !reaction.users.length) {
-      focusStart.current = Date.now();
-    }
-    (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionHoveredEvent, focusStart.current);
-    onMouseEnter(reaction.emojiId, event);
-  }, [createAnalyticsEvent, reaction, onMouseEnter]);
-  var handleFocused = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    setIsTooltipEnabled(true);
-    if (!reaction.users || !reaction.users.length) {
-      hoverStart.current = Date.now();
-    }
-    (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionFocusedEvent, hoverStart.current);
-    onFocused(reaction.emojiId, event);
-  }, [createAnalyticsEvent, reaction, onFocused]);
-  var dismissTooltip = function dismissTooltip() {
-    setIsTooltipEnabled(false);
-  };
-  var buttonStyles = [].concat((0, _toConsumableArray2.default)(showOpaqueBackground ? [opaqueBackgroundStyles] : []), (0, _toConsumableArray2.default)(showSubtleStyle ? [borderlessStyle] : []));
-  var emojiAndCount = (0, _react2.jsx)(_primitives.Inline, null, (0, _react2.jsx)("div", {
-    css: [_styles.emojiStyle, reaction.count === 0 && _styles.emojiNoReactionStyle]
-  }, (0, _react2.jsx)(_emoji.ResourcedEmoji, {
-    emojiProvider: emojiProvider,
-    emojiId: emojiId,
-    fitToHeight: 16
-  })), (0, _react2.jsx)(_Counter.Counter, {
-    value: reaction.count,
-    highlight: !isViewOnly && reaction.reacted
-  }));
-  return (0, _react2.jsx)(_primitives.Box, {
-    xcss: containerStyles
-  }, showParticleEffect && (0, _react2.jsx)(_ReactionParticleEffect.ReactionParticleEffect, {
-    emojiId: emojiId,
-    emojiProvider: emojiProvider
-  }), (0, _react2.jsx)(_ReactionTooltip.ReactionTooltip, {
-    emojiName: emojiName,
-    reaction: reaction,
-    isEnabled: isTooltipEnabled,
-    allowUserDialog: allowUserDialog,
-    handleOpenReactionsDialog: handleOpenReactionsDialog,
-    dismissTooltip: dismissTooltip
-  }, isViewOnly ? (0, _react2.jsx)(_StaticReaction.StaticReaction, {
-    onMouseEnter: handleMouseEnter,
-    onFocus: handleFocused,
-    testId: RENDER_REACTION_TESTID,
-    dataAttributes: {
-      'data-emoji-id': reaction.emojiId
-    }
-  }, emojiAndCount) : (0, _react2.jsx)(_ReactionButton.ReactionButton, {
-    onClick: handleClick,
-    flash: flash,
-    additionalStyles: reaction.reacted ? [reactedStyles] : buttonStyles,
-    ariaLabel: intl.formatMessage(_i18n.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
-    }
-  }, emojiAndCount)));
-};