emoji-picker-react 4.13.3 → 4.14.0

package/src/components/header/Search/Search.tsx

@@ -1,6 +1,5 @@
 import { cx } from 'flairup';
 import * as React from 'react';
-import { useState } from 'react';
 
 import { darkMode, stylesheet } from '../../../Stylesheet/stylesheet';
 import {
@@ -17,7 +16,6 @@ import { useSearchInputRef } from '../../context/ElementRefContext';
 import { SkinTonePicker } from '../SkinTonePicker/SkinTonePicker';
 
 import { BtnClearSearch } from './BtnClearSearch';
-import { CssSearch } from './CssSearch';
 import { IcnSearch } from './IcnSearch';
 import SVGTimes from './svg/times.svg';
 
@@ -40,7 +38,6 @@ export function SearchContainer() {
 }
 
 export function Search() {
-  const [inc, setInc] = useState(0);
   const closeAllOpenToggles = useCloseAllOpenToggles();
   const SearchInputRef = useSearchInputRef();
   const placeholder = useSearchPlaceHolderConfig();
@@ -52,7 +49,6 @@ export function Search() {
 
   return (
     <Relative className={cx(styles.searchContainer)}>
-      <CssSearch value={value} />
       <input
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus={autoFocus}
@@ -63,7 +59,6 @@ export function Search() {
         aria-controls="epr-search-id"
         placeholder={placeholder}
         onChange={event => {
-          setInc(inc + 1);
           onChange(event?.target?.value ?? value);
         }}
         ref={SearchInputRef}

package/src/components/main/PickerMain.tsx

@@ -97,8 +97,10 @@ const DarkTheme = {
     'var(--epr-dark-category-icon-active-color)',
   '--epr-skin-tone-picker-menu-color':
     'var(--epr-dark-skin-tone-picker-menu-color)',
-  '--epr-skin-tone-outer-border-color': 'var(--epr-dark-skin-tone-outer-border-color)',
-  '--epr-skin-tone-inner-border-color': 'var(--epr-dark-skin-tone-inner-border-color)'
+  '--epr-skin-tone-outer-border-color':
+    'var(--epr-dark-skin-tone-outer-border-color)',
+  '--epr-skin-tone-inner-border-color':
+    'var(--epr-dark-skin-tone-inner-border-color)'
 };
 
 const styles = stylesheet.create({
@@ -113,7 +115,7 @@ const styles = 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'
@@ -213,8 +215,9 @@ const styles = stylesheet.create({
       '--epr-dark-emoji-variation-indicator-color': '#444',
       '--epr-dark-category-icon-active-color': '#3271b7',
       '--epr-dark-skin-tone-picker-menu-color': '#22222295',
-      '--epr-dark-skin-tone-outer-border-color': 'var(--epr-dark-picker-border-color)',
-      '--epr-dark-skin-tone-inner-border-color': '#00000000',
+      '--epr-dark-skin-tone-outer-border-color':
+        'var(--epr-dark-picker-border-color)',
+      '--epr-dark-skin-tone-inner-border-color': '#00000000'
     }
   },
   autoThemeDark: {

package/src/dataUtils/emojiSelectors.ts

@@ -1,6 +1,10 @@
+import React from 'react';
+
+import { useUpdateSuggested } from '../components/context/PickerContext';
 import { Categories } from '../config/categoryConfig';
 import { cdnUrl } from '../config/cdnUrls';
 import { CustomEmoji } from '../config/customEmojiConfig';
+import { useSuggestedEmojisModeConfig } from '../config/useConfig';
 import emojis from '../data/emojis';
 import skinToneVariations, {
   skinTonesMapped
@@ -9,6 +13,7 @@ import { EmojiStyle, SkinTones } from '../types/exposedTypes';
 
 import { DataEmoji, DataEmojis, EmojiProperties, WithName } from './DataTypes';
 import { indexEmoji } from './alphaNumericEmojiIndex';
+import { getSuggested } from './suggested';
 
 export function emojiNames(emoji: WithName): string[] {
   return emoji[EmojiProperties.name] ?? [];
@@ -47,9 +52,30 @@ export function emojiUnified(emoji: DataEmoji, skinTone?: string): string {
   return emojiVariationUnified(emoji, skinTone) ?? unified;
 }
 
-export function emojisByCategory(category: Categories): DataEmojis {
-  // @ts-ignore
-  return emojis?.[category] ?? [];
+export function useGetEmojisByCategory(): (Category: Categories) => DataEmojis {
+  const suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
+  const [suggestedUpdated] = useUpdateSuggested();
+
+  const suggested = React.useMemo(
+    () => {
+      const suggested = getSuggested(suggestedEmojisModeConfig) ?? [];
+
+      return suggested
+        .map(s => emojiByUnified(s.unified))
+        .filter(Boolean) as DataEmojis;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [suggestedUpdated, suggestedEmojisModeConfig]
+  );
+
+  return function getEmojisByCategory(category: Categories): DataEmojis {
+    if (category === Categories.SUGGESTED) {
+      return suggested;
+    }
+
+    // @ts-ignore
+    return emojis[category] ?? [];
+  };
 }
 
 // WARNING: DO NOT USE DIRECTLY

package/src/hooks/preloadEmoji.ts

@@ -2,17 +2,24 @@ import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiUnified, emojiVariations } from '../dataUtils/emojiSelectors';
 import { EmojiStyle } from '../types/exposedTypes';
+import { Dimensions } from '../virtualization/virtualizationHelpers';
 
-export function preloadEmoji(
-  getEmojiUrl: GetEmojiUrl,
+// eslint-disable-next-line max-params
+export function preloaEmojidIfNeeded(
   emoji: undefined | DataEmoji,
-  emojiStyle: EmojiStyle
+  emojiStyles: EmojiStyle,
+  scrollTop: number,
+  clientHeight: number,
+  topOffset: number,
+  style: { top: number } | undefined,
+  dimensions: Dimensions,
+  getEmojiUrl: GetEmojiUrl
 ): void {
   if (!emoji) {
     return;
   }
 
-  if (emojiStyle === EmojiStyle.NATIVE) {
+  if (emojiStyles === EmojiStyle.NATIVE) {
     return;
   }
 
@@ -22,12 +29,47 @@ export function preloadEmoji(
     return;
   }
 
-  emojiVariations(emoji).forEach((variation) => {
-    const emojiUrl = getEmojiUrl(variation, emojiStyle);
-    preloadImage(emojiUrl);
+  // preload only if the emoji is a few rows below the viewport
+  if (!style || !dimensions) {
+    return;
+  }
+
+  setTimeout(() => {
+    const emojiTop = topOffset + style.top;
+    const viewportBottom = scrollTop + clientHeight;
+
+    const isJustBelowViewport =
+      emojiTop >= viewportBottom &&
+      emojiTop < viewportBottom + dimensions.emojiSize * 2;
+
+    if (isJustBelowViewport) {
+      preloadEmoji(getEmojiUrl, emoji, emojiStyles);
+    }
   });
+}
+
+export function preloadEmoji(
+  getEmojiUrl: GetEmojiUrl,
+  emoji: undefined | DataEmoji,
+  emojiStyle: EmojiStyle
+): void {
+  if (!emoji) {
+    return;
+  }
 
+  const unified = emojiUnified(emoji);
+
+  if (preloadedEmojs.has(unified)) {
+    return;
+  }
   preloadedEmojs.add(unified);
+
+  emojiVariations(emoji)
+    .concat(unified)
+    .forEach(variation => {
+      const emojiUrl = getEmojiUrl(variation, emojiStyle);
+      preloadImage(emojiUrl);
+    });
 }
 
 export const preloadedEmojs: Set<string> = new Set();

package/src/hooks/useCategoryHeight.ts

@@ -0,0 +1,92 @@
+import * as React from 'react';
+
+import { EmojiButtonSelector } from '../DomUtils/selectors';
+import {
+  useEmojiListRef,
+  usePickerMainRef
+} from '../components/context/ElementRefContext';
+import { useReactionsModeState } from '../components/context/PickerContext';
+
+const EMOJI_SIZE_DEFAULT = 32;
+
+export function useCategoryHeight(
+  emojiCount: number
+):
+  | {
+      categoryHeight: number;
+      emojisPerRow: number;
+      emojiSize: number;
+    }
+  | undefined {
+  const EmojiListRef = useEmojiListRef();
+  const [isReactionsMode] = useReactionsModeState();
+  const PickerMainRef = usePickerMainRef();
+  const emojiSizeRef = React.useRef<number | undefined>();
+  const [dimensions, setDimensions] = React.useState<{
+    categoryHeight: number;
+    emojisPerRow: number;
+    emojiSize: number;
+  }>();
+
+  // Helper to compute and store dimensions based on current DOM
+  const computeAndSetDimensions = React.useCallback(() => {
+    const listEl = EmojiListRef.current;
+    if (!listEl) return;
+
+    const emojiElement = listEl.querySelector(
+      EmojiButtonSelector
+    ) as HTMLElement | null;
+
+    const measured = emojiElement?.clientHeight;
+    const emojiSize = measured ?? emojiSizeRef.current ?? EMOJI_SIZE_DEFAULT;
+    emojiSizeRef.current = emojiSize;
+    const pickerWidth = listEl.clientWidth;
+
+    if (pickerWidth === 0 || emojiSize === 0) return;
+
+    const emojisPerRow = Math.max(1, Math.floor(pickerWidth / emojiSize));
+    const rowCount = Math.ceil(emojiCount / emojisPerRow);
+    const categoryHeight = rowCount * emojiSize;
+
+    setDimensions({ categoryHeight, emojisPerRow, emojiSize });
+  }, [EmojiListRef, emojiCount]);
+
+  // Recompute on data-count changes and when reactions mode toggles
+  React.useEffect(() => {
+    computeAndSetDimensions();
+  }, [emojiCount, isReactionsMode, computeAndSetDimensions]);
+
+  // Listen to transitionend on the picker root (where height transition occurs)
+  React.useEffect(() => {
+    const rootEl = PickerMainRef.current;
+    if (!rootEl) return;
+
+    const handler = (e: Event) => {
+      const te = e as TransitionEvent;
+      const 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(() => computeAndSetDimensions());
+        } else {
+          requestAnimationFrame(() => computeAndSetDimensions());
+        }
+      }
+    };
+
+    rootEl.addEventListener('transitionend', handler, {
+      passive: true
+    });
+    return () => {
+      rootEl.removeEventListener('transitionend', handler);
+    };
+  }, [PickerMainRef, computeAndSetDimensions]);
+
+  return dimensions;
+}

package/src/hooks/useEmojiVirtualization.tsx

@@ -0,0 +1,112 @@
+import { ReactNode, useEffect } from 'react';
+import * as React from 'react';
+
+import { useBodyRef } from '../components/context/ElementRefContext';
+import { useActiveSkinToneState } from '../components/context/PickerContext';
+import { ClickableEmoji } from '../components/emoji/Emoji';
+import {
+  useEmojiStyleConfig,
+  useGetEmojiUrlConfig,
+  useLazyLoadEmojisConfig,
+  useSkinTonesDisabledConfig
+} from '../config/useConfig';
+import { DataEmojis } from '../dataUtils/DataTypes';
+import { emojiUnified } from '../dataUtils/emojiSelectors';
+import {
+  getEmojiPositionStyle,
+  shouldVirtualize
+} from '../virtualization/virtualizationHelpers';
+
+import { preloaEmojidIfNeeded } from './preloadEmoji';
+import { useCategoryHeight } from './useCategoryHeight';
+import { useIsEmojiDisallowed } from './useDisallowedEmojis';
+import { useIsEmojiHidden } from './useIsEmojiHidden';
+
+export function useEmojiVirtualization({
+  categoryEmojis,
+  topOffset,
+  onHeightReady,
+  scrollTop
+}: {
+  categoryEmojis: DataEmojis;
+  topOffset: number;
+  onHeightReady: (height: number) => void;
+  scrollTop: number;
+}) {
+  const isEmojiHidden = useIsEmojiHidden();
+  const lazyLoadEmojis = useLazyLoadEmojisConfig();
+  const emojiStyle = useEmojiStyleConfig();
+  const [activeSkinTone] = useActiveSkinToneState();
+  const isEmojiDisallowed = useIsEmojiDisallowed();
+  const getEmojiUrl = useGetEmojiUrlConfig();
+  const showVariations = !useSkinTonesDisabledConfig();
+  const BodyRef = useBodyRef();
+
+  let virtualizedCounter = 0;
+
+  const emojisToPush = categoryEmojis.filter(emoji => {
+    const isDisallowed = isEmojiDisallowed(emoji);
+    const { failedToLoad, filteredOut, hidden } = isEmojiHidden(emoji);
+
+    return !failedToLoad && !filteredOut && !hidden && !isDisallowed;
+  });
+
+  const dimensions = useCategoryHeight(emojisToPush.length);
+
+  useEffect(() => {
+    if (dimensions) {
+      onHeightReady(dimensions.categoryHeight);
+    }
+  }, [dimensions, onHeightReady, emojisToPush.length]);
+
+  const emojis = emojisToPush.reduce((accumulator, emoji, index) => {
+    const unified = emojiUnified(emoji, activeSkinTone);
+    const style = getEmojiPositionStyle(dimensions, index);
+    if (
+      dimensions &&
+      BodyRef.current &&
+      shouldVirtualize({
+        scrollTop,
+        clientHeight: BodyRef.current?.clientHeight ?? 0,
+        topOffset,
+        style,
+        dimensions
+      })
+    ) {
+      virtualizedCounter++;
+      preloaEmojidIfNeeded(
+        emoji,
+        emojiStyle,
+        scrollTop,
+        BodyRef.current?.clientHeight ?? 0,
+        topOffset,
+        style,
+        dimensions,
+        getEmojiUrl
+      );
+      return accumulator;
+    }
+    accumulator.push(
+      <ClickableEmoji
+        showVariations={showVariations}
+        key={unified}
+        emoji={emoji}
+        unified={unified}
+        emojiStyle={emojiStyle}
+        lazyLoad={lazyLoadEmojis}
+        getEmojiUrl={getEmojiUrl}
+        style={{
+          ...style,
+          position: 'absolute'
+        }}
+      />
+    );
+    return accumulator;
+  }, [] as ReactNode[]);
+
+  return {
+    virtualizedCounter,
+    emojis,
+    dimensions
+  };
+}

package/src/hooks/useFilter.ts

@@ -11,7 +11,6 @@ import {
 import { useSearchResultsConfig } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiNames } from '../dataUtils/emojiSelectors';
-import doesBrowserSupportCssHas from '../globals/doesBrowserSupportCssHas';
 
 import { useFocusSearchInput } from './useFocus';
 
@@ -78,34 +77,28 @@ export function useFilter() {
   };
 
   function onChange(inputValue: string) {
-    if (doesBrowserSupportCssHas) {
-      return;
-    }
-
-    setTimeout(() => {
-      const filter = filterRef.current;
+    const filter = filterRef.current;
 
-      const nextValue = inputValue.toLowerCase();
+    const nextValue = inputValue.toLowerCase();
 
-      if (filter?.[nextValue] || nextValue.length <= 1) {
-        return applySearch(nextValue);
-      }
+    if (filter?.[nextValue] || nextValue.length <= 1) {
+      return applySearch(nextValue);
+    }
 
-      const longestMatch = findLongestMatch(nextValue, filter);
+    const longestMatch = findLongestMatch(nextValue, filter);
 
-      if (!longestMatch) {
-        // Can we even get here?
-        // If so, we need to search among all emojis
-        return applySearch(nextValue);
-      }
+    if (!longestMatch) {
+      // Can we even get here?
+      // If so, we need to search among all emojis
+      return applySearch(nextValue);
+    }
 
-      setFilterRef(current =>
-        Object.assign(current, {
-          [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue)
-        })
-      );
-      applySearch(nextValue);
-    });
+    setFilterRef(current =>
+      Object.assign(current, {
+        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue)
+      })
+    );
+    applySearch(nextValue);
   }
 }
 

package/src/hooks/useOnScroll.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import { ElementRef } from '../components/context/ElementRefContext';
 
@@ -6,6 +6,7 @@ import { useCloseAllOpenToggles } from './useCloseAllOpenToggles';
 
 export function useOnScroll(BodyRef: ElementRef) {
   const closeAllOpenToggles = useCloseAllOpenToggles();
+  const [scrollTop, setScrollTop] = useState(0);
 
   useEffect(() => {
     const bodyRef = BodyRef.current;
@@ -18,6 +19,7 @@ export function useOnScroll(BodyRef: ElementRef) {
     });
 
     function onScroll() {
+      setScrollTop(bodyRef?.scrollTop ?? 0);
       closeAllOpenToggles();
     }
 
@@ -25,4 +27,6 @@ export function useOnScroll(BodyRef: ElementRef) {
       bodyRef?.removeEventListener('scroll', onScroll);
     };
   }, [BodyRef, closeAllOpenToggles]);
+
+  return scrollTop;
 }

package/src/virtualization/virtualizationHelpers.ts

@@ -0,0 +1,45 @@
+export function shouldVirtualize({
+  scrollTop,
+  clientHeight,
+  topOffset,
+  style,
+  dimensions
+}: {
+  scrollTop: number;
+  clientHeight: number;
+  topOffset: number;
+  style: { top: number } | undefined;
+  dimensions: Dimensions;
+}): boolean {
+  if (!style || !dimensions) {
+    return false;
+  }
+
+  const emojiTop = topOffset + style.top;
+  const emojiBottom = emojiTop + dimensions.emojiSize;
+
+  const isVisible =
+    emojiBottom + dimensions.emojiSize * 2 >= scrollTop &&
+    emojiTop <= scrollTop + clientHeight + dimensions.emojiSize;
+
+  return !isVisible;
+}
+
+export function getEmojiPositionStyle(dimensions: Dimensions, index: number) {
+  return dimensions
+    ? {
+        top: Math.floor(index / dimensions.emojisPerRow) * dimensions.emojiSize,
+        left: (index % dimensions.emojisPerRow) * dimensions.emojiSize
+      }
+    : undefined;
+}
+
+// preload emoji if it is one row below viewport
+
+export type Dimensions =
+  | {
+      emojiSize: number;
+      emojisPerRow: number;
+      categoryHeight: number;
+    }
+  | undefined;

package/dist/components/body/Suggested.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { CategoryConfig } from '../../config/categoryConfig';
-declare type Props = Readonly<{
-    categoryConfig: CategoryConfig;
-}>;
-export declare function Suggested({ categoryConfig }: Props): JSX.Element | null;
-export {};

package/dist/components/header/Search/CssSearch.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare function CssSearch({ value }: {
-    value: undefined | string;
-}): JSX.Element | null;

package/dist/globals/doesBrowserSupportCssHas.d.ts

@@ -1,2 +0,0 @@
-declare const browserSupportsCssHas: boolean;
-export default browserSupportsCssHas;

package/src/components/body/Suggested.tsx

@@ -1,69 +0,0 @@
-import * as React from 'react';
-
-import { CategoryConfig } from '../../config/categoryConfig';
-import {
-  useEmojiStyleConfig,
-  useGetEmojiUrlConfig,
-  useSuggestedEmojisModeConfig
-} from '../../config/useConfig';
-import { emojiByUnified } from '../../dataUtils/emojiSelectors';
-import { getSuggested } from '../../dataUtils/suggested';
-import { useIsEmojiDisallowed } from '../../hooks/useDisallowedEmojis';
-import { useIsEverMounted } from '../../hooks/useIsEverMounted';
-import { useUpdateSuggested } from '../context/PickerContext';
-import { ClickableEmoji } from '../emoji/Emoji';
-
-import { EmojiCategory } from './EmojiCategory';
-
-type Props = Readonly<{
-  categoryConfig: CategoryConfig;
-}>;
-
-export function Suggested({ categoryConfig }: Props) {
-  const [suggestedUpdated] = useUpdateSuggested();
-  const isMounted = useIsEverMounted();
-  const suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
-  const getEmojiUrl = useGetEmojiUrlConfig();
-  const suggested = React.useMemo(
-    () => getSuggested(suggestedEmojisModeConfig) ?? [],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [suggestedUpdated, suggestedEmojisModeConfig]
-  );
-  const emojiStyle = useEmojiStyleConfig();
-  const isEmojiDisallowed = useIsEmojiDisallowed();
-
-  if (!isMounted) {
-    return null;
-  }
-
-  return (
-    <EmojiCategory
-      categoryConfig={categoryConfig}
-      hiddenOnSearch
-      hidden={suggested.length === 0}
-    >
-      {suggested.map(suggestedItem => {
-        const emoji = emojiByUnified(suggestedItem.original);
-
-        if (!emoji) {
-          return null;
-        }
-
-        if (isEmojiDisallowed(emoji)) {
-          return null;
-        }
-
-        return (
-          <ClickableEmoji
-            showVariations={false}
-            unified={suggestedItem.unified}
-            emojiStyle={emojiStyle}
-            emoji={emoji}
-            key={suggestedItem.unified}
-            getEmojiUrl={getEmojiUrl}
-          />
-        );
-      })}
-    </EmojiCategory>
-  );
-}

package/src/components/header/Search/CssSearch.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-
-import { ClassNames, asSelectors } from '../../../DomUtils/classNames';
-import { getNormalizedSearchTerm } from '../../../hooks/useFilter';
-
-const SCOPE = `${asSelectors(ClassNames.emojiPicker)} ${asSelectors(
-  ClassNames.emojiList
-)}`;
-
-const EMOJI_BUTTON = ['button', asSelectors(ClassNames.emoji)].join('');
-const CATEGORY = asSelectors(ClassNames.category);
-
-export function CssSearch({ value }: { value: undefined | string }) {
-  if (!value) {
-    return null;
-  }
-
-  const q = genQuery(value);
-
-  return (
-    <style>{`
-    ${SCOPE} ${EMOJI_BUTTON} {
-      display: none;
-    }
-
-
-    ${SCOPE} ${q} {
-      display: flex;
-    }
-
-    ${SCOPE} ${CATEGORY}:not(:has(${q})) {
-      display: none;
-    }
-  `}</style>
-  );
-}
-
-function genQuery(value: string): string {
-  return [
-    EMOJI_BUTTON,
-    '[data-full-name*="',
-    getNormalizedSearchTerm(value),
-    '"]'
-  ].join('');
-}