emoji-picker-react 4.9.3 → 4.10.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.9.3",
+  "version": "4.10.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -64,6 +64,8 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.18.10",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@size-limit/preset-small-lib": "^8.0.1",
     "@storybook/addon-essentials": "^8.1.1",
     "@storybook/addon-info": "^5.3.21",
@@ -98,11 +100,9 @@
     "tiny-invariant": "^1.2.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.4",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1"
+    "typescript": "^4.7.4"
   },
   "dependencies": {
-    "flairup": "0.0.38"
+    "flairup": "0.0.39"
   }
 }

package/src/Stylesheet/stylesheet.tsx

@@ -65,7 +65,6 @@ export const commonInteractionStyles = stylesheet.create({
         opacity: '1',
         backgroundPositionY: 'var(--epr-category-navigation-button-size)'
       },
-      // @ts-ignore
       '&.epr-active': {
         opacity: '1',
         backgroundPositionY: 'var(--epr-category-navigation-button-size)'

package/src/components/Reactions/BtnPlus.tsx

@@ -47,7 +47,6 @@ const styles = stylesheet.create({
     ':hover': {
       color: 'var(--epr-highlight-color)',
       backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
-      // @ts-ignore
       ':after': {
         backgroundPositionY: '-20px'
       }
@@ -55,7 +54,6 @@ const styles = stylesheet.create({
     ':focus': {
       color: 'var(--epr-highlight-color)',
       backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
-      // @ts-ignore
       ':after': {
         backgroundPositionY: '-40px'
       }

package/src/components/body/EmojiCategory.tsx

@@ -64,7 +64,7 @@ const styles = stylesheet.create({
   label: {
     '.': ClassNames.label,
     alignItems: 'center',
-    // @ts-expect-error - backdropFilter is a valid CSS property
+    // @ts-ignore - backdropFilter is not recognized.
     backdropFilter: 'blur(3px)',
     backgroundColor: 'var(--epr-category-label-bg-color)',
     color: 'var(--epr-category-label-text-color)',

package/src/components/header/SkinTonePicker/BtnSkinToneVariation.tsx

@@ -57,7 +57,6 @@ const styles = stylesheet.create({
     ':focus': {
       boxShadow: '0 0 0 3px var(--epr-focus-bg-color)'
     },
-    // @ts-ignore
     '&.epr-tone-neutral': {
       backgroundColor: '#ffd225'
     },

package/src/components/header/SkinTonePicker/SkinTonePicker.tsx

@@ -4,7 +4,10 @@ import * as React from 'react';
 
 import { ClassNames } from '../../../DomUtils/classNames';
 import { stylesheet } from '../../../Stylesheet/stylesheet';
-import {useOnSkinToneChangeConfig, useSkinTonesDisabledConfig} from '../../../config/useConfig';
+import {
+  useOnSkinToneChangeConfig,
+  useSkinTonesDisabledConfig
+} from '../../../config/useConfig';
 import skinToneVariations from '../../../data/skinToneVariations';
 import { useCloseAllOpenToggles } from '../../../hooks/useCloseAllOpenToggles';
 import { useFocusSearchInput } from '../../../hooks/useFocus';
@@ -133,10 +136,9 @@ const styles = stylesheet.create({
     boxShadow: '0px 0 7px var(--epr-picker-border-color)'
   },
   open: {
-    // @ts-ignore
+    // @ts-ignore - backdropFilter is not recognized.
     backdropFilter: 'blur(5px)',
     background: 'var(--epr-skin-tone-picker-menu-color)',
-    // @ts-ignore
     '.epr-active:after': {
       content: '',
       position: 'absolute',
@@ -153,7 +155,6 @@ const styles = stylesheet.create({
     position: 'relative',
     width: 'var(--epr-skin-tone-size)',
     height: 'var(--epr-skin-tone-size)',
-    // @ts-ignore
     '> button': {
       width: 'var(--epr-skin-tone-size)',
       display: 'block',

package/src/components/main/PickerMain.tsx

@@ -112,7 +112,6 @@ const styles = stylesheet.create({
     backgroundColor: 'var(--epr-bg-color)',
     overflow: 'hidden',
     transition: 'all 0.3s ease-in-out, background-color 0.1s ease-in-out',
-    // @ts-expect-error - need to work on this
     '*': {
       boxSizing: 'border-box',
       fontFamily: 'sans-serif'
@@ -227,7 +226,7 @@ const styles = stylesheet.create({
     height: '50px',
     display: 'inline-flex',
     backgroundColor: 'var(--epr-reactions-bg-color)',
-    // @ts-expect-error - need to work on this
+    // @ts-ignore - backdropFilter is not recognized.
     backdropFilter: 'blur(8px)',
     '--': {
       '--epr-picker-border-radius': '50px'

package/src/components/navigation/CategoryButton.tsx

@@ -88,7 +88,6 @@ const styles = stylesheet.create({
       border: '2px solid var(--epr-category-icon-active-color)',
       borderRadius: '50%'
     },
-    // @ts-ignore
     '&.epr-icn-suggested': {
       backgroundPositionX:
         'calc(var(--epr-category-navigation-button-size) * -8)'

package/src/config/config.ts

@@ -48,6 +48,10 @@ export function mergeConfig(
     suggestionMode: config.suggestedEmojisMode
   });
 
+  config.hiddenEmojis.forEach(emoji => {
+    config.unicodeToHide.add(emoji);
+  });
+
   setCustomEmojis(config.customEmojis ?? []);
 
   const skinTonePickerLocation = config.searchDisabled
@@ -90,7 +94,8 @@ export function basePickerConfig(): PickerConfigInternal {
     reactionsDefaultOpen: false,
     reactions: DEFAULT_REACTIONS,
     open: true,
-    allowExpandReactions: true
+    allowExpandReactions: true,
+    hiddenEmojis: []
   };
 }
 
@@ -120,6 +125,7 @@ export type PickerConfigInternal = {
   reactions: string[];
   open: boolean;
   allowExpandReactions: boolean;
+  hiddenEmojis: string[];
 };
 
 export type PreviewConfig = {