emoji-picker-react 4.7.0 → 4.7.2

package/dist/emoji-picker-react.esm.js

@@ -16886,7 +16886,8 @@ function useMutableConfig() {
 }
 function useDefineMutableConfig(config) {
   var MutableConfigRef = React__default.useRef({
-    onEmojiClick: config.onEmojiClick || emptyFunc
+    onEmojiClick: config.onEmojiClick || emptyFunc,
+    onReactionClick: config.onReactionClick || config.onEmojiClick
   });
   React__default.useEffect(function () {
     MutableConfigRef.current.onEmojiClick = config.onEmojiClick || emptyFunc;
@@ -16895,6 +16896,11 @@ function useDefineMutableConfig(config) {
 }
 function emptyFunc() {}
 
+var MOUSE_EVENT_SOURCE;
+(function (MOUSE_EVENT_SOURCE) {
+  MOUSE_EVENT_SOURCE["REACTIONS"] = "reactions";
+  MOUSE_EVENT_SOURCE["PICKER"] = "picker";
+})(MOUSE_EVENT_SOURCE || (MOUSE_EVENT_SOURCE = {}));
 function useSearchPlaceHolderConfig() {
   var _find;
   var _usePickerConfig = usePickerConfig(),
@@ -16934,10 +16940,12 @@ function useCustomEmojisConfig() {
     customEmojis = _usePickerConfig7.customEmojis;
   return customEmojis;
 }
-function useOnEmojiClickConfig() {
+function useOnEmojiClickConfig(mouseEventSource) {
+  var _ref;
   var _useMutableConfig = useMutableConfig(),
     current = _useMutableConfig.current;
-  return current.onEmojiClick || function () {};
+  var handler = (_ref = mouseEventSource === MOUSE_EVENT_SOURCE.REACTIONS ? current.onReactionClick : current.onEmojiClick) != null ? _ref : current.onEmojiClick;
+  return handler || function () {};
 }
 function usePreviewConfig() {
   var _usePickerConfig8 = usePickerConfig(),
@@ -17688,7 +17696,7 @@ function useSetVariationPicker() {
   };
 }
 
-function useMouseDownHandlers(BodyRef) {
+function useMouseDownHandlers(ContainerRef, mouseEventSource) {
   var mouseDownTimerRef = useRef();
   var setVariationPicker = useSetVariationPicker();
   var disallowClickRef = useDisallowClickRef();
@@ -17697,7 +17705,7 @@ function useMouseDownHandlers(BodyRef) {
   var closeAllOpenToggles = useCloseAllOpenToggles();
   var _useActiveSkinToneSta = useActiveSkinToneState(),
     activeSkinTone = _useActiveSkinToneSta[0];
-  var onEmojiClick = useOnEmojiClickConfig();
+  var onEmojiClick = useOnEmojiClickConfig(mouseEventSource);
   var _useUpdateSuggested = useUpdateSuggested(),
     updateSuggested = _useUpdateSuggested[1];
   var getEmojiUrl = useGetEmojiUrlConfig();
@@ -17752,25 +17760,25 @@ function useMouseDownHandlers(BodyRef) {
     }
   }, [disallowClickRef]);
   useEffect(function () {
-    if (!BodyRef.current) {
+    if (!ContainerRef.current) {
       return;
     }
-    var bodyRef = BodyRef.current;
-    bodyRef.addEventListener('click', onClick, {
+    var 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 function () {
-      bodyRef == null ? void 0 : bodyRef.removeEventListener('click', onClick);
-      bodyRef == null ? void 0 : bodyRef.removeEventListener('mousedown', onMouseDown);
-      bodyRef == null ? void 0 : bodyRef.removeEventListener('mouseup', onMouseUp);
+      confainerRef == null ? void 0 : confainerRef.removeEventListener('click', onClick);
+      confainerRef == null ? void 0 : confainerRef.removeEventListener('mousedown', onMouseDown);
+      confainerRef == null ? void 0 : confainerRef.removeEventListener('mouseup', onMouseUp);
     };
-  }, [BodyRef, onClick, onMouseDown, onMouseUp]);
+  }, [ContainerRef, onClick, onMouseDown, onMouseUp]);
 }
 function emojiFromEvent(event) {
   var target = event == null ? void 0 : event.target;
@@ -17841,10 +17849,11 @@ function ClickableEmojiButton(_ref) {
     showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
     hasVariations = _ref.hasVariations,
     children = _ref.children,
+    className = _ref.className,
     _ref$round = _ref.round,
     round = _ref$round === void 0 ? false : _ref$round;
   return createElement(Button, {
-    className: cx(styles$1.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$1.hasVariations, round && styles$1.round),
+    className: cx(styles$1.emoji, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch, (_cx = {}, _cx[ClassNames.visible] = !hidden && !hiddenOnSearch, _cx), !!(hasVariations && showVariations) && styles$1.hasVariations, round && styles$1.round, className),
     "data-unified": unified,
     "aria-label": emojiNames[0],
     "data-full-name": emojiNames
@@ -18023,6 +18032,7 @@ function ClickableEmoji(_ref) {
     size = _ref.size,
     lazyLoad = _ref.lazyLoad,
     getEmojiUrl = _ref.getEmojiUrl,
+    className = _ref.className,
     _ref$round = _ref.round,
     round = _ref$round === void 0 ? false : _ref$round;
   var hasVariations = emojiHasVariations(emoji);
@@ -18040,7 +18050,8 @@ function ClickableEmoji(_ref) {
     size: size,
     emojiStyle: emojiStyle,
     lazyLoad: lazyLoad,
-    getEmojiUrl: getEmojiUrl
+    getEmojiUrl: getEmojiUrl,
+    className: className
   }));
 }
 
@@ -18129,7 +18140,7 @@ function Reactions() {
     reactionsOpen = _useReactionsModeStat[0];
   var ReactionsRef = useReactionsRef();
   var reactions = useReactionsConfig();
-  useMouseDownHandlers(ReactionsRef);
+  useMouseDownHandlers(ReactionsRef, MOUSE_EVENT_SOURCE.REACTIONS);
   var emojiStyle = useEmojiStyleConfig();
   if (!reactionsOpen) {
     return null;
@@ -18145,6 +18156,7 @@ function Reactions() {
       emojiStyle: emojiStyle,
       unified: reaction,
       showVariations: false,
+      className: cx(styles$5.emojiButton),
       round: true
     }));
   }), createElement("li", null, createElement(BtnPlus, null)));
@@ -18158,6 +18170,12 @@ var styles$5 = /*#__PURE__*/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)'
   }
 });
 
@@ -18885,7 +18903,7 @@ var styles$8 = /*#__PURE__*/stylesheet.create({
 function Body() {
   var BodyRef = useBodyRef();
   useOnScroll(BodyRef);
-  useMouseDownHandlers(BodyRef);
+  useMouseDownHandlers(BodyRef, MOUSE_EVENT_SOURCE.PICKER);
   useOnMouseMove();
   return createElement("div", {
     className: cx(styles$9.body, commonInteractionStyles.hiddenOnReactions),
@@ -20457,7 +20475,8 @@ function ExportedEmoji(_ref) {
 
 function EmojiPicker$1(props) {
   var MutableConfigRef = useDefineMutableConfig({
-    onEmojiClick: props.onEmojiClick
+    onEmojiClick: props.onEmojiClick,
+    onReactionClick: props.onReactionClick
   });
   return createElement(ErrorBoundary, null, createElement(MutableConfigContext.Provider, {
     value: MutableConfigRef