@atlaskit/reactions 21.8.1 → 22.0.0

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.8.1"
+	"version": "22.0.0"
 }

package/dist/es2019/MockReactionsClient.js

@@ -2,44 +2,52 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { constants } from './shared';
 export const containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
 export const ari = 'ari:cloud:owner:demo-cloud-id:item/1';
-export const getReactionSummary = (shortName, count, reacted) => {
+export const getReactionSummary = (shortName, count, reacted, extendedReactions) => {
+  const getReactionsByShortName = extendedReactions ? constants.ExtendedReactionsByShortName.get(shortName) : constants.DefaultReactionsByShortName.get(shortName);
   return {
     ari,
     containerAri,
-    emojiId: constants.DefaultReactionsByShortName.get(shortName).id,
+    emojiId: getReactionsByShortName.id,
     count,
     reacted
   };
 };
 export const getUser = (id, displayName) => ({
   id,
-  displayName
+  displayName,
+  profilePicture: {
+    path: 'https://pbs.twimg.com/profile_images/803832195970433027/aaoG6PJI_400x400.jpg'
+  }
 });
 
 const getReactionKey = (containerAri, ari) => {
   return `${containerAri}|${ari}`;
 };
 
-const defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon')];
-export const mockData = {
+const defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon'), getUser('bsmith', 'Bob Smith'), getUser('jdoe', 'Jane Doe'), getUser('mhomes', 'Mary Homes'), getUser('ckent', 'Clark Kent')];
+export const simpleMockData = {
   [getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]
 };
+const extendedMockData = {
+  [getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true, true), getReactionSummary(':thumbsup:', 999, false, true), getReactionSummary(':astonished:', 9, false, true), getReactionSummary(':heart:', 99, false, true), getReactionSummary(':thinking:', 10, false, true), getReactionSummary(':clap:', 99, false, true), getReactionSummary(':thumbsdown:', 2, false, true), getReactionSummary(':bulb:', 16, false, true), getReactionSummary(':star:', 9999, false, true), getReactionSummary(':green_heart:', 9, false, true), getReactionSummary(':blue_heart:', 8392, false, true), getReactionSummary(':broken_heart:', 1, false, true), getReactionSummary(':grinning:', 10601, false, true), getReactionSummary(':slight_smile:', 99, false, true)]
+};
 /**
  * Mocked version of the client to fetch user information
  */
 
 export class MockReactionsClient {
-  constructor(delay = 0) {
+  constructor(delay = 0, showExtendedReactions = false) {
     _defineProperty(this, "delayPromise", () => new Promise(resolve => window.setTimeout(resolve, this.delay)));
 
     this.delay = delay;
+    this.mockData = showExtendedReactions ? extendedMockData : simpleMockData;
   }
 
   async getReactions(containerAri, aris) {
     await this.delayPromise();
     return aris.reduce((results, ari) => {
       const reactionKey = getReactionKey(containerAri, ari);
-      results[ari] = mockData[reactionKey] || [];
+      results[ari] = this.mockData[reactionKey] || [];
       return results;
     }, {});
   }
@@ -47,7 +55,7 @@ export class MockReactionsClient {
   async getDetailedReaction(containerAri, ari, emojiId) {
     await this.delayPromise();
     const reactionKey = `${containerAri}|${ari}`;
-    const reactionsMockData = mockData[reactionKey];
+    const reactionsMockData = this.mockData[reactionKey];
 
     if (reactionsMockData) {
       const reaction = reactionsMockData.find(reaction_1 => reaction_1.emojiId === emojiId);
@@ -74,10 +82,10 @@ export class MockReactionsClient {
     await this.delayPromise();
     const reactionKey = getReactionKey(containerAri, ari);
     let found = false;
-    const reactionsMockData = mockData[reactionKey];
+    const reactionsMockData = this.mockData[reactionKey];
 
     if (reactionsMockData) {
-      mockData[reactionKey] = reactionsMockData.map(reaction => {
+      this.mockData[reactionKey] = reactionsMockData.map(reaction => {
         if (reaction.emojiId === emojiId) {
           found = true;
           return { ...reaction,
@@ -91,7 +99,7 @@ export class MockReactionsClient {
     }
 
     if (!found) {
-      mockData[reactionKey] = [...(reactionsMockData ? reactionsMockData : []), {
+      this.mockData[reactionKey] = [...(reactionsMockData ? reactionsMockData : []), {
         containerAri,
         ari,
         emojiId,
@@ -100,13 +108,13 @@ export class MockReactionsClient {
       }];
     }
 
-    return mockData[reactionKey];
+    return this.mockData[reactionKey];
   }
 
   async deleteReaction(containerAri, ari, emojiId) {
     await this.delayPromise();
     const reactionKey = getReactionKey(containerAri, ari);
-    mockData[reactionKey] = mockData[reactionKey].map(reaction => {
+    this.mockData[reactionKey] = this.mockData[reactionKey].map(reaction => {
       if (reaction.emojiId === emojiId) {
         if (reaction.count === 1) {
           return undefined;
@@ -120,7 +128,7 @@ export class MockReactionsClient {
 
       return reaction;
     }).filter(reaction_1 => !!reaction_1);
-    return mockData[reactionKey];
+    return this.mockData[reactionKey];
   }
 
 }

package/dist/es2019/analytics/analytics.js

@@ -58,6 +58,9 @@ export const createReactionSelectionEvent = (source, emojiId, reaction, startTim
 export const createReactionHoveredEvent = startTime => createPayload('hovered', 'existingReaction', UI_EVENT_TYPE)({
   duration: calculateDuration(startTime)
 });
+export const createReactionFocusedEvent = startTime => createPayload('focused', 'existingReaction', UI_EVENT_TYPE)({
+  duration: calculateDuration(startTime)
+});
 export const createReactionClickedEvent = (added, emojiId) => createPayload('clicked', 'existingReaction', UI_EVENT_TYPE)({
   added,
   emojiId

package/dist/es2019/analytics/ufo.js

@@ -33,6 +33,9 @@ export let ExperienceName;
   ExperienceName["REACTION_ADDED"] = "reaction-added";
   ExperienceName["REACTION_REMOVED"] = "reaction-removed";
   ExperienceName["REACTION_DETAILS_FETCHED"] = "reaction-details-fetched";
+  ExperienceName["REACTION_DIALOG_OPENED"] = "reaction-dialog-opened";
+  ExperienceName["REACTION_DIALOG_CLOSED"] = "reaction-dialog-closed";
+  ExperienceName["REACTION_DIALOG_SELECTED_REACTION_CHANGED"] = "reaction-dialog-selected-reaction-changed";
 })(ExperienceName || (ExperienceName = {}));
 
 export let ComponentName;
@@ -44,6 +47,7 @@ export let ComponentName;
   ComponentName["PICKER_RENDERED"] = "reactions-picker";
   ComponentName["REACTIONS"] = "reactions-list";
   ComponentName["REACTION_ITEM"] = "reaction-item";
+  ComponentName["REACTION_DIALOG"] = "reaction-dialog";
 })(ComponentName || (ComponentName = {}));
 
 export const PickerRender = new UFOExperience(ExperienceName.PICKER_OPENED, createExperienceConfig(ComponentName.PICKER_RENDERED, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
@@ -57,6 +61,21 @@ export const ReactionsRendered = new ConcurrentExperience(ExperienceName.REACTIO
  */
 
 export const ReactionsAdd = new ConcurrentExperience(ExperienceName.REACTION_ADDED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+/**
+ * Expeirence when a reaction dialog is opened
+ */
+
+export const ReactionDialogOpened = new UFOExperience(ExperienceName.REACTION_DIALOG_OPENED, createExperienceConfig(ComponentName.REACTION_DIALOG, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when a reaction dialog is closed
+ */
+
+export const ReactionDialogClosed = new UFOExperience(ExperienceName.REACTION_DIALOG_CLOSED, createExperienceConfig(ComponentName.REACTION_DIALOG, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when a reaction changed/fetched from inside the modal dialog
+ */
+
+export const ReactionDialogSelectedReactionChanged = new UFOExperience(ExperienceName.REACTION_DIALOG_SELECTED_REACTION_CHANGED, createExperienceConfig(ComponentName.REACTION_DIALOG, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
 /**
  * Experience when a reaction details gets fetched
  */

package/dist/es2019/components/Counter/Counter.js

@@ -4,7 +4,7 @@ import { jsx, css } from '@emotion/react';
 import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion'; // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
 
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
-import { constants } from '../../shared';
+import { utils } from '../../shared';
 import * as styles from './styles';
 /**
  * Test id for component top level div
@@ -21,30 +21,31 @@ export const RENDER_COUNTER_TESTID = 'counter-container';
  */
 
 export const RENDER_LABEL_TESTID = 'counter_label_wrapper';
-export const getLabel = (value, overLimitLabel, limit) => {
-  // Check if reached limit
-  if (limit && value >= limit) {
-    return overLimitLabel || '';
-  } else if (value === 0) {
-    return '';
-  } else {
-    return value.toString();
-  }
-};
+
 /**
  * Display reaction count next to the emoji button
  */
-
 export const Counter = ({
   highlight = false,
-  limit = constants.DEFAULT_REACTION_TOP_LIMIT,
-  overLimitLabel = constants.DEFAULT_OVER_THE_LIMIT_REACTION_LABEL,
+  limit,
+  overLimitLabel,
   className,
   value,
   animationDuration = mediumDurationMs
 }) => {
+  const getLabel = value => {
+    // Check if reached limit
+    if (limit && overLimitLabel && value >= limit) {
+      return overLimitLabel || '';
+    } else if (value === 0) {
+      return '';
+    } else {
+      return utils.formatLargeNumber(value);
+    }
+  };
+
   const previousValue = usePreviousValue(value);
-  const label = getLabel(value, overLimitLabel, limit);
+  const label = getLabel(value);
   const increase = previousValue ? previousValue < value : false;
   return jsx("div", {
     className: className,

package/dist/es2019/components/Reaction/Reaction.js

@@ -10,10 +10,10 @@ import { FlashAnimation } from '../FlashAnimation';
 import { ReactionTooltip } from '../ReactionTooltip';
 import { i18n, utils } from '../../shared';
 import * as styles from './styles';
+
 /**
  * Test id for Reaction item wrapper div
  */
-
 export const RENDER_REACTION_TESTID = 'render_reaction_wrapper';
 
 /**
@@ -23,19 +23,25 @@ export const Reaction = ({
   emojiProvider,
   onClick,
   reaction,
-  onMouseEnter,
+  onMouseEnter = () => {},
+  onFocused = () => {},
   className,
-  flash = false
+  flash = false,
+  handleUserListClick = () => {},
+  allowUserDialog
 }) => {
-  const emojiId = {
-    id: reaction.emojiId,
-    shortName: ''
-  };
+  const intl = useIntl();
   const hoverStart = useRef();
+  const focusStart = useRef();
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
-  const [emojiName, setEmojiName] = useState(); // TODO: Extract the flow to a custom hook to retrieve emoji detailed description from an id using a custom hook. This will benefit a better optimization instead of the emojiProvider resolving everytime.
+  const [emojiName, setEmojiName] = useState();
+  const [isTooltipEnabled, setIsTooltipEnabled] = useState(true);
+  const emojiId = {
+    id: reaction.emojiId,
+    shortName: ''
+  }; // TODO: Extract the flow to a custom hook to retrieve emoji detailed description from an id using a custom hook. This will benefit a better optimization instead of the emojiProvider resolving everytime.
   // Also optimize in future version to fetch in batch several emojiIds
 
   useEffect(() => {
@@ -48,7 +54,7 @@ export const Reaction = ({
       }
     })();
   }, [emojiProvider, reaction.emojiId]);
-  const handleMouseUp = useCallback(event => {
+  const handleClick = useCallback(event => {
     event.preventDefault();
 
     if (utils.isLeftClick(event)) {
@@ -62,21 +68,38 @@ export const Reaction = ({
   }, [createAnalyticsEvent, reaction, onClick]);
   const handleMouseEnter = useCallback(event => {
     event.preventDefault();
+    setIsTooltipEnabled(true);
 
     if (!reaction.users || !reaction.users.length) {
-      hoverStart.current = Date.now();
+      focusStart.current = Date.now();
     }
 
-    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionHoveredEvent, hoverStart.current);
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionHoveredEvent, focusStart.current);
+    onMouseEnter(reaction.emojiId, event);
+  }, [createAnalyticsEvent, reaction, onMouseEnter]);
+  const handleFocused = useCallback(event => {
+    event.preventDefault();
+    setIsTooltipEnabled(true);
 
-    if (onMouseEnter) {
-      onMouseEnter(reaction, event);
+    if (!reaction.users || !reaction.users.length) {
+      hoverStart.current = Date.now();
     }
-  }, [createAnalyticsEvent, reaction, onMouseEnter]);
-  const intl = useIntl();
+
+    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionFocusedEvent, hoverStart.current);
+    onFocused(reaction.emojiId, event);
+  }, [createAnalyticsEvent, reaction, onFocused]);
+
+  const handleOpenReactionsDialog = emojiId => {
+    handleUserListClick(emojiId);
+    setIsTooltipEnabled(false);
+  };
+
   return jsx(ReactionTooltip, {
     emojiName: emojiName,
-    reaction: reaction
+    reaction: reaction,
+    handleUserListClick: handleOpenReactionsDialog,
+    allowUserDialog: allowUserDialog,
+    isEnabled: isTooltipEnabled
   }, jsx("button", {
     className: className,
     css: [styles.reactionStyle, reaction.reacted && styles.reactedStyle],
@@ -86,8 +109,10 @@ export const Reaction = ({
     type: "button",
     "data-emoji-id": reaction.emojiId,
     "data-testid": RENDER_REACTION_TESTID,
-    onMouseUp: handleMouseUp,
-    onMouseEnter: handleMouseEnter
+    onClick: handleClick,
+    onMouseEnter: handleMouseEnter,
+    onFocus: handleFocused,
+    "data-emoji-button-id": reaction.emojiId
   }, jsx(FlashAnimation, {
     flash: flash,
     css: styles.flashStyle

package/dist/es2019/components/Reaction/styles.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
-import { B50, B75, B300, N20, N40, N400 } from '@atlaskit/theme/colors';
+import { B50, B75, B300, N20, N40, N400, B100 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 /**
  * Default styling px height for an emoji reaction
@@ -19,7 +19,6 @@ export const emojiStyle = css({
   padding: '4px 4px 4px 8px'
 });
 export const reactionStyle = css({
-  outline: 'none',
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'flex-start',
@@ -36,6 +35,13 @@ export const reactionStyle = css({
   transition: '200ms ease-in-out',
   '&:hover': {
     background: `${token('color.background.neutral.subtle.hovered', N20)}`
+  },
+  '&:focus': {
+    boxShadow: `0 0 0 2px ${token('color.border.focused', B100)}`,
+    // background, box-shadow
+    transitionDuration: '0s, 0.2s',
+    // disabling browser focus outline
+    outline: 'none'
   }
 });
 export const reactedStyle = css({
@@ -50,6 +56,7 @@ export const flashHeight = akHeight - 2; // height without the 1px border
 export const flashStyle = css({
   display: 'flex',
   flexDirection: 'row',
+  alignItems: 'center',
   borderRadius: '10px',
   height: `${flashHeight}px`
 });

package/dist/es2019/components/ReactionDialog/ReactionView.js

@@ -0,0 +1,69 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx   jsx */
+import { useEffect, useState, useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { jsx } from '@emotion/react';
+import { ResourcedEmoji } from '@atlaskit/emoji/element';
+import Avatar from '@atlaskit/avatar/Avatar';
+import Spinner from '@atlaskit/spinner';
+import { useTabPanel } from '@atlaskit/tabs';
+import { i18n } from '../../shared';
+import { reactionViewStyle, userListStyle, userStyle, centerSpinner } from './styles';
+export const ReactionView = ({
+  selectedEmojiId,
+  emojiProvider,
+  reaction
+}) => {
+  const intl = useIntl();
+  const [emojiName, setEmojiName] = useState('');
+  useEffect(() => {
+    (async () => {
+      const provider = await emojiProvider;
+      const emoji = await provider.findByEmojiId({
+        shortName: '',
+        id: selectedEmojiId
+      });
+
+      if (emoji && emoji.name) {
+        setEmojiName(emoji.name);
+      }
+    })();
+  }, [emojiProvider, selectedEmojiId]);
+  const alphabeticalNames = useMemo(() => {
+    var _reactionObj$users;
+
+    const reactionObj = reaction;
+    return ((_reactionObj$users = reactionObj.users) === null || _reactionObj$users === void 0 ? void 0 : _reactionObj$users.sort((a, b) => a.displayName.localeCompare(b.displayName))) || [];
+  }, [reaction]);
+  const tabPanelAttributes = useTabPanel();
+  return jsx("div", _extends({
+    css: reactionViewStyle
+  }, tabPanelAttributes), jsx("p", null, jsx(ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: {
+      id: selectedEmojiId,
+      shortName: ''
+    },
+    fitToHeight: 24
+  }), intl.formatMessage(i18n.messages.emojiName, {
+    emojiName
+  })), alphabeticalNames.length === 0 ? jsx("div", {
+    css: centerSpinner
+  }, jsx(Spinner, {
+    size: "large"
+  })) : jsx("ul", {
+    css: userListStyle
+  }, alphabeticalNames.map(user => {
+    var _user$profilePicture;
+
+    const profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
+    return jsx("li", {
+      css: userStyle,
+      key: user.id
+    }, jsx(Avatar, {
+      size: "large",
+      src: profile
+    }), jsx("span", null, user.displayName));
+  })));
+};

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

@@ -0,0 +1,145 @@
+/** @jsx jsx */
+import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import { jsx } from '@emotion/react';
+import Button from '@atlaskit/button/standard-button';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';
+import { constants, i18n } from '../../shared';
+import { ReactionsList } from './ReactionsList';
+import { containerStyle, titleStyle } from './styles';
+/**
+ * Test id for the Reactions modal dialog
+ */
+
+export const RENDER_MODAL_TESTID = 'render-reactions-modal';
+
+const getDimensions = container => {
+  return {
+    clientWidth: container === null || container === void 0 ? void 0 : container.clientWidth,
+    scrollWidth: container === null || container === void 0 ? void 0 : container.scrollWidth,
+    scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
+  };
+};
+
+export const ReactionsDialog = ({
+  reactions = [],
+  handleCloseReactionsDialog = () => {},
+  emojiProvider,
+  selectedEmojiId,
+  handleSelectReaction = () => {}
+}) => {
+  const [elementToScroll, setElementToScroll] = useState();
+  const [reactionsContainerRef, setReactionsContainerRef] = useState(null);
+  const reactionElementsRef = useRef();
+  const observerRef = useRef();
+  const intl = useIntl();
+  const isSelectedEmojiViewed = useRef(false);
+  const totalReactionsCount = useMemo(() => {
+    return reactions.reduce((accum, current) => {
+      return accum += current === null || current === void 0 ? void 0 : current.count;
+    }, 0);
+  }, [reactions]);
+  const sortedReactions = useMemo(() => {
+    return reactions.sort((a, b) => (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*/
+
+  const reactionsBorderWidth = useMemo(() => {
+    return Math.ceil(reactions.length / constants.NUMBER_OF_REACTIONS_TO_DISPLAY) * 100;
+  }, [reactions]);
+  /* Callback from IntersectionObserver to set/unset classNames based on visibility to toggle styles*/
+
+  const handleNavigation = useCallback(entries => {
+    entries.forEach((entry, index) => {
+      var _dataset;
+
+      const element = entry.target;
+      const emojiElement = element === null || element === void 0 ? void 0 : element.querySelector('[data-emoji-id]');
+      const 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);
+        }
+      } else {
+        if (emojiId === selectedEmojiId && !isSelectedEmojiViewed.current) {
+          isSelectedEmojiViewed.current = true;
+        }
+
+        element.classList.remove('disabled');
+      }
+    });
+  }, [selectedEmojiId]);
+  useEffect(() => {
+    if (elementToScroll && !isSelectedEmojiViewed.current && reactionsContainerRef) {
+      isSelectedEmojiViewed.current = true;
+      const parentElement = elementToScroll.closest('.reaction-elements');
+      const reactionsList = document.querySelector('#reactions-dialog-tabs-list');
+      const {
+        clientWidth
+      } = getDimensions(reactionsList);
+      const 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) {
+        const scrollBy = Math.trunc(offsetLeft / clientWidth) * clientWidth;
+        reactionsList.scrollLeft += scrollBy;
+      }
+    }
+  }, [elementToScroll, reactionsContainerRef]);
+  /* Set up InterSectionObserver to observer reaction elements on navigating*/
+
+  useEffect(() => {
+    if (reactionsContainerRef) {
+      const options = {
+        root: reactionsContainerRef,
+        rootMargin: '0px',
+        threshold: 1.0
+      };
+      observerRef.current = new IntersectionObserver(handleNavigation, options);
+      reactionElementsRef.current = reactionsContainerRef.querySelectorAll('.reaction-elements');
+      reactionElementsRef.current && reactionElementsRef.current.length > 0 && reactionElementsRef.current.forEach(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 () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = undefined;
+      }
+    };
+  }, [reactionsContainerRef, reactions, handleNavigation, selectedEmojiId]);
+  const setRef = useCallback(node => {
+    if (!reactionsContainerRef) {
+      setReactionsContainerRef(node);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
+  return jsx(Modal, {
+    onClose: handleCloseReactionsDialog,
+    height: 600,
+    testId: RENDER_MODAL_TESTID
+  }, jsx(ModalHeader, null, jsx("div", {
+    css: titleStyle
+  }, jsx(ModalTitle, null, intl.formatMessage(i18n.messages.reactionsCount, {
+    count: totalReactionsCount
+  })))), jsx(ModalBody, null, jsx("div", {
+    css: containerStyle(reactionsBorderWidth),
+    ref: setRef
+  }, jsx(ReactionsList, {
+    initialEmojiId: selectedEmojiId,
+    reactions: sortedReactions,
+    emojiProvider: emojiProvider,
+    onReactionChanged: handleSelectReaction
+  }))), jsx(ModalFooter, null, jsx(Button, {
+    appearance: "primary",
+    onClick: handleCloseReactionsDialog,
+    autoFocus: true
+  }, intl.formatMessage(i18n.messages.closeReactionsDialog))));
+};

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

@@ -0,0 +1,69 @@
+/** @jsx   jsx */
+import { useCallback, useState } from 'react';
+import { jsx } from '@emotion/react';
+import { ResourcedEmoji } from '@atlaskit/emoji/element';
+import Tabs, { Tab, TabList } from '@atlaskit/tabs';
+import { useThemeObserver } from '@atlaskit/tokens';
+import { Counter } from '../Counter';
+import { counterStyle, customTabWrapper, customTabListStyles } from './styles';
+import { ReactionView } from './ReactionView';
+export const ReactionsList = ({
+  reactions,
+  initialEmojiId,
+  emojiProvider,
+  onReactionChanged
+}) => {
+  const [selectedEmoji, setSelectedEmoji] = useState(() => {
+    // Calculate this only on initialize the List of Tabs and each Reactions View collection
+    return {
+      index: reactions.findIndex(reaction => reaction.emojiId === initialEmojiId),
+      id: initialEmojiId
+    };
+  });
+  const theme = useThemeObserver();
+  const onTabChange = useCallback((index, analyticsEvent) => {
+    if (index === selectedEmoji.index) {
+      return;
+    }
+
+    const emojiId = reactions[index].emojiId;
+    setSelectedEmoji({
+      index,
+      id: emojiId
+    });
+    onReactionChanged(emojiId, analyticsEvent);
+  }, [selectedEmoji.index, reactions, onReactionChanged]);
+  return jsx(Tabs, {
+    id: "reactions-dialog-tabs",
+    onChange: onTabChange,
+    selected: selectedEmoji.index
+  }, jsx("div", {
+    css: customTabListStyles,
+    id: "reactions-dialog-tabs-list"
+  }, jsx(TabList, null, reactions.map(reaction => {
+    const emojiId = {
+      id: reaction.emojiId,
+      shortName: ''
+    };
+    return jsx("div", {
+      css: customTabWrapper((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id, selectedEmoji.id, theme),
+      className: "reaction-elements",
+      key: reaction.emojiId,
+      "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
+    }, jsx(Tab, null, jsx(ResourcedEmoji, {
+      emojiProvider: emojiProvider,
+      emojiId: emojiId,
+      fitToHeight: 16,
+      showTooltip: true
+    }), jsx("div", {
+      css: counterStyle((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id)
+    }, jsx(Counter, {
+      value: reaction.count
+    }))));
+  }))), reactions.map(reaction => jsx(ReactionView, {
+    key: reaction.emojiId,
+    reaction: reaction,
+    selectedEmojiId: selectedEmoji.id,
+    emojiProvider: emojiProvider
+  })));
+};

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

@@ -0,0 +1 @@
+export { ReactionsDialog } from './ReactionsDialog';