emoji-picker-react 4.7.10 → 4.7.12

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.7.10",
+  "version": "4.7.12",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -98,6 +98,6 @@
     "rollup-plugin-svg": "^2.0.0"
   },
   "dependencies": {
-    "flairup": "0.0.35"
+    "flairup": "0.0.37"
   }
 }

package/src/EmojiPickerReact.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { PickerStyleTag } from './Stylesheet/stylesheet';
 import { Reactions } from './components/Reactions/Reactions';
 import { Body } from './components/body/Body';
 import { ElementRefContextProvider } from './components/context/ElementRefContext';
@@ -8,12 +9,14 @@ import { useReactionsModeState } from './components/context/PickerContext';
 import { Preview } from './components/footer/Preview';
 import { Header } from './components/header/Header';
 import PickerMain from './components/main/PickerMain';
+import { useOpenConfig } from './config/useConfig';
 
 import { PickerProps } from './index';
 
 function EmojiPicker(props: PickerProps) {
   return (
     <ElementRefContextProvider>
+      <PickerStyleTag />
       <PickerConfigProvider {...props}>
         <ContentControl />
       </PickerConfigProvider>
@@ -24,6 +27,7 @@ function EmojiPicker(props: PickerProps) {
 function ContentControl() {
   const [reactionsDefaultOpen] = useReactionsModeState();
   const [renderAll, setRenderAll] = React.useState(!reactionsDefaultOpen);
+  const isOpen = useOpenConfig();
 
   React.useEffect(() => {
     if (!renderAll) {
@@ -31,6 +35,10 @@ function ContentControl() {
     }
   }, [renderAll]);
 
+  if (!isOpen) {
+    return null;
+  }
+
   return (
     <PickerMain>
       <Reactions />
@@ -50,6 +58,7 @@ export default React.memo(EmojiPicker, (prev, next) => {
   const prevCustomEmojis = prev.customEmojis ?? [];
   const nextCustomEmojis = next.customEmojis ?? [];
   return (
+    prev.open === next.open &&
     prev.emojiVersion === next.emojiVersion &&
     prev.reactionsDefaultOpen === next.reactionsDefaultOpen &&
     prev.searchPlaceHolder === next.searchPlaceHolder &&

package/src/Stylesheet/stylesheet.tsx

@@ -2,9 +2,8 @@ import { Styles, createSheet } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../DomUtils/classNames';
-import { useIsEverMounted } from '../hooks/useIsEverMounted';
 
-export const stylesheet = createSheet('epr');
+export const stylesheet = createSheet('epr', null);
 
 const hidden = {
   display: 'none',
@@ -21,20 +20,14 @@ export const commonStyles = stylesheet.create({
   }
 });
 
-export function PickerStyleTag() {
-  const isMounted = useIsEverMounted();
-
-  if (stylesheet.isApplied() && isMounted) {
-    return null;
-  }
-
+export const PickerStyleTag = React.memo(function PickerStyleTag() {
   return (
     <style
       suppressHydrationWarning
       dangerouslySetInnerHTML={{ __html: stylesheet.getStyle() }}
     />
   );
-}
+});
 
 export const commonInteractionStyles = stylesheet.create({
   '.epr-main': {

package/src/components/context/PickerConfigContext.tsx

@@ -32,12 +32,13 @@ export function useSetConfig(config: PickerConfig) {
   );
 
   React.useEffect(() => {
-    if (config.customEmojis?.length !== mergedConfig.customEmojis?.length) {
-      setMergedConfig(mergeConfig(config));
+    if (avoidRefresh(config as Props, (mergedConfig as unknown) as Props)) {
+      return;
     }
+    setMergedConfig(mergeConfig(config));
     // not gonna...
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [config.customEmojis?.length]);
+  }, [config.customEmojis?.length, config.open]);
 
   return mergedConfig;
 }
@@ -45,3 +46,10 @@ export function useSetConfig(config: PickerConfig) {
 export function usePickerConfig() {
   return React.useContext(ConfigContext);
 }
+
+function avoidRefresh(prev: Props, next: Props) {
+  return (
+    prev.customEmojis?.length === next.customEmojis?.length &&
+    prev.open === next.open
+  );
+}

package/src/components/main/PickerMain.tsx

@@ -2,7 +2,7 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
-import { PickerStyleTag, stylesheet } from '../../Stylesheet/stylesheet';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
   useClassNameConfig,
   useStyleConfig,
@@ -25,7 +25,6 @@ type Props = Readonly<{
 export default function PickerMain({ children }: Props) {
   return (
     <PickerContextProvider>
-      <PickerStyleTag />
       <PickerRootElement>{children}</PickerRootElement>
     </PickerContextProvider>
   );

package/src/config/config.ts

@@ -88,7 +88,8 @@ export function basePickerConfig(): PickerConfigInternal {
     unicodeToHide: new Set<string>(KNOWN_FAILING_EMOJIS),
     width: 350,
     reactionsDefaultOpen: false,
-    reactions: DEFAULT_REACTIONS
+    reactions: DEFAULT_REACTIONS,
+    open: true
   };
 }
 
@@ -116,6 +117,7 @@ export type PickerConfigInternal = {
   customEmojis: CustomEmoji[];
   reactionsDefaultOpen: boolean;
   reactions: string[];
+  open: boolean;
 };
 
 export type PreviewConfig = {

package/src/config/mutableConfig.ts

@@ -26,7 +26,9 @@ export function useDefineMutableConfig(
 
   React.useEffect(() => {
     MutableConfigRef.current.onEmojiClick = config.onEmojiClick || emptyFunc;
-  }, [config.onEmojiClick]);
+    MutableConfigRef.current.onReactionClick =
+      config.onReactionClick || config.onEmojiClick;
+  }, [config.onEmojiClick, config.onReactionClick]);
 
   return MutableConfigRef;
 }

package/src/config/useConfig.ts

@@ -66,6 +66,11 @@ export function useCustomEmojisConfig(): CustomEmoji[] {
   return customEmojis;
 }
 
+export function useOpenConfig(): boolean {
+  const { open } = usePickerConfig();
+  return open;
+}
+
 export function useOnEmojiClickConfig(
   mouseEventSource: MOUSE_EVENT_SOURCE
 ): (emoji: EmojiClickData, event: MouseEvent) => void {