@atlaskit/reactions 31.5.2 → 31.6.1

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 () {

package/dist/cjs/shared/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOOLTIP_USERS_LIMIT = exports.SAMPLING_RATE_REACTIONS_RENDERED_EXP = exports.NUMBER_OF_REACTIONS_TO_DISPLAY = exports.ExtendedReactionsByShortName = exports.ExtendedReactions = exports.DefaultReactionsByShortName = exports.DefaultReactions = void 0;
+exports.TOOLTIP_USERS_LIMIT = exports.SAMPLING_RATE_REACTIONS_RENDERED_EXP = exports.RESOURCED_EMOJI_COMPACT_HEIGHT = exports.NUMBER_OF_REACTIONS_TO_DISPLAY = exports.ExtendedReactionsByShortName = exports.ExtendedReactions = exports.DefaultReactionsByShortName = exports.DefaultReactions = void 0;
 /**
  * Initial list of emoji to pick from
  */
@@ -101,4 +101,7 @@ var TOOLTIP_USERS_LIMIT = exports.TOOLTIP_USERS_LIMIT = 5;
 var NUMBER_OF_REACTIONS_TO_DISPLAY = exports.NUMBER_OF_REACTIONS_TO_DISPLAY = 8;
 
 // This rate is used in fetching emoji resource
-var SAMPLING_RATE_REACTIONS_RENDERED_EXP = exports.SAMPLING_RATE_REACTIONS_RENDERED_EXP = 50;
+var SAMPLING_RATE_REACTIONS_RENDERED_EXP = exports.SAMPLING_RATE_REACTIONS_RENDERED_EXP = 50;
+
+// Reactions compact height value
+var RESOURCED_EMOJI_COMPACT_HEIGHT = exports.RESOURCED_EMOJI_COMPACT_HEIGHT = 16;

package/dist/cjs/shared/i18n.js

@@ -11,6 +11,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Add reaction',
     description: 'Message for add reaction button'
   },
+  addNewReaction: {
+    id: 'fabric.reactions.add.new',
+    defaultMessage: 'Add new',
+    description: 'Message for add new reaction button in hoverable reaction picker'
+  },
   loadingReactions: {
     id: 'fabric.reactions.loading',
     defaultMessage: 'Loading...',

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

package/dist/es2019/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/es2019/components/EmojiButton.js

@@ -6,9 +6,11 @@ import { useIntl } from 'react-intl-next';
 import { ResourcedEmoji } from '@atlaskit/emoji';
 import { messages } from '../shared/i18n';
 import { isLeftClick } from '../shared/utils';
+import { RESOURCED_EMOJI_COMPACT_HEIGHT } from '../shared/constants';
 import { Pressable } from '@atlaskit/primitives/compiled';
 const 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"
 };
 export const RENDER_BUTTON_TESTID = 'button-emoji-id';
 /**
@@ -17,7 +19,8 @@ export const RENDER_BUTTON_TESTID = 'button-emoji-id';
 export const EmojiButton = ({
   emojiId,
   onClick,
-  emojiProvider
+  emojiProvider,
+  hoverableReactionPickerSelectorEmoji
 }) => {
   const onButtonClick = event => {
     event.preventDefault();
@@ -32,9 +35,10 @@ export const EmojiButton = ({
     "aria-label": intl.formatMessage(messages.reactWithEmoji, {
       emoji: emojiId.shortName
     }),
-    xcss: styles.emojiButton
+    xcss: hoverableReactionPickerSelectorEmoji ? styles.hoverableReactionPickerSelectorEmojiButton : styles.emojiButton
   }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
     emojiProvider: emojiProvider,
-    emojiId: emojiId
+    emojiId: emojiId,
+    fitToHeight: hoverableReactionPickerSelectorEmoji ? RESOURCED_EMOJI_COMPACT_HEIGHT : undefined
   }));
 };

package/dist/es2019/components/Reaction.js

@@ -12,6 +12,7 @@ import { ReactionParticleEffect } from './ReactionParticleEffect';
 import { ReactionTooltip } from './ReactionTooltip';
 import { messages } from '../shared/i18n';
 import { isLeftClick } from '../shared/utils';
+import { RESOURCED_EMOJI_COMPACT_HEIGHT } from '../shared/constants';
 import { ReactionButton } from './ReactionButton';
 import { StaticReaction } from './StaticReaction';
 import { Box, Inline } from '@atlaskit/primitives/compiled';
@@ -106,7 +107,7 @@ export const Reaction = ({
   }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
-    fitToHeight: 16
+    fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT
   })), /*#__PURE__*/React.createElement(Counter, {
     value: reaction.count,
     highlight: !isViewOnly && reaction.reacted

package/dist/es2019/components/ReactionParticleEffect.compiled.css

@@ -1,5 +1,5 @@
 
-._y44vik89{animation:k102rpwx ease-in-out,k4txmy4 ease}._154iidpf{top:0}
+._y44v7u0o{animation:reaction-particle-fade ease-in-out,reaction-particle-float ease}._154iidpf{top:0}
 ._1lac188d:nth-child(3){animation-delay:.3s}
 ._1ltvftgi{left:8px}
 ._1ltvidpf{left:0}
@@ -14,6 +14,6 @@
 ._lcxvglyw{pointer-events:none}
 ._tzy4idpf{opacity:0}
 ._xg4k6ebc:nth-child(2){animation-delay:.15s}
-@keyframes k102rpwx{0%{opacity:0}20%{opacity:1}60%{opacity:1}to{opacity:0}}
-@keyframes k4txmy4{0%{transform:translateY(0) scale(1)}to{transform:translateY(-90pt) scale(1.7)}}
+@keyframes reaction-particle-fade{0%{opacity:0}20%{opacity:1}60%{opacity:1}to{opacity:0}}
+@keyframes reaction-particle-float{0%{transform:translateY(0) scale(1)}to{transform:translateY(-90pt) scale(1.7)}}
 @media (prefers-reduced-motion:reduce){._m602idpf{opacity:0}}

package/dist/es2019/components/ReactionParticleEffect.js

@@ -4,8 +4,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { ResourcedEmoji } from '@atlaskit/emoji';
 import { layers } from '@atlaskit/theme/constants';
-const fade = null;
-const float = null;
+import { RESOURCED_EMOJI_COMPACT_HEIGHT } from '../shared/constants';
 const containerStyle = null;
 const reactionParticleStyle = null;
 export const PARTICLE_COUNT = 4;
@@ -17,10 +16,10 @@ export const ReactionParticleEffect = ({
 }, [...Array(PARTICLE_COUNT)].map((_, index) => {
   return /*#__PURE__*/React.createElement("div", {
     key: index,
-    className: ax(["_y44vik89 _kqswstnw _154iidpf _1ltvidpf _lcxvglyw _tzy4idpf _5sagpwmj _1qen1lpd _xg4k6ebc _91vyftgi _1lac188d _jsy51n1a _7vm81dfm"])
+    className: ax(["_y44v7u0o _kqswstnw _154iidpf _1ltvidpf _lcxvglyw _tzy4idpf _5sagpwmj _1qen1lpd _xg4k6ebc _91vyftgi _1lac188d _jsy51n1a _7vm81dfm"])
   }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId,
-    fitToHeight: 16
+    fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT
   }));
 }));

package/dist/es2019/components/ReactionPicker.js

@@ -6,18 +6,22 @@ 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';
+import { Box } from '@atlaskit/primitives/compiled';
 import { useCloseManager } from '../hooks/useCloseManager';
+import { useDelayedState } from '../hooks/useDelayedState';
 import { useFocusTrap } from '../hooks/useFocusTrap';
 import { messages } from '../shared/i18n';
 import { PickerRender } from '../ufo';
 import { Selector } from './Selector';
 import { Trigger } from './Trigger';
+import { RepositionOnUpdate } from './RepositionOnUpdate';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 const pickerStyle = null;
-const contentStyle = null;
 const popupWrapperStyle = null;
 const popupStyle = null;
-import { RepositionOnUpdate } from './RepositionOnUpdate';
+const additionalStyles = {
+  selectorContainer: "_1e0c1txw"
+};
 
 /**
  * Test id for wrapper ReactionPicker div
@@ -58,9 +62,15 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     reactionPickerTriggerText,
     reactionPickerPlacement,
     reactionsPickerPreventOverflowOptions,
-    isListItem = false
+    isListItem = false,
+    hoverableReactionPicker = false,
+    hoverableReactionPickerDelay = 0
   } = props;
   const [triggerRef, setTriggerRef] = useState(null);
+  const [isHoverableReactionPickerEmojiPickerOpen, setIsHoverableReactionPickerEmojiPickerOpen] = useState(false);
+  const [isHoveringTrigger, setIsHoveringTrigger] = useState(false);
+  const [isHoveringPopup, setIsHoveringPopup] = useState(false);
+  const [isPopupTrayOpen, setIsPopupTrayOpen] = useDelayedState(false, hoverableReactionPickerDelay);
 
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
@@ -99,10 +109,6 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     })
   }];
   const [settings, setSettings] = useState({
-    /**
-     * Show the picker floating panel
-     */
-    isOpen: false,
     /**
      * Show the full custom emoji list picker or the default list of emojis
      */
@@ -122,17 +128,14 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     if (triggerRef && callbackType === 'ESCAPE') {
       requestAnimationFrame(() => 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
    */
   const close = useCallback(_id => {
-    setSettings({
-      ...settings,
-      isOpen: false
-    });
+    setIsPopupTrayOpen(false);
     // ufo abort reaction experience
     PickerRender.abort({
       metadata: {
@@ -141,7 +144,10 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
         reason: 'close dialog'
       }
     });
-  }, [settings]);
+    if (hoverableReactionPicker) {
+      setIsHoverableReactionPickerEmojiPickerOpen(false);
+    }
+  }, [setIsPopupTrayOpen, setIsHoverableReactionPickerEmojiPickerOpen, hoverableReactionPicker]);
 
   /**
    * Event handle rwhen selecting to show the custom emoji icons picker
@@ -150,12 +156,15 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
   const onSelectMoreClick = useCallback(e => {
     e.preventDefault();
     setSettings({
-      isOpen: true,
-      showFullPicker: true,
+      showFullPicker: hoverableReactionPicker ? settings.showFullPicker : true,
       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
@@ -166,26 +175,63 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     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
    */
-  const onTriggerClick = () => {
+  const onTriggerClick = useCallback(() => {
     // ufo start reactions picker open experience
     PickerRender.start();
     setSettings({
-      isOpen: !settings.isOpen,
-      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0,
+      ...settings,
       popperPlacement
     });
+    if (hoverableReactionPicker) {
+      setIsHoverableReactionPickerEmojiPickerOpen(!isHoverableReactionPickerEmojiPickerOpen);
+      setIsPopupTrayOpen(!isHoverableReactionPickerEmojiPickerOpen || !isPopupTrayOpen);
+    } else {
+      setIsPopupTrayOpen(!isPopupTrayOpen);
+    }
     onOpen();
     // ufo reactions picker opened success
     PickerRender.success();
-  };
-  const wrapperClassName = ` ${settings.isOpen ? 'isOpen' : ''} ${miniMode ? 'miniMode' : ''} ${className}`;
+  }, [hoverableReactionPicker, isPopupTrayOpen, setIsPopupTrayOpen, isHoverableReactionPickerEmojiPickerOpen, onOpen, settings, popperPlacement]);
+  const handleTriggerMouseEnter = useCallback(() => {
+    if (hoverableReactionPicker) {
+      setIsHoveringTrigger(true);
+      if (!isHoverableReactionPickerEmojiPickerOpen) {
+        setIsPopupTrayOpen(true);
+      }
+    }
+  }, [hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  const handleTriggerMouseLeave = useCallback(() => {
+    if (hoverableReactionPicker) {
+      setIsHoveringTrigger(false);
+      if (!isHoveringPopup && !isHoverableReactionPickerEmojiPickerOpen) {
+        setIsPopupTrayOpen(false);
+      }
+    }
+  }, [hoverableReactionPicker, isHoveringPopup, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  const handlePopupMouseEnter = useCallback(() => {
+    if (hoverableReactionPicker) {
+      setIsHoveringPopup(true);
+      if (!isHoverableReactionPickerEmojiPickerOpen) {
+        setIsPopupTrayOpen(true);
+      }
+    }
+  }, [hoverableReactionPicker, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  const handlePopupMouseLeave = useCallback(() => {
+    if (hoverableReactionPicker) {
+      setIsHoveringPopup(false);
+      if (!isHoveringTrigger && !isHoverableReactionPickerEmojiPickerOpen) {
+        setIsPopupTrayOpen(false);
+      }
+    }
+  }, [hoverableReactionPicker, isHoveringTrigger, isHoverableReactionPickerEmojiPickerOpen, setIsPopupTrayOpen]);
+  const wrapperClassName = ` ${isPopupTrayOpen ? 'isOpen' : ''} ${miniMode ? 'miniMode' : ''} ${className}`;
   useLayoutEffect(() => {
     var _updatePopper$current;
     (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 ? void 0 : _updatePopper$current.call(updatePopper);
@@ -200,13 +246,16 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
   }) =>
   /*#__PURE__*/
   // Render a button to open the <Selector /> panel
-  React.createElement(Trigger, {
+  React.createElement(Box, {
+    onMouseEnter: handleTriggerMouseEnter,
+    onMouseLeave: handleTriggerMouseLeave
+  }, /*#__PURE__*/React.createElement(Trigger, {
     ariaAttributes: {
-      'aria-expanded': settings.isOpen,
+      'aria-expanded': isPopupTrayOpen,
       'aria-controls': PICKER_CONTROL_ID
     },
     ref: node => {
-      if (node && settings.isOpen) {
+      if (node && isPopupTrayOpen) {
         if (typeof ref === 'function') {
           ref(node);
         } else {
@@ -215,11 +264,11 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
         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,
@@ -227,26 +276,31 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerTriggerText: reactionPickerTriggerText,
     isListItem: isListItem
-  })), settings.isOpen && /*#__PURE__*/React.createElement(PopperWrapper, {
+  }))), isPopupTrayOpen && /*#__PURE__*/React.createElement(PopperWrapper, {
     settings: settings,
-    popperModifiers: popperModifiers
-  }, settings.showFullPicker ? /*#__PURE__*/React.createElement(EmojiPicker, {
+    popperModifiers: popperModifiers,
+    isOpen: isPopupTrayOpen
+  }, settings.showFullPicker || hoverableReactionPicker && isHoverableReactionPickerEmojiPickerOpen ? /*#__PURE__*/React.createElement(EmojiPicker, {
     emojiProvider: emojiProvider,
     onSelection: onEmojiSelected,
     size: emojiPickerSize
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: ax(["_1e0c1txw"])
+  }) : /*#__PURE__*/React.createElement(Box, {
+    xcss: additionalStyles.selectorContainer,
+    onMouseEnter: handlePopupMouseEnter,
+    onMouseLeave: handlePopupMouseLeave
   }, /*#__PURE__*/React.createElement(Selector, {
     emojiProvider: emojiProvider,
     onSelection: onEmojiSelected,
     showMore: allowAllEmojis,
     onMoreClick: onSelectMoreClick,
-    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds
+    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+    hoverableReactionPickerSelector: hoverableReactionPicker
   })))));
 });
 export const PopperWrapper = props => {
   const {
     settings,
+    isOpen,
     children,
     popperModifiers
   } = props;
@@ -296,7 +350,8 @@ export const PopperWrapper = props => {
       className: ax(["_nt751r31 _49pcglyw _1hvw1o36"])
     }, /*#__PURE__*/React.createElement(RepositionOnUpdate, {
       update: update,
-      settings: settings
+      settings: settings,
+      isOpen: isOpen
     }, /*#__PURE__*/React.createElement("div", {
       className: ax(["_2rko1sit _bfhk1bhr _16qs1kf5 _1bch1b66 _79pa1b66"])
     }, children)));

package/dist/es2019/components/ReactionSummaryButton.js

@@ -6,6 +6,7 @@ import { forwardRef, useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
 import { ResourcedEmoji } from '@atlaskit/emoji';
 import { messages } from '../shared/i18n';
+import { RESOURCED_EMOJI_COMPACT_HEIGHT } from '../shared/constants';
 import { Counter } from './Counter';
 import { ReactionButton } from './ReactionButton';
 import { Box, Flex, Inline } from '@atlaskit/primitives/compiled';
@@ -80,7 +81,7 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
       id: reaction.emojiId,
       shortName: ''
     },
-    fitToHeight: 16
+    fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT
   })))), /*#__PURE__*/React.createElement(Counter, {
     value: totalReactionsCount,
     useDarkerFont: useButtonAlignmentStyling,

package/dist/es2019/components/Reactions.js

@@ -302,7 +302,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
     onOpen: handlePickerOpen,
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
-    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
+    tooltipContent: hoverableSummaryView ? null : getTooltip(status, errorMessage, reactionPickerTriggerTooltipContent),
     emojiPickerSize: emojiPickerSize,
     miniMode: miniMode,
     showOpaqueBackground: showOpaqueBackground,
@@ -311,6 +311,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerTriggerText: reactionPickerTriggerText,
     isListItem: isListItem,
+    hoverableReactionPicker: hoverableSummaryView,
+    hoverableReactionPickerDelay: hoverableSummaryView ? 300 : 0,
     className: ax(["_1e0c1o8l _19pk1b66"])
   }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
     name: "reactions-dialog"

package/dist/es2019/components/ReactionsDialogHeader.js

@@ -19,6 +19,7 @@ import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../shared/i18n';
 import { Counter } from './Counter';
+import { RESOURCED_EMOJI_COMPACT_HEIGHT } from '../shared/constants';
 const styles = {
   leftNavigationStyle: "_19pk1b66 _1wpzynz6 _19bvpxbi _n3tdutpp",
   rightNavigationStyle: "_19pk1b66 _1wpzynz6 _18u01wug _2hwxu2gc",
@@ -163,7 +164,7 @@ export const ReactionsDialogHeader = ({
     }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
       emojiProvider: emojiProvider,
       emojiId: emojiId,
-      fitToHeight: 16,
+      fitToHeight: RESOURCED_EMOJI_COMPACT_HEIGHT,
       showTooltip: true
     })), /*#__PURE__*/React.createElement(Box, {
       xcss: styles.counterStyle

package/dist/es2019/components/RepositionOnUpdate.js

@@ -6,7 +6,8 @@ import React, { Fragment, useLayoutEffect, useRef } from 'react';
 export const RepositionOnUpdate = ({
   children,
   update,
-  settings
+  settings,
+  isOpen
 }) => {
   // Ref used here to skip update on first render (when refs haven't been set)
   const isFirstRenderRef = useRef(true);
@@ -17,7 +18,7 @@ export const RepositionOnUpdate = ({
     }
     // 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.createElement(Fragment, null, children);

package/dist/es2019/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/es2019/components/Selector.js

@@ -4,13 +4,16 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
 import Tooltip from '@atlaskit/tooltip';
+import { Box, Inline } from '@atlaskit/primitives/compiled';
+import { messages } from '../shared/i18n';
 import { DefaultReactions } from '../shared/constants';
 import { EmojiButton } from './EmojiButton';
 import { ShowMore } from './ShowMore';
-import { Box, Inline } from '@atlaskit/primitives/compiled';
+import { Trigger } from './Trigger';
 const 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"
 };
 const revealAnimation = null;
 const revealStyle = null;
@@ -37,7 +40,8 @@ export const Selector = ({
   onMoreClick,
   onSelection,
   showMore,
-  pickerQuickReactionEmojiIds = DefaultReactions
+  pickerQuickReactionEmojiIds = DefaultReactions,
+  hoverableReactionPickerSelector = false
 }) => {
   /**
    * Render the default emoji icon
@@ -46,17 +50,33 @@ export const Selector = ({
    */
   const 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, {
+    const emojiButtonAndTooltip = /*#__PURE__*/React.createElement(Tooltip, {
       content: emoji.shortName
     }, /*#__PURE__*/React.createElement(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(Box, {
+      xcss: styles.hoverableReactionPickerSelectorContainer
+    }, /*#__PURE__*/React.createElement(Trigger, {
+      tooltipContent: messages.addReaction.defaultMessage,
+      onClick: onMoreClick,
+      showAddReactionText: true,
+      reactionPickerTriggerText: messages.addNewReaction.defaultMessage,
+      fullWidthSelectorTrayReactionPickerTrigger: true
+    }), /*#__PURE__*/React.createElement(Inline, {
+      alignBlock: "center",
+      xcss: hoverableReactionPickerSelector ? styles.hoverableReactionPickerSelectorContainer : styles.container
+    }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null));
+  }
   return /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     xcss: styles.container