emoji-picker-react 4.5.16 → 4.6.0

package/README.md

@@ -72,9 +72,11 @@ The following props are accepted by them picker:
 | skinTonesDisabled      | boolean                                                | `false`    | Controls whether the skin tones are disabled or not.                                                                                       |
 | searchDisabled         | boolean                                                | `false`    | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component.                |
 | skinTonePickerLocation | string                                                 | `SEARCH`   | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`.                                                 |
-| `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.                                                                        |
+| `className`            | `string`                                               | -          | Adds a class name to the root element of the picker. |
+| `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.   |
 | `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. |
+| `style`                | `React.CSSProperties`                                  | `{}`       | Adds inline style to the root element of the 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.                                                                                                 |

package/dist/config/config.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import { EmojiClickData, EmojiStyle, SkinTonePickerLocation, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
 import { CategoriesConfig } from './categoryConfig';
@@ -22,8 +23,10 @@ export declare type PickerConfigInternal = {
     suggestedEmojisMode: SuggestionMode;
     lazyLoadEmojis: boolean;
     previewConfig: PreviewConfig;
+    className: string;
     height: PickerDimensions;
     width: PickerDimensions;
+    style: React.CSSProperties;
     getEmojiUrl: GetEmojiUrl;
     searchDisabled: boolean;
     skinTonePickerLocation: SkinTonePickerLocation;

package/dist/config/useConfig.d.ts

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import { EmojiClickData, EmojiStyle, SkinTonePickerLocation, SkinTones, SuggestionMode, Theme } from '../types/exposedTypes';
 import { CategoriesConfig } from './categoryConfig';
-import { PickerDimensions, PreviewConfig } from './config';
+import { PreviewConfig } from './config';
 import { CustomEmoji } from './customEmojiConfig';
 export declare function useSearchPlaceHolderConfig(): string;
 export declare function useDefaultSkinToneConfig(): SkinTones;
@@ -14,10 +15,8 @@ export declare function usePreviewConfig(): PreviewConfig;
 export declare function useThemeConfig(): Theme;
 export declare function useSuggestedEmojisModeConfig(): SuggestionMode;
 export declare function useLazyLoadEmojisConfig(): boolean;
-export declare function usePickerSizeConfig(): {
-    height: PickerDimensions;
-    width: PickerDimensions;
-};
+export declare function useClassNameConfig(): string;
+export declare function useStyleConfig(): React.CSSProperties;
 export declare function useEmojiVersionConfig(): string | null;
 export declare function useSearchDisabledConfig(): boolean;
 export declare function useSkinTonePickerLocationConfig(): SkinTonePickerLocation;

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

@@ -16916,6 +16916,7 @@ function basePickerConfig() {
   return {
     autoFocusSearch: true,
     categories: baseCategoriesConfig(),
+    className: '',
     customEmojis: [],
     defaultSkinTone: exports.SkinTones.NEUTRAL,
     emojiStyle: exports.EmojiStyle.APPLE,
@@ -16929,6 +16930,7 @@ function basePickerConfig() {
     searchPlaceholder: DEFAULT_SEARCH_PLACEHOLDER,
     skinTonePickerLocation: exports.SkinTonePickerLocation.SEARCH,
     skinTonesDisabled: false,
+    style: {},
     suggestedEmojisMode: exports.SuggestionMode.FREQUENT,
     theme: exports.Theme.LIGHT,
     unicodeToHide: new Set(KNOWN_FAILING_EMOJIS),
@@ -17070,43 +17072,50 @@ function useLazyLoadEmojisConfig() {
 
   return lazyLoadEmojis;
 }
-function usePickerSizeConfig() {
+function useClassNameConfig() {
   var _usePickerConfig12 = usePickerConfig(),
-      height = _usePickerConfig12.height,
-      width = _usePickerConfig12.width;
+      className = _usePickerConfig12.className;
 
-  return {
+  return className;
+}
+function useStyleConfig() {
+  var _usePickerConfig13 = usePickerConfig(),
+      height = _usePickerConfig13.height,
+      width = _usePickerConfig13.width,
+      style = _usePickerConfig13.style;
+
+  return _extends({
     height: getDimension(height),
     width: getDimension(width)
-  };
+  }, style);
 }
 function useEmojiVersionConfig() {
-  var _usePickerConfig13 = usePickerConfig(),
-      emojiVersion = _usePickerConfig13.emojiVersion;
+  var _usePickerConfig14 = usePickerConfig(),
+      emojiVersion = _usePickerConfig14.emojiVersion;
 
   return emojiVersion;
 }
 function useSearchDisabledConfig() {
-  var _usePickerConfig14 = usePickerConfig(),
-      searchDisabled = _usePickerConfig14.searchDisabled;
+  var _usePickerConfig15 = usePickerConfig(),
+      searchDisabled = _usePickerConfig15.searchDisabled;
 
   return searchDisabled;
 }
 function useSkinTonePickerLocationConfig() {
-  var _usePickerConfig15 = usePickerConfig(),
-      skinTonePickerLocation = _usePickerConfig15.skinTonePickerLocation;
+  var _usePickerConfig16 = usePickerConfig(),
+      skinTonePickerLocation = _usePickerConfig16.skinTonePickerLocation;
 
   return skinTonePickerLocation;
 }
 function useUnicodeToHide() {
-  var _usePickerConfig16 = usePickerConfig(),
-      unicodeToHide = _usePickerConfig16.unicodeToHide;
+  var _usePickerConfig17 = usePickerConfig(),
+      unicodeToHide = _usePickerConfig17.unicodeToHide;
 
   return unicodeToHide;
 }
 function useGetEmojiUrlConfig() {
-  var _usePickerConfig17 = usePickerConfig(),
-      getEmojiUrl = _usePickerConfig17.getEmojiUrl;
+  var _usePickerConfig18 = usePickerConfig(),
+      getEmojiUrl = _usePickerConfig18.getEmojiUrl;
 
   return getEmojiUrl;
 }
@@ -19814,19 +19823,12 @@ function PickerRootElement(_ref2) {
   var theme = useThemeConfig();
   var searchModeActive = useIsSearchMode();
   var PickerMainRef = usePickerMainRef();
-
-  var _usePickerSizeConfig = usePickerSizeConfig(),
-      height = _usePickerSizeConfig.height,
-      width = _usePickerSizeConfig.width;
-
+  var className = useClassNameConfig();
+  var style = useStyleConfig();
   useKeyboardNavigation();
   useOnFocus();
-  var style = {
-    height: height,
-    width: width
-  };
   return React.createElement("aside", {
-    className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx[ClassNames.darkTheme] = theme === exports.Theme.DARK, _clsx[ClassNames.autoTheme] = theme === exports.Theme.AUTO, _clsx)),
+    className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx[ClassNames.darkTheme] = theme === exports.Theme.DARK, _clsx[ClassNames.autoTheme] = theme === exports.Theme.AUTO, _clsx), className),
     ref: PickerMainRef,
     style: style
   }, children);
@@ -19842,7 +19844,7 @@ var EmojiPickerReact = /*#__PURE__*/React.memo(EmojiPicker, function (prev, next
 
   var prevCustomEmojis = (_prev$customEmojis = prev.customEmojis) != null ? _prev$customEmojis : [];
   var nextCustomEmojis = (_next$customEmojis = next.customEmojis) != null ? _next$customEmojis : [];
-  return prev.emojiVersion === next.emojiVersion && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.height === next.height && prev.width === next.width && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
+  return prev.emojiVersion === next.emojiVersion && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
 });
 
 var ErrorBoundary = /*#__PURE__*/function (_React$Component) {