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

package/src/hooks/useOnScroll.ts

@@ -5,7 +5,7 @@ import { ElementRef } from '../components/context/ElementRefContext';
 import { useCloseAllOpenToggles } from './useCloseAllOpenToggles';
 
 export function useOnScroll(BodyRef: ElementRef) {
-  const { closeAllOpenToggles, dependencyArray } = useCloseAllOpenToggles();
+  const closeAllOpenToggles = useCloseAllOpenToggles();
 
   useEffect(() => {
     const bodyRef = BodyRef.current;
@@ -24,5 +24,5 @@ export function useOnScroll(BodyRef: ElementRef) {
     return () => {
       bodyRef?.removeEventListener('scroll', onScroll);
     };
-  }, [...dependencyArray, BodyRef, closeAllOpenToggles]);
+  }, [BodyRef, closeAllOpenToggles]);
 }

package/src/hooks/useScrollCategoryIntoView.ts

@@ -0,0 +1,28 @@
+import { scrollTo } from '../DomUtils/scrollTo';
+import { NullableElement } from '../DomUtils/selectors';
+import {
+  useBodyRef,
+  usePickerMainRef
+} from '../components/context/ElementRefContext';
+
+export function useScrollCategoryIntoView() {
+  const BodyRef = useBodyRef();
+  const PickerMainRef = usePickerMainRef();
+
+  return function scrollCategoryIntoView(category: string): void {
+    if (!BodyRef.current) {
+      return;
+    }
+    const $category = BodyRef.current?.querySelector(
+      `[data-name="${category}"]`
+    ) as NullableElement;
+
+    if (!$category) {
+      return;
+    }
+
+    const offsetTop = $category.offsetTop || 0;
+
+    scrollTo(PickerMainRef.current, offsetTop);
+  };
+}

package/src/hooks/useSetVariationPicker.ts

@@ -0,0 +1,28 @@
+import { focusFirstVisibleEmoji } from '../DomUtils/keyboardNavigation';
+import { emojiFromElement, NullableElement } from '../DomUtils/selectors';
+import {
+  useSetAnchoredEmojiRef,
+  useVariationPickerRef
+} 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);
+
+    if (!emoji) {
+      return;
+    }
+
+    setAnchoredEmojiRef(element);
+    setEmojiVariationPicker(emoji);
+
+    requestAnimationFrame(() => {
+      focusFirstVisibleEmoji(VariationPickerRef.current);
+    });
+  };
+}

package/src/index.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 
-import { Body } from './components/body/Body';
-import { ElementRefContextProvider } from './components/context/ElementRefContext';
-import { PickerConfigProvider } from './components/context/PickerConfigContext';
-import { Preview } from './components/footer/Preview';
-import { Header } from './components/header/Header';
-import PickerMain from './components/main/PickerMain';
+import EmojiPickerReact from './EmojiPickerReact';
+import ErrorBoundary from './components/ErrorBoundary';
 import { PickerConfig } from './config/config';
-import './EmojiPickerReact.css';
+
+export { ExportedEmoji as Emoji } from './components/emoji/ExportedEmoji';
+
 export {
   EmojiStyle,
   SkinTones,
@@ -18,16 +16,10 @@ export {
 
 export interface Props extends PickerConfig {}
 
-export function EmojiPicker(props: Props) {
+export default function EmojiPicker(props: Props) {
   return (
-    <ElementRefContextProvider>
-      <PickerConfigProvider {...props}>
-        <PickerMain>
-          <Header />
-          <Body />
-          <Preview />
-        </PickerMain>
-      </PickerConfigProvider>
-    </ElementRefContextProvider>
+    <ErrorBoundary>
+      <EmojiPickerReact {...props} />
+    </ErrorBoundary>
   );
 }

package/src/types/exposedTypes.ts

@@ -7,6 +7,11 @@ export type EmojiClickData = {
   getImageUrl: (emojiStyle: EmojiStyle) => string;
 };
 
+export enum SuggestionMode {
+  RECENT = 'recent',
+  FREQUENT = 'frequent'
+}
+
 export enum EmojiStyle {
   NATIVE = 'native',
   APPLE = 'apple',
@@ -31,7 +36,7 @@ export enum SkinTones {
 }
 
 export enum Categories {
-  RECENTLY_USED = 'recently_used',
+  SUGGESTED = 'suggested',
   SMILEYS_PEOPLE = 'smileys_people',
   ANIMALS_NATURE = 'animals_nature',
   FOOD_DRINK = 'food_drink',

package/dist/DomUtils/emojiElementRef.d.ts

@@ -1,10 +0,0 @@
-export declare type EmojiRef = {
-    current: null | HTMLElement;
-};
-export declare const emojiRef: Record<string, EmojiRef>;
-export declare function getEmojiRef(unified: string): EmojiRef;
-export declare function iterateEmojiRef(callback: (ref: HTMLElement, unified: string) => void): void;
-export declare function hideEmoji(unified: string): void;
-export declare function showEmoji(unified: string): void;
-export declare function hideElement(element: HTMLElement | null): void;
-export declare function showElement(element: HTMLElement | null): void;

package/dist/DomUtils/scrollCategoryIntoView.d.ts

@@ -1 +0,0 @@
-export declare function scrollCategoryIntoView(root: HTMLElement | null, category: string): void;

package/dist/dataUtils/recentlyUsed.d.ts

@@ -1,11 +0,0 @@
-import { SkinTones } from '../types/exposedTypes';
-import { DataEmoji } from './DataTypes';
-declare type RecentlyUsedItem = {
-    unified: string;
-    original: string;
-    count: number;
-};
-declare type RecentlyUsed = RecentlyUsedItem[];
-export declare function getRecentlyUsed(): RecentlyUsed;
-export declare function setRecentlyUsed(emoji: DataEmoji, skinTone: SkinTones): void;
-export {};

package/dist/hooks/useEmojiElements.d.ts

@@ -1 +0,0 @@
-export declare function useEmojiElements(): NodeListOf<Element> | undefined;

package/dist/hooks/useEmojiMouseEnter.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { HoveredEmoji } from '../components/footer/Preview';
-export declare function useEmojiMouseEnter(allow: boolean, setHoveredEmoji: React.Dispatch<React.SetStateAction<HoveredEmoji>>): void;

package/src/DomUtils/emojiElementRef.ts

@@ -1,42 +0,0 @@
-import { ClassNames } from './classNames';
-
-export type EmojiRef = { current: null | HTMLElement };
-
-export const emojiRef: Record<string, EmojiRef> = {};
-
-export function getEmojiRef(unified: string): EmojiRef {
-  emojiRef[unified] = emojiRef[unified] || { current: null };
-  return emojiRef[unified];
-}
-
-export function iterateEmojiRef(
-  callback: (ref: HTMLElement, unified: string) => void
-): void {
-  for (const unified in emojiRef) {
-    if (!emojiRef[unified] || emojiRef[unified].current === null) {
-      continue;
-    }
-
-    callback(emojiRef[unified].current as HTMLElement, unified);
-  }
-}
-
-export function hideEmoji(unified: string): void {
-  hideElement(getEmojiRef(unified).current);
-}
-
-export function showEmoji(unified: string): void {
-  showElement(getEmojiRef(unified).current);
-}
-
-export function hideElement(element: HTMLElement | null): void {
-  if (!element) return;
-  element.classList.add(ClassNames.hidden);
-  element.classList.remove(ClassNames.visible);
-}
-
-export function showElement(element: HTMLElement | null): void {
-  if (!element) return;
-  element.classList.remove(ClassNames.hidden);
-  element.classList.add(ClassNames.visible);
-}

package/src/DomUtils/scrollCategoryIntoView.ts

@@ -1,18 +0,0 @@
-import { scrollTo } from './scrollTo';
-
-export function scrollCategoryIntoView(
-  root: HTMLElement | null,
-  category: string
-) {
-  const $category = root?.querySelector(
-    `[data-name="${category}"]`
-  ) as HTMLElement;
-
-  if (!$category) {
-    return;
-  }
-
-  const offsetTop = $category.offsetTop || 0;
-
-  scrollTo(root, offsetTop);
-}

package/src/components/body/RecentlyUsed.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-
-import { CategoryConfig } from '../../config/categoryConfig';
-import { useEmojiStyleConfig } from '../../config/useConfig';
-import { emojiByUnified } from '../../dataUtils/emojiSelectors';
-import { getRecentlyUsed } from '../../dataUtils/recentlyUsed';
-import { useSearchTermState } from '../context/PickerContext';
-import { Emoji } from '../emoji/Emoji';
-
-import { EmojiCategory } from './EmojiCategory';
-
-type Props = Readonly<{
-  categoryConfig: CategoryConfig;
-}>;
-
-export function RecentlyUsed({ categoryConfig }: Props) {
-  const [searchTerm] = useSearchTermState();
-  const recentlyUsed = getRecentlyUsed();
-  const emojiStyle = useEmojiStyleConfig();
-
-  if (searchTerm) {
-    return null;
-  }
-
-  if (recentlyUsed.length === 0) {
-    return null;
-  }
-
-  return (
-    <EmojiCategory categoryConfig={categoryConfig} hiddenOnSearch>
-      {recentlyUsed.map(recentlyUsedItem => {
-        const emoji = emojiByUnified(recentlyUsedItem.original);
-
-        if (!emoji) {
-          return null;
-        }
-
-        return (
-          <Emoji
-            showVariations={false}
-            unified={recentlyUsedItem.unified}
-            emojiStyle={emojiStyle}
-            emoji={emoji}
-            key={recentlyUsedItem.unified}
-          />
-        );
-      })}
-    </EmojiCategory>
-  );
-}

package/src/hooks/useEmojiElements.ts

@@ -1,7 +0,0 @@
-import { usePickerMainRef } from '../components/context/ElementRefContext';
-
-export function useEmojiElements() {
-  const PickerMainRef = usePickerMainRef();
-
-  return PickerMainRef.current?.querySelectorAll('button.epr-emoji');
-}

package/src/hooks/useEmojiMouseEnter.ts

@@ -1,59 +0,0 @@
-import { useEffect } from 'react';
-
-import {
-  buttonFromEmoji,
-  originalUnifiedFromEmojiElement,
-  unifiedFromEmojiElement
-} from '../DomUtils/selectors';
-import { useBodyRef } from '../components/context/ElementRefContext';
-import { HoveredEmoji } from '../components/footer/Preview';
-
-export function useEmojiMouseEnter(
-  allow: boolean,
-  setHoveredEmoji: React.Dispatch<React.SetStateAction<HoveredEmoji>>
-) {
-  const BodyRef = useBodyRef();
-
-  useEffect(() => {
-    if (!allow) {
-      return;
-    }
-    const bodyRef = BodyRef.current;
-
-    bodyRef?.addEventListener('mouseover', onMouseOver, {
-      passive: true
-    });
-
-    bodyRef?.addEventListener('mouseout', onMouseOut, {
-      passive: true
-    });
-
-    return () => {
-      bodyRef?.removeEventListener('mouseover', onMouseOver);
-      bodyRef?.removeEventListener('mouseout', onMouseOut);
-    };
-  }, [BodyRef.current]);
-
-  function onMouseOver(e: MouseEvent) {
-    const button = buttonFromEmoji(e.target as HTMLElement);
-
-    if (!button) {
-      return onMouseOut();
-    }
-    const unified = unifiedFromEmojiElement(button);
-    const originalUnified = originalUnifiedFromEmojiElement(button);
-
-    if (!unified || !originalUnified) {
-      return onMouseOut();
-    }
-
-    setHoveredEmoji({
-      unified,
-      originalUnified
-    });
-  }
-
-  function onMouseOut() {
-    setHoveredEmoji(null);
-  }
-}