emoji-picker-react 4.22.3 → 5.0.1

package/src/DomUtils/keyboardNavigation.ts

@@ -1,23 +1,23 @@
-import { elementCountInRow } from './elementPositionInRow';
 import { focusElement } from './focusElement';
 import { scrollEmojiAboveLabel } from './scrollTo';
 import {
-  allVisibleEmojis,
   closestCategory,
+  allVisibleEmojis,
   firstVisibleEmoji,
-  lastVisibleEmoji,
-  nextCategory,
-  nextVisibleEmoji,
+  adjacentCategory,
   NullableElement,
-  prevCategory,
-  prevVisibleEmoji,
-  closestCategoryContent,
+  closestScrollBody,
+  categoryLabelHeight,
+  VisibleEmojiSelector,
 } from './selectors';
 
-export function focusFirstVisibleEmoji(parent: NullableElement) {
+export function focusFirstVisibleEmoji(
+  parent: NullableElement,
+  shouldFocus?: () => boolean,
+) {
   const emoji = firstVisibleEmoji(parent);
-  focusElement(emoji);
-  scrollEmojiAboveLabel(emoji);
+  focusElement(emoji, shouldFocus);
+  scrollEmojiAboveLabel(emoji, shouldFocus);
 }
 
 export function focusAndClickFirstVisibleEmoji(parent: NullableElement) {
@@ -27,155 +27,175 @@ export function focusAndClickFirstVisibleEmoji(parent: NullableElement) {
   firstEmoji?.click();
 }
 
-export function focusLastVisibleEmoji(parent: NullableElement) {
-  focusElement(lastVisibleEmoji(parent));
+// Logical coordinates include unmounted cells. The DOM carries only the
+// filtered count, column geometry and each mounted cell's logical index.
+function categoryGeometry(category: HTMLElement) {
+  const content = category.querySelector<HTMLElement>(
+    '[data-epr-part="category-content"]',
+  );
+  const count = Number(content?.dataset.eprEmojiCount);
+  const columns = Number(content?.dataset.eprEmojisPerRow) || count;
+  return { content, count, columns };
 }
 
-export function focusNextVisibleEmoji(element: NullableElement) {
-  if (!element) {
-    return;
-  }
-
-  const next = nextVisibleEmoji(element);
-
-  if (!next) {
-    return focusFirstVisibleEmoji(nextCategory(element));
-  }
-
-  focusElement(next);
-  scrollEmojiAboveLabel(next);
+export type MoveOptions = {
+  shouldFocus?: () => boolean;
+  /** Called when an upward move leaves the grid. */
+  exitUp?: () => void;
+  /** Receives the destination cell; focuses it by default. */
+  moveTo?: (emoji: HTMLElement) => void;
+  /** Source cell while a virtualized destination is being materialized. */
+  origin?: HTMLElement;
+};
+
+/** Move to the first filtered result, including a cell outside the viewport. */
+export function focusFirstEmoji(
+  body: NullableElement,
+  options: MoveOptions,
+): boolean {
+  const category = body?.querySelector<HTMLElement>(
+    '[data-epr-part="category-content"]:not([data-epr-emoji-count="0"])',
+  )?.parentElement;
+  if (category) focusLogicalEmoji(category, 0, options);
+  return !!category;
 }
 
-export function focusPrevVisibleEmoji(element: NullableElement) {
-  if (!element) {
-    return;
+const pendingMoves = new WeakMap<
+  HTMLElement,
+  {
+    category: HTMLElement;
+    index: number;
+    origin?: HTMLElement;
+    valid: () => boolean;
   }
+>();
 
-  const prev = prevVisibleEmoji(element);
-
-  if (!prev) {
-    return focusLastVisibleEmoji(prevCategory(element));
-  }
-
-  focusElement(prev);
-  scrollEmojiAboveLabel(prev);
-}
-
-export function focusVisibleEmojiOneRowUp(
+export function focusAdjacentEmoji(
   element: NullableElement,
-  exitUp: () => void,
+  direction: number,
+  row: boolean,
+  options: MoveOptions,
 ) {
-  if (!element) {
+  const { shouldFocus, exitUp } = options;
+  if (!element || (shouldFocus && !shouldFocus())) return;
+  const category = closestCategory(element);
+  if (!category || element.dataset.eprIndex === undefined) {
+    // Variation buttons are fully mounted and use ordinary sibling movement.
+    const buttons = allVisibleEmojis(element.parentElement);
+    focusElement(
+      buttons[buttons.indexOf(element) + direction] ?? null,
+      shouldFocus,
+    );
     return;
   }
-
-  const prev = visibleEmojiOneRowUp(element);
-
-  if (!prev) {
-    return exitUp();
-  }
-
-  focusElement(prev);
-  scrollEmojiAboveLabel(prev);
+  const cursor = gridCursor(category, element);
+  const destination = logicalDestination(
+    cursor.category,
+    cursor.index,
+    direction,
+    row,
+  );
+  if (destination)
+    focusLogicalEmoji(destination.category, destination.index, {
+      ...options,
+      origin: element,
+    });
+  else if (direction < 0) exitUp?.();
 }
 
-export function focusVisibleEmojiOneRowDown(element: NullableElement) {
-  if (!element) {
-    return;
-  }
-
-  const next = visibleEmojiOneRowDown(element);
-
-  return focusElement(next);
+// A key pressed before the previous move mounted its destination continues
+// from that destination, not from the still-focused source cell.
+function gridCursor(category: HTMLElement, element: HTMLElement) {
+  const body = closestScrollBody(category);
+  const pending = body && pendingMoves.get(body);
+  return pending?.origin === element && pending.valid()
+    ? pending
+    : { category, index: Number(element.dataset.eprIndex) };
 }
 
-function visibleEmojiOneRowUp(element: HTMLElement) {
-  if (!element) {
-    return null;
-  }
-
-  const categoryContent = closestCategoryContent(element);
-  const category = closestCategory(categoryContent);
-  const countInRow = elementCountInRow(categoryContent, element);
-
-  const emojisInCurrentCategory = allVisibleEmojis(category);
-  const currentEmojiIndex = emojisInCurrentCategory.indexOf(element);
-  const indexInRow = currentEmojiIndex % countInRow;
-
-  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;
-
-  if (indexInRow > lastIndexInRow) {
-    return allPrevEmojis.at(-1);
-  }
-
-  // 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 logicalDestination(
+  category: HTMLElement,
+  currentIndex: number,
+  direction: number,
+  row: boolean,
+) {
+  const geometry = categoryGeometry(category);
+  const columns = geometry.columns;
+  let count = geometry.count;
+  if (count <= 0) return null;
+  const column = row ? currentIndex % columns : 0;
+  let index = row
+    ? (Math.floor(currentIndex / columns) + direction) * columns
+    : currentIndex + direction;
+  if (index < 0 || index >= count) {
+    const adjacent = adjacentDestination(category, direction, row);
+    if (!adjacent) return null;
+    ({ category, count, index } = adjacent);
+  }
+  return { category, index: Math.min(index + column, count - 1) };
 }
 
-function visibleEmojiOneRowDown(element: HTMLElement) {
-  if (!element) {
-    return null;
-  }
-
-  const categoryContent = closestCategoryContent(element);
-  const category = closestCategory(categoryContent);
-  const countInRow = elementCountInRow(categoryContent, element);
-
-  const emojisInCurrentCategory = allVisibleEmojis(category);
-  const currentEmojiIndex = emojisInCurrentCategory.indexOf(element);
-
-  if (currentEmojiIndex === -1) {
-    return null;
-  }
-
-  // the remainder until the end of the row
-  const remainder = countInRow - (currentEmojiIndex % countInRow) - 1;
-  const firstInNextRow = currentEmojiIndex + remainder + 1;
+function adjacentDestination(
+  category: HTMLElement,
+  direction: number,
+  row: boolean,
+) {
+  const adjacent = adjacentCategory(category, direction);
+  if (!adjacent) return null;
+  const { count, columns } = categoryGeometry(adjacent);
+  if (count <= 0) return null;
+  const index =
+    direction > 0
+      ? 0
+      : row
+        ? Math.floor((count - 1) / columns) * columns
+        : count - 1;
+  return { category: adjacent, count, index };
+}
 
-  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];
-      }
+function focusLogicalEmoji(
+  category: HTMLElement,
+  index: number,
+  { shouldFocus, moveTo = (emoji) => emoji.focus(), origin }: MoveOptions,
+) {
+  const { content, columns, count } = categoryGeometry(category);
+  const body = closestScrollBody(category);
+  if (!body || !content || !columns) return;
+  const size = content.clientHeight / Math.ceil(count / columns);
+  let frames = 60;
+  const pending = { category, index, origin, valid: () => valid() };
+  pendingMoves.set(body, pending);
+  const valid = (): boolean =>
+    pendingMoves.get(body) === pending &&
+    (!shouldFocus || shouldFocus()) &&
+    body.contains(category);
+  const attempt = () => {
+    if (!valid()) return;
+    const emoji = category.querySelector<HTMLElement>(
+      `${VisibleEmojiSelector}[data-epr-index="${index}"]`,
+    );
+    if (emoji) {
+      moveTo(emoji);
+      scrollEmojiAboveLabel(emoji, valid);
+      // Keep the scroll guard valid until a later navigation replaces it,
+      // but only unfinished moves supply a logical cursor to another key.
+      pending.origin = undefined;
+      return;
     }
-  }
-
-  const indexInRow = currentEmojiIndex % countInRow;
-
-  const nextVisibleCategory = nextCategory(category);
-  const emojisInNextCategory = allVisibleEmojis(nextVisibleCategory);
-
-  if (emojisInNextCategory[indexInRow]) {
-    return emojisInNextCategory[indexInRow];
-  }
-
-  return emojisInNextCategory.at(0) ?? null;
+    if (!size || --frames <= 0) return;
+    if (frames === 59)
+      body.scrollTop =
+        category.offsetTop +
+        content.offsetTop +
+        Math.floor(index / columns) * size -
+        categoryLabelHeight(category);
+    requestAnimationFrame(attempt);
+  };
+  // Mounted cells can move immediately, so a second key in this frame
+  // reads the new position. Only unmounted destinations need a frame.
+  if (
+    category.querySelector(`${VisibleEmojiSelector}[data-epr-index="${index}"]`)
+  )
+    attempt();
+  else requestAnimationFrame(attempt);
 }

package/src/DomUtils/scrollTo.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import { useBodyRef } from '../components/context/ElementRefContext';
 
-import { asSelectors, ClassNames } from './classNames';
+import { ClassNames } from './classNames';
 import {
   categoryLabelHeight,
   closestCategory,
@@ -13,7 +13,11 @@ import {
   queryScrollBody,
 } from './selectors';
 
-export function scrollTo(root: NullableElement, top: number = 0) {
+export function scrollTo(
+  root: NullableElement,
+  top: number | (() => number) = 0,
+  shouldScroll?: () => boolean,
+) {
   const $eprBody = queryScrollBody(root);
 
   if (!$eprBody) {
@@ -21,19 +25,8 @@ export function scrollTo(root: NullableElement, top: number = 0) {
   }
 
   requestAnimationFrame(() => {
-    $eprBody.scrollTop = top;
-  });
-}
-
-export function scrollBy(root: NullableElement, by: number): void {
-  const $eprBody = queryScrollBody(root);
-
-  if (!$eprBody) {
-    return;
-  }
-
-  requestAnimationFrame(() => {
-    $eprBody.scrollTop = $eprBody.scrollTop + by;
+    if (!shouldScroll || shouldScroll())
+      $eprBody.scrollTop = typeof top === 'function' ? top() : top;
   });
 }
 
@@ -52,16 +45,25 @@ export function useScrollTo() {
   );
 }
 
-export function scrollEmojiAboveLabel(emoji: NullableElement) {
+export function scrollEmojiAboveLabel(
+  emoji: NullableElement,
+  shouldScroll?: () => boolean,
+) {
   if (!emoji || !isEmojiBehindLabel(emoji)) {
     return;
   }
 
-  if (emoji.closest(asSelectors(ClassNames.variationPicker))) {
+  if (emoji.closest(`.${ClassNames.variationPicker}`)) {
     return;
   }
 
   const scrollBody = closestScrollBody(emoji);
   const by = emojiDistanceFromScrollTop(emoji);
-  scrollBy(scrollBody, -(categoryLabelHeight(closestCategory(emoji)) - by));
+  if (scrollBody)
+    scrollTo(
+      scrollBody,
+      () =>
+        scrollBody.scrollTop - categoryLabelHeight(closestCategory(emoji)) + by,
+      shouldScroll,
+    );
 }

package/src/DomUtils/selectors.ts

@@ -1,20 +1,12 @@
-import { DataEmoji } from '../dataUtils/DataTypes';
-import {
-  emojiByUnified,
-  unifiedWithoutSkinTone,
-} from '../dataUtils/emojiSelectors';
+import { unifiedWithoutSkinTone } from '../dataUtils/emojiSelectors';
 
-import { asSelectors, ClassNames } from './classNames';
+import { ClassNames } from './classNames';
 import { firstVisibleElementInContainer } from './elementPositionInRow';
 
 export type NullableElement = HTMLElement | null;
 
-export const EmojiButtonSelector = `button${asSelectors(ClassNames.emoji)}`;
-export const VisibleEmojiSelector = [
-  EmojiButtonSelector,
-  asSelectors(ClassNames.visible),
-  `:not(${asSelectors(ClassNames.hidden)})`,
-].join('');
+export const EmojiButtonSelector = `button.${ClassNames.emoji}`;
+export const VisibleEmojiSelector = `${EmojiButtonSelector}.${ClassNames.visible}:not(.${ClassNames.hidden})`;
 
 export function buttonFromTarget(
   emojiElement: NullableElement,
@@ -30,36 +22,16 @@ export function isEmojiButton(element: NullableElement): boolean {
   return element.matches(EmojiButtonSelector);
 }
 
-export function emojiFromElement(
-  element: NullableElement,
-): [DataEmoji, string] | [] {
-  const originalUnified = originalUnifiedFromEmojiElement(element);
-  const unified = unifiedFromEmojiElement(element);
-
-  if (!originalUnified) {
-    return [];
-  }
-
-  const emoji = emojiByUnified(unified ?? originalUnified);
-
-  if (!emoji) {
-    return [];
-  }
-
-  return [emoji, unified as string];
-}
-
+// Any element inside an emoji button counts: custom List cells may nest
+// their content arbitrarily deep.
 export function isEmojiElement(element: NullableElement): boolean {
-  return Boolean(
-    element?.matches(EmojiButtonSelector) ||
-    element?.parentElement?.matches(EmojiButtonSelector),
-  );
+  return buttonFromTarget(element) !== null;
 }
 
 export function categoryLabelFromCategory(
   category: NullableElement,
 ): NullableElement {
-  return category?.querySelector(asSelectors(ClassNames.label)) ?? null;
+  return category?.querySelector(`.${ClassNames.label}`) ?? null;
 }
 
 export function closestCategoryLabel(
@@ -73,6 +45,11 @@ export function elementHeight(element: NullableElement): number {
   return element?.clientHeight ?? 0;
 }
 
+/** Layout size including host button borders (unaffected by transforms). */
+export function elementBorderBoxHeight(element: NullableElement): number {
+  return element?.offsetHeight || element?.clientHeight || 0;
+}
+
 export function emojiTrueOffsetTop(element: NullableElement): number {
   if (!element) {
     return 0;
@@ -93,7 +70,7 @@ export function categoryLabelHeight(category: NullableElement): number {
   }
 
   const categoryWithoutLabel = category.querySelector(
-    asSelectors(ClassNames.categoryContent),
+    `.${ClassNames.categoryContent}`,
   );
 
   return (
@@ -115,9 +92,9 @@ export function isEmojiBehindLabel(emoji: NullableElement): boolean {
 export function queryScrollBody(root: NullableElement): NullableElement {
   if (!root) return null;
 
-  return root.matches(asSelectors(ClassNames.scrollBody))
+  return root.matches(`.${ClassNames.scrollBody}`)
     ? root
-    : root.querySelector(asSelectors(ClassNames.scrollBody));
+    : root.querySelector(`.${ClassNames.scrollBody}`);
 }
 
 export function emojiDistanceFromScrollTop(emoji: NullableElement): number {
@@ -133,7 +110,7 @@ export function closestScrollBody(element: NullableElement): NullableElement {
     return null;
   }
 
-  return element.closest(asSelectors(ClassNames.scrollBody)) ?? null;
+  return element.closest(`.${ClassNames.scrollBody}`) ?? null;
 }
 
 export function emojiTruOffsetLeft(element: NullableElement): number {
@@ -152,7 +129,7 @@ function elementOffsetLeft(element: NullableElement): number {
 }
 
 export function unifiedFromEmojiElement(emoji: NullableElement): string | null {
-  return elementDataSetKey(buttonFromTarget(emoji), 'unified') ?? null;
+  return elementDataSetKey(buttonFromTarget(emoji), 'eprUnified') ?? null;
 }
 
 export function originalUnifiedFromEmojiElement(
@@ -214,50 +191,6 @@ export function allVisibleEmojis(parent: NullableElement) {
   ) as HTMLElement[];
 }
 
-export function lastVisibleEmoji(element: NullableElement): NullableElement {
-  if (!element) return null;
-
-  const allEmojis = allVisibleEmojis(element);
-  const [last] = allEmojis.slice(-1);
-  if (!last) {
-    return null;
-  }
-
-  if (!isVisibleEmoji(last)) {
-    return prevVisibleEmoji(last);
-  }
-
-  return last;
-}
-
-export function nextVisibleEmoji(element: HTMLElement): NullableElement {
-  const next = element.nextElementSibling as HTMLElement;
-
-  if (!next) {
-    return firstVisibleEmoji(nextCategory(element));
-  }
-
-  if (!isVisibleEmoji(next)) {
-    return nextVisibleEmoji(next);
-  }
-
-  return next;
-}
-
-export function prevVisibleEmoji(element: HTMLElement): NullableElement {
-  const prev = element.previousElementSibling as HTMLElement;
-
-  if (!prev) {
-    return lastVisibleEmoji(prevCategory(element));
-  }
-
-  if (!isVisibleEmoji(prev)) {
-    return prevVisibleEmoji(prev);
-  }
-
-  return prev;
-}
-
 export function firstVisibleEmoji(parent: NullableElement) {
   if (!parent) {
     return null;
@@ -268,58 +201,28 @@ export function firstVisibleEmoji(parent: NullableElement) {
   return firstVisibleElementInContainer(parent, allEmojis, 0.1);
 }
 
-export function prevCategory(element: NullableElement): NullableElement {
-  const category = closestCategory(element);
-
-  if (!category) {
-    return null;
-  }
-
-  const prev = category.previousElementSibling as HTMLElement;
-
-  if (!prev) {
-    return null;
-  }
-
-  if (isHidden(prev)) {
-    return prevCategory(prev);
-  }
-
-  return prev;
-}
-
-export function nextCategory(element: NullableElement): NullableElement {
-  const category = closestCategory(element);
-
-  if (!category) {
-    return null;
-  }
-
-  const next = category.nextElementSibling as HTMLElement;
-
-  if (!next) {
-    return null;
-  }
-
-  if (isHidden(next)) {
-    return nextCategory(next);
-  }
-
-  return next;
+export function adjacentCategory(
+  element: NullableElement,
+  direction: number,
+): NullableElement {
+  const sibling =
+    direction > 0 ? 'nextElementSibling' : 'previousElementSibling';
+  let category = closestCategory(element)?.[sibling] as NullableElement;
+  while (category && isHidden(category))
+    category = category[sibling] as NullableElement;
+  return category ?? null;
 }
 
 export function closestCategory(element: NullableElement) {
   if (!element) {
     return null;
   }
-  return element.closest(asSelectors(ClassNames.category)) as HTMLElement;
+  return element.closest(`.${ClassNames.category}`) as HTMLElement;
 }
 
 export function closestCategoryContent(element: NullableElement) {
   if (!element) {
     return null;
   }
-  return element.closest(
-    asSelectors(ClassNames.categoryContent),
-  ) as HTMLElement;
+  return element.closest(`.${ClassNames.categoryContent}`) as HTMLElement;
 }