emoji-picker-react 4.13.1 → 4.13.3

package/dist/globals/doesBrowserSupportCssHas.d.ts

@@ -0,0 +1,2 @@
+declare const browserSupportsCssHas: boolean;
+export default browserSupportsCssHas;

package/package.json

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

package/src/components/header/Search/Search.tsx

@@ -64,9 +64,7 @@ export function Search() {
         placeholder={placeholder}
         onChange={event => {
           setInc(inc + 1);
-          setTimeout(() => {
-            onChange(event?.target?.value ?? value);
-          });
+          onChange(event?.target?.value ?? value);
         }}
         ref={SearchInputRef}
       />

package/src/config/config.ts

@@ -4,7 +4,7 @@ import { DEFAULT_REACTIONS } from '../components/Reactions/DEFAULT_REACTIONS';
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import {
   setCustomEmojis,
-  emojiUrlByUnified
+  emojiUrlByUnified,
 } from '../dataUtils/emojiSelectors';
 import {
   EmojiClickData,
@@ -12,13 +12,13 @@ import {
   SkinTonePickerLocation,
   SkinTones,
   SuggestionMode,
-  Theme
+  Theme,
 } from '../types/exposedTypes';
 
 import {
   CategoriesConfig,
   baseCategoriesConfig,
-  mergeCategoriesConfig
+  mergeCategoriesConfig,
 } from './categoryConfig';
 import { CustomEmoji } from './customEmojiConfig';
 
@@ -45,10 +45,10 @@ export function mergeConfig(
   const config = Object.assign(base, userConfig);
 
   const categories = mergeCategoriesConfig(userConfig.categories, {
-    suggestionMode: config.suggestedEmojisMode
+    suggestionMode: config.suggestedEmojisMode,
   });
 
-  config.hiddenEmojis.forEach(emoji => {
+  config.hiddenEmojis.forEach((emoji) => {
     config.unicodeToHide.add(emoji);
   });
 
@@ -62,7 +62,7 @@ export function mergeConfig(
     ...config,
     categories,
     previewConfig,
-    skinTonePickerLocation
+    skinTonePickerLocation,
   };
 }
 
@@ -79,7 +79,7 @@ export function basePickerConfig(): PickerConfigInternal {
     height: 450,
     lazyLoadEmojis: false,
     previewConfig: {
-      ...basePreviewConfig
+      ...basePreviewConfig,
     },
     searchDisabled: false,
     searchPlaceHolder: DEFAULT_SEARCH_PLACEHOLDER,
@@ -95,7 +95,7 @@ export function basePickerConfig(): PickerConfigInternal {
     reactions: DEFAULT_REACTIONS,
     open: true,
     allowExpandReactions: true,
-    hiddenEmojis: []
+    hiddenEmojis: [],
   };
 }
 
@@ -137,7 +137,7 @@ export type PreviewConfig = {
 const basePreviewConfig: PreviewConfig = {
   defaultEmoji: '1f60a',
   defaultCaption: "What's your mood?",
-  showPreview: true
+  showPreview: true,
 };
 
 type ConfigExternal = {
@@ -154,7 +154,7 @@ export type PickerDimensions = string | number;
 export type MouseDownEvent = (
   emoji: EmojiClickData,
   event: MouseEvent,
-  api: OnEmojiClickApi
+  api?: OnEmojiClickApi
 ) => void;
 export type OnSkinToneChange = (emoji: SkinTones) => void;
 

package/src/globals/doesBrowserSupportCssHas.ts

@@ -0,0 +1,16 @@
+function doesBrowserSupportCssHas(): boolean {
+  // if env is not browser:
+  if (typeof window === 'undefined' || typeof window.CSS === 'undefined') {
+    return false;
+  }
+
+  try {
+    return CSS.supports('selector(:has(*))');
+  } catch (e) {
+    return false;
+  }
+}
+
+const browserSupportsCssHas = doesBrowserSupportCssHas();
+
+export default browserSupportsCssHas;

package/src/hooks/useFilter.ts

@@ -11,6 +11,7 @@ import {
 import { useSearchResultsConfig } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { emojiNames } from '../dataUtils/emojiSelectors';
+import doesBrowserSupportCssHas from '../globals/doesBrowserSupportCssHas';
 
 import { useFocusSearchInput } from './useFocus';
 
@@ -77,28 +78,34 @@ export function useFilter() {
   };
 
   function onChange(inputValue: string) {
-    const filter = filterRef.current;
+    if (doesBrowserSupportCssHas) {
+      return;
+    }
 
-    const nextValue = inputValue.toLowerCase();
+    setTimeout(() => {
+      const filter = filterRef.current;
 
-    if (filter?.[nextValue] || nextValue.length <= 1) {
-      return applySearch(nextValue);
-    }
+      const nextValue = inputValue.toLowerCase();
 
-    const longestMatch = findLongestMatch(nextValue, filter);
+      if (filter?.[nextValue] || nextValue.length <= 1) {
+        return applySearch(nextValue);
+      }
 
-    if (!longestMatch) {
-      // Can we even get here?
-      // If so, we need to search among all emojis
-      return applySearch(nextValue);
-    }
+      const longestMatch = findLongestMatch(nextValue, filter);
 
-    setFilterRef(current =>
-      Object.assign(current, {
-        [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue)
-      })
-    );
-    applySearch(nextValue);
+      if (!longestMatch) {
+        // Can we even get here?
+        // If so, we need to search among all emojis
+        return applySearch(nextValue);
+      }
+
+      setFilterRef(current =>
+        Object.assign(current, {
+          [nextValue]: filterEmojiObjectByKeyword(longestMatch, nextValue)
+        })
+      );
+      applySearch(nextValue);
+    });
   }
 }