@atlaskit/reactions 22.2.0 → 22.2.2

package/dist/cjs/components/ReactionDialog/ReactionsDialog.js

@@ -1,36 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ReactionsDialog = exports.RENDER_MODAL_TESTID = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
-
 var _reactIntlNext = require("react-intl-next");
-
 var _react2 = require("@emotion/react");
-
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
-
 var _shared = require("../../shared");
-
 var _ReactionsList = require("./ReactionsList");
-
 var _styles = require("./styles");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /** @jsx jsx */
 
 /**
@@ -38,7 +24,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var RENDER_MODAL_TESTID = 'render-reactions-modal';
 exports.RENDER_MODAL_TESTID = RENDER_MODAL_TESTID;
-
 var getDimensions = function getDimensions(container) {
   return {
     clientWidth: container === null || container === void 0 ? void 0 : container.clientWidth,
@@ -46,27 +31,23 @@ var getDimensions = function getDimensions(container) {
     scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
   };
 };
-
 var ReactionsDialog = function ReactionsDialog(_ref) {
   var _ref$reactions = _ref.reactions,
-      reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
-      _ref$handleCloseReact = _ref.handleCloseReactionsDialog,
-      handleCloseReactionsDialog = _ref$handleCloseReact === void 0 ? function () {} : _ref$handleCloseReact,
-      emojiProvider = _ref.emojiProvider,
-      selectedEmojiId = _ref.selectedEmojiId,
-      _ref$handleSelectReac = _ref.handleSelectReaction,
-      handleSelectReaction = _ref$handleSelectReac === void 0 ? function () {} : _ref$handleSelectReac;
-
+    reactions = _ref$reactions === void 0 ? [] : _ref$reactions,
+    _ref$handleCloseReact = _ref.handleCloseReactionsDialog,
+    handleCloseReactionsDialog = _ref$handleCloseReact === void 0 ? function () {} : _ref$handleCloseReact,
+    emojiProvider = _ref.emojiProvider,
+    selectedEmojiId = _ref.selectedEmojiId,
+    _ref$handleSelectReac = _ref.handleSelectReaction,
+    handleSelectReaction = _ref$handleSelectReac === void 0 ? function () {} : _ref$handleSelectReac;
   var _useState = (0, _react.useState)(),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      elementToScroll = _useState2[0],
-      setElementToScroll = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    elementToScroll = _useState2[0],
+    setElementToScroll = _useState2[1];
   var _useState3 = (0, _react.useState)(null),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      reactionsContainerRef = _useState4[0],
-      setReactionsContainerRef = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    reactionsContainerRef = _useState4[0],
+    setReactionsContainerRef = _useState4[1];
   var reactionElementsRef = (0, _react.useRef)();
   var observerRef = (0, _react.useRef)();
   var intl = (0, _reactIntlNext.useIntl)();
@@ -81,25 +62,22 @@ var ReactionsDialog = function ReactionsDialog(_ref) {
       return (b === null || b === void 0 ? void 0 : b.count) - (a === null || a === void 0 ? void 0 : a.count);
     });
   }, [reactions]);
-  /* set Reactions Border Width , 9 Number of reactions to display*/
 
+  /* set Reactions Border Width , 9 Number of reactions to display*/
   var reactionsBorderWidth = (0, _react.useMemo)(function () {
     return Math.ceil(reactions.length / _shared.constants.NUMBER_OF_REACTIONS_TO_DISPLAY) * 100;
   }, [reactions]);
-  /* Callback from IntersectionObserver to set/unset classNames based on visibility to toggle styles*/
 
+  /* Callback from IntersectionObserver to set/unset classNames based on visibility to toggle styles*/
   var handleNavigation = (0, _react.useCallback)(function (entries) {
     entries.forEach(function (entry, index) {
       var _dataset;
-
       var element = entry.target;
       var emojiElement = element === null || element === void 0 ? void 0 : element.querySelector('[data-emoji-id]');
       var emojiId = emojiElement === null || emojiElement === void 0 ? void 0 : (_dataset = emojiElement.dataset) === null || _dataset === void 0 ? void 0 : _dataset.emojiId;
-
       if (entry.intersectionRatio < 1) {
         element.classList.add('disabled');
         /*Check if selectedEmoji (passed as props based on what user selects) is out of viewport */
-
         if (emojiId === selectedEmojiId && !isSelectedEmojiViewed.current) {
           setElementToScroll(emojiElement !== null && emojiElement !== void 0 ? emojiElement : undefined);
         }
@@ -107,7 +85,6 @@ var ReactionsDialog = function ReactionsDialog(_ref) {
         if (emojiId === selectedEmojiId && !isSelectedEmojiViewed.current) {
           isSelectedEmojiViewed.current = true;
         }
-
         element.classList.remove('disabled');
       }
     });
@@ -117,21 +94,18 @@ var ReactionsDialog = function ReactionsDialog(_ref) {
       isSelectedEmojiViewed.current = true;
       var parentElement = elementToScroll.closest('.reaction-elements');
       var reactionsList = document.querySelector('#reactions-dialog-tabs-list');
-
       var _getDimensions = getDimensions(reactionsList),
-          clientWidth = _getDimensions.clientWidth;
-
+        clientWidth = _getDimensions.clientWidth;
       var offsetLeft = parentElement === null || parentElement === void 0 ? void 0 : parentElement.offsetLeft;
       /* which means emoji is not in viewport so scroll to it*/
-
       if (reactionsList && offsetLeft > clientWidth) {
         var scrollBy = Math.trunc(offsetLeft / clientWidth) * clientWidth;
         reactionsList.scrollLeft += scrollBy;
       }
     }
   }, [elementToScroll, reactionsContainerRef]);
-  /* Set up InterSectionObserver to observer reaction elements on navigating*/
 
+  /* Set up InterSectionObserver to observer reaction elements on navigating*/
   (0, _react.useEffect)(function () {
     if (reactionsContainerRef) {
       var options = {
@@ -143,11 +117,9 @@ var ReactionsDialog = function ReactionsDialog(_ref) {
       reactionElementsRef.current = reactionsContainerRef.querySelectorAll('.reaction-elements');
       reactionElementsRef.current && reactionElementsRef.current.length > 0 && reactionElementsRef.current.forEach(function (child) {
         var _observerRef$current;
-
         observerRef === null || observerRef === void 0 ? void 0 : (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 ? void 0 : _observerRef$current.observe(child);
       });
     }
-
     return function () {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -158,8 +130,8 @@ var ReactionsDialog = function ReactionsDialog(_ref) {
   var setRef = (0, _react.useCallback)(function (node) {
     if (!reactionsContainerRef) {
       setReactionsContainerRef(node);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return (0, _react2.jsx)(_modalDialog.default, {
     onClose: handleCloseReactionsDialog,
@@ -183,5 +155,4 @@ var ReactionsDialog = function ReactionsDialog(_ref) {
     autoFocus: true
   }, intl.formatMessage(_shared.i18n.messages.closeReactionsDialog))));
 };
-
 exports.ReactionsDialog = ReactionsDialog;

package/dist/cjs/components/ReactionDialog/ReactionsList.js

@@ -1,62 +1,47 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ReactionsList = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
-
 var _react2 = require("@emotion/react");
-
 var _element = require("@atlaskit/emoji/element");
-
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
-
 var _tokens = require("@atlaskit/tokens");
-
 var _Counter = require("../Counter");
-
 var _styles = require("./styles");
-
 var _ReactionView = require("./ReactionView");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /** @jsx   jsx */
+
 var ReactionsList = function ReactionsList(_ref) {
   var reactions = _ref.reactions,
-      initialEmojiId = _ref.initialEmojiId,
-      emojiProvider = _ref.emojiProvider,
-      onReactionChanged = _ref.onReactionChanged;
-
+    initialEmojiId = _ref.initialEmojiId,
+    emojiProvider = _ref.emojiProvider,
+    onReactionChanged = _ref.onReactionChanged;
   var _useState = (0, _react.useState)(function () {
-    // Calculate this only on initialize the List of Tabs and each Reactions View collection
-    return {
-      index: reactions.findIndex(function (reaction) {
-        return reaction.emojiId === initialEmojiId;
-      }),
-      id: initialEmojiId
-    };
-  }),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      selectedEmoji = _useState2[0],
-      setSelectedEmoji = _useState2[1];
-
-  var theme = (0, _tokens.useThemeObserver)();
+      // Calculate this only on initialize the List of Tabs and each Reactions View collection
+      return {
+        index: reactions.findIndex(function (reaction) {
+          return reaction.emojiId === initialEmojiId;
+        }),
+        id: initialEmojiId
+      };
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    selectedEmoji = _useState2[0],
+    setSelectedEmoji = _useState2[1];
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
   var onTabChange = (0, _react.useCallback)(function (index, analyticsEvent) {
     if (index === selectedEmoji.index) {
       return;
     }
-
     var emojiId = reactions[index].emojiId;
     setSelectedEmoji({
       index: index,
@@ -77,7 +62,7 @@ var ReactionsList = function ReactionsList(_ref) {
       shortName: ''
     };
     return (0, _react2.jsx)("div", {
-      css: (0, _styles.customTabWrapper)((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id, selectedEmoji.id, theme),
+      css: (0, _styles.customTabWrapper)((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id, selectedEmoji.id, colorMode),
       className: "reaction-elements",
       key: reaction.emojiId,
       "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
@@ -100,5 +85,4 @@ var ReactionsList = function ReactionsList(_ref) {
     });
   }));
 };
-
 exports.ReactionsList = ReactionsList;

package/dist/cjs/components/ReactionDialog/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "ReactionsDialog", {
     return _ReactionsDialog.ReactionsDialog;
   }
 });
-
 var _ReactionsDialog = require("./ReactionsDialog");

package/dist/cjs/components/ReactionDialog/styles.js

@@ -4,24 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.userStyle = exports.userListStyle = exports.titleStyle = exports.reactionViewStyle = exports.navigationContainerStyle = exports.customTabWrapper = exports.customTabListStyles = exports.counterStyle = exports.containerStyle = exports.centerSpinner = void 0;
-
 var _react = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _shared = require("../../shared");
-
 /** @jsx jsx */
+
 var REACTIONS_CONTAINER_WIDTH = 48;
 var REACTION_RIGHT_MARGIN = 8;
 /* we want to display around 9 reactions and show 10th one as faded so removing 2px from REACTIONS_CONTAINER_WIDTH*/
-
 var CONTAINER_WIDTH = _shared.constants.NUMBER_OF_REACTIONS_TO_DISPLAY * (REACTIONS_CONTAINER_WIDTH + REACTION_RIGHT_MARGIN) + REACTIONS_CONTAINER_WIDTH - 2;
 var REACTION_CONTAINER_HEIGHT = 48;
+
 /*Reactions Container. Using pseudo Element :after to set border since with onClick of Reaction to higlight the
 border blue below the reaction. Setting Border Width based on number of reactions to make sure it shows up
 in case the container overflows */
-
 var containerStyle = function containerStyle(reactionsBorderWidth) {
   return (0, _react.css)({
     overflow: 'hidden',
@@ -41,7 +37,6 @@ var containerStyle = function containerStyle(reactionsBorderWidth) {
     }
   });
 };
-
 exports.containerStyle = containerStyle;
 var titleStyle = (0, _react.css)({
   '& > h1': {
@@ -54,7 +49,6 @@ var containerEdgeAngle = {
   rightEdge: 270,
   leftEdge: 90
 };
-
 var counterStyle = function counterStyle(isSelected) {
   return (0, _react.css)({
     display: 'flex',
@@ -72,9 +66,7 @@ var counterStyle = function counterStyle(isSelected) {
     }
   });
 };
-
 exports.counterStyle = counterStyle;
-
 var fadedCss = function fadedCss(edge, theme) {
   return (0, _react.css)({
     content: '""',
@@ -84,10 +76,9 @@ var fadedCss = function fadedCss(edge, theme) {
     width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
     height: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
     zIndex: 0,
-    background: theme === 'dark' || theme === 'legacy-dark' ? "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(34, 39, 43, 0.95) 40.23%, rgba(34, 39, 43, 0.55) 58.33%, rgba(34, 39, 43, 0) 77.49%)") : "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(255, 255, 255, 0.95) 40.23%, rgba(255, 255, 255, 0.55) 58.33%, rgba(255, 255, 255, 0) 77.49%)")
+    background: theme === 'dark' ? "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(34, 39, 43, 0.95) 40.23%, rgba(34, 39, 43, 0.55) 58.33%, rgba(34, 39, 43, 0) 77.49%)") : "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(255, 255, 255, 0.95) 40.23%, rgba(255, 255, 255, 0.55) 58.33%, rgba(255, 255, 255, 0) 77.49%)")
   });
 };
-
 var customTabWrapper = function customTabWrapper(isSelected, selectedEmojiId, theme) {
   return (0, _react.css)({
     flexShrink: 0,
@@ -133,7 +124,6 @@ var customTabWrapper = function customTabWrapper(isSelected, selectedEmojiId, th
     }
   });
 };
-
 exports.customTabWrapper = customTabWrapper;
 var navigationContainerStyle = (0, _react.css)({
   '> button': {

package/dist/cjs/components/ReactionPicker/ReactionPicker.js

@@ -1,58 +1,37 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _reactIntlNext = require("react-intl-next");
-
 var _picker = require("@atlaskit/emoji/picker");
-
 var _popper = require("@atlaskit/popper");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _Selector = require("../Selector");
-
 var _Trigger = require("../Trigger");
-
 var _analytics = require("../../analytics");
-
 var _shared = require("../../shared");
-
 var _hooks = require("../../hooks");
-
 var styles = _interopRequireWildcard(require("./styles"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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) { (0, _defineProperty2.default)(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; }
-
 /**
  * Test id for wrapper ReactionPicker div
  */
 var RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
+
 /**
  * Emoji Picker Controller Id for Accessibility Labels
  */
-
 exports.RENDER_REACTIONPICKER_TESTID = RENDER_REACTIONPICKER_TESTID;
 var PICKER_CONTROL_ID = 'emoji-picker';
 var popperModifiers = [
@@ -82,72 +61,66 @@ https://popper.js.org/docs/v1/#modifiers..applyStyle
   name: 'preventOverflow',
   enabled: true
 }];
-
 /**
  * Picker component for adding reactions
  */
 var ReactionPicker = /*#__PURE__*/_react.default.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 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.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 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.addReaction) : _props$tooltipContent,
+    emojiPickerSize = props.emojiPickerSize;
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
    */
-
   var wrapperRef = (0, _react.useRef)(null);
   /**
    * a function you can ask Popper to recompute your tooltip's position. It will directly call the Popper#update method
    */
-
   var updatePopper = (0, _react.useRef)();
-
   var _useState = (0, _react.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 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_useState, 2),
-      settings = _useState2[0],
-      setSettings = _useState2[1];
   /**
    * Custom hook triggers when user clicks outside the reactions picker
    */
-
-
   (0, _hooks.useClickAway)(wrapperRef, function () {
     onCancel();
     close();
   }, '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 = (0, _react.useCallback)(function (_id) {
     setSettings({
       isOpen: false,
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
-    }); // ufo abort reaction experience
-
+    });
+    // ufo abort reaction experience
     _analytics.UFO.PickerRender.abort({
       metadata: {
         emojiId: _id,
@@ -156,11 +129,11 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
       }
     });
   }, [allowAllEmojis, pickerQuickReactionEmojiIds]);
+
   /**
    * Event handle rwhen selecting to show the custom emoji icons picker
    * @param e event param
    */
-
   var onSelectMoreClick = (0, _react.useCallback)(function (e) {
     e.preventDefault();
     setSettings({
@@ -169,41 +142,38 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
     });
     onShowMore();
   }, [onShowMore]);
+
   /**
    * Event callback when an emoji icon is selected
    * @param item selected item
    */
-
   var onEmojiSelected = (0, _react.useCallback)(function (item) {
     // no emoji was selected
     if (!item.id) {
       return;
     }
-
     onSelection(item.id, 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
     _analytics.UFO.PickerRender.start();
-
     setSettings({
       isOpen: !settings.isOpen,
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
     });
-    onOpen(); // ufo reactions picker opened success
-
+    onOpen();
+    // ufo reactions picker opened success
     _analytics.UFO.PickerRender.success();
   };
+
   /**
    * When picker is opened, re-calculate the picker position
    */
-
-
   (0, _react.useEffect)(function () {
     if (settings.isOpen) {
       if (updatePopper.current) {
@@ -219,7 +189,8 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
     ref: wrapperRef
   }, (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.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
       (0, _react2.jsx)(_Trigger.Trigger, {
         ariaAttributes: {
           'aria-expanded': settings.isOpen,
@@ -237,8 +208,8 @@ var ReactionPicker = /*#__PURE__*/_react.default.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 (0, _react2.jsx)(_react.Fragment, null, settings.isOpen && (0, _react2.jsx)("div", {
       id: PICKER_CONTROL_ID,
@@ -263,5 +234,4 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
     })))));
   })));
 });
-
 exports.ReactionPicker = ReactionPicker;

package/dist/cjs/components/ReactionPicker/index.js

@@ -15,5 +15,4 @@ Object.defineProperty(exports, "ReactionPicker", {
     return _ReactionPicker.ReactionPicker;
   }
 });
-
 var _ReactionPicker = require("./ReactionPicker");

package/dist/cjs/components/ReactionPicker/styles.js

@@ -4,14 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.popupStyle = exports.pickerStyle = exports.contentStyle = void 0;
-
 var _react = require("@emotion/react");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _colors = require("@atlaskit/theme/colors");
-
 /** @jsx jsx */
+
 var pickerStyle = (0, _react.css)({
   verticalAlign: 'middle',
   '&.miniMode': {