@atlaskit/reactions 21.0.5 → 21.2.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/reactions
 
+## 21.2.1
+
+### Patch Changes
+
+- [`783c8c02335`](https://bitbucket.org/atlassian/atlassian-frontend/commits/783c8c02335) - Update the reactions rendered UFO type
+
+## 21.2.0
+
+### Minor Changes
+
+- [`ed9ab4d82a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ed9ab4d82a3) - Adds "reactions-rendered", "reactions-picker-opened", "reaction-added" and "reaction-removed" to UFO experiences
+
+## 21.1.0
+
+### Minor Changes
+
+- [`f0c986fe03a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f0c986fe03a) - Migrated styles to emotion and removed typestyle dependency from atlassian-frontend dependencies.
+
+### Patch Changes
+
+- [`876cae9c606`](https://bitbucket.org/atlassian/atlassian-frontend/commits/876cae9c606) - Changed selector first-child to first-of-type to better support SSR
+- [`62edf20ab1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/62edf20ab1e) - Migrates all usage of brand tokens to either selected or information tokens. This change is purely for semantic reasons, there are no visual or behavioural changes.
+- Updated dependencies
+
 ## 21.0.5
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -2,10 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createRestSucceededEvent = exports.createRestFailedEvent = exports.createReactionsRenderedEvent = exports.createReactionSelectionEvent = exports.createReactionHoveredEvent = exports.createReactionClickedEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = void 0;
+exports.createRestSucceededEvent = exports.createRestFailedEvent = exports.createReactionsRenderedEvent = exports.createReactionSelectionEvent = exports.createReactionHoveredEvent = exports.createReactionClickedEvent = exports.createPickerMoreClickedEvent = exports.createPickerCancelledEvent = exports.createPickerButtonClickedEvent = exports.createAndFireSafe = exports.createAndFireEventInElementsChannel = exports.UFO = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -15,6 +17,14 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 
 var _version = require("../version.json");
 
+var _UFO = _interopRequireWildcard(require("./ufo"));
+
+exports.UFO = _UFO;
+
+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; }
+
 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) { (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; }

package/dist/cjs/analytics/ufo.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactionsRendered = exports.ReactionsRemove = exports.ReactionsAdd = exports.PickerRender = exports.ExperienceName = void 0;
+
+var _ufo = require("@atlaskit/ufo");
+
+/**
+ * Helper method for create the config type for an individual/Concurrent experience
+ * @param componentName
+ */
+var createExperienceConfig = function createExperienceConfig(componentName, type, performanceType) {
+  return {
+    platform: {
+      component: componentName
+    },
+    type: type,
+    performanceType: performanceType
+  };
+};
+/**
+ * Types of experiences
+ */
+
+
+var ExperienceName;
+/**
+ * UFO types of components been instrumented
+ */
+
+exports.ExperienceName = ExperienceName;
+
+(function (ExperienceName) {
+  ExperienceName["REACTIONS_RENDERED"] = "reactions-rendered";
+  ExperienceName["PICKER_OPENED"] = "reactions-picker-opened";
+  ExperienceName["REACTION_ADDED"] = "reaction-added";
+  ExperienceName["REACTION_REMOVED"] = "reaction-removed";
+})(ExperienceName || (exports.ExperienceName = ExperienceName = {}));
+
+var ComponentName;
+/**
+ * Experience when the emoji picker is opened
+ */
+
+(function (ComponentName) {
+  ComponentName["PICKER_RENDERED"] = "reactions-picker";
+  ComponentName["REACTIONS"] = "reactions-list";
+})(ComponentName || (ComponentName = {}));
+
+var PickerRender = new _ufo.UFOExperience(ExperienceName.PICKER_OPENED, createExperienceConfig(ComponentName.PICKER_RENDERED, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when the list of reactions gets rendered
+ */
+
+exports.PickerRender = PickerRender;
+var ReactionsRendered = new _ufo.ConcurrentExperience(ExperienceName.REACTIONS_RENDERED, createExperienceConfig(ComponentName.REACTIONS, _ufo.ExperienceTypes.Load, _ufo.ExperiencePerformanceTypes.PageSegmentLoad));
+/**
+ * Experience when a reaction emoji gets added
+ */
+
+exports.ReactionsRendered = ReactionsRendered;
+var ReactionsAdd = new _ufo.ConcurrentExperience(ExperienceName.REACTION_ADDED, createExperienceConfig(ComponentName.REACTIONS, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
+/**
+ * Experience when a reaction emoji gets removed/decrement
+ */
+
+exports.ReactionsAdd = ReactionsAdd;
+var ReactionsRemove = new _ufo.ConcurrentExperience(ExperienceName.REACTION_REMOVED, createExperienceConfig(ComponentName.REACTIONS, _ufo.ExperienceTypes.Experience, _ufo.ExperiencePerformanceTypes.InlineResult));
+exports.ReactionsRemove = ReactionsRemove;

package/dist/cjs/components/Counter.js

@@ -7,29 +7,28 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.highlightStyle = exports.countStyle = exports.containerStyle = exports.Counter = void 0;
+exports.highlightStyle = exports.counterTestId = exports.countStyle = exports.containerStyle = exports.Counter = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _motion = require("@atlaskit/motion");
 
-var _typestyle = require("typestyle");
-
 var _usePreviousValue = _interopRequireDefault(require("@atlaskit/ds-lib/use-previous-value"));
 
 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 countStyle = (0, _typestyle.style)({
+/** @jsx jsx */
+var counterTestId = 'counter-container';
+exports.counterTestId = counterTestId;
+var countStyle = (0, _core.css)({
   fontSize: 11,
   // TODO: nice to have a theme level token for fontSize
   color: (0, _tokens.token)('color.text.subtlest', _colors.N90),
@@ -39,12 +38,12 @@ var countStyle = (0, _typestyle.style)({
   lineHeight: '14px'
 });
 exports.countStyle = countStyle;
-var highlightStyle = (0, _typestyle.style)({
-  color: (0, _tokens.token)('color.text.brand', _colors.B400),
+var highlightStyle = (0, _core.css)({
+  color: (0, _tokens.token)('color.text.selected', _colors.B400),
   fontWeight: 600
 });
 exports.highlightStyle = highlightStyle;
-var containerStyle = (0, _typestyle.style)({
+var containerStyle = (0, _core.css)({
   display: 'flex',
   flexDirection: 'column'
 });
@@ -78,25 +77,26 @@ var Counter = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var previousValue = (0, _usePreviousValue.default)(value);
   var label = getLabel(value);
   var increase = previousValue ? previousValue < value : false;
-  var rootClassName = (0, _classnames.default)(countStyle, className);
-  var currentClassName = (0, _classnames.default)((0, _defineProperty2.default)({}, highlightStyle, highlight));
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: rootClassName,
+  return (0, _core.jsx)("div", {
+    className: className,
+    css: countStyle,
     style: {
       width: label.length * 7
     }
-  }, /*#__PURE__*/_react.default.createElement(_motion.ExitingPersistence, null, /*#__PURE__*/_react.default.createElement(_motion.SlideIn, {
+  }, (0, _core.jsx)(_motion.ExitingPersistence, null, (0, _core.jsx)(_motion.SlideIn, {
     enterFrom: increase ? 'bottom' : 'top',
     key: value,
     duration: animationDuration
   }, function (motion, direction) {
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return (0, _core.jsx)("div", {
       ref: motion.ref,
-      className: (0, _classnames.default)(containerStyle, motion.className, (0, _typestyle.style)({
+      css: [containerStyle, (0, _core.css)({
         position: direction === 'exiting' ? 'absolute' : undefined
-      }))
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: currentClassName,
+      })],
+      className: motion.className,
+      "data-testid": counterTestId
+    }, (0, _core.jsx)("div", {
+      css: highlight && highlightStyle,
       key: value
     }, label));
   })));

package/dist/cjs/components/EmojiButton.js

@@ -23,12 +23,12 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _core = require("@emotion/core");
+
 var _element = require("@atlaskit/emoji/element");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _typestyle = require("typestyle");
-
 var _utils = require("./utils");
 
 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); }
@@ -39,7 +39,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var emojiButtonStyle = (0, _typestyle.style)({
+var emojiButtonStyle = (0, _core.css)({
   outline: 'none',
   display: 'flex',
   backgroundColor: 'transparent',
@@ -48,11 +48,9 @@ var emojiButtonStyle = (0, _typestyle.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)'
   }
 });
 
@@ -87,10 +85,10 @@ var EmojiButton = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           emojiId = _this$props.emojiId,
           emojiProvider = _this$props.emojiProvider;
-      return /*#__PURE__*/_react.default.createElement("button", {
+      return (0, _core.jsx)("button", {
         onMouseUp: this.handleMouseDown,
-        className: emojiButtonStyle
-      }, /*#__PURE__*/_react.default.createElement(_element.ResourcedEmoji, {
+        css: emojiButtonStyle
+      }, (0, _core.jsx)(_element.ResourcedEmoji, {
         emojiProvider: emojiProvider,
         emojiId: emojiId
       }));

package/dist/cjs/components/FlashAnimation.js

@@ -5,43 +5,43 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.flashStyle = exports.FlashAnimation = void 0;
+exports.flashStyle = exports.flashAnimationTestId = exports.flashAnimation = exports.FlashAnimation = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _core = require("@emotion/core");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireDefault(require("react"));
 
-var _typestyle = require("typestyle");
-
-var containerStyle = (0, _typestyle.style)({
+/** @jsx jsx */
+var flashAnimationTestId = 'flash-animation';
+exports.flashAnimationTestId = flashAnimationTestId;
+var containerStyle = (0, _core.css)({
   width: '100%',
   height: '100%'
 });
 var flashTime = 700;
-var flashAnimation = (0, _typestyle.keyframes)({
+var flashAnimation = (0, _core.keyframes)({
   '0%': {
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
   },
   '75%': {
-    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
   },
   '100%': {
-    backgroundColor: (0, _tokens.token)('color.background.brand.pressed', _colors.B75),
-    borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300)
+    backgroundColor: (0, _tokens.token)('color.background.selected.pressed', _colors.B75),
+    borderColor: (0, _tokens.token)('color.border.selected', _colors.B300)
   }
 });
-var flashStyle = (0, _typestyle.style)({
+exports.flashAnimation = flashAnimation;
+var flashStyle = (0, _core.css)({
   animation: "".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out")
 });
 /**
@@ -51,8 +51,10 @@ var flashStyle = (0, _typestyle.style)({
 exports.flashStyle = flashStyle;
 
 var FlashAnimation = function FlashAnimation(props) {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(containerStyle, props.className, (0, _defineProperty2.default)({}, flashStyle, props.flash))
+  return (0, _core.jsx)("div", {
+    className: props.className,
+    css: [containerStyle, props.flash && flashStyle],
+    "data-testid": flashAnimationTestId
   }, props.children);
 };
 

package/dist/cjs/components/Reaction.js

@@ -23,6 +23,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _core = require("@emotion/core");
+
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _element = require("@atlaskit/emoji/element");
@@ -31,12 +33,8 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _typestyle = require("typestyle");
-
 var _analytics = require("../analytics");
 
 var _Counter = require("./Counter");
@@ -60,12 +58,12 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * Padding and line height are set within the child components
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
-var emojiStyle = (0, _typestyle.style)({
+var emojiStyle = (0, _core.css)({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
   padding: '4px 4px 4px 8px'
 });
-var reactionStyle = (0, _typestyle.style)({
+var reactionStyle = (0, _core.css)({
   outline: 'none',
   display: 'flex',
   flexDirection: 'row',
@@ -81,24 +79,20 @@ var reactionStyle = (0, _typestyle.style)({
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
-  $nest: {
-    '&:hover': {
-      background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
-    }
+  '&:hover': {
+    background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
   }
 });
-var reactedStyle = (0, _typestyle.style)({
-  backgroundColor: (0, _tokens.token)('color.background.brand', _colors.B50),
-  borderColor: (0, _tokens.token)('color.icon.brand', _colors.B300),
-  $nest: {
-    '&:hover': {
-      background: "".concat((0, _tokens.token)('color.background.brand.hovered', _colors.B75))
-    }
+var reactedStyle = (0, _core.css)({
+  backgroundColor: (0, _tokens.token)('color.background.selected', _colors.B50),
+  borderColor: (0, _tokens.token)('color.border.selected', _colors.B300),
+  '&:hover': {
+    background: "".concat((0, _tokens.token)('color.background.selected.hovered', _colors.B75))
   }
 });
 var flashHeight = _utils.akHeight - 2; // height without the 1px border
 
-var flashStyle = (0, _typestyle.style)({
+var flashStyle = (0, _core.css)({
   display: 'flex',
   flexDirection: 'row',
   borderRadius: '10px',
@@ -190,28 +184,28 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
           classNameProp = _this$props3.className,
           flash = _this$props3.flash;
       var emojiName = this.state.emojiName;
-      var classNames = (0, _classnames.default)(reactionStyle, classNameProp, (0, _defineProperty2.default)({}, reactedStyle, reaction.reacted));
       var emojiId = {
         id: reaction.emojiId,
         shortName: ''
       };
-      return /*#__PURE__*/_react.default.createElement("button", {
-        className: classNames,
+      return (0, _core.jsx)("button", {
+        className: classNameProp,
+        css: [reactionStyle, reaction.reacted && reactedStyle],
         onMouseUp: this.handleMouseDown,
         onMouseEnter: this.handleMouseEnter
-      }, /*#__PURE__*/_react.default.createElement(_ReactionTooltip.ReactionTooltip, {
+      }, (0, _core.jsx)(_ReactionTooltip.ReactionTooltip, {
         emojiName: emojiName,
         reaction: reaction
-      }, /*#__PURE__*/_react.default.createElement(_FlashAnimation.FlashAnimation, {
+      }, (0, _core.jsx)(_FlashAnimation.FlashAnimation, {
         flash: flash,
-        className: flashStyle
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: emojiStyle
-      }, /*#__PURE__*/_react.default.createElement(_element.ResourcedEmoji, {
+        css: flashStyle
+      }, (0, _core.jsx)("div", {
+        css: emojiStyle
+      }, (0, _core.jsx)(_element.ResourcedEmoji, {
         emojiProvider: emojiProvider,
         emojiId: emojiId,
         fitToHeight: 16
-      })), /*#__PURE__*/_react.default.createElement(_Counter.Counter, {
+      })), (0, _core.jsx)(_Counter.Counter, {
         value: reaction.count,
         highlight: reaction.reacted
       }))));

package/dist/cjs/components/ReactionPicker.js

@@ -23,6 +23,12 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _core = require("@emotion/core");
+
 var _picker = require("@atlaskit/emoji/picker");
 
 var _popper = require("@atlaskit/popper");
@@ -33,18 +39,12 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _typestyle = require("typestyle");
-
 var _Selector = require("./Selector");
 
 var _Trigger = require("./Trigger");
 
+var _analytics = require("../analytics");
+
 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; }
@@ -57,26 +57,22 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var pickerStyle = (0, _typestyle.style)({
+var pickerStyle = (0, _core.css)({
   verticalAlign: 'middle',
-  $nest: {
-    '&.miniMode': {
-      display: 'inline-block',
-      marginRight: '4px'
-    }
+  '&.miniMode': {
+    display: 'inline-block',
+    marginRight: '4px'
   }
 });
-var contentStyle = (0, _typestyle.style)({
+var contentStyle = (0, _core.css)({
   display: 'flex'
 });
-var popupStyle = (0, _typestyle.style)({
+var popupStyle = (0, _core.css)({
   background: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   boxShadow: (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
-  $nest: {
-    '&> div': {
-      boxShadow: undefined
-    }
+  '&> div': {
+    boxShadow: undefined
   }
 });
 
@@ -138,6 +134,9 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
       _this.close(emoji.id);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTriggerClick", function () {
+      // ufo start reaction experience
+      _analytics.UFO.PickerRender.start();
+
       if (_this.props.onOpen) {
         _this.props.onOpen();
       }
@@ -145,6 +144,9 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
       _this.setState({
         isOpen: !_this.state.isOpen,
         showFullPicker: false
+      }, function () {
+        // ufo add reaction success
+        _analytics.UFO.PickerRender.success();
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "popperModifiers", [{
@@ -186,6 +188,8 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       document.removeEventListener('click', this.handleClickOutside);
+
+      _analytics.UFO.PickerRender.abort();
     }
   }, {
     key: "close",
@@ -193,6 +197,9 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
       this.setState({
         isOpen: false,
         showFullPicker: false
+      }, function () {
+        // ufo abort reaction experience
+        _analytics.UFO.PickerRender.abort();
       });
     }
   }, {
@@ -201,9 +208,9 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           emojiProvider = _this$props.emojiProvider,
           allowAllEmojis = _this$props.allowAllEmojis;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: contentStyle
-      }, /*#__PURE__*/_react.default.createElement(_Selector.Selector, {
+      return (0, _core.jsx)("div", {
+        css: contentStyle
+      }, (0, _core.jsx)(_Selector.Selector, {
         emojiProvider: emojiProvider,
         onSelection: this.onEmojiSelected,
         showMore: allowAllEmojis,
@@ -213,7 +220,7 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderEmojiPicker",
     value: function renderEmojiPicker() {
-      return /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
+      return (0, _core.jsx)(_picker.EmojiPicker, {
         emojiProvider: this.props.emojiProvider,
         onSelection: this.onEmojiSelected
       });
@@ -229,22 +236,21 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
       var _this2 = this;
 
       var isOpen = this.state.isOpen;
-      var miniMode = this.props.miniMode;
-      var classNames = (0, _classnames.default)(pickerStyle, {
-        isOpen: isOpen,
-        miniMode: miniMode
-      }, this.props.className);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: classNames
-      }, /*#__PURE__*/_react.default.createElement(_popper.Manager, null, /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref) {
+      var _this$props2 = this.props,
+          miniMode = _this$props2.miniMode,
+          className = _this$props2.className;
+      return (0, _core.jsx)("div", {
+        className: " ".concat(isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className),
+        css: pickerStyle
+      }, (0, _core.jsx)(_popper.Manager, null, (0, _core.jsx)(_popper.Reference, null, function (_ref) {
         var ref = _ref.ref;
-        return /*#__PURE__*/_react.default.createElement(_Trigger.Trigger, {
+        return (0, _core.jsx)(_Trigger.Trigger, {
           ref: ref,
           onClick: _this2.onTriggerClick,
           miniMode: miniMode,
           disabled: _this2.props.disabled
         });
-      }), /*#__PURE__*/_react.default.createElement(_popper.Popper, {
+      }), (0, _core.jsx)(_popper.Popper, {
         placement: "bottom-start",
         modifiers: this.popperModifiers
       }, function (_ref2) {
@@ -252,13 +258,13 @@ var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
             style = _ref2.style,
             update = _ref2.update;
         _this2.updatePopper = update;
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _this2.state.isOpen && /*#__PURE__*/_react.default.createElement("div", {
+        return (0, _core.jsx)(_react.Fragment, null, isOpen && (0, _core.jsx)("div", {
           style: _objectSpread({
             zIndex: _constants.layers.layer()
           }, style),
           ref: ref
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: popupStyle
+        }, (0, _core.jsx)("div", {
+          css: popupStyle
         }, _this2.renderContent())));
       })));
     }