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

package/src/data/skinToneVariations.ts

@@ -9,4 +9,23 @@ const skinToneVariations = [
   SkinTones.DARK
 ];
 
+export const skinTonesNamed = Object.entries(SkinTones).reduce(
+  (acc, [key, value]) => {
+    acc[value] = key;
+    return acc;
+  },
+  {} as Record<string, string>
+);
+
+export const skinTonesMapped: Record<
+  string,
+  string
+> = skinToneVariations.reduce(
+  (mapped, skinTone) =>
+    Object.assign(mapped, {
+      [skinTone]: skinTone
+    }),
+  {}
+);
+
 export default skinToneVariations;

package/src/dataUtils/emojiSelectors.ts

@@ -1,10 +1,13 @@
-import { Categories } from './../config/categoryConfig';
+import { Categories } from '../config/categoryConfig';
 import { cdnUrl } from '../config/cdnUrls';
 import emojis from '../data/emojis';
-import { DataEmoji, DataEmojis } from './DataTypes';
-import skinToneVariations from '../data/skinToneVariations';
+import skinToneVariations, {
+  skinTonesMapped
+} from '../data/skinToneVariations';
 import { EmojiStyle, SkinTones } from '../types/exposedTypes';
 
+import { DataEmoji, DataEmojis } from './DataTypes';
+
 enum EmojiProperties {
   name = 'n',
   unified = 'u',
@@ -19,6 +22,17 @@ export function emojiName(emoji: DataEmoji): string {
   return emojiNames(emoji)[0];
 }
 
+export function unifiedWithoutSkinTone(unified: string): string {
+  const splat = unified.split('-');
+  const [skinTone] = splat.splice(1, 1);
+
+  if (skinTonesMapped[skinTone]) {
+    return splat.join('-');
+  }
+
+  return unified;
+}
+
 export function emojiUrl(
   emojiStyle: EmojiStyle,
   emoji: DataEmoji,
@@ -70,7 +84,13 @@ export function emojiByUnified(unified?: string): DataEmoji | undefined {
   if (!unified) {
     return;
   }
-  return allEmojisByUnified[unified];
+
+  if (allEmojisByUnified[unified]) {
+    return allEmojisByUnified[unified];
+  }
+
+  const withoutSkinTone = unifiedWithoutSkinTone(unified);
+  return allEmojisByUnified[withoutSkinTone];
 }
 
 export const allEmojis: DataEmojis = Object.values(emojis).flat();

package/src/dataUtils/{recentlyUsed.ts → suggested.ts}

@@ -1,39 +1,46 @@
-import { SkinTones } from '../types/exposedTypes';
+import { SkinTones, SuggestionMode } from '../types/exposedTypes';
+
 import { DataEmoji } from './DataTypes';
 import { emojiUnified } from './emojiSelectors';
 
-const RECENTLY_USED_LS_KEY = 'epr_recentlyUsed';
+const SUGGESTED_LS_KEY = 'epr_suggested';
 
-type RecentlyUsedItem = {
+type SuggestedItem = {
   unified: string;
   original: string;
   count: number;
 };
 
-type RecentlyUsed = RecentlyUsedItem[];
+type Suggested = SuggestedItem[];
 
-export function getRecentlyUsed(): RecentlyUsed {
+export function getsuggested(mode?: SuggestionMode): Suggested {
   if (!window?.localStorage) {
     return [];
   }
   try {
-    return JSON.parse(
-      window?.localStorage.getItem(RECENTLY_USED_LS_KEY) ?? '[]'
-    );
+    const recent = JSON.parse(
+      window?.localStorage.getItem(SUGGESTED_LS_KEY) ?? '[]'
+    ) as Suggested;
+
+    if (mode === SuggestionMode.FREQUENT) {
+      return recent.sort((a, b) => b.count - a.count);
+    }
+
+    return recent;
   } catch {
     return [];
   }
 }
 
-export function setRecentlyUsed(emoji: DataEmoji, skinTone: SkinTones) {
-  const recent = getRecentlyUsed();
+export function setsuggested(emoji: DataEmoji, skinTone: SkinTones) {
+  const recent = getsuggested();
 
   const unified = emojiUnified(emoji, skinTone);
   const originalUnified = emojiUnified(emoji);
 
   let existing = recent.find(({ unified: u }) => u === unified);
 
-  let nextList: RecentlyUsedItem[];
+  let nextList: SuggestedItem[];
 
   if (existing) {
     nextList = [existing].concat(recent.filter(i => i !== existing));
@@ -51,13 +58,8 @@ export function setRecentlyUsed(emoji: DataEmoji, skinTone: SkinTones) {
   nextList.length = Math.min(nextList.length, 14);
 
   try {
-    setTimeout(() => {
-      window?.localStorage.setItem(
-        RECENTLY_USED_LS_KEY,
-        JSON.stringify(nextList)
-      );
-      // Prevents the change from being seen immediately.
-    }, 10);
+    window?.localStorage.setItem(SUGGESTED_LS_KEY, JSON.stringify(nextList));
+    // Prevents the change from being seen immediately.
   } catch {
     // ignore
   }

package/src/hooks/preloadEmoji.ts

@@ -1,12 +1,23 @@
+import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   emojiUnified,
   emojiUrlByUnified,
   emojiVariations
 } from '../dataUtils/emojiSelectors';
-import { DataEmoji } from '../dataUtils/DataTypes';
 import { EmojiStyle } from '../types/exposedTypes';
 
-export function preloadEmoji(emoji: DataEmoji, emojiStyle: EmojiStyle): void {
+export function preloadEmoji(
+  emoji: undefined | DataEmoji,
+  emojiStyle: EmojiStyle
+): void {
+  if (!emoji) {
+    return;
+  }
+
+  if (emojiStyle === EmojiStyle.NATIVE) {
+    return;
+  }
+
   const unified = emojiUnified(emoji);
 
   if (preloadedEmojs.has(unified)) {

package/src/hooks/useActiveCategoryScrollDetection.ts

@@ -1,18 +1,20 @@
 import { useEffect } from 'react';
 
 import { categoryNameFromDom } from '../DomUtils/categoryNameFromDom';
-import { ElementRef } from '../components/context/ElementRefContext';
-import { useActiveCategoryState } from '../components/context/PickerContext';
+import { asSelectors, ClassNames } from '../DomUtils/classNames';
+import { useBodyRef } from '../components/context/ElementRefContext';
 
-export function useActiveCategoryScrollDetection(bodyRef: ElementRef) {
-  const [, setActiveCategory] = useActiveCategoryState();
+export function useActiveCategoryScrollDetection(
+  setActiveCategory: (category: string) => void
+) {
+  const BodyRef = useBodyRef();
 
   useEffect(() => {
     const visibleCategories = new Map();
+    const bodyRef = BodyRef.current;
     const observer = new IntersectionObserver(
       entries => {
-        const refCurrent = bodyRef.current;
-        if (!refCurrent) {
+        if (!bodyRef) {
           return;
         }
 
@@ -39,8 +41,8 @@ export function useActiveCategoryScrollDetection(bodyRef: ElementRef) {
         threshold: [0, 1]
       }
     );
-    bodyRef.current?.querySelectorAll('.epr-emoji-category').forEach(el => {
+    bodyRef?.querySelectorAll(asSelectors(ClassNames.category)).forEach(el => {
       observer.observe(el);
     });
-  }, [bodyRef]);
+  }, [BodyRef, setActiveCategory]);
 }

package/src/hooks/useCloseAllOpenToggles.ts

@@ -17,10 +17,21 @@ export function useCloseAllOpenToggles() {
     if (skinToneFanOpen) {
       setSkinToneFanOpen(false);
     }
-  }, [[variationPicker, skinToneFanOpen]]);
+  }, [
+    variationPicker,
+    skinToneFanOpen,
+    setVariationPicker,
+    setSkinToneFanOpen
+  ]);
 
-  return {
-    closeAllOpenToggles,
-    dependencyArray: [variationPicker, skinToneFanOpen]
+  return closeAllOpenToggles;
+}
+
+export function useHasOpenToggles() {
+  const [variationPicker] = useEmojiVariationPickerState();
+  const [skinToneFanOpen] = useSkinToneFanOpenState();
+
+  return function hasOpenToggles() {
+    return !!variationPicker || skinToneFanOpen;
   };
 }

package/src/hooks/useDebouncedState.ts

@@ -3,18 +3,21 @@ import { useRef, useState } from 'react';
 export function useDebouncedState<T>(
   initialValue: T,
   delay: number = 0
-): [T, (value: T) => void] {
+): [T, (value: T) => Promise<T>] {
   const [state, setState] = useState<T>(initialValue);
   const timer = useRef<number | null>(null);
 
   function debouncedSetState(value: T) {
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
+    return new Promise<T>(resolve => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+      }
 
-    timer.current = window?.setTimeout(() => {
-      setState(value);
-    }, delay);
+      timer.current = window?.setTimeout(() => {
+        setState(value);
+        resolve(value);
+      }, delay);
+    });
   }
 
   return [state, debouncedSetState];

package/src/hooks/useDisallowMouseMove.ts

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+
+import { useBodyRef } from '../components/context/ElementRefContext';
+import { useDisallowMouseRef } from '../components/context/PickerContext';
+
+export function useDisallowMouseMove() {
+  const DisallowMouseRef = useDisallowMouseRef();
+  return function disallowMouseMove() {
+    DisallowMouseRef.current = true;
+  };
+}
+
+export function useAllowMouseMove() {
+  const DisallowMouseRef = useDisallowMouseRef();
+  return function allowMouseMove() {
+    DisallowMouseRef.current = false;
+  };
+}
+
+export function useIsMouseDisallowed() {
+  const DisallowMouseRef = useDisallowMouseRef();
+  return function isMouseDisallowed() {
+    return DisallowMouseRef.current;
+  };
+}
+
+export function useOnMouseMove() {
+  const BodyRef = useBodyRef();
+  const allowMouseMove = useAllowMouseMove();
+  const isMouseDisallowed = useIsMouseDisallowed();
+
+  useEffect(() => {
+    const bodyRef = BodyRef.current;
+    bodyRef?.addEventListener('mousemove', onMouseMove, {
+      passive: true
+    });
+
+    function onMouseMove() {
+      if (isMouseDisallowed()) {
+        allowMouseMove();
+      }
+    }
+    return () => {
+      bodyRef?.removeEventListener('mousemove', onMouseMove);
+    };
+  }, [BodyRef, allowMouseMove, isMouseDisallowed]);
+}

package/src/hooks/useEmojiPreviewEvents.ts

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { useEffect } from 'react';
+
+import { focusElement } from '../DomUtils/focusElement';
+import {
+  buttonFromTarget,
+  originalUnifiedFromEmojiElement,
+  unifiedFromEmojiElement
+} from '../DomUtils/selectors';
+import { useBodyRef } from '../components/context/ElementRefContext';
+import { PreviewEmoji } from '../components/footer/Preview';
+
+import {
+  useAllowMouseMove,
+  useIsMouseDisallowed
+} from './useDisallowMouseMove';
+
+export function useEmojiPreviewEvents(
+  allow: boolean,
+  setPreviewEmoji: React.Dispatch<React.SetStateAction<PreviewEmoji>>
+) {
+  const BodyRef = useBodyRef();
+  const isMouseDisallowed = useIsMouseDisallowed();
+  const allowMouseMove = useAllowMouseMove();
+
+  useEffect(() => {
+    if (!allow) {
+      return;
+    }
+    const bodyRef = BodyRef.current;
+
+    bodyRef?.addEventListener('keydown', onEscape, {
+      passive: true
+    });
+
+    bodyRef?.addEventListener('mouseover', onMouseOver, true);
+
+    bodyRef?.addEventListener('focus', onEnter, true);
+
+    bodyRef?.addEventListener('mouseout', onLeave, {
+      passive: true
+    });
+    bodyRef?.addEventListener('blur', onLeave, true);
+
+
+    function onEnter(e: FocusEvent) {
+      const button = buttonFromTarget(e.target as HTMLElement);
+
+      if (!button) {
+        return onLeave();
+      }
+
+      const unified = unifiedFromEmojiElement(button);
+      const originalUnified = originalUnifiedFromEmojiElement(button);
+
+      if (!unified || !originalUnified) {
+        return onLeave();
+      }
+
+      setPreviewEmoji({
+        unified,
+        originalUnified
+      });
+    }
+    function onLeave(e?: FocusEvent | MouseEvent) {
+      if (e) {
+        const relatedTarget = e.relatedTarget as HTMLElement;
+
+        if (!buttonFromTarget(relatedTarget)) {
+          return setPreviewEmoji(null);
+        }
+      }
+
+      setPreviewEmoji(null);
+    }
+    function onEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setPreviewEmoji(null);
+      }
+    }
+
+    function onMouseOver(e: MouseEvent) {
+      if (isMouseDisallowed()) {
+        return;
+      }
+
+      const button = buttonFromTarget(e.target as HTMLElement);
+
+      if (button) {
+        focusElement(button);
+      }
+    }
+
+
+    return () => {
+      bodyRef?.removeEventListener('mouseover', onMouseOver);
+      bodyRef?.removeEventListener('mouseout', onLeave);
+      bodyRef?.removeEventListener('focus', onEnter, true);
+      bodyRef?.removeEventListener('blur', onLeave, true);
+      bodyRef?.removeEventListener('keydown', onEscape);
+    };
+  }, [BodyRef, allow, setPreviewEmoji, isMouseDisallowed, allowMouseMove]);
+}

package/src/hooks/useFilter.ts

@@ -1,5 +1,8 @@
 import { scrollTo } from '../DomUtils/scrollTo';
-import { usePickerMainRef } from '../components/context/ElementRefContext';
+import {
+  usePickerMainRef,
+  useSearchInputRef
+} from '../components/context/ElementRefContext';
 import {
   FilterState,
   useFilterRef,
@@ -7,14 +10,6 @@ import {
 } from '../components/context/PickerContext';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiNames } from '../dataUtils/emojiSelectors';
-import {
-  hideElement,
-  hideEmoji,
-  iterateEmojiRef,
-  showElement
-} from '../DomUtils/emojiElementRef';
-import { useRef } from 'react';
-import { ClassNames } from '../DomUtils/classNames';
 
 function useSetFilterRef() {
   const filterRef = useFilterRef();
@@ -30,35 +25,52 @@ function useSetFilterRef() {
   };
 }
 
+export function useClearSearch() {
+  const applySearch = useApplySearch();
+  const SearchInputRef = useSearchInputRef();
+
+  return function clearSearch() {
+    if (SearchInputRef.current) {
+      SearchInputRef.current.value = '';
+    }
+
+    applySearch('');
+  };
+}
+
+export function useAppendSearch() {
+  const SearchInputRef = useSearchInputRef();
+  const applySearch = useApplySearch();
+
+  return function appendSearch(str: string) {
+    if (SearchInputRef.current) {
+      SearchInputRef.current.value = SearchInputRef.current.value + str;
+      applySearch(SearchInputRef.current.value);
+    } else {
+      applySearch(str);
+    }
+  };
+}
+
 export function useFilter() {
-  const SearchInputRef = useRef<HTMLInputElement>(null);
+  const SearchInputRef = useSearchInputRef();
   const filterRef = useFilterRef();
   const setFilterRef = useSetFilterRef();
+  const applySearch = useApplySearch();
 
-  const [searchTerm, setSearchTerm] = useSearchTermState();
-  const PickerMainRef = usePickerMainRef();
+  const [searchTerm] = useSearchTermState();
 
   return {
     onChange,
     searchTerm,
-    clearSearch,
     SearchInputRef
   };
 
-  function clearSearch() {
-    if (SearchInputRef.current) {
-      SearchInputRef.current.value = '';
-    }
-    onChange('');
-  }
-
   function onChange(nextValue: string) {
-    scrollTo(PickerMainRef.current, 0);
-
     const filter = filterRef.current;
 
     if (filter?.[nextValue] || nextValue.length <= 1) {
-      return applyFilterToDom(nextValue);
+      return applySearch(nextValue);
     }
 
     const longestMatch = findLongestMatch(nextValue, filter);
@@ -66,7 +78,7 @@ export function useFilter() {
     if (!longestMatch) {
       // Can we even get here?
       // If so, we need to search among all emojis
-      return applyFilterToDom(nextValue);
+      return applySearch(nextValue);
     }
 
     setFilterRef(current =>
@@ -74,32 +86,21 @@ export function useFilter() {
         [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue)
       })
     );
-    applyFilterToDom(nextValue);
+    applySearch(nextValue);
   }
+}
 
-  // This function is the farthest from being "React" as it can be
-  // It performs DOM manipulation and is not a pure function
-  // But it is the most performant way to do it, at least 5 times faster than
-  // react re-rendering. The reason I trust it to work correctly is because we
-  // eventually do update the state, which keeps the DOM in sync - after the fact
-  function applyFilterToDom(searchTerm: string): void {
-    PickerMainRef.current?.classList.toggle(
-      ClassNames.searchActive,
-      !!searchTerm
-    );
-
-    iterateEmojiRef((element, unified) => {
-      if (isEmojiFilteredBySearchTerm(unified, filterRef.current, searchTerm)) {
-        hideElement(element);
-        return;
-      }
-      showElement(element);
-    });
+function useApplySearch() {
+  const [, setSearchTerm] = useSearchTermState();
+  const PickerMainRef = usePickerMainRef();
 
+  return function applySearch(searchTerm: string) {
     requestAnimationFrame(() => {
-      setSearchTerm(searchTerm);
+      setSearchTerm(searchTerm).then(() => {
+        scrollTo(PickerMainRef.current, 0);
+      });
     });
-  }
+  };
 }
 
 function filterEmojiObjectByKeyword(
@@ -113,8 +114,6 @@ function filterEmojiObjectByKeyword(
 
     if (hasMatch(emoji, keyword)) {
       filtered[unified] = emoji;
-    } else {
-      hideEmoji(unified);
     }
   }
 

package/src/hooks/useFocus.ts

@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+
+import { focusElement, focusFirstElementChild } from '../DomUtils/focusElement';
+import {
+  useCategoryNavigationRef,
+  useSearchInputRef,
+  useSkinTonePickerRef
+} from '../components/context/ElementRefContext';
+
+export function useFocusSearchInput() {
+  const SearchInputRef = useSearchInputRef();
+
+  return useCallback(() => {
+    focusElement(SearchInputRef.current);
+  }, [SearchInputRef]);
+}
+
+export function useFocusSkinTonePicker() {
+  const SkinTonePickerRef = useSkinTonePickerRef();
+
+  return useCallback(() => {
+    if (!SkinTonePickerRef.current) {
+      return;
+    }
+
+    focusFirstElementChild(SkinTonePickerRef.current);
+  }, [SkinTonePickerRef]);
+}
+
+export function useFocusCategoryNavigation() {
+  const CategoryNavigationRef = useCategoryNavigationRef();
+
+  return useCallback(() => {
+    if (!CategoryNavigationRef.current) {
+      return;
+    }
+
+    focusFirstElementChild(CategoryNavigationRef.current);
+  }, [CategoryNavigationRef]);
+}

package/src/hooks/useInitialLoad.ts

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import * as React from 'react';
 
 export function useMarkInitialLoad(
   dispatch: React.Dispatch<React.SetStateAction<boolean>>

package/src/hooks/useIsEmojiHidden.ts

@@ -4,13 +4,26 @@ import { emojiUnified } from '../dataUtils/emojiSelectors';
 
 import { useIsEmojiFiltered } from './useFilter';
 
-export function useIsEmojiHidden(): (emoji: DataEmoji) => boolean {
+export function useIsEmojiHidden(): (emoji: DataEmoji) => IsHiddenReturn {
   const [emojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
   const isEmojiFiltered = useIsEmojiFiltered();
 
-  return (emoji: DataEmoji): boolean => {
+  return (emoji: DataEmoji): IsHiddenReturn => {
     const unified = emojiUnified(emoji);
 
-    return emojisThatFailedToLoad.has(unified) || isEmojiFiltered(unified);
+    const failedToLoad = emojisThatFailedToLoad.has(unified);
+    const filteredOut = isEmojiFiltered(unified);
+
+    return {
+      failedToLoad,
+      filteredOut,
+      hidden: failedToLoad || filteredOut
+    };
   };
 }
+
+type IsHiddenReturn = {
+  failedToLoad: boolean;
+  filteredOut: boolean;
+  hidden: boolean;
+};