emoji-picker-react 4.5.15 → 4.5.16

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.15",
+  "version": "4.5.16",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/header/CssSearch.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+import { ClassNames, asSelectors } from '../../DomUtils/classNames';
+import { getNormalizedSearchTerm } from '../../hooks/useFilter';
+
+const SCOPE = `${asSelectors(ClassNames.emojiPicker)} ${asSelectors(
+  ClassNames.emojiList
+)}`;
+
+const EMOJI_BUTTON = ['button', asSelectors(ClassNames.emoji)].join('');
+const CATEGORY = asSelectors(ClassNames.category);
+
+export function CssSearch({ value }: { value: undefined | string }) {
+  if (!value) {
+    return null;
+  }
+
+  const q = genQuery(value);
+
+  return (
+    <style>{`
+    ${SCOPE} ${EMOJI_BUTTON} {
+      display: none;
+    }
+
+
+    ${SCOPE} ${q} {
+      display: flex;
+    }
+
+    ${SCOPE} ${CATEGORY}:not(:has(${q})) {
+      display: none;
+    }
+  `}</style>
+  );
+}
+
+function genQuery(value: string): string {
+  return [
+    EMOJI_BUTTON,
+    '[data-full-name*="',
+    getNormalizedSearchTerm(value),
+    '"]'
+  ].join('');
+}

package/src/components/header/Search.tsx

@@ -1,18 +1,14 @@
 import * as React from 'react';
 import { useState } from 'react';
 
-import { asSelectors, ClassNames, clsx } from '../../DomUtils/classNames';
+import { clsx } from '../../DomUtils/classNames';
 import {
   useAutoFocusSearchConfig,
   useSearchDisabledConfig,
   useSearchPlaceHolderConfig
 } from '../../config/useConfig';
 import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
-import {
-  getNormalizedSearchTerm,
-  useClearSearch,
-  useFilter
-} from '../../hooks/useFilter';
+import { useClearSearch, useFilter } from '../../hooks/useFilter';
 import { useIsSkinToneInSearch } from '../../hooks/useShouldShowSkinTonePicker';
 import Flex from '../Layout/Flex';
 import Relative from '../Layout/Relative';
@@ -20,6 +16,7 @@ import { Button } from '../atoms/Button';
 import { useSearchInputRef } from '../context/ElementRefContext';
 
 import './Search.css';
+import { CssSearch } from './CssSearch';
 import { SkinTonePicker } from './SkinTonePicker';
 
 export function SearchContainer() {
@@ -62,7 +59,7 @@ export function Search() {
         onFocus={closeAllOpenToggles}
         className="epr-search"
         type="text"
-        aria-controls='epr-search-id'
+        aria-controls="epr-search-id"
         placeholder={placeholder}
         onChange={event => {
           setInc(inc + 1);
@@ -74,11 +71,14 @@ export function Search() {
       />
       {searchTerm ? (
         <div
-          role='status'
-          className={clsx('epr-status-search-results', 'epr-status-visually-hidden')}
-          aria-live='polite'
-          id='epr-search-id'
-          aria-atomic='true'
+          role="status"
+          className={clsx(
+            'epr-status-search-results',
+            'epr-status-visually-hidden'
+          )}
+          aria-live="polite"
+          id="epr-search-id"
+          aria-atomic="true"
         >
           {statusSearchResults}
         </div>
@@ -93,33 +93,3 @@ export function Search() {
     </Relative>
   );
 }
-
-const CSS_SEARCH_SELECTOR = `${asSelectors(
-  ClassNames.emojiPicker
-)} ${asSelectors(ClassNames.emojiList)}`;
-
-function CssSearch({ value }: { value: undefined | string }) {
-  if (!value) {
-    return null;
-  }
-
-  const searchQuery = `button[data-full-name*="${getNormalizedSearchTerm(
-    value
-  )}"]`;
-
-  return (
-    <style>{`
-        ${CSS_SEARCH_SELECTOR} ${asSelectors(
-      ClassNames.category
-    )}:not(:has(${searchQuery})) {
-        display: none;
-      }
-
-        ${CSS_SEARCH_SELECTOR} button${asSelectors(
-      ClassNames.emoji
-    )}:not(${searchQuery}) {
-        display: none;
-      }
-  `}</style>
-  );
-}