@atlaskit/emoji 64.2.1 → 64.4.1

package/dist/cjs/components/common/EmojiPlaceholder.js

@@ -1,17 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
+var _core = require("@emotion/core");
 
 var _styles = require("./styles");
 
@@ -19,9 +13,8 @@ var _constants = require("../../util/constants");
 
 var _typeHelpers = require("../../util/type-helpers");
 
+/** @jsx jsx */
 var EmojiPlaceholder = function EmojiPlaceholder(props) {
-  var _classes;
-
   var shortName = props.shortName,
       _props$size = props.size,
       size = _props$size === void 0 ? _constants.defaultEmojiHeight : _props$size,
@@ -47,10 +40,10 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     width: "".concat(width, "px"),
     height: "".concat(height, "px")
   };
-  var classes = (_classes = {}, (0, _defineProperty2.default)(_classes, _styles.placeholder, true), (0, _defineProperty2.default)(_classes, _styles.placeholderContainer, true), _classes);
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return (0, _core.jsx)("span", {
     "aria-label": shortName,
-    className: (0, _classnames.default)(classes),
+    className: _styles.placeholder,
+    css: _styles.placeholderContainer,
     style: style,
     title: showTooltip ? shortName : ''
   });

package/dist/cjs/components/common/EmojiPreview.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,31 +21,27 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _core = require("@emotion/core");
+
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
 var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _CachingEmoji = _interopRequireDefault(require("../../components/common/CachingEmoji"));
-
 var _EmojiButton = _interopRequireDefault(require("../../components/common/EmojiButton"));
 
 var _i18n = require("../i18n");
 
-var styles = _interopRequireWildcard(require("./styles"));
-
 var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
 
 var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
 
-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); }
+var _styles = require("./styles");
 
-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 _EmojiPreviewComponent = require("./EmojiPreviewComponent");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -119,13 +113,13 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.toneSelectorContainer
-      }, this.state.selectingTone && /*#__PURE__*/_react.default.createElement(_ToneSelector.default, {
+      return (0, _core.jsx)("div", {
+        className: _styles.toneSelectorContainer
+      }, this.state.selectingTone && (0, _core.jsx)(_ToneSelector.default, {
         emoji: toneEmoji,
         onToneSelected: this.onToneSelected,
         previewEmojiId: previewEmoji.id
-      }), /*#__PURE__*/_react.default.createElement(_EmojiButton.default, {
+      }), (0, _core.jsx)(_EmojiButton.default, {
         ariaExpanded: this.state.selectingTone,
         emoji: previewEmoji,
         selectOnHover: true,
@@ -138,8 +132,6 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderEmojiPreview",
     value: function renderEmojiPreview() {
-      var _classNames2;
-
       var selectingTone = this.state.selectingTone;
       var _this$props2 = this.props,
           emoji = _this$props2.emoji,
@@ -149,21 +141,9 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      var previewClasses = (0, _classnames.default)((0, _defineProperty2.default)({}, styles.preview, true));
-      var previewTextClasses = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, styles.previewText, true), (0, _defineProperty2.default)(_classNames2, styles.previewSingleLine, !emoji.name), _classNames2));
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: previewClasses
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.previewImg
-      }, /*#__PURE__*/_react.default.createElement(_CachingEmoji.default, {
+      return (0, _core.jsx)(_EmojiPreviewComponent.EmojiPreviewComponent, {
         emoji: emoji
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: previewTextClasses
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.name
-      }, emoji.name), /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.shortName
-      }, emoji.shortName)));
+      });
     } // note: emoji-picker-add-emoji className is used by pollinator synthetic checks
 
   }, {
@@ -180,26 +160,26 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.AddCustomEmoji
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
-        return /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+      return (0, _core.jsx)("div", {
+        css: _styles.addCustomEmoji
+      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
+        return (0, _core.jsx)(_standardButton.default, {
           onClick: onOpenUpload,
-          iconBefore: /*#__PURE__*/_react.default.createElement(_add.default, {
+          iconBefore: (0, _core.jsx)(_add.default, {
             label: formatMessage(_i18n.messages.addCustomEmojiLabel),
             size: "small"
           }),
           appearance: "subtle",
-          className: styles.addCustomEmojiButton + ' emoji-picker-add-emoji'
+          css: _styles.addCustomEmojiButton,
+          className: _styles.emojiPickerAddEmoji
         }, label);
       }));
     }
   }, {
     key: "render",
     value: function render() {
-      var sectionClasses = (0, _classnames.default)([styles.emojiPreview, styles.emojiPreviewSection]);
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: sectionClasses,
+      return (0, _core.jsx)("div", {
+        css: _styles.emojiPreview,
         onMouseLeave: this.onMouseLeave
       }, this.renderAddOwnEmoji(), this.renderEmojiPreview(), this.renderTones());
     }

package/dist/cjs/components/common/EmojiPreviewComponent.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmojiPreviewComponent = void 0;
+
+var _core = require("@emotion/core");
+
+var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
+
+var _styles = require("./styles");
+
+/** @jsx jsx */
+var EmojiPreviewComponent = function EmojiPreviewComponent(_ref) {
+  var emoji = _ref.emoji;
+  return (0, _core.jsx)("div", {
+    css: _styles.preview
+  }, (0, _core.jsx)("span", {
+    css: _styles.previewImg
+  }, (0, _core.jsx)(_CachingEmoji.default, {
+    emoji: emoji
+  })), (0, _core.jsx)("div", {
+    css: _styles.previewText
+  }, emoji.name && (0, _core.jsx)("div", {
+    css: _styles.emojiName
+  }, emoji.name), (0, _core.jsx)("div", {
+    css: _styles.emojiShortName
+  }, emoji.shortName)));
+};
+
+exports.EmojiPreviewComponent = EmojiPreviewComponent;

package/dist/cjs/components/common/EmojiUploadPicker.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 _react = _interopRequireWildcard(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
@@ -43,7 +45,7 @@ var _FileChooser = _interopRequireDefault(require("./FileChooser"));
 
 var _internalTypes = require("./internal-types");
 
-var styles = _interopRequireWildcard(require("./styles"));
+var _styles = require("./styles");
 
 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); }
 
@@ -108,17 +110,17 @@ var ChooseEmojiFile = /*#__PURE__*/function (_PureComponent) {
       var disableChooser = !name;
       var fileChooserButtonDescriptionId = 'choose.emoji.file.button.screen.reader.description.id'; // Note: FileChooser.accept does not work in Electron due to a bug: https://product-fabric.atlassian.net/browse/FS-1626
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.emojiUpload
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.uploadChooseFileMessage
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (message) {
-        return /*#__PURE__*/_react.default.createElement("h5", null, message);
-      })), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.uploadChooseFileRow
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.uploadChooseFileEmojiName
-      }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
+      return (0, _core.jsx)("div", {
+        css: _styles.emojiUpload
+      }, (0, _core.jsx)("div", {
+        css: _styles.uploadChooseFileMessage
+      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (message) {
+        return (0, _core.jsx)("h5", null, message);
+      })), (0, _core.jsx)("div", {
+        css: _styles.uploadChooseFileRow
+      }, (0, _core.jsx)("span", {
+        css: _styles.uploadChooseFileEmojiName
+      }, (0, _core.jsx)(_textfield.default, {
         placeholder: formatMessage(_i18n.messages.emojiPlaceholder),
         "aria-label": formatMessage(_i18n.messages.emojiNameAriaLabel),
         maxLength: maxNameLength,
@@ -127,13 +129,13 @@ var ChooseEmojiFile = /*#__PURE__*/function (_PureComponent) {
         value: name,
         isCompact: true,
         autoFocus: true
-      })), /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.uploadChooseFileBrowse
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      })), (0, _core.jsx)("span", {
+        css: _styles.uploadChooseFileBrowse
+      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
+        return (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)("span", {
           hidden: true,
           id: fileChooserButtonDescriptionId
-        }, screenReaderDescription), /*#__PURE__*/_react.default.createElement(_FileChooser.default, {
+        }, screenReaderDescription), (0, _core.jsx)(_FileChooser.default, {
           label: formatMessage(_i18n.messages.emojiChooseFileTitle),
           onChange: onChooseFile,
           onClick: onClick,
@@ -141,10 +143,10 @@ var ChooseEmojiFile = /*#__PURE__*/function (_PureComponent) {
           ariaDescribedBy: fileChooserButtonDescriptionId,
           isDisabled: disableChooser
         }));
-      }))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.emojiUploadBottom
-      }, !errorMessage ? /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageRequirements)) : /*#__PURE__*/_react.default.createElement(_EmojiErrorMessage.default, {
-        className: styles.emojiChooseFileErrorMessage,
+      }))), (0, _core.jsx)("div", {
+        css: _styles.emojiUploadBottom
+      }, !errorMessage ? (0, _core.jsx)("p", null, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiImageRequirements)) : (0, _core.jsx)(_EmojiErrorMessage.default, {
+        messageStyles: _styles.emojiChooseFileErrorMessage,
         message: errorMessage
       })));
     }
@@ -338,7 +340,7 @@ var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
       };
 
       if (name && previewImage) {
-        return /*#__PURE__*/_react.default.createElement(_EmojiUploadPreview.default, {
+        return (0, _core.jsx)(_EmojiUploadPreview.default, {
           errorMessage: errorMessage,
           name: name,
           onAddEmoji: this.onAddEmoji,
@@ -348,13 +350,13 @@ var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(ChooseEmojiFile, {
+      return (0, _core.jsx)(ChooseEmojiFile, {
         name: name,
         onChooseFile: this.onChooseFile,
         onClick: this.props.onFileChooserClicked,
         onNameChange: this.onNameChange,
         onUploadCancelled: cancelUpload,
-        errorMessage: chooseEmojiErrorMessage ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, chooseEmojiErrorMessage) : undefined,
+        errorMessage: chooseEmojiErrorMessage ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, chooseEmojiErrorMessage) : undefined,
         intl: intl
       });
     }

package/dist/cjs/components/common/EmojiUploadPreview.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,9 +19,11 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
+var _core = require("@emotion/core");
+
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -39,11 +39,7 @@ var _internalTypes = require("./internal-types");
 
 var _RetryableButton = _interopRequireDefault(require("./RetryableButton"));
 
-var styles = _interopRequireWildcard(require("./styles"));
-
-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 _styles = require("./styles");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -85,44 +81,42 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
           },
           searchable: true
         };
-        emojiComponent = /*#__PURE__*/_react.default.createElement(_Emoji.default, {
+        emojiComponent = (0, _core.jsx)(_Emoji.default, {
           emoji: emoji
         });
       }
 
       var uploading = uploadStatus === _internalTypes.UploadStatus.Uploading;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.uploadPreviewFooter
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.uploadPreview
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.uploadPreviewText
-      }, /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.emojiPreviewTitle)), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiPreview, {
+      return (0, _core.jsx)("div", {
+        css: _styles.uploadPreviewFooter
+      }, (0, _core.jsx)("div", {
+        css: _styles.uploadPreview
+      }, (0, _core.jsx)("div", {
+        css: _styles.uploadPreviewText
+      }, (0, _core.jsx)("h5", null, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.emojiPreviewTitle)), (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.emojiPreview, {
         values: {
           emoji: emojiComponent
         }
-      }))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.bigEmojiPreview
-      }, emojiComponent)), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.uploadAddRow
-      }, !uploading && errorMessage ? /*#__PURE__*/_react.default.createElement(_EmojiErrorMessage.default, {
-        className: styles.emojiPreviewErrorMessage,
+      }))), (0, _core.jsx)("div", {
+        css: _styles.bigEmojiPreview
+      }, emojiComponent)), (0, _core.jsx)("div", {
+        css: _styles.uploadAddRow
+      }, !uploading && errorMessage ? (0, _core.jsx)(_EmojiErrorMessage.default, {
+        messageStyles: _styles.emojiPreviewErrorMessage,
         message: errorMessage,
         tooltip: true
-      }) : null, /*#__PURE__*/_react.default.createElement(_RetryableButton.default, {
-        className: styles.uploadEmojiButton,
-        retryClassName: styles.uploadRetryButton,
+      }) : null, (0, _core.jsx)(_RetryableButton.default, {
         label: formatMessage(_i18n.messages.addEmojiLabel),
         onSubmit: onAddEmoji,
         appearance: "primary",
         loading: uploading,
         error: !!errorMessage
-      }), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      }), (0, _core.jsx)(_customThemeButton.default, {
         onClick: onUploadCancelled,
         appearance: "subtle",
         isDisabled: uploading,
-        className: styles.cancelButton
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel))));
+        css: _styles.cancelButton
+      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel))));
     }
   }]);
   return EmojiUploadPreview;

package/dist/cjs/components/common/RecordSelectionDefault.js

@@ -19,10 +19,16 @@ var createRecordSelectionDefault = function createRecordSelectionDefault(provide
   return function (emojiId, emoji, event) {
     try {
       if (provider.recordSelection && emoji) {
+        _analytics.ufoExperiences['emoji-selection-recorded'].start();
+
         provider.recordSelection(emoji).then(function () {
-          return fireAnalytics && fireAnalytics(_analytics.insertionSucceeded);
+          fireAnalytics && fireAnalytics(_analytics.recordSucceeded);
+
+          _analytics.ufoExperiences['emoji-selection-recorded'].success();
         }).catch(function () {
-          return fireAnalytics && fireAnalytics(_analytics.insertionFailed);
+          fireAnalytics && fireAnalytics(_analytics.recordFailed);
+
+          _analytics.ufoExperiences['emoji-selection-recorded'].failure();
         });
       }
     } finally {

package/dist/cjs/components/common/ResourcedEmojiComponent.js

@@ -23,6 +23,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _constants = require("../../util/constants");
@@ -33,8 +35,6 @@ var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
 
 var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
 
-var _EmojiContextProvider = require("../../context/EmojiContextProvider");
-
 var _analytics = require("../../util/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); }
@@ -64,6 +64,15 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
   }
 
   (0, _createClass2.default)(ResourcedEmojiComponent, [{
+    key: "getChildContext",
+    value: function getChildContext() {
+      return {
+        emoji: {
+          emojiProvider: this.props.emojiProvider
+        }
+      };
+    }
+  }, {
     key: "refreshEmoji",
     value: function refreshEmoji(emojiProvider, emojiId) {
       var _this2 = this;
@@ -167,21 +176,17 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
           shortName = _this$props$emojiId.shortName,
           id = _this$props$emojiId.id,
           fallback = _this$props$emojiId.fallback;
-      var emojiContextValue = {
-        emoji: {
-          emojiProvider: this.props.emojiProvider
-        }
-      };
-      return /*#__PURE__*/_react.default.createElement(_EmojiContextProvider.EmojiContextProvider, {
-        emojiContextValue: emojiContextValue
-      }, /*#__PURE__*/_react.default.createElement("span", {
+      return /*#__PURE__*/_react.default.createElement("span", {
         "data-emoji-id": id,
         "data-emoji-short-name": shortName,
         "data-emoji-text": fallback || shortName
-      }, element));
+      }, element);
     }
   }]);
   return ResourcedEmojiComponent;
 }(_react.Component);
 
-exports.default = ResourcedEmojiComponent;
+exports.default = ResourcedEmojiComponent;
+(0, _defineProperty2.default)(ResourcedEmojiComponent, "childContextTypes", {
+  emoji: _propTypes.default.object
+});

package/dist/cjs/components/common/RetryableButton.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -19,21 +17,19 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
+var _core = require("@emotion/core");
+
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("../i18n");
 
-var styles = _interopRequireWildcard(require("./styles"));
-
-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 _styles = require("./styles");
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -52,20 +48,19 @@ var RetryableButton = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(RetryableButton, [{
     key: "renderLoading",
     value: function renderLoading() {
-      return /*#__PURE__*/_react.default.createElement("span", {
-        className: styles.buttonSpinner
-      }, /*#__PURE__*/_react.default.createElement(_spinner.default, null));
+      return (0, _core.jsx)("span", {
+        css: _styles.buttonSpinner
+      }, (0, _core.jsx)(_spinner.default, null));
     }
   }, {
     key: "renderRetry",
     value: function renderRetry() {
       var _this$props = this.props,
           loading = _this$props.loading,
-          retryClassName = _this$props.retryClassName,
           onSubmit = _this$props.onSubmit;
-      return loading ? this.renderLoading() : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.retryLabel, function (retryLabel) {
-        return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
-          className: retryClassName,
+      return loading ? this.renderLoading() : (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.retryLabel, function (retryLabel) {
+        return (0, _core.jsx)(_customThemeButton.default, {
+          css: _styles.uploadRetryButton,
           appearance: "warning",
           onClick: onSubmit
         }, retryLabel);
@@ -77,12 +72,11 @@ var RetryableButton = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
           loading = _this$props2.loading,
           error = _this$props2.error,
-          className = _this$props2.className,
           appearance = _this$props2.appearance,
           onSubmit = _this$props2.onSubmit,
           label = _this$props2.label;
-      return error ? this.renderRetry() : loading ? this.renderLoading() : /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
-        className: className,
+      return error ? this.renderRetry() : loading ? this.renderLoading() : (0, _core.jsx)(_customThemeButton.default, {
+        css: _styles.uploadEmojiButton,
         appearance: appearance,
         onClick: onSubmit
       }, label);

package/dist/cjs/components/common/Scrollable.js

@@ -23,9 +23,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _core = require("@emotion/core");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _reactDom = require("react-dom");
 
@@ -104,17 +104,12 @@ var Scrollable = /*#__PURE__*/function (_PureComponent) {
           className = _this$props.className,
           maxHeight = _this$props.maxHeight,
           onMouseLeave = _this$props.onMouseLeave;
-      var scrollableClasses = ['emoji-scrollable', styles.emojiScrollable];
-
-      if (className) {
-        scrollableClasses.push(className);
-      }
-
       var style = maxHeight ? {
         maxHeight: maxHeight
       } : {};
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(scrollableClasses),
+      return (0, _core.jsx)("div", {
+        className: "emoji-scrollable ".concat(className),
+        css: styles.emojiScrollable,
         onMouseLeave: onMouseLeave,
         onScroll: this.handleScroll,
         ref: this.handleRef,

package/dist/cjs/components/common/UploadEmoji.js

@@ -11,16 +11,22 @@ var _analytics = require("../../util/analytics");
 
 var _i18n = require("../i18n");
 
+var _ufoExperiences = require("../../util/analytics/ufoExperiences");
+
 var uploadEmoji = function uploadEmoji(upload, emojiProvider, errorSetter, onSuccess, fireAnalytics) {
   var startTime = Date.now();
   errorSetter(undefined);
 
   if ((0, _EmojiResource.supportsUploadFeature)(emojiProvider)) {
+    _ufoExperiences.ufoExperiences['emoji-uploaded'].start();
+
     emojiProvider.uploadCustomEmoji(upload).then(function (emojiDescription) {
       fireAnalytics((0, _analytics.uploadSucceededEvent)({
         duration: Date.now() - startTime
       }));
       onSuccess(emojiDescription);
+
+      _ufoExperiences.ufoExperiences['emoji-uploaded'].success();
     }).catch(function (err) {
       errorSetter(_i18n.messages.emojiUploadFailed); // eslint-disable-next-line no-console
 
@@ -29,6 +35,8 @@ var uploadEmoji = function uploadEmoji(upload, emojiProvider, errorSetter, onSuc
         duration: Date.now() - startTime,
         reason: _i18n.messages.emojiUploadFailed.defaultMessage
       }));
+
+      _ufoExperiences.ufoExperiences['emoji-uploaded'].failure();
     });
   }
 };