emoji-picker-react 4.2.0 → 4.4.0-rc.1

package/README.md

@@ -43,22 +43,22 @@ function App() {
 
 The following props are accepted by them picker:
 
-| Prop                | Type       | Default    | Description                                                                                                       |
-| ------------------- | ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------- |
-| onEmojiClick        | function   |            | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter. |
-| autoFocusSearch     | boolean    | `true`     | Controls the auto focus of the search input.                                                                      |
-| Theme               | string     | `light`    | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`.                                 |
-| emojiStyle          | string     | `apple`    | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`.              |
-| defaultSkinTone     | string     | `neutral`  | Controls the default skin tone.                                                                                   |
-| lazyLoadEmojis      | boolean    | `false`    | Controls whether the emojis are loaded lazily or not.                                                             |
-| previewConfig       | object     | `{}`       | Controls the preview of the emoji. See below for more information.                                                |
-| searchPlaceholder   | string     | `Search`   | Controls the placeholder of the search input.                                                                     |
-| suggestedEmojisMode | string     | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`.                                  |
-| skinTonesDisabled   | boolean    | `false`    | Controls whether the skin tones are disabled or not.                                                              |
-| `width`             | number     | `350`      | Controls the width of the picker.                                                                                 |
-| emojiVersion        | `string`   | -          | Allows displaying emojis up to a certain version for compatibility.                                               |
-| `height`            | number     | `450`      | Controls the height of the picker.                                                                                |
-| getEmojiUrl         | `Function` | -          | Allows to customize the emoji url and provide your own image host.                                                |
+| Prop                | Type              | Default    | Description                                                                                                                                |
+| ------------------- | ----------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| onEmojiClick        | function          |            | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter.                          |
+| autoFocusSearch     | boolean           | `true`     | Controls the auto focus of the search input.                                                                                               |
+| Theme               | string            | `light`    | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`.                                                          |
+| emojiStyle          | string            | `apple`    | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`.                                       |
+| defaultSkinTone     | string            | `neutral`  | Controls the default skin tone.                                                                                                            |
+| lazyLoadEmojis      | boolean           | `false`    | Controls whether the emojis are loaded lazily or not.                                                                                      |
+| previewConfig       | object            | `{}`       | Controls the preview of the emoji. See below for more information.                                                                         |
+| searchPlaceholder   | string            | `Search`   | Controls the placeholder of the search input.                                                                                              |
+| suggestedEmojisMode | string            | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`.                                                           |
+| skinTonesDisabled   | boolean           | `false`    | Controls whether the skin tones are disabled or not.                                                                                       |
+| `width`             | `number`/`string` | `350`      | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.   |
+| emojiVersion        | `string`          | -          | Allows displaying emojis up to a certain version for compatibility.                                                                        |
+| `height`            | `number`/`string` | `450`      | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string. |
+| getEmojiUrl         | `Function`        | -          | Allows to customize the emoji url and provide your own image host.                                                                         |
 
 ## Full details
 
@@ -141,12 +141,12 @@ import { SkinTones } from 'emoji-picker-react';
   [
     {
       category: 'suggested',
-      name: 'Recently Used',
+      name: 'Recently Used'
     },
     {
       category: 'smileys_people',
-      name: 'Faces...',
-    },
+      name: 'Faces...'
+    }
   ];
   ```
 
@@ -171,12 +171,16 @@ import { SkinTones } from 'emoji-picker-react';
 
 ## Custom Picker Width and Height
 
-To customize the dimensions of the picker, use the `height` and `width` props:
+To customize the dimensions of the picker, use the `height` and `width` props. You can pass in a number that will be treated as pixel size, or your any accepted css width/height as string.
 
 ```jsx
 <EmojiPicker height={500} width={400} />
 ```
 
+```jsx
+<EmojiPicker height="100%" width="15em" />
+```
+
 ## CSS Variables
 
 The picker can be customized via css variables. The root selector for the picker is `.EmojiPickerReact`, when overriding, make sure to provide a more specific selector.

package/dist/config/config.d.ts

@@ -1,4 +1,5 @@
 import { GetEmojiUrl } from '../components/emoji/Emoji';
+import { DataEmoji } from '../dataUtils/DataTypes';
 import { EmojiClickData, EmojiStyle, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
 import { CategoriesConfig } from './categoryConfig';
 export declare function mergeConfig(userConfig?: PickerConfig): PickerConfigInternal;
@@ -16,9 +17,10 @@ export declare type PickerConfigInternal = {
     suggestedEmojisMode: SuggestionMode;
     lazyLoadEmojis: boolean;
     previewConfig: PreviewConfig;
-    height: number;
-    width: number;
+    height: PickerDimensions;
+    width: PickerDimensions;
     getEmojiUrl: GetEmojiUrl;
+    showEmoji: undefined | ((emoji: DataEmoji) => boolean);
 };
 export declare type PreviewConfig = {
     defaultEmoji: string;
@@ -29,4 +31,5 @@ declare type ConfigExternal = {
     previewConfig: Partial<PreviewConfig>;
 } & Omit<PickerConfigInternal, 'previewConfig'>;
 export declare type PickerConfig = Partial<ConfigExternal>;
+export declare type PickerDimensions = string | number;
 export {};

package/dist/config/useConfig.d.ts

@@ -1,6 +1,7 @@
+import { DataEmoji } from '../dataUtils/DataTypes';
 import { EmojiClickData, EmojiStyle, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
 import { CategoriesConfig } from './categoryConfig';
-import { PreviewConfig } from './config';
+import { PickerDimensions, PreviewConfig } from './config';
 export declare function useSearchPlaceHolderConfig(): string;
 export declare function useDefaultSkinToneConfig(): SkinTones;
 export declare function useSkinTonesDisabledConfig(): boolean;
@@ -13,8 +14,9 @@ export declare function useThemeConfig(): Theme;
 export declare function useSuggestedEmojisModeConfig(): SuggestionMode;
 export declare function useLazyLoadEmojisConfig(): boolean;
 export declare function usePickerSizeConfig(): {
-    height: number;
-    width: number;
+    height: PickerDimensions;
+    width: PickerDimensions;
 };
 export declare function useEmojiVersionConfig(): string | null;
 export declare function useGetEmojiUrlConfig(): (unified: string, style: EmojiStyle) => string;
+export declare function useShowEmojiConfig(): undefined | ((emoji: DataEmoji) => boolean);

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

@@ -16799,6 +16799,7 @@ function basePickerConfig() {
     event) {},
     previewConfig: _extends({}, basePreviewConfig),
     searchPlaceHolder: 'Search',
+    showEmoji: undefined,
     skinTonesDisabled: false,
     suggestedEmojisMode: exports.SuggestionMode.FREQUENT,
     theme: exports.Theme.LIGHT,
@@ -16901,8 +16902,8 @@ function usePickerSizeConfig() {
       width = _usePickerConfig12.width;
 
   return {
-    height: height,
-    width: width
+    height: getDimension(height),
+    width: getDimension(width)
   };
 }
 function useEmojiVersionConfig() {
@@ -16917,6 +16918,16 @@ function useGetEmojiUrlConfig() {
 
   return getEmojiUrl;
 }
+function useShowEmojiConfig() {
+  var _usePickerConfig15 = usePickerConfig(),
+      showEmoji = _usePickerConfig15.showEmoji;
+
+  return showEmoji;
+}
+
+function getDimension(dimensionConfig) {
+  return typeof dimensionConfig === 'number' ? dimensionConfig + "px" : dimensionConfig;
+}
 
 var alphaNumericEmojiIndex = {};
 setTimeout(function () {
@@ -16961,24 +16972,37 @@ function useDebouncedState(initialValue, delay) {
   return [state, debouncedSetState];
 }
 
+function isFunction(value) {
+  return typeof value === 'function';
+}
+
 function useDisallowedEmojis() {
   var DisallowedEmojisRef = React.useRef({});
   var emojiVersionConfig = useEmojiVersionConfig();
+  var shouldShowEmoji = useShowEmojiConfig();
   return React.useMemo(function () {
     var emojiVersion = parseFloat("" + emojiVersionConfig);
 
-    if (!emojiVersionConfig || Number.isNaN(emojiVersion)) {
+    if ((!emojiVersionConfig || Number.isNaN(emojiVersion)) && !shouldShowEmoji) {
       return DisallowedEmojisRef.current;
     }
 
     return allEmojis.reduce(function (disallowedEmojis, emoji) {
+      if (isFunction(shouldShowEmoji) && !shouldShowEmoji(emoji)) {
+        disallowEmoji();
+      }
+
       if (addedInNewerVersion(emoji, emojiVersion)) {
-        disallowedEmojis[emojiUnified(emoji)] = true;
+        disallowEmoji();
       }
 
       return disallowedEmojis;
+
+      function disallowEmoji() {
+        disallowedEmojis[emojiUnified(emoji)] = true;
+      }
     }, DisallowedEmojisRef.current);
-  }, [emojiVersionConfig]);
+  }, [emojiVersionConfig, shouldShowEmoji]);
 }
 
 function addedInNewerVersion(emoji, supportedLevel) {
@@ -17985,7 +18009,7 @@ function useFocusCategoryNavigation() {
 function useSetFilterRef() {
   var filterRef = useFilterRef();
   return function setFilter(setter) {
-    if (typeof setter === 'function') {
+    if (isFunction(setter)) {
       return setFilter(setter(filterRef.current));
     }
 
@@ -19392,8 +19416,8 @@ function PickerRootElement(_ref2) {
   useKeyboardNavigation();
   useOnFocus();
   var style = {
-    height: height + "px",
-    width: width + "px"
+    height: height,
+    width: width
   };
   return React.createElement("aside", {
     className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === exports.Theme.DARK, _clsx)),