@atlaskit/reactions 22.1.0 → 22.2.1

package/dist/esm/components/ReactionPicker/ReactionPicker.js

@@ -1,10 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /** @jsx jsx */
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
@@ -18,15 +15,15 @@ import { UFO } from '../../analytics';
 import { i18n } from '../../shared';
 import { useClickAway } from '../../hooks';
 import * as styles from './styles';
+
 /**
  * Test id for wrapper ReactionPicker div
  */
-
 export var RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
+
 /**
  * Emoji Picker Controller Id for Accessibility Labels
  */
-
 var PICKER_CONTROL_ID = 'emoji-picker';
 var popperModifiers = [
 /**
@@ -55,72 +52,66 @@ https://popper.js.org/docs/v1/#modifiers..applyStyle
   name: 'preventOverflow',
   enabled: true
 }];
-
 /**
  * Picker component for adding reactions
  */
 export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
   var miniMode = props.miniMode,
-      className = props.className,
-      emojiProvider = props.emojiProvider,
-      onSelection = props.onSelection,
-      allowAllEmojis = props.allowAllEmojis,
-      disabled = props.disabled,
-      pickerQuickReactionEmojiIds = props.pickerQuickReactionEmojiIds,
-      _props$onShowMore = props.onShowMore,
-      onShowMore = _props$onShowMore === void 0 ? function () {} : _props$onShowMore,
-      _props$onOpen = props.onOpen,
-      onOpen = _props$onOpen === void 0 ? function () {} : _props$onOpen,
-      _props$onCancel = props.onCancel,
-      onCancel = _props$onCancel === void 0 ? function () {} : _props$onCancel,
-      _props$tooltipContent = props.tooltipContent,
-      tooltipContent = _props$tooltipContent === void 0 ? jsx(FormattedMessage, i18n.messages.addReaction) : _props$tooltipContent,
-      emojiPickerSize = props.emojiPickerSize;
+    className = props.className,
+    emojiProvider = props.emojiProvider,
+    onSelection = props.onSelection,
+    allowAllEmojis = props.allowAllEmojis,
+    disabled = props.disabled,
+    pickerQuickReactionEmojiIds = props.pickerQuickReactionEmojiIds,
+    _props$onShowMore = props.onShowMore,
+    onShowMore = _props$onShowMore === void 0 ? function () {} : _props$onShowMore,
+    _props$onOpen = props.onOpen,
+    onOpen = _props$onOpen === void 0 ? function () {} : _props$onOpen,
+    _props$onCancel = props.onCancel,
+    onCancel = _props$onCancel === void 0 ? function () {} : _props$onCancel,
+    _props$tooltipContent = props.tooltipContent,
+    tooltipContent = _props$tooltipContent === void 0 ? jsx(FormattedMessage, i18n.messages.addReaction) : _props$tooltipContent,
+    emojiPickerSize = props.emojiPickerSize;
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
    */
-
   var wrapperRef = useRef(null);
   /**
    * a function you can ask Popper to recompute your tooltip's position. It will directly call the Popper#update method
    */
-
   var updatePopper = useRef();
-
   var _useState = useState({
-    /**
-     * Show the picker floating panel
-     */
-    isOpen: false,
+      /**
+       * Show the picker floating panel
+       */
+      isOpen: false,
+      /**
+       * Show the full custom emoji list picker or the default list of emojis
+       */
+      showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    settings = _useState2[0],
+    setSettings = _useState2[1];
 
-    /**
-     * Show the full custom emoji list picker or the default list of emojis
-     */
-    showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      settings = _useState2[0],
-      setSettings = _useState2[1];
   /**
    * Custom hook triggers when user clicks outside the reactions picker
    */
-
-
   useClickAway(wrapperRef, function () {
     onCancel();
     close();
-  }, 'click', true);
+  }, 'click', true, settings.isOpen);
+
   /**
    * Event callback when the picker is closed
    * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
    */
-
   var close = useCallback(function (_id) {
     setSettings({
       isOpen: false,
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
-    }); // ufo abort reaction experience
-
+    });
+    // ufo abort reaction experience
     UFO.PickerRender.abort({
       metadata: {
         emojiId: _id,
@@ -129,11 +120,11 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       }
     });
   }, [allowAllEmojis, pickerQuickReactionEmojiIds]);
+
   /**
    * Event handle rwhen selecting to show the custom emoji icons picker
    * @param e event param
    */
-
   var onSelectMoreClick = useCallback(function (e) {
     e.preventDefault();
     setSettings({
@@ -142,24 +133,23 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     });
     onShowMore();
   }, [onShowMore]);
+
   /**
    * 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, settings.showFullPicker ? 'emojiPicker' : 'quickSelector');
     close(item.id);
   }, [close, onSelection, settings.showFullPicker]);
+
   /**
    * Event handler when the emoji icon to open the custom picker is selected
    */
-
   var onTriggerClick = function onTriggerClick() {
     // ufo start reactions picker open experience
     UFO.PickerRender.start();
@@ -167,15 +157,14 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       isOpen: !settings.isOpen,
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
     });
-    onOpen(); // ufo reactions picker opened success
-
+    onOpen();
+    // ufo reactions picker opened success
     UFO.PickerRender.success();
   };
+
   /**
    * When picker is opened, re-calculate the picker position
    */
-
-
   useEffect(function () {
     if (settings.isOpen) {
       if (updatePopper.current) {
@@ -187,10 +176,12 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
   return jsx("div", {
     className: wrapperClassName,
     css: styles.pickerStyle,
-    "data-testid": RENDER_REACTIONPICKER_TESTID
+    "data-testid": RENDER_REACTIONPICKER_TESTID,
+    ref: wrapperRef
   }, jsx(Manager, null, jsx(Reference, null, function (_ref) {
     var popperRef = _ref.ref;
-    return (// Render a button to open the <Selector /> panel
+    return (
+      // Render a button to open the <Selector /> panel
       jsx(Trigger, {
         ariaAttributes: {
           'aria-expanded': settings.isOpen,
@@ -208,8 +199,8 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     modifiers: popperModifiers
   }, function (_ref2) {
     var ref = _ref2.ref,
-        style = _ref2.style,
-        update = _ref2.update;
+      style = _ref2.style,
+      update = _ref2.update;
     updatePopper.current = update;
     return jsx(Fragment, null, settings.isOpen && jsx("div", {
       id: PICKER_CONTROL_ID,
@@ -218,8 +209,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       }, style),
       ref: ref
     }, jsx("div", {
-      css: styles.popupStyle,
-      ref: wrapperRef
+      css: styles.popupStyle
     }, settings.showFullPicker ? jsx(EmojiPicker, {
       emojiProvider: emojiProvider,
       onSelection: onEmojiSelected,

package/dist/esm/components/ReactionTooltip/ReactionTooltip.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
@@ -7,27 +6,26 @@ import Tooltip from '@atlaskit/tooltip';
 import { FormattedMessage } from 'react-intl-next';
 import { constants, i18n } from '../../shared';
 import * as styles from './styles';
+
 /**
  * Test id for wrapper ReactionTooltip div
  */
-
 export var RENDER_REACTIONTOOLTIP_TESTID = 'render-reactionTooltip';
 export var ReactionTooltip = function ReactionTooltip(_ref) {
   var children = _ref.children,
-      emojiName = _ref.emojiName,
-      _ref$reaction = _ref.reaction,
-      _ref$reaction$users = _ref$reaction.users,
-      users = _ref$reaction$users === void 0 ? [] : _ref$reaction$users,
-      _ref$reaction$emojiId = _ref$reaction.emojiId,
-      emojiId = _ref$reaction$emojiId === void 0 ? '' : _ref$reaction$emojiId,
-      _ref$maxReactions = _ref.maxReactions,
-      maxReactions = _ref$maxReactions === void 0 ? constants.TOOLTIP_USERS_LIMIT : _ref$maxReactions,
-      handleUserListClick = _ref.handleUserListClick,
-      _ref$allowUserDialog = _ref.allowUserDialog,
-      allowUserDialog = _ref$allowUserDialog === void 0 ? false : _ref$allowUserDialog,
-      _ref$isEnabled = _ref.isEnabled,
-      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
-
+    emojiName = _ref.emojiName,
+    _ref$reaction = _ref.reaction,
+    _ref$reaction$users = _ref$reaction.users,
+    users = _ref$reaction$users === void 0 ? [] : _ref$reaction$users,
+    _ref$reaction$emojiId = _ref$reaction.emojiId,
+    emojiId = _ref$reaction$emojiId === void 0 ? '' : _ref$reaction$emojiId,
+    _ref$maxReactions = _ref.maxReactions,
+    maxReactions = _ref$maxReactions === void 0 ? constants.TOOLTIP_USERS_LIMIT : _ref$maxReactions,
+    handleUserListClick = _ref.handleUserListClick,
+    _ref$allowUserDialog = _ref.allowUserDialog,
+    allowUserDialog = _ref$allowUserDialog === void 0 ? false : _ref$allowUserDialog,
+    _ref$isEnabled = _ref.isEnabled,
+    isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
   /**
    * Render list of users in the tooltip box
    */

package/dist/esm/components/Reactions/Reactions.js

@@ -1,5 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /** @jsx jsx */
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
@@ -15,37 +14,33 @@ import { Reaction } from '../Reaction';
 import { ReactionsDialog } from '../ReactionDialog';
 import { ReactionPicker } from '../ReactionPicker';
 import * as styles from './styles';
+
 /**
  * Set of all available UFO experiences relating to reactions dialog
  */
-
 export var ufoExperiences = {
   /**
    * Expeirence when a reaction dialog is opened
    */
   openDialog: UFO.ReactionDialogOpened,
-
   /**
    * Experience when a reaction dialog is closed
    */
   closeDialog: UFO.ReactionDialogClosed,
-
   /**
    * Experience when a reaction changed/fetched from inside the modal dialog
    */
   selectedReactionChangeInsideDialog: UFO.ReactionDialogSelectedReactionChanged
 };
+
 /**
  * Test id for wrapper Reactions div
  */
-
 export var RENDER_REACTIONS_TESTID = 'render-reactions';
 /**
  * Test id for the view all reacted user to trigger the dialog
  */
-
 export var RENDER_VIEWALL_REACTED_USERS_DIALOG = 'viewall-reacted-users-dialog';
-
 /**
  * Get content of the tooltip
  */
@@ -54,60 +49,54 @@ export function getTooltip(status, errorMessage) {
     case ReactionStatus.error:
       return errorMessage || jsx(FormattedMessage, i18n.messages.unexpectedError);
     // When reaction is not available don't show any tooltip (e.g. Archive page in Confluence)
-
     case ReactionStatus.disabled:
       return null;
-
     case ReactionStatus.notLoaded:
     case ReactionStatus.loading:
       return jsx(FormattedMessage, i18n.messages.loadingReactions);
-
     case ReactionStatus.ready:
       return jsx(FormattedMessage, i18n.messages.addReaction);
   }
 }
+
 /**
  * Renders list of reactions
  */
-
 export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
   var _ref$flash = _ref.flash,
-      flash = _ref$flash === void 0 ? {} : _ref$flash,
-      status = _ref.status,
-      errorMessage = _ref.errorMessage,
-      loadReaction = _ref.loadReaction,
-      quickReactionEmojis = _ref.quickReactionEmojis,
-      pickerQuickReactionEmojiIds = _ref.pickerQuickReactionEmojiIds,
-      _ref$getReactionDetai = _ref.getReactionDetails,
-      getReactionDetails = _ref$getReactionDetai === void 0 ? function () {} : _ref$getReactionDetai,
-      _ref$onReactionHover = _ref.onReactionHover,
-      onReactionHover = _ref$onReactionHover === void 0 ? function () {} : _ref$onReactionHover,
-      onSelection = _ref.onSelection,
-      _ref$reactions = _ref.reactions,
-      reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
-      emojiProvider = _ref.emojiProvider,
-      allowAllEmojis = _ref.allowAllEmojis,
-      onReactionClick = _ref.onReactionClick,
-      allowUserDialog = _ref.allowUserDialog,
-      _ref$onDialogOpenCall = _ref.onDialogOpenCallback,
-      onDialogOpenCallback = _ref$onDialogOpenCall === void 0 ? function () {} : _ref$onDialogOpenCall,
-      _ref$onDialogCloseCal = _ref.onDialogCloseCallback,
-      onDialogCloseCallback = _ref$onDialogCloseCal === void 0 ? function () {} : _ref$onDialogCloseCal,
-      _ref$onDialogSelectRe = _ref.onDialogSelectReactionCallback,
-      onDialogSelectReactionCallback = _ref$onDialogSelectRe === void 0 ? function () {} : _ref$onDialogSelectRe,
-      _ref$emojiPickerSize = _ref.emojiPickerSize,
-      emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize,
-      _ref$miniMode = _ref.miniMode,
-      miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode;
-
+    flash = _ref$flash === void 0 ? {} : _ref$flash,
+    status = _ref.status,
+    errorMessage = _ref.errorMessage,
+    loadReaction = _ref.loadReaction,
+    quickReactionEmojis = _ref.quickReactionEmojis,
+    pickerQuickReactionEmojiIds = _ref.pickerQuickReactionEmojiIds,
+    _ref$getReactionDetai = _ref.getReactionDetails,
+    getReactionDetails = _ref$getReactionDetai === void 0 ? function () {} : _ref$getReactionDetai,
+    _ref$onReactionHover = _ref.onReactionHover,
+    onReactionHover = _ref$onReactionHover === void 0 ? function () {} : _ref$onReactionHover,
+    onSelection = _ref.onSelection,
+    _ref$reactions = _ref.reactions,
+    reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
+    emojiProvider = _ref.emojiProvider,
+    allowAllEmojis = _ref.allowAllEmojis,
+    onReactionClick = _ref.onReactionClick,
+    allowUserDialog = _ref.allowUserDialog,
+    _ref$onDialogOpenCall = _ref.onDialogOpenCallback,
+    onDialogOpenCallback = _ref$onDialogOpenCall === void 0 ? function () {} : _ref$onDialogOpenCall,
+    _ref$onDialogCloseCal = _ref.onDialogCloseCallback,
+    onDialogCloseCallback = _ref$onDialogCloseCal === void 0 ? function () {} : _ref$onDialogCloseCal,
+    _ref$onDialogSelectRe = _ref.onDialogSelectReactionCallback,
+    onDialogSelectReactionCallback = _ref$onDialogSelectRe === void 0 ? function () {} : _ref$onDialogSelectRe,
+    _ref$emojiPickerSize = _ref.emojiPickerSize,
+    emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize,
+    _ref$miniMode = _ref.miniMode,
+    miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode;
   var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedEmojiId = _useState2[0],
-      setSelectedEmojiId = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedEmojiId = _useState2[0],
+    setSelectedEmojiId = _useState2[1];
   var _useAnalyticsEvents = useAnalyticsEvents(),
-      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-
+    createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var openTime = useRef();
   var renderTime = useRef();
   useEffect(function () {
@@ -120,7 +109,6 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       renderTime.current = Date.now();
     } else {
       var _renderTime$current;
-
       Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionsRenderedEvent, (_renderTime$current = renderTime.current) !== null && _renderTime$current !== void 0 ? _renderTime$current : Date.now() //renderTime.current can be null during unit test cases
       );
       renderTime.current = undefined;
@@ -151,17 +139,18 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     openTime.current = undefined;
     onSelection(emojiId);
   }, [createAnalyticsEvent, onSelection, reactions]);
+
   /**
    * event handler to open selected reaction from tooltip
    * @param emojiId selected emoji id
    */
-
   var handleOpenReactionsDialog = function handleOpenReactionsDialog(emojiId) {
     // ufo start opening reaction dialog
     ufoExperiences.openDialog.start();
     setSelectedEmojiId(emojiId);
-    onDialogOpenCallback(emojiId, 'tooltip'); // ufo opening reaction dialog success
+    onDialogOpenCallback(emojiId, 'tooltip');
 
+    // ufo opening reaction dialog success
     ufoExperiences.openDialog.success({
       metadata: {
         emojiId: emojiId,
@@ -170,19 +159,19 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       }
     });
   };
+
   /**
    * Event handler to oepn all reactions link button
    */
-
-
   var handleOpenAllReactionsDialog = function handleOpenAllReactionsDialog() {
     // ufo start opening reaction dialog
     ufoExperiences.openDialog.start();
     var emojiId = reactions[0].emojiId;
     getReactionDetails(emojiId);
     setSelectedEmojiId(emojiId);
-    onDialogOpenCallback(emojiId, 'button'); // ufo opening reaction dialog success
+    onDialogOpenCallback(emojiId, 'button');
 
+    // ufo opening reaction dialog success
     ufoExperiences.openDialog.success({
       metadata: {
         emojiId: emojiId,
@@ -191,13 +180,13 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       }
     });
   };
-
   var handleCloseReactionsDialog = function handleCloseReactionsDialog(e, analyticsEvent) {
     // ufo closing opening reaction dialog
     ufoExperiences.closeDialog.start();
     setSelectedEmojiId('');
-    onDialogCloseCallback(e, analyticsEvent); // ufo closing reaction dialog success
+    onDialogCloseCallback(e, analyticsEvent);
 
+    // ufo closing reaction dialog success
     ufoExperiences.closeDialog.success({
       metadata: {
         source: 'Reactions',
@@ -205,13 +194,13 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       }
     });
   };
-
   var handleSelectReactionInDialog = function handleSelectReactionInDialog(emojiId, analyticsEvent) {
     // ufo selected reaction inside the modal dialog
     ufoExperiences.selectedReactionChangeInsideDialog.start();
     handleReactionMouseEnter(emojiId);
-    onDialogSelectReactionCallback(emojiId, analyticsEvent); // ufo selected reaction inside the modal dialog success
+    onDialogSelectReactionCallback(emojiId, analyticsEvent);
 
+    // ufo selected reaction inside the modal dialog success
     ufoExperiences.selectedReactionChangeInsideDialog.success({
       metadata: {
         emojiId: emojiId,
@@ -220,25 +209,23 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       }
     });
   };
+
   /**
    * Get the reactions that we want to render are any reactions with a count greater than zero as well as any default emoji not already shown
    */
-
-
   var memorizedReactions = useMemo(function () {
     //
-
     /**
      * If reactions not empty, don't show quick reactions Pre defined emoji or if its empty => return the current list of reactions
      */
     if (reactions.length > 0 || !quickReactionEmojis) {
       return reactions;
-    } // add any missing default reactions
-
+    }
 
+    // add any missing default reactions
     var ari = quickReactionEmojis.ari,
-        containerAri = quickReactionEmojis.containerAri,
-        emojiIds = quickReactionEmojis.emojiIds;
+      containerAri = quickReactionEmojis.containerAri,
+      emojiIds = quickReactionEmojis.emojiIds;
     var items = emojiIds.filter(function (emojiId) {
       return !reactions.some(function (reaction) {
         return reaction.emojiId === emojiId;

package/dist/esm/components/Reactions/styles.js

@@ -18,6 +18,7 @@ export var wrapperStyle = css({
   position: 'relative',
   alignItems: 'center',
   borderRadius: '15px',
+  marginTop: '-4px',
   '> :first-of-type > :first-of-type': {
     marginLeft: 0
   }

package/dist/esm/components/Selector/Selector.js

@@ -1,5 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /** @jsx jsx */
 import React, { useEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
@@ -8,77 +7,70 @@ import { constants } from '../../shared';
 import { EmojiButton } from '../EmojiButton';
 import { ShowMore } from '../ShowMore';
 import * as styles from './styles';
+
 /**
  * Test id for wrapper Selector div
  */
-
 export var RENDER_SELECTOR_TESTID = 'render-selector';
-
 /**
  * Reactions picker panel part of the <ReactionPicker /> component
  */
 export var Selector = function Selector(_ref) {
   var emojiProvider = _ref.emojiProvider,
-      onMoreClick = _ref.onMoreClick,
-      onSelection = _ref.onSelection,
-      showMore = _ref.showMore,
-      _ref$pickerQuickReact = _ref.pickerQuickReactionEmojiIds,
-      pickerQuickReactionEmojiIds = _ref$pickerQuickReact === void 0 ? constants.DefaultReactions : _ref$pickerQuickReact;
-
+    onMoreClick = _ref.onMoreClick,
+    onSelection = _ref.onSelection,
+    showMore = _ref.showMore,
+    _ref$pickerQuickReact = _ref.pickerQuickReactionEmojiIds,
+    pickerQuickReactionEmojiIds = _ref$pickerQuickReact === void 0 ? constants.DefaultReactions : _ref$pickerQuickReact;
   var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      selection = _useState2[0],
-      setSelection = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 2),
+    selection = _useState2[0],
+    setSelection = _useState2[1];
   /**
    * Collection of global DOM timeout ids when user selects emojis for animation display
    */
-
-
   var timeoutIds = useRef([]);
+
   /**
    * Clear the timeouts for the selected emojis when the component unmounts
    */
-
   useEffect(function () {
     var timeoutValues = timeoutIds.current;
     return function cleanup() {
       timeoutValues.forEach(clearTimeout);
     };
   }, []);
+
   /**
    * event handler when an emoji gets selected
    * @param item selected emoji
    * @param description depth detail of the selected emoji
    * @param event Dom event data
    */
-
   var onSelected = function onSelected(item, description, event) {
     timeoutIds.current.push(window.setTimeout(function () {
       onSelection(item, description, event);
     }, 250));
     setSelection(item);
   };
+
   /**
    * custom css styling for the emoji icon
    * @param index location of the emoji in the rendered list of items
    */
-
-
   var emojiStyleAnimation = function emojiStyleAnimation(index) {
     return {
       animationDelay: "".concat(index * 50, "ms")
     };
   };
+
   /**
    * Render the default emoji icon
    * @param emoji emoji item
    * @param index location of the emoji in the array
    */
-
-
   var renderEmoji = function renderEmoji(emoji, index) {
     var _emoji$id;
-
     return jsx("div", {
       key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
       className: emoji === selection ? 'selected' : undefined,
@@ -93,7 +85,6 @@ export var Selector = function Selector(_ref) {
       onClick: onSelected
     })));
   };
-
   return jsx("div", {
     css: styles.selectorStyle
   }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? jsx(ShowMore, {

package/dist/esm/components/Selector/styles.js

@@ -29,11 +29,11 @@ export var revealAnimation = keyframes({
 export var revealStyle = css({
   animation: "".concat(revealAnimation, " 150ms ease-in-out forwards")
 });
+
 /**
  * custom css styling for the emoji icon
  * @param index location of the emoji in the rendered list of items
  */
-
 export var emojiStyleAnimation = function emojiStyleAnimation(index) {
   return {
     animationDelay: "".concat(index * 50, "ms")