@atlaskit/emoji 64.1.1 → 64.3.0

package/dist/cjs/components/common/EmojiDeletePreview.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
 });
@@ -25,9 +23,11 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+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 _EmojiErrorMessage = _interopRequireDefault(require("./EmojiErrorMessage"));
 
 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); }; }
 
@@ -112,37 +108,35 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
           loading = _this$state.loading,
           error = _this$state.error;
       var formatMessage = intl.formatMessage;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.deletePreview
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.deleteText
-      }, /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.deleteEmojiTitle)), /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
+      return (0, _core.jsx)("div", {
+        css: _styles.deletePreview
+      }, (0, _core.jsx)("div", {
+        css: _styles.deleteText
+      }, (0, _core.jsx)("h5", null, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.deleteEmojiTitle)), (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.deleteEmojiDescription, {
         values: {
           emojiShortName: emoji.shortName
         }
-      }))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.deleteFooter
-      }, /*#__PURE__*/_react.default.createElement(_CachingEmoji.default, {
+      }))), (0, _core.jsx)("div", {
+        css: _styles.deleteFooter
+      }, (0, _core.jsx)(_CachingEmoji.default, {
         emoji: emoji
-      }), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.previewButtonGroup
-      }, error ? !loading ? /*#__PURE__*/_react.default.createElement(_EmojiErrorMessage.default, {
+      }), (0, _core.jsx)("div", {
+        css: _styles.previewButtonGroup
+      }, error ? !loading ? (0, _core.jsx)(_EmojiErrorMessage.default, {
         message: formatMessage(_i18n.messages.deleteEmojiFailed),
-        className: styles.emojiDeleteErrorMessage,
+        messageStyles: _styles.emojiDeleteErrorMessage,
         tooltip: true
-      }) : null : null, /*#__PURE__*/_react.default.createElement(_RetryableButton.default, {
-        className: styles.uploadEmojiButton,
-        retryClassName: styles.uploadRetryButton,
+      }) : null : null, (0, _core.jsx)(_RetryableButton.default, {
         label: formatMessage(_i18n.messages.deleteEmojiLabel),
         onSubmit: this.onSubmit,
         appearance: "danger",
         loading: loading,
         error: error
-      }), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      }), (0, _core.jsx)(_customThemeButton.default, {
         appearance: "subtle",
         onClick: this.onCancel,
-        className: styles.cancelButton
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel)))));
+        css: _styles.cancelButton
+      }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.cancelLabel)))));
     }
   }]);
   return EmojiDeletePreview;

package/dist/cjs/components/common/EmojiErrorMessage.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,16 +17,14 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
+var _core = require("@emotion/core");
+
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-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 _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); }; }
 
 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; } }
@@ -46,12 +42,12 @@ var EmojiErrorMessage = /*#__PURE__*/function (_PureComponent) {
   (0, _createClass2.default)(EmojiErrorMessage, [{
     key: "renderWithTooltip",
     value: function renderWithTooltip() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: this.props.className
-      }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      return (0, _core.jsx)("div", {
+        css: this.props.messageStyles
+      }, (0, _core.jsx)(_tooltip.default, {
         content: this.props.message,
         position: "top"
-      }, /*#__PURE__*/_react.default.createElement(_error.default, {
+      }, (0, _core.jsx)(_error.default, {
         label: "Error",
         size: "medium"
       })));
@@ -59,9 +55,9 @@ var EmojiErrorMessage = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderInline",
     value: function renderInline() {
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: this.props.className
-      }, /*#__PURE__*/_react.default.createElement(_error.default, {
+      return (0, _core.jsx)("div", {
+        css: this.props.messageStyles
+      }, (0, _core.jsx)(_error.default, {
         label: "Error",
         size: "small"
       }), " ", this.props.message);

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/ResourcedEmoji.js

@@ -35,6 +35,10 @@ var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
 
 var _LoadingEmojiComponent = _interopRequireDefault(require("./LoadingEmojiComponent"));
 
+var _analytics = require("../../util/analytics");
+
+var _UfoErrorBoundary = require("./UfoErrorBoundary");
+
 var _excluded = ["emojiProvider"];
 
 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); }; }
@@ -62,23 +66,33 @@ var ResourcedEmoji = /*#__PURE__*/function (_LoadingEmojiComponen) {
 
   var _super = _createSuper(ResourcedEmoji);
 
-  function ResourcedEmoji() {
+  // state initialised with static component to prevent
+  // rerender when the module has already been loaded
+  function ResourcedEmoji(props) {
     var _this;
 
     (0, _classCallCheck2.default)(this, ResourcedEmoji);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props, {});
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       asyncLoadedComponent: ResourcedEmoji.AsyncLoadedComponent
     });
+    (0, _analytics.sampledUfoRenderedEmoji)(props.emojiId).start({
+      samplingRate: _constants.SAMPLING_RATE_EMOJI_RENDERED_EXP_RESOURCEEMOJI
+    });
+
+    _analytics.ufoExperiences['emoji-rendered'].getInstance(props.emojiId.id || props.emojiId.shortName).addMetadata({
+      source: 'resourced-emoji'
+    });
+
     return _this;
   }
 
   (0, _createClass2.default)(ResourcedEmoji, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      (0, _analytics.sampledUfoRenderedEmoji)(this.props.emojiId).abort();
+    }
+  }, {
     key: "asyncLoadComponent",
     value: function asyncLoadComponent() {
       var _this2 = this;
@@ -108,9 +122,11 @@ var ResourcedEmoji = /*#__PURE__*/function (_LoadingEmojiComponen) {
       var _this$props2 = this.props,
           emojiProvider = _this$props2.emojiProvider,
           otherProps = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
-      return /*#__PURE__*/_react.default.createElement(ResourcedEmojiComponent, (0, _extends2.default)({}, otherProps, {
+      return /*#__PURE__*/_react.default.createElement(_UfoErrorBoundary.UfoErrorBoundary, {
+        experiences: [_analytics.ufoExperiences['emoji-rendered'].getInstance(this.props.emojiId.id || this.props.emojiId.shortName)]
+      }, /*#__PURE__*/_react.default.createElement(ResourcedEmojiComponent, (0, _extends2.default)({}, otherProps, {
         emojiProvider: loadedEmojiProvider
-      }));
+      })));
     }
   }]);
   return ResourcedEmoji;