emoji-picker-react 4.13.3 → 4.14.0

package/dist/hooks/preloadEmoji.d.ts

@@ -1,5 +1,9 @@
 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: {
+    top: number;
+} | undefined, dimensions: Dimensions, getEmojiUrl: GetEmojiUrl): void;
 export declare function preloadEmoji(getEmojiUrl: GetEmojiUrl, emoji: undefined | DataEmoji, emojiStyle: EmojiStyle): void;
 export declare const preloadedEmojs: Set<string>;

package/dist/hooks/useCategoryHeight.d.ts

@@ -0,0 +1,5 @@
+export declare function useCategoryHeight(emojiCount: number): {
+    categoryHeight: number;
+    emojisPerRow: number;
+    emojiSize: number;
+} | undefined;

package/dist/hooks/useEmojiVirtualization.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { DataEmojis } from '../dataUtils/DataTypes';
+export declare function useEmojiVirtualization({ categoryEmojis, topOffset, onHeightReady, scrollTop }: {
+    categoryEmojis: DataEmojis;
+    topOffset: number;
+    onHeightReady: (height: number) => void;
+    scrollTop: number;
+}): {
+    virtualizedCounter: number;
+    emojis: ReactNode[];
+    dimensions: {
+        categoryHeight: number;
+        emojisPerRow: number;
+        emojiSize: number;
+    } | undefined;
+};

package/dist/hooks/useOnScroll.d.ts

@@ -1,2 +1,2 @@
 import { ElementRef } from '../components/context/ElementRefContext';
-export declare function useOnScroll(BodyRef: ElementRef): void;
+export declare function useOnScroll(BodyRef: ElementRef): number;

package/dist/virtualization/virtualizationHelpers.d.ts

@@ -0,0 +1,18 @@
+export declare function shouldVirtualize({ scrollTop, clientHeight, topOffset, style, dimensions }: {
+    scrollTop: number;
+    clientHeight: number;
+    topOffset: number;
+    style: {
+        top: number;
+    } | undefined;
+    dimensions: Dimensions;
+}): boolean;
+export declare function getEmojiPositionStyle(dimensions: Dimensions, index: number): {
+    top: number;
+    left: number;
+} | undefined;
+export declare type Dimensions = {
+    emojiSize: number;
+    emojisPerRow: number;
+    categoryHeight: number;
+} | undefined;

package/package.json

@@ -1,7 +1,8 @@
 {
-  "version": "4.13.3",
+  "version": "4.14.0",
   "license": "MIT",
   "main": "dist/index.js",
+  "homepage": "https://ealush.com/emoji-picker-react",
   "typings": "dist/index.d.ts",
   "files": [
     "dist",

package/src/DomUtils/elementPositionInRow.ts

@@ -16,131 +16,6 @@ export function elementCountInRow(
   return Math.floor(parentWidth / elementWidth);
 }
 
-export function elementIndexInRow(
-  parent: NullableElement,
-  element: NullableElement
-): number {
-  if (!parent || !element) {
-    return 0;
-  }
-
-  const elementWidth = element.getBoundingClientRect().width;
-  const elementLeft = element.getBoundingClientRect().left;
-  const parentLeft = parent.getBoundingClientRect().left;
-
-  return Math.floor((elementLeft - parentLeft) / elementWidth);
-}
-
-export function rowNumber(
-  parent: NullableElement,
-  element: NullableElement
-): number {
-  if (!parent || !element) {
-    return 0;
-  }
-
-  const elementHeight = element.getBoundingClientRect().height;
-  const elementTop = element.getBoundingClientRect().top;
-  const parentTop = parent.getBoundingClientRect().top;
-  return Math.round((elementTop - parentTop) / elementHeight);
-}
-
-export function hasNextRow(
-  parent: NullableElement,
-  element: NullableElement
-): boolean {
-  if (!parent || !element) {
-    return false;
-  }
-
-  const elementHeight = element.getBoundingClientRect().height;
-  const elementTop = element.getBoundingClientRect().top;
-  const parentTop = parent.getBoundingClientRect().top;
-  const parentHeight = parent.getBoundingClientRect().height;
-
-  return Math.round(elementTop - parentTop + elementHeight) < parentHeight;
-}
-
-function getRowElements(
-  elements: HTMLElement[],
-  row: number,
-  elementsInRow: number
-): HTMLElement[] {
-  if (row === -1) {
-    const lastRow = Math.floor((elements.length - 1) / elementsInRow);
-    const firstElementIndex = lastRow * elementsInRow;
-    const lastElementIndex = elements.length - 1;
-    return elements.slice(firstElementIndex, lastElementIndex + 1);
-  }
-
-  return elements.slice(row * elementsInRow, (row + 1) * elementsInRow);
-}
-
-function getNextRowElements(
-  allElements: HTMLElement[],
-  currentRow: number,
-  elementsInRow: number
-): HTMLElement[] {
-  const nextRow = currentRow + 1;
-
-  if (nextRow * elementsInRow > allElements.length) {
-    return [];
-  }
-
-  return getRowElements(allElements, nextRow, elementsInRow);
-}
-
-export function getElementInRow(
-  elements: HTMLElement[],
-  row: number,
-  elementsInRow: number,
-  indexInRow: number
-): NullableElement {
-  const rowElements = getRowElements(elements, row, elementsInRow);
-  // get element, default to last
-  return rowElements[indexInRow] || rowElements[rowElements.length - 1] || null;
-}
-
-export function getElementInNextRow(
-  allElements: HTMLElement[],
-  currentRow: number,
-  elementsInRow: number,
-  index: number
-): NullableElement {
-  const nextRowElements = getNextRowElements(
-    allElements,
-    currentRow,
-    elementsInRow
-  );
-
-  // return item in index, or last item in row
-  return (
-    nextRowElements[index] ||
-    nextRowElements[nextRowElements.length - 1] ||
-    null
-  );
-}
-
-export function getElementInPrevRow(
-  allElements: HTMLElement[],
-  currentRow: number,
-  elementsInRow: number,
-  index: number
-): NullableElement {
-  const prevRowElements = getRowElements(
-    allElements,
-    currentRow - 1,
-    elementsInRow
-  );
-
-  // default to last
-  return (
-    prevRowElements[index] ||
-    prevRowElements[prevRowElements.length - 1] ||
-    null
-  );
-}
-
 export function firstVisibleElementInContainer(
   parent: NullableElement,
   elements: HTMLElement[],
@@ -183,18 +58,20 @@ export function hasNextElementSibling(element: HTMLElement) {
   return !!element.nextElementSibling;
 }
 
-function getLabelHeight(parentNode: HTMLElement) {
-  const labels = Array.from(
-    parentNode.querySelectorAll(asSelectors(ClassNames.label))
-  );
+export function getLabelHeight(parentNode: NullableElement) {
+  if (!parentNode) {
+    return DEFAULT_LABEL_HEIGHT;
+  }
+
+  const label = parentNode.querySelector(asSelectors(ClassNames.label));
 
-  for (const label of labels) {
+  if (label) {
     const height = label.getBoundingClientRect().height;
-    // return height if label is not hidden
     if (height > 0) {
       return height;
     }
   }
 
+  // fallback to default
   return DEFAULT_LABEL_HEIGHT;
 }

package/src/DomUtils/keyboardNavigation.ts

@@ -1,12 +1,4 @@
-import {
-  elementCountInRow,
-  elementIndexInRow,
-  getElementInNextRow,
-  getElementInPrevRow,
-  getElementInRow,
-  hasNextRow,
-  rowNumber
-} from './elementPositionInRow';
+import { elementCountInRow } from './elementPositionInRow';
 import { focusElement } from './focusElement';
 import { scrollEmojiAboveLabel } from './scrollTo';
 import {
@@ -104,31 +96,47 @@ function visibleEmojiOneRowUp(element: HTMLElement) {
 
   const categoryContent = closestCategoryContent(element);
   const category = closestCategory(categoryContent);
-  const indexInRow = elementIndexInRow(categoryContent, element);
-  const row = rowNumber(categoryContent, element);
   const countInRow = elementCountInRow(categoryContent, element);
 
-  if (row === 0) {
-    const prevVisibleCategory = prevCategory(category);
+  const emojisInCurrentCategory = allVisibleEmojis(category);
+  const currentEmojiIndex = emojisInCurrentCategory.indexOf(element);
+  const indexInRow = currentEmojiIndex % countInRow;
 
-    if (!prevVisibleCategory) {
-      return null;
-    }
+  if (currentEmojiIndex === -1) {
+    return null;
+  }
+
+  if (emojisInCurrentCategory[currentEmojiIndex - countInRow]) {
+    return emojisInCurrentCategory[currentEmojiIndex - countInRow];
+  }
+
+  const prevVisibleCategory = prevCategory(category);
+
+  if (!prevVisibleCategory) {
+    return null;
+  }
+
+  const 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
+
+  const lastIndexInRow = (allPrevEmojis.length % countInRow) - 1;
 
-    return getElementInRow(
-      allVisibleEmojis(prevVisibleCategory),
-      -1, // last row
-      countInRow,
-      indexInRow
-    );
+  if (indexInRow > lastIndexInRow) {
+    return allPrevEmojis.at(-1);
   }
 
-  return getElementInPrevRow(
-    allVisibleEmojis(categoryContent),
-    row,
-    countInRow,
-    indexInRow
-  );
+  // otherwise, return the last emoji that shares the same indexInRow
+
+  for (let i = allPrevEmojis.length - 1; i >= 0; i--) {
+    if (i % countInRow === indexInRow) {
+      return allPrevEmojis[i];
+    }
+  }
+
+  return allPrevEmojis.at(-1);
 }
 
 function visibleEmojiOneRowDown(element: HTMLElement) {
@@ -138,30 +146,36 @@ function visibleEmojiOneRowDown(element: HTMLElement) {
 
   const categoryContent = closestCategoryContent(element);
   const category = closestCategory(categoryContent);
-  const indexInRow = elementIndexInRow(categoryContent, element);
-  const row = rowNumber(categoryContent, element);
   const countInRow = elementCountInRow(categoryContent, element);
-  if (!hasNextRow(categoryContent, element)) {
-    const nextVisibleCategory = nextCategory(category);
 
-    if (!nextVisibleCategory) {
-      return null;
-    }
+  const emojisInCurrentCategory = allVisibleEmojis(category);
+  const currentEmojiIndex = emojisInCurrentCategory.indexOf(element);
 
-    return getElementInRow(
-      allVisibleEmojis(nextVisibleCategory),
-      0,
-      countInRow,
-      indexInRow
-    );
+  if (currentEmojiIndex === -1) {
+    return null;
   }
 
-  const itemInNextRow = getElementInNextRow(
-    allVisibleEmojis(categoryContent),
-    row,
-    countInRow,
-    indexInRow
-  );
+  // the remainder until the end of the row
+  const remainder = countInRow - (currentEmojiIndex % countInRow) - 1;
+  const firstInNextRow = currentEmojiIndex + remainder + 1;
+
+  if (emojisInCurrentCategory[firstInNextRow]) {
+    // if we have a next row, search in the next row for the last available emoji
+    for (let p = currentEmojiIndex + countInRow; p % countInRow >= 0; p--) {
+      if (emojisInCurrentCategory[p]) {
+        return emojisInCurrentCategory[p];
+      }
+    }
+  }
+
+  const indexInRow = currentEmojiIndex % countInRow;
+
+  const nextVisibleCategory = nextCategory(category);
+  const emojisInNextCategory = allVisibleEmojis(nextVisibleCategory);
+
+  if (emojisInNextCategory[indexInRow]) {
+    return emojisInNextCategory[indexInRow];
+  }
 
-  return itemInNextRow;
+  return emojisInNextCategory.at(0) ?? null;
 }

package/src/components/body/Body.tsx

@@ -17,7 +17,7 @@ import { EmojiVariationPicker } from './EmojiVariationPicker';
 
 export function Body() {
   const BodyRef = useBodyRef();
-  useOnScroll(BodyRef);
+  const scrollTop = useOnScroll(BodyRef);
   useMouseDownHandlers(BodyRef, MOUSE_EVENT_SOURCE.PICKER);
   useOnMouseMove();
 
@@ -27,7 +27,7 @@ export function Body() {
       ref={BodyRef}
     >
       <EmojiVariationPicker />
-      <EmojiList />
+      <EmojiList scrollTop={scrollTop} />
     </div>
   );
 }

package/src/components/body/EmojiCategory.tsx

@@ -18,13 +18,15 @@ type Props = Readonly<{
   children?: React.ReactNode;
   hidden?: boolean;
   hiddenOnSearch?: boolean;
+  height?: number;
 }>;
 
 export function EmojiCategory({
   categoryConfig,
   children,
   hidden,
-  hiddenOnSearch
+  hiddenOnSearch,
+  height
 }: Props) {
   const category = categoryFromCategoryConfig(categoryConfig);
   const categoryName = categoryNameFromCategoryConfig(categoryConfig);
@@ -40,7 +42,9 @@ export function EmojiCategory({
       aria-label={categoryName}
     >
       <h2 className={cx(styles.label)}>{categoryName}</h2>
-      <div className={cx(styles.categoryContent)}>{children}</div>
+      <div className={cx(styles.categoryContent)} style={{ height }}>
+        {children}
+      </div>
     </li>
   );
 }
@@ -48,9 +52,7 @@ export function EmojiCategory({
 const styles = stylesheet.create({
   category: {
     '.': ClassNames.category,
-    ':not(:has(.epr-visible))': {
-      display: 'none'
-    }
+    position: 'relative'
   },
   categoryContent: {
     '.': ClassNames.categoryContent,

package/src/components/body/EmojiList.tsx

@@ -2,50 +2,54 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
+import { getLabelHeight } from '../../DomUtils/elementPositionInRow';
 import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
-  Categories,
   CategoryConfig,
   categoryFromCategoryConfig
 } from '../../config/categoryConfig';
-import {
-  useCategoriesConfig,
-  useEmojiStyleConfig,
-  useGetEmojiUrlConfig,
-  useLazyLoadEmojisConfig,
-  useSkinTonesDisabledConfig
-} from '../../config/useConfig';
-import { emojisByCategory, emojiUnified } from '../../dataUtils/emojiSelectors';
-import { useIsEmojiDisallowed } from '../../hooks/useDisallowedEmojis';
-import { useIsEmojiHidden } from '../../hooks/useIsEmojiHidden';
-import {
-  useActiveSkinToneState,
-  useIsPastInitialLoad
-} from '../context/PickerContext';
-import { ClickableEmoji } from '../emoji/Emoji';
+import { useCategoriesConfig } from '../../config/useConfig';
+import { DataEmojis } from '../../dataUtils/DataTypes';
+import { useGetEmojisByCategory } from '../../dataUtils/emojiSelectors';
+import { useEmojiVirtualization } from '../../hooks/useEmojiVirtualization';
+import { useEmojiListRef } from '../context/ElementRefContext';
 
 import { EmojiCategory } from './EmojiCategory';
-import { Suggested } from './Suggested';
 
-export function EmojiList() {
+export function EmojiList({ scrollTop }: { scrollTop: number }) {
   const categories = useCategoriesConfig();
-  const renderdCategoriesCountRef = React.useRef(0);
+  const [categoryHeights, setCategoryHeights] = React.useState<{
+    [key: string]: number;
+  }>({});
+  const EmojiListRef = useEmojiListRef();
+  const getEmojisByCategory = useGetEmojisByCategory();
+
+  const labelHeight = getLabelHeight(EmojiListRef.current);
 
+  let topOffset = 0;
   return (
-    <ul className={cx(styles.emojiList)}>
+    <ul className={cx(styles.emojiList)} ref={EmojiListRef}>
       {categories.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
 
-        if (category === Categories.SUGGESTED) {
-          return <Suggested key={category} categoryConfig={categoryConfig} />;
+        const currentOffset = topOffset;
+        const categoryHeight = categoryHeights[category];
+        if (categoryHeight) {
+          topOffset += categoryHeight + labelHeight;
         }
 
         return (
           <React.Suspense key={category}>
             <RenderCategory
-              category={category}
+              categoryEmojis={getEmojisByCategory(category)}
               categoryConfig={categoryConfig}
-              renderdCategoriesCountRef={renderdCategoriesCountRef}
+              topOffset={currentOffset}
+              onHeightReady={height => {
+                if (categoryHeights[category] !== height) {
+                  setCategoryHeights(prev => ({ ...prev, [category]: height }));
+                }
+              }}
+              scrollTop={scrollTop}
             />
           </React.Suspense>
         );
@@ -55,71 +59,32 @@ export function EmojiList() {
 }
 
 function RenderCategory({
-  category,
+  categoryEmojis,
   categoryConfig,
-  renderdCategoriesCountRef
+  topOffset,
+  onHeightReady,
+  scrollTop
 }: {
-  category: Categories;
+  categoryEmojis: DataEmojis;
   categoryConfig: CategoryConfig;
-  renderdCategoriesCountRef: React.MutableRefObject<number>;
+  topOffset: number;
+  onHeightReady: (height: number) => void;
+  scrollTop: number;
 }) {
-  const isEmojiHidden = useIsEmojiHidden();
-  const lazyLoadEmojis = useLazyLoadEmojisConfig();
-  const emojiStyle = useEmojiStyleConfig();
-  const isPastInitialLoad = useIsPastInitialLoad();
-  const [activeSkinTone] = useActiveSkinToneState();
-  const isEmojiDisallowed = useIsEmojiDisallowed();
-  const getEmojiUrl = useGetEmojiUrlConfig();
-  const 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.
-  const emojisToPush =
-    !isPastInitialLoad && renderdCategoriesCountRef.current > 0
-      ? []
-      : emojisByCategory(category);
-
-  if (emojisToPush.length > 0) {
-    renderdCategoriesCountRef.current++;
-  }
-
-  let hiddenCounter = 0;
-
-  const emojis = emojisToPush.map(emoji => {
-    const unified = emojiUnified(emoji, activeSkinTone);
-    const { failedToLoad, filteredOut, hidden } = isEmojiHidden(emoji);
-
-    const isDisallowed = isEmojiDisallowed(emoji);
-
-    if (hidden || isDisallowed) {
-      hiddenCounter++;
-    }
-
-    if (isDisallowed) {
-      return null;
-    }
-
-    return (
-      <ClickableEmoji
-        showVariations={showVariations}
-        key={unified}
-        emoji={emoji}
-        unified={unified}
-        hidden={failedToLoad}
-        hiddenOnSearch={filteredOut}
-        emojiStyle={emojiStyle}
-        lazyLoad={lazyLoadEmojis}
-        getEmojiUrl={getEmojiUrl}
-      />
-    );
+  const { virtualizedCounter, emojis, dimensions } = useEmojiVirtualization({
+    categoryEmojis,
+    topOffset,
+    onHeightReady,
+    scrollTop
   });
 
   return (
     <EmojiCategory
       categoryConfig={categoryConfig}
+      height={dimensions?.categoryHeight}
       // Indicates that there are no visible emojis
       // Hence, the category should be hidden
-      hidden={hiddenCounter === emojis.length}
+      hidden={!emojis.length && virtualizedCounter === 0}
     >
       {emojis}
     </EmojiCategory>

package/src/components/context/ElementRefContext.tsx

@@ -11,6 +11,7 @@ export function ElementRefContextProvider({
   const PickerMainRef = React.useRef<HTMLElement>(null);
   const AnchoredEmojiRef = React.useRef<HTMLElement>(null);
   const BodyRef = React.useRef<HTMLDivElement>(null);
+  const EmojiListRef = React.useRef<HTMLUListElement>(null);
   const SearchInputRef = React.useRef<HTMLInputElement>(null);
   const SkinTonePickerRef = React.useRef<HTMLDivElement>(null);
   const CategoryNavigationRef = React.useRef<HTMLDivElement>(null);
@@ -22,6 +23,7 @@ export function ElementRefContextProvider({
       value={{
         AnchoredEmojiRef,
         BodyRef,
+        EmojiListRef,
         CategoryNavigationRef,
         PickerMainRef,
         SearchInputRef,
@@ -42,6 +44,7 @@ export type ElementRef<
 type ElementRefs = {
   PickerMainRef: ElementRef;
   AnchoredEmojiRef: ElementRef;
+  EmojiListRef: ElementRef<HTMLUListElement>;
   SkinTonePickerRef: ElementRef<HTMLDivElement>;
   SearchInputRef: ElementRef<HTMLInputElement>;
   BodyRef: ElementRef<HTMLDivElement>;
@@ -54,6 +57,7 @@ const ElementRefContext = React.createContext<ElementRefs>({
   AnchoredEmojiRef: React.createRef(),
   BodyRef: React.createRef(),
   CategoryNavigationRef: React.createRef(),
+  EmojiListRef: React.createRef(),
   PickerMainRef: React.createRef(),
   SearchInputRef: React.createRef(),
   SkinTonePickerRef: React.createRef(),
@@ -65,6 +69,10 @@ function useElementRef() {
   return React.useContext(ElementRefContext);
 }
 
+export function useEmojiListRef() {
+  return useElementRef()['EmojiListRef'];
+}
+
 export function usePickerMainRef() {
   return useElementRef()['PickerMainRef'];
 }

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -19,6 +19,7 @@ type ClickableEmojiButtonProps = Readonly<{
   unified?: string;
   noBackground?: boolean;
   className?: string;
+  style?: React.CSSProperties;
 }>;
 
 export function ClickableEmojiButton({
@@ -30,7 +31,8 @@ export function ClickableEmojiButton({
   hasVariations,
   children,
   className,
-  noBackground = false
+  noBackground = false,
+  style
 }: ClickableEmojiButtonProps) {
   return (
     <Button
@@ -48,6 +50,7 @@ export function ClickableEmojiButton({
       data-unified={unified}
       aria-label={getAriaLabel(emojiNames)}
       data-full-name={emojiNames}
+      style={style}
     >
       {children}
     </Button>

package/src/components/emoji/Emoji.tsx

@@ -15,6 +15,7 @@ type ClickableEmojiProps = Readonly<
     emoji: DataEmoji;
     className?: string;
     noBackground?: boolean;
+    style?: React.CSSProperties;
   }
 >;
 
@@ -29,7 +30,8 @@ export function ClickableEmoji({
   lazyLoad,
   getEmojiUrl,
   className,
-  noBackground = false
+  noBackground = false,
+  style
 }: ClickableEmojiProps) {
   const hasVariations = emojiHasVariations(emoji);
 
@@ -42,6 +44,7 @@ export function ClickableEmoji({
       emojiNames={emojiNames(emoji)}
       unified={unified}
       noBackground={noBackground}
+      style={style}
     >
       <ViewOnlyEmoji
         unified={unified}