emoji-picker-react 4.1.1 → 4.3.0

package/dist/hooks/preloadEmoji.d.ts

@@ -1,4 +1,5 @@
+import { GetEmojiUrl } from '../components/emoji/Emoji';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import { EmojiStyle } from '../types/exposedTypes';
-export declare function preloadEmoji(emoji: undefined | DataEmoji, emojiStyle: EmojiStyle): void;
+export declare function preloadEmoji(getEmojiUrl: GetEmojiUrl, emoji: undefined | DataEmoji, emojiStyle: EmojiStyle): void;
 export declare const preloadedEmojs: Set<string>;

package/package.json

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

package/src/components/body/EmojiList.tsx

@@ -9,6 +9,7 @@ import {
 import {
   useCategoriesConfig,
   useEmojiStyleConfig,
+  useGetEmojiUrlConfig,
   useLazyLoadEmojisConfig,
 } from '../../config/useConfig';
 import { emojisByCategory, emojiUnified } from '../../dataUtils/emojiSelectors';
@@ -65,6 +66,7 @@ function RenderCategory({
   const isPastInitialLoad = useIsPastInitialLoad();
   const [activeSkinTone] = useActiveSkinToneState();
   const disallowedEmojisRef = useDisallowedEmojisRef();
+  const getEmojiUrl = useGetEmojiUrlConfig();
 
   // Small trick to defer the rendering of all emoji categories until the first category is visible
   // This way the user gets to actually see something and not wait for the whole picker to render.
@@ -96,6 +98,7 @@ function RenderCategory({
         hiddenOnSearch={filteredOut}
         emojiStyle={emojiStyle}
         lazyLoad={lazyLoadEmojis}
+        getEmojiUrl={getEmojiUrl}
       />
     );
   });

package/src/components/body/EmojiVariationPicker.tsx

@@ -7,20 +7,23 @@ import {
   buttonFromTarget,
   elementHeight,
   emojiTrueOffsetTop,
-  emojiTruOffsetLeft
+  emojiTruOffsetLeft,
 } from '../../DomUtils/selectors';
-import { useEmojiStyleConfig } from '../../config/useConfig';
+import {
+  useEmojiStyleConfig,
+  useGetEmojiUrlConfig,
+} from '../../config/useConfig';
 import { asEmoji } from '../../dataUtils/asEmoji';
 import {
   emojiHasVariations,
   emojiUnified,
-  emojiVariations
+  emojiVariations,
 } from '../../dataUtils/emojiSelectors';
 import {
   useAnchoredEmojiRef,
   useBodyRef,
   useSetAnchoredEmojiRef,
-  useVariationPickerRef
+  useVariationPickerRef,
 } from '../context/ElementRefContext';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
 import { ClickableEmoji } from '../emoji/Emoji';
@@ -28,7 +31,7 @@ import './EmojiVariationPicker.css';
 
 enum Direction {
   Up,
-  Down
+  Down,
 }
 
 export function EmojiVariationPicker() {
@@ -41,6 +44,7 @@ export function EmojiVariationPicker() {
   );
   const setAnchoredEmojiRef = useSetAnchoredEmojiRef();
   const getPointerStyle = usePointerStyle(VariationPickerRef);
+  const getEmojiUrl = useGetEmojiUrlConfig();
 
   const button = buttonFromTarget(AnchoredEmojiRef.current);
 
@@ -67,7 +71,7 @@ export function EmojiVariationPicker() {
       ref={VariationPickerRef}
       className={clsx('epr-emoji-variation-picker', {
         visible,
-        'pointing-up': getMenuDirection() === Direction.Down
+        'pointing-up': getMenuDirection() === Direction.Down,
       })}
       style={{ top }}
     >
@@ -75,13 +79,14 @@ export function EmojiVariationPicker() {
         ? [emojiUnified(safeEmoji)]
             .concat(emojiVariations(safeEmoji))
             .slice(0, 6)
-            .map(unified => (
+            .map((unified) => (
               <ClickableEmoji
                 key={unified}
                 emoji={safeEmoji}
                 unified={unified}
                 emojiStyle={emojiStyle}
                 showVariations={false}
+                getEmojiUrl={getEmojiUrl}
               />
             ))
         : null}
@@ -124,7 +129,7 @@ function useVariationPickerTop(
 
   return {
     getMenuDirection,
-    getTop
+    getTop,
   };
 
   function getMenuDirection() {

package/src/components/body/Suggested.tsx

@@ -3,7 +3,8 @@ import * as React from 'react';
 import { CategoryConfig } from '../../config/categoryConfig';
 import {
   useEmojiStyleConfig,
-  useSuggestedEmojisModeConfig
+  useGetEmojiUrlConfig,
+  useSuggestedEmojisModeConfig,
 } from '../../config/useConfig';
 import { emojiByUnified } from '../../dataUtils/emojiSelectors';
 import { getsuggested } from '../../dataUtils/suggested';
@@ -19,6 +20,7 @@ type Props = Readonly<{
 export function Suggested({ categoryConfig }: Props) {
   const [suggestedUpdated] = useUpdateSuggested();
   const suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
+  const getEmojiUrl = useGetEmojiUrlConfig();
   const suggested = React.useMemo(
     () => getsuggested(suggestedEmojisModeConfig) ?? [],
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -32,7 +34,7 @@ export function Suggested({ categoryConfig }: Props) {
       hiddenOnSearch
       hidden={suggested.length === 0}
     >
-      {suggested.map(suggestedItem => {
+      {suggested.map((suggestedItem) => {
         const emoji = emojiByUnified(suggestedItem.original);
 
         if (!emoji) {
@@ -46,6 +48,7 @@ export function Suggested({ categoryConfig }: Props) {
             emojiStyle={emojiStyle}
             emoji={emoji}
             key={suggestedItem.unified}
+            getEmojiUrl={getEmojiUrl}
           />
         );
       })}

package/src/components/emoji/Emoji.tsx

@@ -9,7 +9,7 @@ import {
   emojiHasVariations,
   emojiName,
   emojiNames,
-  emojiUrlByUnified
+  emojiUrlByUnified,
 } from '../../dataUtils/emojiSelectors';
 import { parseNativeEmoji } from '../../dataUtils/parseNativeEmoji';
 import { EmojiStyle } from '../../types/exposedTypes';
@@ -32,6 +32,7 @@ type BaseProps = {
   unified: string;
   size?: number;
   lazyLoad?: boolean;
+  getEmojiUrl?: GetEmojiUrl;
 };
 
 export function ClickableEmoji({
@@ -42,7 +43,8 @@ export function ClickableEmoji({
   emojiStyle,
   showVariations = true,
   size,
-  lazyLoad
+  lazyLoad,
+  getEmojiUrl,
 }: ClickableEmojiProps) {
   const hasVariations = emojiHasVariations(emoji);
 
@@ -52,7 +54,7 @@ export function ClickableEmoji({
         [ClassNames.hidden]: hidden,
         [ClassNames.hiddenOnSearch]: hiddenOnSearch,
         [ClassNames.visible]: !hidden && !hiddenOnSearch,
-        [ClassNames.emojiHasVariatios]: hasVariations && showVariations
+        [ClassNames.emojiHasVariatios]: hasVariations && showVariations,
       })}
       data-unified={unified}
       // @ts-ignore - let's ignore the fact this is not a real react ref, ok?
@@ -65,6 +67,7 @@ export function ClickableEmoji({
         size={size}
         emojiStyle={emojiStyle}
         lazyLoad={lazyLoad}
+        getEmojiUrl={getEmojiUrl}
       />
     </Button>
   );
@@ -75,7 +78,8 @@ export function ViewOnlyEmoji({
   unified,
   emojiStyle,
   size,
-  lazyLoad
+  lazyLoad,
+  getEmojiUrl = emojiUrlByUnified,
 }: BaseProps) {
   const style = {} as React.CSSProperties;
   if (size) {
@@ -95,6 +99,7 @@ export function ViewOnlyEmoji({
           emoji={asEmoji(emojiToRender)}
           emojiStyle={emojiStyle}
           lazyLoad={lazyLoad}
+          getEmojiUrl={getEmojiUrl}
         />
       )}
     </>
@@ -103,7 +108,7 @@ export function ViewOnlyEmoji({
 
 function NativeEmoji({
   unified,
-  style
+  style,
 }: {
   unified: string;
   style: React.CSSProperties;
@@ -124,19 +129,21 @@ function EmojiImg({
   unified,
   emojiStyle,
   style,
-  lazyLoad = false
+  lazyLoad = false,
+  getEmojiUrl,
 }: {
   emoji: DataEmoji;
   unified: string;
   emojiStyle: EmojiStyle;
   style: React.CSSProperties;
   lazyLoad?: boolean;
+  getEmojiUrl: GetEmojiUrl;
 }) {
   const [, setEmojisThatFailedToLoad] = useEmojisThatFailedToLoadState();
 
   return (
     <img
-      src={emojiUrlByUnified(emojiStyle, unified)}
+      src={getEmojiUrl(unified, emojiStyle)}
       alt={emojiName(emoji)}
       className={clsx(ClassNames.external, 'epr-emoji-img')}
       loading={lazyLoad ? 'lazy' : 'eager'}
@@ -146,6 +153,8 @@ function EmojiImg({
   );
 
   function onError() {
-    setEmojisThatFailedToLoad(prev => new Set(prev).add(unified));
+    setEmojisThatFailedToLoad((prev) => new Set(prev).add(unified));
   }
 }
+
+export type GetEmojiUrl = (unified: string, style: EmojiStyle) => string;

package/src/components/emoji/ExportedEmoji.tsx

@@ -2,18 +2,20 @@ import * as React from 'react';
 
 import { EmojiStyle } from '../../types/exposedTypes';
 
-import { ViewOnlyEmoji } from './Emoji';
+import { GetEmojiUrl, ViewOnlyEmoji } from './Emoji';
 
 export function ExportedEmoji({
   unified,
   size = 32,
   emojiStyle = EmojiStyle.APPLE,
-  lazyLoad = false
+  lazyLoad = false,
+  getEmojiUrl,
 }: {
   unified: string;
   emojiStyle?: EmojiStyle;
   size?: number;
   lazyLoad?: boolean;
+  getEmojiUrl?: GetEmojiUrl;
 }) {
   if (!unified) {
     return null;
@@ -25,6 +27,7 @@ export function ExportedEmoji({
       size={size}
       emojiStyle={emojiStyle}
       lazyLoad={lazyLoad}
+      getEmojiUrl={getEmojiUrl}
     />
   );
 }

package/src/components/footer/Preview.tsx

@@ -1,12 +1,16 @@
 import * as React from 'react';
 import { useState } from 'react';
 
-import { useEmojiStyleConfig, usePreviewConfig } from '../../config/useConfig';
+import {
+  useEmojiStyleConfig,
+  useGetEmojiUrlConfig,
+  usePreviewConfig,
+} from '../../config/useConfig';
 import { asEmoji } from '../../dataUtils/asEmoji';
 import {
   emojiByUnified,
   emojiName,
-  emojiUnified
+  emojiUnified,
 } from '../../dataUtils/emojiSelectors';
 import { useEmojiPreviewEvents } from '../../hooks/useEmojiPreviewEvents';
 import Flex from '../Layout/Flex';
@@ -19,6 +23,7 @@ export function Preview() {
   const [previewEmoji, setPreviewEmoji] = useState<PreviewEmoji>(null);
   const emojiStyle = useEmojiStyleConfig();
   const [variationPickerEmoji] = useEmojiVariationPickerState();
+  const getEmojiUrl = useGetEmojiUrlConfig();
 
   useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
 
@@ -53,6 +58,7 @@ export function Preview() {
               emoji={asEmoji(emoji)}
               emojiStyle={emojiStyle}
               size={45}
+              getEmojiUrl={getEmojiUrl}
             />
           ) : defaultEmoji ? (
             <ViewOnlyEmoji
@@ -60,6 +66,7 @@ export function Preview() {
               emoji={defaultEmoji}
               emojiStyle={emojiStyle}
               size={45}
+              getEmojiUrl={getEmojiUrl}
             />
           ) : null}
         </div>

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/cdnUrls.ts

@@ -1,4 +1,4 @@
-import { EmojiStyle } from "../types/exposedTypes";
+import { EmojiStyle } from '../types/exposedTypes';
 
 const CDN_URL_APPLE =
   'https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/';

package/src/config/config.ts

@@ -1,15 +1,17 @@
+import { GetEmojiUrl } from '../components/emoji/Emoji';
+import { emojiUrlByUnified } from '../dataUtils/emojiSelectors';
 import {
   EmojiClickData,
   EmojiStyle,
   SkinTones,
   SuggestionMode,
-  Theme,
+  Theme
 } from '../types/exposedTypes';
 
 import {
   CategoriesConfig,
   baseCategoriesConfig,
-  mergeCategoriesConfig,
+  mergeCategoriesConfig
 } from './categoryConfig';
 
 export function mergeConfig(
@@ -24,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
   };
 }
 
@@ -41,6 +43,7 @@ export function basePickerConfig(): PickerConfigInternal {
     defaultSkinTone: SkinTones.NEUTRAL,
     emojiStyle: EmojiStyle.APPLE,
     emojiVersion: null,
+    getEmojiUrl: emojiUrlByUnified,
     height: 450,
     lazyLoadEmojis: false,
     onEmojiClick: function defaultOnClickHandler(
@@ -52,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
   };
 }
 
@@ -75,8 +78,9 @@ export type PickerConfigInternal = {
   suggestedEmojisMode: SuggestionMode;
   lazyLoadEmojis: boolean;
   previewConfig: PreviewConfig;
-  height: number;
-  width: number;
+  height: PickerDimensions;
+  width: PickerDimensions;
+  getEmojiUrl: GetEmojiUrl;
 };
 
 export type PreviewConfig = {
@@ -88,7 +92,7 @@ export type PreviewConfig = {
 const basePreviewConfig: PreviewConfig = {
   defaultEmoji: '1f60a',
   defaultCaption: "What's your mood?",
-  showPreview: true,
+  showPreview: true
 };
 
 type ConfigExternal = {
@@ -96,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,12 +74,29 @@ 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 {
   const { emojiVersion } = usePickerConfig();
   return emojiVersion;
 }
+
+export function useGetEmojiUrlConfig(): (
+  unified: string,
+  style: EmojiStyle
+) => string {
+  const { getEmojiUrl } = usePickerConfig();
+  return getEmojiUrl;
+}
+
+function getDimension(dimensionConfig: PickerDimensions): PickerDimensions {
+  return typeof dimensionConfig === 'number'
+    ? `${dimensionConfig}px`
+    : dimensionConfig;
+}

package/src/dataUtils/emojiSelectors.ts

@@ -38,14 +38,6 @@ export function unifiedWithoutSkinTone(unified: string): string {
   return unified;
 }
 
-export function emojiUrl(
-  emojiStyle: EmojiStyle,
-  emoji: DataEmoji,
-  skinTone?: string
-): string {
-  return emojiUrlByUnified(emojiStyle, emojiUnified(emoji, skinTone));
-}
-
 export function emojiUnified(emoji: DataEmoji, skinTone?: string): string {
   const unified = emoji[EmojiProperties.unified];
 
@@ -61,9 +53,10 @@ export function emojisByCategory(category: Categories): DataEmojis {
   return emojis?.[category] ?? [];
 }
 
+// WARNING: DO NOT USE DIRECTLY
 export function emojiUrlByUnified(
-  emojiStyle: EmojiStyle,
-  unified: string
+  unified: string,
+  emojiStyle: EmojiStyle
 ): string {
   return `${cdnUrl(emojiStyle)}${unified}.png`;
 }

package/src/hooks/preloadEmoji.ts

@@ -1,12 +1,10 @@
+import { GetEmojiUrl } from '../components/emoji/Emoji';
 import { DataEmoji } from '../dataUtils/DataTypes';
-import {
-  emojiUnified,
-  emojiUrlByUnified,
-  emojiVariations
-} from '../dataUtils/emojiSelectors';
+import { emojiUnified, emojiVariations } from '../dataUtils/emojiSelectors';
 import { EmojiStyle } from '../types/exposedTypes';
 
 export function preloadEmoji(
+  getEmojiUrl: GetEmojiUrl,
   emoji: undefined | DataEmoji,
   emojiStyle: EmojiStyle
 ): void {
@@ -24,8 +22,8 @@ export function preloadEmoji(
     return;
   }
 
-  emojiVariations(emoji).forEach(variation => {
-    const emojiUrl = emojiUrlByUnified(emojiStyle, variation);
+  emojiVariations(emoji).forEach((variation) => {
+    const emojiUrl = getEmojiUrl(variation, emojiStyle);
     preloadImage(emojiUrl);
   });
 

package/src/hooks/useMouseDownHandlers.ts

@@ -4,22 +4,25 @@ import { useEffect, useRef } from 'react';
 import {
   emojiFromElement,
   isEmojiElement,
-  NullableElement
+  NullableElement,
 } from '../DomUtils/selectors';
 import {
   useActiveSkinToneState,
   useDisallowClickRef,
   useEmojiVariationPickerState,
-  useUpdateSuggested
+  useUpdateSuggested,
 } from '../components/context/PickerContext';
-import { useOnEmojiClickConfig } from '../config/useConfig';
+import { GetEmojiUrl } from '../components/emoji/Emoji';
+import {
+  useGetEmojiUrlConfig,
+  useOnEmojiClickConfig,
+} from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   activeVariationFromUnified,
   emojiHasVariations,
   emojiNames,
   emojiUnified,
-  emojiUrlByUnified
 } from '../dataUtils/emojiSelectors';
 import { parseNativeEmoji } from '../dataUtils/parseNativeEmoji';
 import { setsuggested } from '../dataUtils/suggested';
@@ -39,6 +42,7 @@ export function useMouseDownHandlers(
   const [activeSkinTone] = useActiveSkinToneState();
   const onEmojiClick = useOnEmojiClickConfig();
   const [, updateSuggested] = useUpdateSuggested();
+  const getEmojiUrl = useGetEmojiUrlConfig();
 
   const onClick = React.useCallback(
     function onClick(event: MouseEvent) {
@@ -59,14 +63,15 @@ export function useMouseDownHandlers(
 
       updateSuggested();
       setsuggested(emoji, skinToneToUse);
-      onEmojiClick(emojiClickOutput(emoji, skinToneToUse), event);
+      onEmojiClick(emojiClickOutput(emoji, skinToneToUse, getEmojiUrl), event);
     },
     [
       activeSkinTone,
       closeAllOpenToggles,
       disallowClickRef,
       onEmojiClick,
-      updateSuggested
+      updateSuggested,
+      getEmojiUrl,
     ]
   );
 
@@ -94,7 +99,7 @@ export function useMouseDownHandlers(
       disallowClickRef,
       closeAllOpenToggles,
       setVariationPicker,
-      setEmojiVariationPicker
+      setEmojiVariationPicker,
     ]
   );
   const onMouseUp = React.useCallback(
@@ -123,14 +128,14 @@ export function useMouseDownHandlers(
     }
     const bodyRef = BodyRef.current;
     bodyRef.addEventListener('click', onClick, {
-      passive: true
+      passive: true,
     });
 
     bodyRef.addEventListener('mousedown', onMouseDown, {
-      passive: true
+      passive: true,
     });
     bodyRef.addEventListener('mouseup', onMouseUp, {
-      passive: true
+      passive: true,
     });
 
     return () => {
@@ -152,17 +157,18 @@ function emojiFromEvent(event: MouseEvent): [DataEmoji, string] | [] {
 
 function emojiClickOutput(
   emoji: DataEmoji,
-  activeSkinTone: SkinTones
+  activeSkinTone: SkinTones,
+  getEmojiUrl: GetEmojiUrl
 ): EmojiClickData {
   const unified = emojiUnified(emoji, activeSkinTone);
   return {
     activeSkinTone,
     emoji: parseNativeEmoji(unified),
     getImageUrl(emojiStyle: EmojiStyle) {
-      return emojiUrlByUnified(emojiStyle, unified);
+      return getEmojiUrl(unified, emojiStyle);
     },
     names: emojiNames(emoji),
     unified,
-    unifiedWithoutSkinTone: emojiUnified(emoji)
+    unifiedWithoutSkinTone: emojiUnified(emoji),
   };
 }

package/src/hooks/useOnFocus.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 import { buttonFromTarget, emojiFromElement } from '../DomUtils/selectors';
 import { useBodyRef } from '../components/context/ElementRefContext';
-import { useEmojiStyleConfig } from '../config/useConfig';
+import { useEmojiStyleConfig, useGetEmojiUrlConfig } from '../config/useConfig';
 import { emojiHasVariations } from '../dataUtils/emojiSelectors';
 import { EmojiStyle } from '../types/exposedTypes';
 
@@ -11,6 +11,7 @@ import { preloadEmoji } from './preloadEmoji';
 export function useOnFocus() {
   const BodyRef = useBodyRef();
   const emojiStyle = useEmojiStyleConfig();
+  const getEmojiUrl = useGetEmojiUrlConfig();
 
   useEffect(() => {
     if (emojiStyle === EmojiStyle.NATIVE) {
@@ -39,8 +40,8 @@ export function useOnFocus() {
       }
 
       if (emojiHasVariations(emoji)) {
-        preloadEmoji(emoji, emojiStyle);
+        preloadEmoji(getEmojiUrl, emoji, emojiStyle);
       }
     }
-  }, [BodyRef, emojiStyle]);
+  }, [BodyRef, emojiStyle, getEmojiUrl]);
 }