emoji-picker-react 4.13.3 → 4.14.0

package/dist/emoji-picker-react.esm.js

@@ -1,4 +1,4 @@
-import React__default, { memo, createElement, useState, useEffect, useContext, createContext, useRef, useMemo, createRef, useCallback, Fragment, Suspense, Component } from 'react';
+import React__default, { memo, createElement, useState, useRef, useMemo, useEffect, createContext, useContext, createRef, useCallback, Fragment, Suspense, Component } from 'react';
 import { createSheet, cx } from 'flairup';
 
 function _extends() {
@@ -190,6 +190,86 @@ function compareConfig(prev, next) {
 var DEFAULT_REACTIONS = ['1f44d', '2764-fe0f', '1f603', '1f622', '1f64f', '1f44e', '1f621' // 😡
 ];
 
+var alphaNumericEmojiIndex = {};
+setTimeout(function () {
+  allEmojis.reduce(function (searchIndex, emoji) {
+    indexEmoji(emoji);
+    return searchIndex;
+  }, alphaNumericEmojiIndex);
+});
+function indexEmoji(emoji) {
+  var joinedNameString = emojiNames(emoji).flat().join('').toLowerCase().replace(/[^a-zA-Z\d]/g, '').split('');
+  joinedNameString.forEach(function (_char) {
+    var _alphaNumericEmojiInd;
+    alphaNumericEmojiIndex[_char] = (_alphaNumericEmojiInd = alphaNumericEmojiIndex[_char]) != null ? _alphaNumericEmojiInd : {};
+    alphaNumericEmojiIndex[_char][emojiUnified(emoji)] = emoji;
+  });
+}
+
+function useDebouncedState(initialValue, delay) {
+  if (delay === void 0) {
+    delay = 0;
+  }
+  var _useState = useState(initialValue),
+    state = _useState[0],
+    setState = _useState[1];
+  var timer = useRef(null);
+  function debouncedSetState(value) {
+    return new Promise(function (resolve) {
+      var _window;
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
+      timer.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
+        setState(value);
+        resolve(value);
+      }, delay);
+    });
+  }
+  return [state, debouncedSetState];
+}
+
+function useIsUnicodeHidden() {
+  var unicodeToHide = useUnicodeToHide();
+  return function (emojiUnified) {
+    return unicodeToHide.has(emojiUnified);
+  };
+}
+
+function useDisallowedEmojis() {
+  var DisallowedEmojisRef = useRef({});
+  var emojiVersionConfig = useEmojiVersionConfig();
+  return useMemo(function () {
+    var emojiVersion = parseFloat("" + emojiVersionConfig);
+    if (!emojiVersionConfig || Number.isNaN(emojiVersion)) {
+      return DisallowedEmojisRef.current;
+    }
+    return allEmojis.reduce(function (disallowedEmojis, emoji) {
+      if (addedInNewerVersion(emoji, emojiVersion)) {
+        disallowedEmojis[emojiUnified(emoji)] = true;
+      }
+      return disallowedEmojis;
+    }, DisallowedEmojisRef.current);
+  }, [emojiVersionConfig]);
+}
+function useIsEmojiDisallowed() {
+  var disallowedEmojis = useDisallowedEmojis();
+  var isUnicodeHidden = useIsUnicodeHidden();
+  return function isEmojiDisallowed(emoji) {
+    var unified = unifiedWithoutSkinTone(emojiUnified(emoji));
+    return Boolean(disallowedEmojis[unified] || isUnicodeHidden(unified));
+  };
+}
+function addedInNewerVersion(emoji, supportedLevel) {
+  return addedIn(emoji) > supportedLevel;
+}
+
+function useMarkInitialLoad(dispatch) {
+  useEffect(function () {
+    dispatch(true);
+  }, [dispatch]);
+}
+
 var SuggestionMode;
 (function (SuggestionMode) {
   SuggestionMode["RECENT"] = "recent";
@@ -237,6 +317,128 @@ var SkinTonePickerLocation;
   SkinTonePickerLocation["PREVIEW"] = "PREVIEW";
 })(SkinTonePickerLocation || (SkinTonePickerLocation = {}));
 
+function PickerContextProvider(_ref) {
+  var children = _ref.children;
+  var disallowedEmojis = useDisallowedEmojis();
+  var defaultSkinTone = useDefaultSkinToneConfig();
+  var reactionsDefaultOpen = useReactionsOpenConfig();
+  // Initialize the filter with the inititial dictionary
+  var filterRef = useRef(alphaNumericEmojiIndex);
+  var disallowClickRef = useRef(false);
+  var disallowMouseRef = useRef(false);
+  var disallowedEmojisRef = useRef(disallowedEmojis);
+  var suggestedUpdateState = useDebouncedState(Date.now(), 200);
+  var searchTerm = useDebouncedState('', 100);
+  var skinToneFanOpenState = useState(false);
+  var activeSkinTone = useState(defaultSkinTone);
+  var activeCategoryState = useState(null);
+  var emojisThatFailedToLoadState = useState(new Set());
+  var emojiVariationPickerState = useState(null);
+  var reactionsModeState = useState(reactionsDefaultOpen);
+  var _useState = useState(false),
+    isPastInitialLoad = _useState[0],
+    setIsPastInitialLoad = _useState[1];
+  useMarkInitialLoad(setIsPastInitialLoad);
+  return createElement(PickerContext.Provider, {
+    value: {
+      activeCategoryState: activeCategoryState,
+      activeSkinTone: activeSkinTone,
+      disallowClickRef: disallowClickRef,
+      disallowMouseRef: disallowMouseRef,
+      disallowedEmojisRef: disallowedEmojisRef,
+      emojiVariationPickerState: emojiVariationPickerState,
+      emojisThatFailedToLoadState: emojisThatFailedToLoadState,
+      filterRef: filterRef,
+      isPastInitialLoad: isPastInitialLoad,
+      searchTerm: searchTerm,
+      skinToneFanOpenState: skinToneFanOpenState,
+      suggestedUpdateState: suggestedUpdateState,
+      reactionsModeState: reactionsModeState
+    }
+  }, children);
+}
+var PickerContext = /*#__PURE__*/createContext({
+  activeCategoryState: [null, function () {}],
+  activeSkinTone: [SkinTones.NEUTRAL, function () {}],
+  disallowClickRef: {
+    current: false
+  },
+  disallowMouseRef: {
+    current: false
+  },
+  disallowedEmojisRef: {
+    current: {}
+  },
+  emojiVariationPickerState: [null, function () {}],
+  emojisThatFailedToLoadState: [/*#__PURE__*/new Set(), function () {}],
+  filterRef: {
+    current: {}
+  },
+  isPastInitialLoad: true,
+  searchTerm: ['', function () {
+    return new Promise(function () {
+      return undefined;
+    });
+  }],
+  skinToneFanOpenState: [false, function () {}],
+  suggestedUpdateState: [/*#__PURE__*/Date.now(), function () {}],
+  reactionsModeState: [false, function () {}]
+});
+function useFilterRef() {
+  var _React$useContext = useContext(PickerContext),
+    filterRef = _React$useContext.filterRef;
+  return filterRef;
+}
+function useDisallowClickRef() {
+  var _React$useContext2 = useContext(PickerContext),
+    disallowClickRef = _React$useContext2.disallowClickRef;
+  return disallowClickRef;
+}
+function useDisallowMouseRef() {
+  var _React$useContext3 = useContext(PickerContext),
+    disallowMouseRef = _React$useContext3.disallowMouseRef;
+  return disallowMouseRef;
+}
+function useReactionsModeState() {
+  var _React$useContext4 = useContext(PickerContext),
+    reactionsModeState = _React$useContext4.reactionsModeState;
+  return reactionsModeState;
+}
+function useSearchTermState() {
+  var _React$useContext5 = useContext(PickerContext),
+    searchTerm = _React$useContext5.searchTerm;
+  return searchTerm;
+}
+function useActiveSkinToneState() {
+  var _React$useContext6 = useContext(PickerContext),
+    activeSkinTone = _React$useContext6.activeSkinTone;
+  return activeSkinTone;
+}
+function useEmojisThatFailedToLoadState() {
+  var _React$useContext7 = useContext(PickerContext),
+    emojisThatFailedToLoadState = _React$useContext7.emojisThatFailedToLoadState;
+  return emojisThatFailedToLoadState;
+}
+function useEmojiVariationPickerState() {
+  var _React$useContext9 = useContext(PickerContext),
+    emojiVariationPickerState = _React$useContext9.emojiVariationPickerState;
+  return emojiVariationPickerState;
+}
+function useSkinToneFanOpenState() {
+  var _React$useContext10 = useContext(PickerContext),
+    skinToneFanOpenState = _React$useContext10.skinToneFanOpenState;
+  return skinToneFanOpenState;
+}
+function useUpdateSuggested() {
+  var _React$useContext12 = useContext(PickerContext),
+    suggestedUpdateState = _React$useContext12.suggestedUpdateState;
+  var suggestedUpdated = suggestedUpdateState[0],
+    setsuggestedUpdate = suggestedUpdateState[1];
+  return [suggestedUpdated, function updateSuggested() {
+    setsuggestedUpdate(Date.now());
+  }];
+}
+
 var _configByCategory;
 var categoriesOrdered = [Categories.SUGGESTED, Categories.CUSTOM, Categories.SMILEYS_PEOPLE, Categories.ANIMALS_NATURE, Categories.FOOD_DRINK, Categories.TRAVEL_PLACES, Categories.ACTIVITIES, Categories.OBJECTS, Categories.SYMBOLS, Categories.FLAGS];
 var SuggestedRecent = {
@@ -17164,56 +17366,107 @@ var EmojiProperties;
   EmojiProperties["imgUrl"] = "imgUrl";
 })(EmojiProperties || (EmojiProperties = {}));
 
-var alphaNumericEmojiIndex = {};
-setTimeout(function () {
-  allEmojis.reduce(function (searchIndex, emoji) {
-    indexEmoji(emoji);
-    return searchIndex;
-  }, alphaNumericEmojiIndex);
-});
-function indexEmoji(emoji) {
-  var joinedNameString = emojiNames(emoji).flat().join('').toLowerCase().replace(/[^a-zA-Z\d]/g, '').split('');
-  joinedNameString.forEach(function (_char) {
-    var _alphaNumericEmojiInd;
-    alphaNumericEmojiIndex[_char] = (_alphaNumericEmojiInd = alphaNumericEmojiIndex[_char]) != null ? _alphaNumericEmojiInd : {};
-    alphaNumericEmojiIndex[_char][emojiUnified(emoji)] = emoji;
-  });
-}
-
-function emojiNames(emoji) {
-  var _emoji$EmojiPropertie;
-  return (_emoji$EmojiPropertie = emoji[EmojiProperties.name]) != null ? _emoji$EmojiPropertie : [];
-}
-function addedIn(emoji) {
-  return parseFloat(emoji[EmojiProperties.added_in]);
-}
-function emojiName(emoji) {
-  if (!emoji) {
-    return '';
-  }
-  return emojiNames(emoji)[0];
-}
-function unifiedWithoutSkinTone(unified) {
-  var splat = unified.split('-');
-  var _splat$splice = splat.splice(1, 1),
-    skinTone = _splat$splice[0];
-  if (skinTonesMapped[skinTone]) {
-    return splat.join('-');
+var SUGGESTED_LS_KEY = 'epr_suggested';
+function getSuggested(mode) {
+  try {
+    var _window, _window$localStorage$, _window2;
+    if (!((_window = window) != null && _window.localStorage)) {
+      return [];
+    }
+    var recent = JSON.parse((_window$localStorage$ = (_window2 = window) == null ? void 0 : _window2.localStorage.getItem(SUGGESTED_LS_KEY)) != null ? _window$localStorage$ : '[]');
+    if (mode === SuggestionMode.FREQUENT) {
+      return recent.sort(function (a, b) {
+        return b.count - a.count;
+      });
+    }
+    return recent;
+  } catch (_unused) {
+    return [];
   }
-  return unified;
 }
-function emojiUnified(emoji, skinTone) {
-  var _emojiVariationUnifie;
+function setSuggested(emoji, skinTone) {
+  var recent = getSuggested();
+  var unified = emojiUnified(emoji, skinTone);
+  var originalUnified = emojiUnified(emoji);
+  var existing = recent.find(function (_ref) {
+    var u = _ref.unified;
+    return u === unified;
+  });
+  var nextList;
+  if (existing) {
+    nextList = [existing].concat(recent.filter(function (i) {
+      return i !== existing;
+    }));
+  } else {
+    existing = {
+      unified: unified,
+      original: originalUnified,
+      count: 0
+    };
+    nextList = [existing].concat(recent);
+  }
+  existing.count++;
+  nextList.length = Math.min(nextList.length, 14);
+  try {
+    var _window3;
+    (_window3 = window) == null ? void 0 : _window3.localStorage.setItem(SUGGESTED_LS_KEY, JSON.stringify(nextList));
+    // Prevents the change from being seen immediately.
+  } catch (_unused2) {
+    // ignore
+  }
+}
+
+function emojiNames(emoji) {
+  var _emoji$EmojiPropertie;
+  return (_emoji$EmojiPropertie = emoji[EmojiProperties.name]) != null ? _emoji$EmojiPropertie : [];
+}
+function addedIn(emoji) {
+  return parseFloat(emoji[EmojiProperties.added_in]);
+}
+function emojiName(emoji) {
+  if (!emoji) {
+    return '';
+  }
+  return emojiNames(emoji)[0];
+}
+function unifiedWithoutSkinTone(unified) {
+  var splat = unified.split('-');
+  var _splat$splice = splat.splice(1, 1),
+    skinTone = _splat$splice[0];
+  if (skinTonesMapped[skinTone]) {
+    return splat.join('-');
+  }
+  return unified;
+}
+function emojiUnified(emoji, skinTone) {
+  var _emojiVariationUnifie;
   var unified = emoji[EmojiProperties.unified];
   if (!skinTone || !emojiHasVariations(emoji)) {
     return unified;
   }
   return (_emojiVariationUnifie = emojiVariationUnified(emoji, skinTone)) != null ? _emojiVariationUnifie : unified;
 }
-function emojisByCategory(category) {
-  var _emojis$category;
-  // @ts-ignore
-  return (_emojis$category = emojis == null ? void 0 : emojis[category]) != null ? _emojis$category : [];
+function useGetEmojisByCategory() {
+  var suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
+  var _useUpdateSuggested = useUpdateSuggested(),
+    suggestedUpdated = _useUpdateSuggested[0];
+  var suggested = React__default.useMemo(function () {
+    var _getSuggested;
+    var suggested = (_getSuggested = getSuggested(suggestedEmojisModeConfig)) != null ? _getSuggested : [];
+    return suggested.map(function (s) {
+      return emojiByUnified(s.unified);
+    }).filter(Boolean);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [suggestedUpdated, suggestedEmojisModeConfig]);
+  return function getEmojisByCategory(category) {
+    var _emojis$category;
+    if (category === Categories.SUGGESTED) {
+      return suggested;
+    }
+    // @ts-ignore
+    return (_emojis$category = emojis[category]) != null ? _emojis$category : [];
+  };
 }
 // WARNING: DO NOT USE DIRECTLY
 function emojiUrlByUnified(unified, emojiStyle) {
@@ -17374,197 +17627,6 @@ function usePickerConfig() {
   return useContext(ConfigContext);
 }
 
-function useDebouncedState(initialValue, delay) {
-  if (delay === void 0) {
-    delay = 0;
-  }
-  var _useState = useState(initialValue),
-    state = _useState[0],
-    setState = _useState[1];
-  var timer = useRef(null);
-  function debouncedSetState(value) {
-    return new Promise(function (resolve) {
-      var _window;
-      if (timer.current) {
-        clearTimeout(timer.current);
-      }
-      timer.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
-        setState(value);
-        resolve(value);
-      }, delay);
-    });
-  }
-  return [state, debouncedSetState];
-}
-
-function useIsUnicodeHidden() {
-  var unicodeToHide = useUnicodeToHide();
-  return function (emojiUnified) {
-    return unicodeToHide.has(emojiUnified);
-  };
-}
-
-function useDisallowedEmojis() {
-  var DisallowedEmojisRef = useRef({});
-  var emojiVersionConfig = useEmojiVersionConfig();
-  return useMemo(function () {
-    var emojiVersion = parseFloat("" + emojiVersionConfig);
-    if (!emojiVersionConfig || Number.isNaN(emojiVersion)) {
-      return DisallowedEmojisRef.current;
-    }
-    return allEmojis.reduce(function (disallowedEmojis, emoji) {
-      if (addedInNewerVersion(emoji, emojiVersion)) {
-        disallowedEmojis[emojiUnified(emoji)] = true;
-      }
-      return disallowedEmojis;
-    }, DisallowedEmojisRef.current);
-  }, [emojiVersionConfig]);
-}
-function useIsEmojiDisallowed() {
-  var disallowedEmojis = useDisallowedEmojis();
-  var isUnicodeHidden = useIsUnicodeHidden();
-  return function isEmojiDisallowed(emoji) {
-    var unified = unifiedWithoutSkinTone(emojiUnified(emoji));
-    return Boolean(disallowedEmojis[unified] || isUnicodeHidden(unified));
-  };
-}
-function addedInNewerVersion(emoji, supportedLevel) {
-  return addedIn(emoji) > supportedLevel;
-}
-
-function useMarkInitialLoad(dispatch) {
-  useEffect(function () {
-    dispatch(true);
-  }, [dispatch]);
-}
-
-function PickerContextProvider(_ref) {
-  var children = _ref.children;
-  var disallowedEmojis = useDisallowedEmojis();
-  var defaultSkinTone = useDefaultSkinToneConfig();
-  var reactionsDefaultOpen = useReactionsOpenConfig();
-  // Initialize the filter with the inititial dictionary
-  var filterRef = useRef(alphaNumericEmojiIndex);
-  var disallowClickRef = useRef(false);
-  var disallowMouseRef = useRef(false);
-  var disallowedEmojisRef = useRef(disallowedEmojis);
-  var suggestedUpdateState = useDebouncedState(Date.now(), 200);
-  var searchTerm = useDebouncedState('', 100);
-  var skinToneFanOpenState = useState(false);
-  var activeSkinTone = useState(defaultSkinTone);
-  var activeCategoryState = useState(null);
-  var emojisThatFailedToLoadState = useState(new Set());
-  var emojiVariationPickerState = useState(null);
-  var reactionsModeState = useState(reactionsDefaultOpen);
-  var _useState = useState(false),
-    isPastInitialLoad = _useState[0],
-    setIsPastInitialLoad = _useState[1];
-  useMarkInitialLoad(setIsPastInitialLoad);
-  return createElement(PickerContext.Provider, {
-    value: {
-      activeCategoryState: activeCategoryState,
-      activeSkinTone: activeSkinTone,
-      disallowClickRef: disallowClickRef,
-      disallowMouseRef: disallowMouseRef,
-      disallowedEmojisRef: disallowedEmojisRef,
-      emojiVariationPickerState: emojiVariationPickerState,
-      emojisThatFailedToLoadState: emojisThatFailedToLoadState,
-      filterRef: filterRef,
-      isPastInitialLoad: isPastInitialLoad,
-      searchTerm: searchTerm,
-      skinToneFanOpenState: skinToneFanOpenState,
-      suggestedUpdateState: suggestedUpdateState,
-      reactionsModeState: reactionsModeState
-    }
-  }, children);
-}
-var PickerContext = /*#__PURE__*/createContext({
-  activeCategoryState: [null, function () {}],
-  activeSkinTone: [SkinTones.NEUTRAL, function () {}],
-  disallowClickRef: {
-    current: false
-  },
-  disallowMouseRef: {
-    current: false
-  },
-  disallowedEmojisRef: {
-    current: {}
-  },
-  emojiVariationPickerState: [null, function () {}],
-  emojisThatFailedToLoadState: [/*#__PURE__*/new Set(), function () {}],
-  filterRef: {
-    current: {}
-  },
-  isPastInitialLoad: true,
-  searchTerm: ['', function () {
-    return new Promise(function () {
-      return undefined;
-    });
-  }],
-  skinToneFanOpenState: [false, function () {}],
-  suggestedUpdateState: [/*#__PURE__*/Date.now(), function () {}],
-  reactionsModeState: [false, function () {}]
-});
-function useFilterRef() {
-  var _React$useContext = useContext(PickerContext),
-    filterRef = _React$useContext.filterRef;
-  return filterRef;
-}
-function useDisallowClickRef() {
-  var _React$useContext2 = useContext(PickerContext),
-    disallowClickRef = _React$useContext2.disallowClickRef;
-  return disallowClickRef;
-}
-function useDisallowMouseRef() {
-  var _React$useContext3 = useContext(PickerContext),
-    disallowMouseRef = _React$useContext3.disallowMouseRef;
-  return disallowMouseRef;
-}
-function useReactionsModeState() {
-  var _React$useContext4 = useContext(PickerContext),
-    reactionsModeState = _React$useContext4.reactionsModeState;
-  return reactionsModeState;
-}
-function useSearchTermState() {
-  var _React$useContext5 = useContext(PickerContext),
-    searchTerm = _React$useContext5.searchTerm;
-  return searchTerm;
-}
-function useActiveSkinToneState() {
-  var _React$useContext6 = useContext(PickerContext),
-    activeSkinTone = _React$useContext6.activeSkinTone;
-  return activeSkinTone;
-}
-function useEmojisThatFailedToLoadState() {
-  var _React$useContext7 = useContext(PickerContext),
-    emojisThatFailedToLoadState = _React$useContext7.emojisThatFailedToLoadState;
-  return emojisThatFailedToLoadState;
-}
-function useIsPastInitialLoad() {
-  var _React$useContext8 = useContext(PickerContext),
-    isPastInitialLoad = _React$useContext8.isPastInitialLoad;
-  return isPastInitialLoad;
-}
-function useEmojiVariationPickerState() {
-  var _React$useContext9 = useContext(PickerContext),
-    emojiVariationPickerState = _React$useContext9.emojiVariationPickerState;
-  return emojiVariationPickerState;
-}
-function useSkinToneFanOpenState() {
-  var _React$useContext10 = useContext(PickerContext),
-    skinToneFanOpenState = _React$useContext10.skinToneFanOpenState;
-  return skinToneFanOpenState;
-}
-function useUpdateSuggested() {
-  var _React$useContext12 = useContext(PickerContext),
-    suggestedUpdateState = _React$useContext12.suggestedUpdateState;
-  var suggestedUpdated = suggestedUpdateState[0],
-    setsuggestedUpdate = suggestedUpdateState[1];
-  return [suggestedUpdated, function updateSuggested() {
-    setsuggestedUpdate(Date.now());
-  }];
-}
-
 var MutableConfigContext = /*#__PURE__*/React__default.createContext({});
 function useMutableConfig() {
   var mutableConfig = React__default.useContext(MutableConfigContext);
@@ -17799,6 +17861,7 @@ function ElementRefContextProvider(_ref) {
   var PickerMainRef = useRef(null);
   var AnchoredEmojiRef = useRef(null);
   var BodyRef = useRef(null);
+  var EmojiListRef = useRef(null);
   var SearchInputRef = useRef(null);
   var SkinTonePickerRef = useRef(null);
   var CategoryNavigationRef = useRef(null);
@@ -17808,6 +17871,7 @@ function ElementRefContextProvider(_ref) {
     value: {
       AnchoredEmojiRef: AnchoredEmojiRef,
       BodyRef: BodyRef,
+      EmojiListRef: EmojiListRef,
       CategoryNavigationRef: CategoryNavigationRef,
       PickerMainRef: PickerMainRef,
       SearchInputRef: SearchInputRef,
@@ -17821,6 +17885,7 @@ var ElementRefContext = /*#__PURE__*/createContext({
   AnchoredEmojiRef: /*#__PURE__*/createRef(),
   BodyRef: /*#__PURE__*/createRef(),
   CategoryNavigationRef: /*#__PURE__*/createRef(),
+  EmojiListRef: /*#__PURE__*/createRef(),
   PickerMainRef: /*#__PURE__*/createRef(),
   SearchInputRef: /*#__PURE__*/createRef(),
   SkinTonePickerRef: /*#__PURE__*/createRef(),
@@ -17830,6 +17895,9 @@ var ElementRefContext = /*#__PURE__*/createContext({
 function useElementRef() {
   return useContext(ElementRefContext);
 }
+function useEmojiListRef() {
+  return useElementRef()['EmojiListRef'];
+}
 function usePickerMainRef() {
   return useElementRef()['PickerMainRef'];
 }
@@ -17966,38 +18034,67 @@ function visibleEmojiOneRowUp(element) {
   }
   var categoryContent = closestCategoryContent(element);
   var category = closestCategory(categoryContent);
-  var indexInRow = elementIndexInRow(categoryContent, element);
-  var row = rowNumber(categoryContent, element);
   var countInRow = elementCountInRow(categoryContent, element);
-  if (row === 0) {
-    var prevVisibleCategory = prevCategory(category);
-    if (!prevVisibleCategory) {
-      return null;
+  var emojisInCurrentCategory = allVisibleEmojis(category);
+  var currentEmojiIndex = emojisInCurrentCategory.indexOf(element);
+  var indexInRow = currentEmojiIndex % countInRow;
+  if (currentEmojiIndex === -1) {
+    return null;
+  }
+  if (emojisInCurrentCategory[currentEmojiIndex - countInRow]) {
+    return emojisInCurrentCategory[currentEmojiIndex - countInRow];
+  }
+  var prevVisibleCategory = prevCategory(category);
+  if (!prevVisibleCategory) {
+    return null;
+  }
+  var allPrevEmojis = allVisibleEmojis(prevVisibleCategory);
+  // if there is an emoji in the same index of `indexInRow` in the previous category, return it
+  // for this we need to find the last emoji in the previous category that shares the same indexInRow
+  // this is by using the % operator to find the last emoji that matches
+  var lastIndexInRow = allPrevEmojis.length % countInRow - 1;
+  if (indexInRow > lastIndexInRow) {
+    return allPrevEmojis.at(-1);
+  }
+  // otherwise, return the last emoji that shares the same indexInRow
+  for (var i = allPrevEmojis.length - 1; i >= 0; i--) {
+    if (i % countInRow === indexInRow) {
+      return allPrevEmojis[i];
     }
-    return getElementInRow(allVisibleEmojis(prevVisibleCategory), -1,
-    // last row
-    countInRow, indexInRow);
   }
-  return getElementInPrevRow(allVisibleEmojis(categoryContent), row, countInRow, indexInRow);
+  return allPrevEmojis.at(-1);
 }
 function visibleEmojiOneRowDown(element) {
+  var _emojisInNextCategory;
   if (!element) {
     return null;
   }
   var categoryContent = closestCategoryContent(element);
   var category = closestCategory(categoryContent);
-  var indexInRow = elementIndexInRow(categoryContent, element);
-  var row = rowNumber(categoryContent, element);
   var countInRow = elementCountInRow(categoryContent, element);
-  if (!hasNextRow(categoryContent, element)) {
-    var nextVisibleCategory = nextCategory(category);
-    if (!nextVisibleCategory) {
-      return null;
+  var emojisInCurrentCategory = allVisibleEmojis(category);
+  var currentEmojiIndex = emojisInCurrentCategory.indexOf(element);
+  if (currentEmojiIndex === -1) {
+    return null;
+  }
+  // the remainder until the end of the row
+  var remainder = countInRow - currentEmojiIndex % countInRow - 1;
+  var firstInNextRow = currentEmojiIndex + remainder + 1;
+  if (emojisInCurrentCategory[firstInNextRow]) {
+    // if we have a next row, search in the next row for the last available emoji
+    for (var p = currentEmojiIndex + countInRow; p % countInRow >= 0; p--) {
+      if (emojisInCurrentCategory[p]) {
+        return emojisInCurrentCategory[p];
+      }
     }
-    return getElementInRow(allVisibleEmojis(nextVisibleCategory), 0, countInRow, indexInRow);
   }
-  var itemInNextRow = getElementInNextRow(allVisibleEmojis(categoryContent), row, countInRow, indexInRow);
-  return itemInNextRow;
+  var indexInRow = currentEmojiIndex % countInRow;
+  var nextVisibleCategory = nextCategory(category);
+  var emojisInNextCategory = allVisibleEmojis(nextVisibleCategory);
+  if (emojisInNextCategory[indexInRow]) {
+    return emojisInNextCategory[indexInRow];
+  }
+  return (_emojisInNextCategory = emojisInNextCategory.at(0)) != null ? _emojisInNextCategory : null;
 }
 
 function useCloseAllOpenToggles() {
@@ -18065,19 +18162,6 @@ function useOnMouseMove() {
   }, [BodyRef, allowMouseMove, isMouseDisallowed]);
 }
 
-function doesBrowserSupportCssHas() {
-  // if env is not browser:
-  if (typeof window === 'undefined' || typeof window.CSS === 'undefined') {
-    return false;
-  }
-  try {
-    return CSS.supports('selector(:has(*))');
-  } catch (e) {
-    return false;
-  }
-}
-var browserSupportsCssHas = /*#__PURE__*/doesBrowserSupportCssHas();
-
 function useFocusSearchInput() {
   var SearchInputRef = useSearchInputRef();
   return useCallback(function () {
@@ -18151,27 +18235,22 @@ function useFilter() {
     statusSearchResults: statusSearchResults
   };
   function onChange(inputValue) {
-    if (browserSupportsCssHas) {
-      return;
+    var filter = filterRef.current;
+    var nextValue = inputValue.toLowerCase();
+    if (filter != null && filter[nextValue] || nextValue.length <= 1) {
+      return applySearch(nextValue);
     }
-    setTimeout(function () {
-      var filter = filterRef.current;
-      var nextValue = inputValue.toLowerCase();
-      if (filter != null && filter[nextValue] || nextValue.length <= 1) {
-        return applySearch(nextValue);
-      }
-      var longestMatch = findLongestMatch(nextValue, filter);
-      if (!longestMatch) {
-        // Can we even get here?
-        // If so, we need to search among all emojis
-        return applySearch(nextValue);
-      }
-      setFilterRef(function (current) {
-        var _Object$assign;
-        return Object.assign(current, (_Object$assign = {}, _Object$assign[nextValue] = filterEmojiObjectByKeyword(longestMatch, nextValue), _Object$assign));
-      });
-      applySearch(nextValue);
+    var longestMatch = findLongestMatch(nextValue, filter);
+    if (!longestMatch) {
+      // Can we even get here?
+      // If so, we need to search among all emojis
+      return applySearch(nextValue);
+    }
+    setFilterRef(function (current) {
+      var _Object$assign;
+      return Object.assign(current, (_Object$assign = {}, _Object$assign[nextValue] = filterEmojiObjectByKeyword(longestMatch, nextValue), _Object$assign));
     });
+    applySearch(nextValue);
   }
 }
 function useApplySearch() {
@@ -18615,22 +18694,44 @@ function hasModifier(event) {
   return metaKey || ctrlKey || altKey;
 }
 
-function preloadEmoji(getEmojiUrl, emoji, emojiStyle) {
+// eslint-disable-next-line max-params
+function preloaEmojidIfNeeded(emoji, emojiStyles, scrollTop, clientHeight, topOffset, style, dimensions, getEmojiUrl) {
   if (!emoji) {
     return;
   }
-  if (emojiStyle === EmojiStyle.NATIVE) {
+  if (emojiStyles === EmojiStyle.NATIVE) {
+    return;
+  }
+  var unified = emojiUnified(emoji);
+  if (preloadedEmojs.has(unified)) {
+    return;
+  }
+  // preload only if the emoji is a few rows below the viewport
+  if (!style || !dimensions) {
+    return;
+  }
+  setTimeout(function () {
+    var emojiTop = topOffset + style.top;
+    var viewportBottom = scrollTop + clientHeight;
+    var isJustBelowViewport = emojiTop >= viewportBottom && emojiTop < viewportBottom + dimensions.emojiSize * 2;
+    if (isJustBelowViewport) {
+      preloadEmoji(getEmojiUrl, emoji, emojiStyles);
+    }
+  });
+}
+function preloadEmoji(getEmojiUrl, emoji, emojiStyle) {
+  if (!emoji) {
     return;
   }
   var unified = emojiUnified(emoji);
   if (preloadedEmojs.has(unified)) {
     return;
   }
-  emojiVariations(emoji).forEach(function (variation) {
+  preloadedEmojs.add(unified);
+  emojiVariations(emoji).concat(unified).forEach(function (variation) {
     var emojiUrl = getEmojiUrl(variation, emojiStyle);
     preloadImage(emojiUrl);
   });
-  preloadedEmojs.add(unified);
 }
 var preloadedEmojs = /*#__PURE__*/new Set();
 function preloadImage(url) {
@@ -18730,7 +18831,7 @@ var styles = /*#__PURE__*/stylesheet.create({
     borderColor: 'var(--epr-picker-border-color)',
     backgroundColor: 'var(--epr-bg-color)',
     overflow: 'hidden',
-    transition: 'all 0.3s ease-in-out, background-color 0.1s ease-in-out',
+    transition: 'height 0.3s ease-in-out, background-color 0.1s ease-in-out',
     '*': {
       boxSizing: 'border-box',
       fontFamily: 'sans-serif'
@@ -18850,65 +18951,6 @@ function elementCountInRow(parent, element) {
   var elementWidth = element.getBoundingClientRect().width;
   return Math.floor(parentWidth / elementWidth);
 }
-function elementIndexInRow(parent, element) {
-  if (!parent || !element) {
-    return 0;
-  }
-  var elementWidth = element.getBoundingClientRect().width;
-  var elementLeft = element.getBoundingClientRect().left;
-  var parentLeft = parent.getBoundingClientRect().left;
-  return Math.floor((elementLeft - parentLeft) / elementWidth);
-}
-function rowNumber(parent, element) {
-  if (!parent || !element) {
-    return 0;
-  }
-  var elementHeight = element.getBoundingClientRect().height;
-  var elementTop = element.getBoundingClientRect().top;
-  var parentTop = parent.getBoundingClientRect().top;
-  return Math.round((elementTop - parentTop) / elementHeight);
-}
-function hasNextRow(parent, element) {
-  if (!parent || !element) {
-    return false;
-  }
-  var elementHeight = element.getBoundingClientRect().height;
-  var elementTop = element.getBoundingClientRect().top;
-  var parentTop = parent.getBoundingClientRect().top;
-  var parentHeight = parent.getBoundingClientRect().height;
-  return Math.round(elementTop - parentTop + elementHeight) < parentHeight;
-}
-function getRowElements(elements, row, elementsInRow) {
-  if (row === -1) {
-    var lastRow = Math.floor((elements.length - 1) / elementsInRow);
-    var firstElementIndex = lastRow * elementsInRow;
-    var lastElementIndex = elements.length - 1;
-    return elements.slice(firstElementIndex, lastElementIndex + 1);
-  }
-  return elements.slice(row * elementsInRow, (row + 1) * elementsInRow);
-}
-function getNextRowElements(allElements, currentRow, elementsInRow) {
-  var nextRow = currentRow + 1;
-  if (nextRow * elementsInRow > allElements.length) {
-    return [];
-  }
-  return getRowElements(allElements, nextRow, elementsInRow);
-}
-function getElementInRow(elements, row, elementsInRow, indexInRow) {
-  var rowElements = getRowElements(elements, row, elementsInRow);
-  // get element, default to last
-  return rowElements[indexInRow] || rowElements[rowElements.length - 1] || null;
-}
-function getElementInNextRow(allElements, currentRow, elementsInRow, index) {
-  var nextRowElements = getNextRowElements(allElements, currentRow, elementsInRow);
-  // return item in index, or last item in row
-  return nextRowElements[index] || nextRowElements[nextRowElements.length - 1] || null;
-}
-function getElementInPrevRow(allElements, currentRow, elementsInRow, index) {
-  var prevRowElements = getRowElements(allElements, currentRow - 1, elementsInRow);
-  // default to last
-  return prevRowElements[index] || prevRowElements[prevRowElements.length - 1] || null;
-}
 function firstVisibleElementInContainer(parent, elements, maxVisibilityDiffThreshold) {
   if (maxVisibilityDiffThreshold === void 0) {
     maxVisibilityDiffThreshold = 0;
@@ -18936,15 +18978,17 @@ function hasNextElementSibling(element) {
   return !!element.nextElementSibling;
 }
 function getLabelHeight(parentNode) {
-  var labels = Array.from(parentNode.querySelectorAll(asSelectors(ClassNames.label)));
-  for (var _i = 0, _labels = labels; _i < _labels.length; _i++) {
-    var label = _labels[_i];
+  if (!parentNode) {
+    return DEFAULT_LABEL_HEIGHT;
+  }
+  var label = parentNode.querySelector(asSelectors(ClassNames.label));
+  if (label) {
     var height = label.getBoundingClientRect().height;
-    // return height if label is not hidden
     if (height > 0) {
       return height;
     }
   }
+  // fallback to default
   return DEFAULT_LABEL_HEIGHT;
 }
 
@@ -19160,56 +19204,6 @@ function parseNativeEmoji(unified) {
   }).join('');
 }
 
-var SUGGESTED_LS_KEY = 'epr_suggested';
-function getSuggested(mode) {
-  try {
-    var _window, _window$localStorage$, _window2;
-    if (!((_window = window) != null && _window.localStorage)) {
-      return [];
-    }
-    var recent = JSON.parse((_window$localStorage$ = (_window2 = window) == null ? void 0 : _window2.localStorage.getItem(SUGGESTED_LS_KEY)) != null ? _window$localStorage$ : '[]');
-    if (mode === SuggestionMode.FREQUENT) {
-      return recent.sort(function (a, b) {
-        return b.count - a.count;
-      });
-    }
-    return recent;
-  } catch (_unused) {
-    return [];
-  }
-}
-function setSuggested(emoji, skinTone) {
-  var recent = getSuggested();
-  var unified = emojiUnified(emoji, skinTone);
-  var originalUnified = emojiUnified(emoji);
-  var existing = recent.find(function (_ref) {
-    var u = _ref.unified;
-    return u === unified;
-  });
-  var nextList;
-  if (existing) {
-    nextList = [existing].concat(recent.filter(function (i) {
-      return i !== existing;
-    }));
-  } else {
-    existing = {
-      unified: unified,
-      original: originalUnified,
-      count: 0
-    };
-    nextList = [existing].concat(recent);
-  }
-  existing.count++;
-  nextList.length = Math.min(nextList.length, 14);
-  try {
-    var _window3;
-    (_window3 = window) == null ? void 0 : _window3.localStorage.setItem(SUGGESTED_LS_KEY, JSON.stringify(nextList));
-    // Prevents the change from being seen immediately.
-  } catch (_unused2) {
-    // ignore
-  }
-}
-
 function isCustomCategory(category) {
   return category.category === Categories.CUSTOM;
 }
@@ -19372,12 +19366,14 @@ function ClickableEmojiButton(_ref) {
     children = _ref.children,
     className = _ref.className,
     _ref$noBackground = _ref.noBackground,
-    noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground;
+    noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground,
+    style = _ref.style;
   return createElement(Button, {
     className: cx(styles$2.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$2.hasVariations, noBackground && styles$2.noBackground, className),
     "data-unified": unified,
     "aria-label": getAriaLabel(emojiNames),
-    "data-full-name": emojiNames
+    "data-full-name": emojiNames,
+    style: style
   }, children);
 }
 function getAriaLabel(emojiNames) {
@@ -19567,7 +19563,8 @@ function ClickableEmoji(_ref) {
     getEmojiUrl = _ref.getEmojiUrl,
     className = _ref.className,
     _ref$noBackground = _ref.noBackground,
-    noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground;
+    noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground,
+    style = _ref.style;
   var hasVariations = emojiHasVariations(emoji);
   return createElement(ClickableEmojiButton, {
     hasVariations: hasVariations,
@@ -19576,7 +19573,8 @@ function ClickableEmoji(_ref) {
     hiddenOnSearch: hiddenOnSearch,
     emojiNames: emojiNames(emoji),
     unified: unified,
-    noBackground: noBackground
+    noBackground: noBackground,
+    style: style
   }, createElement(ViewOnlyEmoji, {
     unified: unified,
     emoji: emoji,
@@ -19706,6 +19704,9 @@ var styles$6 = /*#__PURE__*/stylesheet.create({
 
 function useOnScroll(BodyRef) {
   var closeAllOpenToggles = useCloseAllOpenToggles();
+  var _useState = useState(0),
+    scrollTop = _useState[0],
+    setScrollTop = _useState[1];
   useEffect(function () {
     var bodyRef = BodyRef.current;
     if (!bodyRef) {
@@ -19715,12 +19716,99 @@ function useOnScroll(BodyRef) {
       passive: true
     });
     function onScroll() {
+      var _bodyRef$scrollTop;
+      setScrollTop((_bodyRef$scrollTop = bodyRef == null ? void 0 : bodyRef.scrollTop) != null ? _bodyRef$scrollTop : 0);
       closeAllOpenToggles();
     }
     return function () {
       bodyRef == null ? void 0 : bodyRef.removeEventListener('scroll', onScroll);
     };
   }, [BodyRef, closeAllOpenToggles]);
+  return scrollTop;
+}
+
+function shouldVirtualize(_ref) {
+  var scrollTop = _ref.scrollTop,
+    clientHeight = _ref.clientHeight,
+    topOffset = _ref.topOffset,
+    style = _ref.style,
+    dimensions = _ref.dimensions;
+  if (!style || !dimensions) {
+    return false;
+  }
+  var emojiTop = topOffset + style.top;
+  var emojiBottom = emojiTop + dimensions.emojiSize;
+  var isVisible = emojiBottom + dimensions.emojiSize * 2 >= scrollTop && emojiTop <= scrollTop + clientHeight + dimensions.emojiSize;
+  return !isVisible;
+}
+function getEmojiPositionStyle(dimensions, index) {
+  return dimensions ? {
+    top: Math.floor(index / dimensions.emojisPerRow) * dimensions.emojiSize,
+    left: index % dimensions.emojisPerRow * dimensions.emojiSize
+  } : undefined;
+}
+
+var EMOJI_SIZE_DEFAULT = 32;
+function useCategoryHeight(emojiCount) {
+  var EmojiListRef = useEmojiListRef();
+  var _useReactionsModeStat = useReactionsModeState(),
+    isReactionsMode = _useReactionsModeStat[0];
+  var PickerMainRef = usePickerMainRef();
+  var emojiSizeRef = useRef();
+  var _React$useState = useState(),
+    dimensions = _React$useState[0],
+    setDimensions = _React$useState[1];
+  // Helper to compute and store dimensions based on current DOM
+  var computeAndSetDimensions = useCallback(function () {
+    var _ref;
+    var listEl = EmojiListRef.current;
+    if (!listEl) return;
+    var emojiElement = listEl.querySelector(EmojiButtonSelector);
+    var measured = emojiElement == null ? void 0 : emojiElement.clientHeight;
+    var emojiSize = (_ref = measured != null ? measured : emojiSizeRef.current) != null ? _ref : EMOJI_SIZE_DEFAULT;
+    emojiSizeRef.current = emojiSize;
+    var pickerWidth = listEl.clientWidth;
+    if (pickerWidth === 0 || emojiSize === 0) return;
+    var emojisPerRow = Math.max(1, Math.floor(pickerWidth / emojiSize));
+    var rowCount = Math.ceil(emojiCount / emojisPerRow);
+    var categoryHeight = rowCount * emojiSize;
+    setDimensions({
+      categoryHeight: categoryHeight,
+      emojisPerRow: emojisPerRow,
+      emojiSize: emojiSize
+    });
+  }, [EmojiListRef, emojiCount]);
+  // Recompute on data-count changes and when reactions mode toggles
+  useEffect(function () {
+    computeAndSetDimensions();
+  }, [emojiCount, isReactionsMode, computeAndSetDimensions]);
+  // Listen to transitionend on the picker root (where height transition occurs)
+  useEffect(function () {
+    var rootEl = PickerMainRef.current;
+    if (!rootEl) return;
+    var handler = function handler(e) {
+      var te = e;
+      var prop = te.propertyName;
+      if (prop === 'width' || prop === 'max-width' || prop === 'min-width' || prop === 'height' || prop === 'max-height' || prop === 'min-height') {
+        if (typeof queueMicrotask === 'function') {
+          queueMicrotask(function () {
+            return computeAndSetDimensions();
+          });
+        } else {
+          requestAnimationFrame(function () {
+            return computeAndSetDimensions();
+          });
+        }
+      }
+    };
+    rootEl.addEventListener('transitionend', handler, {
+      passive: true
+    });
+    return function () {
+      rootEl.removeEventListener('transitionend', handler);
+    };
+  }, [PickerMainRef, computeAndSetDimensions]);
+  return dimensions;
 }
 
 function useIsEmojiHidden() {
@@ -19739,11 +19827,78 @@ function useIsEmojiHidden() {
   };
 }
 
+function useEmojiVirtualization(_ref) {
+  var categoryEmojis = _ref.categoryEmojis,
+    topOffset = _ref.topOffset,
+    onHeightReady = _ref.onHeightReady,
+    scrollTop = _ref.scrollTop;
+  var isEmojiHidden = useIsEmojiHidden();
+  var lazyLoadEmojis = useLazyLoadEmojisConfig();
+  var emojiStyle = useEmojiStyleConfig();
+  var _useActiveSkinToneSta = useActiveSkinToneState(),
+    activeSkinTone = _useActiveSkinToneSta[0];
+  var isEmojiDisallowed = useIsEmojiDisallowed();
+  var getEmojiUrl = useGetEmojiUrlConfig();
+  var showVariations = !useSkinTonesDisabledConfig();
+  var BodyRef = useBodyRef();
+  var virtualizedCounter = 0;
+  var emojisToPush = categoryEmojis.filter(function (emoji) {
+    var isDisallowed = isEmojiDisallowed(emoji);
+    var _isEmojiHidden = isEmojiHidden(emoji),
+      failedToLoad = _isEmojiHidden.failedToLoad,
+      filteredOut = _isEmojiHidden.filteredOut,
+      hidden = _isEmojiHidden.hidden;
+    return !failedToLoad && !filteredOut && !hidden && !isDisallowed;
+  });
+  var dimensions = useCategoryHeight(emojisToPush.length);
+  useEffect(function () {
+    if (dimensions) {
+      onHeightReady(dimensions.categoryHeight);
+    }
+  }, [dimensions, onHeightReady, emojisToPush.length]);
+  var emojis = emojisToPush.reduce(function (accumulator, emoji, index) {
+    var _BodyRef$current$clie, _BodyRef$current;
+    var unified = emojiUnified(emoji, activeSkinTone);
+    var style = getEmojiPositionStyle(dimensions, index);
+    if (dimensions && BodyRef.current && shouldVirtualize({
+      scrollTop: scrollTop,
+      clientHeight: (_BodyRef$current$clie = (_BodyRef$current = BodyRef.current) == null ? void 0 : _BodyRef$current.clientHeight) != null ? _BodyRef$current$clie : 0,
+      topOffset: topOffset,
+      style: style,
+      dimensions: dimensions
+    })) {
+      var _BodyRef$current$clie2, _BodyRef$current2;
+      virtualizedCounter++;
+      preloaEmojidIfNeeded(emoji, emojiStyle, scrollTop, (_BodyRef$current$clie2 = (_BodyRef$current2 = BodyRef.current) == null ? void 0 : _BodyRef$current2.clientHeight) != null ? _BodyRef$current$clie2 : 0, topOffset, style, dimensions, getEmojiUrl);
+      return accumulator;
+    }
+    accumulator.push(createElement(ClickableEmoji, {
+      showVariations: showVariations,
+      key: unified,
+      emoji: emoji,
+      unified: unified,
+      emojiStyle: emojiStyle,
+      lazyLoad: lazyLoadEmojis,
+      getEmojiUrl: getEmojiUrl,
+      style: _extends({}, style, {
+        position: 'absolute'
+      })
+    }));
+    return accumulator;
+  }, []);
+  return {
+    virtualizedCounter: virtualizedCounter,
+    emojis: emojis,
+    dimensions: dimensions
+  };
+}
+
 function EmojiCategory(_ref) {
   var categoryConfig = _ref.categoryConfig,
     children = _ref.children,
     hidden = _ref.hidden,
-    hiddenOnSearch = _ref.hiddenOnSearch;
+    hiddenOnSearch = _ref.hiddenOnSearch,
+    height = _ref.height;
   var category = categoryFromCategoryConfig(categoryConfig);
   var categoryName = categoryNameFromCategoryConfig(categoryConfig);
   return createElement("li", {
@@ -19753,15 +19908,16 @@ function EmojiCategory(_ref) {
   }, createElement("h2", {
     className: cx(styles$7.label)
   }, categoryName), createElement("div", {
-    className: cx(styles$7.categoryContent)
+    className: cx(styles$7.categoryContent),
+    style: {
+      height: height
+    }
   }, children));
 }
 var styles$7 = /*#__PURE__*/stylesheet.create({
   category: {
     '.': ClassNames.category,
-    ':not(:has(.epr-visible))': {
-      display: 'none'
-    }
+    position: 'relative'
   },
   categoryContent: {
     '.': ClassNames.categoryContent,
@@ -19793,131 +19949,65 @@ var styles$7 = /*#__PURE__*/stylesheet.create({
   }
 });
 
-var isEverMounted = false;
-function useIsEverMounted() {
-  var _React$useState = useState(isEverMounted),
-    isMounted = _React$useState[0],
-    setIsMounted = _React$useState[1];
-  useEffect(function () {
-    setIsMounted(true);
-    isEverMounted = true;
-  }, []);
-  return isMounted || isEverMounted;
-}
-
-function Suggested(_ref) {
-  var categoryConfig = _ref.categoryConfig;
-  var _useUpdateSuggested = useUpdateSuggested(),
-    suggestedUpdated = _useUpdateSuggested[0];
-  var isMounted = useIsEverMounted();
-  var suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
-  var getEmojiUrl = useGetEmojiUrlConfig();
-  var suggested = useMemo(function () {
-    var _getSuggested;
-    return (_getSuggested = getSuggested(suggestedEmojisModeConfig)) != null ? _getSuggested : [];
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [suggestedUpdated, suggestedEmojisModeConfig]);
-  var emojiStyle = useEmojiStyleConfig();
-  var isEmojiDisallowed = useIsEmojiDisallowed();
-  if (!isMounted) {
-    return null;
-  }
-  return createElement(EmojiCategory, {
-    categoryConfig: categoryConfig,
-    hiddenOnSearch: true,
-    hidden: suggested.length === 0
-  }, suggested.map(function (suggestedItem) {
-    var emoji = emojiByUnified(suggestedItem.original);
-    if (!emoji) {
-      return null;
-    }
-    if (isEmojiDisallowed(emoji)) {
-      return null;
-    }
-    return createElement(ClickableEmoji, {
-      showVariations: false,
-      unified: suggestedItem.unified,
-      emojiStyle: emojiStyle,
-      emoji: emoji,
-      key: suggestedItem.unified,
-      getEmojiUrl: getEmojiUrl
-    });
-  }));
-}
-
-function EmojiList() {
+function EmojiList(_ref) {
+  var scrollTop = _ref.scrollTop;
   var categories = useCategoriesConfig();
-  var renderdCategoriesCountRef = useRef(0);
+  var _React$useState = useState({}),
+    categoryHeights = _React$useState[0],
+    setCategoryHeights = _React$useState[1];
+  var EmojiListRef = useEmojiListRef();
+  var getEmojisByCategory = useGetEmojisByCategory();
+  var labelHeight = getLabelHeight(EmojiListRef.current);
+  var topOffset = 0;
   return createElement("ul", {
-    className: cx(styles$8.emojiList)
+    className: cx(styles$8.emojiList),
+    ref: EmojiListRef
   }, categories.map(function (categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
-    if (category === Categories.SUGGESTED) {
-      return createElement(Suggested, {
-        key: category,
-        categoryConfig: categoryConfig
-      });
+    var currentOffset = topOffset;
+    var categoryHeight = categoryHeights[category];
+    if (categoryHeight) {
+      topOffset += categoryHeight + labelHeight;
     }
     return createElement(Suspense, {
       key: category
     }, createElement(RenderCategory, {
-      category: category,
+      categoryEmojis: getEmojisByCategory(category),
       categoryConfig: categoryConfig,
-      renderdCategoriesCountRef: renderdCategoriesCountRef
+      topOffset: currentOffset,
+      onHeightReady: function onHeightReady(height) {
+        if (categoryHeights[category] !== height) {
+          setCategoryHeights(function (prev) {
+            var _extends2;
+            return _extends({}, prev, (_extends2 = {}, _extends2[category] = height, _extends2));
+          });
+        }
+      },
+      scrollTop: scrollTop
     }));
   }));
 }
-function RenderCategory(_ref) {
-  var category = _ref.category,
-    categoryConfig = _ref.categoryConfig,
-    renderdCategoriesCountRef = _ref.renderdCategoriesCountRef;
-  var isEmojiHidden = useIsEmojiHidden();
-  var lazyLoadEmojis = useLazyLoadEmojisConfig();
-  var emojiStyle = useEmojiStyleConfig();
-  var isPastInitialLoad = useIsPastInitialLoad();
-  var _useActiveSkinToneSta = useActiveSkinToneState(),
-    activeSkinTone = _useActiveSkinToneSta[0];
-  var isEmojiDisallowed = useIsEmojiDisallowed();
-  var getEmojiUrl = useGetEmojiUrlConfig();
-  var showVariations = !useSkinTonesDisabledConfig();
-  // Small trick to defer the rendering of all emoji categories until the first category is visible
-  // This way the user gets to actually see something and not wait for the whole picker to render.
-  var emojisToPush = !isPastInitialLoad && renderdCategoriesCountRef.current > 0 ? [] : emojisByCategory(category);
-  if (emojisToPush.length > 0) {
-    renderdCategoriesCountRef.current++;
-  }
-  var hiddenCounter = 0;
-  var emojis = emojisToPush.map(function (emoji) {
-    var unified = emojiUnified(emoji, activeSkinTone);
-    var _isEmojiHidden = isEmojiHidden(emoji),
-      failedToLoad = _isEmojiHidden.failedToLoad,
-      filteredOut = _isEmojiHidden.filteredOut,
-      hidden = _isEmojiHidden.hidden;
-    var isDisallowed = isEmojiDisallowed(emoji);
-    if (hidden || isDisallowed) {
-      hiddenCounter++;
-    }
-    if (isDisallowed) {
-      return null;
-    }
-    return createElement(ClickableEmoji, {
-      showVariations: showVariations,
-      key: unified,
-      emoji: emoji,
-      unified: unified,
-      hidden: failedToLoad,
-      hiddenOnSearch: filteredOut,
-      emojiStyle: emojiStyle,
-      lazyLoad: lazyLoadEmojis,
-      getEmojiUrl: getEmojiUrl
-    });
-  });
+function RenderCategory(_ref2) {
+  var categoryEmojis = _ref2.categoryEmojis,
+    categoryConfig = _ref2.categoryConfig,
+    topOffset = _ref2.topOffset,
+    onHeightReady = _ref2.onHeightReady,
+    scrollTop = _ref2.scrollTop;
+  var _useEmojiVirtualizati = useEmojiVirtualization({
+      categoryEmojis: categoryEmojis,
+      topOffset: topOffset,
+      onHeightReady: onHeightReady,
+      scrollTop: scrollTop
+    }),
+    virtualizedCounter = _useEmojiVirtualizati.virtualizedCounter,
+    emojis = _useEmojiVirtualizati.emojis,
+    dimensions = _useEmojiVirtualizati.dimensions;
   return createElement(EmojiCategory, {
     categoryConfig: categoryConfig,
+    height: dimensions == null ? void 0 : dimensions.categoryHeight,
     // Indicates that there are no visible emojis
     // Hence, the category should be hidden
-    hidden: hiddenCounter === emojis.length
+    hidden: !emojis.length && virtualizedCounter === 0
   }, emojis);
 }
 var styles$8 = /*#__PURE__*/stylesheet.create({
@@ -20095,13 +20185,15 @@ var styles$9 = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
 
 function Body() {
   var BodyRef = useBodyRef();
-  useOnScroll(BodyRef);
+  var scrollTop = useOnScroll(BodyRef);
   useMouseDownHandlers(BodyRef, MOUSE_EVENT_SOURCE.PICKER);
   useOnMouseMove();
   return createElement("div", {
     className: cx(styles$a.body, commonInteractionStyles.hiddenOnReactions),
     ref: BodyRef
-  }, createElement(EmojiVariationPicker, null), createElement(EmojiList, null));
+  }, createElement(EmojiVariationPicker, null), createElement(EmojiList, {
+    scrollTop: scrollTop
+  }));
 }
 var styles$a = /*#__PURE__*/stylesheet.create({
   body: {
@@ -20806,21 +20898,6 @@ var styles$h = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
   backgroundPositionY: '-40px'
 }), /*#__PURE__*/darkMode('btnClearSearch', HoverDark)));
 
-var SCOPE = /*#__PURE__*/asSelectors(ClassNames.emojiPicker) + " " + /*#__PURE__*/asSelectors(ClassNames.emojiList);
-var EMOJI_BUTTON = /*#__PURE__*/['button', asSelectors(ClassNames.emoji)].join('');
-var CATEGORY = /*#__PURE__*/asSelectors(ClassNames.category);
-function CssSearch(_ref) {
-  var value = _ref.value;
-  if (!value) {
-    return null;
-  }
-  var q = genQuery(value);
-  return createElement("style", null, "\n    " + SCOPE + " " + EMOJI_BUTTON + " {\n      display: none;\n    }\n\n\n    " + SCOPE + " " + q + " {\n      display: flex;\n    }\n\n    " + SCOPE + " " + CATEGORY + ":not(:has(" + q + ")) {\n      display: none;\n    }\n  ");
-}
-function genQuery(value) {
-  return [EMOJI_BUTTON, '[data-full-name*="', getNormalizedSearchTerm(value), '"]'].join('');
-}
-
 var SVGMagnifier = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyMHB4IiBoZWlnaHQ9IjQwcHgiIHZpZXdCb3g9IjAgMCAyMCA0MCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAgNDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iIzg2ODY4NiIgZD0iTTEyLDguODFjMCwyLjA4LTEuNjgsMy43Ni0zLjc2LDMuNzZjLTIuMDgsMC0zLjc2LTEuNjgtMy43Ni0zLjc2CgljMC0yLjA4LDEuNjgtMy43NiwzLjc2LTMuNzZDMTAuMzIsNS4wNSwxMiw2LjczLDEyLDguODF6IE0xMS4yMywxMi43MmMtMC44MywwLjY0LTEuODcsMS4wMS0yLjk5LDEuMDFjLTIuNzIsMC00LjkyLTIuMi00LjkyLTQuOTIKCWMwLTIuNzIsMi4yLTQuOTIsNC45Mi00LjkyYzIuNzIsMCw0LjkyLDIuMiw0LjkyLDQuOTJjMCwxLjEzLTAuMzgsMi4xNi0xLjAxLDIuOTlsMy45NCwzLjkzYzAuMjUsMC4yNSwwLjI1LDAuNjYsMCwwLjkyCgljLTAuMjUsMC4yNS0wLjY2LDAuMjUtMC45MiwwTDExLjIzLDEyLjcyeiIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0MwQzBCRiIgZD0iTTEyLDI4LjgxYzAsMi4wOC0xLjY4LDMuNzYtMy43NiwzLjc2Yy0yLjA4LDAtMy43Ni0xLjY4LTMuNzYtMy43NgoJYzAtMi4wOCwxLjY4LTMuNzYsMy43Ni0zLjc2QzEwLjMyLDI1LjA1LDEyLDI2LjczLDEyLDI4LjgxeiBNMTEuMjMsMzIuNzJjLTAuODMsMC42NC0xLjg3LDEuMDEtMi45OSwxLjAxCgljLTIuNzIsMC00LjkyLTIuMi00LjkyLTQuOTJjMC0yLjcyLDIuMi00LjkyLDQuOTItNC45MmMyLjcyLDAsNC45MiwyLjIsNC45Miw0LjkyYzAsMS4xMy0wLjM4LDIuMTYtMS4wMSwyLjk5bDMuOTQsMy45MwoJYzAuMjUsMC4yNSwwLjI1LDAuNjYsMCwwLjkyYy0wLjI1LDAuMjUtMC42NiwwLjI1LTAuOTIsMEwxMS4yMywzMi43MnoiLz4KPC9zdmc+';
 
 function IcnSearch() {
@@ -20858,9 +20935,6 @@ function SearchContainer() {
   }, createElement(Search, null), isSkinToneInSearch ? createElement(SkinTonePicker, null) : null);
 }
 function Search() {
-  var _useState = useState(0),
-    inc = _useState[0],
-    setInc = _useState[1];
   var closeAllOpenToggles = useCloseAllOpenToggles();
   var SearchInputRef = useSearchInputRef();
   var placeholder = useSearchPlaceHolderConfig();
@@ -20873,9 +20947,7 @@ function Search() {
   var value = input == null ? void 0 : input.value;
   return createElement(Relative, {
     className: cx(styles$j.searchContainer)
-  }, createElement(CssSearch, {
-    value: value
-  }), createElement("input", {
+  }, createElement("input", {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     autoFocus: autoFocus,
     "aria-label": 'Type to search for an emoji',
@@ -20886,7 +20958,6 @@ function Search() {
     placeholder: placeholder,
     onChange: function onChange(event) {
       var _event$target$value, _event$target;
-      setInc(inc + 1);
       _onChange((_event$target$value = event == null ? void 0 : (_event$target = event.target) == null ? void 0 : _event$target.value) != null ? _event$target$value : value);
     },
     ref: SearchInputRef