emoji-picker-react 4.7.10 → 4.7.12

package/README.md

@@ -6,8 +6,7 @@
 
 ![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/c28cc954-dc1d-4d82-91a8-64a74cf1d598)
----
+## ![reactions](https://github.com/ealush/emoji-picker-react/assets/11255103/c28cc954-dc1d-4d82-91a8-64a74cf1d598)
 
 _If you enjoy using emoji-picker-react<br/>
 You should also consider trying:<br/>
@@ -65,6 +64,7 @@ The following props are accepted by them picker:
 
 | Prop                   | Type                                                   | Default    | Description                                                                                                                                                |
 | ---------------------- | ------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| open                   | boolean                                                | `true`     | Controls whether the picker is open or not.                                                                                                                |
 | 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`.                                                                          |

package/dist/Stylesheet/stylesheet.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { Styles } from 'flairup';
+import * as React from 'react';
 export declare const stylesheet: {
     create: <K extends string>(styles: Partial<{ [k in K]: Partial<Partial<CSSStyleDeclaration> & Partial<{
         '.'?: string | string[] | undefined;
@@ -9,7 +9,7 @@ export declare const stylesheet: {
     isApplied: () => boolean;
 };
 export declare const commonStyles: Record<never, Set<string>>;
-export declare function PickerStyleTag(): JSX.Element | null;
+export declare const PickerStyleTag: React.NamedExoticComponent<object>;
 export declare const commonInteractionStyles: Record<never, Set<string>>;
 export declare function darkMode(key: string, value: Styles): {
     '.epr-dark-theme': {

package/dist/config/config.d.ts

@@ -34,6 +34,7 @@ export declare type PickerConfigInternal = {
     customEmojis: CustomEmoji[];
     reactionsDefaultOpen: boolean;
     reactions: string[];
+    open: boolean;
 };
 export declare type PreviewConfig = {
     defaultEmoji: string;

package/dist/config/useConfig.d.ts

@@ -14,6 +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 useOpenConfig(): boolean;
 export declare function useOnEmojiClickConfig(mouseEventSource: MOUSE_EVENT_SOURCE): (emoji: EmojiClickData, event: MouseEvent) => void;
 export declare function usePreviewConfig(): PreviewConfig;
 export declare function useThemeConfig(): Theme;

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

@@ -110,19 +110,7 @@ function asSelectors() {
   }).join('');
 }
 
-var isEverMounted = false;
-function useIsEverMounted() {
-  var _React$useState = React.useState(isEverMounted),
-    isMounted = _React$useState[0],
-    setIsMounted = _React$useState[1];
-  React.useEffect(function () {
-    setIsMounted(true);
-    isEverMounted = true;
-  }, []);
-  return isMounted || isEverMounted;
-}
-
-var stylesheet = /*#__PURE__*/flairup.createSheet('epr');
+var stylesheet = /*#__PURE__*/flairup.createSheet('epr', null);
 var hidden = {
   display: 'none',
   opacity: '0',
@@ -135,18 +123,14 @@ var commonStyles = /*#__PURE__*/stylesheet.create({
     '.': ClassNames.hidden
   }, hidden)
 });
-function PickerStyleTag() {
-  var isMounted = useIsEverMounted();
-  if (stylesheet.isApplied() && isMounted) {
-    return null;
-  }
+var PickerStyleTag = /*#__PURE__*/React.memo(function PickerStyleTag() {
   return React.createElement("style", {
     suppressHydrationWarning: true,
     dangerouslySetInnerHTML: {
       __html: stylesheet.getStyle()
     }
   });
-}
+});
 var commonInteractionStyles = /*#__PURE__*/stylesheet.create({
   '.epr-main': {
     ':has(input:not(:placeholder-shown))': {
@@ -16851,7 +16835,8 @@ function basePickerConfig() {
     unicodeToHide: new Set(KNOWN_FAILING_EMOJIS),
     width: 350,
     reactionsDefaultOpen: false,
-    reactions: DEFAULT_REACTIONS
+    reactions: DEFAULT_REACTIONS,
+    open: true
   };
 }
 var basePreviewConfig = {
@@ -16871,25 +16856,29 @@ function PickerConfigProvider(_ref) {
   }, children);
 }
 function useSetConfig(config) {
-  var _config$customEmojis2;
+  var _config$customEmojis;
   var _React$useState = React.useState(function () {
       return mergeConfig(config);
     }),
     mergedConfig = _React$useState[0],
     setMergedConfig = _React$useState[1];
   React.useEffect(function () {
-    var _config$customEmojis, _mergedConfig$customE;
-    if (((_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length) !== ((_mergedConfig$customE = mergedConfig.customEmojis) == null ? void 0 : _mergedConfig$customE.length)) {
-      setMergedConfig(mergeConfig(config));
+    if (avoidRefresh(config, mergedConfig)) {
+      return;
     }
+    setMergedConfig(mergeConfig(config));
     // not gonna...
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [(_config$customEmojis2 = config.customEmojis) == null ? void 0 : _config$customEmojis2.length]);
+  }, [(_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length, config.open]);
   return mergedConfig;
 }
 function usePickerConfig() {
   return React.useContext(ConfigContext);
 }
+function avoidRefresh(prev, next) {
+  var _prev$customEmojis, _next$customEmojis;
+  return ((_prev$customEmojis = prev.customEmojis) == null ? void 0 : _prev$customEmojis.length) === ((_next$customEmojis = next.customEmojis) == null ? void 0 : _next$customEmojis.length) && prev.open === next.open;
+}
 
 var MutableConfigContext = /*#__PURE__*/React__default.createContext({});
 function useMutableConfig() {
@@ -16903,7 +16892,8 @@ function useDefineMutableConfig(config) {
   });
   React__default.useEffect(function () {
     MutableConfigRef.current.onEmojiClick = config.onEmojiClick || emptyFunc;
-  }, [config.onEmojiClick]);
+    MutableConfigRef.current.onReactionClick = config.onReactionClick || config.onEmojiClick;
+  }, [config.onEmojiClick, config.onReactionClick]);
   return MutableConfigRef;
 }
 function emptyFunc() {}
@@ -16952,6 +16942,11 @@ function useCustomEmojisConfig() {
     customEmojis = _usePickerConfig7.customEmojis;
   return customEmojis;
 }
+function useOpenConfig() {
+  var _usePickerConfig8 = usePickerConfig(),
+    open = _usePickerConfig8.open;
+  return open;
+}
 function useOnEmojiClickConfig(mouseEventSource) {
   var _ref;
   var _useMutableConfig = useMutableConfig(),
@@ -16960,73 +16955,73 @@ function useOnEmojiClickConfig(mouseEventSource) {
   return handler || function () {};
 }
 function usePreviewConfig() {
-  var _usePickerConfig8 = usePickerConfig(),
-    previewConfig = _usePickerConfig8.previewConfig;
+  var _usePickerConfig9 = usePickerConfig(),
+    previewConfig = _usePickerConfig9.previewConfig;
   return previewConfig;
 }
 function useThemeConfig() {
-  var _usePickerConfig9 = usePickerConfig(),
-    theme = _usePickerConfig9.theme;
+  var _usePickerConfig10 = usePickerConfig(),
+    theme = _usePickerConfig10.theme;
   return theme;
 }
 function useSuggestedEmojisModeConfig() {
-  var _usePickerConfig10 = usePickerConfig(),
-    suggestedEmojisMode = _usePickerConfig10.suggestedEmojisMode;
+  var _usePickerConfig11 = usePickerConfig(),
+    suggestedEmojisMode = _usePickerConfig11.suggestedEmojisMode;
   return suggestedEmojisMode;
 }
 function useLazyLoadEmojisConfig() {
-  var _usePickerConfig11 = usePickerConfig(),
-    lazyLoadEmojis = _usePickerConfig11.lazyLoadEmojis;
+  var _usePickerConfig12 = usePickerConfig(),
+    lazyLoadEmojis = _usePickerConfig12.lazyLoadEmojis;
   return lazyLoadEmojis;
 }
 function useClassNameConfig() {
-  var _usePickerConfig12 = usePickerConfig(),
-    className = _usePickerConfig12.className;
+  var _usePickerConfig13 = usePickerConfig(),
+    className = _usePickerConfig13.className;
   return className;
 }
 function useStyleConfig() {
-  var _usePickerConfig13 = usePickerConfig(),
-    height = _usePickerConfig13.height,
-    width = _usePickerConfig13.width,
-    style = _usePickerConfig13.style;
+  var _usePickerConfig14 = usePickerConfig(),
+    height = _usePickerConfig14.height,
+    width = _usePickerConfig14.width,
+    style = _usePickerConfig14.style;
   return _extends({
     height: getDimension(height),
     width: getDimension(width)
   }, style);
 }
 function useReactionsOpenConfig() {
-  var _usePickerConfig14 = usePickerConfig(),
-    reactionsDefaultOpen = _usePickerConfig14.reactionsDefaultOpen;
+  var _usePickerConfig15 = usePickerConfig(),
+    reactionsDefaultOpen = _usePickerConfig15.reactionsDefaultOpen;
   return reactionsDefaultOpen;
 }
 function useEmojiVersionConfig() {
-  var _usePickerConfig15 = usePickerConfig(),
-    emojiVersion = _usePickerConfig15.emojiVersion;
+  var _usePickerConfig16 = usePickerConfig(),
+    emojiVersion = _usePickerConfig16.emojiVersion;
   return emojiVersion;
 }
 function useSearchDisabledConfig() {
-  var _usePickerConfig16 = usePickerConfig(),
-    searchDisabled = _usePickerConfig16.searchDisabled;
+  var _usePickerConfig17 = usePickerConfig(),
+    searchDisabled = _usePickerConfig17.searchDisabled;
   return searchDisabled;
 }
 function useSkinTonePickerLocationConfig() {
-  var _usePickerConfig17 = usePickerConfig(),
-    skinTonePickerLocation = _usePickerConfig17.skinTonePickerLocation;
+  var _usePickerConfig18 = usePickerConfig(),
+    skinTonePickerLocation = _usePickerConfig18.skinTonePickerLocation;
   return skinTonePickerLocation;
 }
 function useUnicodeToHide() {
-  var _usePickerConfig18 = usePickerConfig(),
-    unicodeToHide = _usePickerConfig18.unicodeToHide;
+  var _usePickerConfig19 = usePickerConfig(),
+    unicodeToHide = _usePickerConfig19.unicodeToHide;
   return unicodeToHide;
 }
 function useReactionsConfig() {
-  var _usePickerConfig19 = usePickerConfig(),
-    reactions = _usePickerConfig19.reactions;
+  var _usePickerConfig20 = usePickerConfig(),
+    reactions = _usePickerConfig20.reactions;
   return reactions;
 }
 function useGetEmojiUrlConfig() {
-  var _usePickerConfig20 = usePickerConfig(),
-    getEmojiUrl = _usePickerConfig20.getEmojiUrl;
+  var _usePickerConfig21 = usePickerConfig(),
+    getEmojiUrl = _usePickerConfig21.getEmojiUrl;
   return getEmojiUrl;
 }
 function getDimension(dimensionConfig) {
@@ -18525,6 +18520,18 @@ var styles$6 = /*#__PURE__*/stylesheet.create({
   }
 });
 
+var isEverMounted = false;
+function useIsEverMounted() {
+  var _React$useState = React.useState(isEverMounted),
+    isMounted = _React$useState[0],
+    setIsMounted = _React$useState[1];
+  React.useEffect(function () {
+    setIsMounted(true);
+    isEverMounted = true;
+  }, []);
+  return isMounted || isEverMounted;
+}
+
 function Suggested(_ref) {
   var categoryConfig = _ref.categoryConfig;
   var _useUpdateSuggested = useUpdateSuggested(),
@@ -20187,7 +20194,7 @@ function useOnFocus() {
 var _excluded$1 = ["width", "height"];
 function PickerMain(_ref) {
   var children = _ref.children;
-  return React.createElement(PickerContextProvider, null, React.createElement(PickerStyleTag, null), React.createElement(PickerRootElement, null, children));
+  return React.createElement(PickerContextProvider, null, React.createElement(PickerRootElement, null, children));
 }
 function PickerRootElement(_ref2) {
   var _cx;
@@ -20353,7 +20360,7 @@ var styles$j = /*#__PURE__*/stylesheet.create({
 });
 
 function EmojiPicker(props) {
-  return React.createElement(ElementRefContextProvider, null, React.createElement(PickerConfigProvider, Object.assign({}, props), React.createElement(ContentControl, null)));
+  return React.createElement(ElementRefContextProvider, null, React.createElement(PickerStyleTag, null), React.createElement(PickerConfigProvider, Object.assign({}, props), React.createElement(ContentControl, null)));
 }
 function ContentControl() {
   var _useReactionsModeStat = useReactionsModeState(),
@@ -20361,11 +20368,15 @@ function ContentControl() {
   var _React$useState = React.useState(!reactionsDefaultOpen),
     renderAll = _React$useState[0],
     setRenderAll = _React$useState[1];
+  var isOpen = useOpenConfig();
   React.useEffect(function () {
     if (!renderAll) {
       setRenderAll(true);
     }
   }, [renderAll]);
+  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);
 }
 // eslint-disable-next-line complexity
@@ -20373,7 +20384,7 @@ var EmojiPickerReact = /*#__PURE__*/React.memo(EmojiPicker, function (prev, next
   var _prev$customEmojis, _next$customEmojis;
   var prevCustomEmojis = (_prev$customEmojis = prev.customEmojis) != null ? _prev$customEmojis : [];
   var nextCustomEmojis = (_next$customEmojis = next.customEmojis) != null ? _next$customEmojis : [];
-  return prev.emojiVersion === next.emojiVersion && prev.reactionsDefaultOpen === next.reactionsDefaultOpen && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
+  return prev.open === next.open && prev.emojiVersion === next.emojiVersion && prev.reactionsDefaultOpen === next.reactionsDefaultOpen && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length;
 });
 
 var ErrorBoundary = /*#__PURE__*/function (_React$Component) {