emoji-picker-react 4.7.15 → 4.7.16

package/package.json

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

package/src/DomUtils/selectors.ts

@@ -166,6 +166,22 @@ export function originalUnifiedFromEmojiElement(
   return null;
 }
 
+export function allUnifiedFromEmojiElement(
+  emoji: NullableElement
+): { unified: string | null; originalUnified: string | null } {
+  if (!emoji) {
+    return {
+      unified: null,
+      originalUnified: null
+    };
+  }
+
+  return {
+    unified: unifiedFromEmojiElement(emoji),
+    originalUnified: originalUnifiedFromEmojiElement(emoji)
+  };
+}
+
 function elementDataSetKey(
   element: NullableElement,
   key: string

package/src/hooks/useEmojiPreviewEvents.ts

@@ -4,9 +4,8 @@ import { useEffect } from 'react';
 import { detectEmojyPartiallyBelowFold } from '../DomUtils/detectEmojyPartiallyBelowFold';
 import { focusElement } from '../DomUtils/focusElement';
 import {
-  buttonFromTarget,
-  originalUnifiedFromEmojiElement,
-  unifiedFromEmojiElement
+  allUnifiedFromEmojiElement,
+  buttonFromTarget
 } from '../DomUtils/selectors';
 import { useBodyRef } from '../components/context/ElementRefContext';
 import { PreviewEmoji } from '../components/footer/Preview';
@@ -50,8 +49,7 @@ export function useEmojiPreviewEvents(
         return onLeave();
       }
 
-      const unified = unifiedFromEmojiElement(button);
-      const originalUnified = originalUnifiedFromEmojiElement(button);
+      const { unified, originalUnified } = allUnifiedFromEmojiElement(button);
 
       if (!unified || !originalUnified) {
         return onLeave();
@@ -90,6 +88,19 @@ export function useEmojiPreviewEvents(
         const belowFoldByPx = detectEmojyPartiallyBelowFold(button, bodyRef);
         const buttonHeight = button.getBoundingClientRect().height;
         if (belowFoldByPx < buttonHeight / 2) {
+          const { unified, originalUnified } = allUnifiedFromEmojiElement(
+            button
+          );
+
+          if (!unified || !originalUnified) {
+            return;
+          }
+
+          setPreviewEmoji({
+            unified,
+            originalUnified
+          });
+
           return;
         }
         if (belowFoldByPx < buttonHeight) {