emoji-picker-react 4.9.3 → 4.10.0

package/README.md

@@ -85,6 +85,7 @@ The following props are accepted by them picker:
 | getEmojiUrl            | `Function`                                             | -          | Allows to customize the emoji url and provide your own image host.                                                                                         |
 | categories             | `Array`                                                | -          | Allows full config over ordering, naming and display of categories.                                                                                        |
 | customEmojis           | `Array<{names: string[], imgUrl: string, id: string}>` | -          | Allows adding custom emojis to the picker.                                                                                                                 |
+| hiddenEmojis           | `string[]`                                             | -          | Controls the emojis that are hidden from the picker.                                                                                                       |
 | reactionsDefaultOpen   | `boolean`                                              | `false`    | Controls whether the reactions picker is on the initial mount instead of the main picker component.                                                        |
 | reactions              | string[]                                               | -          | Controls the reactions to display in the reactions picker. Takes unified emoji ids                                                                         |
 | onReactionClick        | `Function`                                             | -          | Callback function that is called when a reaction is clicked. The function receives the emoji object as a parameter. If not passed, onEmojiClicked is used. |
@@ -212,13 +213,23 @@ import { SkinTones } from 'emoji-picker-react';
 
 - `getEmojiUrl`: `(unified: string, emojiStyle: EmojiStyle) => string` - Allows to customize the emoji url and provide your own image host. The function receives the emoji unified and the emoji style as parameters. The function should return the url of the emoji image.
 
-## Custom Emojis
+## customEmojis - Custom Emojis
 
 The customEmojis prop allows you to add custom emojis to the picker. The custom emojis prop takes an array of custom emojis, each custom emoji has three keys:
 
-id: Unique identifier for each of the custom emojis
-names: an array of string identifiers, will be used both for display, search and indexing.
-imgUrl: URL for the emoji image
+- _id_: Unique identifier for each of the custom emojis
+- _names_: an array of string identifiers, will be used both for display, search and indexing.
+- _imgUrl_: URL for the emoji image
+
+## hiddenEmojis - Excluding certain emojis
+
+The hiddenEmojis prop allows you to hide emojis from the picker. The hidden emojis prop takes an array of emoji unicode names to hide.
+
+For example:
+
+```js
+['1f600', '1f601', '1f602']; // will remove: 😀, 😁, 😂
+```
 
 ### Usage Example
 

package/dist/Stylesheet/stylesheet.d.ts

@@ -1,10 +1,10 @@
 import { Styles } from 'flairup';
 import * as React from 'react';
 export declare const stylesheet: {
-    create: <K extends string>(styles: Partial<{ [k in K]: Partial<Partial<CSSStyleDeclaration> & Partial<{
+    create: <K extends string>(styles: Partial<{ [k in K]: Partial<Partial<CSSStyleDeclaration>> | Partial<{
         '.'?: string | string[] | undefined;
         '--'?: any;
-    }>>; }> | Partial<{}>) => Record<Exclude<Exclude<K, any>, any>, Set<string>> & Record<never, Set<string>>;
+    }>; }> | Partial<{}>) => Record<Exclude<Exclude<K, any>, any>, Set<string>> & Record<never, Set<string>>;
     getStyle: () => string;
     isApplied: () => boolean;
 };
@@ -13,17 +13,11 @@ export declare const PickerStyleTag: React.NamedExoticComponent<object>;
 export declare const commonInteractionStyles: Record<never, Set<string>>;
 export declare function darkMode(key: string, value: Styles): {
     '.epr-dark-theme': {
-        [x: string]: Partial<Partial<CSSStyleDeclaration> & Partial<{
-            '.'?: string | string[] | undefined;
-            '--'?: any;
-        }>>;
+        [x: string]: Partial<Partial<CSSStyleDeclaration>>;
     };
     '.epr-auto-theme': {
         [x: string]: {
-            '@media (prefers-color-scheme: dark)': Partial<Partial<CSSStyleDeclaration> & Partial<{
-                '.'?: string | string[] | undefined;
-                '--'?: any;
-            }>>;
+            '@media (prefers-color-scheme: dark)': Partial<Partial<CSSStyleDeclaration>>;
         };
     };
 };

package/dist/config/config.d.ts

@@ -36,6 +36,7 @@ export declare type PickerConfigInternal = {
     reactions: string[];
     open: boolean;
     allowExpandReactions: boolean;
+    hiddenEmojis: string[];
 };
 export declare type PreviewConfig = {
     defaultEmoji: string;

package/dist/emoji-picker-react.cjs.development.js

@@ -166,7 +166,6 @@ var commonInteractionStyles = /*#__PURE__*/stylesheet.create({
         opacity: '1',
         backgroundPositionY: 'var(--epr-category-navigation-button-size)'
       },
-      // @ts-ignore
       '&.epr-active': {
         opacity: '1',
         backgroundPositionY: 'var(--epr-category-navigation-button-size)'
@@ -16811,6 +16810,9 @@ function mergeConfig(userConfig) {
   var categories = mergeCategoriesConfig(userConfig.categories, {
     suggestionMode: config.suggestedEmojisMode
   });
+  config.hiddenEmojis.forEach(function (emoji) {
+    config.unicodeToHide.add(emoji);
+  });
   setCustomEmojis((_config$customEmojis = config.customEmojis) != null ? _config$customEmojis : []);
   var skinTonePickerLocation = config.searchDisabled ? exports.SkinTonePickerLocation.PREVIEW : config.skinTonePickerLocation;
   return _extends({}, config, {
@@ -16845,7 +16847,8 @@ function basePickerConfig() {
     reactionsDefaultOpen: false,
     reactions: DEFAULT_REACTIONS,
     open: true,
-    allowExpandReactions: true
+    allowExpandReactions: true,
+    hiddenEmojis: []
   };
 }
 var basePreviewConfig = {
@@ -18197,7 +18200,6 @@ var styles = /*#__PURE__*/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'
@@ -18297,7 +18299,7 @@ var styles = /*#__PURE__*/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'
@@ -19093,7 +19095,6 @@ var styles$5 = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
     ':hover': {
       color: 'var(--epr-highlight-color)',
       backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
-      // @ts-ignore
       ':after': {
         backgroundPositionY: '-20px'
       }
@@ -19101,7 +19102,6 @@ var styles$5 = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
     ':focus': {
       color: 'var(--epr-highlight-color)',
       backgroundColor: 'var(--epr-hover-bg-color-reduced-opacity)',
-      // @ts-ignore
       ':after': {
         backgroundPositionY: '-40px'
       }
@@ -19238,7 +19238,7 @@ var styles$7 = /*#__PURE__*/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)',
@@ -19765,7 +19765,6 @@ var styles$c = /*#__PURE__*/stylesheet.create({
     ':focus': {
       boxShadow: '0 0 0 3px var(--epr-focus-bg-color)'
     },
-    // @ts-ignore
     '&.epr-tone-neutral': {
       backgroundColor: '#ffd225'
     },
@@ -19885,10 +19884,9 @@ var styles$d = /*#__PURE__*/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',
@@ -19905,7 +19903,6 @@ var styles$d = /*#__PURE__*/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',
@@ -20112,7 +20109,6 @@ var styles$f = /*#__PURE__*/stylesheet.create( /*#__PURE__*/_extends({
       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)'
     },