@atlaskit/reactions 22.2.0 → 22.2.2

package/dist/es2019/MockReactionsClient.js

@@ -19,11 +19,9 @@ export const getUser = (id, displayName) => ({
     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'), 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)]
@@ -31,18 +29,16 @@ export const simpleMockData = {
 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, 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) => {
@@ -51,23 +47,20 @@ export class MockReactionsClient {
       return results;
     }, {});
   }
-
   async getDetailedReaction(containerAri, ari, emojiId) {
     await this.delayPromise();
     const reactionKey = `${containerAri}|${ari}`;
     const reactionsMockData = this.mockData[reactionKey];
-
     if (reactionsMockData) {
       const reaction = reactionsMockData.find(reaction_1 => reaction_1.emojiId === emojiId);
-
       if (reaction) {
         const users = [...defaultUsers].slice(Math.floor(Math.random() * 4), Math.floor(Math.random() * 9) + 4).slice(0, reaction.count);
-        return { ...reaction,
+        return {
+          ...reaction,
           users
         };
       }
     }
-
     return {
       containerAri,
       ari,
@@ -77,27 +70,24 @@ export class MockReactionsClient {
       users: []
     };
   }
-
   async addReaction(containerAri, ari, emojiId) {
     await this.delayPromise();
     const reactionKey = getReactionKey(containerAri, ari);
     let found = false;
     const reactionsMockData = this.mockData[reactionKey];
-
     if (reactionsMockData) {
       this.mockData[reactionKey] = reactionsMockData.map(reaction => {
         if (reaction.emojiId === emojiId) {
           found = true;
-          return { ...reaction,
+          return {
+            ...reaction,
             count: reaction.count + 1,
             reacted: true
           };
         }
-
         return reaction;
       });
     }
-
     if (!found) {
       this.mockData[reactionKey] = [...(reactionsMockData ? reactionsMockData : []), {
         containerAri,
@@ -107,10 +97,8 @@ export class MockReactionsClient {
         reacted: true
       }];
     }
-
     return this.mockData[reactionKey];
   }
-
   async deleteReaction(containerAri, ari, emojiId) {
     await this.delayPromise();
     const reactionKey = getReactionKey(containerAri, ari);
@@ -119,16 +107,14 @@ export class MockReactionsClient {
         if (reaction.count === 1) {
           return undefined;
         }
-
-        return { ...reaction,
+        return {
+          ...reaction,
           count: reaction.count - 1,
           reacted: false
         };
       }
-
       return reaction;
     }).filter(reaction_1 => !!reaction_1);
     return this.mockData[reactionKey];
   }
-
 }

package/dist/es2019/analytics/analytics.js

@@ -7,32 +7,27 @@ export const createAndFireSafe = (createAnalyticsEvent, creator, ...args) => {
     createAndFireEventInElementsChannel(creator(...args))(createAnalyticsEvent);
   }
 };
-
 const createPayload = (action, actionSubject, eventType, actionSubjectId) => (attributes = {}) => ({
   action,
   actionSubject,
   eventType,
   actionSubjectId,
-  attributes: { ...attributes,
+  attributes: {
+    ...attributes,
     packageName,
     packageVersion
   }
 });
-
 const calculateDuration = startTime => startTime ? Date.now() - startTime : undefined;
-
 const getPreviousState = reaction => {
   if (reaction) {
     if (reaction.reacted) {
       return 'existingReacted';
     }
-
     return 'existingNotReacted';
   }
-
   return 'new';
 };
-
 export const createRestSucceededEvent = actionSubject => createPayload('succeeded', actionSubject, OPERATIONAL_EVENT_TYPE)();
 export const createRestFailedEvent = (actionSubject, errorCode) => createPayload('failed', actionSubject, OPERATIONAL_EVENT_TYPE)({
   errorCode
@@ -65,12 +60,12 @@ export const createReactionClickedEvent = (added, emojiId) => createPayload('cli
   added,
   emojiId
 });
+
 /**
  * Used for store failure metadata for analytics
  * @param error The error could be a service error with {code, reason} or an Error
  * @returns any
  */
-
 export const extractErrorInfo = error => {
   if (error instanceof Error) {
     return {
@@ -78,6 +73,5 @@ export const extractErrorInfo = error => {
       message: error.message
     };
   }
-
   return error;
 };

package/dist/es2019/analytics/ufo.js

@@ -1,5 +1,6 @@
 import { ConcurrentExperience, UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { withSampling } from '@atlaskit/emoji';
+
 /**
  * Initial experience config object (deferred from @atlaskit/ufo inner types)
  */
@@ -17,16 +18,15 @@ const createExperienceConfig = (componentName, type, performanceType) => {
     performanceType
   };
 };
+
 /**
  * Types of experiences
  */
-
-
 export let ExperienceName;
+
 /**
  * UFO types of components been instrumented
  */
-
 (function (ExperienceName) {
   ExperienceName["REACTIONS_RENDERED"] = "reactions-rendered";
   ExperienceName["PICKER_OPENED"] = "reactions-picker-opened";
@@ -37,53 +37,51 @@ export let ExperienceName;
   ExperienceName["REACTION_DIALOG_CLOSED"] = "reaction-dialog-closed";
   ExperienceName["REACTION_DIALOG_SELECTED_REACTION_CHANGED"] = "reaction-dialog-selected-reaction-changed";
 })(ExperienceName || (ExperienceName = {}));
-
 export let ComponentName;
+
 /**
  * Experience when the emoji picker is opened
  */
-
 (function (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));
+
 /**
  * Experience when the list of reactions gets rendered
  */
-
 export const ReactionsRendered = new ConcurrentExperience(ExperienceName.REACTIONS_RENDERED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Load, ExperiencePerformanceTypes.PageSegmentLoad));
+
 /**
  * Experience when a reaction emoji gets added
  */
-
 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
  */
-
 export const ReactionDetailsFetch = new ConcurrentExperience(ExperienceName.REACTION_DETAILS_FETCHED, createExperienceConfig(ComponentName.REACTION_ITEM, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
+
 /**
  * Experience when a reaction emoji gets removed/decrement
  */
-
 export const ReactionsRemove = new ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));
 export const sampledReactionsRendered = instanceId => withSampling(ReactionsRendered.getInstance(instanceId));

package/dist/es2019/client/ReactionServiceClient.js

@@ -1,6 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { utils } from '@atlaskit/util-service-support';
-
 /**
  * Utility class to retrieve/modify all actions on reactions collection
  */
@@ -19,44 +18,40 @@ export class ReactionServiceClient {
    * @param sessionToken oAuth token for reactions emoji services
    */
   constructor(baseUrl, sessionToken) {
-    _defineProperty(this, "requestService", (path, options) => utils.requestService(this.serviceConfig, { ...options,
+    _defineProperty(this, "requestService", (path, options) => utils.requestService(this.serviceConfig, {
+      ...options,
       path
     }));
-
     this.serviceConfig = {
       url: baseUrl
     };
     this.sessionToken = sessionToken;
   }
+
   /**
    * Get http headers for the "fetch" request
    * @param hasBody
    */
-
-
   getHeaders() {
     const headers = {};
     headers['Accept'] = 'application/json';
     headers['Content-Type'] = 'application/json';
-
     if (this.sessionToken) {
       headers['Authorization'] = this.sessionToken;
     }
-
     return headers;
   }
+
   /**
    * Send a request to remote service
    * @param path endpoint api url
    * @param options Optional custom params
    */
 
-
   getReactions(containerAri, aris) {
     if (aris.length === 0) {
       return Promise.resolve({});
     }
-
     return this.requestService('reactions/view', {
       requestInit: {
         method: 'POST',
@@ -68,7 +63,6 @@ export class ReactionServiceClient {
       }
     });
   }
-
   getDetailedReaction(containerAri, ari, emojiId) {
     const reactionId = `${containerAri}|${ari}|${emojiId}`;
     const headers = this.getHeaders();
@@ -83,7 +77,6 @@ export class ReactionServiceClient {
       }
     });
   }
-
   addReaction(containerAri, ari, emojiId, metadata) {
     return this.requestService('reactions', {
       requestInit: {
@@ -103,7 +96,6 @@ export class ReactionServiceClient {
       reactions
     }) => reactions);
   }
-
   deleteReaction(containerAri, ari, emojiId, metadata) {
     return this.requestService('reactions', {
       queryParams: {
@@ -123,5 +115,4 @@ export class ReactionServiceClient {
       reactions
     }) => reactions);
   }
-
 }

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

@@ -1,27 +1,26 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx, css } from '@emotion/react';
-import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion'; // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
-
+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 { utils } from '../../shared';
 import * as styles from './styles';
+
 /**
  * Test id for component top level div
  */
-
 export const RENDER_COMPONENT_WRAPPER = 'counter-wrapper';
+
 /**
  * Test id for wrapper div of the counter inside the slider
  */
-
 export const RENDER_COUNTER_TESTID = 'counter-container';
+
 /**
  * Counter label value wrapper div
  */
-
 export const RENDER_LABEL_TESTID = 'counter_label_wrapper';
-
 /**
  * Display reaction count next to the emoji button
  */
@@ -43,7 +42,6 @@ export const Counter = ({
       return utils.formatLargeNumber(value);
     }
   };
-
   const previousValue = usePreviousValue(value);
   const label = getLabel(value);
   const increase = previousValue ? previousValue < value : false;

package/dist/es2019/components/EmojiButton/EmojiButton.js

@@ -6,7 +6,6 @@ import { ResourcedEmoji } from '@atlaskit/emoji';
 import { i18n, utils } from '../../shared';
 import * as styles from './styles';
 export const RENDER_BUTTON_TESTID = 'button-emoji-id';
-
 /**
  * custom button to render the custom emoji selector inside the reaction picker
  */
@@ -17,12 +16,10 @@ export const EmojiButton = ({
 }) => {
   const onButtonClick = event => {
     event.preventDefault();
-
     if (onClick && utils.isLeftClick(event)) {
       onClick(emojiId, undefined, event);
     }
   };
-
   const intl = useIntl();
   return jsx("button", {
     "data-testid": RENDER_BUTTON_TESTID,

package/dist/es2019/components/FlashAnimation/FlashAnimation.js

@@ -2,15 +2,14 @@
 import React from 'react';
 import { jsx } from '@emotion/react';
 import * as styles from './styles';
-
 /**
  * Test id for wrapper FlashAnimation div
  */
 export const RENDER_FLASHANIMATION_TESTID = 'flash-animation';
+
 /**
  * Flash animation background component. See Reaction component for usage.
  */
-
 export const FlashAnimation = props => jsx("div", {
   className: props.className,
   css: [styles.containerStyle, props.flash && styles.flashStyle],

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

@@ -10,12 +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';
-
 /**
  * Render an emoji reaction button
  */
@@ -41,14 +39,14 @@ export const Reaction = ({
   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
+  };
 
+  // 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(() => {
     (async () => {
       const emojiResource = await Promise.resolve(emojiProvider);
       const foundEmoji = await emojiResource.findById(reaction.emojiId);
-
       if (foundEmoji) {
         setEmojiName(foundEmoji.name);
       }
@@ -56,7 +54,6 @@ export const Reaction = ({
   }, [emojiProvider, reaction.emojiId]);
   const handleClick = useCallback(event => {
     event.preventDefault();
-
     if (utils.isLeftClick(event)) {
       const {
         reacted,
@@ -69,31 +66,25 @@ export const Reaction = ({
   const handleMouseEnter = useCallback(event => {
     event.preventDefault();
     setIsTooltipEnabled(true);
-
     if (!reaction.users || !reaction.users.length) {
       focusStart.current = Date.now();
     }
-
     Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionHoveredEvent, focusStart.current);
     onMouseEnter(reaction.emojiId, event);
   }, [createAnalyticsEvent, reaction, onMouseEnter]);
   const handleFocused = useCallback(event => {
     event.preventDefault();
     setIsTooltipEnabled(true);
-
     if (!reaction.users || !reaction.users.length) {
       hoverStart.current = Date.now();
     }
-
     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,

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

@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { B50, B75, B300, N20, N40, N400, B100 } from '@atlaskit/theme/colors';
-
 /**
  * Default styling px height for an emoji reaction
  */
 const akHeight = 24;
+
 /**
  * Styling Note:
  * Padding and line height are set within the child components

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx   jsx */
 import { useEffect, useState, useMemo } from 'react';
 import { useIntl } from 'react-intl-next';
@@ -24,7 +23,6 @@ export const ReactionView = ({
         shortName: '',
         id: selectedEmojiId
       });
-
       if (emoji && emoji.name) {
         setEmojiName(emoji.name);
       }
@@ -32,7 +30,6 @@ export const ReactionView = ({
   }, [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]);
@@ -56,7 +53,6 @@ export const ReactionView = ({
     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,

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

@@ -7,12 +7,11 @@ import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaski
 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,
@@ -20,7 +19,6 @@ const getDimensions = container => {
     scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
   };
 };
-
 export const ReactionsDialog = ({
   reactions = [],
   handleCloseReactionsDialog = () => {},
@@ -42,25 +40,22 @@ export const ReactionsDialog = ({
   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*/
 
+  /* 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*/
 
+  /* 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);
         }
@@ -68,7 +63,6 @@ export const ReactionsDialog = ({
         if (emojiId === selectedEmojiId && !isSelectedEmojiViewed.current) {
           isSelectedEmojiViewed.current = true;
         }
-
         element.classList.remove('disabled');
       }
     });
@@ -83,15 +77,14 @@ export const ReactionsDialog = ({
       } = 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*/
 
+  /* Set up InterSectionObserver to observer reaction elements on navigating*/
   useEffect(() => {
     if (reactionsContainerRef) {
       const options = {
@@ -103,11 +96,9 @@ export const ReactionsDialog = ({
       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();
@@ -118,8 +109,8 @@ export const ReactionsDialog = ({
   const setRef = useCallback(node => {
     if (!reactionsContainerRef) {
       setReactionsContainerRef(node);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return jsx(Modal, {
     onClose: handleCloseReactionsDialog,

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

@@ -20,12 +20,13 @@ export const ReactionsList = ({
       id: initialEmojiId
     };
   });
-  const theme = useThemeObserver();
+  const {
+    colorMode
+  } = useThemeObserver();
   const onTabChange = useCallback((index, analyticsEvent) => {
     if (index === selectedEmoji.index) {
       return;
     }
-
     const emojiId = reactions[index].emojiId;
     setSelectedEmoji({
       index,
@@ -46,7 +47,7 @@ export const ReactionsList = ({
       shortName: ''
     };
     return jsx("div", {
-      css: customTabWrapper((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id, selectedEmoji.id, theme),
+      css: 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