emoji-picker-react 4.4.3 → 4.4.5

package/package.json

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

package/src/DomUtils/classNames.ts

@@ -15,7 +15,8 @@ export enum ClassNames {
   emojiPicker = 'EmojiPickerReact',
   open = 'epr-open',
   vertical = 'epr-vertical',
-  horizontal = 'epr-horizontal'
+  horizontal = 'epr-horizontal',
+  variationPicker = 'epr-emoji-variation-picker'
 }
 
 export function asSelectors(...classNames: ClassNames[]): string {

package/src/DomUtils/scrollTo.ts

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 
 import { useBodyRef } from '../components/context/ElementRefContext';
 
+import { asSelectors, ClassNames } from './classNames';
 import {
   categoryLabelHeight,
   closestCategory,
@@ -52,7 +53,11 @@ export function useScrollTo() {
 }
 
 export function scrollEmojiAboveLabel(emoji: NullableElement) {
-  if (!isEmojiBehindLabel(emoji)) {
+  if (!emoji || !isEmojiBehindLabel(emoji)) {
+    return;
+  }
+
+  if (emoji.closest(asSelectors(ClassNames.variationPicker))) {
     return;
   }
 

package/src/components/body/EmojiVariationPicker.tsx

@@ -1,29 +1,30 @@
 import clsx from 'clsx';
 import * as React from 'react';
+import { useEffect } from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
-import { focusElement } from '../../DomUtils/focusElement';
+import { focusFirstVisibleEmoji } from '../../DomUtils/keyboardNavigation';
 import {
   buttonFromTarget,
   elementHeight,
   emojiTrueOffsetTop,
-  emojiTruOffsetLeft,
+  emojiTruOffsetLeft
 } from '../../DomUtils/selectors';
 import {
   useEmojiStyleConfig,
-  useGetEmojiUrlConfig,
+  useGetEmojiUrlConfig
 } from '../../config/useConfig';
 import { asEmoji } from '../../dataUtils/asEmoji';
 import {
   emojiHasVariations,
   emojiUnified,
-  emojiVariations,
+  emojiVariations
 } from '../../dataUtils/emojiSelectors';
 import {
   useAnchoredEmojiRef,
   useBodyRef,
   useSetAnchoredEmojiRef,
-  useVariationPickerRef,
+  useVariationPickerRef
 } from '../context/ElementRefContext';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
 import { ClickableEmoji } from '../emoji/Emoji';
@@ -31,7 +32,7 @@ import './EmojiVariationPicker.css';
 
 enum Direction {
   Up,
-  Down,
+  Down
 }
 
 export function EmojiVariationPicker() {
@@ -39,6 +40,7 @@ export function EmojiVariationPicker() {
   const VariationPickerRef = useVariationPickerRef();
   const [emoji] = useEmojiVariationPickerState();
   const emojiStyle = useEmojiStyleConfig();
+
   const { getTop, getMenuDirection } = useVariationPickerTop(
     VariationPickerRef
   );
@@ -54,10 +56,17 @@ export function EmojiVariationPicker() {
     emojiHasVariations(emoji) &&
     button.classList.contains(ClassNames.emojiHasVariatios);
 
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+
+    focusFirstVisibleEmoji(VariationPickerRef.current);
+  }, [VariationPickerRef, visible, AnchoredEmojiRef]);
+
   let top, pointerStyle;
 
   if (!visible && AnchoredEmojiRef.current) {
-    focusElement(AnchoredEmojiRef.current);
     setAnchoredEmojiRef(null);
   } else {
     top = getTop();
@@ -69,9 +78,9 @@ export function EmojiVariationPicker() {
   return (
     <div
       ref={VariationPickerRef}
-      className={clsx('epr-emoji-variation-picker', {
+      className={clsx(ClassNames.variationPicker, {
         visible,
-        'pointing-up': getMenuDirection() === Direction.Down,
+        'pointing-up': getMenuDirection() === Direction.Down
       })}
       style={{ top }}
     >
@@ -79,7 +88,7 @@ export function EmojiVariationPicker() {
         ? [emojiUnified(safeEmoji)]
             .concat(emojiVariations(safeEmoji))
             .slice(0, 6)
-            .map((unified) => (
+            .map(unified => (
               <ClickableEmoji
                 key={unified}
                 emoji={safeEmoji}
@@ -129,7 +138,7 @@ function useVariationPickerTop(
 
   return {
     getMenuDirection,
-    getTop,
+    getTop
   };
 
   function getMenuDirection() {

package/src/components/context/ElementRefContext.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { focusElement } from '../../DomUtils/focusElement';
 import { NullableElement } from '../../DomUtils/selectors';
 
 export function ElementRefContextProvider({
@@ -71,6 +72,10 @@ export function useAnchoredEmojiRef() {
 export function useSetAnchoredEmojiRef(): (target: NullableElement) => void {
   const AnchoredEmojiRef = useAnchoredEmojiRef();
   return (target: NullableElement) => {
+    if (target === null && AnchoredEmojiRef.current !== null) {
+      focusElement(AnchoredEmojiRef.current);
+    }
+
     AnchoredEmojiRef.current = target;
   };
 }

package/src/hooks/useKeyboardNavigation.ts

@@ -154,7 +154,8 @@ function useSearchInputKeyboardEvents() {
       focusSkinTonePicker,
       goDownFromSearchInput,
       setSkinToneFanOpenState,
-      BodyRef
+      BodyRef,
+      isSkinToneInSearch
     ]
   );
 

package/src/hooks/useSetVariationPicker.ts

@@ -1,15 +1,10 @@
-import { focusFirstVisibleEmoji } from '../DomUtils/keyboardNavigation';
 import { emojiFromElement, NullableElement } from '../DomUtils/selectors';
-import {
-  useSetAnchoredEmojiRef,
-  useVariationPickerRef
-} from '../components/context/ElementRefContext';
+import { useSetAnchoredEmojiRef } from '../components/context/ElementRefContext';
 import { useEmojiVariationPickerState } from '../components/context/PickerContext';
 
 export default function useSetVariationPicker() {
   const setAnchoredEmojiRef = useSetAnchoredEmojiRef();
   const [, setEmojiVariationPicker] = useEmojiVariationPickerState();
-  const VariationPickerRef = useVariationPickerRef();
 
   return function setVariationPicker(element: NullableElement) {
     const [emoji] = emojiFromElement(element);
@@ -20,9 +15,5 @@ export default function useSetVariationPicker() {
 
     setAnchoredEmojiRef(element);
     setEmojiVariationPicker(emoji);
-
-    requestAnimationFrame(() => {
-      focusFirstVisibleEmoji(VariationPickerRef.current);
-    });
   };
 }