emoji-picker-react 4.9.0 → 4.9.2

package/package.json

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

package/src/DomUtils/elementPositionInRow.ts

@@ -143,7 +143,8 @@ export function getElementInPrevRow(
 
 export function firstVisibleElementInContainer(
   parent: NullableElement,
-  elements: HTMLElement[]
+  elements: HTMLElement[],
+  maxVisibilityDiffThreshold = 0
 ): NullableElement {
   if (!parent || !elements.length) {
     return null;
@@ -151,20 +152,27 @@ export function firstVisibleElementInContainer(
 
   const parentTop = parent.getBoundingClientRect().top;
   const parentBottom = parent.getBoundingClientRect().bottom;
-
-  const parentTopWithLabel = parentTop + getLabelHight(parent);
+  const parentTopWithLabel = parentTop + getLabelHeight(parent);
 
   const visibleElements = elements.find(element => {
     const elementTop = element.getBoundingClientRect().top;
     const elementBottom = element.getBoundingClientRect().bottom;
+    const maxVisibilityDiffPixels =
+      element.clientHeight * maxVisibilityDiffThreshold;
 
-    if (elementTop < parentTopWithLabel) {
+    const elementTopWithAllowedDiff = elementTop + maxVisibilityDiffPixels;
+    const elementBottomWithAllowedDiff =
+      elementBottom - maxVisibilityDiffPixels;
+
+    if (elementTopWithAllowedDiff < parentTopWithLabel) {
       return false;
     }
 
     return (
-      (elementTop >= parentTop && elementTop <= parentBottom) ||
-      (elementBottom >= parentTop && elementBottom <= parentBottom)
+      (elementTopWithAllowedDiff >= parentTop &&
+        elementTopWithAllowedDiff <= parentBottom) ||
+      (elementBottomWithAllowedDiff >= parentTop &&
+        elementBottomWithAllowedDiff <= parentBottom)
     );
   });
 
@@ -175,10 +183,18 @@ export function hasNextElementSibling(element: HTMLElement) {
   return !!element.nextElementSibling;
 }
 
-function getLabelHight(parentNode: HTMLElement) {
-  return (
-    parentNode
-      .querySelector(asSelectors(ClassNames.label))
-      ?.getBoundingClientRect().height ?? DEFAULT_LABEL_HEIGHT /* default */
+function getLabelHeight(parentNode: HTMLElement) {
+  const labels = Array.from(
+    parentNode.querySelectorAll(asSelectors(ClassNames.label))
   );
+
+  for (const label of labels) {
+    const height = label.getBoundingClientRect().height;
+    // return height if label is not hidden
+    if (height > 0) {
+      return height;
+    }
+  }
+
+  return DEFAULT_LABEL_HEIGHT;
 }

package/src/DomUtils/scrollTo.ts

@@ -21,7 +21,7 @@ export function scrollTo(root: NullableElement, top: number = 0) {
   }
 
   requestAnimationFrame(() => {
-    $eprBody.scrollTop = top + 1;
+    $eprBody.scrollTop = top;
   });
 }
 

package/src/DomUtils/selectors.ts

@@ -264,7 +264,7 @@ export function firstVisibleEmoji(parent: NullableElement) {
 
   const allEmojis = allVisibleEmojis(parent);
 
-  return firstVisibleElementInContainer(parent, allEmojis);
+  return firstVisibleElementInContainer(parent, allEmojis, 0.1);
 }
 
 export function prevCategory(element: NullableElement): NullableElement {

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -46,7 +46,7 @@ export function ClickableEmojiButton({
         className
       )}
       data-unified={unified}
-      aria-label={emojiNames[0]}
+      aria-label={getAriaLabel(emojiNames)}
       data-full-name={emojiNames}
     >
       {children}
@@ -54,6 +54,12 @@ export function ClickableEmojiButton({
   );
 }
 
+function getAriaLabel(emojiNames: string[]) {
+  return emojiNames[0].match('flag-')
+    ? emojiNames[1] ?? emojiNames[0]
+    : emojiNames[0];
+}
+
 const styles = stylesheet.create({
   emoji: {
     '.': ClassNames.emoji,