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

package/src/components/body/EmojiList.tsx

@@ -7,7 +7,8 @@ import {
 } from '../../config/categoryConfig';
 import {
   useCategoriesConfig,
-  useEmojiStyleConfig
+  useEmojiStyleConfig,
+  useLazyLoadEmojisConfig
 } from '../../config/useConfig';
 import { emojisByCategory, emojiUnified } from '../../dataUtils/emojiSelectors';
 import { useIsEmojiHidden } from '../../hooks/useIsEmojiHidden';
@@ -15,12 +16,12 @@ import {
   useActiveSkinToneState,
   useIsPastInitialLoad
 } from '../context/PickerContext';
-import { Emoji } from '../emoji/Emoji';
+import { ClickableEmoji } from '../emoji/Emoji';
 
 import { EmojiCategory } from './EmojiCategory';
-import { RecentlyUsed } from './RecentlyUsed';
+import { Suggested } from './Suggested';
+
 import './EmojiList.css';
-import { getEmojiRef } from '../../DomUtils/emojiElementRef';
 
 export function EmojiList() {
   const categories = useCategoriesConfig();
@@ -30,10 +31,8 @@ export function EmojiList() {
       {categories.map((categoryConfig, index) => {
         const category = categoryFromCategoryConfig(categoryConfig);
 
-        if (category === Categories.RECENTLY_USED) {
-          return (
-            <RecentlyUsed key={category} categoryConfig={categoryConfig} />
-          );
+        if (category === Categories.SUGGESTED) {
+          return <Suggested key={category} categoryConfig={categoryConfig} />;
         }
 
         return (
@@ -59,6 +58,7 @@ function RenderCategory({
   categoryConfig: CategoryConfig;
 }) {
   const isEmojiHidden = useIsEmojiHidden();
+  const lazyLoadEmojis = useLazyLoadEmojisConfig();
   const emojiStyle = useEmojiStyleConfig();
   const isPastInitialLoad = useIsPastInitialLoad();
   const [activeSkinTone] = useActiveSkinToneState();
@@ -72,21 +72,21 @@ function RenderCategory({
 
   const emojis = emojisToPush.map(emoji => {
     const unified = emojiUnified(emoji, activeSkinTone);
-    const hidden = isEmojiHidden(emoji);
-    const emojiRef = getEmojiRef(emojiUnified(emoji));
+    const { failedToLoad, filteredOut, hidden } = isEmojiHidden(emoji);
 
     if (hidden) {
       hiddenCounter++;
     }
 
     return (
-      <Emoji
+      <ClickableEmoji
         key={unified}
         emoji={emoji}
         unified={unified}
-        hidden={hidden}
+        hidden={failedToLoad}
+        hiddenOnSearch={filteredOut}
         emojiStyle={emojiStyle}
-        emojiRef={emojiRef}
+        lazyLoad={lazyLoadEmojis}
       />
     );
   });

package/src/components/body/EmojiVariationPicker.css

@@ -1,8 +1,8 @@
 .EmojiPickerReact .epr-emoji-variation-picker {
   position: absolute;
   top: 0;
-  right: 5px;
-  left: 5px;
+  right: 15px;
+  left: 15px;
   padding: 5px;
   height: 0;
   box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
@@ -18,12 +18,20 @@
   height: var(--epr-emoji-variation-picker-height);
   z-index: var(--epr-skin-variation-picker-z-index);
   background: var(--epr-emoji-variation-picker-bg-color);
+  transform: scale(0.9);
+  transition: transform 0.1s ease-out, opacity 0.2s ease-out;
+}
+
+.EmojiPickerReact .epr-emoji-variation-picker.pointing-up {
+  transform-origin: center 0%;
+  transform: scale(0.9);
 }
 
 .EmojiPickerReact .epr-emoji-variation-picker.visible {
   opacity: 1;
   visibility: visible;
   pointer-events: all;
+  transform: scale(1);
 }
 .EmojiPickerReact
   .epr-emoji-variation-picker
@@ -56,10 +64,10 @@
 
 .EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer {
   top: 100%;
-  transform: translateX(-7px);
+  transform: translateX(-18px);
 }
 
-.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer.pointing-up {
+.EmojiPickerReact .epr-emoji-variation-picker.pointing-up .epr-emoji-pointer {
   top: 0;
-  transform: rotate(180deg) translateY(100%) translateX(7px);
+  transform: rotate(180deg) translateY(100%) translateX(18px);
 }

package/src/components/body/EmojiVariationPicker.tsx

@@ -1,8 +1,10 @@
 import clsx from 'clsx';
 import * as React from 'react';
 
+import { ClassNames } from '../../DomUtils/classNames';
+import { focusElement } from '../../DomUtils/focusElement';
 import {
-  buttonFromEmoji,
+  buttonFromTarget,
   elementHeight,
   emojiTrueOffsetTop,
   emojiTruOffsetLeft
@@ -17,10 +19,11 @@ import {
 import {
   useAnchoredEmojiRef,
   useBodyRef,
-  useSetAnchoredEmojiRef
+  useSetAnchoredEmojiRef,
+  useVariationPickerRef
 } from '../context/ElementRefContext';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
-import { Emoji } from '../emoji/Emoji';
+import { ClickableEmoji } from '../emoji/Emoji';
 import './EmojiVariationPicker.css';
 
 enum Direction {
@@ -29,7 +32,8 @@ enum Direction {
 }
 
 export function EmojiVariationPicker() {
-  const VariationPickerRef = React.useRef<HTMLDivElement>(null);
+  const AnchoredEmojiRef = useAnchoredEmojiRef();
+  const VariationPickerRef = useVariationPickerRef();
   const [emoji] = useEmojiVariationPickerState();
   const emojiStyle = useEmojiStyleConfig();
   const { getTop, getMenuDirection } = useVariationPickerTop(
@@ -38,10 +42,18 @@ export function EmojiVariationPicker() {
   const setAnchoredEmojiRef = useSetAnchoredEmojiRef();
   const getPointerStyle = usePointerStyle(VariationPickerRef);
 
-  const visible = emoji && emojiHasVariations(emoji);
+  const button = buttonFromTarget(AnchoredEmojiRef.current);
+
+  const visible =
+    emoji &&
+    button &&
+    emojiHasVariations(emoji) &&
+    button.classList.contains(ClassNames.emojiHasVariatios);
+
   let top, pointerStyle;
 
-  if (!visible) {
+  if (!visible && AnchoredEmojiRef.current) {
+    focusElement(AnchoredEmojiRef.current);
     setAnchoredEmojiRef(null);
   } else {
     top = getTop();
@@ -54,7 +66,8 @@ export function EmojiVariationPicker() {
     <div
       ref={VariationPickerRef}
       className={clsx('epr-emoji-variation-picker', {
-        visible
+        visible,
+        'pointing-up': getMenuDirection() === Direction.Down
       })}
       style={{ top }}
     >
@@ -63,7 +76,7 @@ export function EmojiVariationPicker() {
             .concat(emojiVariations(safeEmoji))
             .slice(0, 6)
             .map(unified => (
-              <Emoji
+              <ClickableEmoji
                 key={unified}
                 emoji={safeEmoji}
                 unified={unified}
@@ -72,12 +85,7 @@ export function EmojiVariationPicker() {
               />
             ))
         : null}
-      <div
-        className={clsx('epr-emoji-pointer', {
-          'pointing-up': getMenuDirection() === Direction.Down
-        })}
-        style={pointerStyle}
-      />
+      <div className="epr-emoji-pointer" style={pointerStyle} />
     </div>
   );
 }
@@ -91,7 +99,7 @@ function usePointerStyle(VariationPickerRef: React.RefObject<HTMLElement>) {
     }
 
     if (AnchoredEmojiRef.current) {
-      const button = buttonFromEmoji(AnchoredEmojiRef.current);
+      const button = buttonFromTarget(AnchoredEmojiRef.current);
 
       const offsetLeft = emojiTruOffsetLeft(button);
 
@@ -100,7 +108,7 @@ function usePointerStyle(VariationPickerRef: React.RefObject<HTMLElement>) {
       }
 
       // half of the button
-      style.left = offsetLeft + button?.clientWidth / 2 - 12;
+      style.left = offsetLeft + button?.clientWidth / 2;
     }
 
     return style;
@@ -135,7 +143,7 @@ function useVariationPickerTop(
 
     if (AnchoredEmojiRef.current) {
       const bodyRef = BodyRef.current;
-      const button = buttonFromEmoji(AnchoredEmojiRef.current);
+      const button = buttonFromTarget(AnchoredEmojiRef.current);
 
       const buttonHeight = elementHeight(button);
 

package/src/components/body/Suggested.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+import { CategoryConfig } from '../../config/categoryConfig';
+import {
+  useEmojiStyleConfig,
+  useSuggestedEmojisModeConfig
+} from '../../config/useConfig';
+import { emojiByUnified } from '../../dataUtils/emojiSelectors';
+import { getsuggested } from '../../dataUtils/suggested';
+import { useUpdateSuggested } from '../context/PickerContext';
+import { ClickableEmoji } from '../emoji/Emoji';
+
+import { EmojiCategory } from './EmojiCategory';
+
+type Props = Readonly<{
+  categoryConfig: CategoryConfig;
+}>;
+
+export function Suggested({ categoryConfig }: Props) {
+  const [suggestedUpdated] = useUpdateSuggested();
+  const suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
+  const suggested = React.useMemo(
+    () => getsuggested(suggestedEmojisModeConfig) ?? [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [suggestedUpdated, suggestedEmojisModeConfig]
+  );
+  const emojiStyle = useEmojiStyleConfig();
+
+  return (
+    <EmojiCategory
+      categoryConfig={categoryConfig}
+      hiddenOnSearch
+      hidden={suggested.length === 0}
+    >
+      {suggested.map(suggestedItem => {
+        const emoji = emojiByUnified(suggestedItem.original);
+
+        if (!emoji) {
+          return null;
+        }
+
+        return (
+          <ClickableEmoji
+            showVariations={false}
+            unified={suggestedItem.unified}
+            emojiStyle={emojiStyle}
+            emoji={emoji}
+            key={suggestedItem.unified}
+          />
+        );
+      })}
+    </EmojiCategory>
+  );
+}

package/src/components/context/ElementRefContext.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import { NullableElement } from '../../DomUtils/selectors';
+
 export function ElementRefContextProvider({
   children
 }: {
@@ -7,55 +9,88 @@ export function ElementRefContextProvider({
 }) {
   const PickerMainRef = React.useRef<HTMLElement>(null);
   const AnchoredEmojiRef = React.useRef<HTMLElement>(null);
-  const BodyRef = React.useRef<HTMLElement>(null);
+  const BodyRef = React.useRef<HTMLDivElement>(null);
+  const SearchInputRef = React.useRef<HTMLInputElement>(null);
+  const SkinTonePickerRef = React.useRef<HTMLDivElement>(null);
+  const CategoryNavigationRef = React.useRef<HTMLDivElement>(null);
+  const VariationPickerRef = React.useRef<HTMLDivElement>(null);
 
   return (
     <ElementRefContext.Provider
-      value={{ PickerMainRef, AnchoredEmojiRef, BodyRef }}
+      value={{
+        AnchoredEmojiRef,
+        BodyRef,
+        CategoryNavigationRef,
+        PickerMainRef,
+        SearchInputRef,
+        SkinTonePickerRef,
+        VariationPickerRef
+      }}
     >
       {children}
     </ElementRefContext.Provider>
   );
 }
 
-export type ElementRef = React.MutableRefObject<HTMLElement | null>;
+export type ElementRef<
+  E extends HTMLElement = HTMLElement
+> = React.MutableRefObject<E | null>;
 
 type ElementRefs = {
   PickerMainRef: ElementRef;
   AnchoredEmojiRef: ElementRef;
-  BodyRef: React.MutableRefObject<HTMLElement | null>;
+  SkinTonePickerRef: ElementRef<HTMLDivElement>;
+  SearchInputRef: ElementRef<HTMLInputElement>;
+  BodyRef: ElementRef<HTMLDivElement>;
+  CategoryNavigationRef: ElementRef<HTMLDivElement>;
+  VariationPickerRef: ElementRef<HTMLDivElement>;
 };
 
 const ElementRefContext = React.createContext<ElementRefs>({
-  PickerMainRef: React.createRef(),
   AnchoredEmojiRef: React.createRef(),
-  BodyRef: React.createRef()
+  BodyRef: React.createRef(),
+  CategoryNavigationRef: React.createRef(),
+  PickerMainRef: React.createRef(),
+  SearchInputRef: React.createRef(),
+  SkinTonePickerRef: React.createRef(),
+  VariationPickerRef: React.createRef()
 });
 
-type ElementRefKeys = keyof ElementRefs;
-
-export function useElementRef(key: ElementRefKeys) {
-  const { [key]: elementRef } = React.useContext(ElementRefContext);
-  return elementRef;
+function useElementRef() {
+  return React.useContext(ElementRefContext);
 }
 
 export function usePickerMainRef() {
-  return useElementRef('PickerMainRef');
+  return useElementRef()['PickerMainRef'];
 }
 
 export function useAnchoredEmojiRef() {
-  return useElementRef('AnchoredEmojiRef');
+  return useElementRef()['AnchoredEmojiRef'];
 }
 
-export function useSetAnchoredEmojiRef(): (target: null | HTMLElement) => void {
+export function useSetAnchoredEmojiRef(): (target: NullableElement) => void {
   const AnchoredEmojiRef = useAnchoredEmojiRef();
-  return (target: null | HTMLElement) => {
+  return (target: NullableElement) => {
     AnchoredEmojiRef.current = target;
   };
 }
 
-export function useBodyRef(): React.MutableRefObject<HTMLDivElement | null> {
-  return useElementRef(
-    'BodyRef'
-  ) as React.MutableRefObject<HTMLDivElement | null>;
+export function useBodyRef() {
+  return useElementRef()['BodyRef'];
+}
+
+export function useSearchInputRef() {
+  return useElementRef()['SearchInputRef'];
+}
+
+export function useSkinTonePickerRef() {
+  return useElementRef()['SkinTonePickerRef'];
+}
+
+export function useCategoryNavigationRef() {
+  return useElementRef()['CategoryNavigationRef'];
+}
+
+export function useVariationPickerRef() {
+  return useElementRef()['VariationPickerRef'];
 }

package/src/components/context/PickerContext.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { useState } from 'react';
+
 import { useDefaultSkinToneConfig } from '../../config/useConfig';
-import { alphaNumericEmojiIndex } from '../../dataUtils/alphaNumericEmojiIndex';
 import { DataEmoji } from '../../dataUtils/DataTypes';
-import { scrollCategoryIntoView } from '../../DomUtils/scrollCategoryIntoView';
+import { alphaNumericEmojiIndex } from '../../dataUtils/alphaNumericEmojiIndex';
 import { useDebouncedState } from '../../hooks/useDebouncedState';
 import { FilterDict } from '../../hooks/useFilter';
 import { useMarkInitialLoad } from '../../hooks/useInitialLoad';
 import { SkinTones } from '../../types/exposedTypes';
-import { usePickerMainRef } from './ElementRefContext';
 
 export function PickerContextProvider({ children }: Props) {
   const defaultSkinTone = useDefaultSkinToneConfig();
@@ -16,7 +15,9 @@ export function PickerContextProvider({ children }: Props) {
   // Initialize the filter with the inititial dictionary
   const filterRef = React.useRef<FilterState>(alphaNumericEmojiIndex);
   const disallowClickRef = React.useRef<boolean>(false);
+  const disallowMouseRef = React.useRef<boolean>(false);
 
+  const suggestedUpdateState = useDebouncedState(Date.now(), 200);
   const searchTerm = useDebouncedState('', 100);
   const skinToneFanOpenState = useState<boolean>(false);
   const activeSkinTone = useState<SkinTones>(defaultSkinTone);
@@ -30,15 +31,17 @@ export function PickerContextProvider({ children }: Props) {
   return (
     <PickerContext.Provider
       value={{
-        filterRef,
-        searchTerm,
         activeCategoryState,
         activeSkinTone,
+        disallowClickRef,
+        disallowMouseRef,
+        emojiVariationPickerState,
         emojisThatFailedToLoadState,
+        filterRef,
         isPastInitialLoad,
-        emojiVariationPickerState,
+        searchTerm,
         skinToneFanOpenState,
-        disallowClickRef
+        suggestedUpdateState
       }}
     >
       {children}
@@ -49,7 +52,8 @@ export function PickerContextProvider({ children }: Props) {
 type ReactState<T> = [T, React.Dispatch<React.SetStateAction<T>>];
 
 const PickerContext = React.createContext<{
-  searchTerm: [string, (term: string) => void];
+  searchTerm: [string, (term: string) => Promise<string>];
+  suggestedUpdateState: [number, (term: number) => void];
   activeCategoryState: ReactState<ActiveCategoryState>;
   activeSkinTone: ReactState<SkinTones>;
   emojisThatFailedToLoadState: ReactState<Set<string>>;
@@ -58,16 +62,19 @@ const PickerContext = React.createContext<{
   skinToneFanOpenState: ReactState<boolean>;
   filterRef: React.MutableRefObject<FilterState>;
   disallowClickRef: React.MutableRefObject<boolean>;
+  disallowMouseRef: React.MutableRefObject<boolean>;
 }>({
-  searchTerm: ['', () => {}],
   activeCategoryState: [null, () => {}],
   activeSkinTone: [SkinTones.NEUTRAL, () => {}],
+  disallowClickRef: { current: false },
+  disallowMouseRef: { current: false },
+  emojiVariationPickerState: [null, () => {}],
   emojisThatFailedToLoadState: [new Set(), () => {}],
+  filterRef: { current: {} },
   isPastInitialLoad: true,
-  emojiVariationPickerState: [null, () => {}],
+  searchTerm: ['', () => new Promise<string>(() => undefined)],
   skinToneFanOpenState: [false, () => {}],
-  filterRef: { current: {} },
-  disallowClickRef: { current: false }
+  suggestedUpdateState: [Date.now(), () => {}]
 });
 
 type Props = Readonly<{
@@ -84,32 +91,16 @@ export function useDisallowClickRef() {
   return disallowClickRef;
 }
 
+export function useDisallowMouseRef() {
+  const { disallowMouseRef } = React.useContext(PickerContext);
+  return disallowMouseRef;
+}
+
 export function useSearchTermState() {
   const { searchTerm } = React.useContext(PickerContext);
   return searchTerm;
 }
 
-export function useActiveCategoryState(): [
-  ActiveCategoryState,
-  (nextActive: string) => void,
-  (nextActive: string) => void
-] {
-  const { activeCategoryState } = React.useContext(PickerContext);
-  const PickerMainRef = usePickerMainRef();
-
-  const [activeCategory, setActiveCategory] = activeCategoryState;
-  return [activeCategory, setCategory, setActiveCategoryAndScroll];
-
-  function setCategory(category: string) {
-    setActiveCategory(category);
-  }
-
-  function setActiveCategoryAndScroll(category: string) {
-    setCategory(category);
-    scrollCategoryIntoView(PickerMainRef.current, category);
-  }
-}
-
 export function useActiveSkinToneState(): [
   SkinTones,
   (skinTone: SkinTones) => void
@@ -138,6 +129,18 @@ export function useSkinToneFanOpenState() {
   return skinToneFanOpenState;
 }
 
+export function useUpdateSuggested(): [number, () => void] {
+  const { suggestedUpdateState } = React.useContext(PickerContext);
+
+  const [suggestedUpdated, setsuggestedUpdate] = suggestedUpdateState;
+  return [
+    suggestedUpdated,
+    function updateSuggested() {
+      setsuggestedUpdate(Date.now());
+    }
+  ];
+}
+
 export type FilterState = Record<string, FilterDict>;
 
 type ActiveCategoryState = null | string;

package/src/components/emoji/Emoji.css

@@ -1,6 +1,15 @@
 .EmojiPickerReact button.epr-emoji {
   position: relative;
-  padding: var(--epr-emoji-padding);
+  width: var(--epr-emoji-fullsize);
+  height: var(--epr-emoji-fullsize);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: var(--epr-emoji-fullsize);
+  max-height: var(--epr-emoji-fullsize);
+  border-radius: 8px;
+  overflow: hidden;
 }
 
 .EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after {
@@ -8,8 +17,8 @@
   display: block;
   width: 0;
   height: 0;
-  right: -2px;
-  bottom: 0px;
+  right: 0px;
+  bottom: 1px;
   position: absolute;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
@@ -18,27 +27,48 @@
   z-index: var(--epr-emoji-variations-indictator-z-index);
 }
 
+.EmojiPickerReact button.epr-emoji .epr-emoji-img {
+  max-width: var(--epr-emoji-fullsize);
+  max-height: var(--epr-emoji-fullsize);
+  padding: var(--epr-emoji-padding);
+}
+
+.EmojiPickerReact button.epr-emoji .epr-emoji-native {
+  padding: var(--epr-emoji-padding);
+}
+
 .EmojiPickerReact button.epr-emoji > * {
-  height: var(--epr-emoji-size);
-  width: var(--epr-emoji-size);
-  font-size: var(--epr-emoji-size);
+  align-self: center;
+  justify-self: center;
+  display: block;
 }
 
 .EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after {
   border-bottom: 4px solid var(--epr-emoji-variation-indicator-color-hover);
 }
 
-.EmojiPickerReact button.epr-emoji > .epr-emoji-img {
+.__EmojiPicker__.epr-emoji-img {
   font-size: 0;
 }
 
-.EmojiPickerReact button.epr-emoji > .epr-emoji-native {
-  font-family: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', Times,
-    Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;
+.__EmojiPicker__.epr-emoji-native {
+  font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI',
+    'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji',
+    Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif,
+    LastResort;
+  position: relative;
   line-height: 100%;
+  font-size: var(--epr-emoji-size);
+  text-align: center;
+  align-self: center;
+  justify-self: center;
+  letter-spacing: 0;
 }
 
-.EmojiPickerReact button.epr-emoji:hover {
-  border-radius: 8px;
+.EmojiPickerReact button.epr-emoji:hover > * {
   background-color: var(--epr-emoji-hover-color);
 }
+
+.EmojiPickerReact button.epr-emoji:focus > * {
+  background-color: var(--epr-focus-bg-color);
+}