@atlaskit/reactions 22.5.3 → 22.5.4

package/dist/es2019/store/MemoryReactionsStore.js

@@ -1,12 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { Analytics, UFO } from '../analytics';
-import * as Types from '../types';
+import { createAndFireSafe, createRestFailedEvent, createRestSucceededEvent, extractErrorInfo } from '../analytics';
+import { ReactionStatus } from '../types';
 import { batch, batchByKey } from './batched';
-import * as utils from './utils';
-import { isRealErrorFromService } from './utils';
+import { addOne, byEmojiId, flattenAris, getReactionsSortFunction, isRealErrorFromService, readyState, removeOne, updateByEmojiId } from './utils';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../shared/constants';
-import { sampledReactionsRendered } from '../analytics/ufo';
-import { extractErrorInfo } from '../analytics/analytics';
+import { ReactionsAdd, ReactionDetailsFetch, ReactionsRemove, sampledReactionsRendered } from '../ufo';
 
 /**
  * Set of all available UFO experiences relating to reaction element
@@ -15,11 +13,11 @@ export const ufoExperiences = {
   /**
    * Experience when a reaction emoji gets added
    */
-  add: UFO.ReactionsAdd,
+  add: ReactionsAdd,
   /**
    * Experience when a reaction emoji gets removed/decrement
    */
-  remove: UFO.ReactionsRemove,
+  remove: ReactionsRemove,
   /**
    * Experience when the list of reactions gets rendered with sampling
    */
@@ -27,7 +25,7 @@ export const ufoExperiences = {
   /**
    * Experience when a reaction details gets fetched
    */
-  fetchDetails: UFO.ReactionDetailsFetch
+  fetchDetails: ReactionDetailsFetch
 };
 
 /**
@@ -113,7 +111,7 @@ export class MemoryReactionsStore {
             });
           }
         }
-        return utils.readyState(reactions);
+        return readyState(reactions);
       });
     });
     _defineProperty(this, "doAddReaction", reaction => {
@@ -122,7 +120,7 @@ export class MemoryReactionsStore {
         ari,
         emojiId
       } = reaction;
-      this.optmisticUpdate(containerAri, ari, emojiId)(utils.addOne);
+      this.optmisticUpdate(containerAri, ari, emojiId)(addOne);
       this.flash(reaction);
       const exp = ufoExperiences.add.getInstance(`${ari}|${emojiId}`);
       // ufo start reaction experience
@@ -136,13 +134,13 @@ export class MemoryReactionsStore {
       });
       this.client.addReaction(containerAri, ari, emojiId, this.metadata).then(_ => {
         if (this.createAnalyticsEvent) {
-          Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'addReaction');
+          createAndFireSafe(this.createAnalyticsEvent, createRestSucceededEvent, 'addReaction');
         }
         // ufo add reaction success
         exp.success();
       }).catch(error => {
         if (isRealErrorFromService(error.code)) {
-          this.createAnalyticsEvent && Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'addReaction', error.code);
+          this.createAnalyticsEvent && createAndFireSafe(this.createAnalyticsEvent, createRestFailedEvent, 'addReaction', error.code);
           // ufo add reaction failure
           exp.failure({
             metadata: {
@@ -172,7 +170,7 @@ export class MemoryReactionsStore {
         containerAri,
         emojiId
       });
-      this.optmisticUpdate(containerAri, ari, emojiId)(utils.removeOne);
+      this.optmisticUpdate(containerAri, ari, emojiId)(removeOne);
       this.client.deleteReaction(containerAri, ari, emojiId, this.metadata).then(_ => {
         // ufo add reaction success
         exp.success();
@@ -195,7 +193,7 @@ export class MemoryReactionsStore {
        * All reactions are usually fetched in a single call to reactions-service. Need to check why "getReactions" gets called randomly 1-2 times everytime on each fetch request despite using same containerAri.
        */
       const sampledExp = ufoExperiences.render(containerAri);
-      const arisArr = aris.reduce(utils.flattenAris);
+      const arisArr = aris.reduce(flattenAris);
       // ufo start reaction experience
       sampledExp.start({
         samplingRate: SAMPLING_RATE_REACTIONS_RENDERED_EXP
@@ -209,18 +207,18 @@ export class MemoryReactionsStore {
       this.client.getReactions(containerAri, arisArr).then(value => {
         Object.keys(value).map(ari => {
           const reactionsState = this.getReactionsState(containerAri, ari);
-          const reactions = reactionsState && reactionsState.status === Types.ReactionStatus.ready ? reactionsState.reactions : undefined;
-          this.setReactions(containerAri, ari, utils.readyState(value[ari].sort(utils.getReactionsSortFunction(reactions))));
+          const reactions = reactionsState && reactionsState.status === ReactionStatus.ready ? reactionsState.reactions : undefined;
+          this.setReactions(containerAri, ari, readyState(value[ari].sort(getReactionsSortFunction(reactions))));
         });
       }).then(() => {
         if (this.createAnalyticsEvent) {
-          Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'getReactions');
+          createAndFireSafe(this.createAnalyticsEvent, createRestSucceededEvent, 'getReactions');
         }
         sampledExp.success();
       }).catch(error => {
         if (isRealErrorFromService(error.code)) {
           if (this.createAnalyticsEvent) {
-            Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'getReactions');
+            createAndFireSafe(this.createAnalyticsEvent, createRestFailedEvent, 'getReactions');
           }
           sampledExp.failure({
             metadata: {
@@ -233,7 +231,7 @@ export class MemoryReactionsStore {
           ...acc,
           [`${containerAri}|${ari}`]: {
             reactions: [],
-            status: Types.ReactionStatus.error
+            status: ReactionStatus.error
           }
         }), {});
         this.setState({
@@ -310,7 +308,7 @@ export class MemoryReactionsStore {
   withReadyReaction(containerAri, ari) {
     return updater => {
       const reactionsState = this.getReactionsState(containerAri, ari);
-      if (reactionsState && reactionsState.status === Types.ReactionStatus.ready) {
+      if (reactionsState && reactionsState.status === ReactionStatus.ready) {
         const updated = updater(reactionsState);
         if (updated) {
           this.setReactions(containerAri, ari, updated);
@@ -335,7 +333,7 @@ export class MemoryReactionsStore {
   withReaction(reactedCallback, notReactedCallback) {
     return (containerAri, ari, emojiId) => {
       this.withReadyReaction(containerAri, ari)(reactionsState => {
-        const reaction = reactionsState.reactions.find(utils.byEmojiId(emojiId)) || {
+        const reaction = reactionsState.reactions.find(byEmojiId(emojiId)) || {
           containerAri,
           ari,
           emojiId,
@@ -345,7 +343,7 @@ export class MemoryReactionsStore {
         const callback = reaction.reacted || !notReactedCallback ? reactedCallback : notReactedCallback;
         const updatedReaction = callback(reaction);
         if (updatedReaction && !(updatedReaction instanceof Function)) {
-          return utils.readyState(reactionsState.reactions.map(utils.updateByEmojiId(emojiId, updatedReaction)));
+          return readyState(reactionsState.reactions.map(updateByEmojiId(emojiId, updatedReaction)));
         }
         return;
       });

package/dist/esm/MockReactionsClient.js

@@ -6,11 +6,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { constants } from './shared';
+import { DefaultReactionsByShortName, ExtendedReactionsByShortName } from './shared/constants';
 export var containerAri = 'ari:cloud:owner:demo-cloud-id:container/1';
 export var ari = 'ari:cloud:owner:demo-cloud-id:item/1';
 export var getReactionSummary = function getReactionSummary(shortName, count, reacted, extendedReactions) {
-  var getReactionsByShortName = extendedReactions ? constants.ExtendedReactionsByShortName.get(shortName) : constants.DefaultReactionsByShortName.get(shortName);
+  var getReactionsByShortName = extendedReactions ? ExtendedReactionsByShortName.get(shortName) : DefaultReactionsByShortName.get(shortName);
   return {
     ari: ari,
     containerAri: containerAri,

package/dist/esm/analytics/index.js

@@ -1,4 +1,127 @@
-import * as _Analytics from './analytics';
-export { _Analytics as Analytics };
-import * as _UFO from './ufo';
-export { _UFO as UFO };
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { createAndFireEvent } from '@atlaskit/analytics-next';
+import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
+var packageName = "@atlaskit/reactions";
+var packageVersion = "22.5.4";
+/**
+ * TODO: move to utility package?
+ * A random sampling function
+ * sampling algorithm is from @atlassian/jira-coinflip at https://stash.atlassian.com/projects/JIRACLOUD/repos/jira-frontend/browse/src/packages/platform/app-framework/coinflip/src/index.tsx
+ * E.g. isSampled(2) will pass 50% of the time
+ * @param rate The chance that it will pass (1 in <rate> times)
+ * @returns bool, if it passes or not
+ */ // default sampling function to determine which one to be sampled
+export var isSampled = function isSampled(rate) {
+  if (rate === 1) {
+    return true;
+  }
+  if (rate === 0) {
+    return false;
+  }
+  return Math.random() * rate <= 1;
+};
+export var createAndFireEventInElementsChannel = createAndFireEvent('fabric-elements');
+export var createAndFireSafe = function createAndFireSafe(createAnalyticsEvent, creator) {
+  if (createAnalyticsEvent) {
+    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      args[_key - 2] = arguments[_key];
+    }
+    createAndFireEventInElementsChannel(creator.apply(void 0, args))(createAnalyticsEvent);
+  }
+};
+var createPayload = function createPayload(action, actionSubject, eventType, actionSubjectId) {
+  return function () {
+    var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return {
+      action: action,
+      actionSubject: actionSubject,
+      eventType: eventType,
+      actionSubjectId: actionSubjectId,
+      attributes: _objectSpread(_objectSpread({}, attributes), {}, {
+        packageName: packageName,
+        packageVersion: packageVersion
+      })
+    };
+  };
+};
+var calculateDuration = function calculateDuration(startTime) {
+  return startTime ? Date.now() - startTime : undefined;
+};
+var getPreviousState = function getPreviousState(reaction) {
+  if (reaction) {
+    if (reaction.reacted) {
+      return 'existingReacted';
+    }
+    return 'existingNotReacted';
+  }
+  return 'new';
+};
+export var createRestSucceededEvent = function createRestSucceededEvent(actionSubject) {
+  return createPayload('succeeded', actionSubject, OPERATIONAL_EVENT_TYPE)();
+};
+export var createRestFailedEvent = function createRestFailedEvent(actionSubject, errorCode) {
+  return createPayload('failed', actionSubject, OPERATIONAL_EVENT_TYPE)({
+    errorCode: errorCode
+  });
+};
+export var createReactionsRenderedEvent = function createReactionsRenderedEvent(startTime) {
+  return createPayload('rendered', 'reactionView', OPERATIONAL_EVENT_TYPE)({
+    duration: calculateDuration(startTime)
+  });
+};
+export var createPickerButtonClickedEvent = function createPickerButtonClickedEvent(reactionEmojiCount) {
+  return createPayload('clicked', 'reactionPickerButton', UI_EVENT_TYPE)({
+    reactionEmojiCount: reactionEmojiCount
+  });
+};
+export var createPickerCancelledEvent = function createPickerCancelledEvent(startTime) {
+  return createPayload('cancelled', 'reactionPicker', UI_EVENT_TYPE)({
+    duration: calculateDuration(startTime)
+  });
+};
+export var createPickerMoreClickedEvent = function createPickerMoreClickedEvent(startTime) {
+  return createPayload('clicked', 'reactionPicker', UI_EVENT_TYPE, 'more')({
+    duration: calculateDuration(startTime)
+  });
+};
+export var createReactionSelectionEvent = function createReactionSelectionEvent(source, emojiId, reaction, startTime) {
+  return createPayload('clicked', 'reactionPicker', UI_EVENT_TYPE, 'emoji')({
+    duration: calculateDuration(startTime),
+    source: source,
+    previousState: getPreviousState(reaction),
+    emojiId: emojiId
+  });
+};
+export var createReactionHoveredEvent = function createReactionHoveredEvent(startTime) {
+  return createPayload('hovered', 'existingReaction', UI_EVENT_TYPE)({
+    duration: calculateDuration(startTime)
+  });
+};
+export var createReactionFocusedEvent = function createReactionFocusedEvent(startTime) {
+  return createPayload('focused', 'existingReaction', UI_EVENT_TYPE)({
+    duration: calculateDuration(startTime)
+  });
+};
+export var createReactionClickedEvent = function createReactionClickedEvent(added, emojiId) {
+  return createPayload('clicked', 'existingReaction', UI_EVENT_TYPE)({
+    added: added,
+    emojiId: 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 var extractErrorInfo = function extractErrorInfo(error) {
+  if (error instanceof Error) {
+    return {
+      name: error.name,
+      message: error.message
+    };
+  }
+  return error;
+};

package/dist/esm/components/Counter/Counter.js

@@ -4,8 +4,8 @@ import { jsx, css } from '@emotion/react';
 import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
 // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
 
-import { utils } from '../../shared';
-import * as styles from './styles';
+import { formatLargeNumber } from '../../shared/utils';
+import { containerStyle, counterLabelStyle, countStyle, highlightStyle } from './styles';
 
 /**
  * Test id for component top level div
@@ -40,7 +40,7 @@ export var Counter = function Counter(_ref) {
     } else if (value === 0) {
       return '';
     } else {
-      return utils.formatLargeNumber(value);
+      return formatLargeNumber(value);
     }
   };
   var lastValue = useRef();
@@ -54,7 +54,7 @@ export var Counter = function Counter(_ref) {
   return jsx("div", {
     className: className,
     "data-testid": RENDER_COMPONENT_WRAPPER,
-    css: styles.countStyle
+    css: countStyle
   }, jsx(ExitingPersistence, null, jsx(SlideIn, {
     enterFrom: isIncreasing ? 'top' : 'bottom',
     exitTo: isIncreasing ? 'top' : 'bottom',
@@ -63,14 +63,14 @@ export var Counter = function Counter(_ref) {
   }, function (motion, direction) {
     return jsx("div", {
       ref: motion.ref,
-      css: [styles.containerStyle, css({
+      css: [containerStyle, css({
         position: direction === 'exiting' ? 'absolute' : undefined
       })],
       className: motion.className,
       "data-testid": RENDER_COUNTER_TESTID
     }, jsx("span", {
       "data-testid": RENDER_LABEL_TESTID,
-      css: highlight ? [styles.counterLabelStyle, styles.highlightStyle] : styles.counterLabelStyle,
+      css: highlight ? [counterLabelStyle, highlightStyle] : counterLabelStyle,
       key: value
     }, label));
   })));

package/dist/esm/components/Counter/index.js

@@ -1,3 +1 @@
-export { Counter, RENDER_COUNTER_TESTID, RENDER_COMPONENT_WRAPPER, RENDER_LABEL_TESTID } from './Counter';
-import * as _styles from './styles';
-export { _styles as styles };
+export { Counter, RENDER_COUNTER_TESTID, RENDER_COMPONENT_WRAPPER, RENDER_LABEL_TESTID } from './Counter';

package/dist/esm/components/EmojiButton/EmojiButton.js

@@ -3,8 +3,9 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { jsx } from '@emotion/react';
 import { ResourcedEmoji } from '@atlaskit/emoji';
-import { i18n, utils } from '../../shared';
-import * as styles from './styles';
+import { messages } from '../../shared/i18n';
+import { isLeftClick } from '../../shared/utils';
+import { emojiButtonStyle } from './styles';
 export var RENDER_BUTTON_TESTID = 'button-emoji-id';
 /**
  * custom button to render the custom emoji selector inside the reaction picker
@@ -15,7 +16,7 @@ export var EmojiButton = function EmojiButton(_ref) {
     emojiProvider = _ref.emojiProvider;
   var onButtonClick = function onButtonClick(event) {
     event.preventDefault();
-    if (onClick && utils.isLeftClick(event)) {
+    if (onClick && isLeftClick(event)) {
       onClick(emojiId, undefined, event);
     }
   };
@@ -23,11 +24,11 @@ export var EmojiButton = function EmojiButton(_ref) {
   return jsx("button", {
     "data-testid": RENDER_BUTTON_TESTID,
     onClick: onButtonClick,
-    "aria-label": intl.formatMessage(i18n.messages.reactWithEmoji, {
+    "aria-label": intl.formatMessage(messages.reactWithEmoji, {
       emoji: emojiId.shortName
     }),
     type: "button",
-    css: styles.emojiButtonStyle
+    css: emojiButtonStyle
   }, jsx(ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId

package/dist/esm/components/FlashAnimation/FlashAnimation.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import * as styles from './styles';
+import { containerStyle, flashStyle } from './styles';
 /**
  * Test id for wrapper FlashAnimation div
  */
@@ -13,7 +13,7 @@ export var RENDER_FLASHANIMATION_TESTID = 'flash-animation';
 export var FlashAnimation = function FlashAnimation(props) {
   return jsx("div", {
     className: props.className,
-    css: [styles.containerStyle, props.flash && styles.flashStyle],
+    css: [containerStyle, props.flash && flashStyle],
     "data-testid": RENDER_FLASHANIMATION_TESTID
   }, props.children);
 };

package/dist/esm/components/Reaction/Reaction.js

@@ -7,12 +7,13 @@ import { useIntl } from 'react-intl-next';
 import { jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji';
-import { Analytics } from '../../analytics';
+import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEvent, createReactionHoveredEvent } from '../../analytics';
 import { Counter } from '../Counter';
 import { FlashAnimation } from '../FlashAnimation';
 import { ReactionTooltip } from '../ReactionTooltip';
-import { i18n, utils } from '../../shared';
-import * as styles from './styles';
+import { messages } from '../../shared/i18n';
+import { isLeftClick } from '../../shared/utils';
+import { emojiStyle, flashStyle, reactedStyle, reactionStyle } from './styles';
 /**
  * Test id for Reaction item wrapper div
  */
@@ -80,10 +81,10 @@ export var Reaction = function Reaction(_ref) {
   }, [emojiProvider, reaction.emojiId]);
   var handleClick = useCallback(function (event) {
     event.preventDefault();
-    if (utils.isLeftClick(event)) {
+    if (isLeftClick(event)) {
       var reacted = reaction.reacted,
         _emojiId = reaction.emojiId;
-      Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionClickedEvent, !reacted, _emojiId);
+      createAndFireSafe(createAnalyticsEvent, createReactionClickedEvent, !reacted, _emojiId);
       onClick(reaction.emojiId, event);
     }
   }, [createAnalyticsEvent, reaction, onClick]);
@@ -93,7 +94,7 @@ export var Reaction = function Reaction(_ref) {
     if (!reaction.users || !reaction.users.length) {
       focusStart.current = Date.now();
     }
-    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionHoveredEvent, focusStart.current);
+    createAndFireSafe(createAnalyticsEvent, createReactionHoveredEvent, focusStart.current);
     onMouseEnter(reaction.emojiId, event);
   }, [createAnalyticsEvent, reaction, onMouseEnter]);
   var handleFocused = useCallback(function (event) {
@@ -102,7 +103,7 @@ export var Reaction = function Reaction(_ref) {
     if (!reaction.users || !reaction.users.length) {
       hoverStart.current = Date.now();
     }
-    Analytics.createAndFireSafe(createAnalyticsEvent, Analytics.createReactionFocusedEvent, hoverStart.current);
+    createAndFireSafe(createAnalyticsEvent, createReactionFocusedEvent, hoverStart.current);
     onFocused(reaction.emojiId, event);
   }, [createAnalyticsEvent, reaction, onFocused]);
   var handleOpenReactionsDialog = function handleOpenReactionsDialog(emojiId) {
@@ -117,8 +118,8 @@ export var Reaction = function Reaction(_ref) {
     isEnabled: isTooltipEnabled
   }, jsx("button", {
     className: className,
-    css: [styles.reactionStyle, reaction.reacted && styles.reactedStyle],
-    "aria-label": intl.formatMessage(i18n.messages.reactWithEmoji, {
+    css: [reactionStyle, reaction.reacted && reactedStyle],
+    "aria-label": intl.formatMessage(messages.reactWithEmoji, {
       emoji: emojiName
     }),
     type: "button",
@@ -130,9 +131,9 @@ export var Reaction = function Reaction(_ref) {
     "data-emoji-button-id": reaction.emojiId
   }, jsx(FlashAnimation, {
     flash: flash,
-    css: styles.flashStyle
+    css: flashStyle
   }, jsx("div", {
-    css: [styles.emojiStyle, reaction.count === 0 && {
+    css: [emojiStyle, reaction.count === 0 && {
       padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)", " 10px")
     }]
   }, jsx(ResourcedEmoji, {

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

@@ -10,7 +10,7 @@ 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 { messages } from '../../shared/i18n';
 import { reactionViewStyle, userListStyle, userStyle, centerSpinner } from './styles';
 export var ReactionView = function ReactionView(_ref) {
   var selectedEmojiId = _ref.selectedEmojiId,
@@ -65,7 +65,7 @@ export var ReactionView = function ReactionView(_ref) {
       shortName: ''
     },
     fitToHeight: 24
-  }), intl.formatMessage(i18n.messages.emojiName, {
+  }), intl.formatMessage(messages.emojiName, {
     emojiName: emojiName
   })), alphabeticalNames.length === 0 ? jsx("div", {
     css: centerSpinner

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

@@ -5,7 +5,8 @@ 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 { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
+import { messages } from '../../shared/i18n';
 import { ReactionsList } from './ReactionsList';
 import { containerStyle, titleStyle } from './styles';
 
@@ -54,7 +55,7 @@ export var ReactionsDialog = function ReactionsDialog(_ref) {
 
   /* set Reactions Border Width , 9 Number of reactions to display*/
   var reactionsBorderWidth = useMemo(function () {
-    return Math.ceil(reactions.length / constants.NUMBER_OF_REACTIONS_TO_DISPLAY) * 100;
+    return Math.ceil(reactions.length / NUMBER_OF_REACTIONS_TO_DISPLAY) * 100;
   }, [reactions]);
 
   /* Callback from IntersectionObserver to set/unset classNames based on visibility to toggle styles*/
@@ -63,7 +64,7 @@ export var ReactionsDialog = function ReactionsDialog(_ref) {
       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;
+      var emojiId = emojiElement === null || emojiElement === 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 */
@@ -106,7 +107,7 @@ export 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);
+        observerRef === null || observerRef === void 0 || (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 || _observerRef$current.observe(child);
       });
     }
     return function () {
@@ -128,7 +129,7 @@ export var ReactionsDialog = function ReactionsDialog(_ref) {
     testId: RENDER_MODAL_TESTID
   }, jsx(ModalHeader, null, jsx("div", {
     css: titleStyle
-  }, jsx(ModalTitle, null, intl.formatMessage(i18n.messages.reactionsCount, {
+  }, jsx(ModalTitle, null, intl.formatMessage(messages.reactionsCount, {
     count: totalReactionsCount
   })))), jsx(ModalBody, null, jsx("div", {
     css: containerStyle(reactionsBorderWidth),
@@ -142,5 +143,5 @@ export var ReactionsDialog = function ReactionsDialog(_ref) {
     appearance: "primary",
     onClick: handleCloseReactionsDialog,
     autoFocus: true
-  }, intl.formatMessage(i18n.messages.closeReactionsDialog))));
+  }, intl.formatMessage(messages.closeReactionsDialog))));
 };

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

@@ -1,11 +1,11 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { B400, N500, N800 } from '@atlaskit/theme/colors';
-import { constants } from '../../shared';
+import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
 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 = constants.NUMBER_OF_REACTIONS_TO_DISPLAY * (REACTIONS_CONTAINER_WIDTH + REACTION_RIGHT_MARGIN) + REACTIONS_CONTAINER_WIDTH - 2;
+var CONTAINER_WIDTH = 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

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

@@ -9,13 +9,13 @@ import { FormattedMessage } from 'react-intl-next';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { layers } from '@atlaskit/theme/constants';
+import { useCloseManager } from '../../hooks/useCloseManager';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { messages } from '../../shared/i18n';
+import { PickerRender } from '../../ufo';
 import { Selector } from '../Selector';
 import { Trigger } from '../Trigger';
-import { UFO } from '../../analytics';
-import { i18n } from '../../shared';
-import { useCloseManager } from '../../hooks';
-import * as styles from './styles';
-import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { contentStyle, pickerStyle, popupStyle, popupWrapperStyle } from './styles';
 import { RepositionOnUpdate } from './RepositionOnUpdate';
 
 /**
@@ -77,7 +77,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     _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,
+    tooltipContent = _props$tooltipContent === void 0 ? jsx(FormattedMessage, messages.addReaction) : _props$tooltipContent,
     emojiPickerSize = props.emojiPickerSize;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
@@ -125,7 +125,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
       isOpen: false
     }));
     // ufo abort reaction experience
-    UFO.PickerRender.abort({
+    PickerRender.abort({
       metadata: {
         emojiId: _id,
         source: 'ReactionPicker',
@@ -165,23 +165,23 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
    */
   var onTriggerClick = function onTriggerClick() {
     // ufo start reactions picker open experience
-    UFO.PickerRender.start();
+    PickerRender.start();
     setSettings({
       isOpen: !settings.isOpen,
       showFullPicker: !!allowAllEmojis && Array.isArray(pickerQuickReactionEmojiIds) && pickerQuickReactionEmojiIds.length === 0
     });
     onOpen();
     // ufo reactions picker opened success
-    UFO.PickerRender.success();
+    PickerRender.success();
   };
   var wrapperClassName = " ".concat(settings.isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
   useLayoutEffect(function () {
     var _updatePopper$current;
-    (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 ? void 0 : _updatePopper$current.call(updatePopper);
+    (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 || _updatePopper$current.call(updatePopper);
   }, [settings]);
   return jsx("div", {
     className: wrapperClassName,
-    css: styles.pickerStyle,
+    css: pickerStyle,
     "data-testid": RENDER_REACTIONPICKER_TESTID,
     ref: wrapperRef
   }, jsx(Manager, null, jsx(Reference, null, function (_ref) {
@@ -216,7 +216,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     onSelection: onEmojiSelected,
     size: emojiPickerSize
   }) : jsx("div", {
-    css: styles.contentStyle
+    css: contentStyle
   }, jsx(Selector, {
     emojiProvider: emojiProvider,
     onSelection: onEmojiSelected,
@@ -262,13 +262,13 @@ var PopperWrapper = function PopperWrapper(props) {
           setPopupRef(node);
         }
       },
-      css: styles.popupWrapperStyle,
+      css: popupWrapperStyle,
       tabIndex: 0
     }, jsx(RepositionOnUpdate, {
       update: update,
       settings: settings
     }, jsx("div", {
-      css: styles.popupStyle
+      css: popupStyle
     }, children)));
   });
 };