@atlaskit/reactions 25.5.0 → 25.6.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/reactions
 
+## 25.6.0
+
+### Minor Changes
+
+- [#115993](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/115993)
+  [`b41f57ae81daf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b41f57ae81daf) -
+  [ux] Makes reactions behind the isViewOnly prop view-only in the tray, not allowing further
+  reactions and applies view only styles
+- [#116057](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116057)
+  [`4eaacc70b49dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4eaacc70b49dd) -
+  [ux] Close tooltip after Reaction Dialog is opened and fix outdated tests
+
+## 25.5.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 25.5.0
 
 ### Minor Changes

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 = "25.5.0";
+var packageVersion = "25.6.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -23,6 +23,7 @@ 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; }
 /**
@@ -77,7 +78,9 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
     showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
     allowUserDialog = _ref.allowUserDialog,
-    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog;
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
+    _ref$isViewOnly = _ref.isViewOnly,
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly;
   var intl = (0, _reactIntlNext.useIntl)();
   var hoverStart = (0, _react.useRef)();
   var focusStart = (0, _react.useRef)();
@@ -150,7 +153,20 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionFocusedEvent, hoverStart.current);
     onFocused(reaction.emojiId, event);
   }, [createAnalyticsEvent, reaction, onFocused]);
+  var dismissTooltip = function dismissTooltip() {
+    setIsTooltipEnabled(false);
+  };
   var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
+  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, {
@@ -161,8 +177,16 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
     reaction: reaction,
     isEnabled: isTooltipEnabled,
     allowUserDialog: allowUserDialog,
-    handleOpenReactionsDialog: handleOpenReactionsDialog
-  }, (0, _react2.jsx)(_ReactionButton.ReactionButton, {
+    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,
@@ -177,14 +201,5 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
       'data-emoji-id': reaction.emojiId,
       'data-emoji-button-id': reaction.emojiId
     }
-  }, (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: reaction.reacted
-  }))));
+  }, emojiAndCount)));
 };

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

@@ -22,7 +22,8 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 
-var reactionStyles = (0, _primitives.xcss)({
+// please sync reaction styles that are not button-specific with StaticReaction.tsx
+var reactionButtonStyles = (0, _primitives.xcss)({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'flex-start',
@@ -69,7 +70,7 @@ var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
     testId: testId,
-    xcss: [reactionStyles].concat((0, _toConsumableArray2.default)(additionalStyles), [
+    xcss: [reactionButtonStyles].concat((0, _toConsumableArray2.default)(additionalStyles), [
     // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
     (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && reactionStylesRefresh])
   }, dataAttributes), (0, _react2.jsx)(_FlashAnimation.FlashAnimation, {

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

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StaticReaction = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var _react2 = require("@emotion/react");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// please sync reaction styles that are not button-specific with ReactionButton.tsx
+var staticReactionStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  minWidth: '36px',
+  height: '24px',
+  backgroundColor: 'color.background.neutral.subtle',
+  color: 'color.text.subtle',
+  marginBlockStart: 'space.050',
+  marginInlineEnd: 'space.050',
+  padding: 'space.0',
+  overflow: 'hidden',
+  border: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered',
+    cursor: 'default'
+  }
+});
+var StaticReaction = exports.StaticReaction = function StaticReaction(_ref) {
+  var onMouseEnter = _ref.onMouseEnter,
+    onFocus = _ref.onFocus,
+    children = _ref.children,
+    testId = _ref.testId,
+    _ref$dataAttributes = _ref.dataAttributes,
+    dataAttributes = _ref$dataAttributes === void 0 ? {} : _ref$dataAttributes;
+  return (0, _react2.jsx)(_primitives.Box, (0, _extends2.default)({
+    onMouseEnter: onMouseEnter,
+    onFocus: onFocus,
+    testId: testId,
+    xcss: staticReactionStyles
+  }, dataAttributes), children);
+};

package/dist/cjs/components/ReactionDialog/ReactionsDialogHeader.js

@@ -185,7 +185,7 @@ var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDi
   var isSinglePage = maxPages === 1;
   var isOnFirstPage = currentPage === 1;
   var isOnLastPage = currentPage === maxPages;
-  var handleMouseEnterTab = function handleMouseEnterTab(reaction) {
+  var handleMouseEnter = function handleMouseEnter(reaction) {
     var emojiId = reaction.emojiId;
     if (!emojiId || cache[emojiId]) {
       return;
@@ -255,7 +255,7 @@ var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDi
         key: reaction.emojiId,
         "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
         onMouseEnter: function onMouseEnter() {
-          handleMouseEnterTab(reaction);
+          handleMouseEnter(reaction);
         }
       }, (0, _react2.jsx)(_tabs.Tab, null, (0, _react2.jsx)(_tooltip.default, {
         content: cache[reaction.emojiId],

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

@@ -43,7 +43,9 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
     allowUserDialog = _ref.allowUserDialog,
-    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog;
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
+    _ref$isViewOnly = _ref.isViewOnly,
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -74,7 +76,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
           flash: flash[reaction.emojiId],
           showParticleEffect: particleEffectByEmoji[reaction.emojiId],
           allowUserDialog: allowUserDialog,
-          handleOpenReactionsDialog: handleOpenReactionsDialog
+          handleOpenReactionsDialog: handleOpenReactionsDialog,
+          isViewOnly: isViewOnly
         });
       }));
     },

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

@@ -34,7 +34,8 @@ var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
     _ref$isEnabled = _ref.isEnabled,
     isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
     allowUserDialog = _ref.allowUserDialog,
-    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog;
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
+    dismissTooltip = _ref.dismissTooltip;
   var content = !users || users.length === 0 || !isEnabled ? null :
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, jsx-a11y/no-noninteractive-tabindex -- Ignored via go/DSP-18766
   (0, _react2.jsx)("div", {
@@ -51,6 +52,7 @@ var ReactionTooltip = exports.ReactionTooltip = function ReactionTooltip(_ref) {
     css: allowUserDialog ? [_styles.footerStyle, _styles.underlineStyle] : _styles.footerStyle,
     onClick: function onClick() {
       if (allowUserDialog && handleOpenReactionsDialog) {
+        dismissTooltip();
         handleOpenReactionsDialog();
       }
     }

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

@@ -322,7 +322,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       showOpaqueBackground: showOpaqueBackground,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
       handleOpenReactionsDialog: handleOpenReactionsDialog,
-      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions
+      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+      isViewOnly: isViewOnly
     })) : memorizedReactions.map(function (reaction) {
       return (0, _react2.jsx)(_Reaction.Reaction, {
         key: reaction.emojiId,
@@ -335,7 +336,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
         showParticleEffect: particleEffectByEmoji[reaction.emojiId],
         showOpaqueBackground: showOpaqueBackground,
         allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
-        handleOpenReactionsDialog: handleOpenReactionsDialog
+        handleOpenReactionsDialog: handleOpenReactionsDialog,
+        isViewOnly: isViewOnly
       });
     })), !isViewOnly && (0, _react2.jsx)(_ReactionPicker.ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

package/dist/es2019/analytics/index.js

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

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

@@ -8,7 +8,7 @@ import { useIntl } from 'react-intl-next';
 import { jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEvent, createReactionHoveredEvent } from '../../analytics';
 import { Counter } from '../Counter';
 import { ReactionParticleEffect } from '../ReactionParticleEffect';
@@ -17,6 +17,7 @@ import { messages } from '../../shared/i18n';
 import { isLeftClick } from '../../shared/utils';
 import { emojiStyle, emojiNoReactionStyle } from './styles';
 import { ReactionButton } from './ReactionButton';
+import { StaticReaction } from './StaticReaction';
 
 /**
  * Test id for Reaction item wrapper div
@@ -58,7 +59,8 @@ export const Reaction = ({
   showParticleEffect = false,
   showOpaqueBackground = false,
   allowUserDialog,
-  handleOpenReactionsDialog
+  handleOpenReactionsDialog,
+  isViewOnly = false
 }) => {
   const intl = useIntl();
   const hoverStart = useRef();
@@ -116,7 +118,20 @@ export const Reaction = ({
     createAndFireSafe(createAnalyticsEvent, createReactionFocusedEvent, hoverStart.current);
     onFocused(reaction.emojiId, event);
   }, [createAnalyticsEvent, reaction, onFocused]);
+  const dismissTooltip = () => {
+    setIsTooltipEnabled(false);
+  };
   const buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
+  const emojiAndCount = jsx(Inline, null, jsx("div", {
+    css: [emojiStyle, reaction.count === 0 && emojiNoReactionStyle]
+  }, jsx(ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: emojiId,
+    fitToHeight: 16
+  })), jsx(Counter, {
+    value: reaction.count,
+    highlight: !isViewOnly && reaction.reacted
+  }));
   return jsx(Box, {
     xcss: containerStyles
   }, showParticleEffect && jsx(ReactionParticleEffect, {
@@ -127,8 +142,16 @@ export const Reaction = ({
     reaction: reaction,
     isEnabled: isTooltipEnabled,
     allowUserDialog: allowUserDialog,
-    handleOpenReactionsDialog: handleOpenReactionsDialog
-  }, jsx(ReactionButton, {
+    handleOpenReactionsDialog: handleOpenReactionsDialog,
+    dismissTooltip: dismissTooltip
+  }, isViewOnly ? jsx(StaticReaction, {
+    onMouseEnter: handleMouseEnter,
+    onFocus: handleFocused,
+    testId: RENDER_REACTION_TESTID,
+    dataAttributes: {
+      'data-emoji-id': reaction.emojiId
+    }
+  }, emojiAndCount) : jsx(ReactionButton, {
     onClick: handleClick,
     flash: flash,
     additionalStyles: reaction.reacted ? [reactedStyles] : buttonStyles,
@@ -143,14 +166,5 @@ export const Reaction = ({
       'data-emoji-id': reaction.emojiId,
       'data-emoji-button-id': reaction.emojiId
     }
-  }, jsx("div", {
-    css: [emojiStyle, reaction.count === 0 && emojiNoReactionStyle]
-  }, jsx(ResourcedEmoji, {
-    emojiProvider: emojiProvider,
-    emojiId: emojiId,
-    fitToHeight: 16
-  })), jsx(Counter, {
-    value: reaction.count,
-    highlight: reaction.reacted
-  }))));
+  }, emojiAndCount)));
 };

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

@@ -11,7 +11,9 @@ import { FlashAnimation } from '../FlashAnimation';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 import { flashStyle, flashStyleOld } from './styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-const reactionStyles = xcss({
+
+// please sync reaction styles that are not button-specific with StaticReaction.tsx
+const reactionButtonStyles = xcss({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'flex-start',
@@ -56,7 +58,7 @@ export const ReactionButton = ({
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
     testId: testId,
-    xcss: [reactionStyles, ...additionalStyles,
+    xcss: [reactionButtonStyles, ...additionalStyles,
     // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
     fg('platform-component-visual-refresh') && reactionStylesRefresh]
   }, dataAttributes), jsx(FlashAnimation, {

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

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+
+// please sync reaction styles that are not button-specific with ReactionButton.tsx
+const staticReactionStyles = xcss({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  minWidth: '36px',
+  height: '24px',
+  backgroundColor: 'color.background.neutral.subtle',
+  color: 'color.text.subtle',
+  marginBlockStart: 'space.050',
+  marginInlineEnd: 'space.050',
+  padding: 'space.0',
+  overflow: 'hidden',
+  border: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered',
+    cursor: 'default'
+  }
+});
+export const StaticReaction = ({
+  onMouseEnter,
+  onFocus,
+  children,
+  testId,
+  dataAttributes = {}
+}) => {
+  return jsx(Box, _extends({
+    onMouseEnter: onMouseEnter,
+    onFocus: onFocus,
+    testId: testId,
+    xcss: staticReactionStyles
+  }, dataAttributes), children);
+};

package/dist/es2019/components/ReactionDialog/ReactionsDialogHeader.js

@@ -173,7 +173,7 @@ export const ReactionsDialogHeader = ({
   const isSinglePage = maxPages === 1;
   const isOnFirstPage = currentPage === 1;
   const isOnLastPage = currentPage === maxPages;
-  const handleMouseEnterTab = reaction => {
+  const handleMouseEnter = reaction => {
     const {
       emojiId
     } = reaction;
@@ -230,7 +230,7 @@ export const ReactionsDialogHeader = ({
         key: reaction.emojiId,
         "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
         onMouseEnter: () => {
-          handleMouseEnterTab(reaction);
+          handleMouseEnter(reaction);
         }
       }, jsx(Tab, null, jsx(Tooltip, {
         content: cache[reaction.emojiId],

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

@@ -26,7 +26,8 @@ export const ReactionSummaryView = ({
   showOpaqueBackground = false,
   subtleReactionsSummaryAndPicker = false,
   allowUserDialog,
-  handleOpenReactionsDialog
+  handleOpenReactionsDialog,
+  isViewOnly = false
 }) => {
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
   const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
@@ -49,7 +50,8 @@ export const ReactionSummaryView = ({
       flash: flash[reaction.emojiId],
       showParticleEffect: particleEffectByEmoji[reaction.emojiId],
       allowUserDialog: allowUserDialog,
-      handleOpenReactionsDialog: handleOpenReactionsDialog
+      handleOpenReactionsDialog: handleOpenReactionsDialog,
+      isViewOnly: isViewOnly
     }))),
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,

package/dist/es2019/components/ReactionTooltip/ReactionTooltip.js

@@ -25,7 +25,8 @@ export const ReactionTooltip = ({
   maxReactions = TOOLTIP_USERS_LIMIT,
   isEnabled = true,
   allowUserDialog,
-  handleOpenReactionsDialog
+  handleOpenReactionsDialog,
+  dismissTooltip
 }) => {
   const content = !users || users.length === 0 || !isEnabled ? null :
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, jsx-a11y/no-noninteractive-tabindex -- Ignored via go/DSP-18766
@@ -43,6 +44,7 @@ export const ReactionTooltip = ({
     css: allowUserDialog ? [footerStyle, underlineStyle] : footerStyle,
     onClick: () => {
       if (allowUserDialog && handleOpenReactionsDialog) {
+        dismissTooltip();
         handleOpenReactionsDialog();
       }
     }

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

@@ -277,7 +277,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
       showOpaqueBackground: showOpaqueBackground,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
       handleOpenReactionsDialog: handleOpenReactionsDialog,
-      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions
+      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+      isViewOnly: isViewOnly
     })) : memorizedReactions.map(reaction => jsx(Reaction, {
       key: reaction.emojiId,
       reaction: reaction,
@@ -289,7 +290,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
       showParticleEffect: particleEffectByEmoji[reaction.emojiId],
       showOpaqueBackground: showOpaqueBackground,
       allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
-      handleOpenReactionsDialog: handleOpenReactionsDialog
+      handleOpenReactionsDialog: handleOpenReactionsDialog,
+      isViewOnly: isViewOnly
     }))), !isViewOnly && jsx(ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     , {

package/dist/esm/analytics/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "25.5.0";
+var packageVersion = "25.6.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/Reaction/Reaction.js

@@ -11,7 +11,7 @@ import { useIntl } from 'react-intl-next';
 import { jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEvent, createReactionHoveredEvent } from '../../analytics';
 import { Counter } from '../Counter';
 import { ReactionParticleEffect } from '../ReactionParticleEffect';
@@ -20,6 +20,7 @@ import { messages } from '../../shared/i18n';
 import { isLeftClick } from '../../shared/utils';
 import { emojiStyle, emojiNoReactionStyle } from './styles';
 import { ReactionButton } from './ReactionButton';
+import { StaticReaction } from './StaticReaction';
 
 /**
  * Test id for Reaction item wrapper div
@@ -66,7 +67,9 @@ export var Reaction = function Reaction(_ref) {
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
     showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
     allowUserDialog = _ref.allowUserDialog,
-    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog;
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
+    _ref$isViewOnly = _ref.isViewOnly,
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly;
   var intl = useIntl();
   var hoverStart = useRef();
   var focusStart = useRef();
@@ -139,7 +142,20 @@ export var Reaction = function Reaction(_ref) {
     createAndFireSafe(createAnalyticsEvent, createReactionFocusedEvent, hoverStart.current);
     onFocused(reaction.emojiId, event);
   }, [createAnalyticsEvent, reaction, onFocused]);
+  var dismissTooltip = function dismissTooltip() {
+    setIsTooltipEnabled(false);
+  };
   var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
+  var emojiAndCount = jsx(Inline, null, jsx("div", {
+    css: [emojiStyle, reaction.count === 0 && emojiNoReactionStyle]
+  }, jsx(ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: emojiId,
+    fitToHeight: 16
+  })), jsx(Counter, {
+    value: reaction.count,
+    highlight: !isViewOnly && reaction.reacted
+  }));
   return jsx(Box, {
     xcss: containerStyles
   }, showParticleEffect && jsx(ReactionParticleEffect, {
@@ -150,8 +166,16 @@ export var Reaction = function Reaction(_ref) {
     reaction: reaction,
     isEnabled: isTooltipEnabled,
     allowUserDialog: allowUserDialog,
-    handleOpenReactionsDialog: handleOpenReactionsDialog
-  }, jsx(ReactionButton, {
+    handleOpenReactionsDialog: handleOpenReactionsDialog,
+    dismissTooltip: dismissTooltip
+  }, isViewOnly ? jsx(StaticReaction, {
+    onMouseEnter: handleMouseEnter,
+    onFocus: handleFocused,
+    testId: RENDER_REACTION_TESTID,
+    dataAttributes: {
+      'data-emoji-id': reaction.emojiId
+    }
+  }, emojiAndCount) : jsx(ReactionButton, {
     onClick: handleClick,
     flash: flash,
     additionalStyles: reaction.reacted ? [reactedStyles] : buttonStyles,
@@ -166,14 +190,5 @@ export var Reaction = function Reaction(_ref) {
       'data-emoji-id': reaction.emojiId,
       'data-emoji-button-id': reaction.emojiId
     }
-  }, jsx("div", {
-    css: [emojiStyle, reaction.count === 0 && emojiNoReactionStyle]
-  }, jsx(ResourcedEmoji, {
-    emojiProvider: emojiProvider,
-    emojiId: emojiId,
-    fitToHeight: 16
-  })), jsx(Counter, {
-    value: reaction.count,
-    highlight: reaction.reacted
-  }))));
+  }, emojiAndCount)));
 };

package/dist/esm/components/Reaction/ReactionButton.js

@@ -12,7 +12,9 @@ import { FlashAnimation } from '../FlashAnimation';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 import { flashStyle, flashStyleOld } from './styles';
 import { fg } from '@atlaskit/platform-feature-flags';
-var reactionStyles = xcss({
+
+// please sync reaction styles that are not button-specific with StaticReaction.tsx
+var reactionButtonStyles = xcss({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'flex-start',
@@ -59,7 +61,7 @@ export var ReactionButton = function ReactionButton(_ref) {
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
     testId: testId,
-    xcss: [reactionStyles].concat(_toConsumableArray(additionalStyles), [
+    xcss: [reactionButtonStyles].concat(_toConsumableArray(additionalStyles), [
     // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
     fg('platform-component-visual-refresh') && reactionStylesRefresh])
   }, dataAttributes), jsx(FlashAnimation, {

package/dist/esm/components/Reaction/StaticReaction.js

@@ -0,0 +1,43 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+
+// please sync reaction styles that are not button-specific with ReactionButton.tsx
+var staticReactionStyles = xcss({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  minWidth: '36px',
+  height: '24px',
+  backgroundColor: 'color.background.neutral.subtle',
+  color: 'color.text.subtle',
+  marginBlockStart: 'space.050',
+  marginInlineEnd: 'space.050',
+  padding: 'space.0',
+  overflow: 'hidden',
+  border: 'none',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered',
+    cursor: 'default'
+  }
+});
+export var StaticReaction = function StaticReaction(_ref) {
+  var onMouseEnter = _ref.onMouseEnter,
+    onFocus = _ref.onFocus,
+    children = _ref.children,
+    testId = _ref.testId,
+    _ref$dataAttributes = _ref.dataAttributes,
+    dataAttributes = _ref$dataAttributes === void 0 ? {} : _ref$dataAttributes;
+  return jsx(Box, _extends({
+    onMouseEnter: onMouseEnter,
+    onFocus: onFocus,
+    testId: testId,
+    xcss: staticReactionStyles
+  }, dataAttributes), children);
+};

package/dist/esm/components/ReactionDialog/ReactionsDialogHeader.js

@@ -180,7 +180,7 @@ export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref4) {
   var isSinglePage = maxPages === 1;
   var isOnFirstPage = currentPage === 1;
   var isOnLastPage = currentPage === maxPages;
-  var handleMouseEnterTab = function handleMouseEnterTab(reaction) {
+  var handleMouseEnter = function handleMouseEnter(reaction) {
     var emojiId = reaction.emojiId;
     if (!emojiId || cache[emojiId]) {
       return;
@@ -250,7 +250,7 @@ export var ReactionsDialogHeader = function ReactionsDialogHeader(_ref4) {
         key: reaction.emojiId,
         "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id,
         onMouseEnter: function onMouseEnter() {
-          handleMouseEnterTab(reaction);
+          handleMouseEnter(reaction);
         }
       }, jsx(Tab, null, jsx(Tooltip, {
         content: cache[reaction.emojiId],

package/dist/esm/components/ReactionSummary/ReactionSummaryView.js

@@ -33,7 +33,9 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
     allowUserDialog = _ref.allowUserDialog,
-    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog;
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
+    _ref$isViewOnly = _ref.isViewOnly,
+    isViewOnly = _ref$isViewOnly === void 0 ? false : _ref$isViewOnly;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -64,7 +66,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
           flash: flash[reaction.emojiId],
           showParticleEffect: particleEffectByEmoji[reaction.emojiId],
           allowUserDialog: allowUserDialog,
-          handleOpenReactionsDialog: handleOpenReactionsDialog
+          handleOpenReactionsDialog: handleOpenReactionsDialog,
+          isViewOnly: isViewOnly
         });
       }));
     },

package/dist/esm/components/ReactionTooltip/ReactionTooltip.js

@@ -26,7 +26,8 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
     _ref$isEnabled = _ref.isEnabled,
     isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
     allowUserDialog = _ref.allowUserDialog,
-    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog;
+    handleOpenReactionsDialog = _ref.handleOpenReactionsDialog,
+    dismissTooltip = _ref.dismissTooltip;
   var content = !users || users.length === 0 || !isEnabled ? null :
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, jsx-a11y/no-noninteractive-tabindex -- Ignored via go/DSP-18766
   jsx("div", {
@@ -43,6 +44,7 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
     css: allowUserDialog ? [footerStyle, underlineStyle] : footerStyle,
     onClick: function onClick() {
       if (allowUserDialog && handleOpenReactionsDialog) {
+        dismissTooltip();
         handleOpenReactionsDialog();
       }
     }

package/dist/esm/components/Reactions/Reactions.js

@@ -309,7 +309,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       showOpaqueBackground: showOpaqueBackground,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
       handleOpenReactionsDialog: handleOpenReactionsDialog,
-      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions
+      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
+      isViewOnly: isViewOnly
     })) : memorizedReactions.map(function (reaction) {
       return jsx(Reaction, {
         key: reaction.emojiId,
@@ -322,7 +323,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
         showParticleEffect: particleEffectByEmoji[reaction.emojiId],
         showOpaqueBackground: showOpaqueBackground,
         allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions,
-        handleOpenReactionsDialog: handleOpenReactionsDialog
+        handleOpenReactionsDialog: handleOpenReactionsDialog,
+        isViewOnly: isViewOnly
       });
     })), !isViewOnly && jsx(ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766

package/dist/types/components/Reaction/Reaction.d.ts

@@ -47,8 +47,12 @@ export interface ReactionProps {
      * Optional function when the user wants to open the Reactions Dialog
      */
     handleOpenReactionsDialog?: (emojiId?: string, source?: string) => void;
+    /**
+     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
+     */
+    isViewOnly?: boolean;
 }
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, isViewOnly, }: ReactionProps) => jsx.JSX.Element;

package/dist/types/components/Reaction/StaticReaction.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+type StaticReactionProps = {
+    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    testId?: string;
+    children?: React.ReactNode;
+    dataAttributes?: {
+        [key: string]: string;
+    };
+};
+export declare const StaticReaction: ({ onMouseEnter, onFocus, children, testId, dataAttributes, }: StaticReactionProps) => jsx.JSX.Element;
+export {};

package/dist/types/components/ReactionSummary/ReactionSummaryView.d.ts

@@ -39,6 +39,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional function when the user wants to open the Reactions Dialog
      */
     handleOpenReactionsDialog?: (emojiId?: string, source?: string) => void;
+    /**
+     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
+     */
+    isViewOnly?: boolean;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, }: ReactionSummaryViewProps) => React.JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, }: ReactionSummaryViewProps) => React.JSX.Element;
 export {};

package/dist/types/components/ReactionTooltip/ReactionTooltip.d.ts

@@ -34,5 +34,9 @@ export type ReactionTooltipProps = PropsWithChildren<{
      * Optional function when the user wants to open the Reactions Dialog
      */
     handleOpenReactionsDialog?: (emojiId?: string, source?: string) => void;
+    /**
+     * Function that hides the tooltip
+     */
+    dismissTooltip: () => void;
 }>;
-export declare const ReactionTooltip: ({ children, emojiName, reaction: { users }, maxReactions, isEnabled, allowUserDialog, handleOpenReactionsDialog, }: ReactionTooltipProps) => jsx.JSX.Element;
+export declare const ReactionTooltip: ({ children, emojiName, reaction: { users }, maxReactions, isEnabled, allowUserDialog, handleOpenReactionsDialog, dismissTooltip, }: ReactionTooltipProps) => jsx.JSX.Element;

package/dist/types-ts4.5/components/Reaction/Reaction.d.ts

@@ -47,8 +47,12 @@ export interface ReactionProps {
      * Optional function when the user wants to open the Reactions Dialog
      */
     handleOpenReactionsDialog?: (emojiId?: string, source?: string) => void;
+    /**
+     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
+     */
+    isViewOnly?: boolean;
 }
 /**
  * Render an emoji reaction button
  */
-export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, }: ReactionProps) => jsx.JSX.Element;
+export declare const Reaction: ({ emojiProvider, onClick, reaction, onMouseEnter, onFocused, flash, showParticleEffect, showOpaqueBackground, allowUserDialog, handleOpenReactionsDialog, isViewOnly, }: ReactionProps) => jsx.JSX.Element;

package/dist/types-ts4.5/components/Reaction/StaticReaction.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+type StaticReactionProps = {
+    onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    testId?: string;
+    children?: React.ReactNode;
+    dataAttributes?: {
+        [key: string]: string;
+    };
+};
+export declare const StaticReaction: ({ onMouseEnter, onFocus, children, testId, dataAttributes, }: StaticReactionProps) => jsx.JSX.Element;
+export {};

package/dist/types-ts4.5/components/ReactionSummary/ReactionSummaryView.d.ts

@@ -39,6 +39,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional function when the user wants to open the Reactions Dialog
      */
     handleOpenReactionsDialog?: (emojiId?: string, source?: string) => void;
+    /**
+     * Optional prop for controlling if the reactions component is view only, disabling adding reactions
+     */
+    isViewOnly?: boolean;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, }: ReactionSummaryViewProps) => React.JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, }: ReactionSummaryViewProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/components/ReactionTooltip/ReactionTooltip.d.ts

@@ -34,5 +34,9 @@ export type ReactionTooltipProps = PropsWithChildren<{
      * Optional function when the user wants to open the Reactions Dialog
      */
     handleOpenReactionsDialog?: (emojiId?: string, source?: string) => void;
+    /**
+     * Function that hides the tooltip
+     */
+    dismissTooltip: () => void;
 }>;
-export declare const ReactionTooltip: ({ children, emojiName, reaction: { users }, maxReactions, isEnabled, allowUserDialog, handleOpenReactionsDialog, }: ReactionTooltipProps) => jsx.JSX.Element;
+export declare const ReactionTooltip: ({ children, emojiName, reaction: { users }, maxReactions, isEnabled, allowUserDialog, handleOpenReactionsDialog, dismissTooltip, }: ReactionTooltipProps) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "25.5.0",
+	"version": "25.6.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,19 +38,19 @@
 		"@atlaskit/avatar": "^21.18.0",
 		"@atlaskit/button": "^20.5.0",
 		"@atlaskit/emoji": "^67.14.0",
-		"@atlaskit/heading": "^4.1.0",
-		"@atlaskit/icon": "^23.9.0",
+		"@atlaskit/heading": "^4.3.0",
+		"@atlaskit/icon": "^23.11.0",
 		"@atlaskit/modal-dialog": "^12.20.0",
-		"@atlaskit/motion": "^3.0.0",
+		"@atlaskit/motion": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^6.4.0",
-		"@atlaskit/popup": "1.31.3",
-		"@atlaskit/primitives": "^13.5.0",
-		"@atlaskit/spinner": "^17.1.0",
-		"@atlaskit/tabs": "^17.2.0",
+		"@atlaskit/popup": "1.32.0",
+		"@atlaskit/primitives": "^13.6.0",
+		"@atlaskit/spinner": "^17.2.0",
+		"@atlaskit/tabs": "^17.3.0",
 		"@atlaskit/theme": "^16.0.0",
 		"@atlaskit/tokens": "^3.3.0",
-		"@atlaskit/tooltip": "^19.1.0",
+		"@atlaskit/tooltip": "^19.2.0",
 		"@atlaskit/ufo": "^0.3.0",
 		"@atlaskit/util-service-support": "^6.2.0",
 		"@babel/runtime": "^7.0.0",