@atlaskit/emoji 63.2.0 → 64.1.1

package/dist/cjs/components/common/styles.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withToneSelector = exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.toneSelectorContainer = exports.submitDelete = exports.shortName = exports.selected = exports.selectOnHover = exports.previewText = exports.previewSingleLine = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderEmoji = exports.placeholderContainer = exports.placeholder = exports.name = exports.hiddenToneButton = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiSprite = exports.emojiScrollable = exports.emojiPreviewSection = exports.emojiPreviewErrorMessage = exports.emojiPreview = exports.emojiNode = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emoji = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.cancelButton = exports.buttons = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.AddCustomEmoji = void 0;
+exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.toneSelectorContainer = exports.submitDelete = exports.shortName = exports.selected = exports.selectOnHover = exports.previewText = exports.previewSingleLine = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderEmoji = exports.placeholderContainer = exports.placeholder = exports.name = exports.hiddenToneButton = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiSprite = exports.emojiScrollable = exports.emojiPreviewSection = exports.emojiPreviewErrorMessage = exports.emojiPreview = exports.emojiNode = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emoji = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.cancelButton = exports.buttons = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.AddCustomEmoji = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -150,8 +150,6 @@ var previewSingleLine = 'emoji-common-preview-single-line';
 exports.previewSingleLine = previewSingleLine;
 var toneSelectorContainer = 'emoji-common-tone-selector-container';
 exports.toneSelectorContainer = toneSelectorContainer;
-var withToneSelector = 'emoji-common-with-tone-selector';
-exports.withToneSelector = withToneSelector;
 var emojiPreviewSection = 'emoji-preview-section';
 exports.emojiPreviewSection = emojiPreviewSection;
 var emojiPreview = (0, _typestyle.style)({
@@ -204,7 +202,7 @@ var emojiPreview = (0, _typestyle.style)({
       flexShrink: 1,
       $nest: (_$nest6 = {}, (0, _defineProperty2.default)(_$nest6, ".".concat(name), {
         display: 'block',
-        color: (0, _tokens.token)('color.text.highEmphasis', colors.N900),
+        color: (0, _tokens.token)('color.text', colors.N900),
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
@@ -213,7 +211,7 @@ var emojiPreview = (0, _typestyle.style)({
         })
       }), (0, _defineProperty2.default)(_$nest6, ".".concat(shortName), {
         display: 'block',
-        color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N200),
+        color: (0, _tokens.token)('color.text.subtle', colors.N200),
         fontSize: '12px',
         lineHeight: 1,
         marginBottom: '-2px',
@@ -227,30 +225,28 @@ var emojiPreview = (0, _typestyle.style)({
       $nest: (_$nest7 = {}, (0, _defineProperty2.default)(_$nest7, ".".concat(name), {
         display: 'none'
       }), (0, _defineProperty2.default)(_$nest7, ".".concat(shortName), {
-        color: (0, _tokens.token)('color.text.highEmphasis', colors.N900),
+        color: (0, _tokens.token)('color.text', colors.N900),
         fontSize: '14px'
       }), _$nest7)
     }), _$nest8)
-  }), (0, _defineProperty2.default)(_$nest9, ".".concat(buttons), {
-    flex: 1,
-    textAlign: 'right',
-    margin: '6px'
-  }), (0, _defineProperty2.default)(_$nest9, ".".concat(toneSelectorContainer), {
-    flex: 1,
-    display: 'flex',
-    justifyContent: 'flex-end',
-    margin: '6px'
-  }), (0, _defineProperty2.default)(_$nest9, ".".concat(withToneSelector, " .").concat(previewText), {
+  }), (0, _defineProperty2.default)(_$nest9, ".".concat(previewText), {
     maxWidth: '235px',
     width: '235px'
     /* IE */
 
   }), _$nest9)
+});
+exports.emojiPreview = emojiPreview;
+var emojiToneSelectorContainer = (0, _typestyle.style)({
+  flex: 1,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  padding: '8px 10px 8px 0'
 }); // Scrollable
 
-exports.emojiPreview = emojiPreview;
+exports.emojiToneSelectorContainer = emojiToneSelectorContainer;
 var emojiScrollable = (0, _typestyle.style)({
-  border: "1px solid ".concat((0, _tokens.token)('color.border.neutral', '#fff')),
+  border: "1px solid ".concat((0, _tokens.token)('color.border', '#fff')),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   display: 'block',
   margin: '0',
@@ -269,7 +265,7 @@ var emojiUpload = (0, _typestyle.style)({
 });
 exports.emojiUpload = emojiUpload;
 var uploadChooseFileMessage = (0, _typestyle.style)({
-  color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N300),
+  color: (0, _tokens.token)('color.text.subtle', colors.N300),
   fontSize: '12px',
   paddingBottom: '7px'
 });
@@ -315,7 +311,7 @@ var uploadPreview = (0, _typestyle.style)({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20),
+  background: (0, _tokens.token)('color.background.neutral', colors.N20),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   padding: '10px'
 });
@@ -323,7 +319,7 @@ exports.uploadPreview = uploadPreview;
 var uploadPreviewText = (0, _typestyle.style)({
   $nest: {
     h5: {
-      color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N300),
+      color: (0, _tokens.token)('color.text.subtle', colors.N300),
       paddingBottom: '4px',
       fontSize: '12px'
     },
@@ -353,7 +349,8 @@ var uploadAddRow = (0, _typestyle.style)({
 exports.uploadAddRow = uploadAddRow;
 var AddCustomEmoji = (0, _typestyle.style)({
   alignSelf: 'center',
-  marginLeft: '10px'
+  marginLeft: '10px',
+  marginBottom: '10px'
 }); // Emoji Delete preview
 
 exports.AddCustomEmoji = AddCustomEmoji;
@@ -366,15 +363,15 @@ var deletePreview = (0, _typestyle.style)({
   padding: '10px',
   display: 'flex',
   flexDirection: 'column',
-  justifyContent: 'flex-end',
-  fontSize: '12px'
+  justifyContent: 'flex-end'
 });
 exports.deletePreview = deletePreview;
 var deleteText = (0, _typestyle.style)({
   height: '64px',
+  fontSize: '12px',
   $nest: {
     ':first-child': {
-      color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N300),
+      color: (0, _tokens.token)('color.text.subtle', colors.N300),
       lineHeight: '16px'
     }
   }

package/dist/cjs/components/i18n.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.messages = void 0;
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
-var messages = (0, _reactIntl.defineMessages)({
+var messages = (0, _reactIntlNext.defineMessages)({
   deleteEmojiTitle: {
     id: 'fabric.emoji.delete.title',
     defaultMessage: 'Remove emoji',

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

@@ -27,7 +27,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _constants = require("../../util/constants");
 
@@ -114,11 +114,14 @@ var CategorySelector = /*#__PURE__*/function (_PureComponent) {
     value: function render() {
       var _this2 = this;
 
-      var disableCategories = this.props.disableCategories;
+      var _this$props2 = this.props,
+          disableCategories = _this$props2.disableCategories,
+          intl = _this$props2.intl;
       var categories = this.state.categories;
       var categoriesSection;
 
       if (categories) {
+        var formatMessage = intl.formatMessage;
         categoriesSection = /*#__PURE__*/_react.default.createElement("ul", null, categories.map(function (categoryId) {
           var category = _categories.CategoryDescriptionMap[categoryId];
           var categoryClasses = [styles.category];
@@ -132,20 +135,19 @@ var CategorySelector = /*#__PURE__*/function (_PureComponent) {
           }
 
           var Icon = category.icon;
+          var categoryName = formatMessage(_i18n.messages[category.name]);
           return /*#__PURE__*/_react.default.createElement("li", {
             key: category.id
-          }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages[category.name], function (categoryName) {
-            return /*#__PURE__*/_react.default.createElement("button", {
-              "aria-label": categoryName,
-              "data-category-id": category.id,
-              className: (0, _classnames.default)(categoryClasses),
-              onClick: _this2.onClick,
-              title: categoryName,
-              type: "button"
-            }, /*#__PURE__*/_react.default.createElement(Icon, {
-              label: categoryName
-            }));
-          }));
+          }, /*#__PURE__*/_react.default.createElement("button", {
+            "aria-label": categoryName,
+            "data-category-id": category.id,
+            className: (0, _classnames.default)(categoryClasses),
+            onClick: _this2.onClick,
+            title: categoryName,
+            type: "button"
+          }, /*#__PURE__*/_react.default.createElement(Icon, {
+            label: categoryName
+          })));
         }));
       }
 
@@ -157,8 +159,11 @@ var CategorySelector = /*#__PURE__*/function (_PureComponent) {
   return CategorySelector;
 }(_react.PureComponent);
 
-exports.default = CategorySelector;
 (0, _defineProperty2.default)(CategorySelector, "defaultProps", {
   onCategorySelected: function onCategorySelected() {},
   dynamicCategories: []
-});
+});
+
+var _default = (0, _reactIntlNext.injectIntl)(CategorySelector);
+
+exports.default = _default;

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

@@ -37,6 +37,8 @@ var _EmojiPickerVirtualItems = require("./EmojiPickerVirtualItems");
 
 var styles = _interopRequireWildcard(require("./styles"));
 
+var _excluded = ["emojiProvider"];
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 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; } }
@@ -109,7 +111,7 @@ var EmojiPickerInternal = /*#__PURE__*/function (_LoadingEmojiComponen) {
     value: function renderLoaded(loadedEmojiProvider, EmojiPickerComponent) {
       var _this$props = this.props,
           emojiProvider = _this$props.emojiProvider,
-          otherProps = (0, _objectWithoutProperties2.default)(_this$props, ["emojiProvider"]);
+          otherProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       return /*#__PURE__*/_react.default.createElement(EmojiPickerComponent, (0, _extends2.default)({
         emojiProvider: loadedEmojiProvider
       }, otherProps));

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

@@ -23,7 +23,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _typeHelpers = require("../../util/type-helpers");
 
@@ -62,7 +62,7 @@ var EmojiPickerCategoryHeading = /*#__PURE__*/function (_PureComponent) {
         className: (0, _classnames.default)(className)
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: styles.emojiCategoryTitle
-      }, (0, _typeHelpers.isMessagesKey)(title) ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages[title]) : title));
+      }, (0, _typeHelpers.isMessagesKey)(title) ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages[title]) : title));
     }
   }]);
   return EmojiPickerCategoryHeading;

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

@@ -31,7 +31,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _EmojiRepository = require("../../api/EmojiRepository");
 
@@ -63,9 +63,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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); 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) { (0, _defineProperty2.default)(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) { (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); }; }
 
@@ -86,12 +86,7 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEmojiActive", function (_emojiId, emoji) {
       if (_this.state.selectedEmoji !== emoji) {
         _this.setState({
-          selectedEmoji: emoji,
-          showUploadButton: false
-        });
-      } else {
-        _this.setState({
-          showUploadButton: false
+          selectedEmoji: emoji
         });
       }
     });
@@ -141,16 +136,6 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFileChooserClicked", function () {
       _this.fireAnalytics((0, _analytics.selectedFileEvent)());
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEmojiPickerMouseLeave", function () {
-      _this.setState({
-        showUploadButton: true
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEmojiPickerMouseEnter", function () {
-      _this.setState({
-        showUploadButton: false
-      });
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireAnalytics", function (analyticsEvent) {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
 
@@ -380,8 +365,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;
@@ -562,12 +546,11 @@ 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 = (0, _RecordSelectionDefault.createRecordSelectionDefault)(emojiProvider, this.onSelectWrapper, function (analytic) {
         return _this4.fireAnalytics(analytic('picker'));
       });
-      var formattedErrorMessage = uploadErrorMessage ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, uploadErrorMessage) : null;
+      var formattedErrorMessage = uploadErrorMessage ? /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, uploadErrorMessage) : null;
       var classes = [styles.emojiPicker];
 
       var picker = /*#__PURE__*/_react.default.createElement("div", {
@@ -586,30 +569,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.default.createElement(_EmojiPickerFooter.default, {
+        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.default.createElement(_EmojiPickerFooter.default, {
+        selectedEmoji: selectedEmoji,
+        isUploading: uploading
       }));
 
       return picker;

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

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

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

@@ -23,14 +23,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _EmojiDeletePreview = _interopRequireDefault(require("../common/EmojiDeletePreview"));
-
-var _EmojiPreview = _interopRequireDefault(require("../common/EmojiPreview"));
-
-var _EmojiUploadPicker = _interopRequireDefault(require("../common/EmojiUploadPicker"));
-
 var styles = _interopRequireWildcard(require("./styles"));
 
+var _EmojiPickerPreview = _interopRequireDefault(require("./EmojiPickerPreview"));
+
 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; }
@@ -53,56 +49,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 = (0, _classnames.default)([styles.emojiPickerFooter, styles.emojiPickerFooterWithTopShadow]);
 
-      if (uploading) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: previewFooterClassnames
-        }, /*#__PURE__*/_react.default.createElement(_EmojiUploadPicker.default, {
-          onUploadCancelled: onUploadCancelled,
-          onUploadEmoji: onUploadEmoji,
-          onFileChooserClicked: onFileChooserClicked,
-          errorMessage: uploadErrorMessage,
-          initialUploadName: initialUploadName
-        }));
-      }
-
-      if (emojiToDelete) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          className: previewFooterClassnames
-        }, /*#__PURE__*/_react.default.createElement(_EmojiDeletePreview.default, {
-          emoji: emojiToDelete,
-          onDeleteEmoji: onDeleteEmoji,
-          onCloseDelete: onCloseDelete
-        }));
+      if (!selectedEmoji || isUploading) {
+        return null;
       }
 
       return /*#__PURE__*/_react.default.createElement("div", {
         className: previewFooterClassnames
-      }, /*#__PURE__*/_react.default.createElement(_EmojiPreview.default, {
-        emoji: selectedEmoji,
-        toneEmoji: toneEmoji,
-        selectedTone: selectedTone,
-        onToneSelected: onToneSelected,
-        onToneSelectorCancelled: onToneSelectorCancelled,
-        onOpenUpload: onOpenUpload,
-        uploadEnabled: uploadEnabled
+      }, /*#__PURE__*/_react.default.createElement(_EmojiPickerPreview.default, {
+        emoji: selectedEmoji
       }));
     }
   }]);

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

@@ -45,15 +45,15 @@ var _EmojiPickerVirtualItems = require("./EmojiPickerVirtualItems");
 
 var styles = _interopRequireWildcard(require("./styles"));
 
-var _EmojiPickerListSearch = _interopRequireDefault(require("./EmojiPickerListSearch"));
+var _EmojiActions = _interopRequireDefault(require("../common/EmojiActions"));
 
 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); 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) { (0, _defineProperty2.default)(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) { (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); }; }
 
@@ -290,18 +290,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.default.createElement("div", {
         ref: "root",
-        className: (0, _classnames.default)(classes),
-        onMouseLeave: onMouseLeave,
-        onMouseEnter: onMouseEnter
-      }, /*#__PURE__*/_react.default.createElement(_EmojiPickerListSearch.default, {
-        onChange: this.onSearch,
-        query: query
+        className: (0, _classnames.default)(classes)
+      }, /*#__PURE__*/_react.default.createElement(_EmojiActions.default, {
+        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.default.createElement(_List.List, {
         ref: "list",
         height: _EmojiPickerSizes.sizes.listHeight,

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

@@ -29,7 +29,7 @@ var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 
 var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
 
-var _reactIntl = require("react-intl");
+var _reactIntlNext = require("react-intl-next");
 
 var _i18n = require("../i18n");
 
@@ -124,41 +124,40 @@ 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.default.createElement("div", {
         className: styles.pickerSearch,
         style: style
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.searchPlaceholder, function (searchPlaceholder) {
-        return /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _i18n.messages.searchLabel, function (searchLabel) {
-          return /*#__PURE__*/_react.default.createElement(_textfield.default, {
-            "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.default.createElement("span", {
-              className: styles.searchIcon
-            }, /*#__PURE__*/_react.default.createElement(_search.default, {
-              label: ""
-            }))
-          });
-        });
+      }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
+        "aria-label": formatMessage(_i18n.messages.searchLabel),
+        className: styles.input,
+        autoComplete: "off",
+        name: "search",
+        placeholder: "".concat(formatMessage(_i18n.messages.searchPlaceholder), "..."),
+        onChange: this.onChange,
+        value: query || '',
+        ref: this.handleInputRef,
+        isCompact: true,
+        onBlur: this.onBlur,
+        elemBeforeInput: /*#__PURE__*/_react.default.createElement("span", {
+          className: styles.searchIcon
+        }, /*#__PURE__*/_react.default.createElement(_search.default, {
+          label: ""
+        }))
       }));
     }
   }]);
   return EmojiPickerListSearch;
 }(_react.PureComponent);
 
-exports.default = EmojiPickerListSearch;
 (0, _defineProperty2.default)(EmojiPickerListSearch, "defaultProps", {
   style: {}
-});
+});
+
+var _default = (0, _reactIntlNext.injectIntl)(EmojiPickerListSearch);
+
+exports.default = _default;