emoji-picker-react 4.14.0 → 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() {
@@ -18696,7 +18706,7 @@ function hasModifier(event) {
 }
 
 // eslint-disable-next-line max-params
-function preloaEmojidIfNeeded(emoji, emojiStyles, scrollTop, clientHeight, topOffset, style, dimensions, getEmojiUrl) {
+function preloadEmojiIfNeeded(emoji, emojiStyles, scrollTop, clientHeight, topOffset, style, dimensions, getEmojiUrl) {
   if (!emoji) {
     return;
   }
@@ -19756,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];
@@ -19782,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;
@@ -19832,7 +19844,8 @@ function useEmojiVirtualization(_ref) {
   var categoryEmojis = _ref.categoryEmojis,
     topOffset = _ref.topOffset,
     onHeightReady = _ref.onHeightReady,
-    scrollTop = _ref.scrollTop;
+    scrollTop = _ref.scrollTop,
+    isCategoryVisible = _ref.isCategoryVisible;
   var isEmojiHidden = useIsEmojiHidden();
   var lazyLoadEmojis = useLazyLoadEmojisConfig();
   var emojiStyle = useEmojiStyleConfig();
@@ -19870,7 +19883,10 @@ function useEmojiVirtualization(_ref) {
     })) {
       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);
+      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, {
@@ -19994,11 +20010,14 @@ function RenderCategory(_ref2) {
     topOffset = _ref2.topOffset,
     onHeightReady = _ref2.onHeightReady,
     scrollTop = _ref2.scrollTop;
+  var _useVisibleCategories = useVisibleCategoriesState(),
+    visibleCategroies = _useVisibleCategories[0];
   var _useEmojiVirtualizati = useEmojiVirtualization({
       categoryEmojis: categoryEmojis,
       topOffset: topOffset,
       onHeightReady: onHeightReady,
-      scrollTop: scrollTop
+      scrollTop: scrollTop,
+      isCategoryVisible: visibleCategroies.includes(categoryConfig.category)
     }),
     virtualizedCounter = _useEmojiVirtualizati.virtualizedCounter,
     emojis = _useEmojiVirtualizati.emojis,
@@ -20624,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();
@@ -20636,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]);
@@ -20658,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() {
@@ -20781,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();