@atlaskit/reactions 31.12.0 → 31.13.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/reactions
 
+## 31.13.0
+
+### Minor Changes
+
+- [#156164](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156164)
+  [`f0d8ffc2480b7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0d8ffc2480b7) -
+  [ux] Changes the behavior for the hoverable summary button and empty reactions trigger
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 31.12.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.12.0";
+var packageVersion = "31.13.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionPickerNew.js

@@ -106,6 +106,10 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
     isHoveringPopup = _useState8[0],
     setIsHoveringPopup = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    isTriggerClicked = _useState10[0],
+    setIsTriggerClicked = _useState10[1];
   var _useDelayedState = (0, _useDelayedState3.useDelayedState)(false, hoverableReactionPickerDelay),
     _useDelayedState2 = (0, _slicedToArray2.default)(_useDelayedState, 2),
     isPopupTrayOpen = _useDelayedState2[0],
@@ -146,7 +150,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
   }, reactionsPickerPreventOverflowOptions && {
     options: reactionsPickerPreventOverflowOptions
   })];
-  var _useState9 = (0, _react.useState)({
+  var _useState11 = (0, _react.useState)({
       /**
        * Show the full custom emoji list picker or the default list of emojis
        */
@@ -156,16 +160,16 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
        */
       popperPlacement: popperPlacement
     }),
-    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    settings = _useState10[0],
-    setSettings = _useState10[1];
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    settings = _useState12[0],
+    setSettings = _useState12[1];
 
   /**
    * Event callback when the picker is closed
    * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
    */
   var close = (0, _react.useCallback)(function (_id) {
-    setIsPopupTrayOpen(false);
+    setIsPopupTrayOpen(false, true);
     // ufo abort reaction experience
     _ufo.PickerRender.abort({
       metadata: {
@@ -176,8 +180,11 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     });
     if (hoverableReactionPicker) {
       setIsHoverableReactionPickerEmojiPickerOpen(false);
+      setIsTriggerClicked(false);
+      setIsHoveringTrigger(false);
+      setIsHoveringPopup(false);
     }
-  }, [setIsPopupTrayOpen, setIsHoverableReactionPickerEmojiPickerOpen, hoverableReactionPicker]);
+  }, [setIsPopupTrayOpen, setIsHoverableReactionPickerEmojiPickerOpen, hoverableReactionPicker, setIsTriggerClicked, setIsHoveringTrigger, setIsHoveringPopup]);
 
   /**
    * Event handle rwhen selecting to show the custom emoji icons picker
@@ -192,6 +199,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     setIsPopupTrayOpen(true);
     if (hoverableReactionPicker) {
       setIsHoverableReactionPickerEmojiPickerOpen(!isHoverableReactionPickerEmojiPickerOpen);
+      setIsTriggerClicked(false);
     }
     onShowMore();
   }, [settings.showFullPicker, setIsPopupTrayOpen, onShowMore, popperPlacement, hoverableReactionPicker, setIsHoverableReactionPickerEmojiPickerOpen, isHoverableReactionPickerEmojiPickerOpen]);
@@ -219,15 +227,30 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
       popperPlacement: popperPlacement
     }));
     if (hoverableReactionPicker) {
-      setIsHoverableReactionPickerEmojiPickerOpen(!isHoverableReactionPickerEmojiPickerOpen);
-      setIsPopupTrayOpen(!isHoverableReactionPickerEmojiPickerOpen || !isPopupTrayOpen);
+      if (isTriggerClicked) {
+        // if the button was previously clicked, close the popup and reset the state
+        setIsTriggerClicked(false);
+        setIsPopupTrayOpen(false, true);
+      } else {
+        if (isHoverableReactionPickerEmojiPickerOpen) {
+          // if the emoji picker is open, close the popup and reset the state
+          setIsTriggerClicked(false);
+          setIsPopupTrayOpen(false, true);
+        } else {
+          // if the button was not previously clicked, open the popup and set the state
+          setIsTriggerClicked(true);
+          setIsPopupTrayOpen(true, true);
+        }
+      }
+      // close the emoji picker
+      setIsHoverableReactionPickerEmojiPickerOpen(false);
     } else {
       setIsPopupTrayOpen(!isPopupTrayOpen);
     }
     onOpen();
     // ufo reactions picker opened success
     _ufo.PickerRender.success();
-  }, [hoverableReactionPicker, isPopupTrayOpen, setIsPopupTrayOpen, isHoverableReactionPickerEmojiPickerOpen, onOpen, settings, popperPlacement]);
+  }, [hoverableReactionPicker, isPopupTrayOpen, setIsPopupTrayOpen, isTriggerClicked, setIsTriggerClicked, isHoverableReactionPickerEmojiPickerOpen, onOpen, settings, popperPlacement]);
   var handleTriggerMouseEnter = (0, _react.useCallback)(function () {
     if (hoverableReactionPicker) {
       setIsHoveringTrigger(true);
@@ -239,11 +262,11 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
   var handleTriggerMouseLeave = (0, _react.useCallback)(function () {
     if (hoverableReactionPicker) {
       setIsHoveringTrigger(false);
-      if (!isHoveringPopup && !isHoverableReactionPickerEmojiPickerOpen) {
+      if (!isHoveringPopup && !isHoverableReactionPickerEmojiPickerOpen && !isTriggerClicked) {
         setIsPopupTrayOpen(false);
       }
     }
-  }, [hoverableReactionPicker, isHoveringPopup, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  }, [hoverableReactionPicker, isHoveringPopup, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen, isTriggerClicked]);
   var handlePopupMouseEnter = (0, _react.useCallback)(function () {
     if (hoverableReactionPicker) {
       setIsHoveringPopup(true);
@@ -255,11 +278,11 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
   var handlePopupMouseLeave = (0, _react.useCallback)(function () {
     if (hoverableReactionPicker) {
       setIsHoveringPopup(false);
-      if (!isHoveringTrigger && !isHoverableReactionPickerEmojiPickerOpen) {
+      if (!isHoveringTrigger && !isHoverableReactionPickerEmojiPickerOpen && !isTriggerClicked) {
         setIsPopupTrayOpen(false);
       }
     }
-  }, [hoverableReactionPicker, isHoveringTrigger, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  }, [hoverableReactionPicker, isHoveringTrigger, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen, isTriggerClicked]);
   var wrapperClassName = " ".concat(isPopupTrayOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
   (0, _react.useLayoutEffect)(function () {
     var _updatePopper$current;
@@ -343,10 +366,10 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
     onClose = props.onClose,
     children = props.children,
     popperModifiers = props.popperModifiers;
-  var _useState11 = (0, _react.useState)(null),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    popupRef = _useState12[0],
-    setPopupRef = _useState12[1];
+  var _useState13 = (0, _react.useState)(null),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    popupRef = _useState14[0],
+    setPopupRef = _useState14[1];
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   /**

package/dist/cjs/components/ReactionSummaryView.js

@@ -80,8 +80,12 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     setIsSummaryViewButtonHovered = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isEmojiPickerOpen = _useState6[0],
-    setIsEmojiPickerOpen = _useState6[1];
+    isSummaryViewButtonClicked = _useState6[0],
+    setIsSummaryViewButtonClicked = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isEmojiPickerOpen = _useState8[0],
+    setIsEmojiPickerOpen = _useState8[1];
 
   /**
    * Event callback when the picker is closed
@@ -111,9 +115,12 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     close(item.id);
   }, [onSelection, close]);
   var handlePopupClose = (0, _react.useCallback)(function () {
-    setSummaryPopupOpen(false);
+    setSummaryPopupOpen(false, true);
     setIsEmojiPickerOpen(false);
-  }, [setSummaryPopupOpen]);
+    setIsSummaryViewButtonClicked(false);
+    setIsSummaryViewButtonHovered(false);
+    setIsHoveringSummaryView(false);
+  }, [setSummaryPopupOpen, setIsEmojiPickerOpen, setIsSummaryViewButtonClicked, setIsSummaryViewButtonHovered, setIsHoveringSummaryView]);
   var openEmojiPicker = (0, _react.useCallback)(function () {
     // ufo start reactions picker open experience
     _ufo.PickerRender.start();
@@ -125,15 +132,31 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
   var handleEmojiPickerTriggerClick = (0, _react.useCallback)(function () {
     openEmojiPicker();
     setSummaryPopupOpen(false, true);
+    setIsSummaryViewButtonClicked(false);
+    setIsSummaryViewButtonHovered(false);
+    setIsHoveringSummaryView(false);
   }, [openEmojiPicker, setSummaryPopupOpen]);
   var handleSummaryClick = (0, _react.useCallback)(function () {
     if (hoverableSummaryView) {
-      if (isEmojiPickerOpen) {
-        setIsEmojiPickerOpen(false);
+      setIsHoveringSummaryView(false);
+      setIsSummaryViewButtonHovered(false);
+      if (isSummaryViewButtonClicked) {
+        // if the button was previously clicked, close the popup and reset the state
+        setSummaryPopupOpen(false, true);
+        setIsSummaryViewButtonClicked(false);
       } else {
-        openEmojiPicker();
+        if (isEmojiPickerOpen) {
+          // if the emoji picker is open, close the popup and reset the state
+          setSummaryPopupOpen(false, true);
+          setIsSummaryViewButtonClicked(false);
+        } else {
+          // if the button was not previously clicked, open the popup and set the state
+          setSummaryPopupOpen(true, true);
+          setIsSummaryViewButtonClicked(true);
+        }
       }
-      setSummaryPopupOpen(false);
+      // close the emoji picker
+      setIsEmojiPickerOpen(false);
     } else {
       if (isSummaryPopupOpen) {
         handlePopupClose();
@@ -141,7 +164,7 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         setSummaryPopupOpen(true);
       }
     }
-  }, [hoverableSummaryView, isEmojiPickerOpen, openEmojiPicker, setSummaryPopupOpen, isSummaryPopupOpen, handlePopupClose]);
+  }, [hoverableSummaryView, isEmojiPickerOpen, setSummaryPopupOpen, isSummaryPopupOpen, handlePopupClose, isSummaryViewButtonClicked, setIsSummaryViewButtonClicked]);
   var handleButtonMouseEnter = (0, _react.useCallback)(function () {
     setIsSummaryViewButtonHovered(true);
     if (hoverableSummaryView && !isEmojiPickerOpen) {
@@ -150,10 +173,10 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
   }, [hoverableSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isEmojiPickerOpen]);
   var handleButtonMouseLeave = (0, _react.useCallback)(function () {
     setIsSummaryViewButtonHovered(false);
-    if (hoverableSummaryView && !isHoveringSummaryView) {
+    if (hoverableSummaryView && !isHoveringSummaryView && !isSummaryViewButtonClicked) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered]);
+  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryViewButtonClicked]);
   var handleSummaryViewTrayMouseEnter = (0, _react.useCallback)(function () {
     setIsHoveringSummaryView(true);
     if (hoverableSummaryView && !isEmojiPickerOpen) {
@@ -162,10 +185,10 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
   }, [hoverableSummaryView, setSummaryPopupOpen, setIsHoveringSummaryView, isEmojiPickerOpen]);
   var handleSummaryViewTrayMouseLeave = (0, _react.useCallback)(function () {
     setIsHoveringSummaryView(false);
-    if (hoverableSummaryView && !isSummaryViewButtonHovered) {
+    if (hoverableSummaryView && !isSummaryViewButtonHovered && !isSummaryViewButtonClicked) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isSummaryViewButtonHovered, setIsHoveringSummaryView, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, isSummaryViewButtonHovered, setIsHoveringSummaryView, setSummaryPopupOpen, isSummaryViewButtonClicked]);
   return /*#__PURE__*/React.createElement(_popup.default, {
     placement: placement,
     content: function content() {

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

package/dist/es2019/components/ReactionPickerNew.js

@@ -71,6 +71,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
   const [isHoverableReactionPickerEmojiPickerOpen, setIsHoverableReactionPickerEmojiPickerOpen] = useState(false);
   const [isHoveringTrigger, setIsHoveringTrigger] = useState(false);
   const [isHoveringPopup, setIsHoveringPopup] = useState(false);
+  const [isTriggerClicked, setIsTriggerClicked] = useState(false);
   const [isPopupTrayOpen, setIsPopupTrayOpen] = useDelayedState(false, hoverableReactionPickerDelay);
 
   /**
@@ -125,7 +126,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
    * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
    */
   const close = useCallback(_id => {
-    setIsPopupTrayOpen(false);
+    setIsPopupTrayOpen(false, true);
     // ufo abort reaction experience
     PickerRender.abort({
       metadata: {
@@ -136,8 +137,11 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     });
     if (hoverableReactionPicker) {
       setIsHoverableReactionPickerEmojiPickerOpen(false);
+      setIsTriggerClicked(false);
+      setIsHoveringTrigger(false);
+      setIsHoveringPopup(false);
     }
-  }, [setIsPopupTrayOpen, setIsHoverableReactionPickerEmojiPickerOpen, hoverableReactionPicker]);
+  }, [setIsPopupTrayOpen, setIsHoverableReactionPickerEmojiPickerOpen, hoverableReactionPicker, setIsTriggerClicked, setIsHoveringTrigger, setIsHoveringPopup]);
 
   /**
    * Event handle rwhen selecting to show the custom emoji icons picker
@@ -152,6 +156,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     setIsPopupTrayOpen(true);
     if (hoverableReactionPicker) {
       setIsHoverableReactionPickerEmojiPickerOpen(!isHoverableReactionPickerEmojiPickerOpen);
+      setIsTriggerClicked(false);
     }
     onShowMore();
   }, [settings.showFullPicker, setIsPopupTrayOpen, onShowMore, popperPlacement, hoverableReactionPicker, setIsHoverableReactionPickerEmojiPickerOpen, isHoverableReactionPickerEmojiPickerOpen]);
@@ -180,15 +185,30 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
       popperPlacement
     });
     if (hoverableReactionPicker) {
-      setIsHoverableReactionPickerEmojiPickerOpen(!isHoverableReactionPickerEmojiPickerOpen);
-      setIsPopupTrayOpen(!isHoverableReactionPickerEmojiPickerOpen || !isPopupTrayOpen);
+      if (isTriggerClicked) {
+        // if the button was previously clicked, close the popup and reset the state
+        setIsTriggerClicked(false);
+        setIsPopupTrayOpen(false, true);
+      } else {
+        if (isHoverableReactionPickerEmojiPickerOpen) {
+          // if the emoji picker is open, close the popup and reset the state
+          setIsTriggerClicked(false);
+          setIsPopupTrayOpen(false, true);
+        } else {
+          // if the button was not previously clicked, open the popup and set the state
+          setIsTriggerClicked(true);
+          setIsPopupTrayOpen(true, true);
+        }
+      }
+      // close the emoji picker
+      setIsHoverableReactionPickerEmojiPickerOpen(false);
     } else {
       setIsPopupTrayOpen(!isPopupTrayOpen);
     }
     onOpen();
     // ufo reactions picker opened success
     PickerRender.success();
-  }, [hoverableReactionPicker, isPopupTrayOpen, setIsPopupTrayOpen, isHoverableReactionPickerEmojiPickerOpen, onOpen, settings, popperPlacement]);
+  }, [hoverableReactionPicker, isPopupTrayOpen, setIsPopupTrayOpen, isTriggerClicked, setIsTriggerClicked, isHoverableReactionPickerEmojiPickerOpen, onOpen, settings, popperPlacement]);
   const handleTriggerMouseEnter = useCallback(() => {
     if (hoverableReactionPicker) {
       setIsHoveringTrigger(true);
@@ -200,11 +220,11 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
   const handleTriggerMouseLeave = useCallback(() => {
     if (hoverableReactionPicker) {
       setIsHoveringTrigger(false);
-      if (!isHoveringPopup && !isHoverableReactionPickerEmojiPickerOpen) {
+      if (!isHoveringPopup && !isHoverableReactionPickerEmojiPickerOpen && !isTriggerClicked) {
         setIsPopupTrayOpen(false);
       }
     }
-  }, [hoverableReactionPicker, isHoveringPopup, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  }, [hoverableReactionPicker, isHoveringPopup, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen, isTriggerClicked]);
   const handlePopupMouseEnter = useCallback(() => {
     if (hoverableReactionPicker) {
       setIsHoveringPopup(true);
@@ -216,11 +236,11 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
   const handlePopupMouseLeave = useCallback(() => {
     if (hoverableReactionPicker) {
       setIsHoveringPopup(false);
-      if (!isHoveringTrigger && !isHoverableReactionPickerEmojiPickerOpen) {
+      if (!isHoveringTrigger && !isHoverableReactionPickerEmojiPickerOpen && !isTriggerClicked) {
         setIsPopupTrayOpen(false);
       }
     }
-  }, [hoverableReactionPicker, isHoveringTrigger, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  }, [hoverableReactionPicker, isHoveringTrigger, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen, isTriggerClicked]);
   const wrapperClassName = ` ${isPopupTrayOpen ? 'isOpen' : ''} ${miniMode ? 'miniMode' : ''} ${className}`;
   useLayoutEffect(() => {
     var _updatePopper$current;

package/dist/es2019/components/ReactionSummaryView.js

@@ -50,6 +50,7 @@ export const ReactionSummaryView = ({
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useDelayedState(false, hoverableSummaryViewDelay);
   const [isHoveringSummaryView, setIsHoveringSummaryView] = useState(false);
   const [isSummaryViewButtonHovered, setIsSummaryViewButtonHovered] = useState(false);
+  const [isSummaryViewButtonClicked, setIsSummaryViewButtonClicked] = useState(false);
   const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
 
   /**
@@ -80,9 +81,12 @@ export const ReactionSummaryView = ({
     close(item.id);
   }, [onSelection, close]);
   const handlePopupClose = useCallback(() => {
-    setSummaryPopupOpen(false);
+    setSummaryPopupOpen(false, true);
     setIsEmojiPickerOpen(false);
-  }, [setSummaryPopupOpen]);
+    setIsSummaryViewButtonClicked(false);
+    setIsSummaryViewButtonHovered(false);
+    setIsHoveringSummaryView(false);
+  }, [setSummaryPopupOpen, setIsEmojiPickerOpen, setIsSummaryViewButtonClicked, setIsSummaryViewButtonHovered, setIsHoveringSummaryView]);
   const openEmojiPicker = useCallback(() => {
     // ufo start reactions picker open experience
     PickerRender.start();
@@ -94,15 +98,31 @@ export const ReactionSummaryView = ({
   const handleEmojiPickerTriggerClick = useCallback(() => {
     openEmojiPicker();
     setSummaryPopupOpen(false, true);
+    setIsSummaryViewButtonClicked(false);
+    setIsSummaryViewButtonHovered(false);
+    setIsHoveringSummaryView(false);
   }, [openEmojiPicker, setSummaryPopupOpen]);
   const handleSummaryClick = useCallback(() => {
     if (hoverableSummaryView) {
-      if (isEmojiPickerOpen) {
-        setIsEmojiPickerOpen(false);
+      setIsHoveringSummaryView(false);
+      setIsSummaryViewButtonHovered(false);
+      if (isSummaryViewButtonClicked) {
+        // if the button was previously clicked, close the popup and reset the state
+        setSummaryPopupOpen(false, true);
+        setIsSummaryViewButtonClicked(false);
       } else {
-        openEmojiPicker();
+        if (isEmojiPickerOpen) {
+          // if the emoji picker is open, close the popup and reset the state
+          setSummaryPopupOpen(false, true);
+          setIsSummaryViewButtonClicked(false);
+        } else {
+          // if the button was not previously clicked, open the popup and set the state
+          setSummaryPopupOpen(true, true);
+          setIsSummaryViewButtonClicked(true);
+        }
       }
-      setSummaryPopupOpen(false);
+      // close the emoji picker
+      setIsEmojiPickerOpen(false);
     } else {
       if (isSummaryPopupOpen) {
         handlePopupClose();
@@ -110,7 +130,7 @@ export const ReactionSummaryView = ({
         setSummaryPopupOpen(true);
       }
     }
-  }, [hoverableSummaryView, isEmojiPickerOpen, openEmojiPicker, setSummaryPopupOpen, isSummaryPopupOpen, handlePopupClose]);
+  }, [hoverableSummaryView, isEmojiPickerOpen, setSummaryPopupOpen, isSummaryPopupOpen, handlePopupClose, isSummaryViewButtonClicked, setIsSummaryViewButtonClicked]);
   const handleButtonMouseEnter = useCallback(() => {
     setIsSummaryViewButtonHovered(true);
     if (hoverableSummaryView && !isEmojiPickerOpen) {
@@ -119,10 +139,10 @@ export const ReactionSummaryView = ({
   }, [hoverableSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isEmojiPickerOpen]);
   const handleButtonMouseLeave = useCallback(() => {
     setIsSummaryViewButtonHovered(false);
-    if (hoverableSummaryView && !isHoveringSummaryView) {
+    if (hoverableSummaryView && !isHoveringSummaryView && !isSummaryViewButtonClicked) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered]);
+  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryViewButtonClicked]);
   const handleSummaryViewTrayMouseEnter = useCallback(() => {
     setIsHoveringSummaryView(true);
     if (hoverableSummaryView && !isEmojiPickerOpen) {
@@ -131,10 +151,10 @@ export const ReactionSummaryView = ({
   }, [hoverableSummaryView, setSummaryPopupOpen, setIsHoveringSummaryView, isEmojiPickerOpen]);
   const handleSummaryViewTrayMouseLeave = useCallback(() => {
     setIsHoveringSummaryView(false);
-    if (hoverableSummaryView && !isSummaryViewButtonHovered) {
+    if (hoverableSummaryView && !isSummaryViewButtonHovered && !isSummaryViewButtonClicked) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isSummaryViewButtonHovered, setIsHoveringSummaryView, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, isSummaryViewButtonHovered, setIsHoveringSummaryView, setSummaryPopupOpen, isSummaryViewButtonClicked]);
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
     content: () => isEmojiPickerOpen ? /*#__PURE__*/React.createElement(EmojiPicker, {

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

package/dist/esm/components/ReactionPickerNew.js

@@ -96,6 +96,10 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     _useState8 = _slicedToArray(_useState7, 2),
     isHoveringPopup = _useState8[0],
     setIsHoveringPopup = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isTriggerClicked = _useState10[0],
+    setIsTriggerClicked = _useState10[1];
   var _useDelayedState = useDelayedState(false, hoverableReactionPickerDelay),
     _useDelayedState2 = _slicedToArray(_useDelayedState, 2),
     isPopupTrayOpen = _useDelayedState2[0],
@@ -136,7 +140,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
   }, reactionsPickerPreventOverflowOptions && {
     options: reactionsPickerPreventOverflowOptions
   })];
-  var _useState9 = useState({
+  var _useState11 = useState({
       /**
        * Show the full custom emoji list picker or the default list of emojis
        */
@@ -146,16 +150,16 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
        */
       popperPlacement: popperPlacement
     }),
-    _useState10 = _slicedToArray(_useState9, 2),
-    settings = _useState10[0],
-    setSettings = _useState10[1];
+    _useState12 = _slicedToArray(_useState11, 2),
+    settings = _useState12[0],
+    setSettings = _useState12[1];
 
   /**
    * Event callback when the picker is closed
    * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
    */
   var close = useCallback(function (_id) {
-    setIsPopupTrayOpen(false);
+    setIsPopupTrayOpen(false, true);
     // ufo abort reaction experience
     PickerRender.abort({
       metadata: {
@@ -166,8 +170,11 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     });
     if (hoverableReactionPicker) {
       setIsHoverableReactionPickerEmojiPickerOpen(false);
+      setIsTriggerClicked(false);
+      setIsHoveringTrigger(false);
+      setIsHoveringPopup(false);
     }
-  }, [setIsPopupTrayOpen, setIsHoverableReactionPickerEmojiPickerOpen, hoverableReactionPicker]);
+  }, [setIsPopupTrayOpen, setIsHoverableReactionPickerEmojiPickerOpen, hoverableReactionPicker, setIsTriggerClicked, setIsHoveringTrigger, setIsHoveringPopup]);
 
   /**
    * Event handle rwhen selecting to show the custom emoji icons picker
@@ -182,6 +189,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     setIsPopupTrayOpen(true);
     if (hoverableReactionPicker) {
       setIsHoverableReactionPickerEmojiPickerOpen(!isHoverableReactionPickerEmojiPickerOpen);
+      setIsTriggerClicked(false);
     }
     onShowMore();
   }, [settings.showFullPicker, setIsPopupTrayOpen, onShowMore, popperPlacement, hoverableReactionPicker, setIsHoverableReactionPickerEmojiPickerOpen, isHoverableReactionPickerEmojiPickerOpen]);
@@ -209,15 +217,30 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       popperPlacement: popperPlacement
     }));
     if (hoverableReactionPicker) {
-      setIsHoverableReactionPickerEmojiPickerOpen(!isHoverableReactionPickerEmojiPickerOpen);
-      setIsPopupTrayOpen(!isHoverableReactionPickerEmojiPickerOpen || !isPopupTrayOpen);
+      if (isTriggerClicked) {
+        // if the button was previously clicked, close the popup and reset the state
+        setIsTriggerClicked(false);
+        setIsPopupTrayOpen(false, true);
+      } else {
+        if (isHoverableReactionPickerEmojiPickerOpen) {
+          // if the emoji picker is open, close the popup and reset the state
+          setIsTriggerClicked(false);
+          setIsPopupTrayOpen(false, true);
+        } else {
+          // if the button was not previously clicked, open the popup and set the state
+          setIsTriggerClicked(true);
+          setIsPopupTrayOpen(true, true);
+        }
+      }
+      // close the emoji picker
+      setIsHoverableReactionPickerEmojiPickerOpen(false);
     } else {
       setIsPopupTrayOpen(!isPopupTrayOpen);
     }
     onOpen();
     // ufo reactions picker opened success
     PickerRender.success();
-  }, [hoverableReactionPicker, isPopupTrayOpen, setIsPopupTrayOpen, isHoverableReactionPickerEmojiPickerOpen, onOpen, settings, popperPlacement]);
+  }, [hoverableReactionPicker, isPopupTrayOpen, setIsPopupTrayOpen, isTriggerClicked, setIsTriggerClicked, isHoverableReactionPickerEmojiPickerOpen, onOpen, settings, popperPlacement]);
   var handleTriggerMouseEnter = useCallback(function () {
     if (hoverableReactionPicker) {
       setIsHoveringTrigger(true);
@@ -229,11 +252,11 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
   var handleTriggerMouseLeave = useCallback(function () {
     if (hoverableReactionPicker) {
       setIsHoveringTrigger(false);
-      if (!isHoveringPopup && !isHoverableReactionPickerEmojiPickerOpen) {
+      if (!isHoveringPopup && !isHoverableReactionPickerEmojiPickerOpen && !isTriggerClicked) {
         setIsPopupTrayOpen(false);
       }
     }
-  }, [hoverableReactionPicker, isHoveringPopup, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  }, [hoverableReactionPicker, isHoveringPopup, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen, isTriggerClicked]);
   var handlePopupMouseEnter = useCallback(function () {
     if (hoverableReactionPicker) {
       setIsHoveringPopup(true);
@@ -245,11 +268,11 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
   var handlePopupMouseLeave = useCallback(function () {
     if (hoverableReactionPicker) {
       setIsHoveringPopup(false);
-      if (!isHoveringTrigger && !isHoverableReactionPickerEmojiPickerOpen) {
+      if (!isHoveringTrigger && !isHoverableReactionPickerEmojiPickerOpen && !isTriggerClicked) {
         setIsPopupTrayOpen(false);
       }
     }
-  }, [hoverableReactionPicker, isHoveringTrigger, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  }, [hoverableReactionPicker, isHoveringTrigger, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen, isTriggerClicked]);
   var wrapperClassName = " ".concat(isPopupTrayOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
   useLayoutEffect(function () {
     var _updatePopper$current;
@@ -333,10 +356,10 @@ export var PopperWrapper = function PopperWrapper(props) {
     onClose = props.onClose,
     children = props.children,
     popperModifiers = props.popperModifiers;
-  var _useState11 = useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    popupRef = _useState12[0],
-    setPopupRef = _useState12[1];
+  var _useState13 = useState(null),
+    _useState14 = _slicedToArray(_useState13, 2),
+    popupRef = _useState14[0],
+    setPopupRef = _useState14[1];
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   /**

package/dist/esm/components/ReactionSummaryView.js

@@ -70,8 +70,12 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     setIsSummaryViewButtonHovered = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    isEmojiPickerOpen = _useState6[0],
-    setIsEmojiPickerOpen = _useState6[1];
+    isSummaryViewButtonClicked = _useState6[0],
+    setIsSummaryViewButtonClicked = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isEmojiPickerOpen = _useState8[0],
+    setIsEmojiPickerOpen = _useState8[1];
 
   /**
    * Event callback when the picker is closed
@@ -101,9 +105,12 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     close(item.id);
   }, [onSelection, close]);
   var handlePopupClose = useCallback(function () {
-    setSummaryPopupOpen(false);
+    setSummaryPopupOpen(false, true);
     setIsEmojiPickerOpen(false);
-  }, [setSummaryPopupOpen]);
+    setIsSummaryViewButtonClicked(false);
+    setIsSummaryViewButtonHovered(false);
+    setIsHoveringSummaryView(false);
+  }, [setSummaryPopupOpen, setIsEmojiPickerOpen, setIsSummaryViewButtonClicked, setIsSummaryViewButtonHovered, setIsHoveringSummaryView]);
   var openEmojiPicker = useCallback(function () {
     // ufo start reactions picker open experience
     PickerRender.start();
@@ -115,15 +122,31 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
   var handleEmojiPickerTriggerClick = useCallback(function () {
     openEmojiPicker();
     setSummaryPopupOpen(false, true);
+    setIsSummaryViewButtonClicked(false);
+    setIsSummaryViewButtonHovered(false);
+    setIsHoveringSummaryView(false);
   }, [openEmojiPicker, setSummaryPopupOpen]);
   var handleSummaryClick = useCallback(function () {
     if (hoverableSummaryView) {
-      if (isEmojiPickerOpen) {
-        setIsEmojiPickerOpen(false);
+      setIsHoveringSummaryView(false);
+      setIsSummaryViewButtonHovered(false);
+      if (isSummaryViewButtonClicked) {
+        // if the button was previously clicked, close the popup and reset the state
+        setSummaryPopupOpen(false, true);
+        setIsSummaryViewButtonClicked(false);
       } else {
-        openEmojiPicker();
+        if (isEmojiPickerOpen) {
+          // if the emoji picker is open, close the popup and reset the state
+          setSummaryPopupOpen(false, true);
+          setIsSummaryViewButtonClicked(false);
+        } else {
+          // if the button was not previously clicked, open the popup and set the state
+          setSummaryPopupOpen(true, true);
+          setIsSummaryViewButtonClicked(true);
+        }
       }
-      setSummaryPopupOpen(false);
+      // close the emoji picker
+      setIsEmojiPickerOpen(false);
     } else {
       if (isSummaryPopupOpen) {
         handlePopupClose();
@@ -131,7 +154,7 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         setSummaryPopupOpen(true);
       }
     }
-  }, [hoverableSummaryView, isEmojiPickerOpen, openEmojiPicker, setSummaryPopupOpen, isSummaryPopupOpen, handlePopupClose]);
+  }, [hoverableSummaryView, isEmojiPickerOpen, setSummaryPopupOpen, isSummaryPopupOpen, handlePopupClose, isSummaryViewButtonClicked, setIsSummaryViewButtonClicked]);
   var handleButtonMouseEnter = useCallback(function () {
     setIsSummaryViewButtonHovered(true);
     if (hoverableSummaryView && !isEmojiPickerOpen) {
@@ -140,10 +163,10 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
   }, [hoverableSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isEmojiPickerOpen]);
   var handleButtonMouseLeave = useCallback(function () {
     setIsSummaryViewButtonHovered(false);
-    if (hoverableSummaryView && !isHoveringSummaryView) {
+    if (hoverableSummaryView && !isHoveringSummaryView && !isSummaryViewButtonClicked) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered]);
+  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryViewButtonClicked]);
   var handleSummaryViewTrayMouseEnter = useCallback(function () {
     setIsHoveringSummaryView(true);
     if (hoverableSummaryView && !isEmojiPickerOpen) {
@@ -152,10 +175,10 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
   }, [hoverableSummaryView, setSummaryPopupOpen, setIsHoveringSummaryView, isEmojiPickerOpen]);
   var handleSummaryViewTrayMouseLeave = useCallback(function () {
     setIsHoveringSummaryView(false);
-    if (hoverableSummaryView && !isSummaryViewButtonHovered) {
+    if (hoverableSummaryView && !isSummaryViewButtonHovered && !isSummaryViewButtonClicked) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isSummaryViewButtonHovered, setIsHoveringSummaryView, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, isSummaryViewButtonHovered, setIsHoveringSummaryView, setSummaryPopupOpen, isSummaryViewButtonClicked]);
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
     content: function content() {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "31.12.0",
+	"version": "31.13.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -49,7 +49,7 @@
 		"@atlaskit/popup": "^4.2.0",
 		"@atlaskit/portal": "^5.1.0",
 		"@atlaskit/primitives": "^14.7.0",
-		"@atlaskit/react-ufo": "^3.11.0",
+		"@atlaskit/react-ufo": "^3.12.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",