emoji-picker-react 4.12.4 → 4.13.0

package/dist/config/config.d.ts

@@ -51,6 +51,9 @@ declare type ConfigExternal = {
 } & 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 MouseDownEvent = (emoji: EmojiClickData, event: MouseEvent, api: OnEmojiClickApi) => void;
 export declare type OnSkinToneChange = (emoji: SkinTones) => void;
+declare type OnEmojiClickApi = {
+    collapseToReactions: () => void;
+};
 export {};

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

@@ -17375,176 +17375,6 @@ function usePickerConfig() {
   return React.useContext(ConfigContext);
 }
 
-var MutableConfigContext = /*#__PURE__*/React__default.createContext({});
-function useMutableConfig() {
-  var mutableConfig = React__default.useContext(MutableConfigContext);
-  return mutableConfig;
-}
-function useDefineMutableConfig(config) {
-  var MutableConfigRef = React__default.useRef({
-    onEmojiClick: config.onEmojiClick || emptyFunc,
-    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() {}
-
-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(),
-    searchPlaceHolder = _usePickerConfig.searchPlaceHolder,
-    searchPlaceholder = _usePickerConfig.searchPlaceholder;
-  return (_find = [searchPlaceHolder, searchPlaceholder].find(function (p) {
-    return p !== DEFAULT_SEARCH_PLACEHOLDER;
-  })) != null ? _find : DEFAULT_SEARCH_PLACEHOLDER;
-}
-function useDefaultSkinToneConfig() {
-  var _usePickerConfig2 = usePickerConfig(),
-    defaultSkinTone = _usePickerConfig2.defaultSkinTone;
-  return defaultSkinTone;
-}
-function useAllowExpandReactions() {
-  var _usePickerConfig3 = usePickerConfig(),
-    allowExpandReactions = _usePickerConfig3.allowExpandReactions;
-  return allowExpandReactions;
-}
-function useSkinTonesDisabledConfig() {
-  var _usePickerConfig4 = usePickerConfig(),
-    skinTonesDisabled = _usePickerConfig4.skinTonesDisabled;
-  return skinTonesDisabled;
-}
-function useEmojiStyleConfig() {
-  var _usePickerConfig5 = usePickerConfig(),
-    emojiStyle = _usePickerConfig5.emojiStyle;
-  return emojiStyle;
-}
-function useAutoFocusSearchConfig() {
-  var _usePickerConfig6 = usePickerConfig(),
-    autoFocusSearch = _usePickerConfig6.autoFocusSearch;
-  return autoFocusSearch;
-}
-function useCategoriesConfig() {
-  var _usePickerConfig7 = usePickerConfig(),
-    categories = _usePickerConfig7.categories;
-  return categories;
-}
-function useCustomEmojisConfig() {
-  var _usePickerConfig8 = usePickerConfig(),
-    customEmojis = _usePickerConfig8.customEmojis;
-  return customEmojis;
-}
-function useOpenConfig() {
-  var _usePickerConfig9 = usePickerConfig(),
-    open = _usePickerConfig9.open;
-  return open;
-}
-function useOnEmojiClickConfig(mouseEventSource) {
-  var _ref;
-  var _useMutableConfig = useMutableConfig(),
-    current = _useMutableConfig.current;
-  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 _usePickerConfig10 = usePickerConfig(),
-    previewConfig = _usePickerConfig10.previewConfig;
-  return previewConfig;
-}
-function useThemeConfig() {
-  var _usePickerConfig11 = usePickerConfig(),
-    theme = _usePickerConfig11.theme;
-  return theme;
-}
-function useSuggestedEmojisModeConfig() {
-  var _usePickerConfig12 = usePickerConfig(),
-    suggestedEmojisMode = _usePickerConfig12.suggestedEmojisMode;
-  return suggestedEmojisMode;
-}
-function useLazyLoadEmojisConfig() {
-  var _usePickerConfig13 = usePickerConfig(),
-    lazyLoadEmojis = _usePickerConfig13.lazyLoadEmojis;
-  return lazyLoadEmojis;
-}
-function useClassNameConfig() {
-  var _usePickerConfig14 = usePickerConfig(),
-    className = _usePickerConfig14.className;
-  return className;
-}
-function useStyleConfig() {
-  var _usePickerConfig15 = usePickerConfig(),
-    height = _usePickerConfig15.height,
-    width = _usePickerConfig15.width,
-    style = _usePickerConfig15.style;
-  return _extends({
-    height: getDimension(height),
-    width: getDimension(width)
-  }, style);
-}
-function useReactionsOpenConfig() {
-  var _usePickerConfig16 = usePickerConfig(),
-    reactionsDefaultOpen = _usePickerConfig16.reactionsDefaultOpen;
-  return reactionsDefaultOpen;
-}
-function useEmojiVersionConfig() {
-  var _usePickerConfig17 = usePickerConfig(),
-    emojiVersion = _usePickerConfig17.emojiVersion;
-  return emojiVersion;
-}
-function useSearchDisabledConfig() {
-  var _usePickerConfig18 = usePickerConfig(),
-    searchDisabled = _usePickerConfig18.searchDisabled;
-  return searchDisabled;
-}
-function useSkinTonePickerLocationConfig() {
-  var _usePickerConfig19 = usePickerConfig(),
-    skinTonePickerLocation = _usePickerConfig19.skinTonePickerLocation;
-  return skinTonePickerLocation;
-}
-function useUnicodeToHide() {
-  var _usePickerConfig20 = usePickerConfig(),
-    unicodeToHide = _usePickerConfig20.unicodeToHide;
-  return unicodeToHide;
-}
-function useReactionsConfig() {
-  var _usePickerConfig21 = usePickerConfig(),
-    reactions = _usePickerConfig21.reactions;
-  return reactions;
-}
-function useGetEmojiUrlConfig() {
-  var _usePickerConfig22 = usePickerConfig(),
-    getEmojiUrl = _usePickerConfig22.getEmojiUrl;
-  return getEmojiUrl;
-}
-function getDimension(dimensionConfig) {
-  return typeof dimensionConfig === 'number' ? dimensionConfig + "px" : dimensionConfig;
-}
-function useSearchResultsConfig(searchResultsCount) {
-  var hasResults = searchResultsCount > 0;
-  var isPlural = searchResultsCount > 1;
-  if (hasResults) {
-    return isPlural ? SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND.replace('%n', searchResultsCount.toString()) : SEARCH_RESULTS_ONE_RESULT_FOUND;
-  }
-  return SEARCH_RESULTS_NO_RESULTS_FOUND;
-}
-
 function useDebouncedState(initialValue, delay) {
   if (delay === void 0) {
     delay = 0;
@@ -17736,6 +17566,201 @@ function useUpdateSuggested() {
   }];
 }
 
+var MutableConfigContext = /*#__PURE__*/React__default.createContext({});
+function useMutableConfig() {
+  var mutableConfig = React__default.useContext(MutableConfigContext);
+  return mutableConfig;
+}
+function useDefineMutableConfig(config) {
+  var MutableConfigRef = React__default.useRef({
+    onEmojiClick: config.onEmojiClick || emptyFunc,
+    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() {}
+
+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(),
+    searchPlaceHolder = _usePickerConfig.searchPlaceHolder,
+    searchPlaceholder = _usePickerConfig.searchPlaceholder;
+  return (_find = [searchPlaceHolder, searchPlaceholder].find(function (p) {
+    return p !== DEFAULT_SEARCH_PLACEHOLDER;
+  })) != null ? _find : DEFAULT_SEARCH_PLACEHOLDER;
+}
+function useDefaultSkinToneConfig() {
+  var _usePickerConfig2 = usePickerConfig(),
+    defaultSkinTone = _usePickerConfig2.defaultSkinTone;
+  return defaultSkinTone;
+}
+function useAllowExpandReactions() {
+  var _usePickerConfig3 = usePickerConfig(),
+    allowExpandReactions = _usePickerConfig3.allowExpandReactions;
+  return allowExpandReactions;
+}
+function useSkinTonesDisabledConfig() {
+  var _usePickerConfig4 = usePickerConfig(),
+    skinTonesDisabled = _usePickerConfig4.skinTonesDisabled;
+  return skinTonesDisabled;
+}
+function useEmojiStyleConfig() {
+  var _usePickerConfig5 = usePickerConfig(),
+    emojiStyle = _usePickerConfig5.emojiStyle;
+  return emojiStyle;
+}
+function useAutoFocusSearchConfig() {
+  var _usePickerConfig6 = usePickerConfig(),
+    autoFocusSearch = _usePickerConfig6.autoFocusSearch;
+  return autoFocusSearch;
+}
+function useCategoriesConfig() {
+  var _usePickerConfig7 = usePickerConfig(),
+    categories = _usePickerConfig7.categories;
+  return categories;
+}
+function useCustomEmojisConfig() {
+  var _usePickerConfig8 = usePickerConfig(),
+    customEmojis = _usePickerConfig8.customEmojis;
+  return customEmojis;
+}
+function useOpenConfig() {
+  var _usePickerConfig9 = usePickerConfig(),
+    open = _usePickerConfig9.open;
+  return open;
+}
+function useOnEmojiClickConfig(mouseEventSource) {
+  var _useMutableConfig = useMutableConfig(),
+    current = _useMutableConfig.current;
+  var _useReactionsModeStat = useReactionsModeState(),
+    setReactionsOpen = _useReactionsModeStat[1];
+  var handler = current.onEmojiClick || function () {};
+  var onReactionClick = current.onReactionClick;
+  if (mouseEventSource === MOUSE_EVENT_SOURCE.REACTIONS && onReactionClick) {
+    return function () {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return onReactionClick.apply(void 0, args.concat([{
+        collapseToReactions: function collapseToReactions() {
+          setReactionsOpen(function (o) {
+            return o;
+          });
+        }
+      }]));
+    };
+  }
+  return function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    handler.apply(void 0, args.concat([{
+      collapseToReactions: function collapseToReactions() {
+        setReactionsOpen(true);
+      }
+    }]));
+  };
+}
+function useOnSkinToneChangeConfig() {
+  var _useMutableConfig2 = useMutableConfig(),
+    current = _useMutableConfig2.current;
+  return current.onSkinToneChange || function () {};
+}
+function usePreviewConfig() {
+  var _usePickerConfig10 = usePickerConfig(),
+    previewConfig = _usePickerConfig10.previewConfig;
+  return previewConfig;
+}
+function useThemeConfig() {
+  var _usePickerConfig11 = usePickerConfig(),
+    theme = _usePickerConfig11.theme;
+  return theme;
+}
+function useSuggestedEmojisModeConfig() {
+  var _usePickerConfig12 = usePickerConfig(),
+    suggestedEmojisMode = _usePickerConfig12.suggestedEmojisMode;
+  return suggestedEmojisMode;
+}
+function useLazyLoadEmojisConfig() {
+  var _usePickerConfig13 = usePickerConfig(),
+    lazyLoadEmojis = _usePickerConfig13.lazyLoadEmojis;
+  return lazyLoadEmojis;
+}
+function useClassNameConfig() {
+  var _usePickerConfig14 = usePickerConfig(),
+    className = _usePickerConfig14.className;
+  return className;
+}
+function useStyleConfig() {
+  var _usePickerConfig15 = usePickerConfig(),
+    height = _usePickerConfig15.height,
+    width = _usePickerConfig15.width,
+    style = _usePickerConfig15.style;
+  return _extends({
+    height: getDimension(height),
+    width: getDimension(width)
+  }, style);
+}
+function useReactionsOpenConfig() {
+  var _usePickerConfig16 = usePickerConfig(),
+    reactionsDefaultOpen = _usePickerConfig16.reactionsDefaultOpen;
+  return reactionsDefaultOpen;
+}
+function useEmojiVersionConfig() {
+  var _usePickerConfig17 = usePickerConfig(),
+    emojiVersion = _usePickerConfig17.emojiVersion;
+  return emojiVersion;
+}
+function useSearchDisabledConfig() {
+  var _usePickerConfig18 = usePickerConfig(),
+    searchDisabled = _usePickerConfig18.searchDisabled;
+  return searchDisabled;
+}
+function useSkinTonePickerLocationConfig() {
+  var _usePickerConfig19 = usePickerConfig(),
+    skinTonePickerLocation = _usePickerConfig19.skinTonePickerLocation;
+  return skinTonePickerLocation;
+}
+function useUnicodeToHide() {
+  var _usePickerConfig20 = usePickerConfig(),
+    unicodeToHide = _usePickerConfig20.unicodeToHide;
+  return unicodeToHide;
+}
+function useReactionsConfig() {
+  var _usePickerConfig21 = usePickerConfig(),
+    reactions = _usePickerConfig21.reactions;
+  return reactions;
+}
+function useGetEmojiUrlConfig() {
+  var _usePickerConfig22 = usePickerConfig(),
+    getEmojiUrl = _usePickerConfig22.getEmojiUrl;
+  return getEmojiUrl;
+}
+function getDimension(dimensionConfig) {
+  return typeof dimensionConfig === 'number' ? dimensionConfig + "px" : dimensionConfig;
+}
+function useSearchResultsConfig(searchResultsCount) {
+  var hasResults = searchResultsCount > 0;
+  var isPlural = searchResultsCount > 1;
+  if (hasResults) {
+    return isPlural ? SEARCH_RESULTS_MULTIPLE_RESULTS_FOUND.replace('%n', searchResultsCount.toString()) : SEARCH_RESULTS_ONE_RESULT_FOUND;
+  }
+  return SEARCH_RESULTS_NO_RESULTS_FOUND;
+}
+
 function useIsSearchMode() {
   var _useSearchTermState = useSearchTermState(),
     searchTerm = _useSearchTermState[0];
@@ -20412,11 +20437,13 @@ var styles$d = /*#__PURE__*/stylesheet.create({
 function Preview() {
   var previewConfig = usePreviewConfig();
   var isSkinToneInPreview = useIsSkinToneInPreview();
+  var _useReactionsModeStat = useReactionsModeState(),
+    reactionsOpen = _useReactionsModeStat[0];
   if (!previewConfig.showPreview) {
     return null;
   }
   return React.createElement(Flex, {
-    className: flairup.cx(styles$e.preview, commonInteractionStyles.hiddenOnReactions)
+    className: flairup.cx(styles$e.preview, commonInteractionStyles.hiddenOnReactions, reactionsOpen && styles$e.hideOnReactions)
   }, React.createElement(PreviewBody, null), React.createElement(Space, null), isSkinToneInPreview ? React.createElement(SkinTonePickerMenu, null) : null);
 }
 function PreviewBody() {
@@ -20475,6 +20502,10 @@ var styles$e = /*#__PURE__*/stylesheet.create({
   },
   emoji: {
     padding: '0'
+  },
+  hideOnReactions: {
+    opacity: '0',
+    transition: 'opacity 0.5s ease-in-out'
   }
 });