emoji-picker-react 4.0.0-rc.28 → 4.0.0-rc.29

package/dist/DomUtils/classNames.d.ts

@@ -7,6 +7,7 @@ export declare enum ClassNames {
     emoji = "epr-emoji",
     category = "epr-emoji-category",
     label = "epr-emoji-category-label",
-    categoryContent = "epr-emoji-category-content"
+    categoryContent = "epr-emoji-category-content",
+    emojiHasVariatios = "epr-emoji-has-variations"
 }
 export declare function asSelectors(...classNames: ClassNames[]): string;

package/dist/components/context/PickerContext.d.ts

@@ -9,6 +9,7 @@ declare type Props = Readonly<{
 }>;
 export declare function useFilterRef(): React.MutableRefObject<Record<string, Record<string, DataEmoji>>>;
 export declare function useDisallowClickRef(): React.MutableRefObject<boolean>;
+export declare function useDisallowMouseRef(): React.MutableRefObject<boolean>;
 export declare function useSearchTermState(): [string, (term: string) => Promise<string>];
 export declare function useActiveCategoryState(): [ActiveCategoryState, (nextActive: string) => void, (nextActive: string) => void];
 export declare function useActiveSkinToneState(): [SkinTones, (skinTone: SkinTones) => void];

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

@@ -110,6 +110,7 @@ var ClassNames;
   ClassNames["category"] = "epr-emoji-category";
   ClassNames["label"] = "epr-emoji-category-label";
   ClassNames["categoryContent"] = "epr-emoji-category-content";
+  ClassNames["emojiHasVariatios"] = "epr-emoji-has-variations";
 })(ClassNames || (ClassNames = {}));
 
 function asSelectors() {
@@ -15128,6 +15129,7 @@ function PickerContextProvider(_ref) {
 
   var filterRef = React.useRef(alphaNumericEmojiIndex);
   var disallowClickRef = React.useRef(false);
+  var disallowMouseRef = React.useRef(false);
   var suggestedUpdateState = useDebouncedState(Date.now(), 200);
   var searchTerm = useDebouncedState('', 100);
   var skinToneFanOpenState = React.useState(false);
@@ -15152,7 +15154,8 @@ function PickerContextProvider(_ref) {
       isPastInitialLoad: isPastInitialLoad,
       searchTerm: searchTerm,
       skinToneFanOpenState: skinToneFanOpenState,
-      suggestedUpdateState: suggestedUpdateState
+      suggestedUpdateState: suggestedUpdateState,
+      disallowMouseRef: disallowMouseRef
     }
   }, children);
 }
@@ -15162,6 +15165,9 @@ var PickerContext = /*#__PURE__*/React.createContext({
   disallowClickRef: {
     current: false
   },
+  disallowMouseRef: {
+    current: false
+  },
   emojiVariationPickerState: [null, function () {}],
   emojisThatFailedToLoadState: [/*#__PURE__*/new Set(), function () {}],
   filterRef: {
@@ -15188,15 +15194,21 @@ function useDisallowClickRef() {
 
   return disallowClickRef;
 }
-function useSearchTermState() {
+function useDisallowMouseRef() {
   var _React$useContext3 = React.useContext(PickerContext),
-      searchTerm = _React$useContext3.searchTerm;
+      disallowMouseRef = _React$useContext3.disallowMouseRef;
+
+  return disallowMouseRef;
+}
+function useSearchTermState() {
+  var _React$useContext4 = React.useContext(PickerContext),
+      searchTerm = _React$useContext4.searchTerm;
 
   return searchTerm;
 }
 function useActiveCategoryState() {
-  var _React$useContext4 = React.useContext(PickerContext),
-      activeCategoryState = _React$useContext4.activeCategoryState;
+  var _React$useContext5 = React.useContext(PickerContext),
+      activeCategoryState = _React$useContext5.activeCategoryState;
 
   var PickerMainRef = usePickerMainRef();
   var activeCategory = activeCategoryState[0],
@@ -15213,38 +15225,38 @@ function useActiveCategoryState() {
   }
 }
 function useActiveSkinToneState() {
-  var _React$useContext5 = React.useContext(PickerContext),
-      activeSkinTone = _React$useContext5.activeSkinTone;
+  var _React$useContext6 = React.useContext(PickerContext),
+      activeSkinTone = _React$useContext6.activeSkinTone;
 
   return activeSkinTone;
 }
 function useEmojisThatFailedToLoadState() {
-  var _React$useContext6 = React.useContext(PickerContext),
-      emojisThatFailedToLoadState = _React$useContext6.emojisThatFailedToLoadState;
+  var _React$useContext7 = React.useContext(PickerContext),
+      emojisThatFailedToLoadState = _React$useContext7.emojisThatFailedToLoadState;
 
   return emojisThatFailedToLoadState;
 }
 function useIsPastInitialLoad() {
-  var _React$useContext7 = React.useContext(PickerContext),
-      isPastInitialLoad = _React$useContext7.isPastInitialLoad;
+  var _React$useContext8 = React.useContext(PickerContext),
+      isPastInitialLoad = _React$useContext8.isPastInitialLoad;
 
   return isPastInitialLoad;
 }
 function useEmojiVariationPickerState() {
-  var _React$useContext8 = React.useContext(PickerContext),
-      emojiVariationPickerState = _React$useContext8.emojiVariationPickerState;
+  var _React$useContext9 = React.useContext(PickerContext),
+      emojiVariationPickerState = _React$useContext9.emojiVariationPickerState;
 
   return emojiVariationPickerState;
 }
 function useSkinToneFanOpenState() {
-  var _React$useContext9 = React.useContext(PickerContext),
-      skinToneFanOpenState = _React$useContext9.skinToneFanOpenState;
+  var _React$useContext10 = React.useContext(PickerContext),
+      skinToneFanOpenState = _React$useContext10.skinToneFanOpenState;
 
   return skinToneFanOpenState;
 }
 function useUpdateSuggested() {
-  var _React$useContext10 = React.useContext(PickerContext),
-      suggestedUpdateState = _React$useContext10.suggestedUpdateState;
+  var _React$useContext11 = React.useContext(PickerContext),
+      suggestedUpdateState = _React$useContext11.suggestedUpdateState;
 
   var suggestedUpdated = suggestedUpdateState[0],
       setsuggestedUpdate = suggestedUpdateState[1];
@@ -15302,6 +15314,46 @@ function useActiveCategoryScrollDetection(bodyRef) {
   }, [bodyRef, setActiveCategory]);
 }
 
+function useDisallowMouseMove() {
+  var DisallowMouseRef = useDisallowMouseRef();
+  return function disallowMouseMove() {
+    DisallowMouseRef.current = true;
+  };
+}
+function useAllowMouseMove() {
+  var DisallowMouseRef = useDisallowMouseRef();
+  return function allowMouseMove() {
+    DisallowMouseRef.current = false;
+  };
+}
+function useIsMouseDisallowed() {
+  var DisallowMouseRef = useDisallowMouseRef();
+  return function isMouseDisallowed() {
+    return DisallowMouseRef.current;
+  };
+}
+function useOnMouseMove() {
+  var BodyRef = useBodyRef();
+  var allowMouseMove = useAllowMouseMove();
+  var isMouseDisallowed = useIsMouseDisallowed();
+  React.useEffect(function () {
+    var bodyRef = BodyRef.current;
+    bodyRef == null ? void 0 : bodyRef.addEventListener('mousemove', onMouseMove, {
+      passive: true
+    });
+
+    function onMouseMove() {
+      if (isMouseDisallowed()) {
+        allowMouseMove();
+      }
+    }
+
+    return function () {
+      bodyRef == null ? void 0 : bodyRef.removeEventListener('mousemove', onMouseMove);
+    };
+  }, [BodyRef, allowMouseMove, isMouseDisallowed]);
+}
+
 function elementCountInRow(parent, element) {
   if (!parent || !element) {
     return 0;
@@ -16277,7 +16329,7 @@ function ClickableEmoji(_ref) {
       lazyLoad = _ref.lazyLoad;
   var hasVariations = emojiHasVariations(emoji);
   return React.createElement("button", {
-    className: clsx(ClassNames.emoji, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx[ClassNames.visible] = !hidden, _clsx['epr-emoji-has-variations'] = hasVariations && showVariations, _clsx)),
+    className: clsx(ClassNames.emoji, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx[ClassNames.visible] = !hidden, _clsx[ClassNames.emojiHasVariatios] = hasVariations && showVariations, _clsx)),
     "data-unified": unified,
     // @ts-ignore - let's ignore the fact this is not a real react ref, ok?
     ref: emojiRef,
@@ -16490,6 +16542,7 @@ var Direction;
 })(Direction || (Direction = {}));
 
 function EmojiVariationPicker() {
+  var AnchoredEmojiRef = useAnchoredEmojiRef();
   var VariationPickerRef = useVariationPickerRef();
 
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
@@ -16503,10 +16556,12 @@ function EmojiVariationPicker() {
 
   var setAnchoredEmojiRef = useSetAnchoredEmojiRef();
   var getPointerStyle = usePointerStyle(VariationPickerRef);
-  var visible = emoji && emojiHasVariations(emoji);
+  var button = buttonFromTarget(AnchoredEmojiRef.current);
+  var visible = emoji && button && emojiHasVariations(emoji) && button.classList.contains(ClassNames.emojiHasVariatios);
   var top, pointerStyle;
 
-  if (!visible) {
+  if (!visible && AnchoredEmojiRef.current) {
+    focusElement(AnchoredEmojiRef.current);
     setAnchoredEmojiRef(null);
   } else {
     top = getTop();
@@ -16609,6 +16664,7 @@ function Body() {
   useActiveCategoryScrollDetection(BodyRef);
   useOnScroll(BodyRef);
   useMouseDownHandlers(BodyRef);
+  useOnMouseMove();
   return React.createElement("div", {
     className: "epr-body",
     ref: BodyRef
@@ -16617,6 +16673,8 @@ function Body() {
 
 function useEmojiPreviewEvents(allow, setPreviewEmoji) {
   var BodyRef = useBodyRef();
+  var isMouseDisallowed = useIsMouseDisallowed();
+  var allowMouseMove = useAllowMouseMove();
   React.useEffect(function () {
     if (!allow) {
       return;
@@ -16671,6 +16729,18 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
       }
     }
 
+    function onMouseOver(e) {
+      if (isMouseDisallowed()) {
+        return;
+      }
+
+      var button = buttonFromTarget(e.target);
+
+      if (button) {
+        focusElement(button);
+      }
+    }
+
     return function () {
       bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseover', onMouseOver);
       bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseout', onLeave);
@@ -16678,15 +16748,7 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
       bodyRef == null ? void 0 : bodyRef.removeEventListener('blur', onLeave, true);
       bodyRef == null ? void 0 : bodyRef.removeEventListener('keydown', onEscape);
     };
-  }, [BodyRef, allow, setPreviewEmoji]);
-
-  function onMouseOver(e) {
-    var button = buttonFromTarget(e.target);
-
-    if (button) {
-      focusElement(button);
-    }
-  }
+  }, [BodyRef, allow, setPreviewEmoji, isMouseDisallowed, allowMouseMove]);
 }
 
 var FlexDirection;
@@ -16965,25 +17027,36 @@ function usePickerMainKeyboardEvents() {
   var SearchInputRef = useSearchInputRef();
   var focusSearchInput = useFocusSearchInput();
   var hasOpenToggles = useHasOpenToggles();
+  var disallowMouseMove = useDisallowMouseMove();
   var closeAllOpenToggles = useCloseAllOpenToggles();
   var onKeyDown = React.useMemo(function () {
     return function onKeyDown(event) {
       var key = event.key;
 
-      if (key === KeyboardEvents.Escape) {
-        event.preventDefault();
+      switch (key) {
+        case KeyboardEvents.ArrowDown:
+        case KeyboardEvents.ArrowUp:
+        case KeyboardEvents.ArrowLeft:
+        case KeyboardEvents.ArrowRight:
+          disallowMouseMove();
+          break;
+        // eslint-disable-next-line no-fallthrough
+
+        case KeyboardEvents.Escape:
+          event.preventDefault();
 
-        if (hasOpenToggles()) {
-          closeAllOpenToggles();
-          return;
-        }
+          if (hasOpenToggles()) {
+            closeAllOpenToggles();
+            return;
+          }
 
-        clearSearch();
-        scrollTo(0);
-        focusSearchInput();
+          clearSearch();
+          scrollTo(0);
+          focusSearchInput();
+          break;
       }
     };
-  }, [scrollTo, clearSearch, closeAllOpenToggles, focusSearchInput, hasOpenToggles]);
+  }, [scrollTo, clearSearch, closeAllOpenToggles, focusSearchInput, hasOpenToggles, disallowMouseMove]);
   React.useEffect(function () {
     var current = PickerMainRef.current;