emoji-picker-react 4.0.4 → 4.0.6

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { PickerConfig } from './config/config';
 export { ExportedEmoji as Emoji } from './components/emoji/ExportedEmoji';
-export { EmojiStyle, SkinTones, Theme, Categories, EmojiClickData } from './types/exposedTypes';
+export { EmojiStyle, SkinTones, Theme, Categories, EmojiClickData, SuggestionMode } from './types/exposedTypes';
 export interface Props extends PickerConfig {
 }
 export default function EmojiPicker(props: Props): JSX.Element;

package/package.json

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

package/src/components/header/Search.tsx

@@ -48,6 +48,7 @@ export function Search() {
       <button
         className={clsx('epr-btn-clear-search', 'epr-visible-on-search-only')}
         onClick={clearSearch}
+        type="button"
       />
     </Relative>
   );
@@ -56,7 +57,7 @@ export function Search() {
 function CssSearch({ value }: { value: undefined | string }) {
   return value ? (
     <style>{`
-        .EmojiPickerReact button.epr-emoji:not([data-full-name*="${value}"]) {
+        .EmojiPickerReact button.epr-emoji:not([data-full-name*="${value.toLowerCase()}"]) {
           display: none;
         }
   `}</style>

package/src/components/header/SkinTonePicker.tsx

@@ -40,6 +40,7 @@ export function SkinTonePicker() {
           const active = skinToneVariation === activeSkinTone;
           return (
             <button
+              type="button"
               style={{
                 transform: clsx(
                   `translateX(-${i * (isOpen ? 28 : 0)}px)`,

package/src/components/navigation/CategoryNavigation.tsx

@@ -27,6 +27,7 @@ export function CategoryNavigation() {
         const category = categoryFromCategoryConfig(categoryConfig);
         return (
           <button
+            type="button"
             className={clsx('epr-cat-btn', `epr-icn-${category}`, {
               [ClassNames.active]: category === activeCategory
             })}

package/src/dataUtils/suggested.ts

@@ -14,10 +14,10 @@ type SuggestedItem = {
 type Suggested = SuggestedItem[];
 
 export function getsuggested(mode?: SuggestionMode): Suggested {
-  if (!window?.localStorage) {
-    return [];
-  }
   try {
+    if (!window?.localStorage) {
+      return [];
+    }
     const recent = JSON.parse(
       window?.localStorage.getItem(SUGGESTED_LS_KEY) ?? '[]'
     ) as Suggested;

package/src/hooks/useFilter.ts

@@ -96,7 +96,7 @@ function useApplySearch() {
 
   return function applySearch(searchTerm: string) {
     requestAnimationFrame(() => {
-      setSearchTerm(searchTerm).then(() => {
+      setSearchTerm(searchTerm.toLowerCase()).then(() => {
         scrollTo(PickerMainRef.current, 0);
       });
     });
@@ -128,7 +128,8 @@ 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.toLowerCase());
 }
 
 function isEmojiFilteredBySearchTerm(

package/src/index.tsx

@@ -11,7 +11,8 @@ export {
   SkinTones,
   Theme,
   Categories,
-  EmojiClickData
+  EmojiClickData,
+  SuggestionMode
 } from './types/exposedTypes';
 
 export interface Props extends PickerConfig {}