emoji-picker-react 4.16.0 → 4.16.1

package/README.md

@@ -73,6 +73,7 @@ The following props are accepted by the picker:
 | lazyLoadEmojis         | boolean                                                | `false`    | Controls whether the emojis are loaded lazily or not.                                                                                                      |
 | previewConfig          | object                                                 | `{}`       | Controls the preview of the emoji. See below for more information.                                                                                         |
 | searchPlaceholder      | string                                                 | `Search`   | Controls the placeholder of the search input.                                                                                                              |
+| searchClearButtonLabel | string                                                 | 'Clear'    | Controls the `aria-label` and `title` of the Clear button of the search input.                                                                             |
 | suggestedEmojisMode    | string                                                 | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`.                                                                           |
 | skinTonesDisabled      | boolean                                                | `false`    | Controls whether the skin tones are disabled or not.                                                                                                       |
 | searchDisabled         | boolean                                                | `false`    | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component.                                |
@@ -166,6 +167,8 @@ import { SkinTones } from 'emoji-picker-react';
 
 - `searchPlaceholder`: `string` - The placeholder text for the search input. Defaults to `Search`.
 
+- `searchClearButtonLabel`: `string` - The `aria-label` and `title` text for the search input clear button. Defaults to `Clear`.
+
 - categories: Allows full config over ordering, naming and display of categories.
   To only sort/omit categories, you can simply pass an array of category names to display:
 

package/dist/config/config.d.ts

@@ -4,6 +4,7 @@ import { EmojiClickData, EmojiStyle, SkinTonePickerLocation, SkinTones, Suggesti
 import { CategoriesConfig } from './categoryConfig';
 import { CustomEmoji } from './customEmojiConfig';
 export declare const DEFAULT_SEARCH_PLACEHOLDER = "Search";
+export declare const DEFAULT_SEARCH_CLEAR_BUTTON_LABEL = "Clear";
 export declare const SEARCH_RESULTS_NO_RESULTS_FOUND = "No results found";
 export declare const SEARCH_RESULTS_SUFFIX = " found. Use up and down arrow keys to navigate.";
 export declare const SEARCH_RESULTS_ONE_RESULT_FOUND: string;
@@ -14,6 +15,7 @@ export declare type PickerConfigInternal = {
     emojiVersion: string | null;
     searchPlaceHolder: string;
     searchPlaceholder: string;
+    searchClearButtonLabel: string;
     defaultSkinTone: SkinTones;
     skinTonesDisabled: boolean;
     autoFocusSearch: boolean;

package/dist/config/useConfig.d.ts

@@ -8,6 +8,7 @@ export declare enum MOUSE_EVENT_SOURCE {
     PICKER = "picker"
 }
 export declare function useSearchPlaceHolderConfig(): string;
+export declare function useSearchClearButtonLabelConfig(): string;
 export declare function useDefaultSkinToneConfig(): SkinTones;
 export declare function useAllowExpandReactions(): boolean;
 export declare function useSkinTonesDisabledConfig(): boolean;

package/dist/emoji-picker-react.cjs.development.js

@@ -191,7 +191,7 @@ function compareConfig(prev, next) {
   var _prev$customEmojis, _next$customEmojis;
   var prevCustomEmojis = (_prev$customEmojis = prev.customEmojis) != null ? _prev$customEmojis : [];
   var nextCustomEmojis = (_next$customEmojis = next.customEmojis) != null ? _next$customEmojis : [];
-  return prev.open === next.open && prev.emojiVersion === next.emojiVersion && prev.reactionsDefaultOpen === next.reactionsDefaultOpen && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
+  return prev.open === next.open && prev.emojiVersion === next.emojiVersion && 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 && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
 }
 
 var DEFAULT_REACTIONS = ['1f44d', '2764-fe0f', '1f603', '1f622', '1f64f', '1f44e', '1f621' // 😡
@@ -17553,6 +17553,7 @@ function activeVariationFromUnified(unified) {
 
 var KNOWN_FAILING_EMOJIS = ['2640-fe0f', '2642-fe0f', '2695-fe0f'];
 var DEFAULT_SEARCH_PLACEHOLDER = 'Search';
+var DEFAULT_SEARCH_CLEAR_BUTTON_LABEL = 'Clear';
 var SEARCH_RESULTS_NO_RESULTS_FOUND = 'No results found';
 var SEARCH_RESULTS_SUFFIX = ' found. Use up and down arrow keys to navigate.';
 var SEARCH_RESULTS_ONE_RESULT_FOUND = '1 result' + SEARCH_RESULTS_SUFFIX;
@@ -17595,6 +17596,7 @@ function basePickerConfig() {
     searchDisabled: false,
     searchPlaceHolder: DEFAULT_SEARCH_PLACEHOLDER,
     searchPlaceholder: DEFAULT_SEARCH_PLACEHOLDER,
+    searchClearButtonLabel: DEFAULT_SEARCH_CLEAR_BUTTON_LABEL,
     skinTonePickerLocation: exports.SkinTonePickerLocation.SEARCH,
     skinTonesDisabled: false,
     style: {},
@@ -17639,7 +17641,7 @@ function useSetConfig(config) {
     setMergedConfig(mergeConfig(config));
     // not gonna...
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [(_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length, config.open, config.emojiVersion, config.reactionsDefaultOpen, config.searchPlaceHolder, config.searchPlaceholder, config.defaultSkinTone, config.skinTonesDisabled, config.autoFocusSearch, config.emojiStyle, config.theme, config.suggestedEmojisMode, config.lazyLoadEmojis, config.className, config.height, config.width, config.searchDisabled, config.skinTonePickerLocation, config.allowExpandReactions]);
+  }, [(_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length, config.open, config.emojiVersion, config.reactionsDefaultOpen, config.searchPlaceHolder, config.searchPlaceholder, config.searchClearButtonLabel, config.defaultSkinTone, config.skinTonesDisabled, config.autoFocusSearch, config.emojiStyle, config.theme, config.suggestedEmojisMode, config.lazyLoadEmojis, config.className, config.height, config.width, config.searchDisabled, config.skinTonePickerLocation, config.allowExpandReactions]);
   return mergedConfig;
 }
 function usePickerConfig() {
@@ -17682,44 +17684,49 @@ function useSearchPlaceHolderConfig() {
     return p !== DEFAULT_SEARCH_PLACEHOLDER;
   })) != null ? _find : DEFAULT_SEARCH_PLACEHOLDER;
 }
-function useDefaultSkinToneConfig() {
+function useSearchClearButtonLabelConfig() {
   var _usePickerConfig2 = usePickerConfig(),
-    defaultSkinTone = _usePickerConfig2.defaultSkinTone;
+    searchClearButtonLabel = _usePickerConfig2.searchClearButtonLabel;
+  return searchClearButtonLabel != null ? searchClearButtonLabel : DEFAULT_SEARCH_CLEAR_BUTTON_LABEL;
+}
+function useDefaultSkinToneConfig() {
+  var _usePickerConfig3 = usePickerConfig(),
+    defaultSkinTone = _usePickerConfig3.defaultSkinTone;
   return defaultSkinTone;
 }
 function useAllowExpandReactions() {
-  var _usePickerConfig3 = usePickerConfig(),
-    allowExpandReactions = _usePickerConfig3.allowExpandReactions;
+  var _usePickerConfig4 = usePickerConfig(),
+    allowExpandReactions = _usePickerConfig4.allowExpandReactions;
   return allowExpandReactions;
 }
 function useSkinTonesDisabledConfig() {
-  var _usePickerConfig4 = usePickerConfig(),
-    skinTonesDisabled = _usePickerConfig4.skinTonesDisabled;
+  var _usePickerConfig5 = usePickerConfig(),
+    skinTonesDisabled = _usePickerConfig5.skinTonesDisabled;
   return skinTonesDisabled;
 }
 function useEmojiStyleConfig() {
-  var _usePickerConfig5 = usePickerConfig(),
-    emojiStyle = _usePickerConfig5.emojiStyle;
+  var _usePickerConfig6 = usePickerConfig(),
+    emojiStyle = _usePickerConfig6.emojiStyle;
   return emojiStyle;
 }
 function useAutoFocusSearchConfig() {
-  var _usePickerConfig6 = usePickerConfig(),
-    autoFocusSearch = _usePickerConfig6.autoFocusSearch;
+  var _usePickerConfig7 = usePickerConfig(),
+    autoFocusSearch = _usePickerConfig7.autoFocusSearch;
   return autoFocusSearch;
 }
 function useCategoriesConfig() {
-  var _usePickerConfig7 = usePickerConfig(),
-    categories = _usePickerConfig7.categories;
+  var _usePickerConfig8 = usePickerConfig(),
+    categories = _usePickerConfig8.categories;
   return categories;
 }
 function useCustomEmojisConfig() {
-  var _usePickerConfig8 = usePickerConfig(),
-    customEmojis = _usePickerConfig8.customEmojis;
+  var _usePickerConfig9 = usePickerConfig(),
+    customEmojis = _usePickerConfig9.customEmojis;
   return customEmojis;
 }
 function useOpenConfig() {
-  var _usePickerConfig9 = usePickerConfig(),
-    open = _usePickerConfig9.open;
+  var _usePickerConfig10 = usePickerConfig(),
+    open = _usePickerConfig10.open;
   return open;
 }
 function useOnEmojiClickConfig(mouseEventSource) {
@@ -17760,73 +17767,73 @@ function useOnSkinToneChangeConfig() {
   return current.onSkinToneChange || function () {};
 }
 function usePreviewConfig() {
-  var _usePickerConfig10 = usePickerConfig(),
-    previewConfig = _usePickerConfig10.previewConfig;
+  var _usePickerConfig11 = usePickerConfig(),
+    previewConfig = _usePickerConfig11.previewConfig;
   return previewConfig;
 }
 function useThemeConfig() {
-  var _usePickerConfig11 = usePickerConfig(),
-    theme = _usePickerConfig11.theme;
+  var _usePickerConfig12 = usePickerConfig(),
+    theme = _usePickerConfig12.theme;
   return theme;
 }
 function useSuggestedEmojisModeConfig() {
-  var _usePickerConfig12 = usePickerConfig(),
-    suggestedEmojisMode = _usePickerConfig12.suggestedEmojisMode;
+  var _usePickerConfig13 = usePickerConfig(),
+    suggestedEmojisMode = _usePickerConfig13.suggestedEmojisMode;
   return suggestedEmojisMode;
 }
 function useLazyLoadEmojisConfig() {
-  var _usePickerConfig13 = usePickerConfig(),
-    lazyLoadEmojis = _usePickerConfig13.lazyLoadEmojis;
+  var _usePickerConfig14 = usePickerConfig(),
+    lazyLoadEmojis = _usePickerConfig14.lazyLoadEmojis;
   return lazyLoadEmojis;
 }
 function useClassNameConfig() {
-  var _usePickerConfig14 = usePickerConfig(),
-    className = _usePickerConfig14.className;
+  var _usePickerConfig15 = usePickerConfig(),
+    className = _usePickerConfig15.className;
   return className;
 }
 function useStyleConfig() {
-  var _usePickerConfig15 = usePickerConfig(),
-    height = _usePickerConfig15.height,
-    width = _usePickerConfig15.width,
-    style = _usePickerConfig15.style;
+  var _usePickerConfig16 = usePickerConfig(),
+    height = _usePickerConfig16.height,
+    width = _usePickerConfig16.width,
+    style = _usePickerConfig16.style;
   return _extends({
     height: getDimension(height),
     width: getDimension(width)
   }, style);
 }
 function useReactionsOpenConfig() {
-  var _usePickerConfig16 = usePickerConfig(),
-    reactionsDefaultOpen = _usePickerConfig16.reactionsDefaultOpen;
+  var _usePickerConfig17 = usePickerConfig(),
+    reactionsDefaultOpen = _usePickerConfig17.reactionsDefaultOpen;
   return reactionsDefaultOpen;
 }
 function useEmojiVersionConfig() {
-  var _usePickerConfig17 = usePickerConfig(),
-    emojiVersion = _usePickerConfig17.emojiVersion;
+  var _usePickerConfig18 = usePickerConfig(),
+    emojiVersion = _usePickerConfig18.emojiVersion;
   return emojiVersion;
 }
 function useSearchDisabledConfig() {
-  var _usePickerConfig18 = usePickerConfig(),
-    searchDisabled = _usePickerConfig18.searchDisabled;
+  var _usePickerConfig19 = usePickerConfig(),
+    searchDisabled = _usePickerConfig19.searchDisabled;
   return searchDisabled;
 }
 function useSkinTonePickerLocationConfig() {
-  var _usePickerConfig19 = usePickerConfig(),
-    skinTonePickerLocation = _usePickerConfig19.skinTonePickerLocation;
+  var _usePickerConfig20 = usePickerConfig(),
+    skinTonePickerLocation = _usePickerConfig20.skinTonePickerLocation;
   return skinTonePickerLocation;
 }
 function useUnicodeToHide() {
-  var _usePickerConfig20 = usePickerConfig(),
-    unicodeToHide = _usePickerConfig20.unicodeToHide;
+  var _usePickerConfig21 = usePickerConfig(),
+    unicodeToHide = _usePickerConfig21.unicodeToHide;
   return unicodeToHide;
 }
 function useReactionsConfig() {
-  var _usePickerConfig21 = usePickerConfig(),
-    reactions = _usePickerConfig21.reactions;
+  var _usePickerConfig22 = usePickerConfig(),
+    reactions = _usePickerConfig22.reactions;
   return reactions;
 }
 function useGetEmojiUrlConfig() {
-  var _usePickerConfig22 = usePickerConfig(),
-    getEmojiUrl = _usePickerConfig22.getEmojiUrl;
+  var _usePickerConfig23 = usePickerConfig(),
+    getEmojiUrl = _usePickerConfig23.getEmojiUrl;
   return getEmojiUrl;
 }
 function getDimension(dimensionConfig) {
@@ -20953,11 +20960,12 @@ var SVGTimes = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz
 
 function BtnClearSearch() {
   var clearSearch = useClearSearch();
+  var searchClearButtonLabel = useSearchClearButtonLabelConfig();
   return React.createElement(Button, {
     className: flairup.cx(styles$h.btnClearSearch, commonInteractionStyles.visibleOnSearchOnly),
     onClick: clearSearch,
-    "aria-label": "Clear",
-    title: "Clear"
+    "aria-label": searchClearButtonLabel,
+    title: searchClearButtonLabel
   }, React.createElement("div", {
     className: flairup.cx(styles$h.icnClearnSearch)
   }));