emoji-picker-react 4.16.1 → 4.17.1

package/src/config/categoryConfig.ts

@@ -1,4 +1,9 @@
-import { Categories, SuggestionMode } from '../types/exposedTypes';
+import {
+  Categories,
+  CategoryConfig,
+  EmojiData,
+  SuggestionMode,
+} from '../types/exposedTypes';
 
 export { Categories };
 
@@ -12,12 +17,12 @@ const categoriesOrdered: Categories[] = [
   Categories.ACTIVITIES,
   Categories.OBJECTS,
   Categories.SYMBOLS,
-  Categories.FLAGS
+  Categories.FLAGS,
 ];
 
 export const SuggestedRecent: CategoryConfig = {
   name: 'Recently Used',
-  category: Categories.SUGGESTED
+  category: Categories.SUGGESTED,
 };
 
 export type CustomCategoryConfig = {
@@ -28,53 +33,53 @@ export type CustomCategoryConfig = {
 const configByCategory: Record<Categories, CategoryConfig> = {
   [Categories.SUGGESTED]: {
     category: Categories.SUGGESTED,
-    name: 'Frequently Used'
+    name: 'Frequently Used',
   },
   [Categories.CUSTOM]: {
     category: Categories.CUSTOM,
-    name: 'Custom Emojis'
+    name: 'Custom Emojis',
   },
   [Categories.SMILEYS_PEOPLE]: {
     category: Categories.SMILEYS_PEOPLE,
-    name: 'Smileys & People'
+    name: 'Smileys & People',
   },
   [Categories.ANIMALS_NATURE]: {
     category: Categories.ANIMALS_NATURE,
-    name: 'Animals & Nature'
+    name: 'Animals & Nature',
   },
   [Categories.FOOD_DRINK]: {
     category: Categories.FOOD_DRINK,
-    name: 'Food & Drink'
+    name: 'Food & Drink',
   },
   [Categories.TRAVEL_PLACES]: {
     category: Categories.TRAVEL_PLACES,
-    name: 'Travel & Places'
+    name: 'Travel & Places',
   },
   [Categories.ACTIVITIES]: {
     category: Categories.ACTIVITIES,
-    name: 'Activities'
+    name: 'Activities',
   },
   [Categories.OBJECTS]: {
     category: Categories.OBJECTS,
-    name: 'Objects'
+    name: 'Objects',
   },
   [Categories.SYMBOLS]: {
     category: Categories.SYMBOLS,
-    name: 'Symbols'
+    name: 'Symbols',
   },
   [Categories.FLAGS]: {
     category: Categories.FLAGS,
-    name: 'Flags'
-  }
+    name: 'Flags',
+  },
 };
 
 export function baseCategoriesConfig(
-  modifiers?: Record<Categories, CategoryConfig>
+  modifiers?: Record<Categories, CategoryConfig>,
 ): CategoriesConfig {
-  return categoriesOrdered.map(category => {
+  return categoriesOrdered.map((category) => {
     return {
       ...configByCategory[category],
-      ...(modifiers && modifiers[category] && modifiers[category])
+      ...(modifiers && modifiers[category] && modifiers[category]),
     };
   });
 }
@@ -89,43 +94,55 @@ export function categoryNameFromCategoryConfig(category: CategoryConfig) {
 
 export type CategoriesConfig = CategoryConfig[];
 
-export type CategoryConfig = {
-  category: Categories;
-  name: string;
-};
-
 export type UserCategoryConfig = Array<Categories | CategoryConfig>;
 
 export function mergeCategoriesConfig(
   userCategoriesConfig: UserCategoryConfig = [],
-  modifiers: CategoryConfigModifiers = {}
+  modifiers: CategoryConfigModifiers = {},
+  emojiData?: EmojiData,
 ): CategoriesConfig {
-  const extra = {} as Record<Categories, CategoryConfig>;
+  const extra = ((): Record<Categories, CategoryConfig> => {
+    // 1. Start with localized categories from emojiData
+    const fromData = emojiData?.categories
+      ? (Object.fromEntries(
+          Object.entries(emojiData.categories).filter(([, config]) => !!config),
+        ) as Record<Categories, CategoryConfig>)
+      : ({} as Record<Categories, CategoryConfig>);
+
+    // 2. Handle "Recently Used" override for explicit 'recent' mode
+    if (modifiers.suggestionMode === SuggestionMode.RECENT) {
+      const recentConfig = (
+        emojiData?.categories as Record<string, CategoryConfig | undefined>
+      )?.['suggested_recent'];
+      fromData[Categories.SUGGESTED] = recentConfig
+        ? { category: Categories.SUGGESTED, name: recentConfig.name }
+        : SuggestedRecent;
+    }
 
-  if (modifiers.suggestionMode === SuggestionMode.RECENT) {
-    extra[Categories.SUGGESTED] = SuggestedRecent;
-  }
+    return fromData;
+  })();
 
   const base = baseCategoriesConfig(extra);
+
   if (!userCategoriesConfig?.length) {
     return base;
   }
 
-  return userCategoriesConfig.map(category => {
+  return userCategoriesConfig.map((category) => {
     if (typeof category === 'string') {
       return getBaseConfigByCategory(category, extra[category]);
     }
 
     return {
       ...getBaseConfigByCategory(category.category, extra[category.category]),
-      ...category
+      ...category,
     };
   });
 }
 
 function getBaseConfigByCategory(
   category: Categories,
-  modifier: CategoryConfig = {} as CategoryConfig
+  modifier: CategoryConfig = {} as CategoryConfig,
 ) {
   return Object.assign(configByCategory[category], modifier);
 }

package/src/config/compareConfig.ts

@@ -24,6 +24,7 @@ export function compareConfig(prev: PickerConfig, next: PickerConfig) {
     prev.style === next.style &&
     prev.searchDisabled === next.searchDisabled &&
     prev.skinTonePickerLocation === next.skinTonePickerLocation &&
-    prevCustomEmojis.length === nextCustomEmojis.length
+    prevCustomEmojis.length === nextCustomEmojis.length &&
+    prev.emojiData === next.emojiData
   );
-}
+}

package/src/config/config.ts

@@ -2,12 +2,10 @@ import * as React from 'react';
 
 import { DEFAULT_REACTIONS } from '../components/Reactions/DEFAULT_REACTIONS';
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
-import {
-  setCustomEmojis,
-  emojiUrlByUnified,
-} from '../dataUtils/emojiSelectors';
+import { emojiUrlByUnified } from '../dataUtils/emojiUtils';
 import {
   EmojiClickData,
+  EmojiData,
   EmojiStyle,
   SkinTonePickerLocation,
   SkinTones,
@@ -35,26 +33,42 @@ export const SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND =
   '%n results' + SEARCH_RESULTS_SUFFIX;
 
 export function mergeConfig(
-  userConfig: PickerConfig = {}
+  userConfig: PickerConfig = {},
 ): PickerConfigInternal {
   const base = basePickerConfig();
 
-  const previewConfig = Object.assign(
-    base.previewConfig,
-    userConfig.previewConfig ?? {}
-  );
+  // Get localized mood from emojiData, fallback to base default
+  // Get localized mood from emojiData, fallback to base default
+  const localizedMood = (
+    userConfig.emojiData?.categories as Record<
+      string,
+      { name: string } | undefined
+    >
+  )?.preview_mood?.name;
+
+  const previewConfig = {
+    ...base.previewConfig,
+    // Localized mood is default, but user can override
+    ...(localizedMood && !userConfig.previewConfig?.defaultCaption
+      ? { defaultCaption: localizedMood }
+      : {}),
+    ...(userConfig.previewConfig ?? {}),
+  };
+
   const config = Object.assign(base, userConfig);
 
-  const categories = mergeCategoriesConfig(userConfig.categories, {
-    suggestionMode: config.suggestedEmojisMode,
-  });
+  const categories = mergeCategoriesConfig(
+    userConfig.categories,
+    {
+      suggestionMode: config.suggestedEmojisMode,
+    },
+    userConfig.emojiData,
+  );
 
   config.hiddenEmojis.forEach((emoji) => {
     config.unicodeToHide.add(emoji);
   });
 
-  setCustomEmojis(config.customEmojis ?? []);
-
   const skinTonePickerLocation = config.searchDisabled
     ? SkinTonePickerLocation.PREVIEW
     : config.skinTonePickerLocation;
@@ -98,6 +112,7 @@ export function basePickerConfig(): PickerConfigInternal {
     open: true,
     allowExpandReactions: true,
     hiddenEmojis: [],
+    emojiData: undefined,
   };
 }
 
@@ -129,6 +144,7 @@ export type PickerConfigInternal = {
   open: boolean;
   allowExpandReactions: boolean;
   hiddenEmojis: string[];
+  emojiData?: EmojiData;
 };
 
 export type PreviewConfig = {
@@ -157,7 +173,7 @@ export type PickerDimensions = string | number;
 export type MouseDownEvent = (
   emoji: EmojiClickData,
   event: MouseEvent,
-  api?: OnEmojiClickApi
+  api?: OnEmojiClickApi,
 ) => void;
 export type OnSkinToneChange = (emoji: SkinTones) => void;