emoji-picker-react 4.7.18 → 4.9.0

package/README.md

@@ -88,6 +88,8 @@ The following props are accepted by them 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. |
+| allowExpandReactions   | `boolean`                                              | `true`     | Controls whether the reactions picker can be expanded to the main picker.                                                                                  |
+| onSkinToneChange       | `Function`                                             | -          | Callback function that is called when a skin tone is changed. The function receives new picked skin tone as a parameter.                                   |
 
 ## Full details
 
@@ -139,6 +141,8 @@ The skin tones typescript enum can be imported directly from the package:
 import { SkinTones } from 'emoji-picker-react';
 ```
 
+- `onSkinToneChange`: `(skinTone: SkinTones) => void` - Callback function when a skin tone is changed.
+
 - `searchDisabled`: `boolean` - Whether to disable the search input. Defaults to `false`. When disabled, the skin tone picker will be shown in the preview component.
 
 - `skinTonesDisabled`: `boolean` - Whether to disable the skin tone selection. Defaults to `false`.

package/dist/config/config.d.ts

@@ -35,6 +35,7 @@ export declare type PickerConfigInternal = {
     reactionsDefaultOpen: boolean;
     reactions: string[];
     open: boolean;
+    allowExpandReactions: boolean;
 };
 export declare type PreviewConfig = {
     defaultEmoji: string;
@@ -45,8 +46,10 @@ declare type ConfigExternal = {
     previewConfig: Partial<PreviewConfig>;
     onEmojiClick: MouseDownEvent;
     onReactionClick: MouseDownEvent;
+    onSkinToneChange: OnSkinToneChange;
 } & 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 declare type OnSkinToneChange = (emoji: SkinTones) => void;
 export {};

package/dist/config/mutableConfig.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { MouseDownEvent } from './config';
+import { MouseDownEvent, OnSkinToneChange } from './config';
 export declare type MutableConfig = {
     onEmojiClick?: MouseDownEvent;
     onReactionClick?: MouseDownEvent;
+    onSkinToneChange?: OnSkinToneChange;
 };
 export declare const MutableConfigContext: React.Context<React.MutableRefObject<MutableConfig>>;
 export declare function useMutableConfig(): React.MutableRefObject<MutableConfig>;

package/dist/config/useConfig.d.ts

@@ -9,6 +9,7 @@ export declare enum MOUSE_EVENT_SOURCE {
 }
 export declare function useSearchPlaceHolderConfig(): string;
 export declare function useDefaultSkinToneConfig(): SkinTones;
+export declare function useAllowExpandReactions(): boolean;
 export declare function useSkinTonesDisabledConfig(): boolean;
 export declare function useEmojiStyleConfig(): EmojiStyle;
 export declare function useAutoFocusSearchConfig(): boolean;
@@ -16,6 +17,7 @@ export declare function useCategoriesConfig(): CategoriesConfig;
 export declare function useCustomEmojisConfig(): CustomEmoji[];
 export declare function useOpenConfig(): boolean;
 export declare function useOnEmojiClickConfig(mouseEventSource: MOUSE_EVENT_SOURCE): (emoji: EmojiClickData, event: MouseEvent) => void;
+export declare function useOnSkinToneChangeConfig(): (skinTone: SkinTones) => void;
 export declare function usePreviewConfig(): PreviewConfig;
 export declare function useThemeConfig(): Theme;
 export declare function useSuggestedEmojisModeConfig(): SuggestionMode;

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

@@ -16844,7 +16844,8 @@ function basePickerConfig() {
     width: 350,
     reactionsDefaultOpen: false,
     reactions: DEFAULT_REACTIONS,
-    open: true
+    open: true,
+    allowExpandReactions: true
   };
 }
 var basePreviewConfig = {
@@ -16877,7 +16878,7 @@ function useSetConfig(config) {
     setMergedConfig(mergeConfig(config));
     // not gonna...
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [(_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length, config.open, config.emojiVersion, config.reactionsDefaultOpen, config.searchPlaceHolder, config.searchPlaceholder, config.defaultSkinTone, config.skinTonesDisabled, config.autoFocusSearch, config.emojiStyle, config.theme, config.suggestedEmojisMode, config.lazyLoadEmojis, config.className, config.height, config.width, config.searchDisabled, config.skinTonePickerLocation]);
+  }, [(_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length, config.open, config.emojiVersion, config.reactionsDefaultOpen, config.searchPlaceHolder, config.searchPlaceholder, config.defaultSkinTone, config.skinTonesDisabled, config.autoFocusSearch, config.emojiStyle, config.theme, config.suggestedEmojisMode, config.lazyLoadEmojis, config.className, config.height, config.width, config.searchDisabled, config.skinTonePickerLocation, config.allowExpandReactions]);
   return mergedConfig;
 }
 function usePickerConfig() {
@@ -16892,12 +16893,16 @@ function useMutableConfig() {
 function useDefineMutableConfig(config) {
   var MutableConfigRef = React__default.useRef({
     onEmojiClick: config.onEmojiClick || emptyFunc,
-    onReactionClick: config.onReactionClick || config.onEmojiClick
+    onReactionClick: config.onReactionClick || config.onEmojiClick,
+    onSkinToneChange: config.onSkinToneChange || emptyFunc
   });
   React__default.useEffect(function () {
     MutableConfigRef.current.onEmojiClick = config.onEmojiClick || emptyFunc;
     MutableConfigRef.current.onReactionClick = config.onReactionClick || config.onEmojiClick;
   }, [config.onEmojiClick, config.onReactionClick]);
+  React__default.useEffect(function () {
+    MutableConfigRef.current.onSkinToneChange = config.onSkinToneChange || emptyFunc;
+  }, [config.onSkinToneChange]);
   return MutableConfigRef;
 }
 function emptyFunc() {}
@@ -16921,34 +16926,39 @@ function useDefaultSkinToneConfig() {
     defaultSkinTone = _usePickerConfig2.defaultSkinTone;
   return defaultSkinTone;
 }
-function useSkinTonesDisabledConfig() {
+function useAllowExpandReactions() {
   var _usePickerConfig3 = usePickerConfig(),
-    skinTonesDisabled = _usePickerConfig3.skinTonesDisabled;
+    allowExpandReactions = _usePickerConfig3.allowExpandReactions;
+  return allowExpandReactions;
+}
+function useSkinTonesDisabledConfig() {
+  var _usePickerConfig4 = usePickerConfig(),
+    skinTonesDisabled = _usePickerConfig4.skinTonesDisabled;
   return skinTonesDisabled;
 }
 function useEmojiStyleConfig() {
-  var _usePickerConfig4 = usePickerConfig(),
-    emojiStyle = _usePickerConfig4.emojiStyle;
+  var _usePickerConfig5 = usePickerConfig(),
+    emojiStyle = _usePickerConfig5.emojiStyle;
   return emojiStyle;
 }
 function useAutoFocusSearchConfig() {
-  var _usePickerConfig5 = usePickerConfig(),
-    autoFocusSearch = _usePickerConfig5.autoFocusSearch;
+  var _usePickerConfig6 = usePickerConfig(),
+    autoFocusSearch = _usePickerConfig6.autoFocusSearch;
   return autoFocusSearch;
 }
 function useCategoriesConfig() {
-  var _usePickerConfig6 = usePickerConfig(),
-    categories = _usePickerConfig6.categories;
+  var _usePickerConfig7 = usePickerConfig(),
+    categories = _usePickerConfig7.categories;
   return categories;
 }
 function useCustomEmojisConfig() {
-  var _usePickerConfig7 = usePickerConfig(),
-    customEmojis = _usePickerConfig7.customEmojis;
+  var _usePickerConfig8 = usePickerConfig(),
+    customEmojis = _usePickerConfig8.customEmojis;
   return customEmojis;
 }
 function useOpenConfig() {
-  var _usePickerConfig8 = usePickerConfig(),
-    open = _usePickerConfig8.open;
+  var _usePickerConfig9 = usePickerConfig(),
+    open = _usePickerConfig9.open;
   return open;
 }
 function useOnEmojiClickConfig(mouseEventSource) {
@@ -16958,74 +16968,79 @@ function useOnEmojiClickConfig(mouseEventSource) {
   var handler = (_ref = mouseEventSource === MOUSE_EVENT_SOURCE.REACTIONS ? current.onReactionClick : current.onEmojiClick) != null ? _ref : current.onEmojiClick;
   return handler || function () {};
 }
+function useOnSkinToneChangeConfig() {
+  var _useMutableConfig2 = useMutableConfig(),
+    current = _useMutableConfig2.current;
+  return current.onSkinToneChange || function () {};
+}
 function usePreviewConfig() {
-  var _usePickerConfig9 = usePickerConfig(),
-    previewConfig = _usePickerConfig9.previewConfig;
+  var _usePickerConfig10 = usePickerConfig(),
+    previewConfig = _usePickerConfig10.previewConfig;
   return previewConfig;
 }
 function useThemeConfig() {
-  var _usePickerConfig10 = usePickerConfig(),
-    theme = _usePickerConfig10.theme;
+  var _usePickerConfig11 = usePickerConfig(),
+    theme = _usePickerConfig11.theme;
   return theme;
 }
 function useSuggestedEmojisModeConfig() {
-  var _usePickerConfig11 = usePickerConfig(),
-    suggestedEmojisMode = _usePickerConfig11.suggestedEmojisMode;
+  var _usePickerConfig12 = usePickerConfig(),
+    suggestedEmojisMode = _usePickerConfig12.suggestedEmojisMode;
   return suggestedEmojisMode;
 }
 function useLazyLoadEmojisConfig() {
-  var _usePickerConfig12 = usePickerConfig(),
-    lazyLoadEmojis = _usePickerConfig12.lazyLoadEmojis;
+  var _usePickerConfig13 = usePickerConfig(),
+    lazyLoadEmojis = _usePickerConfig13.lazyLoadEmojis;
   return lazyLoadEmojis;
 }
 function useClassNameConfig() {
-  var _usePickerConfig13 = usePickerConfig(),
-    className = _usePickerConfig13.className;
+  var _usePickerConfig14 = usePickerConfig(),
+    className = _usePickerConfig14.className;
   return className;
 }
 function useStyleConfig() {
-  var _usePickerConfig14 = usePickerConfig(),
-    height = _usePickerConfig14.height,
-    width = _usePickerConfig14.width,
-    style = _usePickerConfig14.style;
+  var _usePickerConfig15 = usePickerConfig(),
+    height = _usePickerConfig15.height,
+    width = _usePickerConfig15.width,
+    style = _usePickerConfig15.style;
   return _extends({
     height: getDimension(height),
     width: getDimension(width)
   }, style);
 }
 function useReactionsOpenConfig() {
-  var _usePickerConfig15 = usePickerConfig(),
-    reactionsDefaultOpen = _usePickerConfig15.reactionsDefaultOpen;
+  var _usePickerConfig16 = usePickerConfig(),
+    reactionsDefaultOpen = _usePickerConfig16.reactionsDefaultOpen;
   return reactionsDefaultOpen;
 }
 function useEmojiVersionConfig() {
-  var _usePickerConfig16 = usePickerConfig(),
-    emojiVersion = _usePickerConfig16.emojiVersion;
+  var _usePickerConfig17 = usePickerConfig(),
+    emojiVersion = _usePickerConfig17.emojiVersion;
   return emojiVersion;
 }
 function useSearchDisabledConfig() {
-  var _usePickerConfig17 = usePickerConfig(),
-    searchDisabled = _usePickerConfig17.searchDisabled;
+  var _usePickerConfig18 = usePickerConfig(),
+    searchDisabled = _usePickerConfig18.searchDisabled;
   return searchDisabled;
 }
 function useSkinTonePickerLocationConfig() {
-  var _usePickerConfig18 = usePickerConfig(),
-    skinTonePickerLocation = _usePickerConfig18.skinTonePickerLocation;
+  var _usePickerConfig19 = usePickerConfig(),
+    skinTonePickerLocation = _usePickerConfig19.skinTonePickerLocation;
   return skinTonePickerLocation;
 }
 function useUnicodeToHide() {
-  var _usePickerConfig19 = usePickerConfig(),
-    unicodeToHide = _usePickerConfig19.unicodeToHide;
+  var _usePickerConfig20 = usePickerConfig(),
+    unicodeToHide = _usePickerConfig20.unicodeToHide;
   return unicodeToHide;
 }
 function useReactionsConfig() {
-  var _usePickerConfig20 = usePickerConfig(),
-    reactions = _usePickerConfig20.reactions;
+  var _usePickerConfig21 = usePickerConfig(),
+    reactions = _usePickerConfig21.reactions;
   return reactions;
 }
 function useGetEmojiUrlConfig() {
-  var _usePickerConfig21 = usePickerConfig(),
-    getEmojiUrl = _usePickerConfig21.getEmojiUrl;
+  var _usePickerConfig22 = usePickerConfig(),
+    getEmojiUrl = _usePickerConfig22.getEmojiUrl;
   return getEmojiUrl;
 }
 function getDimension(dimensionConfig) {
@@ -19090,6 +19105,7 @@ function Reactions() {
   var reactions = useReactionsConfig();
   useMouseDownHandlers(ReactionsRef, MOUSE_EVENT_SOURCE.REACTIONS);
   var emojiStyle = useEmojiStyleConfig();
+  var allowExpandReactions = useAllowExpandReactions();
   if (!reactionsOpen) {
     return null;
   }
@@ -19107,7 +19123,7 @@ function Reactions() {
       className: flairup.cx(styles$6.emojiButton),
       noBackground: true
     }));
-  }), React.createElement("li", null, React.createElement(BtnPlus, null)));
+  }), allowExpandReactions ? React.createElement("li", null, React.createElement(BtnPlus, null)) : null);
 }
 var styles$6 = /*#__PURE__*/stylesheet.create({
   list: {
@@ -19780,6 +19796,7 @@ function SkinTonePicker(_ref) {
   var _useActiveSkinToneSta = useActiveSkinToneState(),
     activeSkinTone = _useActiveSkinToneSta[0],
     setActiveSkinTone = _useActiveSkinToneSta[1];
+  var onSkinToneChange = useOnSkinToneChangeConfig();
   var closeAllOpenToggles = useCloseAllOpenToggles();
   var focusSearchInput = useFocusSearchInput();
   if (isDisabled) {
@@ -19812,6 +19829,7 @@ function SkinTonePicker(_ref) {
       onClick: function onClick() {
         if (isOpen) {
           setActiveSkinTone(skinToneVariation);
+          onSkinToneChange(skinToneVariation);
           focusSearchInput();
         } else {
           setIsOpen(true);
@@ -20420,19 +20438,32 @@ function EmojiPicker(props) {
 function ContentControl() {
   var _useReactionsModeStat = useReactionsModeState(),
     reactionsDefaultOpen = _useReactionsModeStat[0];
+  var allowExpandReactions = useAllowExpandReactions();
   var _React$useState = React.useState(!reactionsDefaultOpen),
     renderAll = _React$useState[0],
     setRenderAll = _React$useState[1];
   var isOpen = useOpenConfig();
   React.useEffect(function () {
+    if (reactionsDefaultOpen && !allowExpandReactions) {
+      return;
+    }
     if (!renderAll) {
       setRenderAll(true);
     }
-  }, [renderAll]);
+  }, [renderAll, allowExpandReactions, reactionsDefaultOpen]);
   if (!isOpen) {
     return null;
   }
-  return React.createElement(PickerMain, null, React.createElement(Reactions, null), renderAll ? React.createElement(React.Fragment, null, React.createElement(Header, null), React.createElement(Body, null), React.createElement(Preview, null)) : null);
+  return React.createElement(PickerMain, null, React.createElement(Reactions, null), React.createElement(ExpandedPickerContent, {
+    renderAll: renderAll
+  }));
+}
+function ExpandedPickerContent(_ref) {
+  var renderAll = _ref.renderAll;
+  if (!renderAll) {
+    return null;
+  }
+  return React.createElement(React.Fragment, null, React.createElement(Header, null), React.createElement(Body, null), React.createElement(Preview, null));
 }
 // eslint-disable-next-line complexity
 var EmojiPickerReact = /*#__PURE__*/React.memo(EmojiPicker, compareConfig);
@@ -20493,7 +20524,8 @@ function ExportedEmoji(_ref) {
 function EmojiPicker$1(props) {
   var MutableConfigRef = useDefineMutableConfig({
     onEmojiClick: props.onEmojiClick,
-    onReactionClick: props.onReactionClick
+    onReactionClick: props.onReactionClick,
+    onSkinToneChange: props.onSkinToneChange
   });
   return React.createElement(ErrorBoundary, null, React.createElement(MutableConfigContext.Provider, {
     value: MutableConfigRef