emoji-picker-react 4.5.0 → 4.5.1

package/dist/types/exposedTypes.d.ts

@@ -4,7 +4,9 @@ export declare type EmojiClickData = {
     unifiedWithoutSkinTone: string;
     emoji: string;
     names: string[];
-    getImageUrl: (emojiStyle: EmojiStyle) => string;
+    imageUrl: string;
+    getImageUrl: (emojiStyle?: EmojiStyle) => string;
+    isCustom: boolean;
 };
 export declare enum SuggestionMode {
     RECENT = "recent",

package/package.json

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

package/src/components/emoji/ExportedEmoji.tsx

@@ -10,15 +10,17 @@ export function ExportedEmoji({
   size = 32,
   emojiStyle = EmojiStyle.APPLE,
   lazyLoad = false,
-  getEmojiUrl
+  getEmojiUrl,
+  emojiUrl
 }: {
   unified: string;
   emojiStyle?: EmojiStyle;
   size?: number;
   lazyLoad?: boolean;
   getEmojiUrl?: GetEmojiUrl;
+  emojiUrl?: string;
 }) {
-  if (!unified) {
+  if (!unified && !emojiUrl && !getEmojiUrl) {
     return null;
   }
 
@@ -28,7 +30,7 @@ export function ExportedEmoji({
       size={size}
       emojiStyle={emojiStyle}
       lazyLoad={lazyLoad}
-      getEmojiUrl={getEmojiUrl}
+      getEmojiUrl={emojiUrl ? () => emojiUrl : getEmojiUrl}
     />
   );
 }

package/src/components/emoji/ViewOnlyEmoji.tsx

@@ -39,7 +39,7 @@ export function ViewOnlyEmoji({
       <EmojiImg
         style={style}
         emojiName={unified}
-        emojiStyle={emojiStyle}
+        emojiStyle={EmojiStyle.NATIVE}
         lazyLoad={lazyLoad}
         imgUrl={emojiToRender.imgUrl}
         onError={onError}

package/src/hooks/useMouseDownHandlers.ts

@@ -4,32 +4,34 @@ import { useEffect, useRef } from 'react';
 import {
   emojiFromElement,
   isEmojiElement,
-  NullableElement,
+  NullableElement
 } from '../DomUtils/selectors';
 import {
   useActiveSkinToneState,
   useDisallowClickRef,
   useEmojiVariationPickerState,
-  useUpdateSuggested,
+  useUpdateSuggested
 } from '../components/context/PickerContext';
+import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import {
+  useEmojiStyleConfig,
   useGetEmojiUrlConfig,
-  useOnEmojiClickConfig,
+  useOnEmojiClickConfig
 } from '../config/useConfig';
 import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   activeVariationFromUnified,
   emojiHasVariations,
   emojiNames,
-  emojiUnified,
+  emojiUnified
 } from '../dataUtils/emojiSelectors';
 import { parseNativeEmoji } from '../dataUtils/parseNativeEmoji';
 import { setSuggested } from '../dataUtils/suggested';
-import { EmojiClickData, EmojiStyle, SkinTones } from '../types/exposedTypes';
+import { isCustomEmoji } from '../typeRefinements/typeRefinements';
+import { EmojiClickData, SkinTones, EmojiStyle } from '../types/exposedTypes';
 
 import { useCloseAllOpenToggles } from './useCloseAllOpenToggles';
 import useSetVariationPicker from './useSetVariationPicker';
-import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 
 export function useMouseDownHandlers(
   BodyRef: React.MutableRefObject<NullableElement>
@@ -43,6 +45,7 @@ export function useMouseDownHandlers(
   const onEmojiClick = useOnEmojiClickConfig();
   const [, updateSuggested] = useUpdateSuggested();
   const getEmojiUrl = useGetEmojiUrlConfig();
+  const activeEmojiStyle = useEmojiStyleConfig();
 
   const onClick = React.useCallback(
     function onClick(event: MouseEvent) {
@@ -63,7 +66,10 @@ export function useMouseDownHandlers(
 
       updateSuggested();
       setSuggested(emoji, skinToneToUse);
-      onEmojiClick(emojiClickOutput(emoji, skinToneToUse, getEmojiUrl), event);
+      onEmojiClick(
+        emojiClickOutput(emoji, skinToneToUse, activeEmojiStyle, getEmojiUrl),
+        event
+      );
     },
     [
       activeSkinTone,
@@ -72,6 +78,7 @@ export function useMouseDownHandlers(
       onEmojiClick,
       updateSuggested,
       getEmojiUrl,
+      activeEmojiStyle
     ]
   );
 
@@ -99,7 +106,7 @@ export function useMouseDownHandlers(
       disallowClickRef,
       closeAllOpenToggles,
       setVariationPicker,
-      setEmojiVariationPicker,
+      setEmojiVariationPicker
     ]
   );
   const onMouseUp = React.useCallback(
@@ -128,14 +135,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 () => {
@@ -158,17 +165,38 @@ function emojiFromEvent(event: MouseEvent): [DataEmoji, string] | [] {
 function emojiClickOutput(
   emoji: DataEmoji,
   activeSkinTone: SkinTones,
+  activeEmojiStyle: EmojiStyle,
   getEmojiUrl: GetEmojiUrl
 ): EmojiClickData {
+  const names = emojiNames(emoji);
+
+  if (isCustomEmoji(emoji)) {
+    const unified = emojiUnified(emoji);
+    return {
+      activeSkinTone,
+      emoji: unified,
+      getImageUrl() {
+        return emoji.imgUrl;
+      },
+      imageUrl: emoji.imgUrl,
+      isCustom: true,
+      names,
+      unified,
+      unifiedWithoutSkinTone: unified
+    };
+  }
   const unified = emojiUnified(emoji, activeSkinTone);
+
   return {
     activeSkinTone,
     emoji: parseNativeEmoji(unified),
-    getImageUrl(emojiStyle: EmojiStyle) {
+    getImageUrl(emojiStyle: EmojiStyle = activeEmojiStyle ?? EmojiStyle.APPLE) {
       return getEmojiUrl(unified, emojiStyle);
     },
-    names: emojiNames(emoji),
+    imageUrl: getEmojiUrl(unified, activeEmojiStyle ?? EmojiStyle.APPLE),
+    isCustom: false,
+    names,
     unified,
-    unifiedWithoutSkinTone: emojiUnified(emoji),
+    unifiedWithoutSkinTone: emojiUnified(emoji)
   };
 }

package/src/types/exposedTypes.ts

@@ -4,7 +4,9 @@ export type EmojiClickData = {
   unifiedWithoutSkinTone: string;
   emoji: string;
   names: string[];
-  getImageUrl: (emojiStyle: EmojiStyle) => string;
+  imageUrl: string;
+  getImageUrl: (emojiStyle?: EmojiStyle) => string;
+  isCustom: boolean;
 };
 
 export enum SuggestionMode {