emoji-picker-react 4.6.15 → 4.7.1

package/src/config/mutableConfig.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 
-import { EmojiClickData } from '../types/exposedTypes';
+import { MouseDownEvent } from './config';
 
 export type MutableConfig = {
-  onEmojiClick?: (emoji: EmojiClickData, event: MouseEvent) => void;
+  onEmojiClick?: MouseDownEvent;
+  onReactionClick?: MouseDownEvent;
 };
 
 export const MutableConfigContext = React.createContext<
@@ -19,7 +20,8 @@ export function useDefineMutableConfig(
   config: MutableConfig
 ): React.MutableRefObject<MutableConfig> {
   const MutableConfigRef = React.useRef<MutableConfig>({
-    onEmojiClick: config.onEmojiClick || emptyFunc
+    onEmojiClick: config.onEmojiClick || emptyFunc,
+    onReactionClick: config.onReactionClick || config.onEmojiClick
   });
 
   React.useEffect(() => {

package/src/config/useConfig.ts

@@ -22,6 +22,11 @@ import {
 import { CustomEmoji } from './customEmojiConfig';
 import { useMutableConfig } from './mutableConfig';
 
+export enum MOUSE_EVENT_SOURCE {
+  REACTIONS = 'reactions',
+  PICKER = 'picker'
+}
+
 export function useSearchPlaceHolderConfig(): string {
   const { searchPlaceHolder, searchPlaceholder } = usePickerConfig();
   return (
@@ -61,12 +66,17 @@ export function useCustomEmojisConfig(): CustomEmoji[] {
   return customEmojis;
 }
 
-export function useOnEmojiClickConfig(): (
-  emoji: EmojiClickData,
-  event: MouseEvent
-) => void {
+export function useOnEmojiClickConfig(
+  mouseEventSource: MOUSE_EVENT_SOURCE
+): (emoji: EmojiClickData, event: MouseEvent) => void {
   const { current } = useMutableConfig();
-  return current.onEmojiClick || (() => {});
+
+  const handler =
+    (mouseEventSource === MOUSE_EVENT_SOURCE.REACTIONS
+      ? current.onReactionClick
+      : current.onEmojiClick) ?? current.onEmojiClick;
+
+  return handler || (() => {});
 }
 
 export function usePreviewConfig(): PreviewConfig {
@@ -100,6 +110,11 @@ export function useStyleConfig(): React.CSSProperties {
   return { height: getDimension(height), width: getDimension(width), ...style };
 }
 
+export function useReactionsOpenConfig(): boolean {
+  const { reactionsDefaultOpen } = usePickerConfig();
+  return reactionsDefaultOpen;
+}
+
 export function useEmojiVersionConfig(): string | null {
   const { emojiVersion } = usePickerConfig();
   return emojiVersion;
@@ -120,6 +135,11 @@ export function useUnicodeToHide() {
   return unicodeToHide;
 }
 
+export function useReactionsConfig(): string[] {
+  const { reactions } = usePickerConfig();
+  return reactions;
+}
+
 export function useGetEmojiUrlConfig(): (
   unified: string,
   style: EmojiStyle
@@ -139,9 +159,12 @@ export function useSearchResultsConfig(searchResultsCount: number): string {
   const isPlural = searchResultsCount > 1;
 
   if (hasResults) {
-    return isPlural ?
-      SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND.replace('%n', searchResultsCount.toString())
-        : SEARCH_RESULTS_ONE_RESULT_FOUND;
+    return isPlural
+      ? SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND.replace(
+          '%n',
+          searchResultsCount.toString()
+        )
+      : SEARCH_RESULTS_ONE_RESULT_FOUND;
   }
 
   return SEARCH_RESULTS_NO_RESULTS_FOUND;

package/src/hooks/useMouseDownHandlers.ts

@@ -14,6 +14,7 @@ import {
 } from '../components/context/PickerContext';
 import { GetEmojiUrl } from '../components/emoji/BaseEmojiProps';
 import {
+  MOUSE_EVENT_SOURCE,
   useEmojiStyleConfig,
   useGetEmojiUrlConfig,
   useOnEmojiClickConfig
@@ -34,7 +35,8 @@ import { useCloseAllOpenToggles } from './useCloseAllOpenToggles';
 import useSetVariationPicker from './useSetVariationPicker';
 
 export function useMouseDownHandlers(
-  BodyRef: React.MutableRefObject<NullableElement>
+  ContainerRef: React.MutableRefObject<NullableElement>,
+  mouseEventSource: MOUSE_EVENT_SOURCE
 ) {
   const mouseDownTimerRef = useRef<undefined | number>();
   const setVariationPicker = useSetVariationPicker();
@@ -42,7 +44,7 @@ export function useMouseDownHandlers(
   const [, setEmojiVariationPicker] = useEmojiVariationPickerState();
   const closeAllOpenToggles = useCloseAllOpenToggles();
   const [activeSkinTone] = useActiveSkinToneState();
-  const onEmojiClick = useOnEmojiClickConfig();
+  const onEmojiClick = useOnEmojiClickConfig(mouseEventSource);
   const [, updateSuggested] = useUpdateSuggested();
   const getEmojiUrl = useGetEmojiUrlConfig();
   const activeEmojiStyle = useEmojiStyleConfig();
@@ -130,27 +132,27 @@ export function useMouseDownHandlers(
   );
 
   useEffect(() => {
-    if (!BodyRef.current) {
+    if (!ContainerRef.current) {
       return;
     }
-    const bodyRef = BodyRef.current;
-    bodyRef.addEventListener('click', onClick, {
+    const confainerRef = ContainerRef.current;
+    confainerRef.addEventListener('click', onClick, {
       passive: true
     });
 
-    bodyRef.addEventListener('mousedown', onMouseDown, {
+    confainerRef.addEventListener('mousedown', onMouseDown, {
       passive: true
     });
-    bodyRef.addEventListener('mouseup', onMouseUp, {
+    confainerRef.addEventListener('mouseup', onMouseUp, {
       passive: true
     });
 
     return () => {
-      bodyRef?.removeEventListener('click', onClick);
-      bodyRef?.removeEventListener('mousedown', onMouseDown);
-      bodyRef?.removeEventListener('mouseup', onMouseUp);
+      confainerRef?.removeEventListener('click', onClick);
+      confainerRef?.removeEventListener('mousedown', onMouseDown);
+      confainerRef?.removeEventListener('mouseup', onMouseUp);
     };
-  }, [BodyRef, onClick, onMouseDown, onMouseUp]);
+  }, [ContainerRef, onClick, onMouseDown, onMouseUp]);
 }
 
 function emojiFromEvent(event: MouseEvent): [DataEmoji, string] | [] {

package/src/index.tsx

@@ -24,7 +24,8 @@ export interface PickerProps extends PickerConfig {}
 
 export default function EmojiPicker(props: PickerProps) {
   const MutableConfigRef = useDefineMutableConfig({
-    onEmojiClick: props.onEmojiClick
+    onEmojiClick: props.onEmojiClick,
+    onReactionClick: props.onReactionClick
   });
 
   return (