@atlaskit/emoji 70.13.0 → 70.14.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/emoji
 
+## 70.14.0
+
+### Minor Changes
+
+- [`a7e9e78cab75f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a7e9e78cab75f) -
+  Prevent native page file drops behind the emoji upload chooser
+- [`6dbd7e73b32c7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6dbd7e73b32c7) -
+  Update empty state for search results in emoji picker
+
 ## 70.13.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -43,6 +43,9 @@
 		{
 			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/image/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../media/media-client/afm-cc/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -43,6 +43,9 @@
 		{
 			"path": "../../../design-system/icon/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/image/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../media/media-client/afm-products/tsconfig.json"
 		},

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

@@ -20,6 +20,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var chooseFileButtonTestId = exports.chooseFileButtonTestId = 'choose-file-button';
 var fileUploadInputTestId = exports.fileUploadInputTestId = 'file-upload';
 var dropzoneTestId = exports.dropzoneTestId = 'file-dropzone';
+var hasFilesInTransfer = function hasFilesInTransfer(dataTransfer) {
+  return !!(dataTransfer !== null && dataTransfer !== void 0 && dataTransfer.types) && Array.from(dataTransfer.types).includes('Files');
+};
 var dropzone = null;
 var dropzoneActive = null;
 var previewImageStyles = null;
@@ -71,7 +74,21 @@ var FileChooser = function FileChooser(props) {
     if (!element || !(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
       return;
     }
-    return (0, _adapter.dropTargetForExternal)({
+    var suppressNativeFileDrop = function suppressNativeFileDrop(event) {
+      if (!hasFilesInTransfer(event.dataTransfer)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    element.addEventListener('dragenter', suppressNativeFileDrop);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    element.addEventListener('dragover', suppressNativeFileDrop);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    element.addEventListener('drop', suppressNativeFileDrop);
+    var cleanupDropTarget = (0, _adapter.dropTargetForExternal)({
       element: element,
       canDrop: _file.containsFiles,
       onDragEnter: function onDragEnter() {
@@ -93,6 +110,12 @@ var FileChooser = function FileChooser(props) {
         }
       }
     });
+    return function () {
+      element.removeEventListener('dragenter', suppressNativeFileDrop);
+      element.removeEventListener('dragover', suppressNativeFileDrop);
+      element.removeEventListener('drop', suppressNativeFileDrop);
+      cleanupDropTarget();
+    };
   }, [isDropDisabled, handleFileDrop]);
   var hiddenInput = /*#__PURE__*/_react.default.createElement("input", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/cjs/components/i18n.js

@@ -231,6 +231,16 @@ var messages = exports.messages = (0, _reactIntl.defineMessages)({
     defaultMessage: 'An emoji with this name exists already',
     description: 'Error message shown when the user tries to upload an emoji with a name that already exists in the custom emoji set'
   },
+  emojiPickerNoResults: {
+    id: 'fabric.emoji.picker.no.results',
+    defaultMessage: 'No results',
+    description: 'Heading shown in the emoji picker when a search query returns no matching emojis.'
+  },
+  emojiPickerAddCustomEmoji: {
+    id: 'fabric.emoji.picker.add.custom.emoji',
+    defaultMessage: 'Add custom emoji',
+    description: 'Label for the button shown in the emoji picker no-results screen that opens the custom emoji upload panel.'
+  },
   emojiPickerTitle: {
     id: 'fabric.emoji.picker',
     defaultMessage: 'Emoji picker',

package/dist/cjs/components/picker/EmojiPickerComponent.compiled.css

@@ -21,13 +21,16 @@
 ._1xi2idpf{right:0}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1784{height:470px}
+._4t3i19lm{height:514px}
 ._4t3i1ckg{height:455px}
 ._4t3i1dsu{height:419px}
+._4t3i1j8x{height:354px}
 ._4t3i1sa4{height:390px}
 ._4t3i2300{height:429px}
 ._4t3i50k7{height:499px}
 ._4t3iaq3k{height:295px}
 ._4t3ibqjm{height:310px}
+._4t3iihnn{height:434px}
 ._4t3iixjv{height:375px}
 ._4t3iqbeb{height:339px}
 ._4t3iuxo9{height:var(--_19dn98e)}

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

@@ -76,6 +76,12 @@ var withoutPreviewHeight = {
   medium: "_4t3iixjv _1tke5x59",
   large: "_4t3i1ckg _1tke1pna"
 };
+var emojiPickerHeightNoResults = 354;
+var withNoResultsRefreshHeight = {
+  small: "_4t3i1j8x _1tkegx0z",
+  medium: "_4t3iihnn _1tke5x59",
+  large: "_4t3i19lm _1tke1pna"
+};
 var FREQUENTLY_USED_MAX = 16;
 var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   var onSelection = _ref.onSelection,
@@ -150,6 +156,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   }, []);
   var openTime = (0, _react.useRef)(0);
   var isMounting = (0, _react.useRef)(true);
+  var lastNonSearchCategory = (0, _react.useRef)(activeCategory);
   var previousEmojiProvider = (0, _react.useRef)(emojiProvider);
   var isProgrammaticScroll = (0, _react.useRef)(false);
   var pickerRef = (0, _react.useRef)(null);
@@ -191,8 +198,11 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     }
     if (activeCategory !== category) {
       setActiveCategory(category);
+      if (!query && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+        lastNonSearchCategory.current = category;
+      }
     }
-  }, [activeCategory, uploading, emojiToDelete]);
+  }, [activeCategory, uploading, emojiToDelete, query]);
   var calculateElapsedTime = function calculateElapsedTime() {
     return Date.now() - openTime.current;
   };
@@ -409,6 +419,10 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       source: _types.SearchSourceTypes.PICKER
     };
     if (searchQuery !== query) {
+      // Capture the active category before entering search so we can keep it highlighted
+      if (!query && searchQuery && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+        lastNonSearchCategory.current = activeCategory;
+      }
       setQuery(searchQuery);
     }
     updateEmojis(searchQuery, options);
@@ -416,7 +430,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       // scroll to top when search, which is search results section
       scrollToTopOfList();
     }
-  }, [query, filteredEmojis, selectedTone, updateEmojis, scrollToTopOfList]);
+  }, [activeCategory, query, filteredEmojis, selectedTone, updateEmojis, scrollToTopOfList]);
 
   // When the upload screen is open, intercept any file drag at the window level so it
   // cannot reach underlying page drop handlers (e.g. the Confluence editor).
@@ -637,7 +651,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       role: "dialog",
       "aria-label": formatMessage(_i18n.messages.emojiPickerTitle),
       "aria-modal": true,
-      className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
+      className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : query && filteredEmojis.length === 0 && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withNoResultsRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
       style: {
         "--_19dn98e": (0, _runtime.ix)("".concat(emojiPickerHeight, "px")),
         "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
@@ -682,7 +696,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       onOpenUpload: onOpenUpload,
       size: size,
       activeCategoryId: activeCategory
-    }), showPreview && !(emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
+    }), showPreview && !(emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) && !(query && filteredEmojis.length === 0 && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
       selectedEmoji: selectedEmoji,
       uploadEnabled: isUploadSupported && !uploading,
       onOpenUpload: onOpenUpload
@@ -697,7 +711,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iuxo9 _1bsb10mj _1ul910mj _c71l1y6z _kqswh2mm", !!emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : query && filteredEmojis.length === 0 && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? withNoResultsRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
     style: {
       "--_19dn98e": (0, _runtime.ix)("".concat(emojiPickerHeight, "px")),
       "--_gsvyy7": (0, _runtime.ix)("".concat(emojiPickerWidth, "px"))
@@ -736,7 +750,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onOpenUpload: onOpenUpload,
     size: size,
     activeCategoryId: activeCategory
-  }), showPreview && !(emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
+  }), showPreview && !(emojiToDelete && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) && !(query && filteredEmojis.length === 0 && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(_EmojiPickerFooter.default, {
     selectedEmoji: selectedEmoji,
     uploadEnabled: isUploadSupported && !uploading,
     onOpenUpload: onOpenUpload

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RENDER_EMOJI_PICKER_LIST_TESTID = exports.EmojiPickerVirtualListInternal = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _reactIntl = require("react-intl");
 var _react = _interopRequireWildcard(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../util/constants");
@@ -20,6 +21,7 @@ var _utils = require("./utils");
 var _VirtualList = require("./VirtualList");
 var _EmojiPickerListContext = require("../../context/EmojiPickerListContext");
 var _EmojiPickerTabPanel = _interopRequireDefault(require("./EmojiPickerTabPanel"));
+var _i18n = require("../i18n");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * Test id for wrapper Emoji Picker List div
@@ -68,6 +70,8 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     onFileChooserClicked = props.onFileChooserClicked,
     onOpenUpload = props.onOpenUpload,
     activeCategoryId = props.activeCategoryId;
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   var listRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -185,14 +189,27 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
       items.push(new _EmojiPickerVirtualItems.LoadingItem());
     } else {
       if (query) {
-        var search = _categories.CategoryDescriptionMap.SEARCH;
-        // Only a single "result" category
-        items = [].concat((0, _toConsumableArray2.default)(items), (0, _toConsumableArray2.default)(buildVirtualItemFromGroup({
-          category: _constants.searchCategory,
-          title: search.name,
-          emojis: emojis,
-          order: search.order
-        })));
+        var search = (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? _categories.CategoryDescriptionMapNew.SEARCH : _categories.CategoryDescriptionMap.SEARCH;
+        if (emojis.length === 0 && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+          // Show a "No results" category heading, then a no-results illustration below it
+          items.push(new _EmojiPickerVirtualItems.CategoryHeadingItem({
+            id: _constants.searchCategory,
+            title: formatMessage(_i18n.messages.emojiPickerNoResults),
+            className: categoryClassname
+          }));
+          items.push(new _EmojiPickerVirtualItems.NoResultsItem({
+            onOpenUpload: onOpenUpload,
+            uploadEnabled: uploadEnabled
+          }));
+        } else {
+          // Only a single "result" category
+          items = [].concat((0, _toConsumableArray2.default)(items), (0, _toConsumableArray2.default)(buildVirtualItemFromGroup({
+            category: _constants.searchCategory,
+            title: search.name,
+            emojis: emojis,
+            order: search.order
+          })));
+        }
       } else {
         // Group by category
 
@@ -217,7 +234,7 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allEmojiGroups, loading, query, emojis]);
+  }, [allEmojiGroups, loading, query, emojis, onOpenUpload, uploadEnabled, formatMessage]);
   var findCategoryToActivate = function findCategoryToActivate(row) {
     var category = null;
     if (row instanceof _EmojiPickerVirtualItems.CategoryHeadingItem) {
@@ -327,8 +344,12 @@ var EmojiPickerVirtualListInternal = exports.EmojiPickerVirtualListInternal = /*
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [virtualItems, categoriesChanged]);
   var virtualListHeight = (0, _react.useMemo)(function () {
+    if (query && emojis.length === 0 && (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh')) {
+      // No-results state: expand the list height to fit heading + illustration without scrolling
+      return _EmojiPickerSizes.sizes.categoryHeadingHeight + _EmojiPickerSizes.sizes.noResultsHeight + (0, _utils.emojiPickerHeightOffset)(size);
+    }
     return (0, _platformFeatureFlags.fg)('platform_emoji_picker_refresh') ? _EmojiPickerSizes.sizes.listHeightNew + (0, _utils.emojiPickerHeightOffset)(size) : _EmojiPickerSizes.sizes.listHeight + (0, _utils.emojiPickerHeightOffset)(size);
-  }, [size]);
+  }, [size, query, emojis.length]);
   return /*#__PURE__*/_react.default.createElement(_EmojiPickerTabPanel.default, {
     showSearchResults: !!query
   }, /*#__PURE__*/_react.default.createElement(_EmojiActions.default, {

package/dist/cjs/components/picker/EmojiPickerNoResults.compiled.css

@@ -0,0 +1,12 @@
+
+._zulppxbi{gap:var(--ds-space-200,1pc)}._19bvpxbi{padding-left:var(--ds-space-200,1pc)}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._u5f3pxbi{padding-right:var(--ds-space-200,1pc)}
+._vchhusvi{box-sizing:border-box}
+._y3gn1h6o{text-align:center}

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

@@ -0,0 +1,47 @@
+/* EmojiPickerNoResults.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = void 0;
+require("./EmojiPickerNoResults.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _tokens = require("@atlaskit/tokens");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _reactIntl = require("react-intl");
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _i18n = require("../i18n");
+var _SearchNoResultDark = _interopRequireDefault(require("./assets/spot/search-no-result/SearchNoResultDark"));
+var _SearchNoResultLight = _interopRequireDefault(require("./assets/spot/search-no-result/SearchNoResultLight"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var noResultsContainer = null;
+var RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = exports.RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = 'render-emoji-picker-no-results';
+var EmojiPickerNoResults = function EmojiPickerNoResults(_ref) {
+  var onOpenUpload = _ref.onOpenUpload,
+    uploadEnabled = _ref.uploadEnabled;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
+  var handleOpenUpload = (0, _react.useCallback)(function (event) {
+    if ((0, _platformFeatureFlags.fg)('platform_emoji_keep_picker_open_on_upload')) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    onOpenUpload();
+  }, [onOpenUpload]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": RENDER_EMOJI_PICKER_NO_RESULTS_TESTID,
+    className: (0, _runtime.ax)(["_zulppxbi _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _ca0q1ejb _u5f3pxbi _n3td1ejb _19bvpxbi _y3gn1h6o _1bsb1osq _vchhusvi"])
+  }, colorMode === 'dark' ? /*#__PURE__*/React.createElement(_SearchNoResultDark.default, null) : /*#__PURE__*/React.createElement(_SearchNoResultLight.default, null), uploadEnabled && /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _i18n.messages.emojiPickerAddCustomEmoji, function (label) {
+    return /*#__PURE__*/React.createElement(_standardButton.default, {
+      onClick: handleOpenUpload,
+      appearance: "default",
+      tabIndex: 0
+    }, label);
+  }));
+};
+var _default = exports.default = EmojiPickerNoResults;

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

@@ -19,6 +19,8 @@ var sizes = exports.sizes = {
   // 32px height
   loadingRowHeight: 150,
   // Fills remaining space without scrolling when loading.
+  noResultsHeight: 300,
+  // illustration (200px) + button + padding + gap
   uploadActionHeight: 40,
   // 40px height
   emojiPerRow: 8

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

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.virtualItemRenderer = exports.LoadingItem = exports.EmojisRowItem = exports.CategoryHeadingItem = exports.AbstractItem = void 0;
+exports.virtualItemRenderer = exports.NoResultsItem = exports.LoadingItem = exports.EmojisRowItem = exports.CategoryHeadingItem = exports.AbstractItem = void 0;
 require("./EmojiPickerVirtualItems.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
@@ -20,6 +20,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _EmojiPickerCategoryHeading = _interopRequireDefault(require("./EmojiPickerCategoryHeading"));
 var _EmojiPickerEmojiRow = _interopRequireDefault(require("./EmojiPickerEmojiRow"));
+var _EmojiPickerNoResults = _interopRequireDefault(require("./EmojiPickerNoResults"));
 var _EmojiPickerSizes = require("./EmojiPickerSizes");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -75,6 +76,19 @@ var CategoryHeadingItem = exports.CategoryHeadingItem = /*#__PURE__*/function (_
   (0, _inherits2.default)(CategoryHeadingItem, _AbstractItem3);
   return (0, _createClass2.default)(CategoryHeadingItem);
 }(AbstractItem);
+var NoResultsItem = exports.NoResultsItem = /*#__PURE__*/function (_AbstractItem4) {
+  function NoResultsItem(props) {
+    var _this4;
+    (0, _classCallCheck2.default)(this, NoResultsItem);
+    _this4 = _callSuper(this, NoResultsItem, [props, _EmojiPickerSizes.sizes.noResultsHeight]);
+    (0, _defineProperty2.default)(_this4, "renderItem", function () {
+      return /*#__PURE__*/React.createElement(_EmojiPickerNoResults.default, _this4.props);
+    });
+    return _this4;
+  }
+  (0, _inherits2.default)(NoResultsItem, _AbstractItem4);
+  return (0, _createClass2.default)(NoResultsItem);
+}(AbstractItem);
 var virtualItemRenderer = exports.virtualItemRenderer = function virtualItemRenderer(rows, context) {
   var index = context.index,
     key = context.key;

package/dist/cjs/components/picker/assets/spot/search-no-result/SearchNoResultDark.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var SearchNoResultDark = function SearchNoResultDark() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "200",
+    height: "200",
+    viewBox: "0 0 275 275",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M191.87 88.6702C189.59 84.3102 186.8 79.9902 183.57 75.8102C180.3 71.5802 176.77 67.7402 173.07 64.4102C151.47 44.9002 123.96 41.9102 97.58 56.2202C93.31 58.5402 89.09 61.3002 85.04 64.4402C80.83 67.6902 76.96 71.2302 73.51 74.9502C53.12 96.9602 49.08 124.3 62.42 149.98C64.72 154.4 67.54 158.79 70.81 163.02C74.04 167.2 77.53 170.98 81.18 174.28C93.68 185.57 108.23 191.29 123.43 191.29C134.33 191.29 145.56 188.35 156.61 182.41C161.07 180.01 165.47 177.15 169.68 173.89C173.74 170.75 177.47 167.36 180.79 163.82C201.31 141.86 205.35 114.47 191.87 88.6802V88.6702ZM161.31 163.04C157.7 165.83 153.94 168.29 150.14 170.33C128.76 181.81 107.54 179.6 90.38 164.1C87.33 161.34 84.4 158.16 81.66 154.62C78.89 151.03 76.5 147.34 74.58 143.65C63.91 123.12 67.1 102.02 83.56 84.2502C86.49 81.0802 89.81 78.0602 93.42 75.2702C96.89 72.5802 100.49 70.2302 104.12 68.2602C113.08 63.4002 122.03 60.9802 130.69 60.9802C142.58 60.9802 153.9 65.5402 163.89 74.5702C166.98 77.3602 169.96 80.6002 172.73 84.1902C175.46 87.7302 177.82 91.3702 179.72 95.0102C190.49 115.63 187.32 136.74 170.77 154.45C167.96 157.46 164.77 160.35 161.29 163.04H161.31Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M179.96 171C176.42 166.07 172.62 166.1 168.91 168.97C165.43 171.66 164.5 175.3 168.21 180.09L172.45 185.57L184.2 176.48L179.96 171Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M187.155 174.199L169.513 187.839L202.665 230.717L220.307 217.077L187.155 174.199Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M184.32 176.391L172.35 185.646L183.593 200.186L195.562 190.932L184.32 176.391Z",
+    fill: "#7E8188"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M157.715 95.8255L103.735 149.805L96.6643 142.734L150.644 88.7544L157.715 95.8255Z",
+    fill: "#4B4D51"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M150.644 149.805L96.6643 95.8255L103.735 88.7544L157.715 142.734L150.644 149.805Z",
+    fill: "#4B4D51"
+  }));
+};
+var _default = exports.default = SearchNoResultDark;

package/dist/cjs/components/picker/assets/spot/search-no-result/SearchNoResultLight.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var SearchNoResultLight = function SearchNoResultLight() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "200",
+    height: "200",
+    viewBox: "0 0 275 275",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M185.8 91.8398C183.73 87.8698 181.19 83.9198 178.16 79.9998C175.09 76.0298 171.85 72.5298 168.49 69.4898C148.48 51.4098 123.89 49.7498 100.86 62.2398C96.93 64.3698 93.05 66.9098 89.24 69.8498C85.27 72.9198 81.7 76.1798 78.54 79.5898C60.71 98.8298 56.14 123 68.5 146.8C70.59 150.82 73.16 154.83 76.23 158.81C79.26 162.73 82.45 166.18 85.77 169.18C105.65 187.13 130.22 188.8 153.36 176.36C157.46 174.16 161.51 171.53 165.48 168.46C169.29 165.52 172.72 162.39 175.77 159.13C193.68 139.96 198.25 115.7 185.78 91.8398H185.8Z",
+    fill: "white"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M123.44 191.28C108.24 191.28 93.7 185.56 81.19 174.27C77.54 170.97 74.05 167.18 70.82 163.01C67.55 158.78 64.72 154.39 62.43 149.97C49.09 124.3 53.13 96.9499 73.52 74.9399C76.97 71.2199 80.85 67.6799 85.05 64.4299C89.1 61.2999 93.32 58.5299 97.59 56.2099C123.97 41.8999 151.49 44.8899 173.08 64.3999C176.77 67.7399 180.3 71.5699 183.58 75.7999C186.81 79.9699 189.6 84.2999 191.88 88.6599C205.36 114.45 201.32 141.84 180.8 163.8C177.49 167.35 173.75 170.74 169.69 173.87C165.48 177.12 161.08 179.99 156.62 182.39C145.57 188.33 134.33 191.27 123.44 191.27V191.28ZM130.69 60.9799C122.04 60.9799 113.08 63.3899 104.12 68.2599C100.5 70.2299 96.9 72.5899 93.42 75.2699C89.81 78.0599 86.49 81.0799 83.56 84.2499C67.1 102.02 63.91 123.11 74.58 143.65C76.5 147.34 78.88 151.04 81.66 154.62C84.39 158.15 87.32 161.34 90.38 164.1C107.54 179.6 128.76 181.81 150.14 170.33C153.94 168.29 157.7 165.84 161.31 163.04C164.79 160.35 167.97 157.46 170.79 154.45C187.34 136.74 190.51 115.63 179.74 95.0099C177.84 91.3699 175.48 87.7199 172.75 84.1899C169.97 80.5999 167 77.3599 163.91 74.5699C153.91 65.5399 142.59 60.9799 130.71 60.9799H130.69Z",
+    fill: "#DDDEE1"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M179.96 171C176.42 166.07 172.62 166.1 168.91 168.97C165.43 171.66 164.5 175.3 168.21 180.09L172.45 185.57L184.2 176.48L179.96 171Z",
+    fill: "#DDDEE1"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M187.155 174.199L169.513 187.839L202.665 230.717L220.307 217.077L187.155 174.199Z",
+    fill: "#DDDEE1"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M184.32 176.391L172.35 185.646L183.593 200.186L195.562 190.932L184.32 176.391Z",
+    fill: "#B7B9BE"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M157.715 95.8255L103.735 149.805L96.6643 142.734L150.644 88.7544L157.715 95.8255Z",
+    fill: "#DDDEE1"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M150.644 149.805L96.6643 95.8255L103.735 88.7544L157.715 142.734L150.644 149.805Z",
+    fill: "#DDDEE1"
+  }));
+};
+var _default = exports.default = SearchNoResultLight;

package/dist/cjs/util/analytics/analytics.js

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "70.12.0"
+      packageVersion: "70.13.0"
     }, attributes)
   };
 };

package/dist/es2019/components/common/FileChooser.js

@@ -10,6 +10,7 @@ import { containsFiles, getFiles } from '@atlaskit/pragmatic-drag-and-drop/exter
 export const chooseFileButtonTestId = 'choose-file-button';
 export const fileUploadInputTestId = 'file-upload';
 export const dropzoneTestId = 'file-dropzone';
+const hasFilesInTransfer = dataTransfer => !!(dataTransfer !== null && dataTransfer !== void 0 && dataTransfer.types) && Array.from(dataTransfer.types).includes('Files');
 const dropzone = null;
 const dropzoneActive = null;
 const previewImageStyles = null;
@@ -58,7 +59,21 @@ const FileChooser = props => {
     if (!element || !fg('platform_emoji_picker_refresh')) {
       return;
     }
-    return dropTargetForExternal({
+    const suppressNativeFileDrop = event => {
+      if (!hasFilesInTransfer(event.dataTransfer)) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    element.addEventListener('dragenter', suppressNativeFileDrop);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    element.addEventListener('dragover', suppressNativeFileDrop);
+    // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
+    element.addEventListener('drop', suppressNativeFileDrop);
+    const cleanupDropTarget = dropTargetForExternal({
       element,
       canDrop: containsFiles,
       onDragEnter: () => {
@@ -79,6 +94,12 @@ const FileChooser = props => {
         }
       }
     });
+    return () => {
+      element.removeEventListener('dragenter', suppressNativeFileDrop);
+      element.removeEventListener('dragover', suppressNativeFileDrop);
+      element.removeEventListener('drop', suppressNativeFileDrop);
+      cleanupDropTarget();
+    };
   }, [isDropDisabled, handleFileDrop]);
   const hiddenInput = /*#__PURE__*/React.createElement("input", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/es2019/components/i18n.js

@@ -225,6 +225,16 @@ export const messages = defineMessages({
     defaultMessage: 'An emoji with this name exists already',
     description: 'Error message shown when the user tries to upload an emoji with a name that already exists in the custom emoji set'
   },
+  emojiPickerNoResults: {
+    id: 'fabric.emoji.picker.no.results',
+    defaultMessage: 'No results',
+    description: 'Heading shown in the emoji picker when a search query returns no matching emojis.'
+  },
+  emojiPickerAddCustomEmoji: {
+    id: 'fabric.emoji.picker.add.custom.emoji',
+    defaultMessage: 'Add custom emoji',
+    description: 'Label for the button shown in the emoji picker no-results screen that opens the custom emoji upload panel.'
+  },
   emojiPickerTitle: {
     id: 'fabric.emoji.picker',
     defaultMessage: 'Emoji picker',

package/dist/es2019/components/picker/EmojiPickerComponent.compiled.css

@@ -21,13 +21,16 @@
 ._1xi2idpf{right:0}
 ._2lx21bp4{flex-direction:column}
 ._4t3i1784{height:470px}
+._4t3i19lm{height:514px}
 ._4t3i1ckg{height:455px}
 ._4t3i1dsu{height:419px}
+._4t3i1j8x{height:354px}
 ._4t3i1sa4{height:390px}
 ._4t3i2300{height:429px}
 ._4t3i50k7{height:499px}
 ._4t3iaq3k{height:295px}
 ._4t3ibqjm{height:310px}
+._4t3iihnn{height:434px}
 ._4t3iixjv{height:375px}
 ._4t3iqbeb{height:339px}
 ._4t3ivixp{height:349px}