emoji-picker-react 4.1.0 → 4.1.1

package/package.json

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

package/src/DomUtils/classNames.ts

@@ -10,9 +10,11 @@ export 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 function asSelectors(...classNames: ClassNames[]): string {
-  return classNames.map(c => `.${c}`).join('');
+  return classNames.map((c) => `.${c}`).join('');
 }

package/src/components/body/EmojiList.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { ClassNames } from '../../DomUtils/classNames';
 import {
   Categories,
   CategoryConfig,
@@ -28,7 +29,7 @@ export function EmojiList() {
   const categories = useCategoriesConfig();
 
   return (
-    <ul className="epr-emoji-list">
+    <ul className={ClassNames.emojiList}>
       {categories.map((categoryConfig, index) => {
         const category = categoryFromCategoryConfig(categoryConfig);
 

package/src/components/header/Search.tsx

@@ -2,15 +2,16 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { useState } from 'react';
 
+import { asSelectors, ClassNames } from '../../DomUtils/classNames';
 import {
   useAutoFocusSearchConfig,
-  useSearchPlaceHolderConfig
+  useSearchPlaceHolderConfig,
 } from '../../config/useConfig';
 import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
 import {
   getNormalizedSearchTerm,
   useClearSearch,
-  useFilter
+  useFilter,
 } from '../../hooks/useFilter';
 import Relative from '../Layout/Relative';
 import { Button } from '../atoms/Button';
@@ -41,7 +42,7 @@ export function Search() {
         className="epr-search"
         type="text"
         placeholder={placeholder}
-        onChange={event => {
+        onChange={(event) => {
           setInc(inc + 1);
           setTimeout(() => {
             onChange(event?.target?.value ?? value);
@@ -60,14 +61,32 @@ export function Search() {
   );
 }
 
+const CSS_SEARCH_SELECTOR = `${asSelectors(
+  ClassNames.emojiPicker
+)} ${asSelectors(ClassNames.emojiList)}`;
+
 function CssSearch({ value }: { value: undefined | string }) {
-  return value ? (
+  if (!value) {
+    return null;
+  }
+
+  const searchQuery = `button[data-full-name*="${getNormalizedSearchTerm(
+    value
+  )}"]`;
+
+  return (
     <style>{`
-        .EmojiPickerReact button.epr-emoji:not([data-full-name*="${getNormalizedSearchTerm(
-          value
-        )}"]) {
-          display: none;
-        }
+        ${CSS_SEARCH_SELECTOR} ${asSelectors(
+      ClassNames.category
+    )}:not(:has(${searchQuery})) {
+        display: none;
+      }
+
+        ${CSS_SEARCH_SELECTOR} button${asSelectors(
+      ClassNames.emoji
+    )}:not(${searchQuery}) {
+        display: none;
+      }
   `}</style>
-  ) : null;
+  );
 }

package/src/components/main/PickerMain.tsx

@@ -38,14 +38,14 @@ function PickerRootElement({ children }: RootProps) {
 
   const style = {
     height: `${height}px`,
-    width: `${width}px`
+    width: `${width}px`,
   };
 
   return (
     <aside
-      className={clsx('EmojiPickerReact', 'epr-main', {
+      className={clsx(ClassNames.emojiPicker, 'epr-main', {
         [ClassNames.searchActive]: searchModeActive,
-        'epr-dark-theme': theme === Theme.DARK
+        'epr-dark-theme': theme === Theme.DARK,
       })}
       ref={PickerMainRef}
       style={style}

package/src/hooks/useFilter.ts

@@ -1,12 +1,12 @@
 import { scrollTo } from '../DomUtils/scrollTo';
 import {
   usePickerMainRef,
-  useSearchInputRef
+  useSearchInputRef,
 } from '../components/context/ElementRefContext';
 import {
   FilterState,
   useFilterRef,
-  useSearchTermState
+  useSearchTermState,
 } from '../components/context/PickerContext';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiNames } from '../dataUtils/emojiSelectors';
@@ -67,7 +67,7 @@ export function useFilter() {
   return {
     onChange,
     searchTerm,
-    SearchInputRef
+    SearchInputRef,
   };
 
   function onChange(inputValue: string) {
@@ -87,9 +87,9 @@ export function useFilter() {
       return applySearch(nextValue);
     }
 
-    setFilterRef(current =>
+    setFilterRef((current) =>
       Object.assign(current, {
-        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue)
+        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue),
       })
     );
     applySearch(nextValue);
@@ -129,14 +129,14 @@ function filterEmojiObjectByKeyword(
 }
 
 function hasMatch(emoji: DataEmoji, keyword: string): boolean {
-  return emojiNames(emoji).some(name => name.includes(keyword));
+  return emojiNames(emoji).some((name) => name.includes(keyword));
 }
 
 export function useIsEmojiFiltered(): (unified: string) => boolean {
   const { current: filter } = useFilterRef();
   const [searchTerm] = useSearchTermState();
 
-  return unified => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
+  return (unified) => isEmojiFilteredBySearchTerm(unified, filter, searchTerm);
 }
 
 function isEmojiFilteredBySearchTerm(
@@ -167,7 +167,7 @@ function findLongestMatch(
 
   const longestMatchingKey = Object.keys(dict)
     .sort((a, b) => b.length - a.length)
-    .find(key => keyword.includes(key));
+    .find((key) => keyword.includes(key));
 
   if (longestMatchingKey) {
     return dict[longestMatchingKey];