emoji-picker-react 4.5.15 → 4.5.16

package/dist/components/header/CssSearch.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function CssSearch({ value }: {
+    value: undefined | string;
+}): JSX.Element | null;

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

@@ -19225,6 +19225,24 @@ function CategoryNavigation() {
   }));
 }
 
+var SCOPE = /*#__PURE__*/asSelectors(ClassNames.emojiPicker) + " " + /*#__PURE__*/asSelectors(ClassNames.emojiList);
+var EMOJI_BUTTON = /*#__PURE__*/['button', asSelectors(ClassNames.emoji)].join('');
+var CATEGORY = /*#__PURE__*/asSelectors(ClassNames.category);
+function CssSearch(_ref) {
+  var value = _ref.value;
+
+  if (!value) {
+    return null;
+  }
+
+  var q = genQuery(value);
+  return React.createElement("style", null, "\n    " + SCOPE + " " + EMOJI_BUTTON + " {\n      display: none;\n    }\n\n\n    " + SCOPE + " " + q + " {\n      display: flex;\n    }\n\n    " + SCOPE + " " + CATEGORY + ":not(:has(" + q + ")) {\n      display: none;\n    }\n  ");
+}
+
+function genQuery(value) {
+  return [EMOJI_BUTTON, '[data-full-name*="', getNormalizedSearchTerm(value), '"]'].join('');
+}
+
 function SearchContainer() {
   var searchDisabled = useSearchDisabledConfig();
   var isSkinToneInSearch = useIsSkinToneInSearch();
@@ -19266,7 +19284,7 @@ function Search() {
     onFocus: closeAllOpenToggles,
     className: "epr-search",
     type: "text",
-    "aria-controls": 'epr-search-id',
+    "aria-controls": "epr-search-id",
     placeholder: placeholder,
     onChange: function onChange(event) {
       setInc(inc + 1);
@@ -19278,11 +19296,11 @@ function Search() {
     },
     ref: SearchInputRef
   }), searchTerm ? React.createElement("div", {
-    role: 'status',
+    role: "status",
     className: clsx('epr-status-search-results', 'epr-status-visually-hidden'),
-    "aria-live": 'polite',
-    id: 'epr-search-id',
-    "aria-atomic": 'true'
+    "aria-live": "polite",
+    id: "epr-search-id",
+    "aria-atomic": "true"
   }, statusSearchResults) : null, React.createElement("div", {
     className: "epr-icn-search"
   }), React.createElement(Button, {
@@ -19292,18 +19310,6 @@ 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;
-
-  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 Header() {
   return React.createElement(Relative, {