@atlaskit/emoji 70.13.0 → 70.14.0

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

@@ -60,6 +60,12 @@ const withoutPreviewHeight = {
   medium: "_4t3iixjv _1tke5x59",
   large: "_4t3i1ckg _1tke1pna"
 };
+const emojiPickerHeightNoResults = 354;
+const withNoResultsRefreshHeight = {
+  small: "_4t3i1j8x _1tkegx0z",
+  medium: "_4t3iihnn _1tke5x59",
+  large: "_4t3i19lm _1tke1pna"
+};
 const FREQUENTLY_USED_MAX = 16;
 const EmojiPickerComponent = ({
   onSelection,
@@ -92,6 +98,7 @@ const EmojiPickerComponent = ({
   const emojiPickerList = useMemo(() => /*#__PURE__*/createRef(), []);
   const openTime = useRef(0);
   const isMounting = useRef(true);
+  const lastNonSearchCategory = useRef(activeCategory);
   const previousEmojiProvider = useRef(emojiProvider);
   const isProgrammaticScroll = useRef(false);
   const pickerRef = useRef(null);
@@ -133,8 +140,11 @@ const EmojiPickerComponent = ({
     }
     if (activeCategory !== category) {
       setActiveCategory(category);
+      if (!query && fg('platform_emoji_picker_refresh')) {
+        lastNonSearchCategory.current = category;
+      }
     }
-  }, [activeCategory, uploading, emojiToDelete]);
+  }, [activeCategory, uploading, emojiToDelete, query]);
   const calculateElapsedTime = () => {
     return Date.now() - openTime.current;
   };
@@ -347,6 +357,10 @@ const EmojiPickerComponent = ({
       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);
@@ -354,7 +368,7 @@ const EmojiPickerComponent = ({
       // 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).
@@ -547,7 +561,7 @@ const EmojiPickerComponent = ({
       role: "dialog",
       "aria-label": formatMessage(messages.emojiPickerTitle),
       "aria-modal": true,
-      className: ax([fg('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _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 _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _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]])
     }, /*#__PURE__*/React.createElement("div", {
       role: "presentation",
       onKeyPress: suppressKeyPress,
@@ -588,7 +602,7 @@ const EmojiPickerComponent = ({
       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
@@ -603,7 +617,7 @@ const EmojiPickerComponent = ({
     onKeyPress: suppressKeyPress,
     onKeyUp: suppressKeyPress,
     onKeyDown: suppressKeyPress,
-    className: ax([fg('platform_emoji_picker_refresh') ? "_19itahnd _2rko1mok _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _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 _4t3iaq3k _1bsb1edt _1ul91edt _c71l1y6z _kqswh2mm" : "_19itahnd _2rkofajl _1e0c1txw _2lx21bp4 _1bah1yb4 _bfhk1bhr _16qs130s _4t3iaq3k _1bsb1edt _1ul91edt _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]])
   }, /*#__PURE__*/React.createElement(CategorySelector, {
     activeCategoryId: (uploading || emojiToDelete) && fg('platform_emoji_picker_refresh') ? null : activeCategory,
     dynamicCategories: dynamicCategories,
@@ -638,7 +652,7 @@ const EmojiPickerComponent = ({
     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/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,38 @@
+/* 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 { useThemeObserver } from '@atlaskit/tokens';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { FormattedMessage } from 'react-intl';
+import AkButton from '@atlaskit/button/standard-button';
+import { messages } from '../i18n';
+import SearchNoResultDark from './assets/spot/search-no-result/SearchNoResultDark';
+import SearchNoResultLight from './assets/spot/search-no-result/SearchNoResultLight';
+const noResultsContainer = null;
+export const RENDER_EMOJI_PICKER_NO_RESULTS_TESTID = 'render-emoji-picker-no-results';
+const EmojiPickerNoResults = ({
+  onOpenUpload,
+  uploadEnabled
+}) => {
+  const {
+    colorMode
+  } = useThemeObserver();
+  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"])
+  }, colorMode === 'dark' ? /*#__PURE__*/React.createElement(SearchNoResultDark, null) : /*#__PURE__*/React.createElement(SearchNoResultLight, null), 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/components/picker/assets/spot/search-no-result/SearchNoResultDark.js

@@ -0,0 +1,31 @@
+import React from 'react';
+const SearchNoResultDark = () => /*#__PURE__*/React.createElement("svg", {
+  width: "200",
+  height: "200",
+  viewBox: "0 0 275 275",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.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.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.createElement("path", {
+  d: "M187.155 174.199L169.513 187.839L202.665 230.717L220.307 217.077L187.155 174.199Z",
+  fill: "#4B4D51"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M184.32 176.391L172.35 185.646L183.593 200.186L195.562 190.932L184.32 176.391Z",
+  fill: "#7E8188"
+}), /*#__PURE__*/React.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.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"
+}));
+export default SearchNoResultDark;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+const SearchNoResultLight = () => /*#__PURE__*/React.createElement("svg", {
+  width: "200",
+  height: "200",
+  viewBox: "0 0 275 275",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.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.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.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.createElement("path", {
+  d: "M187.155 174.199L169.513 187.839L202.665 230.717L220.307 217.077L187.155 174.199Z",
+  fill: "#DDDEE1"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M184.32 176.391L172.35 185.646L183.593 200.186L195.562 190.932L184.32 176.391Z",
+  fill: "#B7B9BE"
+}), /*#__PURE__*/React.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.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"
+}));
+export default SearchNoResultLight;

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.12.0",
+    packageVersion: "70.13.0",
     ...attributes
   }
 });

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

@@ -11,6 +11,9 @@ import { containsFiles, getFiles } from '@atlaskit/pragmatic-drag-and-drop/exter
 export var chooseFileButtonTestId = 'choose-file-button';
 export var fileUploadInputTestId = 'file-upload';
 export var 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;
@@ -62,7 +65,21 @@ var FileChooser = function FileChooser(props) {
     if (!element || !fg('platform_emoji_picker_refresh')) {
       return;
     }
-    return 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 = dropTargetForExternal({
       element: element,
       canDrop: containsFiles,
       onDragEnter: function onDragEnter() {
@@ -84,6 +101,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.createElement("input", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/esm/components/i18n.js

@@ -225,6 +225,16 @@ export var 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/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}