emoji-picker-react 4.12.4 → 4.13.0

package/package.json

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

package/src/components/footer/Preview.tsx

@@ -20,13 +20,17 @@ import { useEmojiPreviewEvents } from '../../hooks/useEmojiPreviewEvents';
 import { useIsSkinToneInPreview } from '../../hooks/useShouldShowSkinTonePicker';
 import Flex from '../Layout/Flex';
 import Space from '../Layout/Space';
-import { useEmojiVariationPickerState } from '../context/PickerContext';
+import {
+  useEmojiVariationPickerState,
+  useReactionsModeState
+} from '../context/PickerContext';
 import { ViewOnlyEmoji } from '../emoji/ViewOnlyEmoji';
 import { SkinTonePickerMenu } from '../header/SkinTonePicker/SkinTonePicker';
 
 export function Preview() {
   const previewConfig = usePreviewConfig();
   const isSkinToneInPreview = useIsSkinToneInPreview();
+  const [reactionsOpen] = useReactionsModeState();
 
   if (!previewConfig.showPreview) {
     return null;
@@ -34,7 +38,11 @@ export function Preview() {
 
   return (
     <Flex
-      className={cx(styles.preview, commonInteractionStyles.hiddenOnReactions)}
+      className={cx(
+        styles.preview,
+        commonInteractionStyles.hiddenOnReactions,
+        reactionsOpen && styles.hideOnReactions
+      )}
     >
       <PreviewBody />
       <Space />
@@ -123,5 +131,9 @@ const styles = stylesheet.create({
   },
   emoji: {
     padding: '0'
+  },
+  hideOnReactions: {
+    opacity: '0',
+    transition: 'opacity 0.5s ease-in-out'
   }
 });

package/src/config/config.ts

@@ -151,5 +151,13 @@ export type PickerConfig = Partial<ConfigExternal>;
 
 export type PickerDimensions = string | number;
 
-export type MouseDownEvent = (emoji: EmojiClickData, event: MouseEvent) => void;
+export type MouseDownEvent = (
+  emoji: EmojiClickData,
+  event: MouseEvent,
+  api: OnEmojiClickApi
+) => void;
 export type OnSkinToneChange = (emoji: SkinTones) => void;
+
+type OnEmojiClickApi = {
+  collapseToReactions: () => void;
+};

package/src/config/useConfig.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { usePickerConfig } from '../components/context/PickerConfigContext';
+import { useReactionsModeState } from '../components/context/PickerContext';
 import {
   EmojiClickData,
   EmojiStyle,
@@ -80,17 +81,30 @@ export function useOnEmojiClickConfig(
   mouseEventSource: MOUSE_EVENT_SOURCE
 ): (emoji: EmojiClickData, event: MouseEvent) => void {
   const { current } = useMutableConfig();
+  const [, setReactionsOpen] = useReactionsModeState();
+
+  const handler = current.onEmojiClick || (() => {});
+  const { onReactionClick } = current;
+
+  if (mouseEventSource === MOUSE_EVENT_SOURCE.REACTIONS && onReactionClick) {
+    return (...args) =>
+      onReactionClick(...args, {
+        collapseToReactions: () => {
+          setReactionsOpen(o => o);
+        }
+      });
+  }
 
-  const handler =
-    (mouseEventSource === MOUSE_EVENT_SOURCE.REACTIONS
-      ? current.onReactionClick
-      : current.onEmojiClick) ?? current.onEmojiClick;
-
-  return handler || (() => {});
+  return (...args) => {
+    handler(...args, {
+      collapseToReactions: () => {
+        setReactionsOpen(true);
+      }
+    });
+  };
 }
 
-export function useOnSkinToneChangeConfig(
-): (skinTone: SkinTones) => void {
+export function useOnSkinToneChangeConfig(): (skinTone: SkinTones) => void {
   const { current } = useMutableConfig();
 
   return current.onSkinToneChange || (() => {});