@atlaskit/reactions 21.0.5 → 21.2.1

package/dist/cjs/containers/ConnectedReactionsView.js

@@ -0,0 +1,131 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConnectedReactionsView = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _analyticsNamespacedContext = require("@atlaskit/analytics-namespaced-context");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _components = require("../components");
+
+var _ReactionConsumer = require("../store/ReactionConsumer");
+
+var _ReactionStatus = require("../types/ReactionStatus");
+
+var _ReactionsStore = require("../store/ReactionsStore");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ReactionsView = function ReactionsView(props) {
+  // // compose a UFO experience object
+  var experienceInstance = (0, _react.useRef)();
+  var ari = props.ari,
+      createAnalyticsEvent = props.createAnalyticsEvent,
+      store = props.store;
+  (0, _react.useEffect)(function () {
+    experienceInstance.current = _ReactionsStore.ufoExperiences.render.getInstance(ari);
+  }, [ari]);
+  (0, _react.useEffect)(function () {
+    Promise.resolve(store).then(function (_store) {
+      if (_store.setCreateAnalyticsEvent && createAnalyticsEvent) {
+        _store.setCreateAnalyticsEvent(createAnalyticsEvent);
+      }
+    });
+  }, [createAnalyticsEvent, store]); // abort when component gets unmounted
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      var _experienceInstance$c;
+
+      (_experienceInstance$c = experienceInstance.current) === null || _experienceInstance$c === void 0 ? void 0 : _experienceInstance$c.abort();
+    };
+  }, [experienceInstance]);
+
+  var renderChildren = function renderChildren(innerProps) {
+    var containerAri = props.containerAri,
+        ari = props.ari;
+    return /*#__PURE__*/_react.default.createElement(_analyticsNamespacedContext.FabricElementsAnalyticsContext, {
+      data: {
+        containerAri: containerAri,
+        ari: ari
+      }
+    }, /*#__PURE__*/_react.default.createElement(_components.Reactions, (0, _extends2.default)({
+      key: "".concat(props.containerAri, "|").concat(props.ari)
+    }, props, innerProps)));
+  };
+
+  var stateMapper = function stateMapper(state) {
+    var containerAri = props.containerAri,
+        ari = props.ari;
+    var reactionsState = state && state.reactions["".concat(containerAri, "|").concat(ari)];
+
+    if (!state || !reactionsState) {
+      return {
+        status: _ReactionStatus.ReactionStatus.notLoaded,
+        reactions: []
+      };
+    }
+
+    switch (reactionsState.status) {
+      case _ReactionStatus.ReactionStatus.ready:
+        return {
+          reactions: reactionsState.reactions,
+          status: reactionsState.status,
+          flash: state.flash["".concat(containerAri, "|").concat(ari)]
+        };
+
+      case _ReactionStatus.ReactionStatus.error:
+        return {
+          status: _ReactionStatus.ReactionStatus.error,
+          reactions: []
+        };
+
+      default:
+        return {
+          status: _ReactionStatus.ReactionStatus.loading,
+          reactions: []
+        };
+    }
+  };
+
+  var actionsMapper = function actionsMapper(actions) {
+    return {
+      loadReaction: function loadReaction() {
+        actions.getReactions(props.containerAri, props.ari);
+      },
+      onReactionClick: function onReactionClick(emojiId) {
+        actions.toggleReaction(props.containerAri, props.ari, emojiId);
+      },
+      onReactionHover: function onReactionHover(emojiId) {
+        actions.getDetailedReaction(props.containerAri, props.ari, emojiId);
+      },
+      onSelection: function onSelection(emojiId) {
+        actions.addReaction(props.containerAri, props.ari, emojiId);
+      }
+    };
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_components.UfoErrorBoundary, {
+    experiences: experienceInstance.current ? [experienceInstance.current] : []
+  }, /*#__PURE__*/_react.default.createElement(_ReactionConsumer.ReactionConsumer, {
+    store: props.store,
+    actionsMapper: actionsMapper,
+    stateMapper: stateMapper
+  }, renderChildren));
+};
+
+var ConnectedReactionsView = (0, _analyticsNext.withAnalyticsEvents)()(ReactionsView);
+exports.ConnectedReactionsView = ConnectedReactionsView;

package/dist/cjs/containers/index.js

@@ -1,23 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "ConnectedReactionPicker", {
   enumerable: true,
   get: function get() {
-    return _ReactionsPickerContainer.default;
+    return _ConnectedReactionPicker.ConnectedReactionPicker;
   }
 });
 Object.defineProperty(exports, "ConnectedReactionsView", {
   enumerable: true,
   get: function get() {
-    return _ReactionsContainer.default;
+    return _ConnectedReactionsView.ConnectedReactionsView;
   }
 });
 
-var _ReactionsPickerContainer = _interopRequireDefault(require("./ReactionsPickerContainer"));
+var _ConnectedReactionPicker = require("./ConnectedReactionPicker");
 
-var _ReactionsContainer = _interopRequireDefault(require("./ReactionsContainer"));
+var _ConnectedReactionsView = require("./ConnectedReactionsView");

package/dist/cjs/index.js

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "ConnectedReactionsView", {
 Object.defineProperty(exports, "MemoryReactionsStore", {
   enumerable: true,
   get: function get() {
-    return _reactionStore.MemoryReactionsStore;
+    return _store.MemoryReactionsStore;
   }
 });
 Object.defineProperty(exports, "Reaction", {
@@ -30,7 +30,7 @@ Object.defineProperty(exports, "Reaction", {
 Object.defineProperty(exports, "ReactionConsumer", {
   enumerable: true,
   get: function get() {
-    return _reactionStore.ReactionConsumer;
+    return _store.ReactionConsumer;
   }
 });
 Object.defineProperty(exports, "ReactionPicker", {
@@ -51,6 +51,14 @@ Object.defineProperty(exports, "Reactions", {
     return _components.Reactions;
   }
 });
+Object.defineProperty(exports, "UFO", {
+  enumerable: true,
+  get: function get() {
+    return _analytics.UFO;
+  }
+});
+
+var _analytics = require("./analytics");
 
 var _client = require("./client");
 
@@ -58,4 +66,4 @@ var _components = require("./components");
 
 var _containers = require("./containers");
 
-var _reactionStore = require("./reaction-store");
+var _store = require("./store");

package/dist/cjs/{reaction-store → store}/ReactionsStore.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MemoryReactionsStore = void 0;
+exports.ufoExperiences = exports.MemoryReactionsStore = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -15,9 +15,9 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _analytics = require("../analytics");
+var Analytics = _interopRequireWildcard(require("../analytics"));
 
-var _types = require("../types");
+var Types = _interopRequireWildcard(require("../types"));
 
 var _batched = require("./batched");
 
@@ -31,6 +31,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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) { (0, _defineProperty2.default)(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; }
 
+/**
+ * Set of all available UFO experiences relating to reaction element
+ */
+var ufoExperiences = {
+  add: Analytics.UFO.ReactionsAdd,
+  remove: Analytics.UFO.ReactionsRemove,
+  render: Analytics.UFO.ReactionsRendered
+};
+exports.ufoExperiences = ufoExperiences;
+
 var MemoryReactionsStore = /*#__PURE__*/function () {
   function MemoryReactionsStore(client) {
     var _this = this;
@@ -123,13 +133,26 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
 
       _this.flash(reaction);
 
+      var exp = ufoExperiences.add.getInstance("".concat(ari, "|").concat(emojiId)); // ufo start reaction experience
+
+      exp.start();
+
       _this.client.addReaction(containerAri, ari, emojiId, _this.metadata).then(function (_) {
         if (_this.createAnalyticsEvent) {
-          (0, _analytics.createAndFireSafe)(_this.createAnalyticsEvent, _analytics.createRestSucceededEvent, 'addReaction');
-        }
+          Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'addReaction');
+        } // ufo add reaction success
+
+
+        exp.success();
       }).catch(function (error) {
         if (_this.createAnalyticsEvent && (0, utils.isRealErrorFromService)(error.code)) {
-          (0, _analytics.createAndFireSafe)(_this.createAnalyticsEvent, _analytics.createRestFailedEvent, 'addReaction', error.code);
+          _this.createAnalyticsEvent && Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'addReaction', error.code); // ufo add reaction failure
+
+          exp.failure({
+            metadata: {
+              error: error
+            }
+          });
         }
 
         return Promise.reject(error);
@@ -139,33 +162,59 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
       var containerAri = reaction.containerAri,
           ari = reaction.ari,
           emojiId = reaction.emojiId;
+      var exp = ufoExperiences.remove.getInstance("".concat(ari, "|").concat(emojiId)); // ufo start reaction experience
+
+      exp.start();
 
       _this.optmisticUpdate(containerAri, ari, emojiId)(utils.removeOne);
 
-      _this.client.deleteReaction(containerAri, ari, emojiId, _this.metadata);
+      _this.client.deleteReaction(containerAri, ari, emojiId, _this.metadata).then(function (_) {
+        // ufo add reaction success
+        exp.success();
+      }).catch(function (error) {
+        // ufo add reaction failure
+        exp.failure({
+          metadata: {
+            error: error
+          }
+        });
+      });
     });
     (0, _defineProperty2.default)(this, "setCreateAnalyticsEvent", function (createAnalyticsEvent) {
       _this.createAnalyticsEvent = createAnalyticsEvent;
     });
     (0, _defineProperty2.default)(this, "getReactions", (0, _batched.batchByKey)(function (containerAri, aris) {
+      /**
+       * TODO:
+       * 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.
+       */
+      var exp = ufoExperiences.render.getInstance(containerAri); // ufo start reaction experience
+
+      exp.start();
+
       _this.client.getReactions(containerAri, aris.reduce(utils.flattenAris)).then(function (value) {
         Object.keys(value).map(function (ari) {
           var reactionsState = _this.getReactionsState(containerAri, ari);
 
-          var reactions = reactionsState && reactionsState.status === _types.ReactionStatus.ready ? reactionsState.reactions : undefined;
+          var reactions = reactionsState && reactionsState.status === Types.ReactionStatus.ready ? reactionsState.reactions : undefined;
 
           _this.setReactions(containerAri, ari, utils.readyState(value[ari].sort(utils.getReactionsSortFunction(reactions))));
         });
       }).then(function () {
         if (_this.createAnalyticsEvent) {
-          (0, _analytics.createAndFireSafe)(_this.createAnalyticsEvent, _analytics.createRestSucceededEvent, 'getReactions');
+          Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestSucceededEvent, 'getReactions');
         }
+
+        exp.success();
       }).catch(function (error) {
-        if (_this.createAnalyticsEvent && (0, utils.isRealErrorFromService)(error.code)) {
-          (0, _analytics.createAndFireSafe)(_this.createAnalyticsEvent, _analytics.createRestFailedEvent, 'getReactions', error.code);
-        }
+        if ((0, utils.isRealErrorFromService)(error.code)) {
+          if (_this.createAnalyticsEvent) {
+            Analytics.createAndFireSafe(_this.createAnalyticsEvent, Analytics.createRestFailedEvent, 'getReactions', error.code);
+          }
 
-        return Promise.reject(error);
+          exp.failure();
+          return Promise.reject(error);
+        }
       });
     }));
     (0, _defineProperty2.default)(this, "toggleReaction", this.withReaction(this.doRemoveReaction, this.doAddReaction));
@@ -221,7 +270,7 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
       return function (updater) {
         var reactionsState = _this2.getReactionsState(containerAri, ari);
 
-        if (reactionsState.status === _types.ReactionStatus.ready) {
+        if (reactionsState.status === Types.ReactionStatus.ready) {
           var updated = updater(reactionsState);
 
           if (updated) {

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.0.5"
+	"version": "21.2.1"
 }

package/dist/es2019/analytics/index.js

@@ -1,6 +1,8 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 import { name as packageName, version as packageVersion } from '../version.json';
+import * as _UFO from './ufo';
+export { _UFO as UFO };
 export const createAndFireEventInElementsChannel = createAndFireEvent('fabric-elements');
 export const createAndFireSafe = (createAnalyticsEvent, creator, ...args) => {
   if (createAnalyticsEvent) {

package/dist/es2019/analytics/ufo.js

@@ -0,0 +1,62 @@
+import { ConcurrentExperience, UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
+/**
+ * Initial experience config object (deferred from @atlaskit/ufo inner types)
+ * TODO: Check if possible to add this to exported types from @atlaskit/ufo
+ */
+
+/**
+ * Helper method for create the config type for an individual/Concurrent experience
+ * @param componentName
+ */
+const createExperienceConfig = (componentName, type, performanceType) => {
+  return {
+    platform: {
+      component: componentName
+    },
+    type,
+    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";
+  ExperienceName["REACTION_ADDED"] = "reaction-added";
+  ExperienceName["REACTION_REMOVED"] = "reaction-removed";
+})(ExperienceName || (ExperienceName = {}));
+
+var ComponentName;
+/**
+ * Experience when the emoji picker is opened
+ */
+
+(function (ComponentName) {
+  ComponentName["PICKER_RENDERED"] = "reactions-picker";
+  ComponentName["REACTIONS"] = "reactions-list";
+})(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));
+/**
+ * Experience when a reaction emoji gets removed/decrement
+ */
+
+export const ReactionsRemove = new ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, ExperienceTypes.Experience, ExperiencePerformanceTypes.InlineResult));

package/dist/es2019/components/Counter.js

@@ -1,11 +1,12 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import { N90, B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import cx from 'classnames';
 import React, { memo } from 'react';
 import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
-import { style } from 'typestyle';
 import usePreviousValue from '@atlaskit/ds-lib/use-previous-value';
-export const countStyle = style({
+export const counterTestId = 'counter-container';
+export const countStyle = css({
   fontSize: 11,
   // TODO: nice to have a theme level token for fontSize
   color: token('color.text.subtlest', N90),
@@ -14,11 +15,11 @@ export const countStyle = style({
   padding: '4px 8px 4px 0',
   lineHeight: '14px'
 });
-export const highlightStyle = style({
-  color: token('color.text.brand', B400),
+export const highlightStyle = css({
+  color: token('color.text.selected', B400),
   fontWeight: 600
 });
-export const containerStyle = style({
+export const containerStyle = css({
   display: 'flex',
   flexDirection: 'column'
 });
@@ -45,26 +46,25 @@ export const Counter = /*#__PURE__*/memo(({
   const previousValue = usePreviousValue(value);
   const label = getLabel(value);
   const increase = previousValue ? previousValue < value : false;
-  const rootClassName = cx(countStyle, className);
-  const currentClassName = cx({
-    [highlightStyle]: highlight
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    className: rootClassName,
+  return jsx("div", {
+    className: className,
+    css: countStyle,
     style: {
       width: label.length * 7
     }
-  }, /*#__PURE__*/React.createElement(ExitingPersistence, null, /*#__PURE__*/React.createElement(SlideIn, {
+  }, jsx(ExitingPersistence, null, jsx(SlideIn, {
     enterFrom: increase ? 'bottom' : 'top',
     key: value,
     duration: animationDuration
-  }, (motion, direction) => /*#__PURE__*/React.createElement("div", {
+  }, (motion, direction) => jsx("div", {
     ref: motion.ref,
-    className: cx(containerStyle, motion.className, style({
+    css: [containerStyle, css({
       position: direction === 'exiting' ? 'absolute' : undefined
-    }))
-  }, /*#__PURE__*/React.createElement("div", {
-    className: currentClassName,
+    })],
+    className: motion.className,
+    "data-testid": counterTestId
+  }, jsx("div", {
+    css: highlight && highlightStyle,
     key: value
   }, label)))));
 });

package/dist/es2019/components/EmojiButton.js

@@ -1,10 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import React from 'react';
 import { PureComponent } from 'react';
-import { style } from 'typestyle';
 import { isLeftClick } from './utils';
-const emojiButtonStyle = style({
+const emojiButtonStyle = css({
   outline: 'none',
   display: 'flex',
   backgroundColor: 'transparent',
@@ -13,11 +15,9 @@ const emojiButtonStyle = style({
   cursor: 'pointer',
   margin: '0',
   padding: '10px 8px',
-  $nest: {
-    '&:hover > span': {
-      transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
-      transform: 'scale(1.33)'
-    }
+  '&:hover > span': {
+    transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
+    transform: 'scale(1.33)'
   }
 });
 export class EmojiButton extends PureComponent {
@@ -38,10 +38,10 @@ export class EmojiButton extends PureComponent {
       emojiId,
       emojiProvider
     } = this.props;
-    return /*#__PURE__*/React.createElement("button", {
+    return jsx("button", {
       onMouseUp: this.handleMouseDown,
-      className: emojiButtonStyle
-    }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
+      css: emojiButtonStyle
+    }, jsx(ResourcedEmoji, {
       emojiProvider: emojiProvider,
       emojiId: emojiId
     }));

package/dist/es2019/components/FlashAnimation.js

@@ -1,39 +1,40 @@
+/** @jsx jsx */
+import { jsx, css, keyframes } from '@emotion/core';
 import { B75, B300 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import cx from 'classnames';
 import React from 'react';
-import { keyframes, style } from 'typestyle';
-const containerStyle = style({
+export const flashAnimationTestId = 'flash-animation';
+const containerStyle = css({
   width: '100%',
   height: '100%'
 });
 const flashTime = 700;
-const flashAnimation = keyframes({
+export const flashAnimation = keyframes({
   '0%': {
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: token('color.background.brand.pressed', B75),
-    borderColor: token('color.icon.brand', B300)
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.border.selected', B300)
   },
   '75%': {
-    backgroundColor: token('color.background.brand.pressed', B75),
-    borderColor: token('color.icon.brand', B300)
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.border.selected', B300)
   },
   '100%': {
-    backgroundColor: token('color.background.brand.pressed', B75),
-    borderColor: token('color.icon.brand', B300)
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.border.selected', B300)
   }
 });
-export const flashStyle = style({
+export const flashStyle = css({
   animation: `${flashAnimation} ${flashTime}ms ease-in-out`
 });
 /**
  * Flash animation background component. See Reaction component for usage.
  */
 
-export const FlashAnimation = props => /*#__PURE__*/React.createElement("div", {
-  className: cx(containerStyle, props.className, {
-    [flashStyle]: props.flash
-  })
+export const FlashAnimation = props => jsx("div", {
+  className: props.className,
+  css: [containerStyle, props.flash && flashStyle],
+  "data-testid": flashAnimationTestId
 }, props.children);