@atlaskit/emoji 67.0.7 → 67.1.0

package/dist/cjs/i18n/vi.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,39 +13,39 @@ exports.default = void 0;
  */
 //Vietnamese (Vietnam)
 var _default = {
-  'fabric.emoji.add.custom.emoji.label': 'Thêm biểu tượng cảm xúc của riêng bạn',
-  'fabric.emoji.add.label': 'Thêm biểu tượng cảm xúc',
-  'fabric.emoji.cancel.label': 'Hủy',
-  'fabric.emoji.categories.search.results': 'Kết quả tìm kiếm',
-  'fabric.emoji.category.activity': 'Hoạt động',
-  'fabric.emoji.category.all.uploads': 'Tất cả các nội dung tải lên',
-  'fabric.emoji.category.flags': 'Cờ',
-  'fabric.emoji.category.foods': 'Thực phẩm & Đồ uống',
-  'fabric.emoji.category.frequent': 'Thường ngày',
-  'fabric.emoji.category.nature': 'Thiên nhiên',
-  'fabric.emoji.category.objects': 'Đồ vật',
-  'fabric.emoji.category.people': 'Mọi người',
-  'fabric.emoji.category.places': 'Du lịch & Địa điểm',
-  'fabric.emoji.category.productivity': 'Năng suất',
-  'fabric.emoji.category.symbols': 'Biểu tượng',
-  'fabric.emoji.category.user.uploads': 'Các nội dung bạn tải lên',
-  'fabric.emoji.choose.file.screenReaderDescription': 'Chọn một tệp cho biểu tượng cảm xúc. JPG, PNG hoặc GIF. Kích thước tối đa 1 MB.',
-  'fabric.emoji.choose.file.title': 'Chọn tập tin',
-  'fabric.emoji.delete.description': 'Tất cả các phiên bản hiện tại của biểu tượng cảm xúc này sẽ được thay thế bằng {emojiShortName}',
-  'fabric.emoji.delete.label': 'Xóa',
-  'fabric.emoji.delete.title': 'Xóa biểu tượng cảm xúc',
-  'fabric.emoji.error.delete.failed': 'Không xóa được',
-  'fabric.emoji.error.image.too.big': 'Hình ảnh đã chọn có kích thước lớn hơn 1 MB',
-  'fabric.emoji.error.invalid.image': 'Hình ảnh đã chọn không hợp lệ',
-  'fabric.emoji.error.upload.failed': 'Không thể tải lên',
-  'fabric.emoji.image.requirements': 'JPG, PNG hoặc GIF. Kích thước tối đa 1 MB.',
-  'fabric.emoji.name.ariaLabel': 'Nhập tên cho biểu tượng cảm xúc mới này',
-  'fabric.emoji.placeholder': 'Tên biểu tượng cảm xúc',
-  'fabric.emoji.preview': 'Biểu tượng cảm xúc mới của bạn {emoji} trông rất tuyệt',
-  'fabric.emoji.preview.title': 'Xem trước',
-  'fabric.emoji.retry.label': 'Thử lại',
-  'fabric.emoji.search.label': 'Tìm kiếm biểu tượng cảm xúc',
-  'fabric.emoji.search.placeholder': 'Tìm kiếm',
-  'fabric.emoji.select.skin.tone.ariaLabel': 'Chọn tông màu da, {selectedTone}'
+  "fabric.emoji.add.custom.emoji.label": "Thêm biểu tượng cảm xúc của riêng bạn",
+  "fabric.emoji.add.label": "Thêm biểu tượng cảm xúc",
+  "fabric.emoji.cancel.label": "Hủy",
+  "fabric.emoji.categories.search.results": "Kết quả tìm kiếm",
+  "fabric.emoji.category.activity": "Hoạt động",
+  "fabric.emoji.category.all.uploads": "Tất cả các nội dung tải lên",
+  "fabric.emoji.category.flags": "Cờ",
+  "fabric.emoji.category.foods": "Thực phẩm & Đồ uống",
+  "fabric.emoji.category.frequent": "Thường ngày",
+  "fabric.emoji.category.nature": "Thiên nhiên",
+  "fabric.emoji.category.objects": "Đồ vật",
+  "fabric.emoji.category.people": "Mọi người",
+  "fabric.emoji.category.places": "Du lịch & Địa điểm",
+  "fabric.emoji.category.productivity": "Năng suất",
+  "fabric.emoji.category.symbols": "Biểu tượng",
+  "fabric.emoji.category.user.uploads": "Các nội dung bạn tải lên",
+  "fabric.emoji.choose.file.screenReaderDescription": "Chọn một tệp cho biểu tượng cảm xúc. JPG, PNG hoặc GIF. Kích thước tối đa 1 MB.",
+  "fabric.emoji.choose.file.title": "Chọn tập tin",
+  "fabric.emoji.delete.description": "Tất cả các phiên bản hiện tại của biểu tượng cảm xúc này sẽ được thay thế bằng {emojiShortName}",
+  "fabric.emoji.delete.label": "Xóa",
+  "fabric.emoji.delete.title": "Xóa biểu tượng cảm xúc",
+  "fabric.emoji.error.delete.failed": "Không xóa được",
+  "fabric.emoji.error.image.too.big": "Hình ảnh đã chọn có kích thước lớn hơn 1 MB",
+  "fabric.emoji.error.invalid.image": "Hình ảnh đã chọn không hợp lệ",
+  "fabric.emoji.error.upload.failed": "Không thể tải lên",
+  "fabric.emoji.image.requirements": "JPG, PNG hoặc GIF. Kích thước tối đa 1 MB.",
+  "fabric.emoji.name.ariaLabel": "Nhập tên cho biểu tượng cảm xúc mới này",
+  "fabric.emoji.placeholder": "Tên biểu tượng cảm xúc",
+  "fabric.emoji.preview": "Biểu tượng cảm xúc mới của bạn {emoji} trông rất tuyệt",
+  "fabric.emoji.preview.title": "Xem trước",
+  "fabric.emoji.retry.label": "Thử lại",
+  "fabric.emoji.search.label": "Tìm kiếm biểu tượng cảm xúc",
+  "fabric.emoji.search.placeholder": "Tìm kiếm",
+  "fabric.emoji.select.skin.tone.ariaLabel": "Chọn tông màu da, {selectedTone}"
 };
 exports.default = _default;

package/dist/cjs/i18n/zh.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,39 +13,39 @@ exports.default = void 0;
  */
 //Chinese (Simplified)
 var _default = {
-  'fabric.emoji.add.custom.emoji.label': '添加您自己的表情符号',
-  'fabric.emoji.add.label': '添加表情符号',
-  'fabric.emoji.cancel.label': '取消',
-  'fabric.emoji.categories.search.results': '搜索结果',
-  'fabric.emoji.category.activity': '活动',
-  'fabric.emoji.category.all.uploads': '所有上传',
-  'fabric.emoji.category.flags': '标记',
-  'fabric.emoji.category.foods': '食物和饮品',
-  'fabric.emoji.category.frequent': '频率',
-  'fabric.emoji.category.nature': '性质',
-  'fabric.emoji.category.objects': '对象',
-  'fabric.emoji.category.people': '人员',
-  'fabric.emoji.category.places': '旅行和地点',
-  'fabric.emoji.category.productivity': '生产力',
-  'fabric.emoji.category.symbols': '符号',
-  'fabric.emoji.category.user.uploads': '您的上传',
-  'fabric.emoji.choose.file.screenReaderDescription': '为表情符号选择一个文件。JPG、PNG 或 GIF。文件大小不得超过 1 MB。',
-  'fabric.emoji.choose.file.title': '选择文件',
-  'fabric.emoji.delete.description': '此表情符号的所有现有实例将替换为{emojiShortName}',
-  'fabric.emoji.delete.label': '删除',
-  'fabric.emoji.delete.title': '删除表情符号',
-  'fabric.emoji.error.delete.failed': '删除失败',
-  'fabric.emoji.error.image.too.big': '选择的图像超过 1 MB',
-  'fabric.emoji.error.invalid.image': '选择的图像无效',
-  'fabric.emoji.error.upload.failed': '上传失败',
-  'fabric.emoji.image.requirements': 'JPG、PNG 或 GIF 最大为 1 MB。',
-  'fabric.emoji.name.ariaLabel': '为新表情符号输入名称',
-  'fabric.emoji.placeholder': '表情符号名称',
-  'fabric.emoji.preview': '您的新表情符号{emoji}看起来很棒',
-  'fabric.emoji.preview.title': '预览',
-  'fabric.emoji.retry.label': '重试',
-  'fabric.emoji.search.label': '搜索表情',
-  'fabric.emoji.search.placeholder': '搜索',
-  'fabric.emoji.select.skin.tone.ariaLabel': '选择肤色，{selectedTone}'
+  "fabric.emoji.add.custom.emoji.label": "添加您自己的表情符号",
+  "fabric.emoji.add.label": "添加表情符号",
+  "fabric.emoji.cancel.label": "取消",
+  "fabric.emoji.categories.search.results": "搜索结果",
+  "fabric.emoji.category.activity": "活动",
+  "fabric.emoji.category.all.uploads": "所有上传",
+  "fabric.emoji.category.flags": "标记",
+  "fabric.emoji.category.foods": "食物和饮品",
+  "fabric.emoji.category.frequent": "频率",
+  "fabric.emoji.category.nature": "性质",
+  "fabric.emoji.category.objects": "对象",
+  "fabric.emoji.category.people": "人员",
+  "fabric.emoji.category.places": "旅行和地点",
+  "fabric.emoji.category.productivity": "生产力",
+  "fabric.emoji.category.symbols": "符号",
+  "fabric.emoji.category.user.uploads": "您的上传",
+  "fabric.emoji.choose.file.screenReaderDescription": "为表情符号选择一个文件。JPG、PNG 或 GIF。文件大小不得超过 1 MB。",
+  "fabric.emoji.choose.file.title": "选择文件",
+  "fabric.emoji.delete.description": "此表情符号的所有现有实例将替换为{emojiShortName}",
+  "fabric.emoji.delete.label": "删除",
+  "fabric.emoji.delete.title": "删除表情符号",
+  "fabric.emoji.error.delete.failed": "删除失败",
+  "fabric.emoji.error.image.too.big": "选择的图像超过 1 MB",
+  "fabric.emoji.error.invalid.image": "选择的图像无效",
+  "fabric.emoji.error.upload.failed": "上传失败",
+  "fabric.emoji.image.requirements": "JPG、PNG 或 GIF 最大为 1 MB。",
+  "fabric.emoji.name.ariaLabel": "为新表情符号输入名称",
+  "fabric.emoji.placeholder": "表情符号名称",
+  "fabric.emoji.preview": "您的新表情符号{emoji}看起来很棒",
+  "fabric.emoji.preview.title": "预览",
+  "fabric.emoji.retry.label": "重试",
+  "fabric.emoji.search.label": "搜索表情",
+  "fabric.emoji.search.placeholder": "搜索",
+  "fabric.emoji.select.skin.tone.ariaLabel": "选择肤色，{selectedTone}"
 };
 exports.default = _default;

package/dist/cjs/i18n/zh_TW.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+/* prettier-ignore */
 /**
  * NOTE:
  *
@@ -12,39 +13,39 @@ exports.default = void 0;
  */
 //Chinese (Traditional)
 var _default = {
-  'fabric.emoji.add.custom.emoji.label': '新增專屬的表情符號',
-  'fabric.emoji.add.label': '新增表情符號',
-  'fabric.emoji.cancel.label': '取消',
-  'fabric.emoji.categories.search.results': '搜尋結果',
-  'fabric.emoji.category.activity': '活動',
-  'fabric.emoji.category.all.uploads': '所有上傳項目',
-  'fabric.emoji.category.flags': '旗標',
-  'fabric.emoji.category.foods': '食物和飲料',
-  'fabric.emoji.category.frequent': '常用項目',
-  'fabric.emoji.category.nature': '自然',
-  'fabric.emoji.category.objects': '物體',
-  'fabric.emoji.category.people': '人員',
-  'fabric.emoji.category.places': '旅遊和地點',
-  'fabric.emoji.category.productivity': '生產力',
-  'fabric.emoji.category.symbols': '符號',
-  'fabric.emoji.category.user.uploads': '您的上傳項目',
-  'fabric.emoji.choose.file.screenReaderDescription': '請選擇表情符號的檔案。JPG、PNG 或 GIF。大小上限為 1 MB。',
-  'fabric.emoji.choose.file.title': '選擇檔案',
-  'fabric.emoji.delete.description': '此表情符號的所有現有執行個體都將取代為 {emojiShortName}',
-  'fabric.emoji.delete.label': '移除',
-  'fabric.emoji.delete.title': '移除表情符號',
-  'fabric.emoji.error.delete.failed': '移除失敗',
-  'fabric.emoji.error.image.too.big': '所選的影像超過 1 MB',
-  'fabric.emoji.error.invalid.image': '所選的影像無效',
-  'fabric.emoji.error.upload.failed': '上傳失敗',
-  'fabric.emoji.image.requirements': 'JPG、PNG 或 GIF。大小上限為 1 MB。',
-  'fabric.emoji.name.ariaLabel': '請輸入新表情符號的名稱',
-  'fabric.emoji.placeholder': '表情符號名稱',
-  'fabric.emoji.preview': '新的表情符號 {emoji} 看起來很棒',
-  'fabric.emoji.preview.title': '預覽',
-  'fabric.emoji.retry.label': '重試',
-  'fabric.emoji.search.label': '搜尋表情符號',
-  'fabric.emoji.search.placeholder': '搜尋',
-  'fabric.emoji.select.skin.tone.ariaLabel': '選取膚色，{selectedTone}'
+  "fabric.emoji.add.custom.emoji.label": "新增專屬的表情符號",
+  "fabric.emoji.add.label": "新增表情符號",
+  "fabric.emoji.cancel.label": "取消",
+  "fabric.emoji.categories.search.results": "搜尋結果",
+  "fabric.emoji.category.activity": "活動",
+  "fabric.emoji.category.all.uploads": "所有上傳項目",
+  "fabric.emoji.category.flags": "旗標",
+  "fabric.emoji.category.foods": "食物和飲料",
+  "fabric.emoji.category.frequent": "常用項目",
+  "fabric.emoji.category.nature": "自然",
+  "fabric.emoji.category.objects": "物體",
+  "fabric.emoji.category.people": "人員",
+  "fabric.emoji.category.places": "旅遊和地點",
+  "fabric.emoji.category.productivity": "生產力",
+  "fabric.emoji.category.symbols": "符號",
+  "fabric.emoji.category.user.uploads": "您的上傳項目",
+  "fabric.emoji.choose.file.screenReaderDescription": "請選擇表情符號的檔案。JPG、PNG 或 GIF。大小上限為 1 MB。",
+  "fabric.emoji.choose.file.title": "選擇檔案",
+  "fabric.emoji.delete.description": "此表情符號的所有現有執行個體都將取代為 {emojiShortName}",
+  "fabric.emoji.delete.label": "移除",
+  "fabric.emoji.delete.title": "移除表情符號",
+  "fabric.emoji.error.delete.failed": "移除失敗",
+  "fabric.emoji.error.image.too.big": "所選的影像超過 1 MB",
+  "fabric.emoji.error.invalid.image": "所選的影像無效",
+  "fabric.emoji.error.upload.failed": "上傳失敗",
+  "fabric.emoji.image.requirements": "JPG、PNG 或 GIF。大小上限為 1 MB。",
+  "fabric.emoji.name.ariaLabel": "請輸入新表情符號的名稱",
+  "fabric.emoji.placeholder": "表情符號名稱",
+  "fabric.emoji.preview": "新的表情符號 {emoji} 看起來很棒",
+  "fabric.emoji.preview.title": "預覽",
+  "fabric.emoji.retry.label": "重試",
+  "fabric.emoji.search.label": "搜尋表情符號",
+  "fabric.emoji.search.placeholder": "搜尋",
+  "fabric.emoji.select.skin.tone.ariaLabel": "選取膚色，{selectedTone}"
 };
 exports.default = _default;

package/dist/cjs/types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UfoExperienceName = exports.UfoEmojiTimingsKeys = exports.UfoEmojiTimings = exports.UfoComponentName = exports.SearchSort = exports.ProviderTypes = void 0;
+exports.UfoExperienceName = exports.UfoEmojiTimingsKeys = exports.UfoEmojiTimings = exports.UfoComponentName = exports.SearchSourceTypes = exports.SearchSort = exports.ProviderTypes = void 0;
 /**
  * Minimum information to defined an emoji is the shortName.
  * In order to uniquely define an emoji, the id should be included, and is
@@ -35,6 +35,12 @@ exports.SearchSort = SearchSort;
   SearchSort[SearchSort["Default"] = 1] = "Default";
   SearchSort[SearchSort["UsageFrequency"] = 2] = "UsageFrequency";
 })(SearchSort || (exports.SearchSort = SearchSort = {}));
+var SearchSourceTypes;
+exports.SearchSourceTypes = SearchSourceTypes;
+(function (SearchSourceTypes) {
+  SearchSourceTypes["PICKER"] = "picker";
+  SearchSourceTypes["TYPEAHEAD"] = "typeahead";
+})(SearchSourceTypes || (exports.SearchSourceTypes = SearchSourceTypes = {}));
 var ProviderTypes;
 exports.ProviderTypes = ProviderTypes;
 (function (ProviderTypes) {

package/dist/cjs/util/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.userCustomTitle = exports.sizeGap = exports.selectedToneStorageKey = exports.migrationUserId = exports.localStoragePrefix = exports.frequentCategory = exports.emojiPickerWidth = exports.emojiPickerPreviewHeight = exports.emojiPickerMinHeight = exports.emojiPickerListHeight = exports.emojiPickerHeightWithPreview = exports.emojiPickerHeight = exports.deleteEmojiLabel = exports.defaultListLimit = exports.defaultEmojiPickerSize = exports.defaultEmojiHeight = exports.defaultCategories = exports.dataURLPrefix = exports.customType = exports.customTitle = exports.customCategory = exports.analyticsEmojiPrefix = exports.SAMPLING_RATE_EMOJI_RESOURCE_FETCHED_EXP = exports.SAMPLING_RATE_EMOJI_RENDERED_EXP = exports.MAX_ORDINAL = void 0;
+exports.userCustomTitle = exports.sizeGap = exports.selectedToneStorageKey = exports.migrationUserId = exports.localStoragePrefix = exports.frequentCategory = exports.emojiPickerWidth = exports.emojiPickerPreviewHeight = exports.emojiPickerMinHeight = exports.emojiPickerListHeight = exports.emojiPickerHeightWithPreview = exports.emojiPickerHeight = exports.deleteEmojiLabel = exports.defaultListLimit = exports.defaultEmojiPickerSize = exports.defaultEmojiHeight = exports.defaultCategories = exports.dataURLPrefix = exports.customType = exports.customTitle = exports.customCategory = exports.analyticsEmojiPrefix = exports.SAMPLING_RATE_EMOJI_RESOURCE_FETCHED_EXP = exports.SAMPLING_RATE_EMOJI_RENDERED_EXP = exports.MAX_ORDINAL = exports.EMOJI_SEARCH_DEBOUNCE = void 0;
 var customCategory = 'CUSTOM';
 exports.customCategory = customCategory;
 var frequentCategory = 'FREQUENT';
@@ -54,9 +54,11 @@ exports.defaultListLimit = defaultListLimit;
 var migrationUserId = 'hipchat_migration_emoticons';
 exports.migrationUserId = migrationUserId;
 var analyticsEmojiPrefix = 'atlassian.fabric.emoji.picker';
+exports.analyticsEmojiPrefix = analyticsEmojiPrefix;
+var EMOJI_SEARCH_DEBOUNCE = 150;
 
 // This is the base sampling rate in Emoji
-exports.analyticsEmojiPrefix = analyticsEmojiPrefix;
+exports.EMOJI_SEARCH_DEBOUNCE = EMOJI_SEARCH_DEBOUNCE;
 var SAMPLING_RATE_EMOJI_RENDERED_EXP = 20;
 // This rate is used in fetching emoji resource
 exports.SAMPLING_RATE_EMOJI_RENDERED_EXP = SAMPLING_RATE_EMOJI_RENDERED_EXP;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "67.0.7",
+	"version": "67.1.0",
 	"sideEffects": false
 }

package/dist/es2019/api/EmojiResource.js

@@ -8,7 +8,7 @@ import { ProviderTypes } from '../types';
 import EmojiLoader from './EmojiLoader';
 import EmojiRepository from './EmojiRepository';
 import SiteEmojiResource from './media/SiteEmojiResource';
-import { sampledUfoEmojiResourceFetched } from '../util/analytics/ufoExperiences';
+import { sampledUfoEmojiResourceFetched, ufoExperiences } from '../util/analytics/ufoExperiences';
 /**
  * Checks if the emojiProvider can support uploading at a feature level.
  *
@@ -284,12 +284,23 @@ export class EmojiResource extends AbstractResource {
     return optimistic;
   }
   filter(query, options) {
+    ufoExperiences['emoji-searched'].start();
+    ufoExperiences['emoji-searched'].addMetadata({
+      queryLength: (query === null || query === void 0 ? void 0 : query.length) || 0
+    });
     this.lastQuery = {
       query,
       options
     };
     if (this.emojiRepository) {
-      this.notifyResult(this.emojiRepository.search(query, options));
+      const searchResults = this.emojiRepository.search(query, options);
+      this.notifyResult(searchResults);
+      ufoExperiences['emoji-searched'].success({
+        metadata: {
+          emojisLength: searchResults.emojis.length,
+          source: (options === null || options === void 0 ? void 0 : options.source) || 'typeahead'
+        }
+      });
     } else {
       // not ready
       this.notifyNotReady();

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

@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import EmojiDeletePreview from '../common/EmojiDeletePreview';
 import EmojiUploadPicker from '../common/EmojiUploadPicker';
-import EmojiPickerListSearch from '../picker/EmojiPickerListSearch';
+import { EmojiPickerListSearch } from '../picker/EmojiPickerListSearch';
 import ToneSelector from './ToneSelector';
 import EmojiButton from './EmojiButton';
 import { messages } from '../i18n';

package/dist/es2019/components/hooks.js

@@ -1,8 +1,11 @@
 import { useRef, useEffect } from 'react';
-export function useDidMount() {
-  const didMountRef = useRef(false);
+export function useIsMounted() {
+  const isMountedRef = useRef(false);
   useEffect(() => {
-    didMountRef.current = true;
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
   }, []);
-  return didMountRef.current;
+  return isMountedRef.current;
 }

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

@@ -7,7 +7,7 @@ import { getEmojiVariation } from '../../api/EmojiRepository';
 import { supportsUploadFeature } from '../../api/EmojiResource';
 import { customCategory, defaultEmojiPickerSize, frequentCategory } from '../../util/constants';
 import { containsEmojiId, isPromise /*, isEmojiIdEqual, isEmojiLoaded*/, isEmojiDescription } from '../../util/type-helpers';
-import { SearchSort } from '../../types';
+import { SearchSort, SearchSourceTypes } from '../../types';
 import { getToneEmoji } from '../../util/filters';
 import { uploadEmoji } from '../common/UploadEmoji';
 import { createRecordSelectionDefault } from '../common/RecordSelectionDefault';
@@ -16,8 +16,8 @@ import EmojiPickerFooter from './EmojiPickerFooter';
 import EmojiPickerList from './EmojiPickerList';
 import { createAndFireEventInElementsChannel, categoryClickedEvent, closedPickerEvent, deleteBeginEvent, deleteCancelEvent, deleteConfirmEvent, openedPickerEvent, pickerClickedEvent, pickerSearchedEvent, selectedFileEvent, uploadBeginButton, uploadCancelButton, uploadConfirmButton, toneSelectorClosedEvent, ufoExperiences } from '../../util/analytics';
 import { emojiPicker } from './styles';
-import { useDidMount } from '../hooks';
 import { useEmoji } from '../../hooks/useEmoji';
+import { useIsMounted } from '../hooks';
 const FREQUENTLY_USED_MAX = 16;
 const EmojiPickerComponent = ({
   onSelection,
@@ -47,12 +47,11 @@ const EmojiPickerComponent = ({
   const emojiPickerList = useMemo(() => /*#__PURE__*/createRef(), []);
   const openTime = useRef(0);
   const isMounting = useRef(true);
-  const didMount = useDidMount();
-  const updateAfterDidMount = useRef(true);
   const previousEmojiProvider = useRef(emojiProvider);
   const currentUser = useMemo(() => {
     return emojiProvider.getCurrentUser();
   }, [emojiProvider]);
+  const isMounted = useIsMounted();
   const fireAnalytics = useCallback(analyticsEvent => {
     if (createAnalyticsEvent) {
       createAndFireEventInElementsChannel(analyticsEvent)(createAnalyticsEvent);
@@ -157,7 +156,11 @@ const EmojiPickerComponent = ({
       emojiToRender,
       searchEmoji: searchResults.emojis
     });
-  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange]);
+    fireAnalytics(pickerSearchedEvent({
+      queryLength: searchQuery.length,
+      numMatches: searchResults.emojis.length
+    }));
+  }, [frequentlyUsedEmojis, query, setStateAfterEmojiChange, fireAnalytics]);
   const onProviderChange = useMemo(() => {
     return {
       result: onSearchResult
@@ -242,22 +245,22 @@ const EmojiPickerComponent = ({
   const onFileChooserClicked = useCallback(() => {
     fireAnalytics(selectedFileEvent());
   }, [fireAnalytics]);
+  const scrollToTopOfList = useCallback(() => {
+    var _emojiPickerList$curr;
+    (_emojiPickerList$curr = emojiPickerList.current) === null || _emojiPickerList$curr === void 0 ? void 0 : _emojiPickerList$curr.scrollToTop();
+  }, [emojiPickerList]);
   const onSearch = useCallback(searchQuery => {
     const options = {
-      skinTone: selectedTone
+      skinTone: selectedTone,
+      source: SearchSourceTypes.PICKER
     };
-    if (query) {
-      ufoExperiences['emoji-searched'].start();
-      ufoExperiences['emoji-searched'].addMetadata({
-        queryLength: query.length,
-        source: 'EmojiPickerComponent'
-      });
-    }
     if (searchQuery !== query) {
       setQuery(searchQuery);
+      // scroll to top when search, which is search results section
+      scrollToTopOfList();
     }
-    updateEmojis(query, options);
-  }, [query, selectedTone, updateEmojis]);
+    updateEmojis(searchQuery, options);
+  }, [query, selectedTone, updateEmojis, scrollToTopOfList]);
   const onOpenUpload = useCallback(() => {
     // Prime upload token so it's ready when the user adds
     if (supportsUploadFeature(emojiProvider)) {
@@ -273,8 +276,8 @@ const EmojiPickerComponent = ({
     if (emojiPickerList.current) {
       // Wait a tick to ensure repaint and updated height for picker list
       window.setTimeout(() => {
-        var _emojiPickerList$curr;
-        (_emojiPickerList$curr = emojiPickerList.current) === null || _emojiPickerList$curr === void 0 ? void 0 : _emojiPickerList$curr.scrollToBottom();
+        var _emojiPickerList$curr2;
+        (_emojiPickerList$curr2 = emojiPickerList.current) === null || _emojiPickerList$curr2 === void 0 ? void 0 : _emojiPickerList$curr2.scrollToBottom();
       }, 0);
     }
   }, [emojiPickerList]);
@@ -343,11 +346,10 @@ const EmojiPickerComponent = ({
   }
   useEffect(() => {
     // componentDidMount logic
-    if (didMount && updateAfterDidMount.current) {
+    if (!isMounted) {
       onComponentDidMount();
-      updateAfterDidMount.current = false;
     }
-  }, [didMount, onComponentDidMount]);
+  }, [onComponentDidMount, isMounted]);
   useEffect(() => {
     previousEmojiProvider.current.unsubscribe(onProviderChange);
     previousEmojiProvider.current = emojiProvider;
@@ -356,26 +358,6 @@ const EmojiPickerComponent = ({
       emojiProvider.unsubscribe(onProviderChange);
     };
   }, [emojiProvider, onProviderChange]);
-  useEffect(() => {
-    // We changed provider which means we subscribed to filter results for a new subscriber.
-    // So we refresh the emoji display with onSearch and we do it here, after the new props have
-    // been set since onSearch leads to filter being called on the current emojiProvider.
-    // (Calling onSearch in a '...Will...' lifecycle method would lead to filter being called on
-    // an emojiProvider we have already unsubscribed from)
-    onSearch(query);
-  }, [emojiProvider, onSearch, query]);
-  useEffect(() => {
-    // Fire analytics event whenever query changes
-    fireAnalytics(pickerSearchedEvent({
-      queryLength: query.length,
-      numMatches: filteredEmojis.length
-    }));
-    ufoExperiences['emoji-searched'].success({
-      metadata: {
-        emojisLength: filteredEmojis.length
-      }
-    });
-  }, [filteredEmojis.length, fireAnalytics, query]);
   useEffect(() => {
     if (!frequentlyUsedEmojis.length || query) {
       setFilteredEmojis(searchEmojis);
@@ -445,7 +427,8 @@ const EmojiPickerComponent = ({
     onCloseDelete: onCloseDelete,
     onFileChooserClicked: onFileChooserClicked,
     onOpenUpload: onOpenUpload,
-    size: size
+    size: size,
+    activeCategoryId: activeCategory
   }), showPreview && jsx(EmojiPickerFooter, {
     selectedEmoji: selectedEmoji
   }));

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

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import React, { PureComponent } from 'react';
+import { createRef, PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { customCategory, defaultEmojiPickerSize, userCustomTitle } from '../../util/constants';
 import { CategoryDescriptionMap } from './categories';
@@ -11,6 +11,7 @@ import EmojiActions from '../common/EmojiActions';
 import { emojiPickerList } from './styles';
 import { emojiPickerHeightOffset } from './utils';
 import { VirtualList } from './VirtualList';
+
 /**
  * Test id for wrapper Emoji Picker List div
  */
@@ -22,14 +23,15 @@ export default class EmojiPickerVirtualList extends PureComponent {
     super(_props);
     _defineProperty(this, "virtualItems", []);
     _defineProperty(this, "categoryTracker", new CategoryTracker());
+    _defineProperty(this, "listRef", /*#__PURE__*/createRef());
     _defineProperty(this, "onEmojiMouseEnter", (emojiId, emoji) => {
       if (this.props.onEmojiActive) {
         this.props.onEmojiActive(emojiId, emoji);
       }
     });
-    _defineProperty(this, "onSearch", e => {
+    _defineProperty(this, "onSearch", value => {
       if (this.props.onSearch) {
-        this.props.onSearch(e.target.value);
+        this.props.onSearch(value);
       }
     });
     _defineProperty(this, "buildVirtualItemFromGroup", group => {
@@ -90,19 +92,7 @@ export default class EmojiPickerVirtualList extends PureComponent {
           });
         }
       }
-      const rowCountChanged = this.virtualItems.length !== items.length;
       this.virtualItems = items;
-      const list = this.refs.list;
-      if (!rowCountChanged && list) {
-        // Row count has not changed, so need to tell list to rerender.
-        list.forceUpdateGrid();
-      }
-      if (!query && list) {
-        // VirtualList can apply stale heights since it performs a shallow
-        // compare to check if the list has changed. Should manually recompute
-        // row heights for the case when frequent category come in later
-        list.recomputeRowHeights();
-      }
     });
     _defineProperty(this, "addToCategoryMap", (categoryToGroupMap, emoji, category) => {
       if (!categoryToGroupMap[category]) {
@@ -134,33 +124,15 @@ export default class EmojiPickerVirtualList extends PureComponent {
         return group;
       }).sort(byOrder);
     });
-    _defineProperty(this, "repaintList", () => {
-      if (this.refs.root) {
-        const root = this.refs.root;
-        const display = root.style.display;
-        root.style.display = 'none';
-
-        // we need to access offset to force repaint
-        // eslint-disable-next-line no-unused-expressions
-        root.offsetHeight;
-        root.style.display = display;
-      }
-    });
     _defineProperty(this, "checkCategoryIdChange", indexes => {
       const {
         startIndex
       } = indexes;
-
-      // FS-1844 Fix a rendering problem when scrolling to the top
-      if (startIndex === 0) {
-        this.repaintList();
-      }
       if (!this.props.query) {
         // Calculate category in view - only relevant if categories shown, i.e. no query
-        const list = this.refs.list;
+        const list = this.listRef.current;
         const currentCategory = this.categoryTracker.findNearestCategoryAbove(startIndex, list);
-        if (currentCategory && this.activeCategoryId !== currentCategory) {
-          this.activeCategoryId = currentCategory;
+        if (currentCategory && this.props.activeCategoryId !== currentCategory) {
           if (this.props.onCategoryActivated) {
             this.props.onCategoryActivated(currentCategory);
           }
@@ -191,12 +163,17 @@ export default class EmojiPickerVirtualList extends PureComponent {
    */
   reveal(category) {
     const row = this.categoryTracker.getRow(category);
-    const list = this.refs.list;
-    list.scrollToRow(row);
+    this.scrollToRow(row);
   }
   scrollToBottom() {
-    const list = this.refs.list;
-    list.scrollToRow(this.virtualItems.length);
+    this.scrollToRow(this.virtualItems.length);
+  }
+  scrollToTop() {
+    this.scrollToRow(0);
+  }
+  scrollToRow(index) {
+    var _this$listRef$current;
+    (_this$listRef$current = this.listRef.current) === null || _this$listRef$current === void 0 ? void 0 : _this$listRef$current.scrollToRow(index);
   }
   render() {
     const {
@@ -242,7 +219,7 @@ export default class EmojiPickerVirtualList extends PureComponent {
       query: query,
       onChange: this.onSearch
     }), jsx(VirtualList, {
-      ref: "list",
+      ref: this.listRef,
       height: virtualListHeight,
       overscanRowCount: 10,
       rowCount: this.virtualItems.length,