emoji-picker-react 4.20.7 → 4.20.9

package/dist/DomUtils/focusElement.d.ts

@@ -1,5 +1,5 @@
 import { NullableElement } from './selectors';
-export declare function focusElement(element: NullableElement): void;
+export declare function focusElement(element: NullableElement, shouldFocus?: () => boolean): void;
 export declare function focusPrevElementSibling(element: NullableElement): void;
 export declare function focusNextElementSibling(element: NullableElement): void;
 export declare function focusFirstElementChild(element: NullableElement): void;

package/dist/components/navigation/CategoryNavigation.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare function CategoryNavigation(): JSX.Element;
+export declare function CategoryNavigation(): JSX.Element | null;

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

@@ -27363,11 +27363,16 @@ function useIsSearchMode() {
   return !!searchTerm;
 }
 
-function focusElement(element) {
+function focusElement(element, shouldFocus) {
   if (!element) {
     return;
   }
   requestAnimationFrame(function () {
+    // Rechecked here rather than at call time: focus may have moved in the
+    // meantime (e.g. hover scheduled focus, then the user tabbed out).
+    if (shouldFocus && !shouldFocus()) {
+      return;
+    }
     element.focus();
   });
 }
@@ -29966,18 +29971,9 @@ var styles$a = /*#__PURE__*/stylesheet.create({
   }
 });
 
-function detectEmojyPartiallyBelowFold(button, bodyRef) {
-  if (!button || !bodyRef) {
-    return 0;
-  }
-  var buttonRect = button.getBoundingClientRect();
-  var bodyRect = bodyRef.getBoundingClientRect();
-  // If the element is obscured by at least half of its size
-  return bodyRect.height - (buttonRect.y - bodyRect.y);
-}
-
 function useEmojiPreviewEvents(allow, setPreviewEmoji) {
   var BodyRef = useBodyRef();
+  var PickerMainRef = usePickerMainRef();
   var isMouseDisallowed = useIsMouseDisallowed();
   var allowMouseMove = useAllowMouseMove();
   React.useEffect(function () {
@@ -30029,14 +30025,37 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
         return;
       }
       var button = buttonFromTarget(e.target);
-      if (button) {
-        var belowFoldByPx = detectEmojyPartiallyBelowFold(button, bodyRef);
-        var buttonHeight = button.getBoundingClientRect().height;
-        if (belowFoldByPx < buttonHeight) {
-          return handlePartiallyVisibleElementFocus(button, setPreviewEmoji);
-        }
-        focusElement(button);
+      if (!button) {
+        return;
+      }
+      var _allUnifiedFromEmojiE2 = allUnifiedFromEmojiElement(button),
+        unified = _allUnifiedFromEmojiE2.unified,
+        originalUnified = _allUnifiedFromEmojiE2.originalUnified;
+      if (!unified || !originalUnified) {
+        return;
       }
+      setPreviewEmoji({
+        unified: unified,
+        originalUnified: originalUnified
+      });
+      // Let arrow-key navigation continue from the hovered emoji, but only
+      // when focus is already inside the picker (or nowhere meaningful).
+      // Pulling focus out of an external element steals the caret from
+      // host-app inputs (issue #320). The guard runs again inside the
+      // deferred callback in case focus moved out after this event.
+      if (!isExternalElementFocused()) {
+        focusElement(button, function () {
+          return !isExternalElementFocused();
+        });
+      }
+    }
+    function isExternalElementFocused() {
+      var _PickerMainRef$curren;
+      var active = document.activeElement;
+      if (!active || active === document.body || active === document.documentElement) {
+        return false;
+      }
+      return !((_PickerMainRef$curren = PickerMainRef.current) != null && _PickerMainRef$curren.contains(active));
     }
     return function () {
       bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseover', onMouseOver);
@@ -30047,20 +30066,6 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
     };
   }, [BodyRef, allow, setPreviewEmoji, isMouseDisallowed, allowMouseMove]);
 }
-function handlePartiallyVisibleElementFocus(button, setPreviewEmoji) {
-  var _document$activeEleme;
-  var _allUnifiedFromEmojiE2 = allUnifiedFromEmojiElement(button),
-    unified = _allUnifiedFromEmojiE2.unified,
-    originalUnified = _allUnifiedFromEmojiE2.originalUnified;
-  if (!unified || !originalUnified) {
-    return;
-  }
-  (_document$activeEleme = document.activeElement) == null ? void 0 : _document$activeEleme.blur == null ? void 0 : _document$activeEleme.blur();
-  setPreviewEmoji({
-    unified: unified,
-    originalUnified: originalUnified
-  });
-}
 
 var _stylesheet$create;
 var FlexDirection;
@@ -30594,18 +30599,23 @@ function CategoryNavigation() {
   var categoryIcons = useCategoryIconsConfig();
   var CategoryNavigationRef = useCategoryNavigationRef();
   var hideCustomCategory = useShouldHideCustomEmojis();
+  var visibleCategories = categoriesConfig.filter(function (categoryConfig) {
+    return !(isCustomCategory(categoryConfig) && hideCustomCategory);
+  });
+  // A single tab navigates nowhere — hide the bar to reclaim its space.
+  // https://github.com/ealush/emoji-picker-react/issues/396
+  if (visibleCategories.length <= 1) {
+    return null;
+  }
   return React.createElement("div", {
     className: shipstyles.cx(styles$g.nav),
     role: "tablist",
     "aria-label": "Category navigation",
     id: "epr-category-nav-id",
     ref: CategoryNavigationRef
-  }, categoriesConfig.map(function (categoryConfig) {
+  }, visibleCategories.map(function (categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
     var isActiveCategory = category === activeCategory;
-    if (isCustomCategory(categoryConfig) && hideCustomCategory) {
-      return null;
-    }
     var allowNavigation = !isSearchMode && !isActiveCategory;
     return React.createElement(CategoryButton, {
       key: category,