emoji-picker-react 4.17.5 → 4.19.0

package/src/hooks/useKeyboardNavigation.ts

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo } from 'react';
 import { hasNextElementSibling } from '../DomUtils/elementPositionInRow';
 import {
   focusNextElementSibling,
-  focusPrevElementSibling
+  focusPrevElementSibling,
 } from '../DomUtils/focusElement';
 import { getActiveElement } from '../DomUtils/getActiveElement';
 import {
@@ -12,7 +12,7 @@ import {
   focusNextVisibleEmoji,
   focusPrevVisibleEmoji,
   focusVisibleEmojiOneRowDown,
-  focusVisibleEmojiOneRowUp
+  focusVisibleEmojiOneRowUp,
 } from '../DomUtils/keyboardNavigation';
 import { useScrollTo } from '../DomUtils/scrollTo';
 import { buttonFromTarget } from '../DomUtils/selectors';
@@ -21,27 +21,27 @@ import {
   useCategoryNavigationRef,
   usePickerMainRef,
   useSearchInputRef,
-  useSkinTonePickerRef
+  useSkinTonePickerRef,
 } from '../components/context/ElementRefContext';
 import { useSkinToneFanOpenState } from '../components/context/PickerContext';
 import { useSearchDisabledConfig } from '../config/useConfig';
 
 import {
   useCloseAllOpenToggles,
-  useHasOpenToggles
+  useHasOpenToggles,
 } from './useCloseAllOpenToggles';
 import { useDisallowMouseMove } from './useDisallowMouseMove';
 import { useAppendSearch, useClearSearch } from './useFilter';
 import {
   useFocusCategoryNavigation,
   useFocusSearchInput,
-  useFocusSkinTonePicker
+  useFocusSkinTonePicker,
 } from './useFocus';
 import useIsSearchMode from './useIsSearchMode';
 import useSetVariationPicker from './useSetVariationPicker';
 import {
   useIsSkinToneInPreview,
-  useIsSkinToneInSearch
+  useIsSkinToneInSearch,
 } from './useShouldShowSkinTonePicker';
 
 enum KeyboardEvents {
@@ -51,7 +51,7 @@ enum KeyboardEvents {
   ArrowRight = 'ArrowRight',
   Escape = 'Escape',
   Enter = 'Enter',
-  Space = ' '
+  Space = ' ',
 }
 
 export function useKeyboardNavigation() {
@@ -99,8 +99,8 @@ function usePickerMainKeyboardEvents() {
       closeAllOpenToggles,
       focusSearchInput,
       hasOpenToggles,
-      disallowMouseMove
-    ]
+      disallowMouseMove,
+    ],
   );
 
   useEffect(() => {
@@ -156,8 +156,8 @@ function useSearchInputKeyboardEvents() {
       goDownFromSearchInput,
       setSkinToneFanOpenState,
       BodyRef,
-      isSkinToneInSearch
-    ]
+      isSkinToneInSearch,
+    ],
   );
 
   useEffect(() => {
@@ -249,8 +249,8 @@ function useSkinTonePickerKeyboardEvents() {
       goDownFromSearchInput,
       onType,
       isSkinToneInPreview,
-      isSkinToneInSearch
-    ]
+      isSkinToneInSearch,
+    ],
   );
 
   useEffect(() => {
@@ -301,7 +301,7 @@ function useCategoryNavigationKeyboardEvents() {
             break;
         }
       },
-    [BodyRef, focusSearchInput, onType]
+    [BodyRef, focusSearchInput, onType],
   );
 
   useEffect(() => {
@@ -375,8 +375,8 @@ function useBodyKeyboardEvents() {
       onType,
       setVariationPicker,
       hasOpenToggles,
-      closeAllOpenToggles
-    ]
+      closeAllOpenToggles,
+    ],
   );
 
   useEffect(() => {
@@ -406,7 +406,7 @@ function useGoDownFromSearchInput() {
       }
       return focusCategoryNavigation();
     },
-    [BodyRef, focusCategoryNavigation, isSearchMode]
+    [BodyRef, focusCategoryNavigation, isSearchMode],
   );
 }
 
@@ -422,7 +422,7 @@ function useGoUpFromBody() {
       }
       return focusCategoryNavigation();
     },
-    [focusSearchInput, isSearchMode, focusCategoryNavigation]
+    [focusSearchInput, isSearchMode, focusCategoryNavigation],
   );
 }
 

package/src/hooks/useMouseDownHandlers.ts

@@ -4,13 +4,13 @@ import { useEffect, useRef } from 'react';
 import {
   allUnifiedFromEmojiElement,
   isEmojiElement,
-  NullableElement
+  NullableElement,
 } from '../DomUtils/selectors';
 import {
   useActiveSkinToneState,
   useDisallowClickRef,
   useEmojiVariationPickerState,
-  useUpdateSuggested
+  useUpdateSuggested,
 } from '../components/context/PickerContext';
 import { usePickerDataContext } from '../components/context/PickerDataContext';
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
@@ -18,14 +18,14 @@ import {
   MOUSE_EVENT_SOURCE,
   useEmojiStyleConfig,
   useGetEmojiUrlConfig,
-  useOnEmojiClickConfig
+  useOnEmojiClickConfig,
 } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   activeVariationFromUnified,
   emojiHasVariations,
   emojiNames,
-  emojiUnified
+  emojiUnified,
 } from '../dataUtils/emojiSelectors';
 import { parseNativeEmoji } from '../dataUtils/parseNativeEmoji';
 import { setSuggested } from '../dataUtils/suggested';
@@ -37,7 +37,7 @@ import useSetVariationPicker from './useSetVariationPicker';
 
 export function useMouseDownHandlers(
   ContainerRef: React.MutableRefObject<NullableElement>,
-  mouseEventSource: MOUSE_EVENT_SOURCE
+  mouseEventSource: MOUSE_EVENT_SOURCE,
 ) {
   const mouseDownTimerRef = useRef<undefined | number>();
   const setVariationPicker = useSetVariationPicker();
@@ -72,7 +72,7 @@ export function useMouseDownHandlers(
       setSuggested(emoji, skinToneToUse);
       onEmojiClick(
         emojiClickOutput(emoji, skinToneToUse, activeEmojiStyle, getEmojiUrl),
-        event
+        event,
       );
     },
     [
@@ -83,8 +83,8 @@ export function useMouseDownHandlers(
       onEmojiClick,
       updateSuggested,
       getEmojiUrl,
-      activeEmojiStyle
-    ]
+      activeEmojiStyle,
+    ],
   );
 
   const onMouseDown = React.useCallback(
@@ -112,8 +112,8 @@ export function useMouseDownHandlers(
       emojiByUnified,
       closeAllOpenToggles,
       setVariationPicker,
-      setEmojiVariationPicker
-    ]
+      setEmojiVariationPicker,
+    ],
   );
   const onMouseUp = React.useCallback(
     function onMouseUp() {
@@ -132,7 +132,7 @@ export function useMouseDownHandlers(
         });
       }
     },
-    [disallowClickRef]
+    [disallowClickRef],
   );
 
   useEffect(() => {
@@ -141,14 +141,14 @@ export function useMouseDownHandlers(
     }
     const confainerRef = ContainerRef.current;
     confainerRef.addEventListener('click', onClick, {
-      passive: true
+      passive: true,
     });
 
     confainerRef.addEventListener('mousedown', onMouseDown, {
-      passive: true
+      passive: true,
     });
     confainerRef.addEventListener('mouseup', onMouseUp, {
-      passive: true
+      passive: true,
     });
 
     return () => {
@@ -161,7 +161,7 @@ export function useMouseDownHandlers(
 
 function emojiFromEvent(
   event: MouseEvent,
-  lookupEmojiByUnified: (unified?: string) => DataEmoji | undefined
+  lookupEmojiByUnified: (unified?: string) => DataEmoji | undefined,
 ): [DataEmoji, string] | [] {
   const target = event?.target as HTMLElement;
   if (!isEmojiElement(target)) {
@@ -186,7 +186,7 @@ function emojiClickOutput(
   emoji: DataEmoji,
   activeSkinTone: SkinTones,
   activeEmojiStyle: EmojiStyle,
-  getEmojiUrl: GetEmojiUrl
+  getEmojiUrl: GetEmojiUrl,
 ): EmojiClickData {
   const names = emojiNames(emoji);
 
@@ -202,7 +202,7 @@ function emojiClickOutput(
       isCustom: true,
       names,
       unified,
-      unifiedWithoutSkinTone: unified
+      unifiedWithoutSkinTone: unified,
     };
   }
   const unified = emojiUnified(emoji, activeSkinTone);
@@ -217,6 +217,6 @@ function emojiClickOutput(
     isCustom: false,
     names,
     unified,
-    unifiedWithoutSkinTone: emojiUnified(emoji)
+    unifiedWithoutSkinTone: emojiUnified(emoji),
   };
 }

package/src/hooks/useOnScroll.ts

@@ -15,7 +15,7 @@ export function useOnScroll(BodyRef: ElementRef) {
     }
 
     bodyRef.addEventListener('scroll', onScroll, {
-      passive: true
+      passive: true,
     });
 
     function onScroll() {

package/src/hooks/useScrollCategoryIntoView.ts

@@ -2,7 +2,7 @@ import { scrollTo } from '../DomUtils/scrollTo';
 import { NullableElement } from '../DomUtils/selectors';
 import {
   useBodyRef,
-  usePickerMainRef
+  usePickerMainRef,
 } from '../components/context/ElementRefContext';
 
 export function useScrollCategoryIntoView() {
@@ -14,7 +14,7 @@ export function useScrollCategoryIntoView() {
       return;
     }
     const $category = BodyRef.current?.querySelector(
-      `[data-name="${category}"]`
+      `[data-name="${category}"]`,
     ) as NullableElement;
 
     if (!$category) {

package/src/index.tsx

@@ -5,7 +5,7 @@ import ErrorBoundary from './components/ErrorBoundary';
 import { PickerConfig } from './config/config';
 import {
   MutableConfigContext,
-  useDefineMutableConfig
+  useDefineMutableConfig,
 } from './config/mutableConfig';
 
 export { ExportedEmoji as Emoji } from './components/emoji/ExportedEmoji';
@@ -17,12 +17,15 @@ export {
   Categories,
   EmojiClickData,
   SuggestionMode,
-  SkinTonePickerLocation
+  SkinTonePickerLocation,
+  CategoryIcons,
+  CategoryConfig,
 } from './types/exposedTypes';
 
 export { emojiByUnified } from './dataUtils/emojiSelectors';
 
 export interface PickerProps extends PickerConfig {}
+export type Props = PickerProps;
 
 export default function EmojiPicker(props: PickerProps) {
   const MutableConfigRef = useDefineMutableConfig({

package/src/typeRefinements/typeRefinements.ts

@@ -1,10 +1,10 @@
 import { Categories, CustomCategoryConfig } from '../config/categoryConfig';
 import { CustomEmoji } from '../config/customEmojiConfig';
-import { CategoryConfig } from '../types/exposedTypes';
 import { DataEmoji } from '../dataUtils/DataTypes';
+import { CategoryConfig } from '../types/exposedTypes';
 
 export function isCustomCategory(
-  category: CategoryConfig | CustomCategoryConfig
+  category: CategoryConfig | CustomCategoryConfig,
 ): category is CustomCategoryConfig {
   return category.category === Categories.CUSTOM;
 }

package/src/types/exposedTypes.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 export type EmojiClickData = {
   activeSkinTone: SkinTones;
   unified: string;
@@ -12,8 +14,11 @@ export type EmojiClickData = {
 export type CategoryConfig = {
   category: Categories;
   name: string;
+  icon?: React.ReactNode;
 };
 
+export type CategoryIcons = Partial<Record<Categories, React.ReactNode>>;
+
 export type EmojiData = {
   categories: Partial<Record<Categories, CategoryConfig>>;
   emojis: Record<string, DataEmoji[]>;
@@ -28,7 +33,7 @@ export interface DataEmoji {
 
 export enum SuggestionMode {
   RECENT = 'recent',
-  FREQUENT = 'frequent'
+  FREQUENT = 'frequent',
 }
 
 export enum EmojiStyle {
@@ -36,13 +41,13 @@ export enum EmojiStyle {
   APPLE = 'apple',
   TWITTER = 'twitter',
   GOOGLE = 'google',
-  FACEBOOK = 'facebook'
+  FACEBOOK = 'facebook',
 }
 
 export enum Theme {
   DARK = 'dark',
   LIGHT = 'light',
-  AUTO = 'auto'
+  AUTO = 'auto',
 }
 
 export enum SkinTones {
@@ -51,7 +56,7 @@ export enum SkinTones {
   MEDIUM_LIGHT = '1f3fc',
   MEDIUM = '1f3fd',
   MEDIUM_DARK = '1f3fe',
-  DARK = '1f3ff'
+  DARK = '1f3ff',
 }
 
 export enum Categories {
@@ -64,10 +69,10 @@ export enum Categories {
   ACTIVITIES = 'activities',
   OBJECTS = 'objects',
   SYMBOLS = 'symbols',
-  FLAGS = 'flags'
+  FLAGS = 'flags',
 }
 
 export enum SkinTonePickerLocation {
   SEARCH = 'SEARCH',
-  PREVIEW = 'PREVIEW'
+  PREVIEW = 'PREVIEW',
 }

package/src/virtualization/virtualizationHelpers.ts

@@ -3,7 +3,7 @@ export function shouldVirtualize({
   clientHeight,
   topOffset,
   style,
-  dimensions
+  dimensions,
 }: {
   scrollTop: number;
   clientHeight: number;
@@ -29,7 +29,7 @@ export function getEmojiPositionStyle(dimensions: Dimensions, index: number) {
   return dimensions
     ? {
         top: Math.floor(index / dimensions.emojisPerRow) * dimensions.emojiSize,
-        left: (index % dimensions.emojisPerRow) * dimensions.emojiSize
+        left: (index % dimensions.emojisPerRow) * dimensions.emojiSize,
       }
     : undefined;
 }