emoji-picker-react 4.2.0 → 4.3.0

package/package.json

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

package/src/components/main/PickerMain.tsx

@@ -37,15 +37,15 @@ function PickerRootElement({ children }: RootProps) {
   useOnFocus();
 
   const style = {
-    height: `${height}px`,
-    width: `${width}px`,
+    height,
+    width
   };
 
   return (
     <aside
       className={clsx(ClassNames.emojiPicker, 'epr-main', {
         [ClassNames.searchActive]: searchModeActive,
-        'epr-dark-theme': theme === Theme.DARK,
+        'epr-dark-theme': theme === Theme.DARK
       })}
       ref={PickerMainRef}
       style={style}

package/src/config/config.ts

@@ -5,13 +5,13 @@ import {
   EmojiStyle,
   SkinTones,
   SuggestionMode,
-  Theme,
+  Theme
 } from '../types/exposedTypes';
 
 import {
   CategoriesConfig,
   baseCategoriesConfig,
-  mergeCategoriesConfig,
+  mergeCategoriesConfig
 } from './categoryConfig';
 
 export function mergeConfig(
@@ -26,13 +26,13 @@ export function mergeConfig(
   const config = Object.assign(base, userConfig);
 
   const categories = mergeCategoriesConfig(userConfig.categories, {
-    suggestionMode: config.suggestedEmojisMode,
+    suggestionMode: config.suggestedEmojisMode
   });
 
   return {
     ...config,
     categories,
-    previewConfig,
+    previewConfig
   };
 }
 
@@ -55,13 +55,13 @@ export function basePickerConfig(): PickerConfigInternal {
       event: MouseEvent
     ) {},
     previewConfig: {
-      ...basePreviewConfig,
+      ...basePreviewConfig
     },
     searchPlaceHolder: 'Search',
     skinTonesDisabled: false,
     suggestedEmojisMode: SuggestionMode.FREQUENT,
     theme: Theme.LIGHT,
-    width: 350,
+    width: 350
   };
 }
 
@@ -78,8 +78,8 @@ export type PickerConfigInternal = {
   suggestedEmojisMode: SuggestionMode;
   lazyLoadEmojis: boolean;
   previewConfig: PreviewConfig;
-  height: number;
-  width: number;
+  height: PickerDimensions;
+  width: PickerDimensions;
   getEmojiUrl: GetEmojiUrl;
 };
 
@@ -92,7 +92,7 @@ export type PreviewConfig = {
 const basePreviewConfig: PreviewConfig = {
   defaultEmoji: '1f60a',
   defaultCaption: "What's your mood?",
-  showPreview: true,
+  showPreview: true
 };
 
 type ConfigExternal = {
@@ -100,3 +100,5 @@ type ConfigExternal = {
 } & Omit<PickerConfigInternal, 'previewConfig'>;
 
 export type PickerConfig = Partial<ConfigExternal>;
+
+export type PickerDimensions = string | number;

package/src/config/useConfig.ts

@@ -5,11 +5,11 @@ import {
   EmojiStyle,
   SkinTones,
   SuggestionMode,
-  Theme,
+  Theme
 } from '../types/exposedTypes';
 
 import { CategoriesConfig } from './categoryConfig';
-import { PreviewConfig } from './config';
+import { PickerDimensions, PreviewConfig } from './config';
 
 export function useSearchPlaceHolderConfig(): string {
   const { searchPlaceHolder } = usePickerConfig();
@@ -74,9 +74,12 @@ export function useLazyLoadEmojisConfig(): boolean {
   return lazyLoadEmojis;
 }
 
-export function usePickerSizeConfig(): { height: number; width: number } {
+export function usePickerSizeConfig(): {
+  height: PickerDimensions;
+  width: PickerDimensions;
+} {
   const { height, width } = usePickerConfig();
-  return { height, width };
+  return { height: getDimension(height), width: getDimension(width) };
 }
 
 export function useEmojiVersionConfig(): string | null {
@@ -91,3 +94,9 @@ export function useGetEmojiUrlConfig(): (
   const { getEmojiUrl } = usePickerConfig();
   return getEmojiUrl;
 }
+
+function getDimension(dimensionConfig: PickerDimensions): PickerDimensions {
+  return typeof dimensionConfig === 'number'
+    ? `${dimensionConfig}px`
+    : dimensionConfig;
+}