@atlaskit/emoji 64.2.1 → 64.4.1

package/dist/esm/components/common/EmojiDeletePreview.js

@@ -11,15 +11,16 @@ 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; } }
 
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import AkButton from '@atlaskit/button/custom-theme-button';
-import React from 'react';
 import { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { messages } from '../i18n';
 import CachingEmoji from './CachingEmoji';
 import EmojiErrorMessage from './EmojiErrorMessage';
 import RetryableButton from './RetryableButton';
-import * as styles from './styles';
+import { cancelButton, deleteFooter, deletePreview, deleteText, emojiDeleteErrorMessage, previewButtonGroup } from './styles';
 
 var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
   _inherits(EmojiDeletePreview, _Component);
@@ -88,37 +89,35 @@ var EmojiDeletePreview = /*#__PURE__*/function (_Component) {
           loading = _this$state.loading,
           error = _this$state.error;
       var formatMessage = intl.formatMessage;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.deletePreview
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.deleteText
-      }, /*#__PURE__*/React.createElement("h5", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.deleteEmojiTitle)), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
+      return jsx("div", {
+        css: deletePreview
+      }, jsx("div", {
+        css: deleteText
+      }, jsx("h5", null, jsx(FormattedMessage, messages.deleteEmojiTitle)), jsx(FormattedMessage, _extends({}, messages.deleteEmojiDescription, {
         values: {
           emojiShortName: emoji.shortName
         }
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: styles.deleteFooter
-      }, /*#__PURE__*/React.createElement(CachingEmoji, {
+      }))), jsx("div", {
+        css: deleteFooter
+      }, jsx(CachingEmoji, {
         emoji: emoji
-      }), /*#__PURE__*/React.createElement("div", {
-        className: styles.previewButtonGroup
-      }, error ? !loading ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
+      }), jsx("div", {
+        css: previewButtonGroup
+      }, error ? !loading ? jsx(EmojiErrorMessage, {
         message: formatMessage(messages.deleteEmojiFailed),
-        className: styles.emojiDeleteErrorMessage,
+        messageStyles: emojiDeleteErrorMessage,
         tooltip: true
-      }) : null : null, /*#__PURE__*/React.createElement(RetryableButton, {
-        className: styles.uploadEmojiButton,
-        retryClassName: styles.uploadRetryButton,
+      }) : null : null, jsx(RetryableButton, {
         label: formatMessage(messages.deleteEmojiLabel),
         onSubmit: this.onSubmit,
         appearance: "danger",
         loading: loading,
         error: error
-      }), /*#__PURE__*/React.createElement(AkButton, {
+      }), jsx(AkButton, {
         appearance: "subtle",
         onClick: this.onCancel,
-        className: styles.cancelButton
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancelLabel)))));
+        css: cancelButton
+      }, jsx(FormattedMessage, messages.cancelLabel)))));
     }
   }]);
 

package/dist/esm/components/common/EmojiErrorMessage.js

@@ -8,8 +8,9 @@ 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; } }
 
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
-import React from 'react';
 import { PureComponent } from 'react';
 import Tooltip from '@atlaskit/tooltip';
 
@@ -27,12 +28,12 @@ var EmojiErrorMessage = /*#__PURE__*/function (_PureComponent) {
   _createClass(EmojiErrorMessage, [{
     key: "renderWithTooltip",
     value: function renderWithTooltip() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: this.props.className
-      }, /*#__PURE__*/React.createElement(Tooltip, {
+      return jsx("div", {
+        css: this.props.messageStyles
+      }, jsx(Tooltip, {
         content: this.props.message,
         position: "top"
-      }, /*#__PURE__*/React.createElement(ErrorIcon, {
+      }, jsx(ErrorIcon, {
         label: "Error",
         size: "medium"
       })));
@@ -40,9 +41,9 @@ var EmojiErrorMessage = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderInline",
     value: function renderInline() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: this.props.className
-      }, /*#__PURE__*/React.createElement(ErrorIcon, {
+      return jsx("div", {
+        css: this.props.messageStyles
+      }, jsx(ErrorIcon, {
         label: "Error",
         size: "small"
       }), " ", this.props.message);

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

@@ -1,13 +1,10 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import classNames from 'classnames';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { placeholder, placeholderContainer } from './styles';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isImageRepresentation, isMediaRepresentation } from '../../util/type-helpers';
 
 var EmojiPlaceholder = function EmojiPlaceholder(props) {
-  var _classes;
-
   var shortName = props.shortName,
       _props$size = props.size,
       size = _props$size === void 0 ? defaultEmojiHeight : _props$size,
@@ -33,10 +30,10 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     width: "".concat(width, "px"),
     height: "".concat(height, "px")
   };
-  var classes = (_classes = {}, _defineProperty(_classes, placeholder, true), _defineProperty(_classes, placeholderContainer, true), _classes);
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     "aria-label": shortName,
-    className: classNames(classes),
+    className: placeholder,
+    css: placeholderContainer,
     style: style,
     title: showTooltip ? shortName : ''
   });

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

@@ -10,18 +10,18 @@ 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; } }
 
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import AkButton from '@atlaskit/button/standard-button';
 import AddIcon from '@atlaskit/icon/glyph/add';
-import classNames from 'classnames';
-import React from 'react';
 import { PureComponent } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
-import CachingEmoji from '../../components/common/CachingEmoji';
 import EmojiButton from '../../components/common/EmojiButton';
 import { messages } from '../i18n';
-import * as styles from './styles';
 import ToneSelector from './ToneSelector';
 import { setSkinToneAriaLabelText } from './setSkinToneAriaLabelText';
+import { addCustomEmoji, addCustomEmojiButton, emojiPickerAddEmoji, emojiPreview, toneSelectorContainer } from './styles';
+import { EmojiPreviewComponent } from './EmojiPreviewComponent';
 export var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiPreview, _PureComponent);
 
@@ -93,13 +93,13 @@ export var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.toneSelectorContainer
-      }, this.state.selectingTone && /*#__PURE__*/React.createElement(ToneSelector, {
+      return jsx("div", {
+        className: toneSelectorContainer
+      }, this.state.selectingTone && jsx(ToneSelector, {
         emoji: toneEmoji,
         onToneSelected: this.onToneSelected,
         previewEmojiId: previewEmoji.id
-      }), /*#__PURE__*/React.createElement(EmojiButton, {
+      }), jsx(EmojiButton, {
         ariaExpanded: this.state.selectingTone,
         emoji: previewEmoji,
         selectOnHover: true,
@@ -112,8 +112,6 @@ export 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,
@@ -123,21 +121,9 @@ export var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      var previewClasses = classNames(_defineProperty({}, styles.preview, true));
-      var previewTextClasses = classNames((_classNames2 = {}, _defineProperty(_classNames2, styles.previewText, true), _defineProperty(_classNames2, styles.previewSingleLine, !emoji.name), _classNames2));
-      return /*#__PURE__*/React.createElement("div", {
-        className: previewClasses
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.previewImg
-      }, /*#__PURE__*/React.createElement(CachingEmoji, {
+      return jsx(EmojiPreviewComponent, {
         emoji: emoji
-      })), /*#__PURE__*/React.createElement("div", {
-        className: previewTextClasses
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.name
-      }, emoji.name), /*#__PURE__*/React.createElement("span", {
-        className: styles.shortName
-      }, emoji.shortName)));
+      });
     } // note: emoji-picker-add-emoji className is used by pollinator synthetic checks
 
   }, {
@@ -154,26 +140,26 @@ export var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.AddCustomEmoji
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, function (label) {
-        return /*#__PURE__*/React.createElement(AkButton, {
+      return jsx("div", {
+        css: addCustomEmoji
+      }, jsx(FormattedMessage, messages.addCustomEmojiLabel, function (label) {
+        return jsx(AkButton, {
           onClick: onOpenUpload,
-          iconBefore: /*#__PURE__*/React.createElement(AddIcon, {
+          iconBefore: jsx(AddIcon, {
             label: formatMessage(messages.addCustomEmojiLabel),
             size: "small"
           }),
           appearance: "subtle",
-          className: styles.addCustomEmojiButton + ' emoji-picker-add-emoji'
+          css: addCustomEmojiButton,
+          className: emojiPickerAddEmoji
         }, label);
       }));
     }
   }, {
     key: "render",
     value: function render() {
-      var sectionClasses = classNames([styles.emojiPreview, styles.emojiPreviewSection]);
-      return /*#__PURE__*/React.createElement("div", {
-        className: sectionClasses,
+      return jsx("div", {
+        css: emojiPreview,
         onMouseLeave: this.onMouseLeave
       }, this.renderAddOwnEmoji(), this.renderEmojiPreview(), this.renderTones());
     }

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

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import CachingEmoji from './CachingEmoji';
+import { emojiName, emojiShortName, preview, previewImg, previewText } from './styles';
+export var EmojiPreviewComponent = function EmojiPreviewComponent(_ref) {
+  var emoji = _ref.emoji;
+  return jsx("div", {
+    css: preview
+  }, jsx("span", {
+    css: previewImg
+  }, jsx(CachingEmoji, {
+    emoji: emoji
+  })), jsx("div", {
+    css: previewText
+  }, emoji.name && jsx("div", {
+    css: emojiName
+  }, emoji.name), jsx("div", {
+    css: emojiShortName
+  }, emoji.shortName)));
+};

package/dist/esm/components/common/EmojiUploadPicker.js

@@ -10,7 +10,9 @@ 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; } }
 
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { Fragment } from 'react';
 import { PureComponent } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import TextField from '@atlaskit/textfield';
@@ -21,7 +23,7 @@ import EmojiErrorMessage from './EmojiErrorMessage';
 import EmojiUploadPreview from './EmojiUploadPreview';
 import FileChooser from './FileChooser';
 import { UploadStatus } from './internal-types';
-import * as styles from './styles';
+import { emojiChooseFileErrorMessage, emojiUpload, emojiUploadBottom, uploadChooseFileBrowse, uploadChooseFileEmojiName, uploadChooseFileMessage, uploadChooseFileRow } from './styles';
 var disallowedReplacementsMap = new Map([[':', ''], ['!', ''], ['@', ''], ['#', ''], ['%', ''], ['^', ''], ['&', ''], ['*', ''], ['(', ''], [')', ''], [' ', '_']]);
 
 var sanitizeName = function sanitizeName(name) {
@@ -79,17 +81,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.createElement("div", {
-        className: styles.emojiUpload
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.uploadChooseFileMessage
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.addCustomEmojiLabel, function (message) {
-        return /*#__PURE__*/React.createElement("h5", null, message);
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles.uploadChooseFileRow
-      }, /*#__PURE__*/React.createElement("span", {
-        className: styles.uploadChooseFileEmojiName
-      }, /*#__PURE__*/React.createElement(TextField, {
+      return jsx("div", {
+        css: emojiUpload
+      }, jsx("div", {
+        css: uploadChooseFileMessage
+      }, jsx(FormattedMessage, messages.addCustomEmojiLabel, function (message) {
+        return jsx("h5", null, message);
+      })), jsx("div", {
+        css: uploadChooseFileRow
+      }, jsx("span", {
+        css: uploadChooseFileEmojiName
+      }, jsx(TextField, {
         placeholder: formatMessage(messages.emojiPlaceholder),
         "aria-label": formatMessage(messages.emojiNameAriaLabel),
         maxLength: maxNameLength,
@@ -98,13 +100,13 @@ var ChooseEmojiFile = /*#__PURE__*/function (_PureComponent) {
         value: name,
         isCompact: true,
         autoFocus: true
-      })), /*#__PURE__*/React.createElement("span", {
-        className: styles.uploadChooseFileBrowse
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      })), jsx("span", {
+        css: uploadChooseFileBrowse
+      }, jsx(FormattedMessage, messages.emojiChooseFileScreenReaderDescription, function (screenReaderDescription) {
+        return jsx(Fragment, null, jsx("span", {
           hidden: true,
           id: fileChooserButtonDescriptionId
-        }, screenReaderDescription), /*#__PURE__*/React.createElement(FileChooser, {
+        }, screenReaderDescription), jsx(FileChooser, {
           label: formatMessage(messages.emojiChooseFileTitle),
           onChange: onChooseFile,
           onClick: onClick,
@@ -112,10 +114,10 @@ var ChooseEmojiFile = /*#__PURE__*/function (_PureComponent) {
           ariaDescribedBy: fileChooserButtonDescriptionId,
           isDisabled: disableChooser
         }));
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: styles.emojiUploadBottom
-      }, !errorMessage ? /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiImageRequirements)) : /*#__PURE__*/React.createElement(EmojiErrorMessage, {
-        className: styles.emojiChooseFileErrorMessage,
+      }))), jsx("div", {
+        css: emojiUploadBottom
+      }, !errorMessage ? jsx("p", null, jsx(FormattedMessage, messages.emojiImageRequirements)) : jsx(EmojiErrorMessage, {
+        messageStyles: emojiChooseFileErrorMessage,
         message: errorMessage
       })));
     }
@@ -319,7 +321,7 @@ export var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
       };
 
       if (name && previewImage) {
-        return /*#__PURE__*/React.createElement(EmojiUploadPreview, {
+        return jsx(EmojiUploadPreview, {
           errorMessage: errorMessage,
           name: name,
           onAddEmoji: this.onAddEmoji,
@@ -329,13 +331,13 @@ export var EmojiUploadPicker = /*#__PURE__*/function (_PureComponent2) {
         });
       }
 
-      return /*#__PURE__*/React.createElement(ChooseEmojiFile, {
+      return jsx(ChooseEmojiFile, {
         name: name,
         onChooseFile: this.onChooseFile,
         onClick: this.props.onFileChooserClicked,
         onNameChange: this.onNameChange,
         onUploadCancelled: cancelUpload,
-        errorMessage: chooseEmojiErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, chooseEmojiErrorMessage) : undefined,
+        errorMessage: chooseEmojiErrorMessage ? jsx(FormattedMessage, chooseEmojiErrorMessage) : undefined,
         intl: intl
       });
     }

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

@@ -9,8 +9,9 @@ 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; } }
 
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import AkButton from '@atlaskit/button/custom-theme-button';
-import React from 'react';
 import { PureComponent } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { customCategory } from '../../util/constants';
@@ -19,7 +20,7 @@ import Emoji from './Emoji';
 import EmojiErrorMessage from './EmojiErrorMessage';
 import { UploadStatus } from './internal-types';
 import RetryableButton from './RetryableButton';
-import * as styles from './styles';
+import { bigEmojiPreview, cancelButton, emojiPreviewErrorMessage, uploadAddRow, uploadPreview, uploadPreviewFooter, uploadPreviewText } from './styles';
 
 var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiUploadPreview, _PureComponent);
@@ -58,44 +59,42 @@ var EmojiUploadPreview = /*#__PURE__*/function (_PureComponent) {
           },
           searchable: true
         };
-        emojiComponent = /*#__PURE__*/React.createElement(Emoji, {
+        emojiComponent = jsx(Emoji, {
           emoji: emoji
         });
       }
 
       var uploading = uploadStatus === UploadStatus.Uploading;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.uploadPreviewFooter
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.uploadPreview
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.uploadPreviewText
-      }, /*#__PURE__*/React.createElement("h5", null, /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPreviewTitle)), /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.emojiPreview, {
+      return jsx("div", {
+        css: uploadPreviewFooter
+      }, jsx("div", {
+        css: uploadPreview
+      }, jsx("div", {
+        css: uploadPreviewText
+      }, jsx("h5", null, jsx(FormattedMessage, messages.emojiPreviewTitle)), jsx(FormattedMessage, _extends({}, messages.emojiPreview, {
         values: {
           emoji: emojiComponent
         }
-      }))), /*#__PURE__*/React.createElement("div", {
-        className: styles.bigEmojiPreview
-      }, emojiComponent)), /*#__PURE__*/React.createElement("div", {
-        className: styles.uploadAddRow
-      }, !uploading && errorMessage ? /*#__PURE__*/React.createElement(EmojiErrorMessage, {
-        className: styles.emojiPreviewErrorMessage,
+      }))), jsx("div", {
+        css: bigEmojiPreview
+      }, emojiComponent)), jsx("div", {
+        css: uploadAddRow
+      }, !uploading && errorMessage ? jsx(EmojiErrorMessage, {
+        messageStyles: emojiPreviewErrorMessage,
         message: errorMessage,
         tooltip: true
-      }) : null, /*#__PURE__*/React.createElement(RetryableButton, {
-        className: styles.uploadEmojiButton,
-        retryClassName: styles.uploadRetryButton,
+      }) : null, jsx(RetryableButton, {
         label: formatMessage(messages.addEmojiLabel),
         onSubmit: onAddEmoji,
         appearance: "primary",
         loading: uploading,
         error: !!errorMessage
-      }), /*#__PURE__*/React.createElement(AkButton, {
+      }), jsx(AkButton, {
         onClick: onUploadCancelled,
         appearance: "subtle",
         isDisabled: uploading,
-        className: styles.cancelButton
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.cancelLabel))));
+        css: cancelButton
+      }, jsx(FormattedMessage, messages.cancelLabel))));
     }
   }]);
 

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

@@ -1,4 +1,4 @@
-import { insertionFailed, insertionSucceeded } from '../../util/analytics';
+import { recordFailed, recordSucceeded, ufoExperiences } from '../../util/analytics';
 
 /**
  * A function that will wrap any configured Emoji 'onSelection' function to ensure recordSelection is always
@@ -12,10 +12,13 @@ export var createRecordSelectionDefault = function createRecordSelectionDefault(
   return function (emojiId, emoji, event) {
     try {
       if (provider.recordSelection && emoji) {
+        ufoExperiences['emoji-selection-recorded'].start();
         provider.recordSelection(emoji).then(function () {
-          return fireAnalytics && fireAnalytics(insertionSucceeded);
+          fireAnalytics && fireAnalytics(recordSucceeded);
+          ufoExperiences['emoji-selection-recorded'].success();
         }).catch(function () {
-          return fireAnalytics && fireAnalytics(insertionFailed);
+          fireAnalytics && fireAnalytics(recordFailed);
+          ufoExperiences['emoji-selection-recorded'].failure();
         });
       }
     } finally {

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

@@ -10,13 +10,13 @@ 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; } }
 
+import PropTypes from 'prop-types';
 import React from 'react';
 import { Component } from 'react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { isPromise } from '../../util/type-helpers';
 import CachingEmoji from './CachingEmoji';
 import EmojiPlaceholder from './EmojiPlaceholder';
-import { EmojiContextProvider } from '../../context/EmojiContextProvider';
 import { sampledUfoRenderedEmoji } from '../../util/analytics';
 
 var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
@@ -41,6 +41,15 @@ var ResourcedEmojiComponent = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(ResourcedEmojiComponent, [{
+    key: "getChildContext",
+    value: function getChildContext() {
+      return {
+        emoji: {
+          emojiProvider: this.props.emojiProvider
+        }
+      };
+    }
+  }, {
     key: "refreshEmoji",
     value: function refreshEmoji(emojiProvider, emojiId) {
       var _this2 = this;
@@ -144,22 +153,19 @@ 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.createElement(EmojiContextProvider, {
-        emojiContextValue: emojiContextValue
-      }, /*#__PURE__*/React.createElement("span", {
+      return /*#__PURE__*/React.createElement("span", {
         "data-emoji-id": id,
         "data-emoji-short-name": shortName,
         "data-emoji-text": fallback || shortName
-      }, element));
+      }, element);
     }
   }]);
 
   return ResourcedEmojiComponent;
 }(Component);
 
+_defineProperty(ResourcedEmojiComponent, "childContextTypes", {
+  emoji: PropTypes.object
+});
+
 export { ResourcedEmojiComponent as default };

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

@@ -8,13 +8,14 @@ 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; } }
 
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import AkButton from '@atlaskit/button/custom-theme-button';
 import Spinner from '@atlaskit/spinner';
-import React from 'react';
 import { Component } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../i18n';
-import * as styles from './styles';
+import { buttonSpinner, uploadEmojiButton, uploadRetryButton } from './styles';
 
 var RetryableButton = /*#__PURE__*/function (_Component) {
   _inherits(RetryableButton, _Component);
@@ -30,20 +31,19 @@ var RetryableButton = /*#__PURE__*/function (_Component) {
   _createClass(RetryableButton, [{
     key: "renderLoading",
     value: function renderLoading() {
-      return /*#__PURE__*/React.createElement("span", {
-        className: styles.buttonSpinner
-      }, /*#__PURE__*/React.createElement(Spinner, null));
+      return jsx("span", {
+        css: buttonSpinner
+      }, jsx(Spinner, 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.createElement(FormattedMessage, messages.retryLabel, function (retryLabel) {
-        return /*#__PURE__*/React.createElement(AkButton, {
-          className: retryClassName,
+      return loading ? this.renderLoading() : jsx(FormattedMessage, messages.retryLabel, function (retryLabel) {
+        return jsx(AkButton, {
+          css: uploadRetryButton,
           appearance: "warning",
           onClick: onSubmit
         }, retryLabel);
@@ -55,12 +55,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.createElement(AkButton, {
-        className: className,
+      return error ? this.renderRetry() : loading ? this.renderLoading() : jsx(AkButton, {
+        css: uploadEmojiButton,
         appearance: appearance,
         onClick: onSubmit
       }, label);

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

@@ -11,8 +11,9 @@ 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; } }
 
 // FIXME - FAB-1732 looking at making a shared component for this
-import classNames from 'classnames';
-import React from 'react';
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { PureComponent } from 'react';
 import { findDOMNode } from 'react-dom';
 import * as styles from './styles';
@@ -88,17 +89,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.createElement("div", {
-        className: classNames(scrollableClasses),
+      return jsx("div", {
+        className: "emoji-scrollable ".concat(className),
+        css: styles.emojiScrollable,
         onMouseLeave: onMouseLeave,
         onScroll: this.handleScroll,
         ref: this.handleRef,