emoji-picker-react 4.17.5 → 4.19.0

package/src/config/mutableConfig.ts

@@ -18,12 +18,12 @@ export function useMutableConfig(): React.MutableRefObject<MutableConfig> {
 }
 
 export function useDefineMutableConfig(
-  config: MutableConfig
+  config: MutableConfig,
 ): React.MutableRefObject<MutableConfig> {
   const MutableConfigRef = React.useRef<MutableConfig>({
     onEmojiClick: config.onEmojiClick || emptyFunc,
     onReactionClick: config.onReactionClick || config.onEmojiClick,
-    onSkinToneChange: config.onSkinToneChange || emptyFunc
+    onSkinToneChange: config.onSkinToneChange || emptyFunc,
   });
 
   React.useEffect(() => {

package/src/config/useConfig.ts

@@ -8,7 +8,7 @@ import {
   SkinTonePickerLocation,
   SkinTones,
   SuggestionMode,
-  Theme
+  Theme,
 } from '../types/exposedTypes';
 
 import { CategoriesConfig } from './categoryConfig';
@@ -19,21 +19,21 @@ import {
   SEARCH_RESULTS_ONE_RESULT_FOUND,
   SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND,
   PickerDimensions,
-  PreviewConfig
+  PreviewConfig,
 } from './config';
 import { CustomEmoji } from './customEmojiConfig';
 import { useMutableConfig } from './mutableConfig';
 
 export enum MOUSE_EVENT_SOURCE {
   REACTIONS = 'reactions',
-  PICKER = 'picker'
+  PICKER = 'picker',
 }
 
 export function useSearchPlaceHolderConfig(): string {
   const { searchPlaceHolder, searchPlaceholder } = usePickerConfig();
   return (
     [searchPlaceHolder, searchPlaceholder].find(
-      p => p !== DEFAULT_SEARCH_PLACEHOLDER
+      (p) => p !== DEFAULT_SEARCH_PLACEHOLDER,
     ) ?? DEFAULT_SEARCH_PLACEHOLDER
   );
 }
@@ -73,6 +73,11 @@ export function useCategoriesConfig(): CategoriesConfig {
   return categories;
 }
 
+export function useCategoryIconsConfig() {
+  const { categoryIcons } = usePickerConfig();
+  return categoryIcons;
+}
+
 export function useCustomEmojisConfig(): CustomEmoji[] {
   const { customEmojis } = usePickerConfig();
   return customEmojis;
@@ -84,7 +89,7 @@ export function useOpenConfig(): boolean {
 }
 
 export function useOnEmojiClickConfig(
-  mouseEventSource: MOUSE_EVENT_SOURCE
+  mouseEventSource: MOUSE_EVENT_SOURCE,
 ): (emoji: EmojiClickData, event: MouseEvent) => void {
   const { current } = useMutableConfig();
   const [, setReactionsOpen] = useReactionsModeState();
@@ -96,8 +101,8 @@ export function useOnEmojiClickConfig(
     return (...args) =>
       onReactionClick(...args, {
         collapseToReactions: () => {
-          setReactionsOpen(o => o);
-        }
+          setReactionsOpen((o) => o);
+        },
       });
   }
 
@@ -105,7 +110,7 @@ export function useOnEmojiClickConfig(
     handler(...args, {
       collapseToReactions: () => {
         setReactionsOpen(true);
-      }
+      },
     });
   };
 }
@@ -179,7 +184,7 @@ export function useReactionsConfig(): string[] {
 
 export function useGetEmojiUrlConfig(): (
   unified: string,
-  style: EmojiStyle
+  style: EmojiStyle,
 ) => string {
   const { getEmojiUrl } = usePickerConfig();
   return getEmojiUrl;
@@ -199,7 +204,7 @@ export function useSearchResultsConfig(searchResultsCount: number): string {
     return isPlural
       ? SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND.replace(
           '%n',
-          searchResultsCount.toString()
+          searchResultsCount.toString(),
         )
       : SEARCH_RESULTS_ONE_RESULT_FOUND;
   }

package/src/data/groups.ts

@@ -6,7 +6,7 @@ const groups = [
   'activities',
   'objects',
   'symbols',
-  'flags'
+  'flags',
 ];
 
 export default groups;

package/src/data/skinToneVariations.ts

@@ -6,7 +6,7 @@ const skinToneVariations = [
   SkinTones.MEDIUM_LIGHT,
   SkinTones.MEDIUM,
   SkinTones.MEDIUM_DARK,
-  SkinTones.DARK
+  SkinTones.DARK,
 ];
 
 export const skinTonesNamed = Object.entries(SkinTones).reduce(
@@ -14,18 +14,16 @@ export const skinTonesNamed = Object.entries(SkinTones).reduce(
     acc[value] = key;
     return acc;
   },
-  {} as Record<string, string>
+  {} as Record<string, string>,
 );
 
-export const skinTonesMapped: Record<
-  string,
-  string
-> = skinToneVariations.reduce(
-  (mapped, skinTone) =>
-    Object.assign(mapped, {
-      [skinTone]: skinTone
-    }),
-  {}
-);
+export const skinTonesMapped: Record<string, string> =
+  skinToneVariations.reduce(
+    (mapped, skinTone) =>
+      Object.assign(mapped, {
+        [skinTone]: skinTone,
+      }),
+    {},
+  );
 
 export default skinToneVariations;

package/src/dataUtils/DataTypes.ts

@@ -5,7 +5,7 @@ export enum EmojiProperties {
   unified = 'u',
   variations = 'v',
   added_in = 'a',
-  imgUrl = 'imgUrl'
+  imgUrl = 'imgUrl',
 }
 
 export interface DataEmoji extends WithName {

package/src/dataUtils/alphaNumericEmojiIndex.ts

@@ -13,7 +13,7 @@ export function indexEmoji(emoji: DataEmoji): void {
     .replace(/[^a-zA-Z\d]/g, '')
     .split('');
 
-  joinedNameString.forEach(char => {
+  joinedNameString.forEach((char) => {
     alphaNumericEmojiIndex[char] = alphaNumericEmojiIndex[char] ?? {};
 
     alphaNumericEmojiIndex[char][emojiUnified(emoji)] = emoji;

package/src/dataUtils/parseNativeEmoji.ts

@@ -1,6 +1,6 @@
 export function parseNativeEmoji(unified: string): string {
   return unified
     .split('-')
-    .map(hex => String.fromCodePoint(parseInt(hex, 16)))
+    .map((hex) => String.fromCodePoint(parseInt(hex, 16)))
     .join('');
 }

package/src/dataUtils/suggested.ts

@@ -19,7 +19,7 @@ export function getSuggested(mode?: SuggestionMode): Suggested {
       return [];
     }
     const recent = JSON.parse(
-      window?.localStorage.getItem(SUGGESTED_LS_KEY) ?? '[]'
+      window?.localStorage.getItem(SUGGESTED_LS_KEY) ?? '[]',
     ) as Suggested;
 
     if (mode === SuggestionMode.FREQUENT) {
@@ -43,12 +43,12 @@ export function setSuggested(emoji: DataEmoji, skinTone: SkinTones) {
   let nextList: SuggestedItem[];
 
   if (existing) {
-    nextList = [existing].concat(recent.filter(i => i !== existing));
+    nextList = [existing].concat(recent.filter((i) => i !== existing));
   } else {
     existing = {
       unified,
       original: originalUnified,
-      count: 0
+      count: 0,
     };
     nextList = [existing, ...recent];
   }

package/src/hooks/preloadEmoji.ts

@@ -13,7 +13,7 @@ export function preloadEmojiIfNeeded(
   topOffset: number,
   style: { top: number } | undefined,
   dimensions: Dimensions,
-  getEmojiUrl: GetEmojiUrl
+  getEmojiUrl: GetEmojiUrl,
 ): void {
   if (!emoji) {
     return;
@@ -51,7 +51,7 @@ export function preloadEmojiIfNeeded(
 export function preloadEmoji(
   getEmojiUrl: GetEmojiUrl,
   emoji: undefined | DataEmoji,
-  emojiStyle: EmojiStyle
+  emojiStyle: EmojiStyle,
 ): void {
   if (!emoji) {
     return;
@@ -66,7 +66,7 @@ export function preloadEmoji(
 
   emojiVariations(emoji)
     .concat(unified)
-    .forEach(variation => {
+    .forEach((variation) => {
       const emojiUrl = getEmojiUrl(variation, emojiStyle);
       preloadImage(emojiUrl);
     });

package/src/hooks/useActiveCategoryScrollDetection.ts

@@ -6,7 +6,7 @@ import { useBodyRef } from '../components/context/ElementRefContext';
 
 export function useActiveCategoryScrollDetection({
   setActiveCategory,
-  setVisibleCategories
+  setVisibleCategories,
 }: {
   setActiveCategory: (category: string) => void;
   setVisibleCategories: (categories: string[]) => void;
@@ -18,7 +18,7 @@ export function useActiveCategoryScrollDetection({
     const intersectingCategories = new Map<string, boolean>();
     const bodyRef = BodyRef.current;
     const observer = new IntersectionObserver(
-      entries => {
+      (entries) => {
         if (!bodyRef) {
           return;
         }
@@ -55,12 +55,14 @@ export function useActiveCategoryScrollDetection({
       },
       {
         root: bodyRef,
-        threshold: [0, 1]
-      }
+        threshold: [0, 1],
+      },
     );
-    bodyRef?.querySelectorAll(asSelectors(ClassNames.category)).forEach(el => {
-      observer.observe(el);
-    });
+    bodyRef
+      ?.querySelectorAll(asSelectors(ClassNames.category))
+      .forEach((el) => {
+        observer.observe(el);
+      });
 
     return () => {
       observer.disconnect();

package/src/hooks/useCloseAllOpenToggles.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 
 import {
   useEmojiVariationPickerState,
-  useSkinToneFanOpenState
+  useSkinToneFanOpenState,
 } from '../components/context/PickerContext';
 
 export function useCloseAllOpenToggles() {
@@ -21,7 +21,7 @@ export function useCloseAllOpenToggles() {
     variationPicker,
     skinToneFanOpen,
     setVariationPicker,
-    setSkinToneFanOpen
+    setSkinToneFanOpen,
   ]);
 
   return closeAllOpenToggles;

package/src/hooks/useDebouncedState.ts

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

package/src/hooks/useDisallowMouseMove.ts

@@ -32,7 +32,7 @@ export function useOnMouseMove() {
   useEffect(() => {
     const bodyRef = BodyRef.current;
     bodyRef?.addEventListener('mousemove', onMouseMove, {
-      passive: true
+      passive: true,
     });
 
     function onMouseMove() {

package/src/hooks/useDisallowedEmojis.ts

@@ -6,7 +6,7 @@ import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   addedIn,
   emojiUnified,
-  unifiedWithoutSkinTone
+  unifiedWithoutSkinTone,
 } from '../dataUtils/emojiUtils';
 
 import { useIsUnicodeHidden } from './useHideEmojisByUniocode';
@@ -46,7 +46,7 @@ export function useIsEmojiDisallowed() {
 
 function addedInNewerVersion(
   emoji: DataEmoji,
-  supportedLevel: number
+  supportedLevel: number,
 ): boolean {
   return addedIn(emoji) > supportedLevel;
 }

package/src/hooks/useEmojiPreviewEvents.ts

@@ -5,19 +5,19 @@ import { detectEmojyPartiallyBelowFold } from '../DomUtils/detectEmojyPartiallyB
 import { focusElement } from '../DomUtils/focusElement';
 import {
   allUnifiedFromEmojiElement,
-  buttonFromTarget
+  buttonFromTarget,
 } from '../DomUtils/selectors';
 import { useBodyRef } from '../components/context/ElementRefContext';
 import { PreviewEmoji } from '../components/footer/Preview';
 
 import {
   useAllowMouseMove,
-  useIsMouseDisallowed
+  useIsMouseDisallowed,
 } from './useDisallowMouseMove';
 
 export function useEmojiPreviewEvents(
   allow: boolean,
-  setPreviewEmoji: React.Dispatch<React.SetStateAction<PreviewEmoji>>
+  setPreviewEmoji: React.Dispatch<React.SetStateAction<PreviewEmoji>>,
 ) {
   const BodyRef = useBodyRef();
   const isMouseDisallowed = useIsMouseDisallowed();
@@ -30,7 +30,7 @@ export function useEmojiPreviewEvents(
     const bodyRef = BodyRef.current;
 
     bodyRef?.addEventListener('keydown', onEscape, {
-      passive: true
+      passive: true,
     });
 
     bodyRef?.addEventListener('mouseover', onMouseOver, true);
@@ -38,7 +38,7 @@ export function useEmojiPreviewEvents(
     bodyRef?.addEventListener('focus', onEnter, true);
 
     bodyRef?.addEventListener('mouseout', onLeave, {
-      passive: true
+      passive: true,
     });
     bodyRef?.addEventListener('blur', onLeave, true);
 
@@ -57,7 +57,7 @@ export function useEmojiPreviewEvents(
 
       setPreviewEmoji({
         unified,
-        originalUnified
+        originalUnified,
       });
     }
     function onLeave(e?: FocusEvent | MouseEvent) {
@@ -107,7 +107,7 @@ export function useEmojiPreviewEvents(
 
 function handlePartiallyVisibleElementFocus(
   button: HTMLElement,
-  setPreviewEmoji: React.Dispatch<React.SetStateAction<PreviewEmoji>>
+  setPreviewEmoji: React.Dispatch<React.SetStateAction<PreviewEmoji>>,
 ) {
   const { unified, originalUnified } = allUnifiedFromEmojiElement(button);
 
@@ -119,6 +119,6 @@ function handlePartiallyVisibleElementFocus(
 
   setPreviewEmoji({
     unified,
-    originalUnified
+    originalUnified,
   });
 }

package/src/hooks/useEmojiVirtualization.tsx

@@ -8,13 +8,13 @@ import {
   useEmojiStyleConfig,
   useGetEmojiUrlConfig,
   useLazyLoadEmojisConfig,
-  useSkinTonesDisabledConfig
+  useSkinTonesDisabledConfig,
 } from '../config/useConfig';
 import { DataEmojis } from '../dataUtils/DataTypes';
 import { emojiUnified } from '../dataUtils/emojiUtils';
 import {
   getEmojiPositionStyle,
-  shouldVirtualize
+  shouldVirtualize,
 } from '../virtualization/virtualizationHelpers';
 
 import { preloadEmojiIfNeeded } from './preloadEmoji';
@@ -27,7 +27,7 @@ export function useEmojiVirtualization({
   topOffset,
   onHeightReady,
   scrollTop,
-  isCategoryVisible
+  isCategoryVisible,
 }: {
   categoryEmojis: DataEmojis;
   topOffset: number;
@@ -46,7 +46,7 @@ export function useEmojiVirtualization({
 
   let virtualizedCounter = 0;
 
-  const emojisToPush = categoryEmojis.filter(emoji => {
+  const emojisToPush = categoryEmojis.filter((emoji) => {
     const isDisallowed = isEmojiDisallowed(emoji);
     const { failedToLoad, filteredOut, hidden } = isEmojiHidden(emoji);
 
@@ -69,7 +69,7 @@ export function useEmojiVirtualization({
       clientHeight: BodyRef.current?.clientHeight ?? 0,
       topOffset,
       style,
-      dimensions
+      dimensions,
     });
 
   const emojis = emojisToPush.reduce((accumulator, emoji, index) => {
@@ -86,7 +86,7 @@ export function useEmojiVirtualization({
         topOffset,
         style,
         dimensions,
-        getEmojiUrl
+        getEmojiUrl,
       );
       return accumulator;
     }
@@ -107,9 +107,9 @@ export function useEmojiVirtualization({
         getEmojiUrl={getEmojiUrl}
         style={{
           ...style,
-          position: 'absolute'
+          position: 'absolute',
         }}
-      />
+      />,
     );
     return accumulator;
   }, [] as ReactNode[]);
@@ -117,6 +117,6 @@ export function useEmojiVirtualization({
   return {
     virtualizedCounter,
     emojis,
-    dimensions
+    dimensions,
   };
 }

package/src/hooks/useFilter.ts

@@ -1,12 +1,12 @@
 import { scrollTo } from '../DomUtils/scrollTo';
 import {
   usePickerMainRef,
-  useSearchInputRef
+  useSearchInputRef,
 } from '../components/context/ElementRefContext';
 import {
   FilterState,
   useFilterRef,
-  useSearchTermState
+  useSearchTermState,
 } from '../components/context/PickerContext';
 import { useSearchResultsConfig } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
@@ -18,7 +18,7 @@ function useSetFilterRef() {
   const filterRef = useFilterRef();
 
   return function setFilter(
-    setter: FilterState | ((current: FilterState) => FilterState)
+    setter: FilterState | ((current: FilterState) => FilterState),
   ): void {
     if (typeof setter === 'function') {
       return setFilter(setter(filterRef.current));
@@ -66,14 +66,14 @@ export function useFilter() {
   const [searchTerm] = useSearchTermState();
   const statusSearchResults = getStatusSearchResults(
     filterRef.current,
-    searchTerm
+    searchTerm,
   );
 
   return {
     onChange,
     searchTerm,
     SearchInputRef,
-    statusSearchResults
+    statusSearchResults,
   };
 
   function onChange(inputValue: string) {
@@ -93,10 +93,10 @@ export function useFilter() {
       return applySearch(nextValue);
     }
 
-    setFilterRef(current =>
+    setFilterRef((current) =>
       Object.assign(current, {
-        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue)
-      })
+        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue),
+      }),
     );
     applySearch(nextValue);
   }
@@ -111,7 +111,7 @@ function useApplySearch() {
       setSearchTerm(searchTerm ? searchTerm?.toLowerCase() : searchTerm).then(
         () => {
           scrollTo(PickerMainRef.current, 0);
-        }
+        },
       );
     });
   };
@@ -119,7 +119,7 @@ function useApplySearch() {
 
 export function filterEmojiObjectByKeyword(
   emojis: FilterDict,
-  keyword: string
+  keyword: string,
 ): FilterDict {
   const filtered: FilterDict = {};
 
@@ -135,20 +135,20 @@ export function filterEmojiObjectByKeyword(
 }
 
 function hasMatch(emoji: DataEmoji, keyword: string): boolean {
-  return emojiNames(emoji).some(name => name.includes(keyword));
+  return emojiNames(emoji).some((name) => name.includes(keyword));
 }
 
 export function useIsEmojiFiltered(): (unified: string) => boolean {
   const { current: filter } = useFilterRef();
   const [searchTerm] = useSearchTermState();
 
-  return unified => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
+  return (unified) => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
 }
 
 export function isEmojiFilteredBySearchTerm(
   unified: string,
   filter: FilterState,
-  searchTerm: string
+  searchTerm: string,
 ): boolean {
   if (!filter || !searchTerm) {
     return false;
@@ -161,7 +161,7 @@ export type FilterDict = Record<string, DataEmoji>;
 
 export function findLongestMatch(
   keyword: string,
-  dict: Record<string, FilterDict> | null
+  dict: Record<string, FilterDict> | null,
 ): FilterDict | null {
   if (!dict) {
     return null;
@@ -173,7 +173,7 @@ export function findLongestMatch(
 
   const longestMatchingKey = Object.keys(dict)
     .sort((a, b) => b.length - a.length)
-    .find(key => keyword.includes(key));
+    .find((key) => keyword.includes(key));
 
   if (longestMatchingKey) {
     return dict[longestMatchingKey];
@@ -192,7 +192,7 @@ export function getNormalizedSearchTerm(str: string): string {
 
 function getStatusSearchResults(
   filterState: FilterState,
-  searchTerm: string
+  searchTerm: string,
 ): string {
   if (!filterState?.[searchTerm]) return '';
 

package/src/hooks/useFocus.ts

@@ -4,7 +4,7 @@ import { focusElement, focusFirstElementChild } from '../DomUtils/focusElement';
 import {
   useCategoryNavigationRef,
   useSearchInputRef,
-  useSkinTonePickerRef
+  useSkinTonePickerRef,
 } from '../components/context/ElementRefContext';
 
 export function useFocusSearchInput() {

package/src/hooks/useHideEmojisByUniocode.ts

@@ -1,6 +1,6 @@
-import { useUnicodeToHide } from "../config/useConfig";
+import { useUnicodeToHide } from '../config/useConfig';
 
 export function useIsUnicodeHidden() {
-    const unicodeToHide = useUnicodeToHide();
-    return (emojiUnified: string) => unicodeToHide.has(emojiUnified);
-  }
+  const unicodeToHide = useUnicodeToHide();
+  return (emojiUnified: string) => unicodeToHide.has(emojiUnified);
+}

package/src/hooks/useInitialLoad.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import * as React from 'react';
 
 export function useMarkInitialLoad(
-  dispatch: React.Dispatch<React.SetStateAction<boolean>>
+  dispatch: React.Dispatch<React.SetStateAction<boolean>>,
 ) {
   useEffect(() => {
     dispatch(true);

package/src/hooks/useIsEmojiHidden.ts

@@ -17,7 +17,7 @@ export function useIsEmojiHidden(): (emoji: DataEmoji) => IsHiddenReturn {
     return {
       failedToLoad,
       filteredOut,
-      hidden: failedToLoad || filteredOut
+      hidden: failedToLoad || filteredOut,
     };
   };
 }