@atlaskit/reactions 31.0.1 → 31.2.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/reactions
 
+## 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
+
+- [#142643](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142643)
+  [`ec49a2c4909a4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ec49a2c4909a4) -
+  [ux] Updates the emoji picker positioning when opened from the summary view reaction picker
+  trigger
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 31.0.1
 
 ### Patch 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.0.1";
+var packageVersion = "31.2.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,22 +57,65 @@ 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
+        testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
+        onMouseEnter: handleSummaryViewTrayMouseEnter,
+        onMouseLeave: handleSummaryViewTrayMouseLeave
       }, /*#__PURE__*/React.createElement(_compiled.Inline, {
         xcss: styles.summaryPopup,
         space: "space.025",
@@ -97,7 +140,7 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
       }, /*#__PURE__*/React.createElement(_ReactionSummaryViewEmojiPicker.ReactionSummaryViewEmojiPicker, {
         emojiProvider: emojiProvider,
         disabled: disabled,
-        onSelection: onSelection,
+        onSelection: handleEmojiSelection,
         emojiPickerSize: emojiPickerSize,
         tooltipContent: tooltipContent,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
@@ -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/ReactionSummaryViewEmojiPicker.js

@@ -71,7 +71,8 @@ var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = fu
   return /*#__PURE__*/_react.default.createElement(_popup.default, {
     testId: "reaction-summary-view-emoji-picker",
     isOpen: isOpen,
-    placement: "right",
+    placement: "bottom-start",
+    offset: [-10, -66],
     onClose: function onClose() {
       return close();
     },

package/dist/cjs/components/Reactions.js

@@ -143,7 +143,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],
@@ -325,7 +327,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/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.0.1";
+const packageVersion = "31.2.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,15 +39,51 @@ 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
+      testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
+      onMouseEnter: handleSummaryViewTrayMouseEnter,
+      onMouseLeave: handleSummaryViewTrayMouseLeave
     }, /*#__PURE__*/React.createElement(Inline, {
       xcss: styles.summaryPopup,
       space: "space.025",
@@ -70,7 +106,7 @@ export const ReactionSummaryView = ({
     }, /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
       emojiProvider: emojiProvider,
       disabled: disabled,
-      onSelection: onSelection,
+      onSelection: handleEmojiSelection,
       emojiPickerSize: emojiPickerSize,
       tooltipContent: tooltipContent,
       reactionPickerTriggerIcon: reactionPickerTriggerIcon,
@@ -83,6 +119,8 @@ export const ReactionSummaryView = ({
       emojiProvider: emojiProvider,
       reactions: reactions,
       onClick: handleSummaryClick,
+      onMouseEnter: handleButtonMouseEnter,
+      onMouseLeave: handleButtonMouseLeave,
       showOpaqueBackground: showOpaqueBackground,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
       useButtonAlignmentStyling: useButtonAlignmentStyling

package/dist/es2019/components/ReactionSummaryViewEmojiPicker.js

@@ -56,7 +56,8 @@ export const ReactionSummaryViewEmojiPicker = ({
   return /*#__PURE__*/React.createElement(Popup, {
     testId: "reaction-summary-view-emoji-picker",
     isOpen: isOpen,
-    placement: "right",
+    placement: "bottom-start",
+    offset: [-10, -66],
     onClose: () => close(),
     content: () => /*#__PURE__*/React.createElement(EmojiPicker, {
       emojiProvider: emojiProvider,

package/dist/es2019/components/Reactions.js

@@ -107,7 +107,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   reactionPickerTriggerIcon,
   allowSelectFromSummaryView = false,
   useButtonAlignmentStyling = false,
-  reactionPickerTriggerText
+  reactionPickerTriggerText,
+  hoverableSummaryView = false
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState('');
   const {
@@ -276,7 +277,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/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.0.1";
+var packageVersion = "31.2.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,22 +47,65 @@ 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
+        testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
+        onMouseEnter: handleSummaryViewTrayMouseEnter,
+        onMouseLeave: handleSummaryViewTrayMouseLeave
       }, /*#__PURE__*/React.createElement(Inline, {
         xcss: styles.summaryPopup,
         space: "space.025",
@@ -87,7 +130,7 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
       }, /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
         emojiProvider: emojiProvider,
         disabled: disabled,
-        onSelection: onSelection,
+        onSelection: handleEmojiSelection,
         emojiPickerSize: emojiPickerSize,
         tooltipContent: tooltipContent,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
@@ -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/ReactionSummaryViewEmojiPicker.js

@@ -61,7 +61,8 @@ export var ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPic
   return /*#__PURE__*/React.createElement(Popup, {
     testId: "reaction-summary-view-emoji-picker",
     isOpen: isOpen,
-    placement: "right",
+    placement: "bottom-start",
+    offset: [-10, -66],
     onClose: function onClose() {
       return close();
     },

package/dist/esm/components/Reactions.js

@@ -131,7 +131,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],
@@ -313,7 +315,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/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.0.1",
+	"version": "31.2.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,19 +40,19 @@
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/emoji": "^69.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^25.5.0",
+		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/modal-dialog": "^14.1.0",
 		"@atlaskit/motion": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.1.0",
 		"@atlaskit/popper": "^7.0.0",
-		"@atlaskit/popup": "^4.0.0",
+		"@atlaskit/popup": "^4.1.0",
 		"@atlaskit/primitives": "^14.4.0",
-		"@atlaskit/react-ufo": "^3.5.0",
+		"@atlaskit/react-ufo": "^3.6.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.3.0",