@atlaskit/reactions 27.2.0 → 28.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/reactions
 
+## 28.0.0
+
+### Major Changes
+
+- [#128076](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128076)
+  [`d93c6aab425f1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d93c6aab425f1) -
+  migrate reactions styles to compiled css
+
+### Patch Changes
+
+- Updated dependencies
+
+## 27.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 27.2.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -50,6 +50,9 @@
         {
             "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/popper/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/popper/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -50,6 +50,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/popper/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/reactions";
-var packageVersion = "27.2.0";
+var packageVersion = "28.0.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -1,25 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ReactionSummaryViewEmojiPicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 var _picker = require("@atlaskit/emoji/picker");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _ufo = require("../../ufo");
 var _Trigger = require("../Trigger");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+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 ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPicker(_ref) {
   var emojiProvider = _ref.emojiProvider,
     onSelection = _ref.onSelection,
@@ -72,7 +67,7 @@ var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = fu
     onSelection(item.id, 'emojiPicker');
     close(item.id);
   }, [onSelection, close]);
-  return (0, _react2.jsx)(_popup.default, {
+  return /*#__PURE__*/_react.default.createElement(_popup.default, {
     testId: "reaction-summary-view-emoji-picker",
     isOpen: isOpen,
     placement: "right",
@@ -80,14 +75,14 @@ var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = fu
       return close();
     },
     content: function content() {
-      return (0, _react2.jsx)(_picker.EmojiPicker, {
+      return /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
         emojiProvider: emojiProvider,
         onSelection: onEmojiSelected,
         size: emojiPickerSize
       });
     },
     trigger: function trigger(triggerProps) {
-      return (0, _react2.jsx)(_Trigger.Trigger, (0, _extends2.default)({}, triggerProps, {
+      return /*#__PURE__*/_react.default.createElement(_Trigger.Trigger, (0, _extends2.default)({}, triggerProps, {
         disabled: disabled,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
         tooltipContent: tooltipContent,

package/dist/cjs/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)}
+._syazln51{color:var(--_1hfkvbo)}
+._syazvsbi{color:var(--_htr5nm)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._vwz4dlk8{line-height:14px}

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

@@ -0,0 +1,102 @@
+/* Counter.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RENDER_LABEL_TESTID = exports.RENDER_COUNTER_TESTID = exports.RENDER_COMPONENT_WRAPPER = exports.Counter = void 0;
+require("./Counter.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _motion = require("@atlaskit/motion");
+var _utils = require("../../shared/utils");
+var _colors = require("@atlaskit/theme/colors");
+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 containerStyle = null;
+var counterLabelStyle = null;
+var countStyle = null;
+var highlightStyle = null;
+var darkerFontStyle = null;
+var updatedStyles = null;
+
+/**
+ * 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]);
+  return /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: (0, _runtime.ax)(["_11c81o8v _1reo15vq _18m915vq _syazvsbi _kqswh2mm _ca0q1b66 _u5f3u2gc _n3td1b66 _19bvidpf _vwz4dlk8", useDarkerFont && "_syaz1gjq", useUpdatedStyles && "_19pk1b66", className]),
+    "data-testid": RENDER_COMPONENT_WRAPPER,
+    style: {
+      "--_htr5nm": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N90, ")"))
+    }
+  }, /*#__PURE__*/React.createElement(_motion.ExitingPersistence, null, /*#__PURE__*/React.createElement(_motion.SlideIn, {
+    enterFrom: isIncreasing ? 'top' : 'bottom',
+    exitTo: isIncreasing ? 'top' : 'bottom',
+    key: value,
+    duration: animationDuration
+  }, function (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: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4", motion.className]),
+      "data-testid": RENDER_COUNTER_TESTID
+    }, /*#__PURE__*/React.createElement("span", {
+      "data-testid": RENDER_LABEL_TESTID,
+      key: value,
+      className: (0, _runtime.ax)(["_1x821ts4", highlight && "_syazln51"]),
+      style: {
+        "--_1hfkvbo": (0, _runtime.ix)("var(--ds-text-selected, ".concat(_colors.B400, ")"))
+      }
+    }, label));
+  })));
+};

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

@@ -0,0 +1,3 @@
+
+._y44vt91o{animation:var(--_770km1)}._1bsb1osq{width:100%}
+._4t3i1osq{height:100%}

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

@@ -0,0 +1,35 @@
+/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RENDER_FLASHANIMATION_TESTID = exports.FlashAnimation = void 0;
+require("./FlashAnimation.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _colors = require("@atlaskit/theme/colors");
+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 flashTime = 700;
+var flashAnimation = null;
+var containerStyle = null;
+var flashStyle = null;
+/**
+ * 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 /*#__PURE__*/React.createElement("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1osq", props.flash && "_y44vt91o", props.className]),
+    "data-testid": RENDER_FLASHANIMATION_TESTID,
+    style: {
+      "--_770km1": (0, _runtime.ix)("".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out"))
+    }
+  }, props.children);
+};

package/dist/cjs/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/cjs/components/compiled/Reaction.js

@@ -0,0 +1,185 @@
+/* Reaction.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.Reaction = exports.RENDER_REACTION_TESTID = void 0;
+require("./Reaction.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _emoji = require("@atlaskit/emoji");
+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 _ReactionButton = require("./ReactionButton");
+var _StaticReaction = require("./StaticReaction");
+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 = {
+  container: "_kqswh2mm"
+};
+var emojiStyle = null;
+var emojiNoReactionStyle = null;
+
+/**
+ * Test id for Reaction item wrapper div
+ */
+var RENDER_REACTION_TESTID = exports.RENDER_REACTION_TESTID = 'render_reaction_wrapper';
+/**
+ * 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 emojiAndCount = /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_8hrz1nam _vwz41crf _ca0q1b66 _u5f31b66 _n3td1b66 _19bvu2gc", reaction.count === 0 && "_ca0q1b66 _u5f3v77o _n3td1b66 _19bv19bv"])
+  }, /*#__PURE__*/React.createElement(_emoji.ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: emojiId,
+    fitToHeight: 16
+  })), /*#__PURE__*/React.createElement(_Counter.Counter, {
+    value: reaction.count,
+    highlight: !isViewOnly && reaction.reacted
+  }));
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.container
+  }, showParticleEffect && /*#__PURE__*/React.createElement(_ReactionParticleEffect.ReactionParticleEffect, {
+    emojiId: emojiId,
+    emojiProvider: emojiProvider
+  }), /*#__PURE__*/React.createElement(_ReactionTooltip.ReactionTooltip, {
+    emojiName: emojiName,
+    reaction: reaction,
+    isEnabled: isTooltipEnabled,
+    allowUserDialog: allowUserDialog,
+    handleOpenReactionsDialog: handleOpenReactionsDialog,
+    dismissTooltip: dismissTooltip
+  }, isViewOnly ? /*#__PURE__*/React.createElement(_StaticReaction.StaticReaction, {
+    onMouseEnter: handleMouseEnter,
+    onFocus: handleFocused,
+    testId: RENDER_REACTION_TESTID,
+    dataAttributes: {
+      'data-emoji-id': reaction.emojiId
+    }
+  }, emojiAndCount) : /*#__PURE__*/React.createElement(_ReactionButton.ReactionButton, {
+    onClick: handleClick,
+    flash: flash,
+    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
+    },
+    showOpaqueBackground: showOpaqueBackground,
+    showSubtleStyle: showSubtleStyle,
+    reacted: reacted
+  }, emojiAndCount)));
+};

package/dist/cjs/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}
+._4t3i3698{height:var(--_1ed2mu0)}
+._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/cjs/components/compiled/ReactionButton.js

@@ -0,0 +1,70 @@
+/* ReactionButton.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.ReactionButton = void 0;
+require("./ReactionButton.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react2 = require("@compiled/react");
+var _FlashAnimation = require("./FlashAnimation");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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 = {
+  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
+ */
+var akHeight = 24;
+var flashHeight = akHeight - 2; // height without the 1px border
+
+var flashStyle = null;
+var flashStyleOld = null;
+var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
+  var onClick = _ref.onClick,
+    _ref$flash = _ref.flash,
+    flash = _ref$flash === void 0 ? false : _ref$flash,
+    showSubtleStyle = _ref.showSubtleStyle,
+    showOpaqueBackground = _ref.showOpaqueBackground,
+    reacted = _ref.reacted,
+    ariaLabel = _ref.ariaLabel,
+    ariaPressed = _ref.ariaPressed,
+    onMouseEnter = _ref.onMouseEnter,
+    onFocus = _ref.onFocus,
+    children = _ref.children,
+    _ref$dataAttributes = _ref.dataAttributes,
+    dataAttributes = _ref$dataAttributes === void 0 ? {} : _ref$dataAttributes,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(_compiled.Pressable, (0, _extends2.default)({
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onFocus: onFocus,
+    "aria-label": ariaLabel,
+    "aria-pressed": ariaPressed,
+    testId: testId,
+    xcss: (0, _react2.cx)(styles.reactionButton, reacted && styles.reacted, !reacted && showSubtleStyle && styles.borderless, !reacted && showOpaqueBackground && styles.opaqueBackground,
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && styles.reactionStylesRefresh)
+  }, dataAttributes), /*#__PURE__*/React.createElement(_FlashAnimation.FlashAnimation, {
+    flash: flash
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    ,
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "_2rkogqwt _1e0c1txw _2lx2vrvc _4cvr1h6o _4t3i3698" : "_2rko19bv _1e0c1txw _2lx2vrvc _4cvr1h6o _4t3i3698"]),
+    style: {
+      "--_1ed2mu0": (0, _runtime.ix)("".concat(flashHeight, "px"))
+    }
+  }, children));
+};

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

@@ -0,0 +1,17 @@
+
+._y44v1gev{animation:var(--_wb63cw)}._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}
+@media (prefers-reduced-motion:reduce){._m602idpf{opacity:0}}

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

@@ -0,0 +1,41 @@
+/* ReactionParticleEffect.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.ReactionParticleEffect = exports.PARTICLE_COUNT = void 0;
+require("./ReactionParticleEffect.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _emoji = require("@atlaskit/emoji");
+var _constants = require("@atlaskit/theme/constants");
+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 fade = null;
+var float = null;
+var containerStyle = null;
+var reactionParticleStyle = null;
+var PARTICLE_COUNT = exports.PARTICLE_COUNT = 4;
+var ReactionParticleEffect = exports.ReactionParticleEffect = function ReactionParticleEffect(_ref) {
+  var emojiProvider = _ref.emojiProvider,
+    emojiId = _ref.emojiId;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswh2mm _1ltvftgi _1pbyifev _m602idpf"])
+  }, (0, _toConsumableArray2.default)(Array(PARTICLE_COUNT)).map(function (_, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: (0, _runtime.ax)(["_y44v1gev _kqswstnw _154iidpf _1ltvidpf _lcxvglyw _tzy4idpf _5sagpwmj _1qen1lpd _xg4k6ebc _91vyftgi _1lac188d _jsy51n1a _7vm81dfm"]),
+      style: {
+        "--_wb63cw": (0, _runtime.ix)("".concat(fade, " ease-in-out, ").concat(float, " ease"))
+      }
+    }, /*#__PURE__*/React.createElement(_emoji.ResourcedEmoji, {
+      emojiProvider: emojiProvider,
+      emojiId: emojiId,
+      fitToHeight: 16
+    }));
+  }));
+};