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

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/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/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.13.2",
+  "version": "4.14.0-rc.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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,9 +2,9 @@ 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';
@@ -15,37 +15,54 @@ import {
   useLazyLoadEmojisConfig,
   useSkinTonesDisabledConfig
 } from '../../config/useConfig';
-import { emojisByCategory, emojiUnified } from '../../dataUtils/emojiSelectors';
+import { DataEmojis } from '../../dataUtils/DataTypes';
+import {
+  emojiUnified,
+  useGetEmojisByCategory
+} from '../../dataUtils/emojiSelectors';
+import { useCategoryHeight } from '../../hooks/useCategoryHeight';
 import { useIsEmojiDisallowed } from '../../hooks/useDisallowedEmojis';
 import { useIsEmojiHidden } from '../../hooks/useIsEmojiHidden';
-import {
-  useActiveSkinToneState,
-  useIsPastInitialLoad
-} from '../context/PickerContext';
+import { useBodyRef, useEmojiListRef } from '../context/ElementRefContext';
+import { useActiveSkinToneState } from '../context/PickerContext';
 import { ClickableEmoji } from '../emoji/Emoji';
 
 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,37 +72,45 @@ 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();
+  const BodyRef = useBodyRef();
 
-  // 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);
+  let hiddenCounter = 0;
+  let virtualizedCounter = 0;
 
-  if (emojisToPush.length > 0) {
-    renderdCategoriesCountRef.current++;
-  }
+  const emojisToPush = categoryEmojis.filter(emoji => {
+    const { failedToLoad, filteredOut, hidden } = isEmojiHidden(emoji);
 
-  let hiddenCounter = 0;
+    return !failedToLoad && !filteredOut && !hidden;
+  });
+
+  const dimensions = useCategoryHeight(emojisToPush.length);
+
+  React.useEffect(() => {
+    if (dimensions) {
+      onHeightReady(dimensions.categoryHeight);
+    }
+  }, [dimensions, onHeightReady, emojisToPush.length]);
 
-  const emojis = emojisToPush.map(emoji => {
+  const emojis = emojisToPush.reduce((accumulator, emoji, index) => {
     const unified = emojiUnified(emoji, activeSkinTone);
     const { failedToLoad, filteredOut, hidden } = isEmojiHidden(emoji);
 
@@ -95,11 +120,26 @@ function RenderCategory({
       hiddenCounter++;
     }
 
-    if (isDisallowed) {
-      return null;
+    if (isDisallowed || failedToLoad || filteredOut) {
+      return accumulator;
+    }
+
+    const style = getEmojiPositionStyle(dimensions, index - hiddenCounter);
+
+    if (
+      shouldVirtualize({
+        scrollTop,
+        clientHeight: BodyRef.current?.clientHeight ?? 0,
+        topOffset,
+        style,
+        dimensions
+      })
+    ) {
+      virtualizedCounter++;
+      return accumulator;
     }
 
-    return (
+    accumulator.push(
       <ClickableEmoji
         showVariations={showVariations}
         key={unified}
@@ -110,16 +150,23 @@ function RenderCategory({
         emojiStyle={emojiStyle}
         lazyLoad={lazyLoadEmojis}
         getEmojiUrl={getEmojiUrl}
+        style={{
+          ...style,
+          position: 'absolute'
+        }}
       />
     );
-  });
+
+    return accumulator;
+  }, [] as any);
 
   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={hiddenCounter === emojis.length && virtualizedCounter === 0}
     >
       {emojis}
     </EmojiCategory>
@@ -134,3 +181,47 @@ const styles = stylesheet.create({
     padding: '0'
   }
 });
+
+type Dimensions =
+  | {
+      emojiSize: number;
+      emojisPerRow: number;
+      categoryHeight: number;
+    }
+  | undefined;
+
+function getEmojiPositionStyle(dimensions: Dimensions, index: number) {
+  return dimensions
+    ? {
+        top: Math.floor(index / dimensions.emojisPerRow) * dimensions.emojiSize,
+        left: (index % dimensions.emojisPerRow) * dimensions.emojiSize
+      }
+    : undefined;
+}
+
+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;
+}

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>