emoji-picker-react 4.5.16 → 4.6.0

package/package.json

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

package/src/EmojiPickerReact.tsx

@@ -39,8 +39,10 @@ export default React.memo(EmojiPicker, (prev, next) => {
     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

package/src/components/main/PickerMain.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { ClassNames, clsx } from '../../DomUtils/classNames';
-import { usePickerSizeConfig, useThemeConfig } from '../../config/useConfig';
+import { useClassNameConfig, useStyleConfig, useThemeConfig } from '../../config/useConfig';
 import useIsSearchMode from '../../hooks/useIsSearchMode';
 import { useKeyboardNavigation } from '../../hooks/useKeyboardNavigation';
 import { useOnFocus } from '../../hooks/useOnFocus';
@@ -23,6 +23,8 @@ export default function PickerMain({ children }: Props) {
 }
 
 type RootProps = Readonly<{
+  className?: string;
+  style?: React.CSSProperties;
   children: React.ReactNode;
 }>;
 
@@ -30,25 +32,19 @@ function PickerRootElement({ children }: RootProps) {
   const theme = useThemeConfig();
   const searchModeActive = useIsSearchMode();
   const PickerMainRef = usePickerMainRef();
-  const { height, width } = usePickerSizeConfig();
+  const className = useClassNameConfig();
+  const style = useStyleConfig();
 
   useKeyboardNavigation();
   useOnFocus();
 
-  const style = {
-    height,
-    width
-  };
-
-  
-
   return (
     <aside
       className={clsx(ClassNames.emojiPicker, 'epr-main', {
         [ClassNames.searchActive]: searchModeActive,
         [ClassNames.darkTheme]: theme === Theme.DARK,
         [ClassNames.autoTheme]: theme === Theme.AUTO
-      })}
+      }, className)}
       ref={PickerMainRef}
       style={style}
     >

package/src/config/config.ts

@@ -1,3 +1,5 @@
+import * as React from 'react'
+
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import {
   setCustomEmojis,
@@ -63,6 +65,7 @@ export function basePickerConfig(): PickerConfigInternal {
   return {
     autoFocusSearch: true,
     categories: baseCategoriesConfig(),
+    className: '',
     customEmojis: [],
     defaultSkinTone: SkinTones.NEUTRAL,
     emojiStyle: EmojiStyle.APPLE,
@@ -78,6 +81,7 @@ export function basePickerConfig(): PickerConfigInternal {
     searchPlaceholder: DEFAULT_SEARCH_PLACEHOLDER,
     skinTonePickerLocation: SkinTonePickerLocation.SEARCH,
     skinTonesDisabled: false,
+    style: {},
     suggestedEmojisMode: SuggestionMode.FREQUENT,
     theme: Theme.LIGHT,
     unicodeToHide: new Set<string>(KNOWN_FAILING_EMOJIS),
@@ -98,8 +102,10 @@ export type PickerConfigInternal = {
   suggestedEmojisMode: SuggestionMode;
   lazyLoadEmojis: boolean;
   previewConfig: PreviewConfig;
+  className: string;
   height: PickerDimensions;
   width: PickerDimensions;
+  style: React.CSSProperties;
   getEmojiUrl: GetEmojiUrl;
   searchDisabled: boolean;
   skinTonePickerLocation: SkinTonePickerLocation;

package/src/config/useConfig.ts

@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 import { usePickerConfig } from '../components/context/PickerConfigContext';
 import {
   EmojiClickData,
@@ -88,12 +90,14 @@ export function useLazyLoadEmojisConfig(): boolean {
   return lazyLoadEmojis;
 }
 
-export function usePickerSizeConfig(): {
-  height: PickerDimensions;
-  width: PickerDimensions;
-} {
-  const { height, width } = usePickerConfig();
-  return { height: getDimension(height), width: getDimension(width) };
+export function useClassNameConfig(): string {
+  const { className } = usePickerConfig();
+  return className;
+}
+
+export function useStyleConfig(): React.CSSProperties {
+  const { height, width, style } = usePickerConfig();
+  return { height: getDimension(height), width: getDimension(width), ...style };
 }
 
 export function useEmojiVersionConfig(): string | null {