emoji-picker-react 4.9.0 → 4.9.2

package/dist/DomUtils/elementPositionInRow.d.ts

@@ -6,5 +6,5 @@ export declare function hasNextRow(parent: NullableElement, element: NullableEle
 export declare function getElementInRow(elements: HTMLElement[], row: number, elementsInRow: number, indexInRow: number): NullableElement;
 export declare function getElementInNextRow(allElements: HTMLElement[], currentRow: number, elementsInRow: number, index: number): NullableElement;
 export declare function getElementInPrevRow(allElements: HTMLElement[], currentRow: number, elementsInRow: number, index: number): NullableElement;
-export declare function firstVisibleElementInContainer(parent: NullableElement, elements: HTMLElement[]): NullableElement;
+export declare function firstVisibleElementInContainer(parent: NullableElement, elements: HTMLElement[], maxVisibilityDiffThreshold?: number): NullableElement;
 export declare function hasNextElementSibling(element: HTMLElement): boolean;

package/dist/emoji-picker-react.cjs.development.js

@@ -17359,7 +17359,7 @@ function scrollTo(root, top) {
     return;
   }
   requestAnimationFrame(function () {
-    $eprBody.scrollTop = top + 1;
+    $eprBody.scrollTop = top;
   });
 }
 function scrollBy(root, by) {
@@ -18372,29 +18372,43 @@ function getElementInPrevRow(allElements, currentRow, elementsInRow, index) {
   // default to last
   return prevRowElements[index] || prevRowElements[prevRowElements.length - 1] || null;
 }
-function firstVisibleElementInContainer(parent, elements) {
+function firstVisibleElementInContainer(parent, elements, maxVisibilityDiffThreshold) {
+  if (maxVisibilityDiffThreshold === void 0) {
+    maxVisibilityDiffThreshold = 0;
+  }
   if (!parent || !elements.length) {
     return null;
   }
   var parentTop = parent.getBoundingClientRect().top;
   var parentBottom = parent.getBoundingClientRect().bottom;
-  var parentTopWithLabel = parentTop + getLabelHight(parent);
+  var parentTopWithLabel = parentTop + getLabelHeight(parent);
   var visibleElements = elements.find(function (element) {
     var elementTop = element.getBoundingClientRect().top;
     var elementBottom = element.getBoundingClientRect().bottom;
-    if (elementTop < parentTopWithLabel) {
+    var maxVisibilityDiffPixels = element.clientHeight * maxVisibilityDiffThreshold;
+    var elementTopWithAllowedDiff = elementTop + maxVisibilityDiffPixels;
+    var elementBottomWithAllowedDiff = elementBottom - maxVisibilityDiffPixels;
+    if (elementTopWithAllowedDiff < parentTopWithLabel) {
       return false;
     }
-    return elementTop >= parentTop && elementTop <= parentBottom || elementBottom >= parentTop && elementBottom <= parentBottom;
+    return elementTopWithAllowedDiff >= parentTop && elementTopWithAllowedDiff <= parentBottom || elementBottomWithAllowedDiff >= parentTop && elementBottomWithAllowedDiff <= parentBottom;
   });
   return visibleElements || null;
 }
 function hasNextElementSibling(element) {
   return !!element.nextElementSibling;
 }
-function getLabelHight(parentNode) {
-  var _parentNode$querySele, _parentNode$querySele2;
-  return (_parentNode$querySele = (_parentNode$querySele2 = parentNode.querySelector(asSelectors(ClassNames.label))) == null ? void 0 : _parentNode$querySele2.getBoundingClientRect().height) != null ? _parentNode$querySele : DEFAULT_LABEL_HEIGHT /* default */;
+function getLabelHeight(parentNode) {
+  var labels = Array.from(parentNode.querySelectorAll(asSelectors(ClassNames.label)));
+  for (var _i = 0, _labels = labels; _i < _labels.length; _i++) {
+    var label = _labels[_i];
+    var height = label.getBoundingClientRect().height;
+    // return height if label is not hidden
+    if (height > 0) {
+      return height;
+    }
+  }
+  return DEFAULT_LABEL_HEIGHT;
 }
 
 var EmojiButtonSelector = "button" + /*#__PURE__*/asSelectors(ClassNames.emoji);
@@ -18560,7 +18574,7 @@ function firstVisibleEmoji(parent) {
     return null;
   }
   var allEmojis = allVisibleEmojis(parent);
-  return firstVisibleElementInContainer(parent, allEmojis);
+  return firstVisibleElementInContainer(parent, allEmojis, 0.1);
 }
 function prevCategory(element) {
   var category = closestCategory(element);
@@ -18825,10 +18839,14 @@ function ClickableEmojiButton(_ref) {
   return React.createElement(Button, {
     className: flairup.cx(styles$2.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$2.hasVariations, noBackground && styles$2.noBackground, className),
     "data-unified": unified,
-    "aria-label": emojiNames[0],
+    "aria-label": getAriaLabel(emojiNames),
     "data-full-name": emojiNames
   }, children);
 }
+function getAriaLabel(emojiNames) {
+  var _emojiNames$;
+  return emojiNames[0].match('flag-') ? (_emojiNames$ = emojiNames[1]) != null ? _emojiNames$ : emojiNames[0] : emojiNames[0];
+}
 var styles$2 = /*#__PURE__*/stylesheet.create({
   emoji: {
     '.': ClassNames.emoji,