@atlaskit/reactions 33.2.23 → 33.2.24

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/reactions
 
+## 33.2.24
+
+### Patch Changes
+
+- [`a4f8c466df2bd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a4f8c466df2bd) -
+  Use sync store if it is available.
+- Updated dependencies
+
 ## 33.2.23
 
 ### Patch Changes

package/dist/cjs/components/Counter.js

@@ -1,4 +1,4 @@
-/* Counter.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Counter.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/EmojiButton.js

@@ -1,4 +1,4 @@
-/* EmojiButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* EmojiButton.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/FlashAnimation.js

@@ -1,4 +1,4 @@
-/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/components/Reaction.js

@@ -1,4 +1,4 @@
-/* Reaction.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Reaction.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/ReactionButton.js

@@ -1,4 +1,4 @@
-/* ReactionButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionButton.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/ReactionParticleEffect.js

@@ -1,4 +1,4 @@
-/* ReactionParticleEffect.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionParticleEffect.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/ReactionPicker.js

@@ -1,4 +1,4 @@
-/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/ReactionSummaryButton.js

@@ -1,4 +1,4 @@
-/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/ReactionSummaryView.js

@@ -1,4 +1,4 @@
-/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/ReactionTooltip.js

@@ -1,4 +1,4 @@
-/* ReactionTooltip.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionTooltip.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/ReactionView.js

@@ -1,4 +1,4 @@
-/* ReactionView.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionView.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/Reactions.js

@@ -1,4 +1,4 @@
-/* Reactions.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Reactions.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/ReactionsDialog.js

@@ -1,4 +1,4 @@
-/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -5,7 +5,7 @@
 ._nhktlyvf.disabled:after{background:linear-gradient(270deg,hsla(0,0%,100%,.95) 40.23%,hsla(0,0%,100%,.55) 58.33%,hsla(0,0%,100%,0) 77.49%)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._80wau2gc div[role=tablist]{padding-inline:var(--ds-space-100,8px)}
-._n7zl4gxu{border-bottom:var(--_1i0gnx0)}._10d67vkz>span{min-height:1pc}
+._n7zl17ba{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#ebecf0)}._10d67vkz>span{min-height:1pc}
 ._141m1j28 div[role=tablist]:before{background-color:transparent}
 ._18m91wug{overflow-y:auto}
 ._18u01wug{margin-left:auto}

package/dist/cjs/components/ReactionsDialogHeader.js

@@ -1,4 +1,4 @@
-/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -154,10 +154,7 @@ var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDi
     onClick: handleCloseReactionsDialog
   })), /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement("div", {
     id: "reactions-dialog-tabs-list",
-    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _n7zl4gxu _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"]),
-    style: {
-      "--_1i0gnx0": (0, _runtime.ix)("var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #EBECF0)"))
-    }
+    className: (0, _runtime.ax)(["_1reo1wug _18m91wug _n7zl17ba _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"])
   }, !isSinglePage && !isOnFirstPage && /*#__PURE__*/React.createElement(LeftNavigationButton, {
     handlePreviousPage: handlePreviousPage
   }), /*#__PURE__*/React.createElement(_tabs.TabList, null, currentReactions.map(function (reaction, index) {

package/dist/cjs/components/ReactionsDialogTrigger.js

@@ -1,4 +1,4 @@
-/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/Selector.js

@@ -1,4 +1,4 @@
-/* Selector.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Selector.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/StaticReaction.js

@@ -1,4 +1,4 @@
-/* StaticReaction.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* StaticReaction.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/components/Trigger.js

@@ -1,4 +1,4 @@
-/* Trigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -18,6 +18,7 @@ var _components = require("../../components");
 var _Reactions = require("../../components/Reactions");
 var _store2 = require("../../store");
 var _types = require("../../types");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled", "onReactionSuccess"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
@@ -143,16 +144,65 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
   var mapDispatchToProps = (0, _react.useCallback)(function (actions) {
     return mapDispatchToPropsHelper(actions, containerAri, ari, onReactionSuccess);
   }, [ari, containerAri, onReactionSuccess]);
+  var resolveStore = (0, _react.useCallback)(function (store) {
+    if (!(0, _platformFeatureFlags.fg)('jfp-magma-ssr-issue-view-comment-reactions')) {
+      return;
+    }
+    if (store.setCreateAnalyticsEvent && createAnalyticsEvent) {
+      store.setCreateAnalyticsEvent(createAnalyticsEvent);
+    }
+    var state = mapStateToProps(store.getState());
+    var dispatch = mapDispatchToProps(store);
+    setStateData(state);
+    setDispatchData(dispatch);
+  }, [createAnalyticsEvent, mapDispatchToProps, mapStateToProps]);
+  (0, _react.useMemo)(function () {
+    if (!(0, _platformFeatureFlags.fg)('jfp-magma-ssr-issue-view-comment-reactions')) {
+      return;
+    }
+    if (!('then' in store)) {
+      // Store is not a Promise
+      resolveStore(store);
+    }
+  }, [, store, resolveStore]);
   (0, _react.useEffect)(function () {
+    if (!(0, _platformFeatureFlags.fg)('jfp-magma-ssr-issue-view-comment-reactions')) {
+      return;
+    }
     (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-      var _store, state, dispatch;
+      var _store;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _context.next = 2;
+            if (!('then' in store)) {
+              _context.next = 5;
+              break;
+            }
+            _context.next = 3;
             return Promise.resolve(store);
-          case 2:
+          case 3:
             _store = _context.sent;
+            resolveStore(_store);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))();
+  }, [store, resolveStore]);
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('jfp-magma-ssr-issue-view-comment-reactions')) {
+      return;
+    }
+    (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+      var _store, state, dispatch;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return Promise.resolve(store);
+          case 2:
+            _store = _context2.sent;
             if (_store.setCreateAnalyticsEvent && createAnalyticsEvent) {
               _store.setCreateAnalyticsEvent(createAnalyticsEvent);
             }
@@ -162,9 +212,9 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
             setDispatchData(dispatch);
           case 8:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee);
+      }, _callee2);
     }))();
   }, [createAnalyticsEvent, store, ari, containerAri, mapStateToProps, mapDispatchToProps]);
 
@@ -178,38 +228,38 @@ var ConnectedReactionsView = exports.ConnectedReactionsView = function Connected
       var stateProps = mapStateToProps(state);
       setStateData(stateProps);
     };
-    (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+    (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
       var _store;
-      return _regenerator.default.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
-            _context2.next = 2;
+            _context3.next = 2;
             return Promise.resolve(store);
           case 2:
-            _store = _context2.sent;
+            _store = _context3.sent;
             _store.onChange(onChangeCallback);
           case 4:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
-      }, _callee2);
+      }, _callee3);
     }))();
     return function cleanup() {
-      (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+      (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
         var _store;
-        return _regenerator.default.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+        return _regenerator.default.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
             case 0:
-              _context3.next = 2;
+              _context4.next = 2;
               return Promise.resolve(store);
             case 2:
-              _store = _context3.sent;
+              _store = _context4.sent;
               _store.removeOnChangeListener(onChangeCallback);
             case 4:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
-        }, _callee3);
+        }, _callee4);
       }))();
     };
   }, [mapStateToProps, store]);

package/dist/es2019/components/Counter.js

@@ -1,4 +1,4 @@
-/* Counter.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Counter.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./Counter.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/EmojiButton.js

@@ -1,4 +1,4 @@
-/* EmojiButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* EmojiButton.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./EmojiButton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/FlashAnimation.js

@@ -1,4 +1,4 @@
-/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./FlashAnimation.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/Reaction.js

@@ -1,4 +1,4 @@
-/* Reaction.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Reaction.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./Reaction.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/ReactionButton.js

@@ -1,4 +1,4 @@
-/* ReactionButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionButton.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionButton.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/ReactionParticleEffect.js

@@ -1,4 +1,4 @@
-/* ReactionParticleEffect.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionParticleEffect.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./ReactionParticleEffect.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/ReactionPicker.js

@@ -1,4 +1,4 @@
-/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./ReactionPicker.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';

package/dist/es2019/components/ReactionSummaryButton.js

@@ -1,4 +1,4 @@
-/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./ReactionSummaryButton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/ReactionSummaryView.js

@@ -1,4 +1,4 @@
-/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionSummaryView.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/ReactionTooltip.js

@@ -1,4 +1,4 @@
-/* ReactionTooltip.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionTooltip.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionTooltip.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/ReactionView.js

@@ -1,4 +1,4 @@
-/* ReactionView.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionView.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./ReactionView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/Reactions.js

@@ -1,4 +1,4 @@
-/* Reactions.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Reactions.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./Reactions.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

package/dist/es2019/components/ReactionsDialog.js

@@ -1,4 +1,4 @@
-/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./ReactionsDialog.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/ReactionsDialogHeader.js

@@ -1,4 +1,4 @@
-/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionsDialogHeader.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/ReactionsDialogTrigger.js

@@ -1,4 +1,4 @@
-/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./ReactionsDialogTrigger.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/Selector.js

@@ -1,4 +1,4 @@
-/* Selector.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Selector.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./Selector.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/components/StaticReaction.js

@@ -1,4 +1,4 @@
-/* StaticReaction.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* StaticReaction.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./StaticReaction.compiled.css";
 import * as React from 'react';

package/dist/es2019/components/Trigger.js

@@ -1,4 +1,4 @@
-/* Trigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./Trigger.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { UfoErrorBoundary } from '../../components';
 import { Reactions } from '../../components/Reactions';
 import { ufoExperiences } from '../../store';
 import { ReactionStatus } from '../../types';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
  * State Props required for <Reactions />
@@ -127,7 +128,43 @@ export const ConnectedReactionsView = props => {
   const mapDispatchToProps = useCallback(actions => {
     return mapDispatchToPropsHelper(actions, containerAri, ari, onReactionSuccess);
   }, [ari, containerAri, onReactionSuccess]);
+  const resolveStore = useCallback(store => {
+    if (!fg('jfp-magma-ssr-issue-view-comment-reactions')) {
+      return;
+    }
+    if (store.setCreateAnalyticsEvent && createAnalyticsEvent) {
+      store.setCreateAnalyticsEvent(createAnalyticsEvent);
+    }
+    const state = mapStateToProps(store.getState());
+    const dispatch = mapDispatchToProps(store);
+    setStateData(state);
+    setDispatchData(dispatch);
+  }, [createAnalyticsEvent, mapDispatchToProps, mapStateToProps]);
+  useMemo(() => {
+    if (!fg('jfp-magma-ssr-issue-view-comment-reactions')) {
+      return;
+    }
+    if (!('then' in store)) {
+      // Store is not a Promise
+      resolveStore(store);
+    }
+  }, [, store, resolveStore]);
   useEffect(() => {
+    if (!fg('jfp-magma-ssr-issue-view-comment-reactions')) {
+      return;
+    }
+    (async () => {
+      if ('then' in store) {
+        // Store is a Promise
+        const _store = await Promise.resolve(store);
+        resolveStore(_store);
+      }
+    })();
+  }, [store, resolveStore]);
+  useEffect(() => {
+    if (fg('jfp-magma-ssr-issue-view-comment-reactions')) {
+      return;
+    }
     (async () => {
       const _store = await Promise.resolve(store);
       if (_store.setCreateAnalyticsEvent && createAnalyticsEvent) {

package/dist/esm/components/Counter.js

@@ -1,4 +1,4 @@
-/* Counter.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Counter.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./Counter.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/EmojiButton.js

@@ -1,4 +1,4 @@
-/* EmojiButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* EmojiButton.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./EmojiButton.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/FlashAnimation.js

@@ -1,4 +1,4 @@
-/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* FlashAnimation.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./FlashAnimation.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/Reaction.js

@@ -1,4 +1,4 @@
-/* Reaction.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Reaction.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";

package/dist/esm/components/ReactionButton.js

@@ -1,4 +1,4 @@
-/* ReactionButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionButton.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionButton.compiled.css";
 import * as React from 'react';

package/dist/esm/components/ReactionParticleEffect.js

@@ -1,4 +1,4 @@
-/* ReactionParticleEffect.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionParticleEffect.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import "./ReactionParticleEffect.compiled.css";
 import * as React from 'react';

package/dist/esm/components/ReactionPicker.js

@@ -1,4 +1,4 @@
-/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionPicker.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./ReactionPicker.compiled.css";

package/dist/esm/components/ReactionSummaryButton.js

@@ -1,4 +1,4 @@
-/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionSummaryButton.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import "./ReactionSummaryButton.compiled.css";
 import * as React from 'react';

package/dist/esm/components/ReactionSummaryView.js

@@ -1,4 +1,4 @@
-/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionSummaryView.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./ReactionSummaryView.compiled.css";

package/dist/esm/components/ReactionTooltip.js

@@ -1,4 +1,4 @@
-/* ReactionTooltip.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionTooltip.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./ReactionTooltip.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/ReactionView.js

@@ -1,4 +1,4 @@
-/* ReactionView.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionView.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./ReactionView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/Reactions.js

@@ -1,4 +1,4 @@
-/* Reactions.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Reactions.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./Reactions.compiled.css";

package/dist/esm/components/ReactionsDialog.js

@@ -1,4 +1,4 @@
-/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionsDialog.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./ReactionsDialog.compiled.css";
 import * as React from 'react';

package/dist/esm/components/ReactionsDialogHeader.compiled.css

@@ -5,7 +5,7 @@
 ._nhktlyvf.disabled:after{background:linear-gradient(270deg,hsla(0,0%,100%,.95) 40.23%,hsla(0,0%,100%,.55) 58.33%,hsla(0,0%,100%,0) 77.49%)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
 ._80wau2gc div[role=tablist]{padding-inline:var(--ds-space-100,8px)}
-._n7zl4gxu{border-bottom:var(--_1i0gnx0)}._10d67vkz>span{min-height:1pc}
+._n7zl17ba{border-bottom:var(--ds-border-width,1px) solid var(--ds-border,#ebecf0)}._10d67vkz>span{min-height:1pc}
 ._141m1j28 div[role=tablist]:before{background-color:transparent}
 ._18m91wug{overflow-y:auto}
 ._18u01wug{margin-left:auto}

package/dist/esm/components/ReactionsDialogHeader.js

@@ -1,4 +1,4 @@
-/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionsDialogHeader.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
@@ -146,10 +146,7 @@ export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref3) {
     onClick: handleCloseReactionsDialog
   })), /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement("div", {
     id: "reactions-dialog-tabs-list",
-    className: ax(["_1reo1wug _18m91wug _n7zl4gxu _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"]),
-    style: {
-      "--_1i0gnx0": ix("var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #EBECF0)"))
-    }
+    className: ax(["_1reo1wug _18m91wug _n7zl17ba _1e0c1txw _1bsb1osq _4cvr1y6m _80wau2gc _s2c4kb7n _141m1j28"])
   }, !isSinglePage && !isOnFirstPage && /*#__PURE__*/React.createElement(LeftNavigationButton, {
     handlePreviousPage: handlePreviousPage
   }), /*#__PURE__*/React.createElement(TabList, null, currentReactions.map(function (reaction, index) {

package/dist/esm/components/ReactionsDialogTrigger.js

@@ -1,4 +1,4 @@
-/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* ReactionsDialogTrigger.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./ReactionsDialogTrigger.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/Selector.js

@@ -1,4 +1,4 @@
-/* Selector.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Selector.tsx generated by @compiled/babel-plugin v0.38.1 */
 import "./Selector.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/components/StaticReaction.js

@@ -1,4 +1,4 @@
-/* StaticReaction.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* StaticReaction.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./StaticReaction.compiled.css";
 import * as React from 'react';

package/dist/esm/components/Trigger.js

@@ -1,4 +1,4 @@
-/* Trigger.tsx generated by @compiled/babel-plugin v0.36.1 */
+/* Trigger.tsx generated by @compiled/babel-plugin v0.38.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./Trigger.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -4,13 +4,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["ari", "containerAri", "store", "particleEffectByEmojiEnabled", "onReactionSuccess"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { UfoErrorBoundary } from '../../components';
 import { Reactions } from '../../components/Reactions';
 import { ufoExperiences } from '../../store';
 import { ReactionStatus } from '../../types';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
  * State Props required for <Reactions />
@@ -135,16 +136,65 @@ export var ConnectedReactionsView = function ConnectedReactionsView(props) {
   var mapDispatchToProps = useCallback(function (actions) {
     return mapDispatchToPropsHelper(actions, containerAri, ari, onReactionSuccess);
   }, [ari, containerAri, onReactionSuccess]);
+  var resolveStore = useCallback(function (store) {
+    if (!fg('jfp-magma-ssr-issue-view-comment-reactions')) {
+      return;
+    }
+    if (store.setCreateAnalyticsEvent && createAnalyticsEvent) {
+      store.setCreateAnalyticsEvent(createAnalyticsEvent);
+    }
+    var state = mapStateToProps(store.getState());
+    var dispatch = mapDispatchToProps(store);
+    setStateData(state);
+    setDispatchData(dispatch);
+  }, [createAnalyticsEvent, mapDispatchToProps, mapStateToProps]);
+  useMemo(function () {
+    if (!fg('jfp-magma-ssr-issue-view-comment-reactions')) {
+      return;
+    }
+    if (!('then' in store)) {
+      // Store is not a Promise
+      resolveStore(store);
+    }
+  }, [, store, resolveStore]);
   useEffect(function () {
+    if (!fg('jfp-magma-ssr-issue-view-comment-reactions')) {
+      return;
+    }
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var _store, state, dispatch;
+      var _store;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            _context.next = 2;
+            if (!('then' in store)) {
+              _context.next = 5;
+              break;
+            }
+            _context.next = 3;
             return Promise.resolve(store);
-          case 2:
+          case 3:
             _store = _context.sent;
+            resolveStore(_store);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))();
+  }, [store, resolveStore]);
+  useEffect(function () {
+    if (fg('jfp-magma-ssr-issue-view-comment-reactions')) {
+      return;
+    }
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var _store, state, dispatch;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return Promise.resolve(store);
+          case 2:
+            _store = _context2.sent;
             if (_store.setCreateAnalyticsEvent && createAnalyticsEvent) {
               _store.setCreateAnalyticsEvent(createAnalyticsEvent);
             }
@@ -154,9 +204,9 @@ export var ConnectedReactionsView = function ConnectedReactionsView(props) {
             setDispatchData(dispatch);
           case 8:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee);
+      }, _callee2);
     }))();
   }, [createAnalyticsEvent, store, ari, containerAri, mapStateToProps, mapDispatchToProps]);
 
@@ -170,38 +220,38 @@ export var ConnectedReactionsView = function ConnectedReactionsView(props) {
       var stateProps = mapStateToProps(state);
       setStateData(stateProps);
     };
-    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
       var _store;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
-            _context2.next = 2;
+            _context3.next = 2;
             return Promise.resolve(store);
           case 2:
-            _store = _context2.sent;
+            _store = _context3.sent;
             _store.onChange(onChangeCallback);
           case 4:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
-      }, _callee2);
+      }, _callee3);
     }))();
     return function cleanup() {
-      _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
         var _store;
-        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
             case 0:
-              _context3.next = 2;
+              _context4.next = 2;
               return Promise.resolve(store);
             case 2:
-              _store = _context3.sent;
+              _store = _context4.sent;
               _store.removeOnChangeListener(onChangeCallback);
             case 4:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
-        }, _callee3);
+        }, _callee4);
       }))();
     };
   }, [mapStateToProps, store]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "33.2.23",
+	"version": "33.2.24",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,9 +40,9 @@
 		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/emoji": "^69.5.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^28.2.0",
+		"@atlaskit/icon": "^28.3.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/modal-dialog": "^14.3.0",
+		"@atlaskit/modal-dialog": "^14.4.0",
 		"@atlaskit/motion": "^5.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",
@@ -50,7 +50,7 @@
 		"@atlaskit/popup": "^4.4.0",
 		"@atlaskit/portal": "^5.1.0",
 		"@atlaskit/primitives": "^14.15.0",
-		"@atlaskit/react-ufo": "^4.7.0",
+		"@atlaskit/react-ufo": "^4.10.0",
 		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tabs": "^18.1.0",
 		"@atlaskit/theme": "^21.0.0",
@@ -71,7 +71,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/editor-test-helpers": "workspace:^",
 		"@atlaskit/elements-test-helpers": "workspace:^",
-		"@atlaskit/util-data-test": "^18.2.0",
+		"@atlaskit/util-data-test": "^18.3.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
@@ -129,6 +129,9 @@
 		},
 		"platform_optimistic_reaction_emoji": {
 			"type": "boolean"
+		},
+		"jfp-magma-ssr-issue-view-comment-reactions": {
+			"type": "boolean"
 		}
 	},
 	"sideEffects": [