@atlaskit/emoji 63.2.0 → 64.1.1

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

@@ -7,9 +7,9 @@ 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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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); }; }
 
@@ -19,7 +19,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { PureComponent } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import { getEmojiVariation } from '../../api/EmojiRepository';
 import { supportsUploadFeature } from '../../api/EmojiResource';
 import { customCategory, frequentCategory } from '../../util/constants';
@@ -52,12 +52,7 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "onEmojiActive", function (_emojiId, emoji) {
       if (_this.state.selectedEmoji !== emoji) {
         _this.setState({
-          selectedEmoji: emoji,
-          showUploadButton: false
-        });
-      } else {
-        _this.setState({
-          showUploadButton: false
+          selectedEmoji: emoji
         });
       }
     });
@@ -111,18 +106,6 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       _this.fireAnalytics(selectedFileEvent());
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onEmojiPickerMouseLeave", function () {
-      _this.setState({
-        showUploadButton: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onEmojiPickerMouseEnter", function () {
-      _this.setState({
-        showUploadButton: false
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "fireAnalytics", function (analyticsEvent) {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
 
@@ -372,8 +355,7 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       selectedTone: !hideToneSelector ? _emojiProvider.getSelectedTone() : undefined,
       loading: true,
       uploadSupported: false,
-      uploading: false,
-      showUploadButton: true
+      uploading: false
     };
     _this.openTime = 0;
     return _this;
@@ -554,8 +536,7 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
           emojiToDelete = _this$state3.emojiToDelete,
           uploading = _this$state3.uploading,
           uploadErrorMessage = _this$state3.uploadErrorMessage,
-          uploadSupported = _this$state3.uploadSupported,
-          showUploadButton = _this$state3.showUploadButton;
+          uploadSupported = _this$state3.uploadSupported;
       var recordUsageOnSelection = createRecordSelectionDefault(emojiProvider, this.onSelectWrapper, function (analytic) {
         return _this4.fireAnalytics(analytic('picker'));
       });
@@ -577,30 +558,28 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
         onEmojiActive: this.onEmojiActive,
         onEmojiDelete: this.onTriggerDelete,
         onCategoryActivated: this.onCategoryActivated,
-        onMouseLeave: this.onEmojiPickerMouseLeave,
-        onMouseEnter: this.onEmojiPickerMouseEnter,
         onSearch: this.onSearch,
         query: query,
         selectedTone: selectedTone,
         loading: loading,
-        ref: "emojiPickerList"
-      }), /*#__PURE__*/React.createElement(EmojiPickerFooter, {
+        ref: "emojiPickerList",
         initialUploadName: query,
-        selectedEmoji: selectedEmoji,
-        selectedTone: selectedTone,
         onToneSelected: this.onToneSelected,
         onToneSelectorCancelled: this.onToneSelectorCancelled,
         toneEmoji: toneEmoji,
         uploading: uploading,
         emojiToDelete: emojiToDelete,
         uploadErrorMessage: formattedErrorMessage,
-        uploadEnabled: uploadSupported && showUploadButton && !uploading,
+        uploadEnabled: uploadSupported && !uploading,
         onUploadEmoji: this.onUploadEmoji,
         onUploadCancelled: this.onUploadCancelled,
         onDeleteEmoji: this.onDeleteEmoji,
         onCloseDelete: this.onCloseDelete,
         onFileChooserClicked: this.onFileChooserClicked,
         onOpenUpload: this.onOpenUpload
+      }), /*#__PURE__*/React.createElement(EmojiPickerFooter, {
+        selectedEmoji: selectedEmoji,
+        isUploading: uploading
       }));
       return picker;
     }

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

@@ -50,7 +50,8 @@ var EmojiPickerEmojiRow = /*#__PURE__*/function (_PureComponent) {
           onMouseMove: onMouseMove,
           showDelete: showDelete,
           onDelete: onDelete,
-          placeholderSize: 24
+          placeholderSize: 24,
+          shouldBeInteractive: true
         }));
       }));
     }

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

@@ -11,10 +11,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import classNames from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
-import EmojiDeletePreview from '../common/EmojiDeletePreview';
-import EmojiPreview from '../common/EmojiPreview';
-import EmojiUploadPicker from '../common/EmojiUploadPicker';
 import * as styles from './styles';
+import EmojiPickerPreview from './EmojiPickerPreview';
 
 var EmojiPickerFooter = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiPickerFooter, _PureComponent);
@@ -31,56 +29,18 @@ var EmojiPickerFooter = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          initialUploadName = _this$props.initialUploadName,
-          onToneSelected = _this$props.onToneSelected,
-          onToneSelectorCancelled = _this$props.onToneSelectorCancelled,
-          onUploadCancelled = _this$props.onUploadCancelled,
-          onUploadEmoji = _this$props.onUploadEmoji,
-          onCloseDelete = _this$props.onCloseDelete,
-          onDeleteEmoji = _this$props.onDeleteEmoji,
           selectedEmoji = _this$props.selectedEmoji,
-          selectedTone = _this$props.selectedTone,
-          toneEmoji = _this$props.toneEmoji,
-          uploadErrorMessage = _this$props.uploadErrorMessage,
-          uploading = _this$props.uploading,
-          onFileChooserClicked = _this$props.onFileChooserClicked,
-          onOpenUpload = _this$props.onOpenUpload,
-          uploadEnabled = _this$props.uploadEnabled,
-          emojiToDelete = _this$props.emojiToDelete;
+          isUploading = _this$props.isUploading;
       var previewFooterClassnames = classNames([styles.emojiPickerFooter, styles.emojiPickerFooterWithTopShadow]);
 
-      if (uploading) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: previewFooterClassnames
-        }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
-          onUploadCancelled: onUploadCancelled,
-          onUploadEmoji: onUploadEmoji,
-          onFileChooserClicked: onFileChooserClicked,
-          errorMessage: uploadErrorMessage,
-          initialUploadName: initialUploadName
-        }));
-      }
-
-      if (emojiToDelete) {
-        return /*#__PURE__*/React.createElement("div", {
-          className: previewFooterClassnames
-        }, /*#__PURE__*/React.createElement(EmojiDeletePreview, {
-          emoji: emojiToDelete,
-          onDeleteEmoji: onDeleteEmoji,
-          onCloseDelete: onCloseDelete
-        }));
+      if (!selectedEmoji || isUploading) {
+        return null;
       }
 
       return /*#__PURE__*/React.createElement("div", {
         className: previewFooterClassnames
-      }, /*#__PURE__*/React.createElement(EmojiPreview, {
-        emoji: selectedEmoji,
-        toneEmoji: toneEmoji,
-        selectedTone: selectedTone,
-        onToneSelected: onToneSelected,
-        onToneSelectorCancelled: onToneSelectorCancelled,
-        onOpenUpload: onOpenUpload,
-        uploadEnabled: uploadEnabled
+      }, /*#__PURE__*/React.createElement(EmojiPickerPreview, {
+        emoji: selectedEmoji
       }));
     }
   }]);

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

@@ -7,9 +7,9 @@ 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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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); }; }
 
@@ -26,7 +26,7 @@ import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
 import { CategoryHeadingItem, EmojisRowItem, LoadingItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
 import * as styles from './styles';
-import EmojiPickerListSearch from './EmojiPickerListSearch';
+import EmojiActions from '../common/EmojiActions';
 var categoryClassname = 'emoji-category';
 
 var byOrder = function byOrder(orderableA, orderableB) {
@@ -272,18 +272,44 @@ var EmojiPickerVirtualList = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
-          onMouseLeave = _this$props2.onMouseLeave,
-          onMouseEnter = _this$props2.onMouseEnter,
-          query = _this$props2.query;
+          query = _this$props2.query,
+          selectedTone = _this$props2.selectedTone,
+          onToneSelected = _this$props2.onToneSelected,
+          onToneSelectorCancelled = _this$props2.onToneSelectorCancelled,
+          toneEmoji = _this$props2.toneEmoji,
+          uploading = _this$props2.uploading,
+          uploadEnabled = _this$props2.uploadEnabled,
+          emojiToDelete = _this$props2.emojiToDelete,
+          initialUploadName = _this$props2.initialUploadName,
+          uploadErrorMessage = _this$props2.uploadErrorMessage,
+          onUploadCancelled = _this$props2.onUploadCancelled,
+          onUploadEmoji = _this$props2.onUploadEmoji,
+          onCloseDelete = _this$props2.onCloseDelete,
+          onDeleteEmoji = _this$props2.onDeleteEmoji,
+          onFileChooserClicked = _this$props2.onFileChooserClicked,
+          onOpenUpload = _this$props2.onOpenUpload;
       var classes = [styles.emojiPickerList];
       return /*#__PURE__*/React.createElement("div", {
         ref: "root",
-        className: classNames(classes),
-        onMouseLeave: onMouseLeave,
-        onMouseEnter: onMouseEnter
-      }, /*#__PURE__*/React.createElement(EmojiPickerListSearch, {
-        onChange: this.onSearch,
-        query: query
+        className: classNames(classes)
+      }, /*#__PURE__*/React.createElement(EmojiActions, {
+        selectedTone: selectedTone,
+        onToneSelected: onToneSelected,
+        onToneSelectorCancelled: onToneSelectorCancelled,
+        toneEmoji: toneEmoji,
+        uploading: uploading,
+        uploadEnabled: uploadEnabled,
+        emojiToDelete: emojiToDelete,
+        initialUploadName: initialUploadName,
+        uploadErrorMessage: uploadErrorMessage,
+        onUploadCancelled: onUploadCancelled,
+        onUploadEmoji: onUploadEmoji,
+        onCloseDelete: onCloseDelete,
+        onDeleteEmoji: onDeleteEmoji,
+        onFileChooserClicked: onFileChooserClicked,
+        onOpenUpload: onOpenUpload,
+        query: query,
+        onChange: this.onSearch
       }), /*#__PURE__*/React.createElement(VirtualList, {
         ref: "list",
         height: sizes.listHeight,

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

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React, { PureComponent } from 'react';
 import TextField from '@atlaskit/textfield';
 import SearchIcon from '@atlaskit/icon/glyph/search';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl } from 'react-intl-next';
 import { messages } from '../i18n';
 import * as styles from './styles';
 
@@ -103,34 +103,30 @@ var EmojiPickerListSearch = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
-
       var _this$props = this.props,
           style = _this$props.style,
-          query = _this$props.query;
+          query = _this$props.query,
+          intl = _this$props.intl;
+      var formatMessage = intl.formatMessage;
       return /*#__PURE__*/React.createElement("div", {
         className: styles.pickerSearch,
         style: style
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.searchPlaceholder, function (searchPlaceholder) {
-        return /*#__PURE__*/React.createElement(FormattedMessage, messages.searchLabel, function (searchLabel) {
-          return /*#__PURE__*/React.createElement(TextField, {
-            "aria-label": searchLabel,
-            className: styles.input,
-            autoComplete: "off",
-            name: "search",
-            placeholder: "".concat(searchPlaceholder, "..."),
-            onChange: _this2.onChange,
-            value: query || '',
-            ref: _this2.handleInputRef,
-            isCompact: true,
-            onBlur: _this2.onBlur,
-            elemBeforeInput: /*#__PURE__*/React.createElement("span", {
-              className: styles.searchIcon
-            }, /*#__PURE__*/React.createElement(SearchIcon, {
-              label: ""
-            }))
-          });
-        });
+      }, /*#__PURE__*/React.createElement(TextField, {
+        "aria-label": formatMessage(messages.searchLabel),
+        className: styles.input,
+        autoComplete: "off",
+        name: "search",
+        placeholder: "".concat(formatMessage(messages.searchPlaceholder), "..."),
+        onChange: this.onChange,
+        value: query || '',
+        ref: this.handleInputRef,
+        isCompact: true,
+        onBlur: this.onBlur,
+        elemBeforeInput: /*#__PURE__*/React.createElement("span", {
+          className: styles.searchIcon
+        }, /*#__PURE__*/React.createElement(SearchIcon, {
+          label: ""
+        }))
       }));
     }
   }]);
@@ -142,4 +138,4 @@ _defineProperty(EmojiPickerListSearch, "defaultProps", {
   style: {}
 });
 
-export { EmojiPickerListSearch as default };
+export default injectIntl(EmojiPickerListSearch);

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

@@ -0,0 +1,67 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+
+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';
+import React from 'react';
+import { PureComponent } from 'react';
+import CachingEmoji from '../../components/common/CachingEmoji';
+import * as styles from '../common/styles';
+
+var EmojiPickerPreview = /*#__PURE__*/function (_PureComponent) {
+  _inherits(EmojiPickerPreview, _PureComponent);
+
+  var _super = _createSuper(EmojiPickerPreview);
+
+  function EmojiPickerPreview() {
+    _classCallCheck(this, EmojiPickerPreview);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(EmojiPickerPreview, [{
+    key: "renderEmojiPreview",
+    value: function renderEmojiPreview() {
+      var emoji = this.props.emoji;
+
+      if (emoji) {
+        var _classNames2;
+
+        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, {
+          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)));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var sectionClasses = classNames([styles.emojiPreview, styles.emojiPreviewSection]);
+      return /*#__PURE__*/React.createElement("div", {
+        className: sectionClasses
+      }, this.renderEmojiPreview());
+    }
+  }]);
+
+  return EmojiPickerPreview;
+}(PureComponent);
+
+export { EmojiPickerPreview as default };

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

@@ -3,6 +3,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 
 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); }; }
@@ -15,12 +16,12 @@ import EmojiPickerCategoryHeading from './EmojiPickerCategoryHeading';
 import EmojiPickerEmojiRow from './EmojiPickerEmojiRow';
 import { sizes } from './EmojiPickerSizes';
 import * as styles from './styles';
-export var AbstractItem = function AbstractItem(props, height) {
+export var AbstractItem = /*#__PURE__*/_createClass(function AbstractItem(props, height) {
   _classCallCheck(this, AbstractItem);
 
   this.props = props;
   this.height = height;
-};
+});
 export var EmojisRowItem = /*#__PURE__*/function (_AbstractItem) {
   _inherits(EmojisRowItem, _AbstractItem);
 
@@ -40,7 +41,7 @@ export var EmojisRowItem = /*#__PURE__*/function (_AbstractItem) {
     return _this;
   }
 
-  return EmojisRowItem;
+  return _createClass(EmojisRowItem);
 }(AbstractItem);
 export var LoadingItem = /*#__PURE__*/function (_AbstractItem2) {
   _inherits(LoadingItem, _AbstractItem2);
@@ -65,7 +66,7 @@ export var LoadingItem = /*#__PURE__*/function (_AbstractItem2) {
     return _this2;
   }
 
-  return LoadingItem;
+  return _createClass(LoadingItem);
 }(AbstractItem);
 export var CategoryHeadingItem = /*#__PURE__*/function (_AbstractItem3) {
   _inherits(CategoryHeadingItem, _AbstractItem3);
@@ -86,7 +87,7 @@ export var CategoryHeadingItem = /*#__PURE__*/function (_AbstractItem3) {
     return _this3;
   }
 
-  return CategoryHeadingItem;
+  return _createClass(CategoryHeadingItem);
 }(AbstractItem);
 /**
  * These are the values provided by react-virtualized.

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

@@ -16,7 +16,7 @@ export var emojiPicker = style({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
-  background: token('color.background.overlay', 'white'),
+  background: token('elevation.surface.overlay', 'white'),
   border: "".concat(emojiPickerBorderColor, " 1px solid"),
   borderRadius: "".concat(borderRadius(), "px"),
   boxShadow: emojiPickerBoxShadow,
@@ -30,7 +30,7 @@ export var emojiPicker = style({
 export var addButton = 'emoji-picker-add-button';
 export var categorySelector = style({
   flex: '0 0 auto',
-  backgroundColor: token('color.background.sunken', colors.N30),
+  backgroundColor: token('elevation.surface.sunken', colors.N30),
   $nest: _defineProperty({
     ul: {
       listStyle: 'none',
@@ -51,7 +51,7 @@ export var categorySelector = style({
       }
     }
   }, ".".concat(addButton), {
-    color: token('color.text.lowEmphasis', colors.N200),
+    color: token('color.text.subtlest', colors.N200),
     margin: '0 0 0 5px',
     verticalAlign: 'middle'
   })
@@ -59,7 +59,7 @@ export var categorySelector = style({
 export var category = style({
   backgroundColor: 'transparent',
   border: 0,
-  color: token('color.text.lowEmphasis', colors.N100A),
+  color: token('color.text.subtlest', colors.N100A),
   cursor: 'pointer',
   margin: '2px 0',
   padding: 0,
@@ -68,17 +68,17 @@ export var category = style({
     border: '0 none',
     padding: 0
   }), _defineProperty(_$nest4, "&.".concat(active), {
-    color: token('color.text.selected', colors.B300),
+    color: token('color.text.brand', colors.B300),
     $nest: _defineProperty({}, '&:hover', {
-      color: token('color.text.selected', colors.B300)
+      color: token('color.text.brand', colors.B300)
     })
   }), _defineProperty(_$nest4, '&:hover', {
-    color: token('color.text.selected', colors.B200)
+    color: token('color.text.brand', colors.B200)
   }), _defineProperty(_$nest4, "&.".concat(disable), {
-    color: token('color.text.lowEmphasis', colors.N50),
+    color: token('color.text.subtlest', colors.N50),
     cursor: 'default',
     $nest: _defineProperty({}, '&:hover', {
-      color: token('color.text.lowEmphasis', colors.N50)
+      color: token('color.text.subtlest', colors.N50)
     })
   }), _$nest4)
 }); /// EmojiPickerList
@@ -103,8 +103,8 @@ export var searchIcon = 'search-icon';
 export var input = 'input';
 export var pickerSearch = style({
   boxSizing: 'border-box',
-  padding: '10px 10px 9px 10px',
-  flex: '0 0 auto',
+  padding: '10px 10px 11px 10px',
+  width: '100%',
   $nest: (_$nest6 = {}, _defineProperty(_$nest6, ".".concat(searchIcon), {
     opacity: 0.5
   }), _defineProperty(_$nest6, ".".concat(input), {
@@ -141,7 +141,7 @@ export var emojiPickerRow = style({
 });
 export var emojiCategoryTitle = style({
   boxSizing: 'border-box',
-  color: token('color.text.highEmphasis', colors.N900),
+  color: token('color.text', colors.N900),
   fontSize: '14px',
   padding: '5px 8px',
   textTransform: 'lowercase',
@@ -209,6 +209,10 @@ export var emojiPickerFooter = style({
   flex: '0 0 auto'
 });
 export var emojiPickerFooterWithTopShadow = style({
-  borderTop: token('color.border.neutral', "2px solid ".concat(colors.N30A)),
-  boxShadow: "0px -1px 1px 0px ".concat(token('color.border.neutral', 'rgba(0, 0, 0, 0.1)'))
+  borderTop: "2px solid ".concat(token('color.border', colors.N30A)),
+  boxShadow: "0px -1px 1px 0px ".concat(token('color.border', 'rgba(0, 0, 0, 0.1)'))
+});
+export var emojiActionsContainerWithBottomShadow = style({
+  borderBottom: "2px solid ".concat(token('color.border', colors.N30A)),
+  boxShadow: "0px 1px 1px 0px ".concat(token('color.border', 'rgba(0, 0, 0, 0.1)'))
 });

package/dist/esm/components/typeahead/EmojiTypeAhead.js

@@ -7,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["emojiProvider", "target", "position", "zIndex", "offsetX", "offsetY"];
 
 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); }; }
 
@@ -97,7 +98,7 @@ var EmojiTypeahead = /*#__PURE__*/function (_LoadingEmojiComponen) {
           zIndex = _this$props.zIndex,
           offsetX = _this$props.offsetX,
           offsetY = _this$props.offsetY,
-          otherProps = _objectWithoutProperties(_this$props, ["emojiProvider", "target", "position", "zIndex", "offsetX", "offsetY"]);
+          otherProps = _objectWithoutProperties(_this$props, _excluded);
 
       var typeAhead = /*#__PURE__*/React.createElement(EmojiTypeAheadComponent, _extends({}, otherProps, {
         emojiProvider: loadedEmojiProvider,

package/dist/esm/components/typeahead/EmojiTypeAheadItem.js

@@ -15,8 +15,8 @@ import React from 'react';
 import { PureComponent } from 'react';
 import { toEmojiId } from '../../util/type-helpers';
 import { leftClick } from '../../util/mouse';
-import EmojiPreview from '../common/EmojiPreview';
 import * as styles from './styles';
+import EmojiPickerPreview from '../picker/EmojiPickerPreview';
 
 var EmojiTypeAheadItem = /*#__PURE__*/function (_PureComponent) {
   _inherits(EmojiTypeAheadItem, _PureComponent);
@@ -76,7 +76,7 @@ var EmojiTypeAheadItem = /*#__PURE__*/function (_PureComponent) {
         "data-emoji-id": emoji.shortName
       }, /*#__PURE__*/React.createElement("div", {
         className: styles.typeAheadItemRow
-      }, /*#__PURE__*/React.createElement(EmojiPreview, {
+      }, /*#__PURE__*/React.createElement(EmojiPickerPreview, {
         emoji: emoji
       })));
     }

package/dist/esm/components/typeahead/styles.js

@@ -6,11 +6,11 @@ export var selected = 'emoji-typeahead-selected';
 export var emojiTypeAhead = 'emoji-typeahead-element';
 export var typeAheadListContainer = 'emoji-typeahead-list-container';
 export var typeAheadList = style({
-  background: token('color.background.overlay', 'white'),
+  background: token('elevation.surface.overlay', 'white'),
   border: "1px solid ".concat(noDialogContainerBorderColor),
   borderRadius: noDialogContainerBorderRadius,
   boxShadow: noDialogContainerBoxShadow,
-  color: token('color.text.mediumEmphasis', '#333'),
+  color: token('color.text.subtle', '#333'),
   width: emojiTypeAheadWidth
 });
 export var typeAheadEmpty = style({

package/dist/esm/components/uploader/EmojiUploadComponent.js

@@ -12,11 +12,11 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React from 'react';
 import { PureComponent } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl-next';
 import classNames from 'classnames';
 import * as styles from './styles';
 import { supportsUploadFeature } from '../../api/EmojiResource';
-import EmojiUploadPicker from '../common/EmojiUploadPicker';
+import EmojiUploadPickerWithIntl from '../common/EmojiUploadPicker';
 import { uploadEmoji } from '../common/UploadEmoji';
 import { createAndFireEventInElementsChannel, selectedFileEvent, uploadCancelButton, uploadConfirmButton } from '../../util/analytics';
 
@@ -104,7 +104,7 @@ var EmojiUploadComponent = /*#__PURE__*/function (_PureComponent) {
         ref: this.props.onUploaderRef
       }, /*#__PURE__*/React.createElement("div", {
         className: classNames([styles.emojiUploadFooter])
-      }, /*#__PURE__*/React.createElement(EmojiUploadPicker, {
+      }, /*#__PURE__*/React.createElement(EmojiUploadPickerWithIntl, {
         ref: this.onUploaderRef,
         onFileChooserClicked: this.onFileChooserClicked,
         onUploadCancelled: this.onUploadCancelled,

package/dist/esm/components/uploader/EmojiUploader.js

@@ -7,6 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["emojiProvider"];
 
 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); }; }
 
@@ -65,7 +66,7 @@ export var EmojiUploaderInternal = /*#__PURE__*/function (_LoadingEmojiComponen)
     value: function renderLoaded(loadedEmojiProvider, EmojiUploadComponent) {
       var _this$props = this.props,
           emojiProvider = _this$props.emojiProvider,
-          otherProps = _objectWithoutProperties(_this$props, ["emojiProvider"]);
+          otherProps = _objectWithoutProperties(_this$props, _excluded);
 
       return /*#__PURE__*/React.createElement(EmojiUploadComponent, _extends({
         emojiProvider: loadedEmojiProvider