@atlaskit/reactions 31.3.1 → 31.5.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @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
+
+- [#144510](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144510)
+  [`9d23464afe923`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9d23464afe923) -
+  [ux] adding delay to opening/closing the summary view tray when hovering is enabled via the
+  hoverableSummaryView prop
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 31.3.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.3.1";
+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,9 +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; }
@@ -59,65 +62,118 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     useButtonAlignmentStyling = _ref.useButtonAlignmentStyling,
     reactionPickerTriggerText = _ref.reactionPickerTriggerText,
     _ref$hoverableSummary = _ref.hoverableSummaryView,
-    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary;
+    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary,
+    _ref$hoverableSummary2 = _ref.hoverableSummaryViewDelay,
+    hoverableSummaryViewDelay = _ref$hoverableSummary2 === void 0 ? 300 : _ref$hoverableSummary2;
+  var _useDelayedState = (0, _useDelayedState3.useDelayedState)(false, hoverableSummaryViewDelay),
+    _useDelayedState2 = (0, _slicedToArray2.default)(_useDelayedState, 2),
+    isSummaryPopupOpen = _useDelayedState2[0],
+    setSummaryPopupOpen = _useDelayedState2[1];
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isSummaryPopupOpen = _useState2[0],
-    setSummaryPopupOpen = _useState2[1];
+    isHoveringSummaryView = _useState2[0],
+    setIsHoveringSummaryView = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isHoveringSummaryView = _useState4[0],
-    setIsHoveringSummaryView = _useState4[1];
+    isSummaryViewButtonHovered = _useState4[0],
+    setIsSummaryViewButtonHovered = _useState4[1];
   var _useState5 = (0, _react.useState)(false),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isSummaryViewButtonHovered = _useState6[0],
-    setIsSummaryViewButtonHovered = _useState6[1];
+    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(false);
+    setIsSummaryButtonEmojiPickerOpen(false);
+  }, [setSummaryPopupOpen, setIsSummaryButtonEmojiPickerOpen]);
   var handleSummaryClick = (0, _react.useCallback)(function () {
-    return setSummaryPopupOpen(!isSummaryPopupOpen);
-  }, [isSummaryPopupOpen]);
+    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]);
+  }, [hoverableSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryButtonEmojiPickerOpen]);
   var handleButtonMouseLeave = (0, _react.useCallback)(function () {
     setIsSummaryViewButtonHovered(false);
-    if (hoverableSummaryView && !isHoveringSummaryView) {
+    if (hoverableSummaryView && !isHoveringSummaryView && !isSummaryViewTrayEmojiPickerOpen) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isHoveringSummaryView]);
+  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryViewTrayEmojiPickerOpen]);
   var handleSummaryViewTrayMouseEnter = (0, _react.useCallback)(function () {
     setIsHoveringSummaryView(true);
-    if (hoverableSummaryView) {
+    if (hoverableSummaryView && !isSummaryButtonEmojiPickerOpen) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView]);
+  }, [hoverableSummaryView, setSummaryPopupOpen, setIsHoveringSummaryView, isSummaryButtonEmojiPickerOpen]);
   var handleSummaryViewTrayMouseLeave = (0, _react.useCallback)(function () {
     setIsHoveringSummaryView(false);
-    if (hoverableSummaryView && !isSummaryViewButtonHovered) {
+    if (hoverableSummaryView && !isSummaryViewButtonHovered && !isSummaryViewTrayEmojiPickerOpen) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isSummaryViewButtonHovered]);
+  }, [hoverableSummaryView, isSummaryViewButtonHovered, setIsHoveringSummaryView, setSummaryPopupOpen, isSummaryViewTrayEmojiPickerOpen]);
   var handleEmojiSelection = (0, _react.useCallback)(function (emojiId, source) {
     onSelection(emojiId, source);
     if (hoverableSummaryView) {
-      setSummaryPopupOpen(false);
+      setSummaryPopupOpen(false, true);
     }
-  }, [onSelection, hoverableSummaryView]);
+  }, [onSelection, hoverableSummaryView, setSummaryPopupOpen]);
   return /*#__PURE__*/React.createElement(_popup.default, {
     placement: placement,
-    offset: hoverableSummaryView ? [0, 0] : undefined,
     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,
@@ -126,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",
@@ -148,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/hooks/useDelayedState.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDelayedState = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var useDelayedState = exports.useDelayedState = function useDelayedState(initialState, delay) {
+  var _useState = (0, _react.useState)(initialState),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var timeoutRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  var handleDelayedStateChange = (0, _react.useCallback)(function (newState) {
+    var immediate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    if (immediate) {
+      setState(newState);
+    } else {
+      timeoutRef.current = setTimeout(function () {
+        setState(newState);
+      }, delay);
+    }
+  }, [delay]);
+  return [state, handleDelayedStateChange];
+};

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.3.1";
+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,9 +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"
@@ -40,52 +43,102 @@ export const ReactionSummaryView = ({
   onOpen,
   useButtonAlignmentStyling,
   reactionPickerTriggerText,
-  hoverableSummaryView = false
+  hoverableSummaryView = false,
+  hoverableSummaryViewDelay = 300
 }) => {
-  const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
+  const [isSummaryPopupOpen, setSummaryPopupOpen] = useDelayedState(false, hoverableSummaryViewDelay);
   const [isHoveringSummaryView, setIsHoveringSummaryView] = useState(false);
   const [isSummaryViewButtonHovered, setIsSummaryViewButtonHovered] = useState(false);
-  const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
-  const handleSummaryClick = useCallback(() => setSummaryPopupOpen(!isSummaryPopupOpen), [isSummaryPopupOpen]);
+  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]);
+  }, [hoverableSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryButtonEmojiPickerOpen]);
   const handleButtonMouseLeave = useCallback(() => {
     setIsSummaryViewButtonHovered(false);
-    if (hoverableSummaryView && !isHoveringSummaryView) {
+    if (hoverableSummaryView && !isHoveringSummaryView && !isSummaryViewTrayEmojiPickerOpen) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isHoveringSummaryView]);
+  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryViewTrayEmojiPickerOpen]);
   const handleSummaryViewTrayMouseEnter = useCallback(() => {
     setIsHoveringSummaryView(true);
-    if (hoverableSummaryView) {
+    if (hoverableSummaryView && !isSummaryButtonEmojiPickerOpen) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView]);
+  }, [hoverableSummaryView, setSummaryPopupOpen, setIsHoveringSummaryView, isSummaryButtonEmojiPickerOpen]);
   const handleSummaryViewTrayMouseLeave = useCallback(() => {
     setIsHoveringSummaryView(false);
-    if (hoverableSummaryView && !isSummaryViewButtonHovered) {
+    if (hoverableSummaryView && !isSummaryViewButtonHovered && !isSummaryViewTrayEmojiPickerOpen) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isSummaryViewButtonHovered]);
+  }, [hoverableSummaryView, isSummaryViewButtonHovered, setIsHoveringSummaryView, setSummaryPopupOpen, isSummaryViewTrayEmojiPickerOpen]);
   const handleEmojiSelection = useCallback((emojiId, source) => {
     onSelection(emojiId, source);
     if (hoverableSummaryView) {
-      setSummaryPopupOpen(false);
+      setSummaryPopupOpen(false, true);
     }
-  }, [onSelection, hoverableSummaryView]);
+  }, [onSelection, hoverableSummaryView, setSummaryPopupOpen]);
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
-    offset: hoverableSummaryView ? [0, 0] : undefined,
-    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,
@@ -94,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",
@@ -113,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/hooks/useDelayedState.js

@@ -0,0 +1,25 @@
+import { useCallback, useRef, useEffect, useState } from 'react';
+export const useDelayedState = (initialState, delay) => {
+  const [state, setState] = useState(initialState);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const handleDelayedStateChange = useCallback((newState, immediate = false) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    if (immediate) {
+      setState(newState);
+    } else {
+      timeoutRef.current = setTimeout(() => {
+        setState(newState);
+      }, delay);
+    }
+  }, [delay]);
+  return [state, handleDelayedStateChange];
+};

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.3.1";
+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,9 +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"
@@ -49,65 +52,118 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     useButtonAlignmentStyling = _ref.useButtonAlignmentStyling,
     reactionPickerTriggerText = _ref.reactionPickerTriggerText,
     _ref$hoverableSummary = _ref.hoverableSummaryView,
-    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary;
+    hoverableSummaryView = _ref$hoverableSummary === void 0 ? false : _ref$hoverableSummary,
+    _ref$hoverableSummary2 = _ref.hoverableSummaryViewDelay,
+    hoverableSummaryViewDelay = _ref$hoverableSummary2 === void 0 ? 300 : _ref$hoverableSummary2;
+  var _useDelayedState = useDelayedState(false, hoverableSummaryViewDelay),
+    _useDelayedState2 = _slicedToArray(_useDelayedState, 2),
+    isSummaryPopupOpen = _useDelayedState2[0],
+    setSummaryPopupOpen = _useDelayedState2[1];
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    isSummaryPopupOpen = _useState2[0],
-    setSummaryPopupOpen = _useState2[1];
+    isHoveringSummaryView = _useState2[0],
+    setIsHoveringSummaryView = _useState2[1];
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    isHoveringSummaryView = _useState4[0],
-    setIsHoveringSummaryView = _useState4[1];
+    isSummaryViewButtonHovered = _useState4[0],
+    setIsSummaryViewButtonHovered = _useState4[1];
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    isSummaryViewButtonHovered = _useState6[0],
-    setIsSummaryViewButtonHovered = _useState6[1];
+    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(false);
+    setIsSummaryButtonEmojiPickerOpen(false);
+  }, [setSummaryPopupOpen, setIsSummaryButtonEmojiPickerOpen]);
   var handleSummaryClick = useCallback(function () {
-    return setSummaryPopupOpen(!isSummaryPopupOpen);
-  }, [isSummaryPopupOpen]);
+    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]);
+  }, [hoverableSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryButtonEmojiPickerOpen]);
   var handleButtonMouseLeave = useCallback(function () {
     setIsSummaryViewButtonHovered(false);
-    if (hoverableSummaryView && !isHoveringSummaryView) {
+    if (hoverableSummaryView && !isHoveringSummaryView && !isSummaryViewTrayEmojiPickerOpen) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isHoveringSummaryView]);
+  }, [hoverableSummaryView, isHoveringSummaryView, setSummaryPopupOpen, setIsSummaryViewButtonHovered, isSummaryViewTrayEmojiPickerOpen]);
   var handleSummaryViewTrayMouseEnter = useCallback(function () {
     setIsHoveringSummaryView(true);
-    if (hoverableSummaryView) {
+    if (hoverableSummaryView && !isSummaryButtonEmojiPickerOpen) {
       setSummaryPopupOpen(true);
     }
-  }, [hoverableSummaryView]);
+  }, [hoverableSummaryView, setSummaryPopupOpen, setIsHoveringSummaryView, isSummaryButtonEmojiPickerOpen]);
   var handleSummaryViewTrayMouseLeave = useCallback(function () {
     setIsHoveringSummaryView(false);
-    if (hoverableSummaryView && !isSummaryViewButtonHovered) {
+    if (hoverableSummaryView && !isSummaryViewButtonHovered && !isSummaryViewTrayEmojiPickerOpen) {
       setSummaryPopupOpen(false);
     }
-  }, [hoverableSummaryView, isSummaryViewButtonHovered]);
+  }, [hoverableSummaryView, isSummaryViewButtonHovered, setIsHoveringSummaryView, setSummaryPopupOpen, isSummaryViewTrayEmojiPickerOpen]);
   var handleEmojiSelection = useCallback(function (emojiId, source) {
     onSelection(emojiId, source);
     if (hoverableSummaryView) {
-      setSummaryPopupOpen(false);
+      setSummaryPopupOpen(false, true);
     }
-  }, [onSelection, hoverableSummaryView]);
+  }, [onSelection, hoverableSummaryView, setSummaryPopupOpen]);
   return /*#__PURE__*/React.createElement(Popup, {
     placement: placement,
-    offset: hoverableSummaryView ? [0, 0] : undefined,
     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,
@@ -116,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",
@@ -138,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/hooks/useDelayedState.js

@@ -0,0 +1,30 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useRef, useEffect, useState } from 'react';
+export var useDelayedState = function useDelayedState(initialState, delay) {
+  var _useState = useState(initialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var timeoutRef = useRef(null);
+  useEffect(function () {
+    return function () {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  var handleDelayedStateChange = useCallback(function (newState) {
+    var immediate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    if (immediate) {
+      setState(newState);
+    } else {
+      timeoutRef.current = setTimeout(function () {
+        setState(newState);
+      }, delay);
+    }
+  }, [delay]);
+  return [state, handleDelayedStateChange];
+};

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/ReactionSummaryView.d.ts

@@ -57,6 +57,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional prop to make the summary view open on hover
      */
     hoverableSummaryView?: boolean;
+    /**
+     * Optional prop to set a delay for the summary view when it opens/closes on hover
+     */
+    hoverableSummaryViewDelay?: number;
 }
-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 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, hoverableSummaryViewDelay, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

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/hooks/useDelayedState.d.ts

@@ -0,0 +1,3 @@
+type useDelayedStateResponse<T> = [T, (value: T, immediate?: boolean) => void];
+export declare const useDelayedState: <T>(initialState: T, delay: number) => useDelayedStateResponse<T>;
+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/ReactionSummaryView.d.ts

@@ -57,6 +57,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional prop to make the summary view open on hover
      */
     hoverableSummaryView?: boolean;
+    /**
+     * Optional prop to set a delay for the summary view when it opens/closes on hover
+     */
+    hoverableSummaryViewDelay?: number;
 }
-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 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, hoverableSummaryViewDelay, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

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/hooks/useDelayedState.d.ts

@@ -0,0 +1,6 @@
+type useDelayedStateResponse<T> = [
+    T,
+    (value: T, immediate?: boolean) => void
+];
+export declare const useDelayedState: <T>(initialState: T, delay: number) => useDelayedStateResponse<T>;
+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.3.1",
+	"version": "31.5.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
 		"@atlaskit/avatar": "^25.0.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/emoji": "^69.0.0",
+		"@atlaskit/emoji": "^69.1.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/modal-dialog": "^14.1.0",