@atlaskit/emoji 64.2.1 → 64.4.1

package/dist/cjs/components/picker/CategorySelector.js

@@ -23,7 +23,7 @@ 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"));
 
@@ -35,7 +35,7 @@ var _i18n = require("../i18n");
 
 var _categories = require("./categories");
 
-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); }
 
@@ -122,37 +122,38 @@ var CategorySelector = /*#__PURE__*/function (_PureComponent) {
 
       if (categories) {
         var formatMessage = intl.formatMessage;
-        categoriesSection = /*#__PURE__*/_react.default.createElement("ul", null, categories.map(function (categoryId) {
+        categoriesSection = (0, _core.jsx)("ul", null, categories.map(function (categoryId) {
           var category = _categories.CategoryDescriptionMap[categoryId];
-          var categoryClasses = [styles.category];
+          var categoryClasses = [_styles.categoryStyles];
 
           if (categoryId === _this2.props.activeCategoryId) {
-            categoryClasses.push(styles.active);
+            categoryClasses.push(_styles.active);
           }
 
           if (disableCategories) {
-            categoryClasses.push(styles.disable);
+            categoryClasses.push(_styles.disable);
           }
 
           var Icon = category.icon;
           var categoryName = formatMessage(_i18n.messages[category.name]);
-          return /*#__PURE__*/_react.default.createElement("li", {
+          return (0, _core.jsx)("li", {
             key: category.id
-          }, /*#__PURE__*/_react.default.createElement("button", {
+          }, (0, _core.jsx)("button", {
             "aria-label": categoryName,
             "data-category-id": category.id,
-            className: (0, _classnames.default)(categoryClasses),
+            disabled: disableCategories,
+            css: categoryClasses,
             onClick: _this2.onClick,
             title: categoryName,
             type: "button"
-          }, /*#__PURE__*/_react.default.createElement(Icon, {
+          }, (0, _core.jsx)(Icon, {
             label: categoryName
           })));
         }));
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)([styles.categorySelector])
+      return (0, _core.jsx)("div", {
+        css: _styles.categorySelector
       }, categoriesSection);
     }
   }]);

package/dist/cjs/components/picker/EmojiPicker.js

@@ -27,15 +27,19 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _core = require("@emotion/core");
+
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _react = _interopRequireDefault(require("react"));
+var _analytics = require("../../util/analytics");
 
 var _LoadingEmojiComponent = _interopRequireDefault(require("../common/LoadingEmojiComponent"));
 
 var _EmojiPickerVirtualItems = require("./EmojiPickerVirtualItems");
 
-var styles = _interopRequireWildcard(require("./styles"));
+var _styles = require("./styles");
+
+var _UfoErrorBoundary = require("../common/UfoErrorBoundary");
 
 var _excluded = ["emojiProvider"];
 
@@ -74,6 +78,9 @@ var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       asyncLoadedComponent: EmojiPickerInternal.AsyncLoadedComponent
     });
+
+    _analytics.ufoExperiences['emoji-picker-opened'].start();
+
     return _this;
   }
 
@@ -101,8 +108,10 @@ var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
         }
       };
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.emojiPicker,
+      _analytics.ufoExperiences['emoji-picker-opened'].markFMP();
+
+      return (0, _core.jsx)("div", {
+        css: _styles.emojiPicker,
         ref: handlePickerRef
       }, item.renderItem());
     }
@@ -112,9 +121,11 @@ var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
       var _this$props = this.props,
           emojiProvider = _this$props.emojiProvider,
           otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      return /*#__PURE__*/_react.default.createElement(EmojiPickerComponent, (0, _extends2.default)({
+      return (0, _core.jsx)(_UfoErrorBoundary.UfoErrorBoundary, {
+        experiences: [_analytics.ufoExperiences['emoji-picker-opened']]
+      }, (0, _core.jsx)(EmojiPickerComponent, (0, _extends2.default)({
         emojiProvider: loadedEmojiProvider
-      }, otherProps));
+      }, otherProps)));
     }
   }]);
   return EmojiPickerInternal;

package/dist/cjs/components/picker/EmojiPickerCategoryHeading.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,9 +17,9 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _core = require("@emotion/core");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -29,11 +27,7 @@ var _typeHelpers = require("../../util/type-helpers");
 
 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); }; }
 
@@ -56,13 +50,13 @@ var EmojiPickerCategoryHeading = /*#__PURE__*/function (_PureComponent) {
           id = _this$props.id,
           title = _this$props.title,
           className = _this$props.className;
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _core.jsx)("div", {
         id: id,
         "data-category-id": id,
-        className: (0, _classnames.default)(className)
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.emojiCategoryTitle
-      }, (0, _typeHelpers.isMessagesKey)(title) ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages[title]) : title));
+        className: className
+      }, (0, _core.jsx)("div", {
+        css: _styles.emojiCategoryTitle
+      }, (0, _typeHelpers.isMessagesKey)(title) ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages[title]) : title));
     }
   }]);
   return EmojiPickerCategoryHeading;

package/dist/cjs/components/picker/EmojiPickerComponent.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 _classnames = _interopRequireDefault(require("classnames"));
+var _core = require("@emotion/core");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -53,15 +53,9 @@ var _EmojiPickerFooter = _interopRequireDefault(require("./EmojiPickerFooter"));
 
 var _EmojiPickerList = _interopRequireDefault(require("./EmojiPickerList"));
 
-var styles = _interopRequireWildcard(require("./styles"));
-
 var _analytics = require("../../util/analytics");
 
-var _EmojiContextProvider = require("../../context/EmojiContextProvider");
-
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -152,9 +146,20 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSearch", function (query) {
-      _this.updateEmojis(query, {
+      var options = {
         skinTone: _this.state.selectedTone
-      });
+      };
+
+      if (query !== _this.state.query) {
+        _analytics.ufoExperiences['emoji-searched'].start();
+
+        _analytics.ufoExperiences['emoji-searched'].addMetadata({
+          queryLength: query.length,
+          source: 'picker'
+        });
+      }
+
+      _this.updateEmojis(query, options);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onSearchResult", function (searchResults) {
       var frequentlyUsedEmoji = _this.state.frequentlyUsedEmojis || [];
@@ -167,6 +172,12 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
           queryLength: searchQuery.length,
           numMatches: emojiToRender.length
         }));
+
+        _analytics.ufoExperiences['emoji-searched'].success({
+          metadata: {
+            emojisLength: emojiToRender.length
+          }
+        });
       }
 
       _this.setStateAfterEmojiChange(searchQuery, emojiToRender, searchResults.emojis, frequentlyUsedEmoji);
@@ -372,6 +383,15 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
   }
 
   (0, _createClass2.default)(EmojiPickerComponent, [{
+    key: "getChildContext",
+    value: function getChildContext() {
+      return {
+        emoji: {
+          emojiProvider: this.props.emojiProvider
+        }
+      };
+    }
+  }, {
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
       this.openTime = Date.now();
@@ -382,6 +402,8 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
     value: function componentDidMount() {
       var _this2 = this;
 
+      _analytics.ufoExperiences['emoji-picker-opened'].success();
+
       var _this$props = this.props,
           emojiProvider = _this$props.emojiProvider,
           hideToneSelector = _this$props.hideToneSelector;
@@ -416,6 +438,12 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       this.fireAnalytics((0, _analytics.closedPickerEvent)({
         duration: this.calculateElapsedTime()
       }));
+
+      _analytics.ufoExperiences['emoji-picker-opened'].abort();
+
+      _analytics.ufoExperiences['emoji-searched'].abort();
+
+      _analytics.ufoExperiences['emoji-selection-recorded'].abort();
     }
   }, {
     key: "UNSAFE_componentWillReceiveProps",
@@ -541,26 +569,17 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       var recordUsageOnSelection = (0, _RecordSelectionDefault.createRecordSelectionDefault)(emojiProvider, this.onSelectWrapper, function (analytic) {
         return _this4.fireAnalytics(analytic('picker'));
       });
-      var formattedErrorMessage = uploadErrorMessage ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
-      var classes = [styles.emojiPicker];
-      var emojiContextValue = {
-        emoji: {
-          emojiProvider: this.props.emojiProvider
-        }
-      };
-
-      var picker = /*#__PURE__*/_react.default.createElement(_EmojiContextProvider.EmojiContextProvider, {
-        emojiContextValue: emojiContextValue
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames.default)(classes),
+      var formattedErrorMessage = uploadErrorMessage ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
+      var picker = (0, _core.jsx)("div", {
+        css: _styles.emojiPicker,
         ref: this.handlePickerRef,
         "data-emoji-picker-container": true
-      }, /*#__PURE__*/_react.default.createElement(_CategorySelector.default, {
+      }, (0, _core.jsx)(_CategorySelector.default, {
         activeCategoryId: activeCategory,
         dynamicCategories: dynamicCategories,
         disableCategories: disableCategories,
         onCategorySelected: this.onCategorySelected
-      }), /*#__PURE__*/_react.default.createElement(_EmojiPickerList.default, {
+      }), (0, _core.jsx)(_EmojiPickerList.default, {
         emojis: filteredEmojis,
         currentUser: emojiProvider.getCurrentUser(),
         onEmojiSelected: recordUsageOnSelection,
@@ -586,11 +605,10 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
         onCloseDelete: this.onCloseDelete,
         onFileChooserClicked: this.onFileChooserClicked,
         onOpenUpload: this.onOpenUpload
-      }), /*#__PURE__*/_react.default.createElement(_EmojiPickerFooter.default, {
+      }), (0, _core.jsx)(_EmojiPickerFooter.default, {
         selectedEmoji: selectedEmoji,
         isUploading: uploading
-      })));
-
+      }));
       return picker;
     }
   }]);
@@ -598,6 +616,9 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 
 exports.default = EmojiPickerComponent;
+(0, _defineProperty2.default)(EmojiPickerComponent, "childContextTypes", {
+  emoji: _propTypes.default.object
+});
 (0, _defineProperty2.default)(EmojiPickerComponent, "defaultProps", {
   onSelection: function onSelection() {}
 });

package/dist/cjs/components/picker/EmojiPickerEmojiRow.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,15 +17,13 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _core = require("@emotion/core");
 
-var styles = _interopRequireWildcard(require("./styles"));
+var _react = require("react");
 
 var _CachingEmoji = _interopRequireDefault(require("../common/CachingEmoji"));
 
-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); }; }
 
@@ -53,16 +49,16 @@ var EmojiPickerEmojiRow = /*#__PURE__*/function (_PureComponent) {
           title = _this$props.title,
           showDelete = _this$props.showDelete,
           onDelete = _this$props.onDelete;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.emojiPickerRow
+      return (0, _core.jsx)("div", {
+        css: _styles.emojiPickerRow
       }, emojis.map(function (emoji) {
         var shortName = emoji.shortName,
             id = emoji.id;
         var key = id ? "".concat(id, "-").concat(title) : "".concat(shortName, "-").concat(title);
-        return /*#__PURE__*/_react.default.createElement("span", {
-          className: styles.emojiItem,
+        return (0, _core.jsx)("span", {
+          css: _styles.emojiItem,
           key: key
-        }, /*#__PURE__*/_react.default.createElement(_CachingEmoji.default, {
+        }, (0, _core.jsx)(_CachingEmoji.default, {
           emoji: emoji,
           selectOnHover: true,
           onSelected: onSelected,

package/dist/cjs/components/picker/EmojiPickerFooter.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,17 +17,13 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var styles = _interopRequireWildcard(require("./styles"));
+var _core = require("@emotion/core");
 
-var _EmojiPickerPreview = _interopRequireDefault(require("./EmojiPickerPreview"));
+var _react = require("react");
 
-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 _EmojiPreviewComponent = require("../common/EmojiPreviewComponent");
 
-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); }; }
 
@@ -51,15 +45,15 @@ var EmojiPickerFooter = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           selectedEmoji = _this$props.selectedEmoji,
           isUploading = _this$props.isUploading;
-      var previewFooterClassnames = (0, _classnames.default)([styles.emojiPickerFooter, styles.emojiPickerFooterWithTopShadow]);
+      var previewFooterClassnames = [_styles.emojiPickerFooter, _styles.emojiPickerFooterWithTopShadow];
 
       if (!selectedEmoji || isUploading) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: previewFooterClassnames
-      }, /*#__PURE__*/_react.default.createElement(_EmojiPickerPreview.default, {
+      return (0, _core.jsx)("div", {
+        css: previewFooterClassnames
+      }, selectedEmoji && (0, _core.jsx)(_EmojiPreviewComponent.EmojiPreviewComponent, {
         emoji: selectedEmoji
       }));
     }

package/dist/cjs/components/picker/EmojiPickerList.js

@@ -25,7 +25,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 _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -41,14 +43,18 @@ var _EmojiPickerSizes = require("./EmojiPickerSizes");
 
 var _EmojiPickerVirtualItems = require("./EmojiPickerVirtualItems");
 
-var styles = _interopRequireWildcard(require("./styles"));
-
 var _EmojiActions = _interopRequireDefault(require("../common/EmojiActions"));
 
+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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 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; } }
@@ -244,6 +250,14 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
   }
 
   (0, _createClass2.default)(EmojiPickerVirtualList, [{
+    key: "getChildContext",
+    value: function getChildContext() {
+      var emoji = this.context.emoji;
+      return {
+        emoji: _objectSpread({}, emoji)
+      };
+    }
+  }, {
     key: "UNSAFE_componentWillUpdate",
     value: function UNSAFE_componentWillUpdate(nextProps, nextState) {
       if (this.props.emojis !== nextProps.emojis || this.props.selectedTone !== nextProps.selectedTone || this.props.loading !== nextProps.loading || this.props.query !== nextProps.query) {
@@ -292,11 +306,10 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
           onDeleteEmoji = _this$props2.onDeleteEmoji,
           onFileChooserClicked = _this$props2.onFileChooserClicked,
           onOpenUpload = _this$props2.onOpenUpload;
-      var classes = [styles.emojiPickerList];
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _core.jsx)("div", {
         ref: "root",
-        className: (0, _classnames.default)(classes)
-      }, /*#__PURE__*/_react.default.createElement(_EmojiActions.default, {
+        css: _styles.emojiPickerList
+      }, (0, _core.jsx)(_EmojiActions.default, {
         selectedTone: selectedTone,
         onToneSelected: onToneSelected,
         onToneSelectorCancelled: onToneSelectorCancelled,
@@ -314,7 +327,7 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         onOpenUpload: onOpenUpload,
         query: query,
         onChange: this.onSearch
-      }), /*#__PURE__*/_react.default.createElement(_List.List, {
+      }), (0, _core.jsx)(_List.List, {
         ref: "list",
         height: _EmojiPickerSizes.sizes.listHeight,
         overscanRowCount: 5,
@@ -323,7 +336,7 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         rowRenderer: this.renderRow,
         scrollToAlignment: "start",
         width: _EmojiPickerSizes.sizes.listWidth,
-        className: styles.virtualList,
+        css: _styles.virtualList,
         onRowsRendered: this.checkCategoryIdChange
       }));
     }
@@ -332,6 +345,12 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
 }(_react.PureComponent);
 
 exports.default = EmojiPickerVirtualList;
+(0, _defineProperty2.default)(EmojiPickerVirtualList, "contextTypes", {
+  emoji: _propTypes.default.object
+});
+(0, _defineProperty2.default)(EmojiPickerVirtualList, "childContextTypes", {
+  emoji: _propTypes.default.object
+});
 (0, _defineProperty2.default)(EmojiPickerVirtualList, "defaultProps", {
   onEmojiSelected: function onEmojiSelected() {},
   onEmojiActive: function onEmojiActive() {},

package/dist/cjs/components/picker/EmojiPickerListSearch.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 _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
@@ -33,7 +35,7 @@ var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("../i18n");
 
-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); }
 
@@ -129,12 +131,12 @@ var EmojiPickerListSearch = /*#__PURE__*/function (_PureComponent) {
           query = _this$props.query,
           intl = _this$props.intl;
       var formatMessage = intl.formatMessage;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.pickerSearch,
+      return (0, _core.jsx)("div", {
+        css: _styles.pickerSearch,
         style: style
-      }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
+      }, (0, _core.jsx)(_textfield.default, {
         "aria-label": formatMessage(_i18n.messages.searchLabel),
-        className: styles.input,
+        css: _styles.input,
         autoComplete: "off",
         name: "search",
         placeholder: "".concat(formatMessage(_i18n.messages.searchPlaceholder), "..."),
@@ -143,9 +145,9 @@ var EmojiPickerListSearch = /*#__PURE__*/function (_PureComponent) {
         ref: this.handleInputRef,
         isCompact: true,
         onBlur: this.onBlur,
-        elemBeforeInput: /*#__PURE__*/_react.default.createElement("span", {
-          className: styles.searchIcon
-        }, /*#__PURE__*/_react.default.createElement(_search.default, {
+        elemBeforeInput: (0, _core.jsx)("span", {
+          css: _styles.searchIcon
+        }, (0, _core.jsx)(_search.default, {
           label: ""
         }))
       }));