emoji-picker-react 4.7.12 → 4.7.13

package/package.json

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

package/src/DomUtils/detectEmojyPartiallyBelowFold.ts

@@ -0,0 +1,16 @@
+import { NullableElement } from './selectors';
+
+export function detectEmojyPartiallyBelowFold(
+  button: HTMLButtonElement,
+  bodyRef: NullableElement
+): number {
+  if (!button || !bodyRef) {
+    return 0;
+  }
+
+  const buttonRect = button.getBoundingClientRect();
+  const bodyRect = bodyRef.getBoundingClientRect();
+
+  // If the element is obscured by at least half of its size
+  return bodyRect.height - (buttonRect.y - bodyRect.y);
+}

package/src/EmojiPickerReact.tsx

@@ -9,6 +9,7 @@ import { useReactionsModeState } from './components/context/PickerContext';
 import { Preview } from './components/footer/Preview';
 import { Header } from './components/header/Header';
 import PickerMain from './components/main/PickerMain';
+import { compareConfig } from './config/compareConfig';
 import { useOpenConfig } from './config/useConfig';
 
 import { PickerProps } from './index';
@@ -54,28 +55,4 @@ function ContentControl() {
 }
 
 // eslint-disable-next-line complexity
-export default React.memo(EmojiPicker, (prev, next) => {
-  const prevCustomEmojis = prev.customEmojis ?? [];
-  const nextCustomEmojis = next.customEmojis ?? [];
-  return (
-    prev.open === next.open &&
-    prev.emojiVersion === next.emojiVersion &&
-    prev.reactionsDefaultOpen === next.reactionsDefaultOpen &&
-    prev.searchPlaceHolder === next.searchPlaceHolder &&
-    prev.searchPlaceholder === next.searchPlaceholder &&
-    prev.defaultSkinTone === next.defaultSkinTone &&
-    prev.skinTonesDisabled === next.skinTonesDisabled &&
-    prev.autoFocusSearch === next.autoFocusSearch &&
-    prev.emojiStyle === next.emojiStyle &&
-    prev.theme === next.theme &&
-    prev.suggestedEmojisMode === next.suggestedEmojisMode &&
-    prev.lazyLoadEmojis === next.lazyLoadEmojis &&
-    prev.className === next.className &&
-    prev.height === next.height &&
-    prev.width === next.width &&
-    prev.style === next.style &&
-    prev.searchDisabled === next.searchDisabled &&
-    prev.skinTonePickerLocation === next.skinTonePickerLocation &&
-    prevCustomEmojis.length === nextCustomEmojis.length
-  );
-});
+export default React.memo(EmojiPicker, compareConfig);

package/src/components/context/PickerConfigContext.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { compareConfig } from '../../config/compareConfig';
 import {
   basePickerConfig,
   mergeConfig,
@@ -32,13 +33,32 @@ export function useSetConfig(config: PickerConfig) {
   );
 
   React.useEffect(() => {
-    if (avoidRefresh(config as Props, (mergedConfig as unknown) as Props)) {
+    if (compareConfig(mergedConfig, config)) {
       return;
     }
     setMergedConfig(mergeConfig(config));
     // not gonna...
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config.customEmojis?.length, config.open]);
+  }, [
+    config.customEmojis?.length,
+    config.open,
+    config.emojiVersion,
+    config.reactionsDefaultOpen,
+    config.searchPlaceHolder,
+    config.searchPlaceholder,
+    config.defaultSkinTone,
+    config.skinTonesDisabled,
+    config.autoFocusSearch,
+    config.emojiStyle,
+    config.theme,
+    config.suggestedEmojisMode,
+    config.lazyLoadEmojis,
+    config.className,
+    config.height,
+    config.width,
+    config.searchDisabled,
+    config.skinTonePickerLocation
+  ]);
 
   return mergedConfig;
 }
@@ -46,10 +66,3 @@ export function useSetConfig(config: PickerConfig) {
 export function usePickerConfig() {
   return React.useContext(ConfigContext);
 }
-
-function avoidRefresh(prev: Props, next: Props) {
-  return (
-    prev.customEmojis?.length === next.customEmojis?.length &&
-    prev.open === next.open
-  );
-}

package/src/config/compareConfig.ts

@@ -0,0 +1,28 @@
+import { PickerConfig } from './config';
+
+// eslint-disable-next-line complexity
+export function compareConfig(prev: PickerConfig, next: PickerConfig) {
+  const prevCustomEmojis = prev.customEmojis ?? [];
+  const nextCustomEmojis = next.customEmojis ?? [];
+  return (
+    prev.open === next.open &&
+    prev.emojiVersion === next.emojiVersion &&
+    prev.reactionsDefaultOpen === next.reactionsDefaultOpen &&
+    prev.searchPlaceHolder === next.searchPlaceHolder &&
+    prev.searchPlaceholder === next.searchPlaceholder &&
+    prev.defaultSkinTone === next.defaultSkinTone &&
+    prev.skinTonesDisabled === next.skinTonesDisabled &&
+    prev.autoFocusSearch === next.autoFocusSearch &&
+    prev.emojiStyle === next.emojiStyle &&
+    prev.theme === next.theme &&
+    prev.suggestedEmojisMode === next.suggestedEmojisMode &&
+    prev.lazyLoadEmojis === next.lazyLoadEmojis &&
+    prev.className === next.className &&
+    prev.height === next.height &&
+    prev.width === next.width &&
+    prev.style === next.style &&
+    prev.searchDisabled === next.searchDisabled &&
+    prev.skinTonePickerLocation === next.skinTonePickerLocation &&
+    prevCustomEmojis.length === nextCustomEmojis.length
+  );
+}

package/src/hooks/useEmojiPreviewEvents.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useEffect } from 'react';
 
+import { detectEmojyPartiallyBelowFold } from '../DomUtils/detectEmojyPartiallyBelowFold';
 import { focusElement } from '../DomUtils/focusElement';
 import {
   buttonFromTarget,
@@ -86,6 +87,16 @@ export function useEmojiPreviewEvents(
       const button = buttonFromTarget(e.target as HTMLElement);
 
       if (button) {
+        const belowFoldByPx = detectEmojyPartiallyBelowFold(button, bodyRef);
+        const buttonHeight = button.getBoundingClientRect().height;
+        if (belowFoldByPx < buttonHeight / 2) {
+          return;
+        }
+        if (belowFoldByPx < buttonHeight) {
+          button.scrollIntoView({ behavior: 'smooth', block: 'end' });
+          return;
+        }
+
         focusElement(button);
       }
     }