emoji-picker-react 4.7.11 → 4.7.13

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.7.11",
+  "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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { PickerStyleTag } from './Stylesheet/stylesheet';
 import { Reactions } from './components/Reactions/Reactions';
 import { Body } from './components/body/Body';
 import { ElementRefContextProvider } from './components/context/ElementRefContext';
@@ -8,12 +9,15 @@ 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';
 
 function EmojiPicker(props: PickerProps) {
   return (
     <ElementRefContextProvider>
+      <PickerStyleTag />
       <PickerConfigProvider {...props}>
         <ContentControl />
       </PickerConfigProvider>
@@ -24,6 +28,7 @@ function EmojiPicker(props: PickerProps) {
 function ContentControl() {
   const [reactionsDefaultOpen] = useReactionsModeState();
   const [renderAll, setRenderAll] = React.useState(!reactionsDefaultOpen);
+  const isOpen = useOpenConfig();
 
   React.useEffect(() => {
     if (!renderAll) {
@@ -31,6 +36,10 @@ function ContentControl() {
     }
   }, [renderAll]);
 
+  if (!isOpen) {
+    return null;
+  }
+
   return (
     <PickerMain>
       <Reactions />
@@ -46,27 +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.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,12 +33,32 @@ export function useSetConfig(config: PickerConfig) {
   );
 
   React.useEffect(() => {
-    if (config.customEmojis?.length !== mergedConfig.customEmojis?.length) {
-      setMergedConfig(mergeConfig(config));
+    if (compareConfig(mergedConfig, config)) {
+      return;
     }
+    setMergedConfig(mergeConfig(config));
     // not gonna...
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config.customEmojis?.length]);
+  }, [
+    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;
 }

package/src/components/main/PickerMain.tsx

@@ -2,7 +2,7 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
-import { PickerStyleTag, stylesheet } from '../../Stylesheet/stylesheet';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
   useClassNameConfig,
   useStyleConfig,
@@ -25,7 +25,6 @@ type Props = Readonly<{
 export default function PickerMain({ children }: Props) {
   return (
     <PickerContextProvider>
-      <PickerStyleTag />
       <PickerRootElement>{children}</PickerRootElement>
     </PickerContextProvider>
   );

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/config/config.ts

@@ -88,7 +88,8 @@ export function basePickerConfig(): PickerConfigInternal {
     unicodeToHide: new Set<string>(KNOWN_FAILING_EMOJIS),
     width: 350,
     reactionsDefaultOpen: false,
-    reactions: DEFAULT_REACTIONS
+    reactions: DEFAULT_REACTIONS,
+    open: true
   };
 }
 
@@ -116,6 +117,7 @@ export type PickerConfigInternal = {
   customEmojis: CustomEmoji[];
   reactionsDefaultOpen: boolean;
   reactions: string[];
+  open: boolean;
 };
 
 export type PreviewConfig = {

package/src/config/mutableConfig.ts

@@ -26,7 +26,9 @@ export function useDefineMutableConfig(
 
   React.useEffect(() => {
     MutableConfigRef.current.onEmojiClick = config.onEmojiClick || emptyFunc;
-  }, [config.onEmojiClick]);
+    MutableConfigRef.current.onReactionClick =
+      config.onReactionClick || config.onEmojiClick;
+  }, [config.onEmojiClick, config.onReactionClick]);
 
   return MutableConfigRef;
 }

package/src/config/useConfig.ts

@@ -66,6 +66,11 @@ export function useCustomEmojisConfig(): CustomEmoji[] {
   return customEmojis;
 }
 
+export function useOpenConfig(): boolean {
+  const { open } = usePickerConfig();
+  return open;
+}
+
 export function useOnEmojiClickConfig(
   mouseEventSource: MOUSE_EVENT_SOURCE
 ): (emoji: EmojiClickData, event: MouseEvent) => void {

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);
       }
     }