emoji-picker-react 4.7.7-rc.0 → 4.7.7

package/dist/hooks/useIsEverMounted.d.ts

@@ -0,0 +1 @@
+export declare function useIsEverMounted(): boolean;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.7.7-rc.0",
+  "version": "4.7.7",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/Stylesheet/stylesheet.tsx

@@ -2,7 +2,7 @@ import { createSheet } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../DomUtils/classNames';
-import { useIsMounted } from '../hooks/useIsMounted';
+import { useIsEverMounted } from '../hooks/useIsEverMounted';
 
 export const stylesheet = createSheet('epr');
 
@@ -22,7 +22,7 @@ export const commonStyles = stylesheet.create({
 });
 
 export function PickerStyleTag() {
-  const isMounted = useIsMounted();
+  const isMounted = useIsEverMounted();
 
   if (stylesheet.isApplied() && isMounted) {
     return null;

package/src/components/body/EmojiList.tsx

@@ -32,7 +32,7 @@ export function EmojiList() {
   const renderdCategoriesCountRef = React.useRef(0);
 
   return (
-    <ul className={cx(styles.emojiList)} suppressHydrationWarning>
+    <ul className={cx(styles.emojiList)}>
       {categories.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
 

package/src/components/body/Suggested.tsx

@@ -8,6 +8,7 @@ import {
 } from '../../config/useConfig';
 import { emojiByUnified } from '../../dataUtils/emojiSelectors';
 import { getSuggested } from '../../dataUtils/suggested';
+import { useIsEverMounted } from '../../hooks/useIsEverMounted';
 import { useUpdateSuggested } from '../context/PickerContext';
 import { ClickableEmoji } from '../emoji/Emoji';
 
@@ -19,6 +20,7 @@ type Props = Readonly<{
 
 export function Suggested({ categoryConfig }: Props) {
   const [suggestedUpdated] = useUpdateSuggested();
+  const isMounted = useIsEverMounted();
   const suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
   const getEmojiUrl = useGetEmojiUrlConfig();
   const suggested = React.useMemo(
@@ -28,6 +30,10 @@ export function Suggested({ categoryConfig }: Props) {
   );
   const emojiStyle = useEmojiStyleConfig();
 
+  if (!isMounted) {
+    return null;
+  }
+
   return (
     <EmojiCategory
       categoryConfig={categoryConfig}

package/src/hooks/useIsEverMounted.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+let isEverMounted = false;
+
+export function useIsEverMounted() {
+  const [isMounted, setIsMounted] = React.useState(isEverMounted);
+
+  React.useEffect(() => {
+    setIsMounted(true);
+    isEverMounted = true;
+  }, []);
+
+  return isMounted || isEverMounted;
+}

package/dist/hooks/useIsMounted.d.ts

@@ -1 +0,0 @@
-export declare function useIsMounted(): boolean;

package/src/hooks/useIsMounted.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-
-export function useIsMounted() {
-  const [isMounted, setIsMounted] = React.useState(false);
-
-  React.useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  return isMounted;
-}