@atlaskit/reactions 31.5.2 → 31.6.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/reactions
 
+## 31.6.0
+
+### Minor Changes
+
+- [#147980](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/147980)
+  [`ee0f8520e320c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ee0f8520e320c) -
+  [ux] Adds a hoverable reaction picker mode for empty reactions state as part of byline reactions
+  changes
+
 ## 31.5.2
 
 ### 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.5.2";
+var packageVersion = "31.6.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -1,17 +1,29 @@
 
 ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
-._189eidpf{border-width:0}._12ji1r31{outline-color:currentColor}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._189ee4h9{border-width:var(--ds-border-width,1px)}
+._189eidpf{border-width:0}
+._1dqonqa1{border-style:solid}
+._1h6dmuej{border-color:var(--ds-border,#091e4224)}._12ji1r31{outline-color:currentColor}
 ._12y31o36{outline-width:medium}
 ._18u0ze3t{margin-left:var(--ds-space-0,0)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
 ._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1e0c1txw{display:flex}
 ._1qu2glyw{outline-style:none}
 ._2hwxze3t{margin-right:var(--ds-space-0,0)}
+._8hrz1nam{transform-origin:center center 0}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
 ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
 ._o7ksrkh3:hover{transition:transform .2s cubic-bezier(.23,1,.32,1)}
-._1llw1q5f:hover{transform:scale(1.33)}
+._1llw1q5f:hover{transform:scale(1.33)}
+._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}

package/dist/cjs/components/EmojiButton.js

@@ -13,11 +13,13 @@ var _reactIntlNext = require("react-intl-next");
 var _emoji = require("@atlaskit/emoji");
 var _i18n = require("../shared/i18n");
 var _utils = require("../shared/utils");
+var _constants = require("../shared/constants");
 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; }
 var styles = {
-  emojiButton: "_12ji1r31 _1qu2glyw _12y31o36 _2rkoglpi _189eidpf _1e0c1txw _bfhksm61 _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _o7ksrkh3 _1llw1q5f"
+  emojiButton: "_12ji1r31 _1qu2glyw _12y31o36 _2rkoglpi _189eidpf _1e0c1txw _bfhksm61 _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _o7ksrkh3 _1llw1q5f",
+  hoverableReactionPickerSelectorEmojiButton: "_12ji1r31 _1qu2glyw _12y31o36 _2rkoiti9 _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _8hrz1nam _ca0qv77o _u5f31b66 _n3td1b66 _19bv1b66 _bfhksm61 _syaz1gjq _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _irr3166n _1di61dty"
 };
 var RENDER_BUTTON_TESTID = exports.RENDER_BUTTON_TESTID = 'button-emoji-id';
 /**
@@ -26,7 +28,8 @@ var RENDER_BUTTON_TESTID = exports.RENDER_BUTTON_TESTID = 'button-emoji-id';
 var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
   var emojiId = _ref.emojiId,
     onClick = _ref.onClick,
-    emojiProvider = _ref.emojiProvider;
+    emojiProvider = _ref.emojiProvider,
+    hoverableReactionPickerSelectorEmoji = _ref.hoverableReactionPickerSelectorEmoji;
   var onButtonClick = function onButtonClick(event) {
     event.preventDefault();
     if (onClick && (0, _utils.isLeftClick)(event)) {
@@ -40,9 +43,10 @@ var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
     "aria-label": intl.formatMessage(_i18n.messages.reactWithEmoji, {
       emoji: emojiId.shortName
     }),
-    xcss: styles.emojiButton
+    xcss: hoverableReactionPickerSelectorEmoji ? styles.hoverableReactionPickerSelectorEmojiButton : styles.emojiButton
   }, /*#__PURE__*/React.createElement(_emoji.ResourcedEmoji, {
     emojiProvider: emojiProvider,
-    emojiId: emojiId
+    emojiId: emojiId,
+    fitToHeight: hoverableReactionPickerSelectorEmoji ? _constants.RESOURCED_EMOJI_COMPACT_HEIGHT : undefined
   }));
 };

package/dist/cjs/components/Reaction.js

@@ -23,6 +23,7 @@ var _ReactionParticleEffect = require("./ReactionParticleEffect");
 var _ReactionTooltip = require("./ReactionTooltip");
 var _i18n = require("../shared/i18n");
 var _utils = require("../shared/utils");
+var _constants = require("../shared/constants");
 var _ReactionButton = require("./ReactionButton");
 var _StaticReaction = require("./StaticReaction");
 var _compiled = require("@atlaskit/primitives/compiled");
@@ -140,7 +141,7 @@ var Reaction = exports.Reaction = function Reaction(_ref) {
   }, /*#__PURE__*/React.createElement(_emoji.ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
-    fitToHeight: 16
+    fitToHeight: _constants.RESOURCED_EMOJI_COMPACT_HEIGHT
   })), /*#__PURE__*/React.createElement(_Counter.Counter, {
     value: reaction.count,
     highlight: !isViewOnly && reaction.reacted

package/dist/cjs/components/ReactionParticleEffect.js

@@ -13,6 +13,7 @@ var _runtime = require("@compiled/react/runtime");
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _emoji = require("@atlaskit/emoji");
 var _constants = require("@atlaskit/theme/constants");
+var _constants2 = require("../shared/constants");
 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; }
 var fade = null;
@@ -35,7 +36,7 @@ var ReactionParticleEffect = exports.ReactionParticleEffect = function ReactionP
     }, /*#__PURE__*/React.createElement(_emoji.ResourcedEmoji, {
       emojiProvider: emojiProvider,
       emojiId: emojiId,
-      fitToHeight: 16
+      fitToHeight: _constants2.RESOURCED_EMOJI_COMPACT_HEIGHT
     }));
   }));
 };

package/dist/cjs/components/ReactionPicker.js

@@ -16,22 +16,27 @@ var _reactIntlNext = require("react-intl-next");
 var _picker = require("@atlaskit/emoji/picker");
 var _popper = require("@atlaskit/popper");
 var _constants = require("@atlaskit/theme/constants");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _useCloseManager = require("../hooks/useCloseManager");
+var _useDelayedState3 = require("../hooks/useDelayedState");
 var _useFocusTrap = require("../hooks/useFocusTrap");
 var _i18n = require("../shared/i18n");
 var _ufo = require("../ufo");
 var _Selector = require("./Selector");
 var _Trigger = require("./Trigger");
-var _colors = require("@atlaskit/theme/colors");
 var _RepositionOnUpdate = require("./RepositionOnUpdate");
+var _colors = require("@atlaskit/theme/colors");
 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; }
 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 pickerStyle = null;
-var contentStyle = null;
 var popupWrapperStyle = null;
 var popupStyle = null;
+var additionalStyles = {
+  selectorContainer: "_1e0c1txw"
+};
+
 /**
  * Test id for wrapper ReactionPicker div
  */
@@ -79,11 +84,31 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     reactionPickerPlacement = props.reactionPickerPlacement,
     reactionsPickerPreventOverflowOptions = props.reactionsPickerPreventOverflowOptions,
     _props$isListItem = props.isListItem,
-    isListItem = _props$isListItem === void 0 ? false : _props$isListItem;
+    isListItem = _props$isListItem === void 0 ? false : _props$isListItem,
+    _props$hoverableReact = props.hoverableReactionPicker,
+    hoverableReactionPicker = _props$hoverableReact === void 0 ? false : _props$hoverableReact,
+    _props$hoverableReact2 = props.hoverableReactionPickerDelay,
+    hoverableReactionPickerDelay = _props$hoverableReact2 === void 0 ? 0 : _props$hoverableReact2;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isHoverableReactionPickerEmojiPickerOpen = _useState4[0],
+    setIsHoverableReactionPickerEmojiPickerOpen = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isHoveringTrigger = _useState6[0],
+    setIsHoveringTrigger = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    isHoveringPopup = _useState8[0],
+    setIsHoveringPopup = _useState8[1];
+  var _useDelayedState = (0, _useDelayedState3.useDelayedState)(false, hoverableReactionPickerDelay),
+    _useDelayedState2 = (0, _slicedToArray2.default)(_useDelayedState, 2),
+    isPopupTrayOpen = _useDelayedState2[0],
+    setIsPopupTrayOpen = _useDelayedState2[1];
 
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
@@ -120,11 +145,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
   }, reactionsPickerPreventOverflowOptions && {
     options: reactionsPickerPreventOverflowOptions
   })];
-  var _useState3 = (0, _react.useState)({
-      /**
-       * Show the picker floating panel
-       */
-      isOpen: false,
+  var _useState9 = (0, _react.useState)({
       /**
        * Show the full custom emoji list picker or the default list of emojis
        */
@@ -134,9 +155,9 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
        */
       popperPlacement: popperPlacement
     }),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    settings = _useState4[0],
-    setSettings = _useState4[1];
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    settings = _useState10[0],
+    setSettings = _useState10[1];
 
   /**
    * Custom hook triggers when user clicks outside the reactions picker
@@ -149,16 +170,14 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         return triggerRef.focus();
       });
     }
-  }, true, settings.isOpen);
+  }, true, isPopupTrayOpen);
 
   /**
    * 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) {
-    setSettings(_objectSpread(_objectSpread({}, settings), {}, {
-      isOpen: false
-    }));
+    setIsPopupTrayOpen(false);
     // ufo abort reaction experience
     _ufo.PickerRender.abort({
       metadata: {
@@ -167,7 +186,10 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         reason: 'close dialog'
       }
     });
-  }, [settings]);
+    if (hoverableReactionPicker) {
+      setIsHoverableReactionPickerEmojiPickerOpen(false);
+    }
+  }, [setIsPopupTrayOpen, setIsHoverableReactionPickerEmojiPickerOpen, hoverableReactionPicker]);
 
   /**
    * Event handle rwhen selecting to show the custom emoji icons picker
@@ -176,12 +198,15 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
   var onSelectMoreClick = (0, _react.useCallback)(function (e) {
     e.preventDefault();
     setSettings({
-      isOpen: true,
-      showFullPicker: true,
+      showFullPicker: hoverableReactionPicker ? settings.showFullPicker : true,
       popperPlacement: popperPlacement
     });
+    setIsPopupTrayOpen(true);
+    if (hoverableReactionPicker) {
+      setIsHoverableReactionPickerEmojiPickerOpen(!isHoverableReactionPickerEmojiPickerOpen);
+    }
     onShowMore();
-  }, [onShowMore, popperPlacement]);
+  }, [settings.showFullPicker, setIsPopupTrayOpen, onShowMore, popperPlacement, hoverableReactionPicker, setIsHoverableReactionPickerEmojiPickerOpen, isHoverableReactionPickerEmojiPickerOpen]);
 
   /**
    * Event callback when an emoji icon is selected
@@ -192,26 +217,62 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     if (!item.id) {
       return;
     }
-    onSelection(item.id, settings.showFullPicker ? 'emojiPicker' : 'quickSelector');
+    onSelection(item.id, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? 'emojiPicker' : 'quickSelector');
     close(item.id);
-  }, [close, onSelection, settings.showFullPicker]);
+  }, [close, onSelection, settings.showFullPicker, hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen]);
 
   /**
    * Event handler when the emoji icon to open the custom picker is selected
    */
-  var onTriggerClick = function onTriggerClick() {
+  var onTriggerClick = (0, _react.useCallback)(function () {
     // ufo start reactions picker open experience
     _ufo.PickerRender.start();
-    setSettings({
-      isOpen: !settings.isOpen,
-      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
+    setSettings(_objectSpread(_objectSpread({}, settings), {}, {
       popperPlacement: popperPlacement
-    });
+    }));
+    if (hoverableReactionPicker) {
+      setIsHoverableReactionPickerEmojiPickerOpen(!isHoverableReactionPickerEmojiPickerOpen);
+      setIsPopupTrayOpen(!isHoverableReactionPickerEmojiPickerOpen || !isPopupTrayOpen);
+    } else {
+      setIsPopupTrayOpen(!isPopupTrayOpen);
+    }
     onOpen();
     // ufo reactions picker opened success
     _ufo.PickerRender.success();
-  };
-  var wrapperClassName = " ".concat(settings.isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
+  }, [hoverableReactionPicker, isPopupTrayOpen, setIsPopupTrayOpen, isHoverableReactionPickerEmojiPickerOpen, onOpen, settings, popperPlacement]);
+  var handleTriggerMouseEnter = (0, _react.useCallback)(function () {
+    if (hoverableReactionPicker) {
+      setIsHoveringTrigger(true);
+      if (!isHoverableReactionPickerEmojiPickerOpen) {
+        setIsPopupTrayOpen(true);
+      }
+    }
+  }, [hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  var handleTriggerMouseLeave = (0, _react.useCallback)(function () {
+    if (hoverableReactionPicker) {
+      setIsHoveringTrigger(false);
+      if (!isHoveringPopup && !isHoverableReactionPickerEmojiPickerOpen) {
+        setIsPopupTrayOpen(false);
+      }
+    }
+  }, [hoverableReactionPicker, isHoveringPopup, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  var handlePopupMouseEnter = (0, _react.useCallback)(function () {
+    if (hoverableReactionPicker) {
+      setIsHoveringPopup(true);
+      if (!isHoverableReactionPickerEmojiPickerOpen) {
+        setIsPopupTrayOpen(true);
+      }
+    }
+  }, [hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  var handlePopupMouseLeave = (0, _react.useCallback)(function () {
+    if (hoverableReactionPicker) {
+      setIsHoveringPopup(false);
+      if (!isHoveringTrigger && !isHoverableReactionPickerEmojiPickerOpen) {
+        setIsPopupTrayOpen(false);
+      }
+    }
+  }, [hoverableReactionPicker, isHoveringTrigger, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  var wrapperClassName = " ".concat(isPopupTrayOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
   (0, _react.useLayoutEffect)(function () {
     var _updatePopper$current;
     (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 || _updatePopper$current.call(updatePopper);
@@ -226,13 +287,16 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     return (
       /*#__PURE__*/
       // Render a button to open the <Selector /> panel
-      _react.default.createElement(_Trigger.Trigger, {
+      _react.default.createElement(_compiled.Box, {
+        onMouseEnter: handleTriggerMouseEnter,
+        onMouseLeave: handleTriggerMouseLeave
+      }, /*#__PURE__*/_react.default.createElement(_Trigger.Trigger, {
         ariaAttributes: {
-          'aria-expanded': settings.isOpen,
+          'aria-expanded': isPopupTrayOpen,
           'aria-controls': PICKER_CONTROL_ID
         },
         ref: function ref(node) {
-          if (node && settings.isOpen) {
+          if (node && isPopupTrayOpen) {
             if (typeof _ref2 === 'function') {
               _ref2(node);
             } else {
@@ -241,11 +305,11 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
             setTriggerRef(node);
           }
         },
-        isSelected: settings.isOpen,
+        isSelected: isPopupTrayOpen,
         onClick: onTriggerClick,
         miniMode: miniMode,
         disabled: disabled,
-        tooltipContent: settings.isOpen ? null : tooltipContent,
+        tooltipContent: isPopupTrayOpen ? null : tooltipContent,
         showOpaqueBackground: showOpaqueBackground,
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
@@ -253,33 +317,38 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         reactionPickerTriggerIcon: reactionPickerTriggerIcon,
         reactionPickerTriggerText: reactionPickerTriggerText,
         isListItem: isListItem
-      })
+      }))
     );
-  }), settings.isOpen && /*#__PURE__*/_react.default.createElement(PopperWrapper, {
+  }), isPopupTrayOpen && /*#__PURE__*/_react.default.createElement(PopperWrapper, {
     settings: settings,
-    popperModifiers: popperModifiers
-  }, settings.showFullPicker ? /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
+    popperModifiers: popperModifiers,
+    isOpen: isPopupTrayOpen
+  }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
     emojiProvider: emojiProvider,
     onSelection: onEmojiSelected,
     size: emojiPickerSize
-  }) : /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)(["_1e0c1txw"])
+  }) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: additionalStyles.selectorContainer,
+    onMouseEnter: handlePopupMouseEnter,
+    onMouseLeave: handlePopupMouseLeave
   }, /*#__PURE__*/_react.default.createElement(_Selector.Selector, {
     emojiProvider: emojiProvider,
     onSelection: onEmojiSelected,
     showMore: allowAllEmojis,
     onMoreClick: onSelectMoreClick,
-    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    hoverableReactionPickerSelector: hoverableReactionPicker
   })))));
 });
 var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
   var settings = props.settings,
+    isOpen = props.isOpen,
     children = props.children,
     popperModifiers = props.popperModifiers;
-  var _useState5 = (0, _react.useState)(null),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    popupRef = _useState6[0],
-    setPopupRef = _useState6[1];
+  var _useState11 = (0, _react.useState)(null),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    popupRef = _useState12[0],
+    setPopupRef = _useState12[1];
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   /**
@@ -322,7 +391,8 @@ var PopperWrapper = exports.PopperWrapper = function PopperWrapper(props) {
       className: (0, _runtime.ax)(["_nt751r31 _49pcglyw _1hvw1o36"])
     }, /*#__PURE__*/_react.default.createElement(_RepositionOnUpdate.RepositionOnUpdate, {
       update: update,
-      settings: settings
+      settings: settings,
+      isOpen: isOpen
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: (0, _runtime.ax)(["_2rko1sit _bfhk13b4 _16qs1a23 _1bch1b66 _79pa1b66"]),
       style: {

package/dist/cjs/components/ReactionSummaryButton.js

@@ -15,6 +15,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _reactIntlNext = require("react-intl-next");
 var _emoji = require("@atlaskit/emoji");
 var _i18n = require("../shared/i18n");
+var _constants = require("../shared/constants");
 var _Counter = require("./Counter");
 var _ReactionButton = require("./ReactionButton");
 var _compiled = require("@atlaskit/primitives/compiled");
@@ -100,7 +101,7 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
         id: reaction.emojiId,
         shortName: ''
       },
-      fitToHeight: 16
+      fitToHeight: _constants.RESOURCED_EMOJI_COMPACT_HEIGHT
     }));
   })), /*#__PURE__*/React.createElement(_Counter.Counter, {
     value: totalReactionsCount,

package/dist/cjs/components/Reactions.js

@@ -355,7 +355,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     onOpen: handlePickerOpen,
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
-    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
+    tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
     emojiPickerSize: emojiPickerSize,
     miniMode: miniMode,
     showOpaqueBackground: showOpaqueBackground,
@@ -364,6 +364,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerTriggerText: reactionPickerTriggerText,
     isListItem: isListItem,
+    hoverableReactionPicker: hoverableSummaryView,
+    hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
     className: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
   }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/_react.default.createElement(_segment.default, {
     name: "reactions-dialog"

package/dist/cjs/components/ReactionsDialogHeader.js

@@ -30,6 +30,7 @@ var _element = require("@atlaskit/emoji/element");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _i18n = require("../shared/i18n");
 var _Counter = require("./Counter");
+var _constants = require("../shared/constants");
 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; }
 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; }
@@ -193,7 +194,7 @@ var ReactionsDialogHeader = exports.ReactionsDialogHeader = function ReactionsDi
     }, /*#__PURE__*/React.createElement(_element.ResourcedEmoji, {
       emojiProvider: emojiProvider,
       emojiId: emojiId,
-      fitToHeight: 16,
+      fitToHeight: _constants.RESOURCED_EMOJI_COMPACT_HEIGHT,
       showTooltip: true
     })), /*#__PURE__*/React.createElement(_compiled.Box, {
       xcss: styles.counterStyle

package/dist/cjs/components/RepositionOnUpdate.js

@@ -16,7 +16,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var RepositionOnUpdate = exports.RepositionOnUpdate = function RepositionOnUpdate(_ref) {
   var children = _ref.children,
     update = _ref.update,
-    settings = _ref.settings;
+    settings = _ref.settings,
+    isOpen = _ref.isOpen;
   // Ref used here to skip update on first render (when refs haven't been set)
   var isFirstRenderRef = (0, _react.useRef)(true);
   (0, _react.useLayoutEffect)(function () {
@@ -26,7 +27,7 @@ var RepositionOnUpdate = exports.RepositionOnUpdate = function RepositionOnUpdat
     }
     // callback function from popper that repositions pop-up on content Update
     update();
-  }, [update, settings]);
+  }, [update, settings, isOpen]);
 
   // wrapping in fragment to make TS happy (known issue with FC returning children)
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, children);

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

@@ -1,4 +1,5 @@
-._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1o8l{display:inline-block}
 ._1o51q7pw{animation-fill-mode:forwards}

package/dist/cjs/components/Selector.js

@@ -12,15 +12,18 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _i18n = require("../shared/i18n");
 var _constants = require("../shared/constants");
 var _EmojiButton = require("./EmojiButton");
 var _ShowMore = require("./ShowMore");
-var _compiled = require("@atlaskit/primitives/compiled");
+var _Trigger = require("./Trigger");
 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; }
 var styles = {
   container: "_ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
-  separator: "_t6vde4h9 _5wramuej _1p3lnqa1 _ahbq1b66 _12l2u2gc _4t3i1tcg _1e0c1o8l"
+  separator: "_t6vde4h9 _5wramuej _1p3lnqa1 _ahbq1b66 _12l2u2gc _4t3i1tcg _1e0c1o8l",
+  hoverableReactionPickerSelectorContainer: "_zulp1b66 _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"
 };
 var revealAnimation = null;
 var revealStyle = null;
@@ -47,7 +50,9 @@ var Selector = exports.Selector = function Selector(_ref2) {
     onSelection = _ref2.onSelection,
     showMore = _ref2.showMore,
     _ref2$pickerQuickReac = _ref2.pickerQuickReactionEmojiIds,
-    pickerQuickReactionEmojiIds = _ref2$pickerQuickReac === void 0 ? _constants.DefaultReactions : _ref2$pickerQuickReac;
+    pickerQuickReactionEmojiIds = _ref2$pickerQuickReac === void 0 ? _constants.DefaultReactions : _ref2$pickerQuickReac,
+    _ref2$hoverableReacti = _ref2.hoverableReactionPickerSelector,
+    hoverableReactionPickerSelector = _ref2$hoverableReacti === void 0 ? false : _ref2$hoverableReacti;
   /**
    * Render the default emoji icon
    * @param emoji emoji item
@@ -55,17 +60,33 @@ var Selector = exports.Selector = function Selector(_ref2) {
    */
   var renderEmoji = function renderEmoji(emoji, index) {
     var _emoji$id;
-    return /*#__PURE__*/React.createElement(Reveal, {
-      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
-      testId: RENDER_SELECTOR_TESTID
-    }, /*#__PURE__*/React.createElement(_tooltip.default, {
+    var emojiButtonAndTooltip = /*#__PURE__*/React.createElement(_tooltip.default, {
       content: emoji.shortName
     }, /*#__PURE__*/React.createElement(_EmojiButton.EmojiButton, {
       emojiId: emoji,
       emojiProvider: emojiProvider,
-      onClick: onSelection
-    })));
+      onClick: onSelection,
+      hoverableReactionPickerSelectorEmoji: hoverableReactionPickerSelector
+    }));
+    return hoverableReactionPickerSelector ? emojiButtonAndTooltip : /*#__PURE__*/React.createElement(Reveal, {
+      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
+      testId: RENDER_SELECTOR_TESTID
+    }, emojiButtonAndTooltip);
   };
+  if (hoverableReactionPickerSelector) {
+    return /*#__PURE__*/React.createElement(_compiled.Box, {
+      xcss: styles.hoverableReactionPickerSelectorContainer
+    }, /*#__PURE__*/React.createElement(_Trigger.Trigger, {
+      tooltipContent: _i18n.messages.addReaction.defaultMessage,
+      onClick: onMoreClick,
+      showAddReactionText: true,
+      reactionPickerTriggerText: _i18n.messages.addNewReaction.defaultMessage,
+      fullWidthSelectorTrayReactionPickerTrigger: true
+    }), /*#__PURE__*/React.createElement(_compiled.Inline, {
+      alignBlock: "center",
+      xcss: hoverableReactionPickerSelector ? styles.hoverableReactionPickerSelectorContainer : styles.container
+    }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null));
+  }
   return /*#__PURE__*/React.createElement(_compiled.Inline, {
     alignBlock: "center",
     xcss: styles.container

package/dist/cjs/components/Trigger.js

@@ -27,6 +27,7 @@ var styles = {
   disabledTrigger: "_1h6d13gt _bfhksyzs",
   miniMode: "_2rkoglpi _1dqoglyw _1ul91tcg _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66",
   fullWidthSummaryViewReactionPickerTrigger: "_1bsb1osq _ca0qu2gc _19bvu2gc _u5f3u2gc",
+  fullWidthSelectorTrayReactionPickerTrigger: "_1bsb1osq _ca0q1b66 _19bv1b66 _u5f31b66",
   fullWidth: "_1bsb1osq _p12f3xl8"
 };
 
@@ -76,7 +77,9 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react2.default.forwardRef(function
     _props$fullWidthSumma = props.fullWidthSummaryViewReactionPickerTrigger,
     fullWidthSummaryViewReactionPickerTrigger = _props$fullWidthSumma === void 0 ? false : _props$fullWidthSumma,
     _props$isListItem = props.isListItem,
-    isListItem = _props$isListItem === void 0 ? false : _props$isListItem;
+    isListItem = _props$isListItem === void 0 ? false : _props$isListItem,
+    _props$fullWidthSelec = props.fullWidthSelectorTrayReactionPickerTrigger,
+    fullWidthSelectorTrayReactionPickerTrigger = _props$fullWidthSelec === void 0 ? false : _props$fullWidthSelec;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -85,7 +88,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react2.default.forwardRef(function
   var renderPressableButton = function renderPressableButton() {
     return /*#__PURE__*/_react2.default.createElement(_compiled.Pressable, (0, _extends2.default)({
       testId: RENDER_TRIGGER_BUTTON_TESTID,
-      xcss: (0, _react.cx)(styles.trigger, fullWidthSummaryViewReactionPickerTrigger && styles.fullWidth, subtleReactionsSummaryAndPicker && styles.subtleTrigger, showAddReactionText && styles.expandedTrigger, disabled ? styles.disabledTrigger : showOpaqueBackground ? styles.opaqueEnabledTrigger : styles.transparentEnabledTrigger, miniMode && styles.miniMode,
+      xcss: (0, _react.cx)(styles.trigger, (fullWidthSummaryViewReactionPickerTrigger || fullWidthSelectorTrayReactionPickerTrigger) && styles.fullWidth, subtleReactionsSummaryAndPicker && styles.subtleTrigger, showAddReactionText && styles.expandedTrigger, disabled ? styles.disabledTrigger : showOpaqueBackground ? styles.opaqueEnabledTrigger : styles.transparentEnabledTrigger, miniMode && styles.miniMode,
       // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && styles.triggerStylesRefresh, showRoundTrigger && styles.roundTrigger),
       style: {
@@ -110,7 +113,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react2.default.forwardRef(function
     }, reactionPickerTriggerText));
   };
   return /*#__PURE__*/_react2.default.createElement(_compiled.Box, {
-    xcss: (0, _react.cx)(fullWidthSummaryViewReactionPickerTrigger && styles.fullWidthSummaryViewReactionPickerTrigger),
+    xcss: (0, _react.cx)(fullWidthSummaryViewReactionPickerTrigger && styles.fullWidthSummaryViewReactionPickerTrigger, fullWidthSelectorTrayReactionPickerTrigger && styles.fullWidthSelectorTrayReactionPickerTrigger),
     testId: RENDER_TRIGGER_CONTAINER_TESTID
   }, /*#__PURE__*/_react2.default.createElement(_tooltip.default, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,

package/dist/cjs/hooks/useDelayedState.js

@@ -25,7 +25,7 @@ var useDelayedState = exports.useDelayedState = function useDelayedState(initial
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
     }
-    if (immediate) {
+    if (immediate || delay === 0) {
       setState(newState);
     } else {
       timeoutRef.current = setTimeout(function () {