emoji-picker-react 4.16.0 → 4.17.0

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

@@ -10,6 +10,7 @@ export function compareConfig(prev: PickerConfig, next: PickerConfig) {
     prev.reactionsDefaultOpen === next.reactionsDefaultOpen &&
     prev.searchPlaceHolder === next.searchPlaceHolder &&
     prev.searchPlaceholder === next.searchPlaceholder &&
+    prev.searchClearButtonLabel === next.searchClearButtonLabel &&
     prev.defaultSkinTone === next.defaultSkinTone &&
     prev.skinTonesDisabled === next.skinTonesDisabled &&
     prev.autoFocusSearch === next.autoFocusSearch &&
@@ -23,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,
@@ -25,6 +23,7 @@ import { CustomEmoji } from './customEmojiConfig';
 const KNOWN_FAILING_EMOJIS = ['2640-fe0f', '2642-fe0f', '2695-fe0f'];
 
 export const DEFAULT_SEARCH_PLACEHOLDER = 'Search';
+export const DEFAULT_SEARCH_CLEAR_BUTTON_LABEL = 'Clear';
 export const SEARCH_RESULTS_NO_RESULTS_FOUND = 'No results found';
 export const SEARCH_RESULTS_SUFFIX =
   ' found. Use up and down arrow keys to navigate.';
@@ -34,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;
@@ -84,6 +99,7 @@ export function basePickerConfig(): PickerConfigInternal {
     searchDisabled: false,
     searchPlaceHolder: DEFAULT_SEARCH_PLACEHOLDER,
     searchPlaceholder: DEFAULT_SEARCH_PLACEHOLDER,
+    searchClearButtonLabel: DEFAULT_SEARCH_CLEAR_BUTTON_LABEL,
     skinTonePickerLocation: SkinTonePickerLocation.SEARCH,
     skinTonesDisabled: false,
     style: {},
@@ -96,6 +112,7 @@ export function basePickerConfig(): PickerConfigInternal {
     open: true,
     allowExpandReactions: true,
     hiddenEmojis: [],
+    emojiData: undefined,
   };
 }
 
@@ -103,6 +120,7 @@ export type PickerConfigInternal = {
   emojiVersion: string | null;
   searchPlaceHolder: string;
   searchPlaceholder: string;
+  searchClearButtonLabel: string;
   defaultSkinTone: SkinTones;
   skinTonesDisabled: boolean;
   autoFocusSearch: boolean;
@@ -126,6 +144,7 @@ export type PickerConfigInternal = {
   open: boolean;
   allowExpandReactions: boolean;
   hiddenEmojis: string[];
+  emojiData?: EmojiData;
 };
 
 export type PreviewConfig = {
@@ -154,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;
 

package/src/config/useConfig.ts

@@ -14,6 +14,7 @@ import {
 import { CategoriesConfig } from './categoryConfig';
 import {
   DEFAULT_SEARCH_PLACEHOLDER,
+  DEFAULT_SEARCH_CLEAR_BUTTON_LABEL,
   SEARCH_RESULTS_NO_RESULTS_FOUND,
   SEARCH_RESULTS_ONE_RESULT_FOUND,
   SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND,
@@ -37,6 +38,11 @@ export function useSearchPlaceHolderConfig(): string {
   );
 }
 
+export function useSearchClearButtonLabelConfig(): string {
+  const { searchClearButtonLabel } = usePickerConfig();
+  return searchClearButtonLabel ?? DEFAULT_SEARCH_CLEAR_BUTTON_LABEL;
+}
+
 export function useDefaultSkinToneConfig(): SkinTones {
   const { defaultSkinTone } = usePickerConfig();
   return defaultSkinTone;