emoji-picker-react 4.15.2 → 4.16.1

package/package.json

@@ -1,9 +1,9 @@
 {
-  "version": "4.15.2",
+  "version": "4.16.1",
   "license": "MIT",
   "main": "dist/index.js",
-  "homepage": "https://ealush.com/emoji-picker-react",
   "typings": "dist/index.d.ts",
+  "homepage": "https://ealush.com/emoji-picker-react",
   "files": [
     "dist",
     "src"

package/src/components/context/PickerConfigContext.tsx

@@ -46,6 +46,7 @@ export function useSetConfig(config: PickerConfig) {
     config.reactionsDefaultOpen,
     config.searchPlaceHolder,
     config.searchPlaceholder,
+    config.searchClearButtonLabel,
     config.defaultSkinTone,
     config.skinTonesDisabled,
     config.autoFocusSearch,

package/src/components/header/Search/BtnClearSearch.tsx

@@ -6,6 +6,7 @@ import {
   darkMode,
   stylesheet
 } from '../../../Stylesheet/stylesheet';
+import { useSearchClearButtonLabelConfig } from '../../../config/useConfig';
 import { useClearSearch } from '../../../hooks/useFilter';
 import { Button } from '../../atoms/Button';
 
@@ -13,6 +14,7 @@ import SVGTimes from './svg/times.svg';
 
 export function BtnClearSearch() {
   const clearSearch = useClearSearch();
+  const searchClearButtonLabel = useSearchClearButtonLabelConfig();
 
   return (
     <Button
@@ -21,8 +23,8 @@ export function BtnClearSearch() {
         commonInteractionStyles.visibleOnSearchOnly
       )}
       onClick={clearSearch}
-      aria-label="Clear"
-      title="Clear"
+      aria-label={searchClearButtonLabel}
+      title={searchClearButtonLabel}
     >
       <div className={cx(styles.icnClearnSearch)} />
     </Button>

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 &&

package/src/config/config.ts

@@ -25,6 +25,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.';
@@ -84,6 +85,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: {},
@@ -103,6 +105,7 @@ export type PickerConfigInternal = {
   emojiVersion: string | null;
   searchPlaceHolder: string;
   searchPlaceholder: string;
+  searchClearButtonLabel: string;
   defaultSkinTone: SkinTones;
   skinTonesDisabled: boolean;
   autoFocusSearch: boolean;

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;