emoji-picker-react 4.1.0 → 4.1.1

package/dist/emoji-picker-react.esm.js

@@ -15,7 +15,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() {
@@ -18348,7 +18350,7 @@ styleInject(css_248z$2);
 function EmojiList() {
   var categories = useCategoriesConfig();
   return createElement("ul", {
-    className: "epr-emoji-list"
+    className: ClassNames.emojiList
   }, categories.map(function (categoryConfig, index) {
     var category = categoryFromCategoryConfig(categoryConfig);
 
@@ -18885,10 +18887,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 ? 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 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  ");
 }
 
 var css_248z$9 = ".EmojiPickerReact .epr-skin-tones{--epr-skin-tone-size:16px;align-items:center;display:flex;flex-basis:30px;justify-content:flex-end;transition:all .3s ease-in-out}.EmojiPickerReact .epr-skin-tones.open{flex-basis:170px}.EmojiPickerReact .epr-skin-tone-select{height:var(--epr-skin-tone-size);position:relative;width:var(--epr-skin-tone-size)}.EmojiPickerReact .epr-skin-tones.open .epr-tone{transition:transform .3s ease-in-out,opacity .3s ease-in-out}.EmojiPickerReact .epr-skin-tones:not(.open) .epr-tone{opacity:0;z-index:0}.EmojiPickerReact .epr-skin-tones .epr-tone{border-radius:4px;box-shadow:0 0 0 0 var(--epr-active-skin-hover-color);cursor:pointer;display:block;height:var(--epr-skin-tone-size);position:absolute;right:0;transition:transform .3s ease-in-out,opacity .5s ease-in-out;width:var(--epr-skin-tone-size);z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone:hover{box-shadow:0 0 0 5px var(--epr-active-skin-hover-color)}.EmojiPickerReact .epr-skin-tones .epr-tone:focus{box-shadow:0 0 0 5px var(--epr-focus-bg-color)}.EmojiPickerReact .epr-skin-tones.open .epr-skin-tone-select .epr-tone.epr-active:after{border:1px solid var(--epr-active-skin-tone-indicator-border-color);border-radius:5px;bottom:-2px;content:\"\";left:-2px;position:absolute;right:-2px;top:-2px}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-active{opacity:1;z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-neutral{background-color:#ffd225}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fb{background-color:#ffdfbd}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fc{background-color:#e9c197}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fd{background-color:#c88e62}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fe{background-color:#a86637}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3ff{background-color:#60463a}";
@@ -19429,7 +19438,7 @@ function PickerRootElement(_ref2) {
     width: width + "px"
   };
   return createElement("aside", {
-    className: clsx('EmojiPickerReact', 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === Theme.DARK, _clsx)),
+    className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === Theme.DARK, _clsx)),
     ref: PickerMainRef,
     style: style
   }, children);