emoji-picker-react 4.7.0 → 4.7.2

package/dist/hooks/useMouseDownHandlers.d.ts

@@ -1,3 +1,4 @@
 import * as React from 'react';
 import { NullableElement } from '../DomUtils/selectors';
-export declare function useMouseDownHandlers(BodyRef: React.MutableRefObject<NullableElement>): void;
+import { MOUSE_EVENT_SOURCE } from '../config/useConfig';
+export declare function useMouseDownHandlers(ContainerRef: React.MutableRefObject<NullableElement>, mouseEventSource: MOUSE_EVENT_SOURCE): void;

package/package.json

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

package/src/components/Reactions/Reactions.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import { commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
 import {
+  MOUSE_EVENT_SOURCE,
   useEmojiStyleConfig,
   useReactionsConfig
 } from '../../config/useConfig';
@@ -19,7 +20,7 @@ export function Reactions() {
   const [reactionsOpen] = useReactionsModeState();
   const ReactionsRef = useReactionsRef();
   const reactions = useReactionsConfig();
-  useMouseDownHandlers(ReactionsRef);
+  useMouseDownHandlers(ReactionsRef, MOUSE_EVENT_SOURCE.REACTIONS);
   const emojiStyle = useEmojiStyleConfig();
 
   if (!reactionsOpen) {
@@ -38,6 +39,7 @@ export function Reactions() {
             emojiStyle={emojiStyle}
             unified={reaction}
             showVariations={false}
+            className={cx(styles.emojiButton)}
             round
           />
         </li>
@@ -58,5 +60,12 @@ const styles = stylesheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     height: '100%'
+  },
+  emojiButton: {
+    ':hover': {
+      transform: 'scale(1.2)'
+    },
+
+    transition: 'transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.5)'
   }
 });

package/src/components/body/Body.tsx

@@ -6,6 +6,7 @@ import {
   commonInteractionStyles,
   stylesheet
 } from '../../Stylesheet/stylesheet';
+import { MOUSE_EVENT_SOURCE } from '../../config/useConfig';
 import { useOnMouseMove } from '../../hooks/useDisallowMouseMove';
 import { useMouseDownHandlers } from '../../hooks/useMouseDownHandlers';
 import { useOnScroll } from '../../hooks/useOnScroll';
@@ -17,7 +18,7 @@ import { EmojiVariationPicker } from './EmojiVariationPicker';
 export function Body() {
   const BodyRef = useBodyRef();
   useOnScroll(BodyRef);
-  useMouseDownHandlers(BodyRef);
+  useMouseDownHandlers(BodyRef, MOUSE_EVENT_SOURCE.PICKER);
   useOnMouseMove();
 
   return (

package/src/components/emoji/ClickableEmojiButton.tsx

@@ -18,6 +18,7 @@ type ClickableEmojiButtonProps = Readonly<{
   hasVariations: boolean;
   unified?: string;
   round?: boolean;
+  className?: string;
 }>;
 
 export function ClickableEmojiButton({
@@ -28,6 +29,7 @@ export function ClickableEmojiButton({
   showVariations = true,
   hasVariations,
   children,
+  className,
   round = false
 }: ClickableEmojiButtonProps) {
   return (
@@ -40,7 +42,8 @@ export function ClickableEmojiButton({
           [ClassNames.visible]: !hidden && !hiddenOnSearch
         },
         !!(hasVariations && showVariations) && styles.hasVariations,
-        round && styles.round
+        round && styles.round,
+        className
       )}
       data-unified={unified}
       aria-label={emojiNames[0]}

package/src/components/emoji/Emoji.tsx

@@ -28,6 +28,7 @@ export function ClickableEmoji({
   size,
   lazyLoad,
   getEmojiUrl,
+  className,
   round = false
 }: ClickableEmojiProps) {
   const hasVariations = emojiHasVariations(emoji);
@@ -49,6 +50,7 @@ export function ClickableEmoji({
         emojiStyle={emojiStyle}
         lazyLoad={lazyLoad}
         getEmojiUrl={getEmojiUrl}
+        className={className}
       />
     </ClickableEmojiButton>
   );

package/src/config/config.ts

@@ -132,9 +132,12 @@ const basePreviewConfig: PreviewConfig = {
 
 type ConfigExternal = {
   previewConfig: Partial<PreviewConfig>;
-  onEmojiClick: (emoji: EmojiClickData, event: MouseEvent) => void;
+  onEmojiClick: MouseDownEvent;
+  onReactionClick: MouseDownEvent;
 } & Omit<PickerConfigInternal, 'previewConfig' | 'unicodeToHide'>;
 
 export type PickerConfig = Partial<ConfigExternal>;
 
 export type PickerDimensions = string | number;
+
+export type MouseDownEvent = (emoji: EmojiClickData, event: MouseEvent) => void;

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 {

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 (