emoji-picker-react 4.5.5 → 4.5.7

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.5.5",
+  "version": "4.5.7",
   "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/DomUtils/selectors.ts

@@ -1,7 +1,7 @@
 import { DataEmoji } from '../dataUtils/DataTypes';
 import {
   emojiByUnified,
-  unifiedWithoutSkinTone,
+  unifiedWithoutSkinTone
 } from '../dataUtils/emojiSelectors';
 
 import { asSelectors, ClassNames } from './classNames';
@@ -13,7 +13,7 @@ export const EmojiButtonSelector = `button${asSelectors(ClassNames.emoji)}`;
 export const VisibleEmojiSelector = [
   EmojiButtonSelector,
   asSelectors(ClassNames.visible),
-  `:not(${asSelectors(ClassNames.hidden)})`,
+  `:not(${asSelectors(ClassNames.hidden)})`
 ].join('');
 
 export function buttonFromTarget(
@@ -40,7 +40,7 @@ export function emojiFromElement(
     return [];
   }
 
-  const emoji = emojiByUnified(originalUnified);
+  const emoji = emojiByUnified(unified ?? originalUnified);
 
   if (!emoji) {
     return [];

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/emoji/Emoji.css

@@ -67,6 +67,10 @@
   letter-spacing: 0;
 }
 
+.EmojiPickerReact button.epr-emoji > * {
+  transition: background-color 0.2s;
+}
+
 .EmojiPickerReact button.epr-emoji:hover > * {
   background-color: var(--epr-emoji-hover-color);
 }

package/src/components/footer/Preview.tsx

@@ -17,8 +17,8 @@ import Flex from '../Layout/Flex';
 import Space from '../Layout/Space';
 import { useEmojiVariationPickerState } from '../context/PickerContext';
 import './Preview.css';
-import { SkinTonePickerMenu } from '../header/SkinTonePicker';
 import { ViewOnlyEmoji } from '../emoji/ViewOnlyEmoji';
+import { SkinTonePickerMenu } from '../header/SkinTonePicker';
 
 export function Preview() {
   const previewConfig = usePreviewConfig();
@@ -46,16 +46,19 @@ export function PreviewBody() {
 
   useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
 
-  const emoji = emojiByUnified(previewEmoji?.originalUnified);
+  const emoji = emojiByUnified(
+    previewEmoji?.unified ?? previewEmoji?.originalUnified
+  );
 
   const show = emoji != null && previewEmoji != null;
 
   return <PreviewContent />;
 
   function PreviewContent() {
-    const defaultEmoji = variationPickerEmoji ?? emojiByUnified(previewConfig.defaultEmoji)
+    const defaultEmoji =
+      variationPickerEmoji ?? emojiByUnified(previewConfig.defaultEmoji);
     if (!defaultEmoji) {
-      return null
+      return null;
     }
     const defaultText = variationPickerEmoji
       ? emojiName(variationPickerEmoji)
@@ -83,9 +86,7 @@ export function PreviewBody() {
           ) : null}
         </div>
         {show ? (
-          <div className="epr-preview-emoji-label">
-            {emojiName(emoji)}
-          </div>
+          <div className="epr-preview-emoji-label">{emojiName(emoji)}</div>
         ) : (
           <div className="epr-preview-emoji-label">{defaultText}</div>
         )}

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/src/dataUtils/emojiSelectors.ts

@@ -123,6 +123,13 @@ const allEmojisByUnified: {
 setTimeout(() => {
   allEmojis.reduce((allEmojis, Emoji) => {
     allEmojis[emojiUnified(Emoji)] = Emoji;
+
+    if (emojiHasVariations(Emoji)) {
+      emojiVariations(Emoji).forEach(variation => {
+        allEmojis[variation] = Emoji;
+      });
+    }
+
     return allEmojis;
   }, allEmojisByUnified);
 });

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;
-}