emoji-picker-react 4.7.9 → 4.7.11

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.7.9",
+  "version": "4.7.11",
   "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/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/header/Search/BtnClearSearch.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 
 import {
   commonInteractionStyles,
+  darkMode,
   stylesheet
 } from '../../../Stylesheet/stylesheet';
 import { useClearSearch } from '../../../hooks/useFilter';
@@ -72,20 +73,8 @@ const styles = stylesheet.create({
       backgroundPositionY: '-20px'
     }
   },
-  '.epr-dark-theme': {
-    icnClearnSearch: {
-      backgroundPositionY: '-40px'
-    },
-    btnClearSearch: HoverDark
-  },
-  '.epr-auto-theme': {
-    icnClearnSearch: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPositionY: '-40px'
-      }
-    },
-    btnClearSearch: {
-      '@media (prefers-color-scheme: dark)': HoverDark
-    }
-  }
+  ...darkMode('icnClearnSearch', {
+    backgroundPositionY: '-40px'
+  }),
+  ...darkMode('btnClearSearch', HoverDark)
 });

package/src/components/header/Search/Search.tsx

@@ -2,7 +2,7 @@ import { cx } from 'flairup';
 import * as React from 'react';
 import { useState } from 'react';
 
-import { stylesheet } from '../../../Stylesheet/stylesheet';
+import { darkMode, stylesheet } from '../../../Stylesheet/stylesheet';
 import {
   useAutoFocusSearchConfig,
   useSearchDisabledConfig,
@@ -161,29 +161,12 @@ const styles = stylesheet.create({
       backgroundPositionY: '-20px'
     }
   },
-  '.epr-dark-theme': {
-    icnClearnSearch: {
-      backgroundPositionY: '-40px'
-    },
-    btnClearSearch: {
-      ':hover > .epr-icn-clear-search': {
-        backgroundPositionY: '-60px'
-      }
+  ...darkMode('icnClearnSearch', {
+    backgroundPositionY: '-40px'
+  }),
+  ...darkMode('btnClearSearch', {
+    ':hover > .epr-icn-clear-search': {
+      backgroundPositionY: '-60px'
     }
-  },
-  '.epr-auto-theme': {
-    icnClearnSearch: {
-      '@media (prefers-color-scheme: dark)': {
-        backgroundPositionY: '-40px'
-      }
-    },
-    btnClearSearch: {
-      '@media (prefers-color-scheme: dark)': {
-        // @ts-ignore
-        ':hover > .epr-icn-clear-search': {
-          backgroundPositionY: '-60px'
-        }
-      }
-    }
-  }
+  })
 });

package/src/components/navigation/CategoryButton.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { ClassNames } from '../../DomUtils/classNames';
 import {
   commonInteractionStyles,
+  darkMode,
   stylesheet
 } from '../../Stylesheet/stylesheet';
 import {
@@ -128,14 +129,11 @@ const styles = stylesheet.create({
         'calc(var(--epr-category-navigation-button-size) * -3)'
     }
   },
+  ...darkMode('catBtn', DarkPositionY),
   '.epr-dark-theme': {
-    catBtn: DarkPositionY,
     ...DarkInactivePosition
   },
   '.epr-auto-theme': {
-    catBtn: {
-      '@media (prefers-color-scheme: dark)': DarkPositionY
-    },
     ...DarkInactivePosition
   }
 });