emoji-picker-react 4.22.2 → 5.0.0

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,111 @@ export function focusAndClickFirstVisibleEmoji(parent: NullableElement) {
   firstEmoji?.click();
 }
 
-export function focusLastVisibleEmoji(parent: NullableElement) {
-  focusElement(lastVisibleEmoji(parent));
-}
-
-export function focusNextVisibleEmoji(element: NullableElement) {
-  if (!element) {
-    return;
-  }
-
-  const next = nextVisibleEmoji(element);
-
-  if (!next) {
-    return focusFirstVisibleEmoji(nextCategory(element));
-  }
-
-  focusElement(next);
-  scrollEmojiAboveLabel(next);
-}
-
-export function focusPrevVisibleEmoji(element: NullableElement) {
-  if (!element) {
-    return;
-  }
-
-  const prev = prevVisibleEmoji(element);
-
-  if (!prev) {
-    return focusLastVisibleEmoji(prevCategory(element));
-  }
-
-  focusElement(prev);
-  scrollEmojiAboveLabel(prev);
+// 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 focusVisibleEmojiOneRowUp(
+export function focusAdjacentEmoji(
   element: NullableElement,
-  exitUp: () => void,
+  direction: number,
+  row: boolean,
+  { shouldFocus, exitUp }: { shouldFocus?: () => boolean; exitUp?: () => void },
 ) {
-  if (!element) {
+  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 destination = logicalDestination(category, element, direction, row);
+  if (destination)
+    focusLogicalEmoji(destination.category, destination.index, shouldFocus);
+  else if (direction < 0) exitUp?.();
 }
 
-export function focusVisibleEmojiOneRowDown(element: NullableElement) {
-  if (!element) {
-    return;
-  }
-
-  const next = visibleEmojiOneRowDown(element);
-
-  return focusElement(next);
+function logicalDestination(
+  category: HTMLElement,
+  element: HTMLElement,
+  direction: number,
+  row: boolean,
+) {
+  const geometry = categoryGeometry(category);
+  const columns = geometry.columns;
+  let count = geometry.count;
+  if (count <= 0) return null;
+  const currentIndex = Number(element.dataset.eprIndex);
+  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 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 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 };
 }
 
-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;
-
-  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?: () => boolean,
+) {
+  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 valid = () =>
+    (!shouldFocus || shouldFocus()) && body.contains(category);
+  const attempt = () => {
+    if (!valid()) return;
+    const emoji = category.querySelector<HTMLElement>(
+      `${VisibleEmojiSelector}[data-epr-index="${index}"]`,
+    );
+    if (emoji) {
+      emoji.focus();
+      scrollEmojiAboveLabel(emoji, valid);
+      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);
+  };
+  requestAnimationFrame(attempt);
 }

package/src/DomUtils/scrollTo.ts

@@ -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,7 +45,10 @@ export function useScrollTo() {
   );
 }
 
-export function scrollEmojiAboveLabel(emoji: NullableElement) {
+export function scrollEmojiAboveLabel(
+  emoji: NullableElement,
+  shouldScroll?: () => boolean,
+) {
   if (!emoji || !isEmojiBehindLabel(emoji)) {
     return;
   }
@@ -63,5 +59,11 @@ export function scrollEmojiAboveLabel(emoji: NullableElement) {
 
   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,8 +1,4 @@
-import { DataEmoji } from '../dataUtils/DataTypes';
-import {
-  emojiByUnified,
-  unifiedWithoutSkinTone,
-} from '../dataUtils/emojiSelectors';
+import { unifiedWithoutSkinTone } from '../dataUtils/emojiSelectors';
 
 import { asSelectors, ClassNames } from './classNames';
 import { firstVisibleElementInContainer } from './elementPositionInRow';
@@ -30,30 +26,10 @@ 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(
@@ -73,6 +49,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;
@@ -152,7 +133,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 +195,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,44 +205,16 @@ 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) {