emoji-picker-react 4.1.0-rc.1 → 4.1.1

package/README.md

@@ -1,4 +1,4 @@
-# Emoji Picker React (v4) | [Live Demo](https://codesandbox.io/s/emoji-picker-react-4-z2gkzp)
+\*\*\*\*# Emoji Picker React (v4) | [Live Demo](https://codesandbox.io/s/emoji-picker-react-4-z2gkzp)
 
 ![Picker](https://user-images.githubusercontent.com/11255103/192167134-8205eb89-a71d-4463-8f3a-940e844917d5.gif)
 
@@ -56,6 +56,7 @@ The following props are accepted by them picker:
 | 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.                                                              |
 | `width`             | number   | `350`      | Controls the width of the picker.                                                                                 |
+| emojiVersion        | `string` | -          | Allows displaying emojis up to a certain version for compatibility.                                               |
 | `height`            | number   | `450`      | Controls the height of the picker.                                                                                |
 
 ## Full details
@@ -139,12 +140,12 @@ import { SkinTones } from 'emoji-picker-react';
   [
     {
       category: 'suggested',
-      name: 'Recently Used'
+      name: 'Recently Used',
     },
     {
       category: 'smileys_people',
-      name: 'Faces...'
-    }
+      name: 'Faces...',
+    },
   ];
   ```
 
@@ -155,6 +156,14 @@ import { SkinTones } from 'emoji-picker-react';
   import { SuggestionMode } from 'emoji-picker-react';
   ```
 
+- `emojiVersion`: `string` - Allows displaying emojis up to a certain version for compatibility. The passed version will be parsed as a float and each emoji will be tested against it. Common values are:
+  - `"0.6"`
+  - `"1.0"`
+  - `"2.0"`
+  - `"3.0"`
+  - `"4.0"`
+  - `"5.0"`
+
 # Customization
 
 ## Custom Picker Width and Height

package/dist/DomUtils/classNames.d.ts

@@ -10,6 +10,8 @@ export declare enum ClassNames {
     categoryContent = "epr-emoji-category-content",
     emojiHasVariatios = "epr-emoji-has-variations",
     scrollBody = "epr-body",
-    external = "__EmojiPicker__"
+    emojiList = "epr-emoji-list",
+    external = "__EmojiPicker__",
+    emojiPicker = "EmojiPickerReact"
 }
 export declare function asSelectors(...classNames: ClassNames[]): string;

package/dist/config/config.d.ts

@@ -3,7 +3,7 @@ import { CategoriesConfig } from './categoryConfig';
 export declare function mergeConfig(userConfig?: PickerConfig): PickerConfigInternal;
 export declare function basePickerConfig(): PickerConfigInternal;
 export declare type PickerConfigInternal = {
-    addedIn: string | null;
+    emojiVersion: string | null;
     searchPlaceHolder: string;
     defaultSkinTone: SkinTones;
     skinTonesDisabled: boolean;

package/dist/config/useConfig.d.ts

@@ -16,4 +16,4 @@ export declare function usePickerSizeConfig(): {
     height: number;
     width: number;
 };
-export declare function useAddedInConfig(): string | null;
+export declare function useEmojiVersionConfig(): string | null;

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

@@ -21,7 +21,9 @@ var ClassNames;
   ClassNames["categoryContent"] = "epr-emoji-category-content";
   ClassNames["emojiHasVariatios"] = "epr-emoji-has-variations";
   ClassNames["scrollBody"] = "epr-body";
+  ClassNames["emojiList"] = "epr-emoji-list";
   ClassNames["external"] = "__EmojiPicker__";
+  ClassNames["emojiPicker"] = "EmojiPickerReact";
 })(ClassNames || (ClassNames = {}));
 
 function asSelectors() {
@@ -335,11 +337,11 @@ function mergeConfig(userConfig) {
 }
 function basePickerConfig() {
   return {
-    addedIn: null,
     autoFocusSearch: true,
     categories: baseCategoriesConfig(),
     defaultSkinTone: exports.SkinTones.NEUTRAL,
     emojiStyle: exports.EmojiStyle.APPLE,
+    emojiVersion: null,
     height: 450,
     lazyLoadEmojis: false,
     onEmojiClick: function defaultOnClickHandler( // @ts-ignore
@@ -455,11 +457,11 @@ function usePickerSizeConfig() {
     width: width
   };
 }
-function useAddedInConfig() {
+function useEmojiVersionConfig() {
   var _usePickerConfig13 = usePickerConfig(),
-      addedIn = _usePickerConfig13.addedIn;
+      emojiVersion = _usePickerConfig13.emojiVersion;
 
-  return addedIn;
+  return emojiVersion;
 }
 
 var CDN_URL_APPLE = 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/';
@@ -16953,22 +16955,22 @@ function useDebouncedState(initialValue, delay) {
 
 function useDisallowedEmojis() {
   var DisallowedEmojisRef = React.useRef({});
-  var addedInConfig = useAddedInConfig();
+  var emojiVersionConfig = useEmojiVersionConfig();
   return React.useMemo(function () {
-    var addedInFloat = parseFloat("" + addedInConfig);
+    var emojiVersion = parseFloat("" + emojiVersionConfig);
 
-    if (!addedInConfig || Number.isNaN(addedInFloat)) {
+    if (!emojiVersionConfig || Number.isNaN(emojiVersion)) {
       return DisallowedEmojisRef.current;
     }
 
     return allEmojis.reduce(function (disallowedEmojis, emoji) {
-      if (addedInNewerVersion(emoji, addedInFloat)) {
+      if (addedInNewerVersion(emoji, emojiVersion)) {
         disallowedEmojis[emojiUnified(emoji)] = true;
       }
 
       return disallowedEmojis;
     }, DisallowedEmojisRef.current);
-  }, [addedInConfig]);
+  }, [emojiVersionConfig]);
 }
 
 function addedInNewerVersion(emoji, supportedLevel) {
@@ -18308,7 +18310,7 @@ function Suggested(_ref) {
 function EmojiList() {
   var categories = useCategoriesConfig();
   return React.createElement("ul", {
-    className: "epr-emoji-list"
+    className: ClassNames.emojiList
   }, categories.map(function (categoryConfig, index) {
     var category = categoryFromCategoryConfig(categoryConfig);
 
@@ -18827,10 +18829,17 @@ function Search() {
     className: "epr-icn-clear-search"
   })));
 }
+var CSS_SEARCH_SELECTOR = /*#__PURE__*/asSelectors(ClassNames.emojiPicker) + " " + /*#__PURE__*/asSelectors(ClassNames.emojiList);
 
 function CssSearch(_ref) {
   var value = _ref.value;
-  return value ? React.createElement("style", null, "\n        .EmojiPickerReact button.epr-emoji:not([data-full-name*=\"" + getNormalizedSearchTerm(value) + "\"]) {\n          display: none;\n        }\n  ") : null;
+
+  if (!value) {
+    return null;
+  }
+
+  var searchQuery = "button[data-full-name*=\"" + getNormalizedSearchTerm(value) + "\"]";
+  return React.createElement("style", null, "\n        " + CSS_SEARCH_SELECTOR + " " + asSelectors(ClassNames.category) + ":not(:has(" + searchQuery + ")) {\n        display: none;\n      }\n\n        " + CSS_SEARCH_SELECTOR + " button" + asSelectors(ClassNames.emoji) + ":not(" + searchQuery + ") {\n        display: none;\n      }\n  ");
 }
 
 function SkinTonePicker() {
@@ -19362,7 +19371,7 @@ function PickerRootElement(_ref2) {
     width: width + "px"
   };
   return React.createElement("aside", {
-    className: clsx('EmojiPickerReact', 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === exports.Theme.DARK, _clsx)),
+    className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === exports.Theme.DARK, _clsx)),
     ref: PickerMainRef,
     style: style
   }, children);