emoji-picker-react 4.4.6 → 4.4.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.4.6",
+  "version": "4.4.8",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -23,7 +23,7 @@
   },
   "scripts": {
     "start": "tsdx watch",
-    "build": "node ./scripts/prepare.js && tsdx build",
+    "build": "node ./scripts/prepare.js && tsdx build && node ./scripts/copyData.js",
     "test": "tsdx test --passWithNoTests",
     "lint": "eslint ./src --ext .ts,.tsx",
     "prepare": "tsdx build",

package/src/components/body/EmojiList.tsx

@@ -10,7 +10,8 @@ import {
   useCategoriesConfig,
   useEmojiStyleConfig,
   useGetEmojiUrlConfig,
-  useLazyLoadEmojisConfig
+  useLazyLoadEmojisConfig,
+  useSkinTonesDisabledConfig
 } from '../../config/useConfig';
 import { emojisByCategory, emojiUnified } from '../../dataUtils/emojiSelectors';
 import { useIsEmojiDisallowed } from '../../hooks/useDisallowedEmojis';
@@ -67,6 +68,7 @@ function RenderCategory({
   const [activeSkinTone] = useActiveSkinToneState();
   const isEmojiDisallowed = useIsEmojiDisallowed();
   const getEmojiUrl = useGetEmojiUrlConfig();
+  const showVariations = !useSkinTonesDisabledConfig();
 
   // 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.
@@ -91,6 +93,7 @@ function RenderCategory({
 
     return (
       <ClickableEmoji
+        showVariations={showVariations}
         key={unified}
         emoji={emoji}
         unified={unified}

package/src/components/body/EmojiVariationPicker.tsx

@@ -72,10 +72,6 @@ export function EmojiVariationPicker() {
     pointerStyle = getPointerStyle();
   }
 
-  if(!emoji) {
-    return null
-  }
-
   return (
     <div
       ref={VariationPickerRef}
@@ -85,7 +81,7 @@ export function EmojiVariationPicker() {
       })}
       style={{ top }}
     >
-      {visible
+      {visible && emoji
         ? [emojiUnified(emoji)]
             .concat(emojiVariations(emoji))
             .slice(0, 6)

package/src/components/context/PickerContext.tsx

@@ -40,14 +40,14 @@ export function PickerContextProvider({ children }: Props) {
         activeSkinTone,
         disallowClickRef,
         disallowMouseRef,
+        disallowedEmojisRef,
         emojiVariationPickerState,
         emojisThatFailedToLoadState,
         filterRef,
         isPastInitialLoad,
         searchTerm,
         skinToneFanOpenState,
-        suggestedUpdateState,
-        disallowedEmojisRef,
+        suggestedUpdateState
       }}
     >
       {children}
@@ -82,7 +82,7 @@ const PickerContext = React.createContext<{
   isPastInitialLoad: true,
   searchTerm: ['', () => new Promise<string>(() => undefined)],
   skinToneFanOpenState: [false, () => {}],
-  suggestedUpdateState: [Date.now(), () => {}],
+  suggestedUpdateState: [Date.now(), () => {}]
 });
 
 type Props = Readonly<{
@@ -150,7 +150,7 @@ export function useUpdateSuggested(): [number, () => void] {
     suggestedUpdated,
     function updateSuggested() {
       setsuggestedUpdate(Date.now());
-    },
+    }
   ];
 }
 

package/src/dataUtils/emojiSelectors.ts

@@ -4,7 +4,7 @@ import emojis from '../data/emojis';
 import skinToneVariations, {
   skinTonesMapped
 } from '../data/skinToneVariations';
-import { EmojiStyle, SkinTones } from '../types/exposedTypes';
+import { EmojiStyle, SkinTones } from '../types/exposedTypes';  
 
 import { DataEmoji, DataEmojis } from './DataTypes';
 

package/src/hooks/useSetVariationPicker.ts

@@ -9,11 +9,9 @@ export default function useSetVariationPicker() {
   return function setVariationPicker(element: NullableElement) {
     const [emoji] = emojiFromElement(element);
 
-    if (!emoji) {
-      return;
+    if (emoji) {
+      setAnchoredEmojiRef(element);
+      setEmojiVariationPicker(emoji);
     }
-
-    setAnchoredEmojiRef(element);
-    setEmojiVariationPicker(emoji);
   };
 }