emoji-picker-react 4.5.6 → 4.5.7

package/package.json

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

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