emoji-picker-react 4.0.0-rc.8 → 4.0.0

package/src/hooks/useKeyboardNavigation.ts

@@ -0,0 +1,438 @@
+import { useCallback, useEffect, useMemo } from 'react';
+
+import { hasNextElementSibling } from '../DomUtils/elementPositionInRow';
+import {
+  focusNextElementSibling,
+  focusPrevElementSibling
+} from '../DomUtils/focusElement';
+import { getActiveElement } from '../DomUtils/getActiveElement';
+import {
+  focusAndClickFirstVisibleEmoji,
+  focusFirstVisibleEmoji,
+  focusNextVisibleEmoji,
+  focusPrevVisibleEmoji,
+  focusVisibleEmojiOneRowDown,
+  focusVisibleEmojiOneRowUp
+} from '../DomUtils/keyboardNavigation';
+import { useScrollTo } from '../DomUtils/scrollTo';
+import { buttonFromTarget } from '../DomUtils/selectors';
+import {
+  useBodyRef,
+  useCategoryNavigationRef,
+  usePickerMainRef,
+  useSearchInputRef,
+  useSkinTonePickerRef
+} from '../components/context/ElementRefContext';
+import { useSkinToneFanOpenState } from '../components/context/PickerContext';
+
+import {
+  useCloseAllOpenToggles,
+  useHasOpenToggles
+} from './useCloseAllOpenToggles';
+import { useDisallowMouseMove } from './useDisallowMouseMove';
+import { useAppendSearch, useClearSearch } from './useFilter';
+import {
+  useFocusCategoryNavigation,
+  useFocusSearchInput,
+  useFocusSkinTonePicker
+} from './useFocus';
+import useIsSearchMode from './useIsSearchMode';
+import useSetVariationPicker from './useSetVariationPicker';
+
+enum KeyboardEvents {
+  ArrowDown = 'ArrowDown',
+  ArrowUp = 'ArrowUp',
+  ArrowLeft = 'ArrowLeft',
+  ArrowRight = 'ArrowRight',
+  Escape = 'Escape',
+  Enter = 'Enter',
+  Space = ' '
+}
+
+export function useKeyboardNavigation() {
+  usePickerMainKeyboardEvents();
+  useSearchInputKeyboardEvents();
+  useSkinTonePickerKeyboardEvents();
+  useCategoryNavigationKeyboardEvents();
+  useBodyKeyboardEvents();
+}
+
+function usePickerMainKeyboardEvents() {
+  const PickerMainRef = usePickerMainRef();
+  const clearSearch = useClearSearch();
+  const scrollTo = useScrollTo();
+  const SearchInputRef = useSearchInputRef();
+  const focusSearchInput = useFocusSearchInput();
+  const hasOpenToggles = useHasOpenToggles();
+  const disallowMouseMove = useDisallowMouseMove();
+
+  const closeAllOpenToggles = useCloseAllOpenToggles();
+
+  const onKeyDown = useMemo(
+    () =>
+      function onKeyDown(event: KeyboardEvent) {
+        const { key } = event;
+
+        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;
+            }
+            clearSearch();
+            scrollTo(0);
+            focusSearchInput();
+            break;
+        }
+      },
+    [
+      scrollTo,
+      clearSearch,
+      closeAllOpenToggles,
+      focusSearchInput,
+      hasOpenToggles,
+      disallowMouseMove
+    ]
+  );
+
+  useEffect(() => {
+    const current = PickerMainRef.current;
+
+    if (!current) {
+      return;
+    }
+
+    current.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      current.removeEventListener('keydown', onKeyDown);
+    };
+  }, [PickerMainRef, SearchInputRef, scrollTo, onKeyDown]);
+}
+
+function useSearchInputKeyboardEvents() {
+  const focusSkinTonePicker = useFocusSkinTonePicker();
+  const PickerMainRef = usePickerMainRef();
+  const BodyRef = useBodyRef();
+  const SearchInputRef = useSearchInputRef();
+  const [, setSkinToneFanOpenState] = useSkinToneFanOpenState();
+  const goDownFromSearchInput = useGoDownFromSearchInput();
+
+  const onKeyDown = useMemo(
+    () =>
+      function onKeyDown(event: KeyboardEvent) {
+        const { key } = event;
+
+        switch (key) {
+          case KeyboardEvents.ArrowRight:
+            event.preventDefault();
+            setSkinToneFanOpenState(true);
+            focusSkinTonePicker();
+            break;
+          case KeyboardEvents.ArrowDown:
+            event.preventDefault();
+            goDownFromSearchInput();
+            break;
+          case KeyboardEvents.Enter:
+            event.preventDefault();
+            focusAndClickFirstVisibleEmoji(BodyRef.current);
+            break;
+        }
+      },
+    [
+      focusSkinTonePicker,
+      goDownFromSearchInput,
+      setSkinToneFanOpenState,
+      BodyRef
+    ]
+  );
+
+  useEffect(() => {
+    const current = SearchInputRef.current;
+
+    if (!current) {
+      return;
+    }
+
+    current.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      current.removeEventListener('keydown', onKeyDown);
+    };
+  }, [PickerMainRef, SearchInputRef, onKeyDown]);
+}
+
+function useSkinTonePickerKeyboardEvents() {
+  const SkinTonePickerRef = useSkinTonePickerRef();
+  const focusSearchInput = useFocusSearchInput();
+  const SearchInputRef = useSearchInputRef();
+  const goDownFromSearchInput = useGoDownFromSearchInput();
+  const [isOpen, setIsOpen] = useSkinToneFanOpenState();
+  const onType = useOnType();
+
+  const onKeyDown = useMemo(
+    () =>
+      function onKeyDown(event: KeyboardEvent) {
+        const { key } = event;
+
+        switch (key) {
+          case KeyboardEvents.ArrowLeft:
+            event.preventDefault();
+            if (!isOpen) {
+              return focusSearchInput();
+            }
+            focusNextSkinTone(focusSearchInput);
+            break;
+          case KeyboardEvents.ArrowRight:
+            event.preventDefault();
+            if (!isOpen) {
+              return focusSearchInput();
+            }
+            focusPrevSkinTone();
+            break;
+          case KeyboardEvents.ArrowDown:
+            event.preventDefault();
+            if (isOpen) {
+              setIsOpen(false);
+            }
+            goDownFromSearchInput();
+            break;
+          default:
+            onType(event);
+            break;
+        }
+      },
+    [isOpen, focusSearchInput, setIsOpen, goDownFromSearchInput, onType]
+  );
+
+  useEffect(() => {
+    const current = SkinTonePickerRef.current;
+
+    if (!current) {
+      return;
+    }
+
+    current.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      current.removeEventListener('keydown', onKeyDown);
+    };
+  }, [SkinTonePickerRef, SearchInputRef, isOpen, onKeyDown]);
+}
+
+function useCategoryNavigationKeyboardEvents() {
+  const focusSearchInput = useFocusSearchInput();
+  const CategoryNavigationRef = useCategoryNavigationRef();
+  const BodyRef = useBodyRef();
+  const onType = useOnType();
+
+  const onKeyDown = useMemo(
+    () =>
+      function onKeyDown(event: KeyboardEvent) {
+        const { key } = event;
+
+        switch (key) {
+          case KeyboardEvents.ArrowUp:
+            event.preventDefault();
+            focusSearchInput();
+            break;
+          case KeyboardEvents.ArrowRight:
+            event.preventDefault();
+            focusNextElementSibling(getActiveElement());
+            break;
+          case KeyboardEvents.ArrowLeft:
+            event.preventDefault();
+            focusPrevElementSibling(getActiveElement());
+            break;
+          case KeyboardEvents.ArrowDown:
+            event.preventDefault();
+            focusFirstVisibleEmoji(BodyRef.current);
+            break;
+          default:
+            onType(event);
+            break;
+        }
+      },
+    [BodyRef, focusSearchInput, onType]
+  );
+
+  useEffect(() => {
+    const current = CategoryNavigationRef.current;
+
+    if (!current) {
+      return;
+    }
+
+    current.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      current.removeEventListener('keydown', onKeyDown);
+    };
+  }, [CategoryNavigationRef, BodyRef, onKeyDown]);
+}
+
+function useBodyKeyboardEvents() {
+  const BodyRef = useBodyRef();
+  const goUpFromBody = useGoUpFromBody();
+  const setVariationPicker = useSetVariationPicker();
+  const hasOpenToggles = useHasOpenToggles();
+  const closeAllOpenToggles = useCloseAllOpenToggles();
+
+  const onType = useOnType();
+
+  const onKeyDown = useMemo(
+    () =>
+      // eslint-disable-next-line complexity
+      function onKeyDown(event: KeyboardEvent) {
+        const { key } = event;
+
+        const activeElement = buttonFromTarget(getActiveElement());
+
+        switch (key) {
+          case KeyboardEvents.ArrowRight:
+            event.preventDefault();
+            focusNextVisibleEmoji(activeElement);
+            break;
+          case KeyboardEvents.ArrowLeft:
+            event.preventDefault();
+            focusPrevVisibleEmoji(activeElement);
+            break;
+          case KeyboardEvents.ArrowDown:
+            event.preventDefault();
+            if (hasOpenToggles()) {
+              closeAllOpenToggles();
+              break;
+            }
+            focusVisibleEmojiOneRowDown(activeElement);
+            break;
+          case KeyboardEvents.ArrowUp:
+            event.preventDefault();
+            if (hasOpenToggles()) {
+              closeAllOpenToggles();
+              break;
+            }
+            focusVisibleEmojiOneRowUp(activeElement, goUpFromBody);
+            break;
+          case KeyboardEvents.Space:
+            event.preventDefault();
+            setVariationPicker(event.target as HTMLElement);
+            break;
+          default:
+            onType(event);
+            break;
+        }
+      },
+    [
+      goUpFromBody,
+      onType,
+      setVariationPicker,
+      hasOpenToggles,
+      closeAllOpenToggles
+    ]
+  );
+
+  useEffect(() => {
+    const current = BodyRef.current;
+
+    if (!current) {
+      return;
+    }
+
+    current.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      current.removeEventListener('keydown', onKeyDown);
+    };
+  }, [BodyRef, onKeyDown]);
+}
+
+function useGoDownFromSearchInput() {
+  const focusCategoryNavigation = useFocusCategoryNavigation();
+  const isSearchMode = useIsSearchMode();
+  const BodyRef = useBodyRef();
+
+  return useCallback(
+    function goDownFromSearchInput() {
+      if (isSearchMode) {
+        return focusFirstVisibleEmoji(BodyRef.current);
+      }
+      return focusCategoryNavigation();
+    },
+    [BodyRef, focusCategoryNavigation, isSearchMode]
+  );
+}
+
+function useGoUpFromBody() {
+  const focusSearchInput = useFocusSearchInput();
+  const focusCategoryNavigation = useFocusCategoryNavigation();
+  const isSearchMode = useIsSearchMode();
+
+  return useCallback(
+    function goUpFromEmoji() {
+      if (isSearchMode) {
+        return focusSearchInput();
+      }
+      return focusCategoryNavigation();
+    },
+    [focusSearchInput, isSearchMode, focusCategoryNavigation]
+  );
+}
+
+function focusNextSkinTone(exitLeft: () => void) {
+  const currentSkinTone = getActiveElement();
+
+  if (!currentSkinTone) {
+    return;
+  }
+
+  if (!hasNextElementSibling(currentSkinTone)) {
+    exitLeft();
+  }
+
+  focusNextElementSibling(currentSkinTone);
+}
+
+function focusPrevSkinTone() {
+  const currentSkinTone = getActiveElement();
+
+  if (!currentSkinTone) {
+    return;
+  }
+
+  focusPrevElementSibling(currentSkinTone);
+}
+
+function useOnType() {
+  const appendSearch = useAppendSearch();
+  const focusSearchInput = useFocusSearchInput();
+  const closeAllOpenToggles = useCloseAllOpenToggles();
+
+  return function onType(event: KeyboardEvent) {
+    const { key } = event;
+
+    if (hasModifier(event)) {
+      return;
+    }
+
+    if (key.match(/(^[a-zA-Z0-9]$){1}/)) {
+      event.preventDefault();
+      closeAllOpenToggles();
+      focusSearchInput();
+      appendSearch(key);
+    }
+  };
+}
+
+function hasModifier(event: KeyboardEvent): boolean {
+  const { metaKey, ctrlKey, altKey } = event;
+
+  return metaKey || ctrlKey || altKey;
+}

package/src/hooks/useMouseDownHandlers.ts

@@ -1,17 +1,18 @@
-import { SkinTones } from './../types/exposedTypes';
+import * as React from 'react';
 import { useEffect, useRef } from 'react';
 
-import { emojiFromElement, isEmojiElement } from '../DomUtils/selectors';
-import { useSetAnchoredEmojiRef } from '../components/context/ElementRefContext';
+import {
+  emojiFromElement,
+  isEmojiElement,
+  NullableElement
+} from '../DomUtils/selectors';
 import {
   useActiveSkinToneState,
   useDisallowClickRef,
-  useEmojiVariationPickerState
+  useEmojiVariationPickerState,
+  useUpdateSuggested
 } from '../components/context/PickerContext';
-import {
-  useEmojiStyleConfig,
-  useOnEmojiClickConfig
-} from '../config/useConfig';
+import { useOnEmojiClickConfig } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   activeVariationFromUnified,
@@ -21,25 +22,100 @@ import {
   emojiUrlByUnified
 } from '../dataUtils/emojiSelectors';
 import { parseNativeEmoji } from '../dataUtils/parseNativeEmoji';
-import { setRecentlyUsed } from '../dataUtils/recentlyUsed';
-import { EmojiClickData, EmojiStyle } from '../types/exposedTypes';
+import { setsuggested } from '../dataUtils/suggested';
+import { EmojiClickData, EmojiStyle, SkinTones } from '../types/exposedTypes';
 
 import { useCloseAllOpenToggles } from './useCloseAllOpenToggles';
-import { preloadEmoji } from './preloadEmoji';
-
-let mouseDownTimer: undefined | number;
+import useSetVariationPicker from './useSetVariationPicker';
 
 export function useMouseDownHandlers(
-  BodyRef: React.MutableRefObject<HTMLElement | null>
+  BodyRef: React.MutableRefObject<NullableElement>
 ) {
-  const preloading = useRef(false);
-  const setAnchoredEmojiRef = useSetAnchoredEmojiRef();
+  const mouseDownTimerRef = useRef<undefined | number>();
+  const setVariationPicker = useSetVariationPicker();
   const disallowClickRef = useDisallowClickRef();
   const [, setEmojiVariationPicker] = useEmojiVariationPickerState();
-  const { closeAllOpenToggles, dependencyArray } = useCloseAllOpenToggles();
+  const closeAllOpenToggles = useCloseAllOpenToggles();
   const [activeSkinTone] = useActiveSkinToneState();
   const onEmojiClick = useOnEmojiClickConfig();
-  const emojiStyle = useEmojiStyleConfig();
+  const [, updateSuggested] = useUpdateSuggested();
+
+  const onClick = React.useCallback(
+    function onClick(event: MouseEvent) {
+      if (disallowClickRef.current) {
+        return;
+      }
+
+      closeAllOpenToggles();
+
+      const [emoji, unified] = emojiFromEvent(event);
+
+      if (!emoji || !unified) {
+        return;
+      }
+
+      const skinToneToUse =
+        activeVariationFromUnified(unified) || activeSkinTone;
+
+      updateSuggested();
+      setsuggested(emoji, skinToneToUse);
+      onEmojiClick(emojiClickOutput(emoji, skinToneToUse), event);
+    },
+    [
+      activeSkinTone,
+      closeAllOpenToggles,
+      disallowClickRef,
+      onEmojiClick,
+      updateSuggested
+    ]
+  );
+
+  const onMouseDown = React.useCallback(
+    function onMouseDown(event: MouseEvent) {
+      if (mouseDownTimerRef.current) {
+        clearTimeout(mouseDownTimerRef.current);
+      }
+
+      const [emoji] = emojiFromEvent(event);
+
+      if (!emoji || !emojiHasVariations(emoji)) {
+        return;
+      }
+
+      mouseDownTimerRef.current = window?.setTimeout(() => {
+        disallowClickRef.current = true;
+        mouseDownTimerRef.current = undefined;
+        closeAllOpenToggles();
+        setVariationPicker(event.target as HTMLElement);
+        setEmojiVariationPicker(emoji);
+      }, 500);
+    },
+    [
+      disallowClickRef,
+      closeAllOpenToggles,
+      setVariationPicker,
+      setEmojiVariationPicker
+    ]
+  );
+  const onMouseUp = React.useCallback(
+    function onMouseUp() {
+      if (mouseDownTimerRef.current) {
+        clearTimeout(mouseDownTimerRef.current);
+        mouseDownTimerRef.current = undefined;
+      } else if (disallowClickRef.current) {
+        // The problem we're trying to overcome here
+        // is that the emoji has both mouseup and click events
+        // and when releasing a mouseup event
+        // the click gets triggered too
+        // So we're disallowing the click event for a short time
+
+        requestAnimationFrame(() => {
+          disallowClickRef.current = false;
+        });
+      }
+    },
+    [disallowClickRef]
+  );
 
   useEffect(() => {
     if (!BodyRef.current) {
@@ -62,81 +138,13 @@ export function useMouseDownHandlers(
       bodyRef?.removeEventListener('mousedown', onMouseDown);
       bodyRef?.removeEventListener('mouseup', onMouseUp);
     };
-  }, [BodyRef, ...dependencyArray]);
-
-  function onClick(event: MouseEvent) {
-    if (disallowClickRef.current) {
-      return;
-    }
-
-    closeAllOpenToggles();
-
-    const emoji = emojiFromEvent(event);
-
-    if (!emoji) {
-      return;
-    }
-
-    const unified = emojiUnified(emoji);
-
-    const skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
-
-    setRecentlyUsed(emoji, skinToneToUse);
-    onEmojiClick(event, emojiClickOutput(emoji, skinToneToUse));
-  }
-
-  function onMouseDown(event: MouseEvent) {
-    if (mouseDownTimer) {
-      clearTimeout(mouseDownTimer);
-    }
-
-    const emoji = emojiFromEvent(event);
-
-    if (!emoji || !emojiHasVariations(emoji)) {
-      return;
-    }
-
-    preloading.current = true;
-
-    window?.setTimeout(() => {
-      if (preloading.current) {
-        preloadEmoji(emoji, emojiStyle);
-        preloading.current = false;
-      }
-    }, 50);
-
-    mouseDownTimer = window?.setTimeout(() => {
-      disallowClickRef.current = true;
-      mouseDownTimer = undefined;
-      closeAllOpenToggles();
-      setAnchoredEmojiRef(event.target as HTMLElement);
-      setEmojiVariationPicker(emoji);
-    }, 250);
-  }
-  function onMouseUp() {
-    preloading.current = false;
-
-    if (mouseDownTimer) {
-      clearTimeout(mouseDownTimer);
-      mouseDownTimer = undefined;
-    } else if (disallowClickRef.current) {
-      // The problem we're trying to overcome here
-      // is that the emoji has both mouseup and click events
-      // and when releasing a mouseup event
-      // the click gets triggered too
-      // So we're disallowing the click event for a short time
-
-      requestAnimationFrame(() => {
-        disallowClickRef.current = false;
-      });
-    }
-  }
+  }, [BodyRef, onClick, onMouseDown, onMouseUp]);
 }
 
-function emojiFromEvent(event: MouseEvent): DataEmoji | undefined {
+function emojiFromEvent(event: MouseEvent): [DataEmoji, string] | [] {
   const target = event?.target as HTMLElement;
   if (!isEmojiElement(target)) {
-    return;
+    return [];
   }
 
   return emojiFromElement(target);

package/src/hooks/useOnFocus.ts

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+
+import { buttonFromTarget, emojiFromElement } from '../DomUtils/selectors';
+import { useBodyRef } from '../components/context/ElementRefContext';
+import { useEmojiStyleConfig } from '../config/useConfig';
+import { emojiHasVariations } from '../dataUtils/emojiSelectors';
+import { EmojiStyle } from '../types/exposedTypes';
+
+import { preloadEmoji } from './preloadEmoji';
+
+export function useOnFocus() {
+  const BodyRef = useBodyRef();
+  const emojiStyle = useEmojiStyleConfig();
+
+  useEffect(() => {
+    if (emojiStyle === EmojiStyle.NATIVE) {
+      return;
+    }
+
+    const bodyRef = BodyRef.current;
+
+    bodyRef?.addEventListener('focusin', onFocus);
+
+    return () => {
+      bodyRef?.removeEventListener('focusin', onFocus);
+    };
+
+    function onFocus(event: FocusEvent) {
+      const button = buttonFromTarget(event.target as HTMLElement);
+
+      if (!button) {
+        return;
+      }
+
+      const [emoji] = emojiFromElement(button);
+
+      if (!emoji) {
+        return;
+      }
+
+      if (emojiHasVariations(emoji)) {
+        preloadEmoji(emoji, emojiStyle);
+      }
+    }
+  }, [BodyRef, emojiStyle]);
+}