@atlaskit/reactions 31.4.0 → 31.5.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/reactions
 
+## 31.5.0
+
+### Minor Changes
+
+- [#145160](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145160)
+  [`cab4c531afd63`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cab4c531afd63) -
+  [ux] Modifies the clicking behavior for the hoverable summary view feature
+
 ## 31.4.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.4.0";
+var packageVersion = "31.5.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/ReactionPicker.js

@@ -277,6 +277,8 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     popupRef = _useState6[0],
     setPopupRef = _useState6[1];
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   /**
    * add focus lock to popup
    */
@@ -293,6 +295,8 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
       style = _ref3.style,
       update = _ref3.update;
     return /*#__PURE__*/_react.default.createElement("div", {
+      role: "group",
+      "aria-label": formatMessage(_i18n.messages.popperWrapperLabel),
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

package/dist/cjs/components/ReactionSummaryView.js

@@ -14,10 +14,12 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+var _picker = require("@atlaskit/emoji/picker");
 var _useDelayedState3 = require("../hooks/useDelayedState");
 var _Reaction = require("./Reaction");
 var _ReactionSummaryViewEmojiPicker = require("./ReactionSummaryViewEmojiPicker");
 var _ReactionSummaryButton = require("./ReactionSummaryButton");
+var _ufo = require("../ufo");
 var _compiled = require("@atlaskit/primitives/compiled");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -75,36 +77,83 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     isSummaryViewButtonHovered = _useState4[0],
     setIsSummaryViewButtonHovered = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isSummaryButtonEmojiPickerOpen = _useState6[0],
+    setIsSummaryButtonEmojiPickerOpen = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isSummaryViewTrayEmojiPickerOpen = _useState8[0],
+    setIsSummaryViewTrayEmojiPickerOpen = _useState8[1];
+
+  /**
+   * Event callback when the picker is closed
+   * @param _id Optional id if an emoji button was selected or undefined if was clicked outside the picker
+   */
+  var close = (0, _react.useCallback)(function (_id) {
+    setIsSummaryButtonEmojiPickerOpen(false);
+    // ufo abort reaction experience
+    _ufo.PickerRender.abort({
+      metadata: {
+        emojiId: _id,
+        source: 'ReactionPicker',
+        reason: 'close dialog'
+      }
+    });
+  }, [setIsSummaryButtonEmojiPickerOpen]);
+  /**
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
+  var onEmojiSelected = (0, _react.useCallback)(function (item) {
+    // no emoji was selected
+    if (!item.id) {
+      return;
+    }
+    onSelection(item.id, 'emojiPicker');
+    close(item.id);
+  }, [onSelection, close]);
   var handlePopupClose = (0, _react.useCallback)(function () {
-    return setSummaryPopupOpen(false);
-  }, [setSummaryPopupOpen]);
+    setSummaryPopupOpen(false);
+    setIsSummaryButtonEmojiPickerOpen(false);
+  }, [setSummaryPopupOpen, setIsSummaryButtonEmojiPickerOpen]);
   var handleSummaryClick = (0, _react.useCallback)(function () {
-    return setSummaryPopupOpen(!isSummaryPopupOpen);
-  }, [isSummaryPopupOpen, setSummaryPopupOpen]);
+    if (hoverableSummaryView) {
+      // ufo start reactions picker open experience
+      _ufo.PickerRender.start();
+      onOpen && onOpen();
+      setSummaryPopupOpen(false);
+      // ufo reactions picker opened success
+      _ufo.PickerRender.success();
+    } else {
+      setSummaryPopupOpen(!isSummaryPopupOpen);
+    }
+    setIsSummaryButtonEmojiPickerOpen(!isSummaryButtonEmojiPickerOpen);
+  }, [isSummaryPopupOpen, onOpen, isSummaryButtonEmojiPickerOpen, hoverableSummaryView, setSummaryPopupOpen, setIsSummaryButtonEmojiPickerOpen]);
   var handleButtonMouseEnter = (0, _react.useCallback)(function () {
     setIsSummaryViewButtonHovered(true);
-    if (hoverableSummaryView) {
+    if (hoverableSummaryView && !isSummaryButtonEmojiPickerOpen) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryButtonEmojiPickerOpen]);
   var handleButtonMouseLeave = (0, _react.useCallback)(function () {
     setIsSummaryViewButtonHovered(false);
-    if (hoverableSummaryView && !isHoveringSummaryView) {
+    if (hoverableSummaryView && !isHoveringSummaryView && !isSummaryViewTrayEmojiPickerOpen) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryViewTrayEmojiPickerOpen]);
   var handleSummaryViewTrayMouseEnter = (0, _react.useCallback)(function () {
     setIsHoveringSummaryView(true);
-    if (hoverableSummaryView) {
+    if (hoverableSummaryView && !isSummaryButtonEmojiPickerOpen) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, setSummaryPopupOpen, setIsHoveringSummaryView, isSummaryButtonEmojiPickerOpen]);
   var handleSummaryViewTrayMouseLeave = (0, _react.useCallback)(function () {
     setIsHoveringSummaryView(false);
-    if (hoverableSummaryView && !isSummaryViewButtonHovered) {
+    if (hoverableSummaryView && !isSummaryViewButtonHovered && !isSummaryViewTrayEmojiPickerOpen) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isSummaryViewButtonHovered, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, isSummaryViewButtonHovered, setIsHoveringSummaryView, setSummaryPopupOpen, isSummaryViewTrayEmojiPickerOpen]);
   var handleEmojiSelection = (0, _react.useCallback)(function (emojiId, source) {
     onSelection(emojiId, source);
     if (hoverableSummaryView) {
@@ -114,12 +163,17 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
   return /*#__PURE__*/React.createElement(_popup.default, {
     placement: placement,
     content: function content() {
-      return /*#__PURE__*/React.createElement(_compiled.Box, {
+      return isSummaryButtonEmojiPickerOpen && hoverableSummaryView ? /*#__PURE__*/React.createElement(_picker.EmojiPicker, {
+        emojiProvider: emojiProvider,
+        onSelection: onEmojiSelected,
+        size: emojiPickerSize
+      }) : /*#__PURE__*/React.createElement(_compiled.Box, {
         testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
         onMouseEnter: handleSummaryViewTrayMouseEnter,
         onMouseLeave: handleSummaryViewTrayMouseLeave
       }, allowSelectFromSummaryView && /*#__PURE__*/React.createElement(_compiled.Flex, {
-        justifyContent: "center"
+        justifyContent: "center",
+        testId: "reaction-summary-view-emoji-picker-container"
       }, /*#__PURE__*/React.createElement(_ReactionSummaryViewEmojiPicker.ReactionSummaryViewEmojiPicker, {
         emojiProvider: emojiProvider,
         disabled: disabled,
@@ -128,7 +182,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         tooltipContent: tooltipContent,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
         reactionPickerTriggerText: reactionPickerTriggerText,
-        onOpen: onOpen
+        onOpen: onOpen,
+        setIsSummaryViewTrayEmojiPickerOpen: setIsSummaryViewTrayEmojiPickerOpen
       })), /*#__PURE__*/React.createElement(_compiled.Inline, {
         xcss: styles.summaryPopup,
         space: "space.025",
@@ -150,7 +205,7 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         });
       })));
     },
-    isOpen: isSummaryPopupOpen,
+    isOpen: isSummaryPopupOpen || isSummaryButtonEmojiPickerOpen,
     onClose: handlePopupClose,
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/React.createElement(_ReactionSummaryButton.ReactionSummaryButton, (0, _extends2.default)({}, triggerProps, {

package/dist/cjs/components/ReactionSummaryViewEmojiPicker.js

@@ -23,7 +23,8 @@ var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = fu
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
     tooltipContent = _ref.tooltipContent,
     onOpen = _ref.onOpen,
-    reactionPickerTriggerText = _ref.reactionPickerTriggerText;
+    reactionPickerTriggerText = _ref.reactionPickerTriggerText,
+    setIsSummaryViewTrayEmojiPickerOpen = _ref.setIsSummaryViewTrayEmojiPickerOpen;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
@@ -31,9 +32,9 @@ var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = fu
   var handleClick = function handleClick() {
     // ufo start reactions picker open experience
     _ufo.PickerRender.start();
-    setIsOpen(function (prevIsOpen) {
-      return !prevIsOpen;
-    });
+    var newIsOpen = !isOpen;
+    setIsOpen(newIsOpen);
+    setIsSummaryViewTrayEmojiPickerOpen && setIsSummaryViewTrayEmojiPickerOpen(newIsOpen);
     onOpen && onOpen();
 
     // ufo reactions picker opened success
@@ -46,6 +47,7 @@ var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = fu
    */
   var close = (0, _react.useCallback)(function (_id) {
     setIsOpen(false);
+    setIsSummaryViewTrayEmojiPickerOpen && setIsSummaryViewTrayEmojiPickerOpen(false);
     // ufo abort reaction experience
     _ufo.PickerRender.abort({
       metadata: {
@@ -54,7 +56,7 @@ var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = fu
         reason: 'close dialog'
       }
     });
-  }, [setIsOpen]);
+  }, [setIsOpen, setIsSummaryViewTrayEmojiPickerOpen]);
 
   /**
    * Event callback when an emoji icon is selected
@@ -72,7 +74,7 @@ var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = fu
     testId: "reaction-summary-view-emoji-picker",
     isOpen: isOpen,
     placement: "bottom-start",
-    offset: [-10, -66],
+    offset: [-10, -34],
     onClose: function onClose() {
       return close();
     },

package/dist/cjs/shared/i18n.js

@@ -75,5 +75,10 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'reactions.dialog.viewall.tooltip',
     defaultMessage: 'View all user reactions',
     description: 'Tooltip content of see who reacted link'
+  },
+  popperWrapperLabel: {
+    id: 'reactions-reaction.picker-label',
+    defaultMessage: 'Add reactions',
+    description: 'A label to the reaction picker group'
   }
 });

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

package/dist/es2019/components/ReactionPicker.js

@@ -2,7 +2,7 @@
 import "./ReactionPicker.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, useIntl } from 'react-intl-next';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { layers } from '@atlaskit/theme/constants';
@@ -249,6 +249,9 @@ export const PopperWrapper = props => {
     popperModifiers
   } = props;
   const [popupRef, setPopupRef] = useState(null);
+  const {
+    formatMessage
+  } = useIntl();
   /**
    * add focus lock to popup
    */
@@ -266,6 +269,8 @@ export const PopperWrapper = props => {
     update
   }) => {
     return /*#__PURE__*/React.createElement("div", {
+      role: "group",
+      "aria-label": formatMessage(messages.popperWrapperLabel),
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

package/dist/es2019/components/ReactionSummaryView.js

@@ -5,10 +5,12 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useState } from 'react';
 import Popup from '@atlaskit/popup';
+import { EmojiPicker } from '@atlaskit/emoji/picker';
 import { useDelayedState } from '../hooks/useDelayedState';
 import { Reaction } from './Reaction';
 import { ReactionSummaryViewEmojiPicker } from './ReactionSummaryViewEmojiPicker';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
+import { PickerRender } from '../ufo';
 import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
 const styles = {
   summaryPopup: "_ca0q1b66 _u5f3u2gc _n3tdu2gc _19bvu2gc _p12foiq5"
@@ -47,32 +49,77 @@ export const ReactionSummaryView = ({
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useDelayedState(false, hoverableSummaryViewDelay);
   const [isHoveringSummaryView, setIsHoveringSummaryView] = useState(false);
   const [isSummaryViewButtonHovered, setIsSummaryViewButtonHovered] = useState(false);
-  const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), [setSummaryPopupOpen]);
-  const handleSummaryClick = useCallback(() => setSummaryPopupOpen(!isSummaryPopupOpen), [isSummaryPopupOpen, setSummaryPopupOpen]);
+  const [isSummaryButtonEmojiPickerOpen, setIsSummaryButtonEmojiPickerOpen] = useState(false);
+  const [isSummaryViewTrayEmojiPickerOpen, setIsSummaryViewTrayEmojiPickerOpen] = useState(false);
+
+  /**
+   * Event callback when the picker is closed
+   * @param _id Optional id if an emoji button was selected or undefined if was clicked outside the picker
+   */
+  const close = useCallback(_id => {
+    setIsSummaryButtonEmojiPickerOpen(false);
+    // ufo abort reaction experience
+    PickerRender.abort({
+      metadata: {
+        emojiId: _id,
+        source: 'ReactionPicker',
+        reason: 'close dialog'
+      }
+    });
+  }, [setIsSummaryButtonEmojiPickerOpen]);
+  /**
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
+  const onEmojiSelected = useCallback(item => {
+    // no emoji was selected
+    if (!item.id) {
+      return;
+    }
+    onSelection(item.id, 'emojiPicker');
+    close(item.id);
+  }, [onSelection, close]);
+  const handlePopupClose = useCallback(() => {
+    setSummaryPopupOpen(false);
+    setIsSummaryButtonEmojiPickerOpen(false);
+  }, [setSummaryPopupOpen, setIsSummaryButtonEmojiPickerOpen]);
+  const handleSummaryClick = useCallback(() => {
+    if (hoverableSummaryView) {
+      // ufo start reactions picker open experience
+      PickerRender.start();
+      onOpen && onOpen();
+      setSummaryPopupOpen(false);
+      // ufo reactions picker opened success
+      PickerRender.success();
+    } else {
+      setSummaryPopupOpen(!isSummaryPopupOpen);
+    }
+    setIsSummaryButtonEmojiPickerOpen(!isSummaryButtonEmojiPickerOpen);
+  }, [isSummaryPopupOpen, onOpen, isSummaryButtonEmojiPickerOpen, hoverableSummaryView, setSummaryPopupOpen, setIsSummaryButtonEmojiPickerOpen]);
   const handleButtonMouseEnter = useCallback(() => {
     setIsSummaryViewButtonHovered(true);
-    if (hoverableSummaryView) {
+    if (hoverableSummaryView && !isSummaryButtonEmojiPickerOpen) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryButtonEmojiPickerOpen]);
   const handleButtonMouseLeave = useCallback(() => {
     setIsSummaryViewButtonHovered(false);
-    if (hoverableSummaryView && !isHoveringSummaryView) {
+    if (hoverableSummaryView && !isHoveringSummaryView && !isSummaryViewTrayEmojiPickerOpen) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryViewTrayEmojiPickerOpen]);
   const handleSummaryViewTrayMouseEnter = useCallback(() => {
     setIsHoveringSummaryView(true);
-    if (hoverableSummaryView) {
+    if (hoverableSummaryView && !isSummaryButtonEmojiPickerOpen) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, setSummaryPopupOpen, setIsHoveringSummaryView, isSummaryButtonEmojiPickerOpen]);
   const handleSummaryViewTrayMouseLeave = useCallback(() => {
     setIsHoveringSummaryView(false);
-    if (hoverableSummaryView && !isSummaryViewButtonHovered) {
+    if (hoverableSummaryView && !isSummaryViewButtonHovered && !isSummaryViewTrayEmojiPickerOpen) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isSummaryViewButtonHovered, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, isSummaryViewButtonHovered, setIsHoveringSummaryView, setSummaryPopupOpen, isSummaryViewTrayEmojiPickerOpen]);
   const handleEmojiSelection = useCallback((emojiId, source) => {
     onSelection(emojiId, source);
     if (hoverableSummaryView) {
@@ -81,12 +128,17 @@ export const ReactionSummaryView = ({
   }, [onSelection, hoverableSummaryView, setSummaryPopupOpen]);
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
-    content: () => /*#__PURE__*/React.createElement(Box, {
+    content: () => isSummaryButtonEmojiPickerOpen && hoverableSummaryView ? /*#__PURE__*/React.createElement(EmojiPicker, {
+      emojiProvider: emojiProvider,
+      onSelection: onEmojiSelected,
+      size: emojiPickerSize
+    }) : /*#__PURE__*/React.createElement(Box, {
       testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
       onMouseEnter: handleSummaryViewTrayMouseEnter,
       onMouseLeave: handleSummaryViewTrayMouseLeave
     }, allowSelectFromSummaryView && /*#__PURE__*/React.createElement(Flex, {
-      justifyContent: "center"
+      justifyContent: "center",
+      testId: "reaction-summary-view-emoji-picker-container"
     }, /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
       emojiProvider: emojiProvider,
       disabled: disabled,
@@ -95,7 +147,8 @@ export const ReactionSummaryView = ({
       tooltipContent: tooltipContent,
       reactionPickerTriggerIcon: reactionPickerTriggerIcon,
       reactionPickerTriggerText: reactionPickerTriggerText,
-      onOpen: onOpen
+      onOpen: onOpen,
+      setIsSummaryViewTrayEmojiPickerOpen: setIsSummaryViewTrayEmojiPickerOpen
     })), /*#__PURE__*/React.createElement(Inline, {
       xcss: styles.summaryPopup,
       space: "space.025",
@@ -114,7 +167,7 @@ export const ReactionSummaryView = ({
       handleOpenReactionsDialog: handleOpenReactionsDialog,
       isViewOnly: isViewOnly
     })))),
-    isOpen: isSummaryPopupOpen,
+    isOpen: isSummaryPopupOpen || isSummaryButtonEmojiPickerOpen,
     onClose: handlePopupClose,
     trigger: triggerProps => /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {
       emojiProvider: emojiProvider,

package/dist/es2019/components/ReactionSummaryViewEmojiPicker.js

@@ -12,13 +12,16 @@ export const ReactionSummaryViewEmojiPicker = ({
   reactionPickerTriggerIcon,
   tooltipContent,
   onOpen,
-  reactionPickerTriggerText
+  reactionPickerTriggerText,
+  setIsSummaryViewTrayEmojiPickerOpen
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const handleClick = () => {
     // ufo start reactions picker open experience
     PickerRender.start();
-    setIsOpen(prevIsOpen => !prevIsOpen);
+    const newIsOpen = !isOpen;
+    setIsOpen(newIsOpen);
+    setIsSummaryViewTrayEmojiPickerOpen && setIsSummaryViewTrayEmojiPickerOpen(newIsOpen);
     onOpen && onOpen();
 
     // ufo reactions picker opened success
@@ -31,6 +34,7 @@ export const ReactionSummaryViewEmojiPicker = ({
    */
   const close = useCallback(_id => {
     setIsOpen(false);
+    setIsSummaryViewTrayEmojiPickerOpen && setIsSummaryViewTrayEmojiPickerOpen(false);
     // ufo abort reaction experience
     PickerRender.abort({
       metadata: {
@@ -39,7 +43,7 @@ export const ReactionSummaryViewEmojiPicker = ({
         reason: 'close dialog'
       }
     });
-  }, [setIsOpen]);
+  }, [setIsOpen, setIsSummaryViewTrayEmojiPickerOpen]);
 
   /**
    * Event callback when an emoji icon is selected
@@ -57,7 +61,7 @@ export const ReactionSummaryViewEmojiPicker = ({
     testId: "reaction-summary-view-emoji-picker",
     isOpen: isOpen,
     placement: "bottom-start",
-    offset: [-10, -66],
+    offset: [-10, -34],
     onClose: () => close(),
     content: () => /*#__PURE__*/React.createElement(EmojiPicker, {
       emojiProvider: emojiProvider,

package/dist/es2019/shared/i18n.js

@@ -72,5 +72,10 @@ export const messages = defineMessages({
     id: 'reactions.dialog.viewall.tooltip',
     defaultMessage: 'View all user reactions',
     description: 'Tooltip content of see who reacted link'
+  },
+  popperWrapperLabel: {
+    id: 'reactions-reaction.picker-label',
+    defaultMessage: 'Add reactions',
+    description: 'A label to the reaction picker group'
   }
 });

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

package/dist/esm/components/ReactionPicker.js

@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 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) { _defineProperty(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; }
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, useIntl } from 'react-intl-next';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { layers } from '@atlaskit/theme/constants';
@@ -268,6 +268,8 @@ export var PopperWrapper = function PopperWrapper(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     popupRef = _useState6[0],
     setPopupRef = _useState6[1];
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   /**
    * add focus lock to popup
    */
@@ -284,6 +286,8 @@ export var PopperWrapper = function PopperWrapper(props) {
       style = _ref3.style,
       update = _ref3.update;
     return /*#__PURE__*/React.createElement("div", {
+      role: "group",
+      "aria-label": formatMessage(messages.popperWrapperLabel),
       id: PICKER_CONTROL_ID,
       "data-testid": RENDER_REACTIONPICKERPANEL_TESTID
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

package/dist/esm/components/ReactionSummaryView.js

@@ -6,10 +6,12 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useState } from 'react';
 import Popup from '@atlaskit/popup';
+import { EmojiPicker } from '@atlaskit/emoji/picker';
 import { useDelayedState } from '../hooks/useDelayedState';
 import { Reaction } from './Reaction';
 import { ReactionSummaryViewEmojiPicker } from './ReactionSummaryViewEmojiPicker';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
+import { PickerRender } from '../ufo';
 import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
 var styles = {
   summaryPopup: "_ca0q1b66 _u5f3u2gc _n3tdu2gc _19bvu2gc _p12foiq5"
@@ -65,36 +67,83 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isSummaryViewButtonHovered = _useState4[0],
     setIsSummaryViewButtonHovered = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isSummaryButtonEmojiPickerOpen = _useState6[0],
+    setIsSummaryButtonEmojiPickerOpen = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isSummaryViewTrayEmojiPickerOpen = _useState8[0],
+    setIsSummaryViewTrayEmojiPickerOpen = _useState8[1];
+
+  /**
+   * Event callback when the picker is closed
+   * @param _id Optional id if an emoji button was selected or undefined if was clicked outside the picker
+   */
+  var close = useCallback(function (_id) {
+    setIsSummaryButtonEmojiPickerOpen(false);
+    // ufo abort reaction experience
+    PickerRender.abort({
+      metadata: {
+        emojiId: _id,
+        source: 'ReactionPicker',
+        reason: 'close dialog'
+      }
+    });
+  }, [setIsSummaryButtonEmojiPickerOpen]);
+  /**
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
+  var onEmojiSelected = useCallback(function (item) {
+    // no emoji was selected
+    if (!item.id) {
+      return;
+    }
+    onSelection(item.id, 'emojiPicker');
+    close(item.id);
+  }, [onSelection, close]);
   var handlePopupClose = useCallback(function () {
-    return setSummaryPopupOpen(false);
-  }, [setSummaryPopupOpen]);
+    setSummaryPopupOpen(false);
+    setIsSummaryButtonEmojiPickerOpen(false);
+  }, [setSummaryPopupOpen, setIsSummaryButtonEmojiPickerOpen]);
   var handleSummaryClick = useCallback(function () {
-    return setSummaryPopupOpen(!isSummaryPopupOpen);
-  }, [isSummaryPopupOpen, setSummaryPopupOpen]);
+    if (hoverableSummaryView) {
+      // ufo start reactions picker open experience
+      PickerRender.start();
+      onOpen && onOpen();
+      setSummaryPopupOpen(false);
+      // ufo reactions picker opened success
+      PickerRender.success();
+    } else {
+      setSummaryPopupOpen(!isSummaryPopupOpen);
+    }
+    setIsSummaryButtonEmojiPickerOpen(!isSummaryButtonEmojiPickerOpen);
+  }, [isSummaryPopupOpen, onOpen, isSummaryButtonEmojiPickerOpen, hoverableSummaryView, setSummaryPopupOpen, setIsSummaryButtonEmojiPickerOpen]);
   var handleButtonMouseEnter = useCallback(function () {
     setIsSummaryViewButtonHovered(true);
-    if (hoverableSummaryView) {
+    if (hoverableSummaryView && !isSummaryButtonEmojiPickerOpen) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryButtonEmojiPickerOpen]);
   var handleButtonMouseLeave = useCallback(function () {
     setIsSummaryViewButtonHovered(false);
-    if (hoverableSummaryView && !isHoveringSummaryView) {
+    if (hoverableSummaryView && !isHoveringSummaryView && !isSummaryViewTrayEmojiPickerOpen) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryViewTrayEmojiPickerOpen]);
   var handleSummaryViewTrayMouseEnter = useCallback(function () {
     setIsHoveringSummaryView(true);
-    if (hoverableSummaryView) {
+    if (hoverableSummaryView && !isSummaryButtonEmojiPickerOpen) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, setSummaryPopupOpen, setIsHoveringSummaryView, isSummaryButtonEmojiPickerOpen]);
   var handleSummaryViewTrayMouseLeave = useCallback(function () {
     setIsHoveringSummaryView(false);
-    if (hoverableSummaryView && !isSummaryViewButtonHovered) {
+    if (hoverableSummaryView && !isSummaryViewButtonHovered && !isSummaryViewTrayEmojiPickerOpen) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isSummaryViewButtonHovered, setSummaryPopupOpen]);
+  }, [hoverableSummaryView, isSummaryViewButtonHovered, setIsHoveringSummaryView, setSummaryPopupOpen, isSummaryViewTrayEmojiPickerOpen]);
   var handleEmojiSelection = useCallback(function (emojiId, source) {
     onSelection(emojiId, source);
     if (hoverableSummaryView) {
@@ -104,12 +153,17 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
     content: function content() {
-      return /*#__PURE__*/React.createElement(Box, {
+      return isSummaryButtonEmojiPickerOpen && hoverableSummaryView ? /*#__PURE__*/React.createElement(EmojiPicker, {
+        emojiProvider: emojiProvider,
+        onSelection: onEmojiSelected,
+        size: emojiPickerSize
+      }) : /*#__PURE__*/React.createElement(Box, {
         testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
         onMouseEnter: handleSummaryViewTrayMouseEnter,
         onMouseLeave: handleSummaryViewTrayMouseLeave
       }, allowSelectFromSummaryView && /*#__PURE__*/React.createElement(Flex, {
-        justifyContent: "center"
+        justifyContent: "center",
+        testId: "reaction-summary-view-emoji-picker-container"
       }, /*#__PURE__*/React.createElement(ReactionSummaryViewEmojiPicker, {
         emojiProvider: emojiProvider,
         disabled: disabled,
@@ -118,7 +172,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         tooltipContent: tooltipContent,
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
         reactionPickerTriggerText: reactionPickerTriggerText,
-        onOpen: onOpen
+        onOpen: onOpen,
+        setIsSummaryViewTrayEmojiPickerOpen: setIsSummaryViewTrayEmojiPickerOpen
       })), /*#__PURE__*/React.createElement(Inline, {
         xcss: styles.summaryPopup,
         space: "space.025",
@@ -140,7 +195,7 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         });
       })));
     },
-    isOpen: isSummaryPopupOpen,
+    isOpen: isSummaryPopupOpen || isSummaryButtonEmojiPickerOpen,
     onClose: handlePopupClose,
     trigger: function trigger(triggerProps) {
       return /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {

package/dist/esm/components/ReactionSummaryViewEmojiPicker.js

@@ -13,7 +13,8 @@ export var ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPic
     reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon,
     tooltipContent = _ref.tooltipContent,
     onOpen = _ref.onOpen,
-    reactionPickerTriggerText = _ref.reactionPickerTriggerText;
+    reactionPickerTriggerText = _ref.reactionPickerTriggerText,
+    setIsSummaryViewTrayEmojiPickerOpen = _ref.setIsSummaryViewTrayEmojiPickerOpen;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -21,9 +22,9 @@ export var ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPic
   var handleClick = function handleClick() {
     // ufo start reactions picker open experience
     PickerRender.start();
-    setIsOpen(function (prevIsOpen) {
-      return !prevIsOpen;
-    });
+    var newIsOpen = !isOpen;
+    setIsOpen(newIsOpen);
+    setIsSummaryViewTrayEmojiPickerOpen && setIsSummaryViewTrayEmojiPickerOpen(newIsOpen);
     onOpen && onOpen();
 
     // ufo reactions picker opened success
@@ -36,6 +37,7 @@ export var ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPic
    */
   var close = useCallback(function (_id) {
     setIsOpen(false);
+    setIsSummaryViewTrayEmojiPickerOpen && setIsSummaryViewTrayEmojiPickerOpen(false);
     // ufo abort reaction experience
     PickerRender.abort({
       metadata: {
@@ -44,7 +46,7 @@ export var ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPic
         reason: 'close dialog'
       }
     });
-  }, [setIsOpen]);
+  }, [setIsOpen, setIsSummaryViewTrayEmojiPickerOpen]);
 
   /**
    * Event callback when an emoji icon is selected
@@ -62,7 +64,7 @@ export var ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPic
     testId: "reaction-summary-view-emoji-picker",
     isOpen: isOpen,
     placement: "bottom-start",
-    offset: [-10, -66],
+    offset: [-10, -34],
     onClose: function onClose() {
       return close();
     },

package/dist/esm/shared/i18n.js

@@ -69,5 +69,10 @@ export var messages = defineMessages({
     id: 'reactions.dialog.viewall.tooltip',
     defaultMessage: 'View all user reactions',
     description: 'Tooltip content of see who reacted link'
+  },
+  popperWrapperLabel: {
+    id: 'reactions-reaction.picker-label',
+    defaultMessage: 'Add reactions',
+    description: 'A label to the reaction picker group'
   }
 });

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type ReactionPickerProps } from './ReactionPicker';
 interface ReactionSummaryViewEmojiPickerProps extends ReactionPickerProps {
+    setIsSummaryViewTrayEmojiPickerOpen?: (isOpen: boolean) => void;
 }
-export declare const ReactionSummaryViewEmojiPicker: ({ emojiProvider, onSelection, emojiPickerSize, disabled, reactionPickerTriggerIcon, tooltipContent, onOpen, reactionPickerTriggerText, }: ReactionSummaryViewEmojiPickerProps) => React.JSX.Element;
+export declare const ReactionSummaryViewEmojiPicker: ({ emojiProvider, onSelection, emojiPickerSize, disabled, reactionPickerTriggerIcon, tooltipContent, onOpen, reactionPickerTriggerText, setIsSummaryViewTrayEmojiPickerOpen, }: ReactionSummaryViewEmojiPickerProps) => React.JSX.Element;
 export {};

package/dist/types/shared/i18n.d.ts

@@ -69,4 +69,9 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    popperWrapperLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type ReactionPickerProps } from './ReactionPicker';
 interface ReactionSummaryViewEmojiPickerProps extends ReactionPickerProps {
+    setIsSummaryViewTrayEmojiPickerOpen?: (isOpen: boolean) => void;
 }
-export declare const ReactionSummaryViewEmojiPicker: ({ emojiProvider, onSelection, emojiPickerSize, disabled, reactionPickerTriggerIcon, tooltipContent, onOpen, reactionPickerTriggerText, }: ReactionSummaryViewEmojiPickerProps) => React.JSX.Element;
+export declare const ReactionSummaryViewEmojiPicker: ({ emojiProvider, onSelection, emojiPickerSize, disabled, reactionPickerTriggerIcon, tooltipContent, onOpen, reactionPickerTriggerText, setIsSummaryViewTrayEmojiPickerOpen, }: ReactionSummaryViewEmojiPickerProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/shared/i18n.d.ts

@@ -69,4 +69,9 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    popperWrapperLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "31.4.0",
+	"version": "31.5.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"