@atlaskit/emoji 64.2.1 → 64.4.1

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

@@ -13,11 +13,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 { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import React from 'react';
+import { ufoExperiences } from '../../util/analytics';
 import LoadingEmojiComponent from '../common/LoadingEmojiComponent';
 import { LoadingItem } from './EmojiPickerVirtualItems';
-import * as styles from './styles';
+import { emojiPicker } from './styles';
+import { UfoErrorBoundary } from '../common/UfoErrorBoundary';
 
 var emojiPickerModuleLoader = function emojiPickerModuleLoader() {
   return import(
@@ -49,6 +52,7 @@ export var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
       asyncLoadedComponent: EmojiPickerInternal.AsyncLoadedComponent
     });
 
+    ufoExperiences['emoji-picker-opened'].start();
     return _this;
   }
 
@@ -76,8 +80,9 @@ export var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
         }
       };
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.emojiPicker,
+      ufoExperiences['emoji-picker-opened'].markFMP();
+      return jsx("div", {
+        css: emojiPicker,
         ref: handlePickerRef
       }, item.renderItem());
     }
@@ -88,9 +93,11 @@ export var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
           emojiProvider = _this$props.emojiProvider,
           otherProps = _objectWithoutProperties(_this$props, _excluded);
 
-      return /*#__PURE__*/React.createElement(EmojiPickerComponent, _extends({
+      return jsx(UfoErrorBoundary, {
+        experiences: [ufoExperiences['emoji-picker-opened']]
+      }, jsx(EmojiPickerComponent, _extends({
         emojiProvider: loadedEmojiProvider
-      }, otherProps));
+      }, otherProps)));
     }
   }]);
 

package/dist/esm/components/picker/EmojiPickerCategoryHeading.js

@@ -8,13 +8,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 classnames from 'classnames';
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { isMessagesKey } from '../../util/type-helpers';
 import { messages } from '../i18n';
-import * as styles from './styles';
+import { emojiCategoryTitle } from './styles';
 
 var EmojiPickerCategoryHeading = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiPickerCategoryHeading, _PureComponent);
@@ -34,13 +34,13 @@ var EmojiPickerCategoryHeading = /*#__PURE__*/function (_PureComponent) {
           id = _this$props.id,
           title = _this$props.title,
           className = _this$props.className;
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         id: id,
         "data-category-id": id,
-        className: classnames(className)
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.emojiCategoryTitle
-      }, isMessagesKey(title) ? /*#__PURE__*/React.createElement(FormattedMessage, messages[title]) : title));
+        className: className
+      }, jsx("div", {
+        css: emojiCategoryTitle
+      }, isMessagesKey(title) ? jsx(FormattedMessage, messages[title]) : title));
     }
   }]);
 

package/dist/esm/components/picker/EmojiPickerComponent.js

@@ -15,8 +15,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 classNames from 'classnames';
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { getEmojiVariation } from '../../api/EmojiRepository';
@@ -32,9 +33,8 @@ import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
 import CategorySelector from './CategorySelector';
 import EmojiPickerFooter from './EmojiPickerFooter';
 import EmojiPickerList from './EmojiPickerList';
-import * as styles from './styles';
-import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent } from '../../util/analytics';
-import { EmojiContextProvider } from '../../context/EmojiContextProvider';
+import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
+import { emojiPicker } from './styles';
 var FREQUENTLY_USED_MAX = 16;
 
 var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
@@ -125,9 +125,19 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onSearch", function (query) {
-      _this.updateEmojis(query, {
+      var options = {
         skinTone: _this.state.selectedTone
-      });
+      };
+
+      if (query !== _this.state.query) {
+        ufoExperiences['emoji-searched'].start();
+        ufoExperiences['emoji-searched'].addMetadata({
+          queryLength: query.length,
+          source: 'picker'
+        });
+      }
+
+      _this.updateEmojis(query, options);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onSearchResult", function (searchResults) {
@@ -141,6 +151,12 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
           queryLength: searchQuery.length,
           numMatches: emojiToRender.length
         }));
+
+        ufoExperiences['emoji-searched'].success({
+          metadata: {
+            emojisLength: emojiToRender.length
+          }
+        });
       }
 
       _this.setStateAfterEmojiChange(searchQuery, emojiToRender, searchResults.emojis, frequentlyUsedEmoji);
@@ -362,6 +378,15 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
   }
 
   _createClass(EmojiPickerComponent, [{
+    key: "getChildContext",
+    value: function getChildContext() {
+      return {
+        emoji: {
+          emojiProvider: this.props.emojiProvider
+        }
+      };
+    }
+  }, {
     key: "UNSAFE_componentWillMount",
     value: function UNSAFE_componentWillMount() {
       this.openTime = Date.now();
@@ -372,6 +397,7 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
     value: function componentDidMount() {
       var _this2 = this;
 
+      ufoExperiences['emoji-picker-opened'].success();
       var _this$props = this.props,
           emojiProvider = _this$props.emojiProvider,
           hideToneSelector = _this$props.hideToneSelector;
@@ -406,6 +432,9 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       this.fireAnalytics(closedPickerEvent({
         duration: this.calculateElapsedTime()
       }));
+      ufoExperiences['emoji-picker-opened'].abort();
+      ufoExperiences['emoji-searched'].abort();
+      ufoExperiences['emoji-selection-recorded'].abort();
     }
   }, {
     key: "UNSAFE_componentWillReceiveProps",
@@ -531,25 +560,17 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       var recordUsageOnSelection = createRecordSelectionDefault(emojiProvider, this.onSelectWrapper, function (analytic) {
         return _this4.fireAnalytics(analytic('picker'));
       });
-      var formattedErrorMessage = uploadErrorMessage ? /*#__PURE__*/React.createElement(FormattedMessage, uploadErrorMessage) : null;
-      var classes = [styles.emojiPicker];
-      var emojiContextValue = {
-        emoji: {
-          emojiProvider: this.props.emojiProvider
-        }
-      };
-      var picker = /*#__PURE__*/React.createElement(EmojiContextProvider, {
-        emojiContextValue: emojiContextValue
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames(classes),
+      var formattedErrorMessage = uploadErrorMessage ? jsx(FormattedMessage, uploadErrorMessage) : null;
+      var picker = jsx("div", {
+        css: emojiPicker,
         ref: this.handlePickerRef,
         "data-emoji-picker-container": true
-      }, /*#__PURE__*/React.createElement(CategorySelector, {
+      }, jsx(CategorySelector, {
         activeCategoryId: activeCategory,
         dynamicCategories: dynamicCategories,
         disableCategories: disableCategories,
         onCategorySelected: this.onCategorySelected
-      }), /*#__PURE__*/React.createElement(EmojiPickerList, {
+      }), jsx(EmojiPickerList, {
         emojis: filteredEmojis,
         currentUser: emojiProvider.getCurrentUser(),
         onEmojiSelected: recordUsageOnSelection,
@@ -575,10 +596,10 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
         onCloseDelete: this.onCloseDelete,
         onFileChooserClicked: this.onFileChooserClicked,
         onOpenUpload: this.onOpenUpload
-      }), /*#__PURE__*/React.createElement(EmojiPickerFooter, {
+      }), jsx(EmojiPickerFooter, {
         selectedEmoji: selectedEmoji,
         isUploading: uploading
-      })));
+      }));
       return picker;
     }
   }]);
@@ -586,6 +607,10 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
   return EmojiPickerComponent;
 }(PureComponent);
 
+_defineProperty(EmojiPickerComponent, "childContextTypes", {
+  emoji: PropTypes.object
+});
+
 _defineProperty(EmojiPickerComponent, "defaultProps", {
   onSelection: function onSelection() {}
 });

package/dist/esm/components/picker/EmojiPickerEmojiRow.js

@@ -8,10 +8,11 @@ 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 { PureComponent } from 'react';
-import * as styles from './styles';
 import CachingEmoji from '../common/CachingEmoji';
+import { emojiItem, emojiPickerRow } from './styles';
 
 var EmojiPickerEmojiRow = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiPickerEmojiRow, _PureComponent);
@@ -34,16 +35,16 @@ var EmojiPickerEmojiRow = /*#__PURE__*/function (_PureComponent) {
           title = _this$props.title,
           showDelete = _this$props.showDelete,
           onDelete = _this$props.onDelete;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.emojiPickerRow
+      return jsx("div", {
+        css: 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.createElement("span", {
-          className: styles.emojiItem,
+        return jsx("span", {
+          css: emojiItem,
           key: key
-        }, /*#__PURE__*/React.createElement(CachingEmoji, {
+        }, jsx(CachingEmoji, {
           emoji: emoji,
           selectOnHover: true,
           onSelected: onSelected,

package/dist/esm/components/picker/EmojiPickerFooter.js

@@ -8,11 +8,11 @@ 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 classNames from 'classnames';
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import { PureComponent } from 'react';
-import * as styles from './styles';
-import EmojiPickerPreview from './EmojiPickerPreview';
+import { EmojiPreviewComponent } from '../common/EmojiPreviewComponent';
+import { emojiPickerFooter, emojiPickerFooterWithTopShadow } from './styles';
 
 var EmojiPickerFooter = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiPickerFooter, _PureComponent);
@@ -31,15 +31,15 @@ var EmojiPickerFooter = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           selectedEmoji = _this$props.selectedEmoji,
           isUploading = _this$props.isUploading;
-      var previewFooterClassnames = classNames([styles.emojiPickerFooter, styles.emojiPickerFooterWithTopShadow]);
+      var previewFooterClassnames = [emojiPickerFooter, emojiPickerFooterWithTopShadow];
 
       if (!selectedEmoji || isUploading) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement("div", {
-        className: previewFooterClassnames
-      }, /*#__PURE__*/React.createElement(EmojiPickerPreview, {
+      return jsx("div", {
+        css: previewFooterClassnames
+      }, selectedEmoji && jsx(EmojiPreviewComponent, {
         emoji: selectedEmoji
       }));
     }

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

@@ -7,11 +7,17 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
+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) { _defineProperty(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 = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
-import classNames from 'classnames';
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
 import React from 'react';
 import { PureComponent } from 'react';
 import { List as VirtualList } from 'react-virtualized/dist/commonjs/List';
@@ -20,8 +26,8 @@ import { CategoryDescriptionMap } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
 import { CategoryHeadingItem, EmojisRowItem, LoadingItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
-import * as styles from './styles';
 import EmojiActions from '../common/EmojiActions';
+import { emojiPickerList, virtualList } from './styles';
 var categoryClassname = 'emoji-category';
 
 var byOrder = function byOrder(orderableA, orderableB) {
@@ -227,6 +233,14 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
   }
 
   _createClass(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) {
@@ -275,11 +289,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.createElement("div", {
+      return jsx("div", {
         ref: "root",
-        className: classNames(classes)
-      }, /*#__PURE__*/React.createElement(EmojiActions, {
+        css: emojiPickerList
+      }, jsx(EmojiActions, {
         selectedTone: selectedTone,
         onToneSelected: onToneSelected,
         onToneSelectorCancelled: onToneSelectorCancelled,
@@ -297,7 +310,7 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         onOpenUpload: onOpenUpload,
         query: query,
         onChange: this.onSearch
-      }), /*#__PURE__*/React.createElement(VirtualList, {
+      }), jsx(VirtualList, {
         ref: "list",
         height: sizes.listHeight,
         overscanRowCount: 5,
@@ -306,7 +319,7 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
         rowRenderer: this.renderRow,
         scrollToAlignment: "start",
         width: sizes.listWidth,
-        className: styles.virtualList,
+        css: virtualList,
         onRowsRendered: this.checkCategoryIdChange
       }));
     }
@@ -315,6 +328,14 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
   return EmojiPickerVirtualList;
 }(PureComponent);
 
+_defineProperty(EmojiPickerVirtualList, "contextTypes", {
+  emoji: PropTypes.object
+});
+
+_defineProperty(EmojiPickerVirtualList, "childContextTypes", {
+  emoji: PropTypes.object
+});
+
 _defineProperty(EmojiPickerVirtualList, "defaultProps", {
   onEmojiSelected: function onEmojiSelected() {},
   onEmojiActive: function onEmojiActive() {},

package/dist/esm/components/picker/EmojiPickerListSearch.js

@@ -10,12 +10,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 React, { PureComponent } from 'react';
 import TextField from '@atlaskit/textfield';
 import SearchIcon from '@atlaskit/icon/glyph/search';
 import { injectIntl } from 'react-intl-next';
 import { messages } from '../i18n';
-import * as styles from './styles';
+import { input, pickerSearch, searchIcon } from './styles';
 
 var EmojiPickerListSearch = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiPickerListSearch, _PureComponent);
@@ -108,12 +110,12 @@ var EmojiPickerListSearch = /*#__PURE__*/function (_PureComponent) {
           query = _this$props.query,
           intl = _this$props.intl;
       var formatMessage = intl.formatMessage;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.pickerSearch,
+      return jsx("div", {
+        css: pickerSearch,
         style: style
-      }, /*#__PURE__*/React.createElement(TextField, {
+      }, jsx(TextField, {
         "aria-label": formatMessage(messages.searchLabel),
-        className: styles.input,
+        css: input,
         autoComplete: "off",
         name: "search",
         placeholder: "".concat(formatMessage(messages.searchPlaceholder), "..."),
@@ -122,9 +124,9 @@ var EmojiPickerListSearch = /*#__PURE__*/function (_PureComponent) {
         ref: this.handleInputRef,
         isCompact: true,
         onBlur: this.onBlur,
-        elemBeforeInput: /*#__PURE__*/React.createElement("span", {
-          className: styles.searchIcon
-        }, /*#__PURE__*/React.createElement(SearchIcon, {
+        elemBeforeInput: jsx("span", {
+          css: searchIcon
+        }, jsx(SearchIcon, {
           label: ""
         }))
       }));

package/dist/esm/components/picker/EmojiPickerVirtualItems.js

@@ -10,12 +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; } }
 
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import Spinner from '@atlaskit/spinner';
-import React from 'react';
 import EmojiPickerCategoryHeading from './EmojiPickerCategoryHeading';
 import EmojiPickerEmojiRow from './EmojiPickerEmojiRow';
 import { sizes } from './EmojiPickerSizes';
-import * as styles from './styles';
+import { emojiPickerSpinner } from './styles';
 export var AbstractItem = /*#__PURE__*/_createClass(function AbstractItem(props, height) {
   _classCallCheck(this, AbstractItem);
 
@@ -35,7 +36,7 @@ export var EmojisRowItem = /*#__PURE__*/function (_AbstractItem) {
     _this = _super.call(this, props, sizes.emojiRowHeight);
 
     _defineProperty(_assertThisInitialized(_this), "renderItem", function () {
-      return /*#__PURE__*/React.createElement(EmojiPickerEmojiRow, _this.props);
+      return jsx(EmojiPickerEmojiRow, _this.props);
     });
 
     return _this;
@@ -56,9 +57,9 @@ export var LoadingItem = /*#__PURE__*/function (_AbstractItem2) {
     _this2 = _super2.call(this, {}, sizes.loadingRowHeight);
 
     _defineProperty(_assertThisInitialized(_this2), "renderItem", function () {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.emojiPickerSpinner
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Spinner, {
+      return jsx("div", {
+        css: emojiPickerSpinner
+      }, jsx("div", null, jsx(Spinner, {
         size: "medium"
       })));
     });
@@ -81,7 +82,7 @@ export var CategoryHeadingItem = /*#__PURE__*/function (_AbstractItem3) {
     _this3 = _super3.call(this, props, sizes.categoryHeadingHeight);
 
     _defineProperty(_assertThisInitialized(_this3), "renderItem", function () {
-      return /*#__PURE__*/React.createElement(EmojiPickerCategoryHeading, _this3.props);
+      return jsx(EmojiPickerCategoryHeading, _this3.props);
     });
 
     return _this3;
@@ -98,7 +99,7 @@ export var virtualItemRenderer = function virtualItemRenderer(rows, context) {
       key = context.key,
       style = context.style;
   var row = rows[index];
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     style: style,
     key: key
   }, row.renderItem(context));