emoji-picker-react 4.1.0 → 4.1.1

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/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() {
@@ -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);