emoji-picker-react 4.7.0 → 4.7.2

package/README.md

@@ -6,6 +6,8 @@
 
 ![image](https://github.com/ealush/emoji-picker-react/assets/11255103/48901306-e7fd-49cd-8f1e-9b214083a61d)
 
+![reactions](https://github.com/ealush/emoji-picker-react/assets/11255103/38a9c652-ee2e-43d4-b0e6-33735f1bcbe7)
+
 ---
 
 _If you enjoy using emoji-picker-react<br/>
@@ -62,30 +64,31 @@ function App() {
 
 The following props are accepted by them picker:
 
-| Prop                   | Type                                                   | Default    | Description                                                                                                                                |
-| ---------------------- | ------------------------------------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
-| onEmojiClick           | function                                               |            | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter.                          |
-| autoFocusSearch        | boolean                                                | `true`     | Controls the auto focus of the search input.                                                                                               |
-| Theme                  | string                                                 | `light`    | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`.                                                          |
-| emojiStyle             | string                                                 | `apple`    | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`.                                       |
-| defaultSkinTone        | string                                                 | `neutral`  | Controls the default skin tone.                                                                                                            |
-| lazyLoadEmojis         | boolean                                                | `false`    | Controls whether the emojis are loaded lazily or not.                                                                                      |
-| previewConfig          | object                                                 | `{}`       | Controls the preview of the emoji. See below for more information.                                                                         |
-| searchPlaceholder      | string                                                 | `Search`   | Controls the placeholder of the search input.                                                                                              |
-| suggestedEmojisMode    | string                                                 | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`.                                                           |
-| skinTonesDisabled      | boolean                                                | `false`    | Controls whether the skin tones are disabled or not.                                                                                       |
-| searchDisabled         | boolean                                                | `false`    | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component.                |
-| skinTonePickerLocation | string                                                 | `SEARCH`   | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`.                                                 |
-| emojiVersion           | `string`                                               | -          | Allows displaying emojis up to a certain version for compatibility.                                                                        |
-| `className`            | `string`                                               | -          | Adds a class name to the root element of the picker.                                                                                       |
-| `width`                | `number`/`string`                                      | `350`      | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.   |
-| `height`               | `number`/`string`                                      | `450`      | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string. |
-| `style`                | `React.CSSProperties`                                  | `{}`       | Adds inline style to the root element of the picker.                                                                                       |
-| getEmojiUrl            | `Function`                                             | -          | Allows to customize the emoji url and provide your own image host.                                                                         |
-| categories             | `Array`                                                | -          | Allows full config over ordering, naming and display of categories.                                                                        |
-| customEmojis           | `Array<{names: string[], imgUrl: string, id: string}>` | -          | Allows adding custom emojis to the picker.                                                                                                 |
-| reactionsDefaultOpen   | `boolean`                                              | `false`    | Controls whether the reactions picker is on the initial mount instead of the main picker component.                                        |
-| reactions              | string[]                                               | -          | Controls the reactions to display in the reactions picker. Takes unified emoji ids                                                         |
+| Prop                   | Type                                                   | Default    | Description                                                                                                                                                |
+| ---------------------- | ------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| onEmojiClick           | function                                               |            | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter.                                          |
+| autoFocusSearch        | boolean                                                | `true`     | Controls the auto focus of the search input.                                                                                                               |
+| Theme                  | string                                                 | `light`    | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`.                                                                          |
+| emojiStyle             | string                                                 | `apple`    | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`.                                                       |
+| defaultSkinTone        | string                                                 | `neutral`  | Controls the default skin tone.                                                                                                                            |
+| lazyLoadEmojis         | boolean                                                | `false`    | Controls whether the emojis are loaded lazily or not.                                                                                                      |
+| previewConfig          | object                                                 | `{}`       | Controls the preview of the emoji. See below for more information.                                                                                         |
+| searchPlaceholder      | string                                                 | `Search`   | Controls the placeholder of the search input.                                                                                                              |
+| suggestedEmojisMode    | string                                                 | `frequent` | Controls the suggested emojis mode. Possible values are `frequent` and `recent`.                                                                           |
+| skinTonesDisabled      | boolean                                                | `false`    | Controls whether the skin tones are disabled or not.                                                                                                       |
+| searchDisabled         | boolean                                                | `false`    | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component.                                |
+| skinTonePickerLocation | string                                                 | `SEARCH`   | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`.                                                                 |
+| emojiVersion           | `string`                                               | -          | Allows displaying emojis up to a certain version for compatibility.                                                                                        |
+| `className`            | `string`                                               | -          | Adds a class name to the root element of the picker.                                                                                                       |
+| `width`                | `number`/`string`                                      | `350`      | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string.                   |
+| `height`               | `number`/`string`                                      | `450`      | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string.                 |
+| `style`                | `React.CSSProperties`                                  | `{}`       | Adds inline style to the root element of the picker.                                                                                                       |
+| getEmojiUrl            | `Function`                                             | -          | Allows to customize the emoji url and provide your own image host.                                                                                         |
+| categories             | `Array`                                                | -          | Allows full config over ordering, naming and display of categories.                                                                                        |
+| customEmojis           | `Array<{names: string[], imgUrl: string, id: string}>` | -          | Allows adding custom emojis to the picker.                                                                                                                 |
+| reactionsDefaultOpen   | `boolean`                                              | `false`    | Controls whether the reactions picker is on the initial mount instead of the main picker component.                                                        |
+| reactions              | string[]                                               | -          | Controls the reactions to display in the reactions picker. Takes unified emoji ids                                                                         |
+| onReactionClick        | `Function`                                             | -          | Callback function that is called when a reaction is clicked. The function receives the emoji object as a parameter. If not passed, onEmojiClicked is used. |
 
 ## Full details
 
@@ -118,9 +121,11 @@ The following props are accepted by them picker:
   import { EmojiStyle } from 'emoji-picker-react';
   ```
 
-- `autoFocusSearch`: `boolean` - Whether to focus the search input on mount. Defaults to `true`.
+* `autoFocusSearch`: `boolean` - Whether to focus the search input on mount. Defaults to `true`.
 
-\*
+* `lazyLoadEmojis`: `boolean` - Whether to lazy load the emojis. Defaults to `false`.
+
+- `autoFocusSearch`: `boolean` - Whether to focus the search input on mount. Defaults to `true`.
 
 - `lazyLoadEmojis`: `boolean` - Whether to lazy load the emojis. Defaults to `false`.
 
@@ -268,7 +273,7 @@ To customize the reactions, you should pass an array of unified emoji ids to the
 The reactions picker uses the same event handlers, and the same css variables for customizations.
 
 ```jsx
-<Picker reactionsDefaultOpen />
+<Picker reactionsDefaultOpen={true} onReactionClick={handleReaction} />
 ```
 
 # Customization

package/dist/components/emoji/ClickableEmojiButton.d.ts

@@ -8,6 +8,7 @@ declare type ClickableEmojiButtonProps = Readonly<{
     hasVariations: boolean;
     unified?: string;
     round?: boolean;
+    className?: string;
 }>;
-export declare function ClickableEmojiButton({ emojiNames, unified, hidden, hiddenOnSearch, showVariations, hasVariations, children, round }: ClickableEmojiButtonProps): JSX.Element;
+export declare function ClickableEmojiButton({ emojiNames, unified, hidden, hiddenOnSearch, showVariations, hasVariations, children, className, round }: ClickableEmojiButtonProps): JSX.Element;
 export {};

package/dist/components/emoji/Emoji.d.ts

@@ -9,5 +9,5 @@ declare type ClickableEmojiProps = Readonly<BaseEmojiProps & {
     className?: string;
     round?: boolean;
 }>;
-export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, round }: ClickableEmojiProps): JSX.Element;
+export declare function ClickableEmoji({ emoji, unified, hidden, hiddenOnSearch, emojiStyle, showVariations, size, lazyLoad, getEmojiUrl, className, round }: ClickableEmojiProps): JSX.Element;
 export {};

package/dist/config/config.d.ts

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

package/dist/config/mutableConfig.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { EmojiClickData } from '../types/exposedTypes';
+import { MouseDownEvent } from './config';
 export declare type MutableConfig = {
-    onEmojiClick?: (emoji: EmojiClickData, event: MouseEvent) => void;
+    onEmojiClick?: MouseDownEvent;
+    onReactionClick?: MouseDownEvent;
 };
 export declare const MutableConfigContext: React.Context<React.MutableRefObject<MutableConfig>>;
 export declare function useMutableConfig(): React.MutableRefObject<MutableConfig>;

package/dist/config/useConfig.d.ts

@@ -3,6 +3,10 @@ import { EmojiClickData, EmojiStyle, SkinTonePickerLocation, SkinTones, Suggesti
 import { CategoriesConfig } from './categoryConfig';
 import { PreviewConfig } from './config';
 import { CustomEmoji } from './customEmojiConfig';
+export declare enum MOUSE_EVENT_SOURCE {
+    REACTIONS = "reactions",
+    PICKER = "picker"
+}
 export declare function useSearchPlaceHolderConfig(): string;
 export declare function useDefaultSkinToneConfig(): SkinTones;
 export declare function useSkinTonesDisabledConfig(): boolean;
@@ -10,7 +14,7 @@ export declare function useEmojiStyleConfig(): EmojiStyle;
 export declare function useAutoFocusSearchConfig(): boolean;
 export declare function useCategoriesConfig(): CategoriesConfig;
 export declare function useCustomEmojisConfig(): CustomEmoji[];
-export declare function useOnEmojiClickConfig(): (emoji: EmojiClickData, event: MouseEvent) => void;
+export declare function useOnEmojiClickConfig(mouseEventSource: MOUSE_EVENT_SOURCE): (emoji: EmojiClickData, event: MouseEvent) => void;
 export declare function usePreviewConfig(): PreviewConfig;
 export declare function useThemeConfig(): Theme;
 export declare function useSuggestedEmojisModeConfig(): SuggestionMode;

package/dist/emoji-picker-react.cjs.development.js

@@ -16887,7 +16887,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;
@@ -16896,6 +16897,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(),
@@ -16935,10 +16941,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(),
@@ -17689,7 +17697,7 @@ function useSetVariationPicker() {
   };
 }
 
-function useMouseDownHandlers(BodyRef) {
+function useMouseDownHandlers(ContainerRef, mouseEventSource) {
   var mouseDownTimerRef = React.useRef();
   var setVariationPicker = useSetVariationPicker();
   var disallowClickRef = useDisallowClickRef();
@@ -17698,7 +17706,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();
@@ -17753,25 +17761,25 @@ function useMouseDownHandlers(BodyRef) {
     }
   }, [disallowClickRef]);
   React.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;
@@ -17842,10 +17850,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 React.createElement(Button, {
-    className: flairup.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: flairup.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
@@ -18024,6 +18033,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);
@@ -18041,7 +18051,8 @@ function ClickableEmoji(_ref) {
     size: size,
     emojiStyle: emojiStyle,
     lazyLoad: lazyLoad,
-    getEmojiUrl: getEmojiUrl
+    getEmojiUrl: getEmojiUrl,
+    className: className
   }));
 }
 
@@ -18130,7 +18141,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;
@@ -18146,6 +18157,7 @@ function Reactions() {
       emojiStyle: emojiStyle,
       unified: reaction,
       showVariations: false,
+      className: flairup.cx(styles$5.emojiButton),
       round: true
     }));
   }), React.createElement("li", null, React.createElement(BtnPlus, null)));
@@ -18159,6 +18171,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)'
   }
 });
 
@@ -18886,7 +18904,7 @@ var styles$8 = /*#__PURE__*/stylesheet.create({
 function Body() {
   var BodyRef = useBodyRef();
   useOnScroll(BodyRef);
-  useMouseDownHandlers(BodyRef);
+  useMouseDownHandlers(BodyRef, MOUSE_EVENT_SOURCE.PICKER);
   useOnMouseMove();
   return React.createElement("div", {
     className: flairup.cx(styles$9.body, commonInteractionStyles.hiddenOnReactions),
@@ -20458,7 +20476,8 @@ function ExportedEmoji(_ref) {
 
 function EmojiPicker$1(props) {
   var MutableConfigRef = useDefineMutableConfig({
-    onEmojiClick: props.onEmojiClick
+    onEmojiClick: props.onEmojiClick,
+    onReactionClick: props.onReactionClick
   });
   return React.createElement(ErrorBoundary, null, React.createElement(MutableConfigContext.Provider, {
     value: MutableConfigRef