emoji-picker-react 4.13.3 → 4.14.0-rc.1

package/dist/emoji-picker-react.cjs.development.js

@@ -197,6 +197,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 = React.useState(initialValue),
+    state = _useState[0],
+    setState = _useState[1];
+  var timer = React.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 = React.useRef({});
+  var emojiVersionConfig = useEmojiVersionConfig();
+  return React.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) {
+  React.useEffect(function () {
+    dispatch(true);
+  }, [dispatch]);
+}
+
 (function (SuggestionMode) {
   SuggestionMode["RECENT"] = "recent";
   SuggestionMode["FREQUENT"] = "frequent";
@@ -238,6 +318,128 @@ var DEFAULT_REACTIONS = ['1f44d', '2764-fe0f', '1f603', '1f622', '1f64f', '1f44e
   SkinTonePickerLocation["PREVIEW"] = "PREVIEW";
 })(exports.SkinTonePickerLocation || (exports.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 = React.useRef(alphaNumericEmojiIndex);
+  var disallowClickRef = React.useRef(false);
+  var disallowMouseRef = React.useRef(false);
+  var disallowedEmojisRef = React.useRef(disallowedEmojis);
+  var suggestedUpdateState = useDebouncedState(Date.now(), 200);
+  var searchTerm = useDebouncedState('', 100);
+  var skinToneFanOpenState = React.useState(false);
+  var activeSkinTone = React.useState(defaultSkinTone);
+  var activeCategoryState = React.useState(null);
+  var emojisThatFailedToLoadState = React.useState(new Set());
+  var emojiVariationPickerState = React.useState(null);
+  var reactionsModeState = React.useState(reactionsDefaultOpen);
+  var _useState = React.useState(false),
+    isPastInitialLoad = _useState[0],
+    setIsPastInitialLoad = _useState[1];
+  useMarkInitialLoad(setIsPastInitialLoad);
+  return React.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__*/React.createContext({
+  activeCategoryState: [null, function () {}],
+  activeSkinTone: [exports.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 = React.useContext(PickerContext),
+    filterRef = _React$useContext.filterRef;
+  return filterRef;
+}
+function useDisallowClickRef() {
+  var _React$useContext2 = React.useContext(PickerContext),
+    disallowClickRef = _React$useContext2.disallowClickRef;
+  return disallowClickRef;
+}
+function useDisallowMouseRef() {
+  var _React$useContext3 = React.useContext(PickerContext),
+    disallowMouseRef = _React$useContext3.disallowMouseRef;
+  return disallowMouseRef;
+}
+function useReactionsModeState() {
+  var _React$useContext4 = React.useContext(PickerContext),
+    reactionsModeState = _React$useContext4.reactionsModeState;
+  return reactionsModeState;
+}
+function useSearchTermState() {
+  var _React$useContext5 = React.useContext(PickerContext),
+    searchTerm = _React$useContext5.searchTerm;
+  return searchTerm;
+}
+function useActiveSkinToneState() {
+  var _React$useContext6 = React.useContext(PickerContext),
+    activeSkinTone = _React$useContext6.activeSkinTone;
+  return activeSkinTone;
+}
+function useEmojisThatFailedToLoadState() {
+  var _React$useContext7 = React.useContext(PickerContext),
+    emojisThatFailedToLoadState = _React$useContext7.emojisThatFailedToLoadState;
+  return emojisThatFailedToLoadState;
+}
+function useEmojiVariationPickerState() {
+  var _React$useContext9 = React.useContext(PickerContext),
+    emojiVariationPickerState = _React$useContext9.emojiVariationPickerState;
+  return emojiVariationPickerState;
+}
+function useSkinToneFanOpenState() {
+  var _React$useContext10 = React.useContext(PickerContext),
+    skinToneFanOpenState = _React$useContext10.skinToneFanOpenState;
+  return skinToneFanOpenState;
+}
+function useUpdateSuggested() {
+  var _React$useContext12 = React.useContext(PickerContext),
+    suggestedUpdateState = _React$useContext12.suggestedUpdateState;
+  var suggestedUpdated = suggestedUpdateState[0],
+    setsuggestedUpdate = suggestedUpdateState[1];
+  return [suggestedUpdated, function updateSuggested() {
+    setsuggestedUpdate(Date.now());
+  }];
+}
+
 var _configByCategory;
 var categoriesOrdered = [exports.Categories.SUGGESTED, exports.Categories.CUSTOM, exports.Categories.SMILEYS_PEOPLE, exports.Categories.ANIMALS_NATURE, exports.Categories.FOOD_DRINK, exports.Categories.TRAVEL_PLACES, exports.Categories.ACTIVITIES, exports.Categories.OBJECTS, exports.Categories.SYMBOLS, exports.Categories.FLAGS];
 var SuggestedRecent = {
@@ -17165,56 +17367,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 === exports.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 === exports.Categories.SUGGESTED) {
+      return suggested;
+    }
+    // @ts-ignore
+    return (_emojis$category = emojis[category]) != null ? _emojis$category : [];
+  };
 }
 // WARNING: DO NOT USE DIRECTLY
 function emojiUrlByUnified(unified, emojiStyle) {
@@ -17375,197 +17628,6 @@ function usePickerConfig() {
   return React.useContext(ConfigContext);
 }
 
-function useDebouncedState(initialValue, delay) {
-  if (delay === void 0) {
-    delay = 0;
-  }
-  var _useState = React.useState(initialValue),
-    state = _useState[0],
-    setState = _useState[1];
-  var timer = React.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 = React.useRef({});
-  var emojiVersionConfig = useEmojiVersionConfig();
-  return React.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) {
-  React.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 = React.useRef(alphaNumericEmojiIndex);
-  var disallowClickRef = React.useRef(false);
-  var disallowMouseRef = React.useRef(false);
-  var disallowedEmojisRef = React.useRef(disallowedEmojis);
-  var suggestedUpdateState = useDebouncedState(Date.now(), 200);
-  var searchTerm = useDebouncedState('', 100);
-  var skinToneFanOpenState = React.useState(false);
-  var activeSkinTone = React.useState(defaultSkinTone);
-  var activeCategoryState = React.useState(null);
-  var emojisThatFailedToLoadState = React.useState(new Set());
-  var emojiVariationPickerState = React.useState(null);
-  var reactionsModeState = React.useState(reactionsDefaultOpen);
-  var _useState = React.useState(false),
-    isPastInitialLoad = _useState[0],
-    setIsPastInitialLoad = _useState[1];
-  useMarkInitialLoad(setIsPastInitialLoad);
-  return React.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__*/React.createContext({
-  activeCategoryState: [null, function () {}],
-  activeSkinTone: [exports.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 = React.useContext(PickerContext),
-    filterRef = _React$useContext.filterRef;
-  return filterRef;
-}
-function useDisallowClickRef() {
-  var _React$useContext2 = React.useContext(PickerContext),
-    disallowClickRef = _React$useContext2.disallowClickRef;
-  return disallowClickRef;
-}
-function useDisallowMouseRef() {
-  var _React$useContext3 = React.useContext(PickerContext),
-    disallowMouseRef = _React$useContext3.disallowMouseRef;
-  return disallowMouseRef;
-}
-function useReactionsModeState() {
-  var _React$useContext4 = React.useContext(PickerContext),
-    reactionsModeState = _React$useContext4.reactionsModeState;
-  return reactionsModeState;
-}
-function useSearchTermState() {
-  var _React$useContext5 = React.useContext(PickerContext),
-    searchTerm = _React$useContext5.searchTerm;
-  return searchTerm;
-}
-function useActiveSkinToneState() {
-  var _React$useContext6 = React.useContext(PickerContext),
-    activeSkinTone = _React$useContext6.activeSkinTone;
-  return activeSkinTone;
-}
-function useEmojisThatFailedToLoadState() {
-  var _React$useContext7 = React.useContext(PickerContext),
-    emojisThatFailedToLoadState = _React$useContext7.emojisThatFailedToLoadState;
-  return emojisThatFailedToLoadState;
-}
-function useIsPastInitialLoad() {
-  var _React$useContext8 = React.useContext(PickerContext),
-    isPastInitialLoad = _React$useContext8.isPastInitialLoad;
-  return isPastInitialLoad;
-}
-function useEmojiVariationPickerState() {
-  var _React$useContext9 = React.useContext(PickerContext),
-    emojiVariationPickerState = _React$useContext9.emojiVariationPickerState;
-  return emojiVariationPickerState;
-}
-function useSkinToneFanOpenState() {
-  var _React$useContext10 = React.useContext(PickerContext),
-    skinToneFanOpenState = _React$useContext10.skinToneFanOpenState;
-  return skinToneFanOpenState;
-}
-function useUpdateSuggested() {
-  var _React$useContext12 = React.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);
@@ -17800,6 +17862,7 @@ function ElementRefContextProvider(_ref) {
   var PickerMainRef = React.useRef(null);
   var AnchoredEmojiRef = React.useRef(null);
   var BodyRef = React.useRef(null);
+  var EmojiListRef = React.useRef(null);
   var SearchInputRef = React.useRef(null);
   var SkinTonePickerRef = React.useRef(null);
   var CategoryNavigationRef = React.useRef(null);
@@ -17809,6 +17872,7 @@ function ElementRefContextProvider(_ref) {
     value: {
       AnchoredEmojiRef: AnchoredEmojiRef,
       BodyRef: BodyRef,
+      EmojiListRef: EmojiListRef,
       CategoryNavigationRef: CategoryNavigationRef,
       PickerMainRef: PickerMainRef,
       SearchInputRef: SearchInputRef,
@@ -17822,6 +17886,7 @@ var ElementRefContext = /*#__PURE__*/React.createContext({
   AnchoredEmojiRef: /*#__PURE__*/React.createRef(),
   BodyRef: /*#__PURE__*/React.createRef(),
   CategoryNavigationRef: /*#__PURE__*/React.createRef(),
+  EmojiListRef: /*#__PURE__*/React.createRef(),
   PickerMainRef: /*#__PURE__*/React.createRef(),
   SearchInputRef: /*#__PURE__*/React.createRef(),
   SkinTonePickerRef: /*#__PURE__*/React.createRef(),
@@ -17831,6 +17896,9 @@ var ElementRefContext = /*#__PURE__*/React.createContext({
 function useElementRef() {
   return React.useContext(ElementRefContext);
 }
+function useEmojiListRef() {
+  return useElementRef()['EmojiListRef'];
+}
 function usePickerMainRef() {
   return useElementRef()['PickerMainRef'];
 }
@@ -17967,38 +18035,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() {
@@ -18066,19 +18163,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 React.useCallback(function () {
@@ -18152,27 +18236,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() {
@@ -18731,7 +18810,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'
@@ -18851,65 +18930,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;
@@ -18937,15 +18957,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;
 }
 
@@ -19161,56 +19183,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 === exports.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 === exports.Categories.CUSTOM;
 }
@@ -19373,12 +19345,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 React.createElement(Button, {
     className: flairup.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) {
@@ -19568,7 +19542,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 React.createElement(ClickableEmojiButton, {
     hasVariations: hasVariations,
@@ -19577,7 +19552,8 @@ function ClickableEmoji(_ref) {
     hiddenOnSearch: hiddenOnSearch,
     emojiNames: emojiNames(emoji),
     unified: unified,
-    noBackground: noBackground
+    noBackground: noBackground,
+    style: style
   }, React.createElement(ViewOnlyEmoji, {
     unified: unified,
     emoji: emoji,
@@ -19707,6 +19683,9 @@ var styles$6 = /*#__PURE__*/stylesheet.create({
 
 function useOnScroll(BodyRef) {
   var closeAllOpenToggles = useCloseAllOpenToggles();
+  var _useState = React.useState(0),
+    scrollTop = _useState[0],
+    setScrollTop = _useState[1];
   React.useEffect(function () {
     var bodyRef = BodyRef.current;
     if (!bodyRef) {
@@ -19716,12 +19695,78 @@ 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;
+}
+
+var EMOJI_SIZE_DEFAULT = 32;
+function useCategoryHeight(emojiCount) {
+  var EmojiListRef = useEmojiListRef();
+  var _useReactionsModeStat = useReactionsModeState(),
+    isReactionsMode = _useReactionsModeStat[0];
+  var PickerMainRef = usePickerMainRef();
+  var emojiSizeRef = React.useRef();
+  var _React$useState = React.useState(),
+    dimensions = _React$useState[0],
+    setDimensions = _React$useState[1];
+  // Helper to compute and store dimensions based on current DOM
+  var computeAndSetDimensions = React.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
+  React.useEffect(function () {
+    computeAndSetDimensions();
+  }, [emojiCount, isReactionsMode, computeAndSetDimensions]);
+  // Listen to transitionend on the picker root (where height transition occurs)
+  React.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() {
@@ -19744,7 +19789,8 @@ 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 React.createElement("li", {
@@ -19754,15 +19800,16 @@ function EmojiCategory(_ref) {
   }, React.createElement("h2", {
     className: flairup.cx(styles$7.label)
   }, categoryName), React.createElement("div", {
-    className: flairup.cx(styles$7.categoryContent)
+    className: flairup.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,
@@ -19794,115 +19841,100 @@ var styles$7 = /*#__PURE__*/stylesheet.create({
   }
 });
 
-var isEverMounted = false;
-function useIsEverMounted() {
-  var _React$useState = React.useState(isEverMounted),
-    isMounted = _React$useState[0],
-    setIsMounted = _React$useState[1];
-  React.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 = React.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 React.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 React.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 = React.useRef(0);
+  var _React$useState = React.useState({}),
+    categoryHeights = _React$useState[0],
+    setCategoryHeights = _React$useState[1];
+  var EmojiListRef = useEmojiListRef();
+  var getEmojisByCategory = useGetEmojisByCategory();
+  var labelHeight = getLabelHeight(EmojiListRef.current);
+  var topOffset = 0;
   return React.createElement("ul", {
-    className: flairup.cx(styles$8.emojiList)
+    className: flairup.cx(styles$8.emojiList),
+    ref: EmojiListRef
   }, categories.map(function (categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
-    if (category === exports.Categories.SUGGESTED) {
-      return React.createElement(Suggested, {
-        key: category,
-        categoryConfig: categoryConfig
-      });
+    var currentOffset = topOffset;
+    var categoryHeight = categoryHeights[category];
+    if (categoryHeight) {
+      topOffset += categoryHeight + labelHeight;
     }
     return React.createElement(React.Suspense, {
       key: category
     }, React.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;
+function RenderCategory(_ref2) {
+  var categoryEmojis = _ref2.categoryEmojis,
+    categoryConfig = _ref2.categoryConfig,
+    topOffset = _ref2.topOffset,
+    onHeightReady = _ref2.onHeightReady,
+    scrollTop = _ref2.scrollTop;
   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 BodyRef = useBodyRef();
   var hiddenCounter = 0;
-  var emojis = emojisToPush.map(function (emoji) {
-    var unified = emojiUnified(emoji, activeSkinTone);
+  var virtualizedCounter = 0;
+  var emojisToPush = categoryEmojis.filter(function (emoji) {
     var _isEmojiHidden = isEmojiHidden(emoji),
       failedToLoad = _isEmojiHidden.failedToLoad,
       filteredOut = _isEmojiHidden.filteredOut,
       hidden = _isEmojiHidden.hidden;
+    return !failedToLoad && !filteredOut && !hidden;
+  });
+  var dimensions = useCategoryHeight(emojisToPush.length);
+  React.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 _isEmojiHidden2 = isEmojiHidden(emoji),
+      failedToLoad = _isEmojiHidden2.failedToLoad,
+      filteredOut = _isEmojiHidden2.filteredOut,
+      hidden = _isEmojiHidden2.hidden;
     var isDisallowed = isEmojiDisallowed(emoji);
     if (hidden || isDisallowed) {
       hiddenCounter++;
     }
-    if (isDisallowed) {
-      return null;
+    if (isDisallowed || failedToLoad || filteredOut) {
+      return accumulator;
     }
-    return React.createElement(ClickableEmoji, {
+    var style = getEmojiPositionStyle(dimensions, index - hiddenCounter);
+    if (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
+    })) {
+      virtualizedCounter++;
+      return accumulator;
+    }
+    accumulator.push(React.createElement(ClickableEmoji, {
       showVariations: showVariations,
       key: unified,
       emoji: emoji,
@@ -19911,14 +19943,19 @@ function RenderCategory(_ref) {
       hiddenOnSearch: filteredOut,
       emojiStyle: emojiStyle,
       lazyLoad: lazyLoadEmojis,
-      getEmojiUrl: getEmojiUrl
-    });
-  });
+      getEmojiUrl: getEmojiUrl,
+      style: _extends({}, style, {
+        position: 'absolute'
+      })
+    }));
+    return accumulator;
+  }, []);
   return React.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: hiddenCounter === emojis.length && virtualizedCounter === 0
   }, emojis);
 }
 var styles$8 = /*#__PURE__*/stylesheet.create({
@@ -19929,6 +19966,26 @@ var styles$8 = /*#__PURE__*/stylesheet.create({
     padding: '0'
   }
 });
+function getEmojiPositionStyle(dimensions, index) {
+  return dimensions ? {
+    top: Math.floor(index / dimensions.emojisPerRow) * dimensions.emojiSize,
+    left: index % dimensions.emojisPerRow * dimensions.emojiSize
+  } : undefined;
+}
+function shouldVirtualize(_ref3) {
+  var scrollTop = _ref3.scrollTop,
+    clientHeight = _ref3.clientHeight,
+    topOffset = _ref3.topOffset,
+    style = _ref3.style,
+    dimensions = _ref3.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;
+}
 
 var SVGTriangle = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MHB4IgoJIGhlaWdodD0iMTVweCIgdmlld0JveD0iMCAwIDUwIDE1IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MCAxNSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJMYXllcl8xIj4KPC9nPgo8ZyBpZD0iTGF5ZXJfMiI+Cgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiNFOEU3RTciIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTEuODYtMC40M2w5LjgzLDExLjUzYzAuNTksMC42OSwxLjU2LDAuNjksMi4xNCwwbDkuODMtMTEuNTMiLz4KCTxwYXRoIGZpbGw9IiMwMTAyMDIiIHN0cm9rZT0iIzE1MTYxNyIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNMjYuODYtMC40M2w5LjgzLDExLjUzYzAuNTksMC42OSwxLjU2LDAuNjksMi4xNCwwbDkuODMtMTEuNTMiLz4KPC9nPgo8L3N2Zz4=';
 
@@ -20096,13 +20153,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 React.createElement("div", {
     className: flairup.cx(styles$a.body, commonInteractionStyles.hiddenOnReactions),
     ref: BodyRef
-  }, React.createElement(EmojiVariationPicker, null), React.createElement(EmojiList, null));
+  }, React.createElement(EmojiVariationPicker, null), React.createElement(EmojiList, {
+    scrollTop: scrollTop
+  }));
 }
 var styles$a = /*#__PURE__*/stylesheet.create({
   body: {
@@ -20807,21 +20866,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 React.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() {
@@ -20859,9 +20903,6 @@ function SearchContainer() {
   }, React.createElement(Search, null), isSkinToneInSearch ? React.createElement(SkinTonePicker, null) : null);
 }
 function Search() {
-  var _useState = React.useState(0),
-    inc = _useState[0],
-    setInc = _useState[1];
   var closeAllOpenToggles = useCloseAllOpenToggles();
   var SearchInputRef = useSearchInputRef();
   var placeholder = useSearchPlaceHolderConfig();
@@ -20874,9 +20915,7 @@ function Search() {
   var value = input == null ? void 0 : input.value;
   return React.createElement(Relative, {
     className: flairup.cx(styles$j.searchContainer)
-  }, React.createElement(CssSearch, {
-    value: value
-  }), React.createElement("input", {
+  }, React.createElement("input", {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     autoFocus: autoFocus,
     "aria-label": 'Type to search for an emoji',
@@ -20887,7 +20926,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