emoji-picker-react 4.5.4 → 4.5.6

package/package.json

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

package/src/DomUtils/classNames.ts

@@ -16,7 +16,9 @@ export enum ClassNames {
   open = 'epr-open',
   vertical = 'epr-vertical',
   horizontal = 'epr-horizontal',
-  variationPicker = 'epr-emoji-variation-picker'
+  variationPicker = 'epr-emoji-variation-picker',
+  darkTheme = 'epr-dark-theme',
+  autoTheme = 'epr-auto-theme'
 }
 
 export function asSelectors(...classNames: ClassNames[]): string {

package/src/EmojiPickerReact.css

@@ -71,21 +71,78 @@
   --epr-preview-z-index: 6;
 }
 
-.EmojiPickerReact.epr-dark-theme {
+.EmojiPickerReact {
+  /* Dark Theme Variables */
   --epr-dark: #000;
-  --epr-emoji-variation-picker-bg-color: var(--epr-dark);
-  --epr-highlight-color: #c0c0c0;
-  --epr-text-color: var(--epr-highlight-color);
-  --epr-hover-bg-color: #363636f6;
-  --epr-focus-bg-color: #474747;
-  --epr-search-input-bg-color: #333333;
-  --epr-category-label-bg-color: #222222e6;
-  --epr-picker-border-color: #151617;
-  --epr-bg-color: #222222;
-  --epr-search-input-bg-color-active: var(--epr-dark);
-  --epr-emoji-variation-indicator-color: #444;
-  --epr-category-icon-active-color: #3271b7;
-  --epr-skin-tone-picker-menu-color: #22222295;
+  --epr-dark-emoji-variation-picker-bg-color: var(--epr-dark);
+  --epr-dark-highlight-color: #c0c0c0;
+  --epr-dark-text-color: var(--epr-highlight-color);
+  --epr-dark-hover-bg-color: #363636f6;
+  --epr-dark-focus-bg-color: #474747;
+  --epr-dark-search-input-bg-color: #333333;
+  --epr-dark-category-label-bg-color: #222222e6;
+  --epr-dark-picker-border-color: #151617;
+  --epr-dark-bg-color: #222222;
+  --epr-dark-search-input-bg-color-active: var(--epr-dark);
+  --epr-dark-emoji-variation-indicator-color: #444;
+  --epr-dark-category-icon-active-color: #3271b7;
+  --epr-dark-skin-tone-picker-menu-color: #22222295;
+}
+
+@media (prefers-color-scheme: dark) {
+  /* Keep in sync with the section below */
+  .EmojiPickerReact.epr-auto-theme {
+    --epr-dark: var(--epr-dark-dark);
+    --epr-emoji-variation-picker-bg-color: var(
+      --epr-dark-emoji-variation-picker-bg-color
+    );
+    --epr-highlight-color: var(--epr-dark-highlight-color);
+    --epr-text-color: var(--epr-dark-text-color);
+    --epr-hover-bg-color: var(--epr-dark-hover-bg-color);
+    --epr-focus-bg-color: var(--epr-dark-focus-bg-color);
+    --epr-search-input-bg-color: var(--epr-dark-search-input-bg-color);
+    --epr-category-label-bg-color: var(--epr-dark-category-label-bg-color);
+    --epr-picker-border-color: var(--epr-dark-picker-border-color);
+    --epr-bg-color: var(--epr-dark-bg-color);
+    --epr-search-input-bg-color-active: var(
+      --epr-dark-search-input-bg-color-active
+    );
+    --epr-emoji-variation-indicator-color: var(
+      --epr-dark-emoji-variation-indicator-color
+    );
+    --epr-category-icon-active-color: var(
+      --epr-dark-category-icon-active-color
+    );
+    --epr-skin-tone-picker-menu-color: var(
+      --epr-dark-skin-tone-picker-menu-color
+    );
+  }
+}
+
+.EmojiPickerReact.epr-dark-theme {
+  /* Keep in sync with the section above */
+  --epr-dark: var(--epr-dark-dark);
+  --epr-emoji-variation-picker-bg-color: var(
+    --epr-dark-emoji-variation-picker-bg-color
+  );
+  --epr-highlight-color: var(--epr-dark-highlight-color);
+  --epr-text-color: var(--epr-dark-text-color);
+  --epr-hover-bg-color: var(--epr-dark-hover-bg-color);
+  --epr-focus-bg-color: var(--epr-dark-focus-bg-color);
+  --epr-search-input-bg-color: var(--epr-dark-search-input-bg-color);
+  --epr-category-label-bg-color: var(--epr-dark-category-label-bg-color);
+  --epr-picker-border-color: var(--epr-dark-picker-border-color);
+  --epr-bg-color: var(--epr-dark-bg-color);
+  --epr-search-input-bg-color-active: var(
+    --epr-dark-search-input-bg-color-active
+  );
+  --epr-emoji-variation-indicator-color: var(
+    --epr-dark-emoji-variation-indicator-color
+  );
+  --epr-category-icon-active-color: var(--epr-dark-category-icon-active-color);
+  --epr-skin-tone-picker-menu-color: var(
+    --epr-dark-skin-tone-picker-menu-color
+  );
 }
 
 .EmojiPickerReact {

package/src/components/body/EmojiList.tsx

@@ -29,10 +29,11 @@ import './EmojiList.css';
 
 export function EmojiList() {
   const categories = useCategoriesConfig();
+  const renderdCategoriesCountRef = React.useRef(0);
 
   return (
     <ul className={ClassNames.emojiList}>
-      {categories.map((categoryConfig, index) => {
+      {categories.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
 
         if (category === Categories.SUGGESTED) {
@@ -42,9 +43,9 @@ export function EmojiList() {
         return (
           <RenderCategory
             key={category}
-            index={index}
             category={category}
             categoryConfig={categoryConfig}
+            renderdCategoriesCountRef={renderdCategoriesCountRef}
           />
         );
       })}
@@ -53,13 +54,13 @@ export function EmojiList() {
 }
 
 function RenderCategory({
-  index,
   category,
-  categoryConfig
+  categoryConfig,
+  renderdCategoriesCountRef
 }: {
-  index: number;
   category: Categories;
   categoryConfig: CategoryConfig;
+  renderdCategoriesCountRef: React.MutableRefObject<number>;
 }) {
   const isEmojiHidden = useIsEmojiHidden();
   const lazyLoadEmojis = useLazyLoadEmojisConfig();
@@ -73,7 +74,13 @@ function RenderCategory({
   // Small trick to defer the rendering of all emoji categories until the first category is visible
   // This way the user gets to actually see something and not wait for the whole picker to render.
   const emojisToPush =
-    !isPastInitialLoad && index > 1 ? [] : emojisByCategory(category);
+    !isPastInitialLoad && renderdCategoriesCountRef.current > 0
+      ? []
+      : emojisByCategory(category);
+
+  if (emojisToPush.length > 0) {
+    renderdCategoriesCountRef.current++;
+  }
 
   let hiddenCounter = 0;
 

package/src/components/main/PickerMain.tsx

@@ -40,11 +40,14 @@ function PickerRootElement({ children }: RootProps) {
     width
   };
 
+  
+
   return (
     <aside
       className={clsx(ClassNames.emojiPicker, 'epr-main', {
         [ClassNames.searchActive]: searchModeActive,
-        'epr-dark-theme': theme === Theme.DARK
+        [ClassNames.darkTheme]: theme === Theme.DARK,
+        [ClassNames.autoTheme]: theme === Theme.AUTO
       })}
       ref={PickerMainRef}
       style={style}

package/src/config/useConfig.ts

@@ -1,4 +1,3 @@
-import { isSystemDarkTheme } from '../DomUtils/isDarkTheme';
 import { usePickerConfig } from '../components/context/PickerConfigContext';
 import {
   EmojiClickData,
@@ -73,10 +72,6 @@ export function usePreviewConfig(): PreviewConfig {
 export function useThemeConfig(): Theme {
   const { theme } = usePickerConfig();
 
-  if (theme === Theme.AUTO) {
-    return isSystemDarkTheme() ? Theme.DARK : Theme.LIGHT;
-  }
-
   return theme;
 }
 

package/dist/DomUtils/isDarkTheme.d.ts

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

package/src/DomUtils/isDarkTheme.ts

@@ -1,7 +0,0 @@
-export function isSystemDarkTheme(): boolean {
-  if (typeof window === 'undefined') {
-    return false;
-  }
-
-  return !!window.matchMedia('(prefers-color-scheme: dark)').matches;
-}