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

package/dist/components/context/PickerContext.d.ts

@@ -18,6 +18,7 @@ export declare function useIsPastInitialLoad(): boolean;
 export declare function useEmojiVariationPickerState(): ReactState<DataEmoji | null>;
 export declare function useSkinToneFanOpenState(): ReactState<boolean>;
 export declare function useDisallowedEmojisRef(): React.MutableRefObject<Record<string, boolean>>;
+export declare function useVisibleCategoriesState(): ReactState<string[]>;
 export declare function useUpdateSuggested(): [number, () => void];
 export declare type FilterState = Record<string, FilterDict>;
 export {};

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

@@ -339,6 +339,7 @@ function PickerContextProvider(_ref) {
   var _useState = React.useState(false),
     isPastInitialLoad = _useState[0],
     setIsPastInitialLoad = _useState[1];
+  var visibleCategoriesState = React.useState([]);
   useMarkInitialLoad(setIsPastInitialLoad);
   return React.createElement(PickerContext.Provider, {
     value: {
@@ -354,7 +355,8 @@ function PickerContextProvider(_ref) {
       searchTerm: searchTerm,
       skinToneFanOpenState: skinToneFanOpenState,
       suggestedUpdateState: suggestedUpdateState,
-      reactionsModeState: reactionsModeState
+      reactionsModeState: reactionsModeState,
+      visibleCategoriesState: visibleCategoriesState
     }
   }, children);
 }
@@ -383,7 +385,10 @@ var PickerContext = /*#__PURE__*/React.createContext({
   }],
   skinToneFanOpenState: [false, function () {}],
   suggestedUpdateState: [/*#__PURE__*/Date.now(), function () {}],
-  reactionsModeState: [false, function () {}]
+  reactionsModeState: [false, function () {}],
+  visibleCategoriesState: [[], function () {
+    return [];
+  }]
 });
 function useFilterRef() {
   var _React$useContext = React.useContext(PickerContext),
@@ -430,9 +435,14 @@ function useSkinToneFanOpenState() {
     skinToneFanOpenState = _React$useContext10.skinToneFanOpenState;
   return skinToneFanOpenState;
 }
-function useUpdateSuggested() {
+function useVisibleCategoriesState() {
   var _React$useContext12 = React.useContext(PickerContext),
-    suggestedUpdateState = _React$useContext12.suggestedUpdateState;
+    visibleCategoriesState = _React$useContext12.visibleCategoriesState;
+  return visibleCategoriesState;
+}
+function useUpdateSuggested() {
+  var _React$useContext13 = React.useContext(PickerContext),
+    suggestedUpdateState = _React$useContext13.suggestedUpdateState;
   var suggestedUpdated = suggestedUpdateState[0],
     setsuggestedUpdate = suggestedUpdateState[1];
   return [suggestedUpdated, function updateSuggested() {
@@ -18695,22 +18705,44 @@ function hasModifier(event) {
   return metaKey || ctrlKey || altKey;
 }
 
-function preloadEmoji(getEmojiUrl, emoji, emojiStyle) {
+// eslint-disable-next-line max-params
+function preloadEmojiIfNeeded(emoji, emojiStyles, scrollTop, clientHeight, topOffset, style, dimensions, getEmojiUrl) {
   if (!emoji) {
     return;
   }
-  if (emojiStyle === exports.EmojiStyle.NATIVE) {
+  if (emojiStyles === exports.EmojiStyle.NATIVE) {
     return;
   }
   var unified = emojiUnified(emoji);
   if (preloadedEmojs.has(unified)) {
     return;
   }
-  emojiVariations(emoji).forEach(function (variation) {
+  // 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;
+  }
+  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) {
@@ -19706,6 +19738,27 @@ function useOnScroll(BodyRef) {
   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();
@@ -19713,6 +19766,8 @@ function useCategoryHeight(emojiCount) {
     isReactionsMode = _useReactionsModeStat[0];
   var PickerMainRef = usePickerMainRef();
   var emojiSizeRef = React.useRef();
+  var _useVisibleCategories = useVisibleCategoriesState(),
+    visibleCategories = _useVisibleCategories[0];
   var _React$useState = React.useState(),
     dimensions = _React$useState[0],
     setDimensions = _React$useState[1];
@@ -19739,7 +19794,7 @@ function useCategoryHeight(emojiCount) {
   // Recompute on data-count changes and when reactions mode toggles
   React.useEffect(function () {
     computeAndSetDimensions();
-  }, [emojiCount, isReactionsMode, computeAndSetDimensions]);
+  }, [emojiCount, isReactionsMode, computeAndSetDimensions, visibleCategories.length]);
   // Listen to transitionend on the picker root (where height transition occurs)
   React.useEffect(function () {
     var rootEl = PickerMainRef.current;
@@ -19785,6 +19840,76 @@ function useIsEmojiHidden() {
   };
 }
 
+function useEmojiVirtualization(_ref) {
+  var categoryEmojis = _ref.categoryEmojis,
+    topOffset = _ref.topOffset,
+    onHeightReady = _ref.onHeightReady,
+    scrollTop = _ref.scrollTop,
+    isCategoryVisible = _ref.isCategoryVisible;
+  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);
+  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 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++;
+      preloadEmojiIfNeeded(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;
+    }
+    if (!isCategoryVisible) {
+      return accumulator;
+    }
+    accumulator.push(React.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,
@@ -19885,77 +20010,24 @@ function RenderCategory(_ref2) {
     topOffset = _ref2.topOffset,
     onHeightReady = _ref2.onHeightReady,
     scrollTop = _ref2.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 hiddenCounter = 0;
-  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 || failedToLoad || filteredOut) {
-      return accumulator;
-    }
-    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,
+  var _useVisibleCategories = useVisibleCategoriesState(),
+    visibleCategroies = _useVisibleCategories[0];
+  var _useEmojiVirtualizati = useEmojiVirtualization({
+      categoryEmojis: categoryEmojis,
       topOffset: topOffset,
-      style: style,
-      dimensions: dimensions
-    })) {
-      virtualizedCounter++;
-      return accumulator;
-    }
-    accumulator.push(React.createElement(ClickableEmoji, {
-      showVariations: showVariations,
-      key: unified,
-      emoji: emoji,
-      unified: unified,
-      hidden: failedToLoad,
-      hiddenOnSearch: filteredOut,
-      emojiStyle: emojiStyle,
-      lazyLoad: lazyLoadEmojis,
-      getEmojiUrl: getEmojiUrl,
-      style: _extends({}, style, {
-        position: 'absolute'
-      })
-    }));
-    return accumulator;
-  }, []);
+      onHeightReady: onHeightReady,
+      scrollTop: scrollTop,
+      isCategoryVisible: visibleCategroies.includes(categoryConfig.category)
+    }),
+    virtualizedCounter = _useEmojiVirtualizati.virtualizedCounter,
+    emojis = _useEmojiVirtualizati.emojis,
+    dimensions = _useEmojiVirtualizati.dimensions;
   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 && virtualizedCounter === 0
+    hidden: !emojis.length && virtualizedCounter === 0
   }, emojis);
 }
 var styles$8 = /*#__PURE__*/stylesheet.create({
@@ -19966,26 +20038,6 @@ 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=';
 
@@ -20591,7 +20643,9 @@ function categoryNameFromDom($category) {
   return (_$category$getAttribu = $category == null ? void 0 : $category.getAttribute('data-name')) != null ? _$category$getAttribu : null;
 }
 
-function useActiveCategoryScrollDetection(setActiveCategory) {
+function useActiveCategoryScrollDetection(_ref) {
+  var setActiveCategory = _ref.setActiveCategory,
+    setVisibleCategories = _ref.setVisibleCategories;
   var BodyRef = useBodyRef();
   React.useEffect(function () {
     var visibleCategories = new Map();
@@ -20603,9 +20657,19 @@ function useActiveCategoryScrollDetection(setActiveCategory) {
       for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
         var entry = _step.value;
         var _id = categoryNameFromDom(entry.target);
+        if (!_id) {
+          continue;
+        }
         visibleCategories.set(_id, entry.intersectionRatio);
       }
       var ratios = Array.from(visibleCategories);
+      setVisibleCategories(ratios.filter(function (_ref2) {
+        var ratio = _ref2[1];
+        return ratio > 0;
+      }).map(function (_ref3) {
+        var id = _ref3[0];
+        return id;
+      }));
       var lastCategory = ratios[ratios.length - 1];
       if (lastCategory[1] == 1) {
         return setActiveCategory(lastCategory[0]);
@@ -20625,7 +20689,7 @@ function useActiveCategoryScrollDetection(setActiveCategory) {
     bodyRef == null ? void 0 : bodyRef.querySelectorAll(asSelectors(ClassNames.category)).forEach(function (el) {
       observer.observe(el);
     });
-  }, [BodyRef, setActiveCategory]);
+  }, [BodyRef, setActiveCategory, setVisibleCategories]);
 }
 
 function useScrollCategoryIntoView() {
@@ -20748,8 +20812,13 @@ function CategoryNavigation() {
   var _useState = React.useState(null),
     activeCategory = _useState[0],
     setActiveCategory = _useState[1];
+  var _useVisibleCategories = useVisibleCategoriesState(),
+    setVisibleCategories = _useVisibleCategories[1];
   var scrollCategoryIntoView = useScrollCategoryIntoView();
-  useActiveCategoryScrollDetection(setActiveCategory);
+  useActiveCategoryScrollDetection({
+    setActiveCategory: setActiveCategory,
+    setVisibleCategories: setVisibleCategories
+  });
   var isSearchMode = useIsSearchMode();
   var categoriesConfig = useCategoriesConfig();
   var CategoryNavigationRef = useCategoryNavigationRef();