@atlaskit/reactions 22.5.2 → 22.5.4

package/dist/es2019/components/Selector/Selector.js

@@ -2,10 +2,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
-import { constants } from '../../shared';
+import { DefaultReactions } from '../../shared/constants';
 import { EmojiButton } from '../EmojiButton';
 import { ShowMore } from '../ShowMore';
-import * as styles from './styles';
+import { emojiStyle, revealStyle, selectorStyle } from './styles';
 
 /**
  * Test id for wrapper Selector div
@@ -19,7 +19,7 @@ export const Selector = ({
   onMoreClick,
   onSelection,
   showMore,
-  pickerQuickReactionEmojiIds = constants.DefaultReactions
+  pickerQuickReactionEmojiIds = DefaultReactions
 }) => {
   const [selection, setSelection] = useState();
   /**
@@ -68,7 +68,7 @@ export const Selector = ({
     return jsx("div", {
       key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
       className: emoji === selection ? 'selected' : undefined,
-      css: [styles.emojiStyle, styles.revealStyle],
+      css: [emojiStyle, revealStyle],
       style: emojiStyleAnimation(index),
       "data-testid": RENDER_SELECTOR_TESTID
     }, jsx(Tooltip, {
@@ -80,12 +80,12 @@ export const Selector = ({
     })));
   };
   return jsx("div", {
-    css: styles.selectorStyle
+    css: selectorStyle
   }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? jsx(ShowMore, {
     key: "more",
-    buttonStyle: styles.revealStyle,
+    buttonStyle: revealStyle,
     style: {
-      button: emojiStyleAnimation(constants.DefaultReactions.length)
+      button: emojiStyleAnimation(DefaultReactions.length)
     },
     onClick: onMoreClick
   }) : null);

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

@@ -1,3 +1 @@
-export { Selector, RENDER_SELECTOR_TESTID } from './Selector';
-import * as _styles from './styles';
-export { _styles as styles };
+export { Selector, RENDER_SELECTOR_TESTID } from './Selector';

package/dist/es2019/components/ShowMore/ShowMore.js

@@ -4,8 +4,8 @@ import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import Tooltip from '@atlaskit/tooltip';
-import { i18n } from '../../shared';
-import * as styles from './styles';
+import { messages } from '../../shared/i18n';
+import { moreButtonStyle, moreEmojiContainerStyle, separatorStyle } from './styles';
 
 /**
  * Test id for wrapper button
@@ -23,17 +23,17 @@ export const ShowMore = ({
 }) => {
   return jsx("div", {
     className: className.container,
-    css: styles.moreEmojiContainerStyle,
+    css: moreEmojiContainerStyle,
     style: style.container,
     "data-testid": RENDER_WRAPPER_TESTID
   }, jsx("div", {
-    css: styles.separatorStyle
-  }), jsx(FormattedMessage, i18n.messages.moreEmoji, message => jsx(Tooltip, {
+    css: separatorStyle
+  }), jsx(FormattedMessage, messages.moreEmoji, message => jsx(Tooltip, {
     content: message
   }, jsx("button", {
     className: className.button,
-    css: [styles.moreButtonStyle, buttonStyle],
-    "aria-label": i18n.messages.moreEmoji.defaultMessage,
+    css: [moreButtonStyle, buttonStyle],
+    "aria-label": messages.moreEmoji.defaultMessage,
     type: "button",
     style: style.button,
     onClick: onClick,

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

@@ -12,8 +12,8 @@ export const moreButtonStyle = css({
   border: 0,
   borderRadius: `${borderRadius()}px`,
   cursor: 'pointer',
-  margin: '4px 4px 4px 0',
-  padding: '4px',
+  margin: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-050, 4px)"} 0`,
+  padding: "var(--ds-space-050, 4px)",
   width: '38px',
   verticalAlign: 'top',
   '&:hover': {
@@ -22,7 +22,7 @@ export const moreButtonStyle = css({
 });
 export const separatorStyle = css({
   backgroundColor: `var(--ds-border, ${N30A})`,
-  margin: '8px 8px 8px 4px',
+  margin: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-050, 4px)"}`,
   width: '1px',
   height: '60%',
   display: 'inline-block'

package/dist/es2019/components/Trigger/Trigger.js

@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import Tooltip from '@atlaskit/tooltip';
 import EmojiAddIcon from '@atlaskit/icon/glyph/emoji-add';
-import * as styles from './styles';
+import { triggerStyle } from './styles';
 
 /**
  * Test id for the tooltip
@@ -33,7 +33,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     content: tooltipContent
   }, jsx(Button, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    css: styles.triggerStyle({
+    css: triggerStyle({
       miniMode,
       disabled
     }),

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

@@ -18,7 +18,7 @@ export const triggerStyle = ({
   lineHeight: '16px',
   ...(miniMode && {
     minWidth: '24px',
-    padding: '4px',
+    padding: "var(--ds-space-050, 4px)",
     border: 'none',
     borderRadius: `${borderRadius()}px`
   }),

package/dist/es2019/containers/ConnectedReactionPicker/ConnectedReactionPicker.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { ReactionPicker, UfoErrorBoundary } from '../../components';
-import { UFO } from '../../analytics';
+import { PickerRender } from '../../ufo';
 /**
  * Reaction Picker component
  */
@@ -22,7 +22,7 @@ export const ConnectedReactionPicker = props => {
     })();
   };
   return /*#__PURE__*/React.createElement(UfoErrorBoundary, {
-    experiences: [UFO.PickerRender]
+    experiences: [PickerRender]
   }, /*#__PURE__*/React.createElement(ReactionPicker, _extends({}, props, {
     onSelection: onSelection
   })));

package/dist/es2019/containers/index.js

@@ -1,2 +1,2 @@
-export * from './ConnectedReactionPicker';
-export * from './ConnectedReactionsView';
+export { ConnectedReactionPicker } from './ConnectedReactionPicker';
+export { ConnectedReactionsView } from './ConnectedReactionsView';

package/dist/es2019/index.js

@@ -1,8 +1,30 @@
-export { UFO } from './analytics';
+import { DefaultReactions, DefaultReactionsByShortName, ExtendedReactions, ExtendedReactionsByShortName, NUMBER_OF_REACTIONS_TO_DISPLAY, SAMPLING_RATE_REACTIONS_RENDERED_EXP, TOOLTIP_USERS_LIMIT } from './shared/constants';
+import { ComponentName, ExperienceName, PickerRender, ReactionsAdd, ReactionDetailsFetch, ReactionDialogClosed, ReactionDialogOpened, ReactionDialogSelectedReactionChanged, ReactionsRemove, ReactionsRendered, sampledReactionsRendered } from './ufo';
 export { ReactionServiceClient } from './client';
-// TODO: Convert all calls for ReactionRequest to Request, RequestClient to Client and ReactionsStore to Store
-
-export { constants } from './shared';
 export { Reaction, ReactionPicker, Reactions } from './components';
 export { ConnectedReactionPicker, ConnectedReactionsView } from './containers';
-export { MemoryReactionsStore, ReactionConsumer } from './store';
+export { MemoryReactionsStore, ReactionConsumer } from './store';
+// TODO: Convert all calls for ReactionRequest to Request, RequestClient to Client and ReactionsStore to Store
+
+export const constants = {
+  DefaultReactions,
+  DefaultReactionsByShortName,
+  ExtendedReactions,
+  ExtendedReactionsByShortName,
+  NUMBER_OF_REACTIONS_TO_DISPLAY,
+  SAMPLING_RATE_REACTIONS_RENDERED_EXP,
+  TOOLTIP_USERS_LIMIT
+};
+export const UFO = {
+  ComponentName,
+  ExperienceName,
+  PickerRender,
+  ReactionsAdd,
+  ReactionDetailsFetch,
+  ReactionDialogClosed,
+  ReactionDialogOpened,
+  ReactionDialogSelectedReactionChanged,
+  ReactionsRemove,
+  ReactionsRendered,
+  sampledReactionsRendered
+};

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

@@ -3,14 +3,14 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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/client/ReactionServiceClient.js

@@ -1,8 +1,8 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 { utils } from '@atlaskit/util-service-support';
 /**
  * Utility class to retrieve/modify all actions on reactions collection

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/Counter/styles.js

@@ -6,7 +6,7 @@ export var countStyle = css({
   color: "var(--ds-text-subtlest, ".concat(N90, ")"),
   overflow: 'hidden',
   position: 'relative',
-  padding: '4px 8px 4px 0',
+  padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)", " 0"),
   lineHeight: '14px'
 });
 export var containerStyle = css({

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/EmojiButton/styles.js

@@ -8,7 +8,7 @@ export var emojiButtonStyle = css({
   borderRadius: '5px',
   cursor: 'pointer',
   margin: '0',
-  padding: '10px 8px',
+  padding: "10px ".concat("var(--ds-space-100, 8px)"),
   '&:hover > span': {
     transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
     transform: 'scale(1.33)'

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);
 };