@atlaskit/reactions 31.1.0 → 31.3.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/reactions
 
+## 31.3.0
+
+### Minor Changes
+
+- [#143861](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/143861)
+  [`54b42c1ffa021`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/54b42c1ffa021) -
+  [ux] Updating the UI for the summary tray that includes the reaction picker
+
+## 31.2.0
+
+### Minor Changes
+
+- [#143535](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/143535)
+  [`a39ad7cdc2c99`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a39ad7cdc2c99) -
+  [ux] Adds hoverable reactions summary functionality behind a prop as part of byline reactions
+  changes
+
 ## 31.1.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 = "31.1.0";
+var packageVersion = "31.3.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionButton.js

@@ -45,6 +45,7 @@ var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
     ariaLabel = _ref.ariaLabel,
     ariaPressed = _ref.ariaPressed,
     onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
     onFocus = _ref.onFocus,
     children = _ref.children,
     _ref$dataAttributes = _ref.dataAttributes,
@@ -53,6 +54,7 @@ var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
   return /*#__PURE__*/React.createElement(_compiled.Pressable, (0, _extends2.default)({
     onClick: onClick,
     onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     onFocus: onFocus,
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,

package/dist/cjs/components/ReactionSummaryButton.js

@@ -49,7 +49,9 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
     _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
-    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
+    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
   var intl = (0, _reactIntlNext.useIntl)();
 
   // Helper function to sort reactions by count and return top N
@@ -73,6 +75,8 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     justifyContent: "center"
   }, /*#__PURE__*/React.createElement(_ReactionButton.ReactionButton, {
     onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
     ariaLabel: intl.formatMessage(_i18n.messages.summary),
     showSubtleStyle: subtleReactionsSummaryAndPicker,

package/dist/cjs/components/ReactionSummaryView.js

@@ -57,23 +57,77 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
     onOpen = _ref.onOpen,
     useButtonAlignmentStyling = _ref.useButtonAlignmentStyling,
-    reactionPickerTriggerText = _ref.reactionPickerTriggerText;
+    reactionPickerTriggerText = _ref.reactionPickerTriggerText,
+    _ref$hoverableSummary = _ref.hoverableSummaryView,
+    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
     setSummaryPopupOpen = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isHoveringSummaryView = _useState4[0],
+    setIsHoveringSummaryView = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isSummaryViewButtonHovered = _useState6[0],
+    setIsSummaryViewButtonHovered = _useState6[1];
   var handlePopupClose = (0, _react.useCallback)(function () {
     return setSummaryPopupOpen(false);
   }, []);
   var handleSummaryClick = (0, _react.useCallback)(function () {
     return setSummaryPopupOpen(!isSummaryPopupOpen);
   }, [isSummaryPopupOpen]);
+  var handleButtonMouseEnter = (0, _react.useCallback)(function () {
+    setIsSummaryViewButtonHovered(true);
+    if (hoverableSummaryView) {
+      setSummaryPopupOpen(true);
+    }
+  }, [hoverableSummaryView]);
+  var handleButtonMouseLeave = (0, _react.useCallback)(function () {
+    setIsSummaryViewButtonHovered(false);
+    if (hoverableSummaryView && !isHoveringSummaryView) {
+      setSummaryPopupOpen(false);
+    }
+  }, [hoverableSummaryView, isHoveringSummaryView]);
+  var handleSummaryViewTrayMouseEnter = (0, _react.useCallback)(function () {
+    setIsHoveringSummaryView(true);
+    if (hoverableSummaryView) {
+      setSummaryPopupOpen(true);
+    }
+  }, [hoverableSummaryView]);
+  var handleSummaryViewTrayMouseLeave = (0, _react.useCallback)(function () {
+    setIsHoveringSummaryView(false);
+    if (hoverableSummaryView && !isSummaryViewButtonHovered) {
+      setSummaryPopupOpen(false);
+    }
+  }, [hoverableSummaryView, isSummaryViewButtonHovered]);
+  var handleEmojiSelection = (0, _react.useCallback)(function (emojiId, source) {
+    onSelection(emojiId, source);
+    if (hoverableSummaryView) {
+      setSummaryPopupOpen(false);
+    }
+  }, [onSelection, hoverableSummaryView]);
   return /*#__PURE__*/React.createElement(_popup.default, {
     placement: placement,
+    offset: hoverableSummaryView ? [0, 0] : undefined,
     content: function content() {
       return /*#__PURE__*/React.createElement(_compiled.Box, {
-        testId: RENDER_SUMMARY_VIEW_POPUP_TESTID
-      }, /*#__PURE__*/React.createElement(_compiled.Inline, {
+        testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
+        onMouseEnter: handleSummaryViewTrayMouseEnter,
+        onMouseLeave: handleSummaryViewTrayMouseLeave
+      }, allowSelectFromSummaryView && /*#__PURE__*/React.createElement(_compiled.Flex, {
+        justifyContent: "center"
+      }, /*#__PURE__*/React.createElement(_ReactionSummaryViewEmojiPicker.ReactionSummaryViewEmojiPicker, {
+        emojiProvider: emojiProvider,
+        disabled: disabled,
+        onSelection: handleEmojiSelection,
+        emojiPickerSize: emojiPickerSize,
+        tooltipContent: tooltipContent,
+        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+        reactionPickerTriggerText: reactionPickerTriggerText,
+        onOpen: onOpen
+      })), /*#__PURE__*/React.createElement(_compiled.Inline, {
         xcss: styles.summaryPopup,
         space: "space.025",
         shouldWrap: true,
@@ -92,17 +146,6 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
           handleOpenReactionsDialog: handleOpenReactionsDialog,
           isViewOnly: isViewOnly
         });
-      })), allowSelectFromSummaryView && /*#__PURE__*/React.createElement(_compiled.Flex, {
-        justifyContent: "center"
-      }, /*#__PURE__*/React.createElement(_ReactionSummaryViewEmojiPicker.ReactionSummaryViewEmojiPicker, {
-        emojiProvider: emojiProvider,
-        disabled: disabled,
-        onSelection: onSelection,
-        emojiPickerSize: emojiPickerSize,
-        tooltipContent: tooltipContent,
-        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-        reactionPickerTriggerText: reactionPickerTriggerText,
-        onOpen: onOpen
       })));
     },
     isOpen: isSummaryPopupOpen,
@@ -112,6 +155,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         emojiProvider: emojiProvider,
         reactions: reactions,
         onClick: handleSummaryClick,
+        onMouseEnter: handleButtonMouseEnter,
+        onMouseLeave: handleButtonMouseLeave,
         showOpaqueBackground: showOpaqueBackground,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         useButtonAlignmentStyling: useButtonAlignmentStyling

package/dist/cjs/components/Reactions.js

@@ -17,7 +17,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _modalDialog = require("@atlaskit/modal-dialog");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _segment = _interopRequireDefault(require("@atlaskit/react-ufo/segment"));
 var _analytics = require("../analytics");
 var _constants = require("../shared/constants");
@@ -143,7 +142,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     allowSelectFromSummaryView = _ref$allowSelectFromS === void 0 ? false : _ref$allowSelectFromS,
     _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
     useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme,
-    reactionPickerTriggerText = _ref.reactionPickerTriggerText;
+    reactionPickerTriggerText = _ref.reactionPickerTriggerText,
+    _ref$hoverableSummary = _ref.hoverableSummaryView,
+    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -161,7 +162,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     if (status !== _types.ReactionStatus.ready) {
       renderTime.current = Date.now();
     } else {
-      var isSSR = process.env.REACT_SSR && (0, _platformFeatureFlags.fg)('platform_fix_analytics_error');
+      var isSSR = process.env.REACT_SSR;
       if ((0, _analytics.isSampled)(_constants.SAMPLING_RATE_REACTIONS_RENDERED_EXP) && !isSSR) {
         var _renderTime$current;
         (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionsRenderedEvent, (_renderTime$current = renderTime.current) !== null && _renderTime$current !== void 0 ? _renderTime$current : Date.now() //renderTime.current can be null during unit test cases
@@ -325,7 +326,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     emojiPickerSize: emojiPickerSize,
     onOpen: handlePickerOpen,
     useButtonAlignmentStyling: useButtonAlignmentStyling,
-    reactionPickerTriggerText: reactionPickerTriggerText
+    reactionPickerTriggerText: reactionPickerTriggerText,
+    hoverableSummaryView: hoverableSummaryView
   })) : memorizedReactions.map(function (reaction) {
     return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
       key: reaction.emojiId,

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

@@ -24,10 +24,11 @@
 ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
-._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._p12f3xl8{max-width:305px}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/cjs/components/Trigger.js

@@ -26,8 +26,8 @@ var styles = {
   opaqueEnabledTrigger: "_1h6dmuej _bfhkvuon _irr3108i _1di61ji5",
   disabledTrigger: "_1h6d13gt _bfhksyzs",
   miniMode: "_2rkoglpi _1dqoglyw _1ul91tcg _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
-  fullWidthSummaryViewReactionPickerTrigger: "_1bsb1osq _19bvu2gc _u5f3u2gc _n3tdu2gc",
-  fullWidth: "_1bsb1osq"
+  fullWidthSummaryViewReactionPickerTrigger: "_1bsb1osq _ca0qu2gc _19bvu2gc _u5f3u2gc",
+  fullWidth: "_1bsb1osq _p12f3xl8"
 };
 
 /**

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

package/dist/es2019/components/ReactionButton.js

@@ -34,6 +34,7 @@ export const ReactionButton = ({
   ariaLabel,
   ariaPressed,
   onMouseEnter,
+  onMouseLeave,
   onFocus,
   children,
   dataAttributes = {},
@@ -42,6 +43,7 @@ export const ReactionButton = ({
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     onClick: onClick,
     onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     onFocus: onFocus,
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,

package/dist/es2019/components/ReactionSummaryButton.js

@@ -33,7 +33,9 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
   onClick,
   showOpaqueBackground = false,
   subtleReactionsSummaryAndPicker = false,
-  useButtonAlignmentStyling = false
+  useButtonAlignmentStyling = false,
+  onMouseEnter,
+  onMouseLeave
 }, ref) => {
   const intl = useIntl();
 
@@ -54,6 +56,8 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
     justifyContent: "center"
   }, /*#__PURE__*/React.createElement(ReactionButton, {
     onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
     ariaLabel: intl.formatMessage(messages.summary),
     showSubtleStyle: subtleReactionsSummaryAndPicker,

package/dist/es2019/components/ReactionSummaryView.js

@@ -39,16 +39,63 @@ export const ReactionSummaryView = ({
   reactionPickerTriggerIcon,
   onOpen,
   useButtonAlignmentStyling,
-  reactionPickerTriggerText
+  reactionPickerTriggerText,
+  hoverableSummaryView = false
 }) => {
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
+  const [isHoveringSummaryView, setIsHoveringSummaryView] = useState(false);
+  const [isSummaryViewButtonHovered, setIsSummaryViewButtonHovered] = useState(false);
   const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
   const handleSummaryClick = useCallback(() => setSummaryPopupOpen(!isSummaryPopupOpen), [isSummaryPopupOpen]);
+  const handleButtonMouseEnter = useCallback(() => {
+    setIsSummaryViewButtonHovered(true);
+    if (hoverableSummaryView) {
+      setSummaryPopupOpen(true);
+    }
+  }, [hoverableSummaryView]);
+  const handleButtonMouseLeave = useCallback(() => {
+    setIsSummaryViewButtonHovered(false);
+    if (hoverableSummaryView && !isHoveringSummaryView) {
+      setSummaryPopupOpen(false);
+    }
+  }, [hoverableSummaryView, isHoveringSummaryView]);
+  const handleSummaryViewTrayMouseEnter = useCallback(() => {
+    setIsHoveringSummaryView(true);
+    if (hoverableSummaryView) {
+      setSummaryPopupOpen(true);
+    }
+  }, [hoverableSummaryView]);
+  const handleSummaryViewTrayMouseLeave = useCallback(() => {
+    setIsHoveringSummaryView(false);
+    if (hoverableSummaryView && !isSummaryViewButtonHovered) {
+      setSummaryPopupOpen(false);
+    }
+  }, [hoverableSummaryView, isSummaryViewButtonHovered]);
+  const handleEmojiSelection = useCallback((emojiId, source) => {
+    onSelection(emojiId, source);
+    if (hoverableSummaryView) {
+      setSummaryPopupOpen(false);
+    }
+  }, [onSelection, hoverableSummaryView]);
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
+    offset: hoverableSummaryView ? [0, 0] : undefined,
     content: () => /*#__PURE__*/React.createElement(Box, {
-      testId: RENDER_SUMMARY_VIEW_POPUP_TESTID
-    }, /*#__PURE__*/React.createElement(Inline, {
+      testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
+      onMouseEnter: handleSummaryViewTrayMouseEnter,
+      onMouseLeave: handleSummaryViewTrayMouseLeave
+    }, allowSelectFromSummaryView && /*#__PURE__*/React.createElement(Flex, {
+      justifyContent: "center"
+    }, /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
+      emojiProvider: emojiProvider,
+      disabled: disabled,
+      onSelection: handleEmojiSelection,
+      emojiPickerSize: emojiPickerSize,
+      tooltipContent: tooltipContent,
+      reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+      reactionPickerTriggerText: reactionPickerTriggerText,
+      onOpen: onOpen
+    })), /*#__PURE__*/React.createElement(Inline, {
       xcss: styles.summaryPopup,
       space: "space.025",
       shouldWrap: true,
@@ -65,24 +112,15 @@ export const ReactionSummaryView = ({
       allowUserDialog: allowUserDialog,
       handleOpenReactionsDialog: handleOpenReactionsDialog,
       isViewOnly: isViewOnly
-    }))), allowSelectFromSummaryView && /*#__PURE__*/React.createElement(Flex, {
-      justifyContent: "center"
-    }, /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
-      emojiProvider: emojiProvider,
-      disabled: disabled,
-      onSelection: onSelection,
-      emojiPickerSize: emojiPickerSize,
-      tooltipContent: tooltipContent,
-      reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-      reactionPickerTriggerText: reactionPickerTriggerText,
-      onOpen: onOpen
-    }))),
+    })))),
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,
     trigger: triggerProps => /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {
       emojiProvider: emojiProvider,
       reactions: reactions,
       onClick: handleSummaryClick,
+      onMouseEnter: handleButtonMouseEnter,
+      onMouseLeave: handleButtonMouseLeave,
       showOpaqueBackground: showOpaqueBackground,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
       useButtonAlignmentStyling: useButtonAlignmentStyling

package/dist/es2019/components/Reactions.js

@@ -5,7 +5,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
-import { fg } from '@atlaskit/platform-feature-flags';
 import UFOSegment from '@atlaskit/react-ufo/segment';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
@@ -107,7 +106,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   reactionPickerTriggerIcon,
   allowSelectFromSummaryView = false,
   useButtonAlignmentStyling = false,
-  reactionPickerTriggerText
+  reactionPickerTriggerText,
+  hoverableSummaryView = false
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState('');
   const {
@@ -124,7 +124,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     if (status !== ReactionStatus.ready) {
       renderTime.current = Date.now();
     } else {
-      const isSSR = process.env.REACT_SSR && fg('platform_fix_analytics_error');
+      const isSSR = process.env.REACT_SSR;
       if (isSampled(SAMPLING_RATE_REACTIONS_RENDERED_EXP) && !isSSR) {
         var _renderTime$current;
         createAndFireSafe(createAnalyticsEvent, createReactionsRenderedEvent, (_renderTime$current = renderTime.current) !== null && _renderTime$current !== void 0 ? _renderTime$current : Date.now() //renderTime.current can be null during unit test cases
@@ -276,7 +276,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     emojiPickerSize: emojiPickerSize,
     onOpen: handlePickerOpen,
     useButtonAlignmentStyling: useButtonAlignmentStyling,
-    reactionPickerTriggerText: reactionPickerTriggerText
+    reactionPickerTriggerText: reactionPickerTriggerText,
+    hoverableSummaryView: hoverableSummaryView
   })) : memorizedReactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
     key: reaction.emojiId,
     reaction: reaction,

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

@@ -24,10 +24,11 @@
 ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
-._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._p12f3xl8{max-width:305px}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/es2019/components/Trigger.js

@@ -19,8 +19,8 @@ const styles = {
   opaqueEnabledTrigger: "_1h6dmuej _bfhkvuon _irr3108i _1di61ji5",
   disabledTrigger: "_1h6d13gt _bfhksyzs",
   miniMode: "_2rkoglpi _1dqoglyw _1ul91tcg _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
-  fullWidthSummaryViewReactionPickerTrigger: "_1bsb1osq _19bvu2gc _u5f3u2gc _n3tdu2gc",
-  fullWidth: "_1bsb1osq"
+  fullWidthSummaryViewReactionPickerTrigger: "_1bsb1osq _ca0qu2gc _19bvu2gc _u5f3u2gc",
+  fullWidth: "_1bsb1osq _p12f3xl8"
 };
 
 /**

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

package/dist/esm/components/ReactionButton.js

@@ -35,6 +35,7 @@ export var ReactionButton = function ReactionButton(_ref) {
     ariaLabel = _ref.ariaLabel,
     ariaPressed = _ref.ariaPressed,
     onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
     onFocus = _ref.onFocus,
     children = _ref.children,
     _ref$dataAttributes = _ref.dataAttributes,
@@ -43,6 +44,7 @@ export var ReactionButton = function ReactionButton(_ref) {
   return /*#__PURE__*/React.createElement(Pressable, _extends({
     onClick: onClick,
     onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     onFocus: onFocus,
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,

package/dist/esm/components/ReactionSummaryButton.js

@@ -39,7 +39,9 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
     subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
     _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
-    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme;
+    useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave;
   var intl = useIntl();
 
   // Helper function to sort reactions by count and return top N
@@ -63,6 +65,8 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     justifyContent: "center"
   }, /*#__PURE__*/React.createElement(ReactionButton, {
     onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
     ariaLabel: intl.formatMessage(messages.summary),
     showSubtleStyle: subtleReactionsSummaryAndPicker,

package/dist/esm/components/ReactionSummaryView.js

@@ -47,23 +47,77 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
     onOpen = _ref.onOpen,
     useButtonAlignmentStyling = _ref.useButtonAlignmentStyling,
-    reactionPickerTriggerText = _ref.reactionPickerTriggerText;
+    reactionPickerTriggerText = _ref.reactionPickerTriggerText,
+    _ref$hoverableSummary = _ref.hoverableSummaryView,
+    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
     setSummaryPopupOpen = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isHoveringSummaryView = _useState4[0],
+    setIsHoveringSummaryView = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isSummaryViewButtonHovered = _useState6[0],
+    setIsSummaryViewButtonHovered = _useState6[1];
   var handlePopupClose = useCallback(function () {
     return setSummaryPopupOpen(false);
   }, []);
   var handleSummaryClick = useCallback(function () {
     return setSummaryPopupOpen(!isSummaryPopupOpen);
   }, [isSummaryPopupOpen]);
+  var handleButtonMouseEnter = useCallback(function () {
+    setIsSummaryViewButtonHovered(true);
+    if (hoverableSummaryView) {
+      setSummaryPopupOpen(true);
+    }
+  }, [hoverableSummaryView]);
+  var handleButtonMouseLeave = useCallback(function () {
+    setIsSummaryViewButtonHovered(false);
+    if (hoverableSummaryView && !isHoveringSummaryView) {
+      setSummaryPopupOpen(false);
+    }
+  }, [hoverableSummaryView, isHoveringSummaryView]);
+  var handleSummaryViewTrayMouseEnter = useCallback(function () {
+    setIsHoveringSummaryView(true);
+    if (hoverableSummaryView) {
+      setSummaryPopupOpen(true);
+    }
+  }, [hoverableSummaryView]);
+  var handleSummaryViewTrayMouseLeave = useCallback(function () {
+    setIsHoveringSummaryView(false);
+    if (hoverableSummaryView && !isSummaryViewButtonHovered) {
+      setSummaryPopupOpen(false);
+    }
+  }, [hoverableSummaryView, isSummaryViewButtonHovered]);
+  var handleEmojiSelection = useCallback(function (emojiId, source) {
+    onSelection(emojiId, source);
+    if (hoverableSummaryView) {
+      setSummaryPopupOpen(false);
+    }
+  }, [onSelection, hoverableSummaryView]);
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
+    offset: hoverableSummaryView ? [0, 0] : undefined,
     content: function content() {
       return /*#__PURE__*/React.createElement(Box, {
-        testId: RENDER_SUMMARY_VIEW_POPUP_TESTID
-      }, /*#__PURE__*/React.createElement(Inline, {
+        testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
+        onMouseEnter: handleSummaryViewTrayMouseEnter,
+        onMouseLeave: handleSummaryViewTrayMouseLeave
+      }, allowSelectFromSummaryView && /*#__PURE__*/React.createElement(Flex, {
+        justifyContent: "center"
+      }, /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
+        emojiProvider: emojiProvider,
+        disabled: disabled,
+        onSelection: handleEmojiSelection,
+        emojiPickerSize: emojiPickerSize,
+        tooltipContent: tooltipContent,
+        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
+        reactionPickerTriggerText: reactionPickerTriggerText,
+        onOpen: onOpen
+      })), /*#__PURE__*/React.createElement(Inline, {
         xcss: styles.summaryPopup,
         space: "space.025",
         shouldWrap: true,
@@ -82,17 +136,6 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
           handleOpenReactionsDialog: handleOpenReactionsDialog,
           isViewOnly: isViewOnly
         });
-      })), allowSelectFromSummaryView && /*#__PURE__*/React.createElement(Flex, {
-        justifyContent: "center"
-      }, /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
-        emojiProvider: emojiProvider,
-        disabled: disabled,
-        onSelection: onSelection,
-        emojiPickerSize: emojiPickerSize,
-        tooltipContent: tooltipContent,
-        reactionPickerTriggerIcon: reactionPickerTriggerIcon,
-        reactionPickerTriggerText: reactionPickerTriggerText,
-        onOpen: onOpen
       })));
     },
     isOpen: isSummaryPopupOpen,
@@ -102,6 +145,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         emojiProvider: emojiProvider,
         reactions: reactions,
         onClick: handleSummaryClick,
+        onMouseEnter: handleButtonMouseEnter,
+        onMouseLeave: handleButtonMouseLeave,
         showOpaqueBackground: showOpaqueBackground,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         useButtonAlignmentStyling: useButtonAlignmentStyling

package/dist/esm/components/Reactions.js

@@ -7,7 +7,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
-import { fg } from '@atlaskit/platform-feature-flags';
 import UFOSegment from '@atlaskit/react-ufo/segment';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
@@ -131,7 +130,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     allowSelectFromSummaryView = _ref$allowSelectFromS === void 0 ? false : _ref$allowSelectFromS,
     _ref$useButtonAlignme = _ref.useButtonAlignmentStyling,
     useButtonAlignmentStyling = _ref$useButtonAlignme === void 0 ? false : _ref$useButtonAlignme,
-    reactionPickerTriggerText = _ref.reactionPickerTriggerText;
+    reactionPickerTriggerText = _ref.reactionPickerTriggerText,
+    _ref$hoverableSummary = _ref.hoverableSummaryView,
+    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -149,7 +150,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     if (status !== ReactionStatus.ready) {
       renderTime.current = Date.now();
     } else {
-      var isSSR = process.env.REACT_SSR && fg('platform_fix_analytics_error');
+      var isSSR = process.env.REACT_SSR;
       if (isSampled(SAMPLING_RATE_REACTIONS_RENDERED_EXP) && !isSSR) {
         var _renderTime$current;
         createAndFireSafe(createAnalyticsEvent, createReactionsRenderedEvent, (_renderTime$current = renderTime.current) !== null && _renderTime$current !== void 0 ? _renderTime$current : Date.now() //renderTime.current can be null during unit test cases
@@ -313,7 +314,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     emojiPickerSize: emojiPickerSize,
     onOpen: handlePickerOpen,
     useButtonAlignmentStyling: useButtonAlignmentStyling,
-    reactionPickerTriggerText: reactionPickerTriggerText
+    reactionPickerTriggerText: reactionPickerTriggerText,
+    hoverableSummaryView: hoverableSummaryView
   })) : memorizedReactions.map(function (reaction) {
     return /*#__PURE__*/React.createElement(Reaction, {
       key: reaction.emojiId,

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

@@ -24,10 +24,11 @@
 ._bfhksyzs{background-color:var(--ds-background-disabled,#091e4208)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
-._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._p12f3xl8{max-width:305px}
 ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
 ._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}

package/dist/esm/components/Trigger.js

@@ -19,8 +19,8 @@ var styles = {
   opaqueEnabledTrigger: "_1h6dmuej _bfhkvuon _irr3108i _1di61ji5",
   disabledTrigger: "_1h6d13gt _bfhksyzs",
   miniMode: "_2rkoglpi _1dqoglyw _1ul91tcg _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
-  fullWidthSummaryViewReactionPickerTrigger: "_1bsb1osq _19bvu2gc _u5f3u2gc _n3tdu2gc",
-  fullWidth: "_1bsb1osq"
+  fullWidthSummaryViewReactionPickerTrigger: "_1bsb1osq _ca0qu2gc _19bvu2gc _u5f3u2gc",
+  fullWidth: "_1bsb1osq _p12f3xl8"
 };
 
 /**

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

@@ -6,6 +6,7 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
     ariaLabel: string;
     ariaPressed?: boolean;
     onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     dataAttributes?: {
         [key: string]: string;
@@ -17,5 +18,5 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
     useCompactStyles?: boolean;
     reacted?: boolean;
 }
-export declare const ReactionButton: ({ onClick, flash, showSubtleStyle, showOpaqueBackground, useCompactStyles, reacted, ariaLabel, ariaPressed, onMouseEnter, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => JSX.Element;
+export declare const ReactionButton: ({ onClick, flash, showSubtleStyle, showOpaqueBackground, useCompactStyles, reacted, ariaLabel, ariaPressed, onMouseEnter, onMouseLeave, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => JSX.Element;
 export {};

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

@@ -17,6 +17,14 @@ interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider
      * Optional prop for applying subtle styling to reaction summary button
      */
     subtleReactionsSummaryAndPicker?: boolean;
+    /**
+     * Optional event handler when mouse enters the button
+     */
+    onMouseEnter?: () => void;
+    /**
+     * Optional event handler when mouse leaves the button
+     */
+    onMouseLeave?: () => void;
 }
 /**
  * Test id for summary reaction wrapper button

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

@@ -53,6 +53,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional event handler when the emoji picker is opened
      */
     onOpen?: () => void;
+    /**
+     * Optional prop to make the summary view open on hover
+     */
+    hoverableSummaryView?: boolean;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

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

@@ -161,6 +161,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for controlling text of the trigger button
      */
     reactionPickerTriggerText?: string;
+    /**
+     * Optional prop for controlling if the summary view is hoverable
+     */
+    hoverableSummaryView?: boolean;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -173,4 +177,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, }: ReactionsProps) => JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, }: ReactionsProps) => JSX.Element>;

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

@@ -6,6 +6,7 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
     ariaLabel: string;
     ariaPressed?: boolean;
     onMouseEnter?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onMouseLeave?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     dataAttributes?: {
         [key: string]: string;
@@ -17,5 +18,5 @@ interface ReactionButtonProps extends Pick<ReactionProps, 'flash'> {
     useCompactStyles?: boolean;
     reacted?: boolean;
 }
-export declare const ReactionButton: ({ onClick, flash, showSubtleStyle, showOpaqueBackground, useCompactStyles, reacted, ariaLabel, ariaPressed, onMouseEnter, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => JSX.Element;
+export declare const ReactionButton: ({ onClick, flash, showSubtleStyle, showOpaqueBackground, useCompactStyles, reacted, ariaLabel, ariaPressed, onMouseEnter, onMouseLeave, onFocus, children, dataAttributes, testId, }: ReactionButtonProps) => JSX.Element;
 export {};

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

@@ -17,6 +17,14 @@ interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider
      * Optional prop for applying subtle styling to reaction summary button
      */
     subtleReactionsSummaryAndPicker?: boolean;
+    /**
+     * Optional event handler when mouse enters the button
+     */
+    onMouseEnter?: () => void;
+    /**
+     * Optional event handler when mouse leaves the button
+     */
+    onMouseLeave?: () => void;
 }
 /**
  * Test id for summary reaction wrapper button

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

@@ -53,6 +53,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional event handler when the emoji picker is opened
      */
     onOpen?: () => void;
+    /**
+     * Optional prop to make the summary view open on hover
+     */
+    hoverableSummaryView?: boolean;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, allowUserDialog, handleOpenReactionsDialog, isViewOnly, allowSelectFromSummaryView, disabled, emojiPickerSize, onSelection, tooltipContent, reactionPickerTriggerIcon, onOpen, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

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

@@ -161,6 +161,10 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for controlling text of the trigger button
      */
     reactionPickerTriggerText?: string;
+    /**
+     * Optional prop for controlling if the summary view is hoverable
+     */
+    hoverableSummaryView?: boolean;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -173,4 +177,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, }: ReactionsProps) => JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, isViewOnly, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerTooltipContent, reactionPickerTriggerIcon, allowSelectFromSummaryView, useButtonAlignmentStyling, reactionPickerTriggerText, hoverableSummaryView, }: ReactionsProps) => JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "31.1.0",
+	"version": "31.3.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -121,9 +121,6 @@
 		"platform-component-visual-refresh": {
 			"type": "boolean"
 		},
-		"platform_fix_analytics_error": {
-			"type": "boolean"
-		},
 		"platform-make-accessible-close-button": {
 			"type": "boolean"
 		}