@atlaskit/reactions 21.7.0 → 21.8.1

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { useIntl } from 'react-intl-next';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { ResourcedEmoji } from '@atlaskit/emoji';
 import { i18n, utils } from '../../shared';
 import * as styles from './styles';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 export const emojiButtonStyle = css({
   outline: 'none',
   display: 'flex',

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import * as styles from './styles';
 
 /**

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, keyframes } from '@emotion/core';
+import { css, keyframes } from '@emotion/react';
 import { B75, B300 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 const flashTime = 700;

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji';
 import { Analytics } from '../../analytics';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { B50, B75, B300, N20, N40, N400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 /**

package/dist/es2019/components/ReactionPicker/ReactionPicker.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
@@ -16,6 +16,11 @@ import * as styles from './styles';
  */
 
 export const RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
+/**
+ * Emoji Picker Controller Id for Accessibility Labels
+ */
+
+const PICKER_CONTROL_ID = 'emoji-picker';
 const popperModifiers = [
 /**
  Removing this applyStyle modifier as it throws client errors ref:
@@ -107,7 +112,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     UFO.PickerRender.abort({
       metadata: {
         emojiId: _id,
-        source: 'Reaction-Picker',
+        source: 'ReactionPicker',
         reason: 'close dialog'
       }
     });
@@ -183,6 +188,10 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     ref: popperRef
   }) => // Render a button to open the <Selector /> panel
   jsx(Trigger, {
+    ariaAttributes: {
+      'aria-expanded': settings.isOpen,
+      'aria-controls': PICKER_CONTROL_ID
+    },
     ref: popperRef,
     onClick: onTriggerClick,
     miniMode: miniMode,
@@ -198,6 +207,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
   }) => {
     updatePopper.current = update;
     return jsx(Fragment, null, settings.isOpen && jsx("div", {
+      id: PICKER_CONTROL_ID,
       style: {
         zIndex: layers.layer(),
         ...style

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';

package/dist/es2019/components/ReactionTooltip/ReactionTooltip.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { FormattedMessage } from 'react-intl-next';
 import { constants, i18n } from '../../shared';
@@ -41,6 +41,6 @@ export const ReactionTooltip = ({
   return jsx(Tooltip, {
     content: content,
     position: "bottom",
-    "data-testid": RENDER_REACTIONTOOLTIP_TESTID
+    testId: RENDER_REACTIONTOOLTIP_TESTID
   }, React.Children.only(children));
 };

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
 import { N90 } from '@atlaskit/theme/colors';
 export const verticalMargin = 5;

package/dist/es2019/components/Reactions/Reactions.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { FormattedMessage } from 'react-intl-next';
 import { Analytics } from '../../analytics';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 export const reactionStyle = css({
   display: 'inline-block',
   // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React, { useEffect, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { constants } from '../../shared';
 import { EmojiButton } from '../EmojiButton';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, keyframes } from '@emotion/core';
+import { css, keyframes } from '@emotion/react';
 export const selectorStyle = css({
   boxSizing: 'border-box',
   display: 'flex',

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import Tooltip from '@atlaskit/tooltip';
@@ -11,6 +11,7 @@ import * as styles from './styles';
  */
 
 export const RENDER_SHOWMORE_TESTID = 'show-more-button';
+export const RENDER_WRAPPER_TESTID = 'show-more-wrapper';
 
 /**
  * Show more custom emojis button
@@ -24,7 +25,8 @@ export const ShowMore = ({
   return jsx("div", {
     className: className.container,
     css: styles.moreEmojiContainerStyle,
-    style: style.container
+    style: style.container,
+    "data-testid": RENDER_WRAPPER_TESTID
   }, jsx("div", {
     css: styles.separatorStyle
   }), jsx(FormattedMessage, i18n.messages.moreEmoji, message => jsx(Tooltip, {

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

@@ -1 +1 @@
-export { ShowMore, RENDER_SHOWMORE_TESTID } from './ShowMore';
+export { ShowMore, RENDER_SHOWMORE_TESTID, RENDER_WRAPPER_TESTID } from './ShowMore';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';

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

@@ -1,6 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
+
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+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';
@@ -19,7 +21,8 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     onClick,
     miniMode,
     tooltipContent,
-    disabled = false
+    disabled = false,
+    ariaAttributes = {}
   } = props;
 
   const handleMouseDown = (e, analyticsEvent) => {
@@ -32,7 +35,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
     content: tooltipContent,
     position: "top"
-  }, jsx(Button, {
+  }, jsx(Button, _extends({
     css: styles.triggerStyle({
       miniMode,
       disabled
@@ -46,5 +49,5 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     }),
     spacing: "none",
     ref: ref
-  }));
+  }, ariaAttributes)));
 });

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
 import { N70, N20, N40 } from '@atlaskit/theme/colors';
 export const DISABLED_BUTTON_COLOR = `${token('color.text.disabled', N70)} !important`;

package/dist/es2019/containers/ConnectedReactionsView/ConnectedReactionsView.js

@@ -7,7 +7,7 @@ import { ufoExperiences } from '../../store';
 import { ReactionStatus } from '../../types';
 
 /**
- * Export the mapper function outside the component so easier to do unit tests migration from Enzyme to React Testing Library
+ * Export the mapper function outside the component so easier to do unit tests
  */
 export const mapStateToPropsHelper = (containerAri, ari, state) => {
   const reactionsState = state && state.reactions[`${containerAri}|${ari}`];
@@ -41,7 +41,7 @@ export const mapStateToPropsHelper = (containerAri, ari, state) => {
   }
 };
 /**
- * Export the mapper function outside the component so easier to do unit tests migration from Enzyme to React Testing Library
+ * Export the mapper function outside the component so easier to do unit tests
  */
 
 export const mapDispatchToPropsHelper = (actions, containerAri, ari) => {
@@ -87,11 +87,9 @@ export const ConnectedReactionsView = props => {
 
       (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort({
         metadata: {
-          source: 'Connected-Reactions-View',
-          data: {
-            ari,
-            containerAri
-          },
+          source: 'ConnectedReactionsView',
+          ari,
+          containerAri,
           reason: 'unmount'
         }
       });

package/dist/es2019/shared/constants.js

@@ -20,6 +20,16 @@ export const DefaultReactions = [{
   id: '1f914',
   shortName: ':thinking:'
 }];
+/**
+ * Default label to show for the overLimitLabel prop
+ */
+
+export const DEFAULT_OVER_THE_LIMIT_REACTION_LABEL = '1k+';
+/**
+ * Default maximum value to use when the emoji received higher than top limit reactions
+ */
+
+export const DEFAULT_REACTION_TOP_LIMIT = 1000;
 /**
  * ES6 Map object from default emoji reactions (with key => shortName, value => entire emoji item)
  */

package/dist/es2019/store/MemoryReactionsStore.js

@@ -6,6 +6,7 @@ import * as utils from './utils';
 import { isRealErrorFromService } from './utils';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../analytics/constants';
 import { sampledReactionsRendered } from '../analytics/ufo';
+import { extractErrorInfo } from '../analytics/analytics';
 /**
  * Set of all available UFO experiences relating to reaction element
  */
@@ -129,6 +130,13 @@ export class MemoryReactionsStore {
       const exp = ufoExperiences.add.getInstance(`${ari}|${emojiId}`); // ufo start reaction experience
 
       exp.start();
+      exp.addMetadata({
+        source: 'MemoryReactionsStore',
+        storeMetadata: this.metadata,
+        ari,
+        containerAri,
+        emojiId
+      });
       this.client.addReaction(containerAri, ari, emojiId, this.metadata).then(_ => {
         if (this.createAnalyticsEvent) {
           Analytics.createAndFireSafe(this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'addReaction');
@@ -142,14 +150,7 @@ export class MemoryReactionsStore {
 
           exp.failure({
             metadata: {
-              error,
-              source: 'Reaction-Store',
-              data: {
-                containerAri,
-                ari,
-                emojiId,
-                metadata: this.metadata
-              },
+              error: extractErrorInfo(error),
               reason: 'addReaction fetch failed'
             }
           });
@@ -168,6 +169,13 @@ export class MemoryReactionsStore {
       const exp = ufoExperiences.remove.getInstance(`${ari}|${emojiId}`); // ufo start reaction experience
 
       exp.start();
+      exp.addMetadata({
+        source: 'MemoryReactionsStore',
+        storeMetadata: this.metadata,
+        ari,
+        containerAri,
+        emojiId
+      });
       this.optmisticUpdate(containerAri, ari, emojiId)(utils.removeOne);
       this.client.deleteReaction(containerAri, ari, emojiId, this.metadata).then(_ => {
         // ufo add reaction success
@@ -176,14 +184,7 @@ export class MemoryReactionsStore {
         // ufo add reaction failure
         exp.failure({
           metadata: {
-            error,
-            source: 'Reaction-Store',
-            data: {
-              containerAri,
-              ari,
-              emojiId,
-              metadata: this.metadata
-            },
+            error: extractErrorInfo(error),
             reason: 'deleteReaction fetch failed'
           }
         });
@@ -205,6 +206,12 @@ export class MemoryReactionsStore {
       sampledExp.start({
         samplingRate: SAMPLING_RATE_REACTIONS_RENDERED_EXP
       });
+      sampledExp.addMetadata({
+        source: 'MemoryReactionsStore',
+        storeMetadata: this.metadata,
+        containerAri,
+        aris: arisArr.join(',')
+      });
       this.client.getReactions(containerAri, arisArr).then(value => {
         Object.keys(value).map(ari => {
           const reactionsState = this.getReactionsState(containerAri, ari);
@@ -225,12 +232,7 @@ export class MemoryReactionsStore {
 
           sampledExp.failure({
             metadata: {
-              error,
-              source: 'Reaction-Store',
-              data: {
-                containerAri,
-                aris: arisArr.join(',')
-              },
+              error: extractErrorInfo(error),
               reason: 'getReactions fetch failed'
             }
           });
@@ -258,6 +260,13 @@ export class MemoryReactionsStore {
     _defineProperty(this, "getDetailedReaction", (containerAri, ari, emojiId) => {
       const exp = ufoExperiences.fetchDetails.getInstance(`${ari}|${emojiId}`);
       exp.start();
+      exp.addMetadata({
+        source: 'MemoryReactionsStore',
+        storeMetadata: this.metadata,
+        ari,
+        containerAri,
+        emojiId
+      });
       this.client.getDetailedReaction(containerAri, ari, emojiId).then(summary => {
         // ufo get reaction details success
         exp.success();
@@ -266,13 +275,7 @@ export class MemoryReactionsStore {
         // ufo get reaction details failure
         exp.failure({
           metadata: {
-            error,
-            source: 'Reaction-Store',
-            data: {
-              containerAri,
-              ari,
-              emojiId
-            },
+            error: extractErrorInfo(error),
             reason: 'getDetailedReaction fetch failed'
           }
         });

package/dist/es2019/version.json

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

package/dist/esm/analytics/analytics.js

@@ -96,4 +96,20 @@ export var createReactionClickedEvent = function createReactionClickedEvent(adde
     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

@@ -1,56 +1,57 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx, css } from '@emotion/core';
+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 * as styles from './styles';
 /**
- * Test id for wrapper div
+ * Test id for component top level div
  */
 
-export var RENDER_COUNTER_TESTID = 'counter-container';
+export var RENDER_COMPONENT_WRAPPER = 'counter-wrapper';
 /**
- * Test id for container div
+ * Test id for wrapper div of the counter inside the slider
  */
 
-export var RENDER_COUNTER_WRAPPER_TESTID = 'counter-wrapper';
+export var RENDER_COUNTER_TESTID = 'counter-container';
+/**
+ * Counter label value wrapper div
+ */
 
+export var RENDER_LABEL_TESTID = 'counter_label_wrapper';
+export var getLabel = function 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 var Counter = function Counter(_ref) {
   var _ref$highlight = _ref.highlight,
       highlight = _ref$highlight === void 0 ? false : _ref$highlight,
       _ref$limit = _ref.limit,
-      limit = _ref$limit === void 0 ? 1000 : _ref$limit,
+      limit = _ref$limit === void 0 ? constants.DEFAULT_REACTION_TOP_LIMIT : _ref$limit,
       _ref$overLimitLabel = _ref.overLimitLabel,
-      overLimitLabel = _ref$overLimitLabel === void 0 ? '1k+' : _ref$overLimitLabel,
+      overLimitLabel = _ref$overLimitLabel === void 0 ? constants.DEFAULT_OVER_THE_LIMIT_REACTION_LABEL : _ref$overLimitLabel,
       className = _ref.className,
       value = _ref.value,
       _ref$animationDuratio = _ref.animationDuration,
       animationDuration = _ref$animationDuratio === void 0 ? mediumDurationMs : _ref$animationDuratio;
-
-  var hasReachedLimit = function hasReachedLimit(value) {
-    return limit && value >= limit;
-  };
-
-  var getLabel = function getLabel(value) {
-    if (hasReachedLimit(value)) {
-      return overLimitLabel || '';
-    } else if (value === 0) {
-      return '';
-    } else {
-      return value.toString();
-    }
-  };
-
   var previousValue = usePreviousValue(value);
-  var label = getLabel(value);
+  var label = getLabel(value, overLimitLabel, limit);
   var increase = previousValue ? previousValue < value : false;
   return jsx("div", {
     className: className,
-    "data-testid": RENDER_COUNTER_WRAPPER_TESTID,
+    "data-testid": RENDER_COMPONENT_WRAPPER,
     css: [styles.countStyle, {
       width: label.length * 7
     }]
@@ -67,6 +68,7 @@ export var Counter = function Counter(_ref) {
       className: motion.className,
       "data-testid": RENDER_COUNTER_TESTID
     }, jsx("div", {
+      "data-testid": RENDER_LABEL_TESTID,
       css: highlight && styles.highlightStyle,
       key: value
     }, label));

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

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

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 export var countStyle = css({

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { useIntl } from 'react-intl-next';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { ResourcedEmoji } from '@atlaskit/emoji';
 import { i18n, utils } from '../../shared';
 import * as styles from './styles';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 export var emojiButtonStyle = css({
   outline: 'none',
   display: 'flex',

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import * as styles from './styles';
 
 /**

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, keyframes } from '@emotion/core';
+import { css, keyframes } from '@emotion/react';
 import { B75, B300 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 var flashTime = 700;

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

@@ -5,7 +5,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl-next';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji';
 import { Analytics } from '../../analytics';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { B50, B75, B300, N20, N40, N400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 /**