emoji-picker-react 4.16.0 → 4.17.0

package/src/dataUtils/DataTypes.ts

@@ -1,4 +1,4 @@
-import emojis from '../data/emojis';
+import { Categories } from '../types/exposedTypes';
 
 export enum EmojiProperties {
   name = 'n',
@@ -17,7 +17,7 @@ export interface DataEmoji extends WithName {
 
 export type DataEmojis = DataEmoji[];
 
-export type DataGroups = keyof typeof emojis;
+export type DataGroups = Categories;
 
 export type WithName = {
   [EmojiProperties.name]: string[];

package/src/dataUtils/alphaNumericEmojiIndex.ts

@@ -1,15 +1,8 @@
 import { DataEmoji } from './DataTypes';
-import { allEmojis, emojiNames, emojiUnified } from './emojiSelectors';
+import { emojiNames, emojiUnified } from './emojiUtils';
 
 export const alphaNumericEmojiIndex: BaseIndex = {};
 
-setTimeout(() => {
-  allEmojis.reduce((searchIndex, emoji) => {
-    indexEmoji(emoji);
-    return searchIndex;
-  }, alphaNumericEmojiIndex as BaseIndex);
-});
-
 type BaseIndex = Record<string, Record<string, DataEmoji>>;
 
 export function indexEmoji(emoji: DataEmoji): void {

package/src/dataUtils/emojiSelectors.ts

@@ -7,7 +7,7 @@ import { CustomEmoji } from '../config/customEmojiConfig';
 import { useSuggestedEmojisModeConfig } from '../config/useConfig';
 import emojis from '../data/emojis';
 import skinToneVariations, {
-  skinTonesMapped
+  skinTonesMapped,
 } from '../data/skinToneVariations';
 import { EmojiStyle, SkinTones } from '../types/exposedTypes';
 
@@ -28,7 +28,8 @@ export function emojiName(emoji?: WithName): string {
     return '';
   }
 
-  return emojiNames(emoji)[0];
+  const names = emojiNames(emoji);
+  return names[names.length - 1];
 }
 
 export function unifiedWithoutSkinTone(unified: string): string {
@@ -61,11 +62,11 @@ export function useGetEmojisByCategory(): (Category: Categories) => DataEmojis {
       const suggested = getSuggested(suggestedEmojisModeConfig) ?? [];
 
       return suggested
-        .map(s => emojiByUnified(s.unified))
+        .map((s) => emojiByUnified(s.unified))
         .filter(Boolean) as DataEmojis;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [suggestedUpdated, suggestedEmojisModeConfig]
+    [suggestedUpdated, suggestedEmojisModeConfig],
   );
 
   return function getEmojisByCategory(category: Categories): DataEmojis {
@@ -74,14 +75,14 @@ export function useGetEmojisByCategory(): (Category: Categories) => DataEmojis {
     }
 
     // @ts-ignore
-    return emojis[category] ?? [];
+    return emojis.emojis[category] ?? [];
   };
 }
 
 // WARNING: DO NOT USE DIRECTLY
 export function emojiUrlByUnified(
   unified: string,
-  emojiStyle: EmojiStyle
+  emojiStyle: EmojiStyle,
 ): string {
   return `${cdnUrl(emojiStyle)}${unified}.png`;
 }
@@ -96,10 +97,10 @@ export function emojiHasVariations(emoji: DataEmoji): boolean {
 
 export function emojiVariationUnified(
   emoji: DataEmoji,
-  skinTone?: string
+  skinTone?: string,
 ): string | undefined {
   return skinTone
-    ? emojiVariations(emoji).find(variation => variation.includes(skinTone))
+    ? emojiVariations(emoji).find((variation) => variation.includes(skinTone))
     : emojiUnified(emoji);
 }
 
@@ -116,15 +117,15 @@ export function emojiByUnified(unified?: string): DataEmoji | undefined {
   return allEmojisByUnified[withoutSkinTone];
 }
 
-export const allEmojis: DataEmojis = Object.values(emojis).flat();
+export const allEmojis: DataEmojis = Object.values(emojis.emojis).flat();
 
 export function setCustomEmojis(customEmojis: CustomEmoji[]): void {
-  emojis[Categories.CUSTOM].length = 0;
+  emojis.emojis[Categories.CUSTOM].length = 0;
 
-  customEmojis.forEach(emoji => {
+  customEmojis.forEach((emoji) => {
     const emojiData = customToRegularEmoji(emoji);
 
-    emojis[Categories.CUSTOM].push(emojiData as never);
+    emojis.emojis[Categories.CUSTOM].push(emojiData as never);
 
     if (allEmojisByUnified[emojiData[EmojiProperties.unified]]) {
       return;
@@ -138,10 +139,10 @@ export function setCustomEmojis(customEmojis: CustomEmoji[]): void {
 
 function customToRegularEmoji(emoji: CustomEmoji): DataEmoji {
   return {
-    [EmojiProperties.name]: emoji.names.map(name => name.toLowerCase()),
+    [EmojiProperties.name]: emoji.names.map((name) => name.toLowerCase()),
     [EmojiProperties.unified]: emoji.id.toLowerCase(),
     [EmojiProperties.added_in]: '0',
-    [EmojiProperties.imgUrl]: emoji.imgUrl
+    [EmojiProperties.imgUrl]: emoji.imgUrl,
   };
 }
 
@@ -149,19 +150,17 @@ const allEmojisByUnified: {
   [unified: string]: DataEmoji;
 } = {};
 
-setTimeout(() => {
-  allEmojis.reduce((allEmojis, Emoji) => {
-    allEmojis[emojiUnified(Emoji)] = Emoji;
+allEmojis.reduce((allEmojis, Emoji) => {
+  allEmojis[emojiUnified(Emoji)] = Emoji;
 
-    if (emojiHasVariations(Emoji)) {
-      emojiVariations(Emoji).forEach(variation => {
-        allEmojis[variation] = Emoji;
-      });
-    }
+  if (emojiHasVariations(Emoji)) {
+    emojiVariations(Emoji).forEach((variation) => {
+      allEmojis[variation] = Emoji;
+    });
+  }
 
-    return allEmojis;
-  }, allEmojisByUnified);
-});
+  return allEmojis;
+}, allEmojisByUnified);
 
 export function activeVariationFromUnified(unified: string): SkinTones | null {
   const [, suspectedSkinTone] = unified.split('-') as [string, SkinTones];

package/src/dataUtils/emojiUtils.ts

@@ -0,0 +1,74 @@
+import { cdnUrl } from '../config/cdnUrls';
+import { skinTonesMapped } from '../data/skinToneVariations';
+import { EmojiStyle, SkinTones } from '../types/exposedTypes';
+
+import { DataEmoji, EmojiProperties, WithName } from './DataTypes';
+
+export function emojiNames(emoji: WithName): string[] {
+  return emoji[EmojiProperties.name] ?? [];
+}
+
+export function addedIn(emoji: DataEmoji): number {
+  return parseFloat(emoji[EmojiProperties.added_in] || '0');
+}
+
+export function emojiName(emoji?: WithName): string {
+  if (!emoji) {
+    return '';
+  }
+
+  const names = emojiNames(emoji);
+  return names[names.length - 1];
+}
+
+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 emojiUnified(emoji: DataEmoji, skinTone?: string): string {
+  const unified = emoji[EmojiProperties.unified];
+
+  if (!skinTone || !emojiHasVariations(emoji)) {
+    return unified;
+  }
+
+  return emojiVariationUnified(emoji, skinTone) ?? unified;
+}
+
+export function emojiUrlByUnified(
+  unified: string,
+  emojiStyle: EmojiStyle,
+): string {
+  return `${cdnUrl(emojiStyle)}${unified}.png`;
+}
+
+export function emojiVariations(emoji: DataEmoji): string[] {
+  return emoji[EmojiProperties.variations] ?? [];
+}
+
+export function emojiHasVariations(emoji: DataEmoji): boolean {
+  return emojiVariations(emoji).length > 0;
+}
+
+export function emojiVariationUnified(
+  emoji: DataEmoji,
+  skinTone?: string,
+): string | undefined {
+  return skinTone
+    ? emojiVariations(emoji).find((variation) => variation.includes(skinTone))
+    : emojiUnified(emoji);
+}
+
+export function activeVariationFromUnified(unified: string): SkinTones | null {
+  const [, suspectedSkinTone] = unified.split('-') as [string, SkinTones];
+  return Object.keys(skinTonesMapped).includes(suspectedSkinTone)
+    ? suspectedSkinTone
+    : null;
+}

package/src/hooks/preloadEmoji.ts

@@ -1,6 +1,6 @@
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import { DataEmoji } from '../dataUtils/DataTypes';
-import { emojiUnified, emojiVariations } from '../dataUtils/emojiSelectors';
+import { emojiUnified, emojiVariations } from '../dataUtils/emojiUtils';
 import { EmojiStyle } from '../types/exposedTypes';
 import { Dimensions } from '../virtualization/virtualizationHelpers';
 

package/src/hooks/useDisallowedEmojis.ts

@@ -1,19 +1,20 @@
 import { useRef, useMemo } from 'react';
 
+import { usePickerDataContext } from '../components/context/PickerDataContext';
 import { useEmojiVersionConfig } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   addedIn,
-  allEmojis,
   emojiUnified,
   unifiedWithoutSkinTone
-} from '../dataUtils/emojiSelectors';
+} from '../dataUtils/emojiUtils';
 
 import { useIsUnicodeHidden } from './useHideEmojisByUniocode';
 
 export function useDisallowedEmojis() {
   const DisallowedEmojisRef = useRef<Record<string, boolean>>({});
   const emojiVersionConfig = useEmojiVersionConfig();
+  const { allEmojis } = usePickerDataContext();
 
   return useMemo(() => {
     const emojiVersion = parseFloat(`${emojiVersionConfig}`);
@@ -29,7 +30,7 @@ export function useDisallowedEmojis() {
 
       return disallowedEmojis;
     }, DisallowedEmojisRef.current);
-  }, [emojiVersionConfig]);
+  }, [emojiVersionConfig, allEmojis]);
 }
 
 export function useIsEmojiDisallowed() {

package/src/hooks/useEmojiVirtualization.tsx

@@ -1,5 +1,4 @@
- 
- import { ReactNode, useEffect } from 'react';
+import { ReactNode, useEffect } from 'react';
 import * as React from 'react';
 
 import { useBodyRef } from '../components/context/ElementRefContext';
@@ -12,7 +11,7 @@ import {
   useSkinTonesDisabledConfig
 } from '../config/useConfig';
 import { DataEmojis } from '../dataUtils/DataTypes';
-import { emojiUnified } from '../dataUtils/emojiSelectors';
+import { emojiUnified } from '../dataUtils/emojiUtils';
 import {
   getEmojiPositionStyle,
   shouldVirtualize

package/src/hooks/useFilter.ts

@@ -10,7 +10,7 @@ import {
 } from '../components/context/PickerContext';
 import { useSearchResultsConfig } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
-import { emojiNames } from '../dataUtils/emojiSelectors';
+import { emojiNames } from '../dataUtils/emojiUtils';
 
 import { useFocusSearchInput } from './useFocus';
 

package/src/hooks/useIsEmojiHidden.ts

@@ -1,6 +1,6 @@
 import { useEmojisThatFailedToLoadState } from '../components/context/PickerContext';
 import { DataEmoji } from '../dataUtils/DataTypes';
-import { emojiUnified } from '../dataUtils/emojiSelectors';
+import { emojiUnified } from '../dataUtils/emojiUtils';
 
 import { useIsEmojiFiltered } from './useFilter';
 

package/src/typeRefinements/typeRefinements.ts

@@ -1,9 +1,6 @@
-import {
-  Categories,
-  CategoryConfig,
-  CustomCategoryConfig
-} from '../config/categoryConfig';
+import { Categories, CustomCategoryConfig } from '../config/categoryConfig';
 import { CustomEmoji } from '../config/customEmojiConfig';
+import { CategoryConfig } from '../types/exposedTypes';
 import { DataEmoji } from '../dataUtils/DataTypes';
 
 export function isCustomCategory(

package/src/types/exposedTypes.ts

@@ -9,6 +9,23 @@ export type EmojiClickData = {
   isCustom: boolean;
 };
 
+export type CategoryConfig = {
+  category: Categories;
+  name: string;
+};
+
+export type EmojiData = {
+  categories: Partial<Record<Categories, CategoryConfig>>;
+  emojis: Record<string, DataEmoji[]>;
+};
+
+export interface DataEmoji {
+  n: string[];
+  u: string;
+  v?: string[];
+  a: string;
+}
+
 export enum SuggestionMode {
   RECENT = 'recent',
   FREQUENT = 'frequent'