emoji-picker-react 4.14.0 → 4.14.2

package/dist/hooks/preloadEmoji.d.ts

@@ -2,7 +2,7 @@ import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { EmojiStyle } from '../types/exposedTypes';
 import { Dimensions } from '../virtualization/virtualizationHelpers';
-export declare function preloaEmojidIfNeeded(emoji: undefined | DataEmoji, emojiStyles: EmojiStyle, scrollTop: number, clientHeight: number, topOffset: number, style: {
+export declare function preloadEmojiIfNeeded(emoji: undefined | DataEmoji, emojiStyles: EmojiStyle, scrollTop: number, clientHeight: number, topOffset: number, style: {
     top: number;
 } | undefined, dimensions: Dimensions, getEmojiUrl: GetEmojiUrl): void;
 export declare function preloadEmoji(getEmojiUrl: GetEmojiUrl, emoji: undefined | DataEmoji, emojiStyle: EmojiStyle): void;

package/dist/hooks/useActiveCategoryScrollDetection.d.ts

@@ -1 +1,4 @@
-export declare function useActiveCategoryScrollDetection(setActiveCategory: (category: string) => void): void;
+export declare function useActiveCategoryScrollDetection({ setActiveCategory, setVisibleCategories }: {
+    setActiveCategory: (category: string) => void;
+    setVisibleCategories: (categories: string[]) => void;
+}): void;

package/dist/hooks/useEmojiVirtualization.d.ts

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
 import { DataEmojis } from '../dataUtils/DataTypes';
-export declare function useEmojiVirtualization({ categoryEmojis, topOffset, onHeightReady, scrollTop }: {
+export declare function useEmojiVirtualization({ categoryEmojis, topOffset, onHeightReady, scrollTop, isCategoryVisible }: {
     categoryEmojis: DataEmojis;
     topOffset: number;
     onHeightReady: (height: number) => void;
     scrollTop: number;
+    isCategoryVisible: boolean;
 }): {
     virtualizedCounter: number;
     emojis: ReactNode[];

package/dist/hooks/useIsMounted.d.ts

@@ -0,0 +1 @@
+export declare function useIsMounted(): boolean;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.14.0",
+  "version": "4.14.2",
   "license": "MIT",
   "main": "dist/index.js",
   "homepage": "https://ealush.com/emoji-picker-react",

package/src/components/body/EmojiList.tsx

@@ -13,6 +13,7 @@ import { DataEmojis } from '../../dataUtils/DataTypes';
 import { useGetEmojisByCategory } from '../../dataUtils/emojiSelectors';
 import { useEmojiVirtualization } from '../../hooks/useEmojiVirtualization';
 import { useEmojiListRef } from '../context/ElementRefContext';
+import { useVisibleCategoriesState } from '../context/PickerContext';
 
 import { EmojiCategory } from './EmojiCategory';
 
@@ -46,7 +47,10 @@ export function EmojiList({ scrollTop }: { scrollTop: number }) {
               topOffset={currentOffset}
               onHeightReady={height => {
                 if (categoryHeights[category] !== height) {
-                  setCategoryHeights(prev => ({ ...prev, [category]: height }));
+                  setCategoryHeights(prev => ({
+                    ...prev,
+                    [category]: height
+                  }));
                 }
               }}
               scrollTop={scrollTop}
@@ -71,11 +75,14 @@ function RenderCategory({
   onHeightReady: (height: number) => void;
   scrollTop: number;
 }) {
+  const [visibleCategories] = useVisibleCategoriesState();
+
   const { virtualizedCounter, emojis, dimensions } = useEmojiVirtualization({
     categoryEmojis,
     topOffset,
     onHeightReady,
-    scrollTop
+    scrollTop,
+    isCategoryVisible: visibleCategories.includes(categoryConfig.category)
   });
 
   return (

package/src/components/context/PickerContext.tsx

@@ -35,6 +35,7 @@ export function PickerContextProvider({ children }: Props) {
   const emojiVariationPickerState = useState<DataEmoji | null>(null);
   const reactionsModeState = useState(reactionsDefaultOpen);
   const [isPastInitialLoad, setIsPastInitialLoad] = useState(false);
+  const visibleCategoriesState = useState<string[]>([]);
 
   useMarkInitialLoad(setIsPastInitialLoad);
 
@@ -53,7 +54,8 @@ export function PickerContextProvider({ children }: Props) {
         searchTerm,
         skinToneFanOpenState,
         suggestedUpdateState,
-        reactionsModeState
+        reactionsModeState,
+        visibleCategoriesState
       }}
     >
       {children}
@@ -77,6 +79,7 @@ const PickerContext = React.createContext<{
   disallowMouseRef: React.MutableRefObject<boolean>;
   disallowedEmojisRef: React.MutableRefObject<Record<string, boolean>>;
   reactionsModeState: ReactState<boolean>;
+  visibleCategoriesState: ReactState<Array<string>>;
 }>({
   activeCategoryState: [null, () => {}],
   activeSkinTone: [SkinTones.NEUTRAL, () => {}],
@@ -90,7 +93,8 @@ const PickerContext = React.createContext<{
   searchTerm: ['', () => new Promise<string>(() => undefined)],
   skinToneFanOpenState: [false, () => {}],
   suggestedUpdateState: [Date.now(), () => {}],
-  reactionsModeState: [false, () => {}]
+  reactionsModeState: [false, () => {}],
+  visibleCategoriesState: [[], () => []]
 });
 
 type Props = Readonly<{
@@ -155,6 +159,11 @@ export function useDisallowedEmojisRef() {
   return disallowedEmojisRef;
 }
 
+export function useVisibleCategoriesState() {
+  const { visibleCategoriesState } = React.useContext(PickerContext);
+  return visibleCategoriesState;
+}
+
 export function useUpdateSuggested(): [number, () => void] {
   const { suggestedUpdateState } = React.useContext(PickerContext);
 

package/src/components/navigation/CategoryNavigation.tsx

@@ -11,13 +11,15 @@ import { useScrollCategoryIntoView } from '../../hooks/useScrollCategoryIntoView
 import { useShouldHideCustomEmojis } from '../../hooks/useShouldHideCustomEmojis';
 import { isCustomCategory } from '../../typeRefinements/typeRefinements';
 import { useCategoryNavigationRef } from '../context/ElementRefContext';
+import { useVisibleCategoriesState } from '../context/PickerContext';
 
 import { CategoryButton } from './CategoryButton';
 
 export function CategoryNavigation() {
   const [activeCategory, setActiveCategory] = useState<string | null>(null);
+  const [, setVisibleCategories] = useVisibleCategoriesState();
   const scrollCategoryIntoView = useScrollCategoryIntoView();
-  useActiveCategoryScrollDetection(setActiveCategory);
+  useActiveCategoryScrollDetection({ setActiveCategory, setVisibleCategories });
   const isSearchMode = useIsSearchMode();
 
   const categoriesConfig = useCategoriesConfig();

package/src/hooks/preloadEmoji.ts

@@ -5,7 +5,7 @@ import { EmojiStyle } from '../types/exposedTypes';
 import { Dimensions } from '../virtualization/virtualizationHelpers';
 
 // eslint-disable-next-line max-params
-export function preloaEmojidIfNeeded(
+export function preloadEmojiIfNeeded(
   emoji: undefined | DataEmoji,
   emojiStyles: EmojiStyle,
   scrollTop: number,

package/src/hooks/useActiveCategoryScrollDetection.ts

@@ -4,13 +4,17 @@ import { categoryNameFromDom } from '../DomUtils/categoryNameFromDom';
 import { asSelectors, ClassNames } from '../DomUtils/classNames';
 import { useBodyRef } from '../components/context/ElementRefContext';
 
-export function useActiveCategoryScrollDetection(
-  setActiveCategory: (category: string) => void
-) {
+export function useActiveCategoryScrollDetection({
+  setActiveCategory,
+  setVisibleCategories
+}: {
+  setActiveCategory: (category: string) => void;
+  setVisibleCategories: (categories: string[]) => void;
+}) {
   const BodyRef = useBodyRef();
 
   useEffect(() => {
-    const visibleCategories = new Map();
+    const visibleCategories = new Map<string, number>();
     const bodyRef = BodyRef.current;
     const observer = new IntersectionObserver(
       entries => {
@@ -20,10 +24,18 @@ export function useActiveCategoryScrollDetection(
 
         for (const entry of entries) {
           const id = categoryNameFromDom(entry.target);
+
+          if (!id) {
+            continue;
+          }
+
           visibleCategories.set(id, entry.intersectionRatio);
         }
 
         const ratios = Array.from(visibleCategories);
+        setVisibleCategories(
+          ratios.filter(([_, ratio]) => ratio > 0).map(([id]) => id)
+        );
         const lastCategory = ratios[ratios.length - 1];
 
         if (lastCategory[1] == 1) {
@@ -44,5 +56,5 @@ export function useActiveCategoryScrollDetection(
     bodyRef?.querySelectorAll(asSelectors(ClassNames.category)).forEach(el => {
       observer.observe(el);
     });
-  }, [BodyRef, setActiveCategory]);
+  }, [BodyRef, setActiveCategory, setVisibleCategories]);
 }

package/src/hooks/useCategoryHeight.ts

@@ -5,7 +5,10 @@ import {
   useEmojiListRef,
   usePickerMainRef
 } from '../components/context/ElementRefContext';
-import { useReactionsModeState } from '../components/context/PickerContext';
+import {
+  useReactionsModeState,
+  useVisibleCategoriesState
+} from '../components/context/PickerContext';
 
 const EMOJI_SIZE_DEFAULT = 32;
 
@@ -22,6 +25,7 @@ export function useCategoryHeight(
   const [isReactionsMode] = useReactionsModeState();
   const PickerMainRef = usePickerMainRef();
   const emojiSizeRef = React.useRef<number | undefined>();
+  const [visibleCategories] = useVisibleCategoriesState();
   const [dimensions, setDimensions] = React.useState<{
     categoryHeight: number;
     emojisPerRow: number;
@@ -54,7 +58,12 @@ export function useCategoryHeight(
   // Recompute on data-count changes and when reactions mode toggles
   React.useEffect(() => {
     computeAndSetDimensions();
-  }, [emojiCount, isReactionsMode, computeAndSetDimensions]);
+  }, [
+    emojiCount,
+    isReactionsMode,
+    computeAndSetDimensions,
+    visibleCategories.length
+  ]);
 
   // Listen to transitionend on the picker root (where height transition occurs)
   React.useEffect(() => {

package/src/hooks/useEmojiVirtualization.tsx

@@ -17,7 +17,7 @@ import {
   shouldVirtualize
 } from '../virtualization/virtualizationHelpers';
 
-import { preloaEmojidIfNeeded } from './preloadEmoji';
+import { preloadEmojiIfNeeded } from './preloadEmoji';
 import { useCategoryHeight } from './useCategoryHeight';
 import { useIsEmojiDisallowed } from './useDisallowedEmojis';
 import { useIsEmojiHidden } from './useIsEmojiHidden';
@@ -26,12 +26,14 @@ export function useEmojiVirtualization({
   categoryEmojis,
   topOffset,
   onHeightReady,
-  scrollTop
+  scrollTop,
+  isCategoryVisible
 }: {
   categoryEmojis: DataEmojis;
   topOffset: number;
   onHeightReady: (height: number) => void;
   scrollTop: number;
+  isCategoryVisible: boolean;
 }) {
   const isEmojiHidden = useIsEmojiHidden();
   const lazyLoadEmojis = useLazyLoadEmojisConfig();
@@ -74,7 +76,7 @@ export function useEmojiVirtualization({
       })
     ) {
       virtualizedCounter++;
-      preloaEmojidIfNeeded(
+      preloadEmojiIfNeeded(
         emoji,
         emojiStyle,
         scrollTop,
@@ -86,6 +88,12 @@ export function useEmojiVirtualization({
       );
       return accumulator;
     }
+
+    if (!isCategoryVisible) {
+      virtualizedCounter++;
+      return accumulator;
+    }
+
     accumulator.push(
       <ClickableEmoji
         showVariations={showVariations}

package/src/hooks/useIsMounted.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export function useIsMounted() {
+  const [isMounted, setIsMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return isMounted;
+}

package/dist/hooks/useIsEverMounted.d.ts

@@ -1 +0,0 @@
-export declare function useIsEverMounted(): boolean;

package/src/hooks/useIsEverMounted.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-
-let isEverMounted = false;
-
-export function useIsEverMounted() {
-  const [isMounted, setIsMounted] = React.useState(isEverMounted);
-
-  React.useEffect(() => {
-    setIsMounted(true);
-    isEverMounted = true;
-  }, []);
-
-  return isMounted || isEverMounted;
-}