@atlaskit/emoji 70.11.0 → 70.11.2

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

@@ -1,15 +1,17 @@
+import { useIntl } from 'react-intl';
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { customCategory, defaultEmojiPickerSize, frequentCategory, searchCategory, userCustomTitle, yourUploadsCategory } from '../../util/constants';
 import { CategoryDescriptionMap, CategoryDescriptionMapNew } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
-import { CategoryHeadingItem, EmojisRowItem, LoadingItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
+import { CategoryHeadingItem, EmojisRowItem, LoadingItem, NoResultsItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
 import EmojiActions from '../common/EmojiActions';
 import { emojiPickerHeightOffset, scrollToRow } from './utils';
 import { VirtualList } from './VirtualList';
 import { EmojiPickerListContextProvider } from '../../context/EmojiPickerListContext';
 import EmojiPickerTabPanel from './EmojiPickerTabPanel';
+import { messages } from '../i18n';
 
 /**
  * Test id for wrapper Emoji Picker List div
@@ -52,6 +54,9 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     onOpenUpload,
     activeCategoryId
   } = props;
+  const {
+    formatMessage
+  } = useIntl();
   const listRef = useRef(null);
   const [allEmojiGroups, setAllEmojiGroups] = useState([]);
   const [virtualItems, setVirtualItems] = useState([]);
@@ -153,14 +158,27 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
       items.push(new LoadingItem());
     } else {
       if (query) {
-        const search = CategoryDescriptionMap.SEARCH;
-        // Only a single "result" category
-        items = [...items, ...buildVirtualItemFromGroup({
-          category: searchCategory,
-          title: search.name,
-          emojis,
-          order: search.order
-        })];
+        const search = fg('platform_emoji_picker_refresh') ? CategoryDescriptionMapNew.SEARCH : CategoryDescriptionMap.SEARCH;
+        if (emojis.length === 0 && fg('platform_emoji_picker_refresh')) {
+          // Show a "No results" category heading, then a no-results illustration below it
+          items.push(new CategoryHeadingItem({
+            id: searchCategory,
+            title: formatMessage(messages.emojiPickerNoResults),
+            className: categoryClassname
+          }));
+          items.push(new NoResultsItem({
+            onOpenUpload,
+            uploadEnabled
+          }));
+        } else {
+          // Only a single "result" category
+          items = [...items, ...buildVirtualItemFromGroup({
+            category: searchCategory,
+            title: search.name,
+            emojis,
+            order: search.order
+          })];
+        }
       } else {
         // Group by category
 
@@ -185,7 +203,7 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allEmojiGroups, loading, query, emojis]);
+  }, [allEmojiGroups, loading, query, emojis, onOpenUpload, uploadEnabled, formatMessage]);
   const findCategoryToActivate = row => {
     let category = null;
     if (row instanceof CategoryHeadingItem) {
@@ -294,8 +312,12 @@ export const EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef((pro
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [virtualItems, categoriesChanged]);
   const virtualListHeight = useMemo(() => {
+    if (query && emojis.length === 0 && fg('platform_emoji_picker_refresh')) {
+      // No-results state: expand the list height to fit heading + illustration without scrolling
+      return sizes.categoryHeadingHeight + sizes.noResultsHeight + emojiPickerHeightOffset(size);
+    }
     return fg('platform_emoji_picker_refresh') ? sizes.listHeightNew + emojiPickerHeightOffset(size) : sizes.listHeight + emojiPickerHeightOffset(size);
-  }, [size]);
+  }, [size, query, emojis.length]);
   return /*#__PURE__*/React.createElement(EmojiPickerTabPanel, {
     showSearchResults: !!query
   }, /*#__PURE__*/React.createElement(EmojiActions, {

package/dist/es2019/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/es2019/components/picker/EmojiPickerNoResults.js

@@ -0,0 +1,40 @@
+/* EmojiPickerNoResults.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./EmojiPickerNoResults.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { FormattedMessage } from 'react-intl';
+import AkButton from '@atlaskit/button/standard-button';
+import Image from '@atlaskit/image';
+import { messages } from '../i18n';
+import SearchNoResultDark from './assets/spot/search-no-result/dark.svg';
+import SearchNoResultLight from './assets/spot/search-no-result/light.svg';
+const noResultsContainer = null;
+export const RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = 'render-emoji-picker-no-results';
+const EmojiPickerNoResults = ({
+  onOpenUpload,
+  uploadEnabled
+}) => {
+  const handleOpenUpload = useCallback(event => {
+    if (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: ax(["_zulppxbi _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _ca0q1ejb _u5f3pxbi _n3td1ejb _19bvpxbi _y3gn1h6o _1bsb1osq _vchhusvi"])
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: SearchNoResultLight,
+    srcDark: SearchNoResultDark,
+    alt: "",
+    width: 200
+  }), uploadEnabled && /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPickerAddCustomEmoji, label => /*#__PURE__*/React.createElement(AkButton, {
+    onClick: handleOpenUpload,
+    appearance: "default",
+    tabIndex: 0
+  }, label)));
+};
+export default EmojiPickerNoResults;

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

@@ -13,6 +13,8 @@ export const 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/es2019/components/picker/EmojiPickerVirtualItems.js

@@ -7,6 +7,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import Spinner from '@atlaskit/spinner';
 import EmojiPickerCategoryHeading from './EmojiPickerCategoryHeading';
 import EmojiPickerEmojiRow from './EmojiPickerEmojiRow';
+import EmojiPickerNoResults from './EmojiPickerNoResults';
 import { sizes } from './EmojiPickerSizes';
 const emojiPickerSpinner = null;
 export class AbstractItem {
@@ -39,6 +40,12 @@ export class CategoryHeadingItem extends AbstractItem {
     _defineProperty(this, "renderItem", () => /*#__PURE__*/React.createElement(EmojiPickerCategoryHeading, this.props));
   }
 }
+export class NoResultsItem extends AbstractItem {
+  constructor(props) {
+    super(props, sizes.noResultsHeight);
+    _defineProperty(this, "renderItem", () => /*#__PURE__*/React.createElement(EmojiPickerNoResults, this.props));
+  }
+}
 export const virtualItemRenderer = (rows, context) => {
   const {
     index,

package/dist/es2019/util/analytics/analytics.js

@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "70.10.14",
+    packageVersion: "70.11.1",
     ...attributes
   }
 });

package/dist/esm/components/common/EmojiUploadPicker.js

@@ -35,6 +35,8 @@ var uploadChooseFileEmojiName = null;
 var uploadChooseFileMessage = null;
 var uploadChooseFileRow = null;
 var uploadChooseFileRowNew = null;
+var supportedEmojiUploadMimeTypes = new Set(['image/png', 'image/jpeg', 'image/gif']);
+var supportedEmojiUploadExtensions = ['.png', '.jpg', '.jpeg', '.gif'];
 export var uploadEmojiNameInputTestId = 'upload-emoji-name-input';
 export var uploadEmojiComponentTestId = 'upload-emoji-component';
 export var cancelEmojiUploadPickerTestId = 'cancel-emoji-upload-picker';
@@ -51,6 +53,18 @@ var toEmojiName = function toEmojiName(uploadName) {
   var name = uploadName.split('_').join(' ');
   return "".concat(name.substr(0, 1).toLocaleUpperCase()).concat(name.substr(1));
 };
+var isSupportedEmojiUploadFileType = function isSupportedEmojiUploadFileType(file) {
+  if (!fg('platform_emoji_picker_refresh')) {
+    return true;
+  }
+  if (supportedEmojiUploadMimeTypes.has(file.type)) {
+    return true;
+  }
+  var lowerCaseFileName = file.name.toLowerCase();
+  return supportedEmojiUploadExtensions.some(function (extension) {
+    return lowerCaseFileName.endsWith(extension);
+  });
+};
 var ChooseEmojiFile = /*#__PURE__*/memo(function (props) {
   var _props$name = props.name,
     name = _props$name === void 0 ? '' : _props$name,
@@ -334,6 +348,11 @@ var EmojiUploadPicker = function EmojiUploadPicker(props) {
     if (files.length) {
       var reader = new FileReader();
       var file = files[0];
+      if (!isSupportedEmojiUploadFileType(file)) {
+        setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiUnsupportedFileType));
+        cancelChooseFile();
+        return;
+      }
       if (ImageUtil.hasFileExceededSize(file)) {
         setChooseEmojiErrorMessage( /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiImageTooBig));
         cancelChooseFile();

package/dist/esm/components/i18n.js

@@ -215,11 +215,26 @@ export var messages = defineMessages({
     defaultMessage: 'Selected image is more than 1 MB',
     description: 'Error message for image too big, beyond the size limit'
   },
+  emojiUnsupportedFileType: {
+    id: 'fabric.emoji.error.unsupported.file.type',
+    defaultMessage: "This file type isn't supported. Select a PNG, JPEG, or GIF to create your emoji.",
+    description: 'Error message shown when the selected emoji upload file type is not supported'
+  },
   emojiDuplicateName: {
     id: 'fabric.emoji.error.duplicate.name',
     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/esm/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/esm/components/picker/EmojiPickerComponent.js

@@ -67,6 +67,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,
@@ -141,6 +147,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
   }, []);
   var openTime = useRef(0);
   var isMounting = useRef(true);
+  var lastNonSearchCategory = useRef(activeCategory);
   var previousEmojiProvider = useRef(emojiProvider);
   var isProgrammaticScroll = useRef(false);
   var pickerRef = useRef(null);
@@ -182,8 +189,11 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     }
     if (activeCategory !== category) {
       setActiveCategory(category);
+      if (!query && fg('platform_emoji_picker_refresh')) {
+        lastNonSearchCategory.current = category;
+      }
     }
-  }, [activeCategory, uploading, emojiToDelete]);
+  }, [activeCategory, uploading, emojiToDelete, query]);
   var calculateElapsedTime = function calculateElapsedTime() {
     return Date.now() - openTime.current;
   };
@@ -400,6 +410,10 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       source: SearchSourceTypes.PICKER
     };
     if (searchQuery !== query) {
+      // Capture the active category before entering search so we can keep it highlighted
+      if (!query && searchQuery && fg('platform_emoji_picker_refresh')) {
+        lastNonSearchCategory.current = activeCategory;
+      }
       setQuery(searchQuery);
     }
     updateEmojis(searchQuery, options);
@@ -407,7 +421,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).
@@ -628,7 +642,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       role: "dialog",
       "aria-label": formatMessage(messages.emojiPickerTitle),
       "aria-modal": true,
-      className: ax([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 && fg('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
+      className: ax([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 && fg('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : query && filteredEmojis.length === 0 && fg('platform_emoji_picker_refresh') ? withNoResultsRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
       style: {
         "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
         "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
@@ -673,7 +687,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
       onOpenUpload: onOpenUpload,
       size: size,
       activeCategoryId: activeCategory
-    }), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
+    }), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && !(query && filteredEmojis.length === 0 && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
       selectedEmoji: selectedEmoji,
       uploadEnabled: isUploadSupported && !uploading,
       onOpenUpload: onOpenUpload
@@ -688,7 +702,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: ax([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 && fg('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
+    className: ax([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 && fg('platform_emoji_picker_refresh') ? withDeleteRefreshHeight[size] : uploading && fg('platform_emoji_picker_refresh') ? withUploadRefreshHeight[size] : query && filteredEmojis.length === 0 && fg('platform_emoji_picker_refresh') ? withNoResultsRefreshHeight[size] : showPreview ? withPreviewHeight[size] : withoutPreviewHeight[size]]),
     style: {
       "--_19dn98e": ix("".concat(emojiPickerHeight, "px")),
       "--_gsvyy7": ix("".concat(emojiPickerWidth, "px"))
@@ -727,7 +741,7 @@ var EmojiPickerComponent = function EmojiPickerComponent(_ref) {
     onOpenUpload: onOpenUpload,
     size: size,
     activeCategoryId: activeCategory
-  }), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
+  }), showPreview && !(emojiToDelete && fg('platform_emoji_picker_refresh')) && !(query && filteredEmojis.length === 0 && fg('platform_emoji_picker_refresh')) && /*#__PURE__*/React.createElement(EmojiPickerFooter, {
     selectedEmoji: selectedEmoji,
     uploadEnabled: isUploadSupported && !uploading,
     onOpenUpload: onOpenUpload

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

@@ -1,17 +1,19 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useIntl } from 'react-intl';
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { customCategory, defaultEmojiPickerSize, frequentCategory, searchCategory, userCustomTitle, yourUploadsCategory } from '../../util/constants';
 import { CategoryDescriptionMap, CategoryDescriptionMapNew } from './categories';
 import CategoryTracker from './CategoryTracker';
 import { sizes } from './EmojiPickerSizes';
-import { CategoryHeadingItem, EmojisRowItem, LoadingItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
+import { CategoryHeadingItem, EmojisRowItem, LoadingItem, NoResultsItem, virtualItemRenderer } from './EmojiPickerVirtualItems';
 import EmojiActions from '../common/EmojiActions';
 import { emojiPickerHeightOffset, scrollToRow as _scrollToRow } from './utils';
 import { VirtualList } from './VirtualList';
 import { EmojiPickerListContextProvider } from '../../context/EmojiPickerListContext';
 import EmojiPickerTabPanel from './EmojiPickerTabPanel';
+import { messages } from '../i18n';
 
 /**
  * Test id for wrapper Emoji Picker List div
@@ -60,6 +62,8 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     onFileChooserClicked = props.onFileChooserClicked,
     onOpenUpload = props.onOpenUpload,
     activeCategoryId = props.activeCategoryId;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var listRef = useRef(null);
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
@@ -177,14 +181,27 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
       items.push(new LoadingItem());
     } else {
       if (query) {
-        var search = CategoryDescriptionMap.SEARCH;
-        // Only a single "result" category
-        items = [].concat(_toConsumableArray(items), _toConsumableArray(buildVirtualItemFromGroup({
-          category: searchCategory,
-          title: search.name,
-          emojis: emojis,
-          order: search.order
-        })));
+        var search = fg('platform_emoji_picker_refresh') ? CategoryDescriptionMapNew.SEARCH : CategoryDescriptionMap.SEARCH;
+        if (emojis.length === 0 && fg('platform_emoji_picker_refresh')) {
+          // Show a "No results" category heading, then a no-results illustration below it
+          items.push(new CategoryHeadingItem({
+            id: searchCategory,
+            title: formatMessage(messages.emojiPickerNoResults),
+            className: categoryClassname
+          }));
+          items.push(new NoResultsItem({
+            onOpenUpload: onOpenUpload,
+            uploadEnabled: uploadEnabled
+          }));
+        } else {
+          // Only a single "result" category
+          items = [].concat(_toConsumableArray(items), _toConsumableArray(buildVirtualItemFromGroup({
+            category: searchCategory,
+            title: search.name,
+            emojis: emojis,
+            order: search.order
+          })));
+        }
       } else {
         // Group by category
 
@@ -209,7 +226,7 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
       }
     }
     // 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 CategoryHeadingItem) {
@@ -319,8 +336,12 @@ export var EmojiPickerVirtualListInternal = /*#__PURE__*/React.forwardRef(functi
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [virtualItems, categoriesChanged]);
   var virtualListHeight = useMemo(function () {
+    if (query && emojis.length === 0 && fg('platform_emoji_picker_refresh')) {
+      // No-results state: expand the list height to fit heading + illustration without scrolling
+      return sizes.categoryHeadingHeight + sizes.noResultsHeight + emojiPickerHeightOffset(size);
+    }
     return fg('platform_emoji_picker_refresh') ? sizes.listHeightNew + emojiPickerHeightOffset(size) : sizes.listHeight + emojiPickerHeightOffset(size);
-  }, [size]);
+  }, [size, query, emojis.length]);
   return /*#__PURE__*/React.createElement(EmojiPickerTabPanel, {
     showSearchResults: !!query
   }, /*#__PURE__*/React.createElement(EmojiActions, {

package/dist/esm/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/esm/components/picker/EmojiPickerNoResults.js

@@ -0,0 +1,41 @@
+/* EmojiPickerNoResults.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./EmojiPickerNoResults.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { FormattedMessage } from 'react-intl';
+import AkButton from '@atlaskit/button/standard-button';
+import Image from '@atlaskit/image';
+import { messages } from '../i18n';
+import SearchNoResultDark from './assets/spot/search-no-result/dark.svg';
+import SearchNoResultLight from './assets/spot/search-no-result/light.svg';
+var noResultsContainer = null;
+export var RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = 'render-emoji-picker-no-results';
+var EmojiPickerNoResults = function EmojiPickerNoResults(_ref) {
+  var onOpenUpload = _ref.onOpenUpload,
+    uploadEnabled = _ref.uploadEnabled;
+  var handleOpenUpload = useCallback(function (event) {
+    if (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: ax(["_zulppxbi _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _ca0q1ejb _u5f3pxbi _n3td1ejb _19bvpxbi _y3gn1h6o _1bsb1osq _vchhusvi"])
+  }, /*#__PURE__*/React.createElement(Image, {
+    src: SearchNoResultLight,
+    srcDark: SearchNoResultDark,
+    alt: "",
+    width: 200
+  }), uploadEnabled && /*#__PURE__*/React.createElement(FormattedMessage, messages.emojiPickerAddCustomEmoji, function (label) {
+    return /*#__PURE__*/React.createElement(AkButton, {
+      onClick: handleOpenUpload,
+      appearance: "default",
+      tabIndex: 0
+    }, label);
+  }));
+};
+export default EmojiPickerNoResults;

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

@@ -13,6 +13,8 @@ export var 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/esm/components/picker/EmojiPickerVirtualItems.js

@@ -14,6 +14,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import Spinner from '@atlaskit/spinner';
 import EmojiPickerCategoryHeading from './EmojiPickerCategoryHeading';
 import EmojiPickerEmojiRow from './EmojiPickerEmojiRow';
+import EmojiPickerNoResults from './EmojiPickerNoResults';
 import { sizes } from './EmojiPickerSizes';
 var emojiPickerSpinner = null;
 export var AbstractItem = /*#__PURE__*/_createClass(function AbstractItem(props, height) {
@@ -66,6 +67,19 @@ export var CategoryHeadingItem = /*#__PURE__*/function (_AbstractItem3) {
   _inherits(CategoryHeadingItem, _AbstractItem3);
   return _createClass(CategoryHeadingItem);
 }(AbstractItem);
+export var NoResultsItem = /*#__PURE__*/function (_AbstractItem4) {
+  function NoResultsItem(props) {
+    var _this4;
+    _classCallCheck(this, NoResultsItem);
+    _this4 = _callSuper(this, NoResultsItem, [props, sizes.noResultsHeight]);
+    _defineProperty(_this4, "renderItem", function () {
+      return /*#__PURE__*/React.createElement(EmojiPickerNoResults, _this4.props);
+    });
+    return _this4;
+  }
+  _inherits(NoResultsItem, _AbstractItem4);
+  return _createClass(NoResultsItem);
+}(AbstractItem);
 export var virtualItemRenderer = function virtualItemRenderer(rows, context) {
   var index = context.index,
     key = context.key;

package/dist/esm/util/analytics/analytics.js

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

package/dist/types/components/i18n.d.ts

@@ -119,11 +119,21 @@ export declare const messages: {
         description: string;
         id: string;
     };
+    emojiPickerAddCustomEmoji: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     emojiPickerGrid: {
         defaultMessage: string;
         description: string;
         id: string;
     };
+    emojiPickerNoResults: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     emojiPickerListPanel: {
         defaultMessage: string;
         description: string;
@@ -159,6 +169,11 @@ export declare const messages: {
         description: string;
         id: string;
     };
+    emojiUnsupportedFileType: {
+        defaultMessage: string;
+        description: string;
+        id: string;
+    };
     emojiUploadFailed: {
         defaultMessage: string;
         description: string;

package/dist/types/components/picker/EmojiPickerNoResults.d.ts

@@ -0,0 +1,7 @@
+export declare const RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = "render-emoji-picker-no-results";
+export interface Props {
+    onOpenUpload: () => void;
+    uploadEnabled: boolean;
+}
+declare const EmojiPickerNoResults: ({ onOpenUpload, uploadEnabled }: Props) => JSX.Element;
+export default EmojiPickerNoResults;

package/dist/types/components/picker/EmojiPickerSizes.d.ts

@@ -7,6 +7,7 @@ export declare const sizes: {
     listHeightNew: number;
     listWidth: number;
     loadingRowHeight: number;
+    noResultsHeight: number;
     searchHeight: number;
     uploadActionHeight: number;
 };

package/dist/types/components/picker/EmojiPickerVirtualItems.d.ts

@@ -5,6 +5,7 @@
 import type { ReactNode } from 'react';
 import { type Props as CategoryHeadingProps } from './EmojiPickerCategoryHeading';
 import { type Props as EmojiRowProps } from './EmojiPickerEmojiRow';
+import { type Props as NoResultsProps } from './EmojiPickerNoResults';
 import type { VirtualItem as VirtualItemContext } from '@tanstack/react-virtual';
 export interface RenderItem {
     (context?: VirtualItemContext): ReactNode;
@@ -32,4 +33,8 @@ export declare class CategoryHeadingItem extends AbstractItem<CategoryHeadingPro
     constructor(props: CategoryHeadingProps);
     renderItem: () => JSX.Element;
 }
-export declare const virtualItemRenderer: (rows: VirtualItem<CategoryHeadingProps | EmojiRowProps | {}>[], context: VirtualItemContext) => JSX.Element;
+export declare class NoResultsItem extends AbstractItem<NoResultsProps> {
+    constructor(props: NoResultsProps);
+    renderItem: () => JSX.Element;
+}
+export declare const virtualItemRenderer: (rows: VirtualItem<CategoryHeadingProps | EmojiRowProps | NoResultsProps | {}>[], context: VirtualItemContext) => JSX.Element;