emoji-picker-react 4.4.6 → 4.4.8

package/README.md

@@ -28,6 +28,15 @@ function App() {
 }
 ```
 
+## Shout Outs!
+
+
+| Component Design 🎨 |
+|:-:|
+| <a href="https://pavelbolo.com" target="_blank">![317751726_1277528579755086_5320360926126813336_n copy](https://user-images.githubusercontent.com/11255103/205937426-a570b4a1-7243-4d3e-a7e5-ea04b61d940a.png)</a> | 
+| <a href="https://pavelbolo.com" target="_blank">Pavel Bolo</a> | 
+
+
 ## Features
 
 - Custom click handler
@@ -263,3 +272,11 @@ For reference, if you only need to shim global, you can add
   window.global = window;
 </script>
 ```
+
+# Other stuff I build
+
+If you enjoy using emoji-picker-react, you may be interested in some of my other open source projects:
+
+- [Vest](https://github.com/ealush/vest) - The best form validation framwork to date.
+- [Context](https://github.com/ealush/vest/tree/latest/packages/context) - Context propagation library for JS Apps.
+- [n4s](https://github.com/ealush/vest/tree/latest/packages/n4s) - enforce: fluent assertion library.

package/dist/components/body/EmojiVariationPicker.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import './EmojiVariationPicker.css';
-export declare function EmojiVariationPicker(): JSX.Element | null;
+export declare function EmojiVariationPicker(): JSX.Element;

package/dist/emoji-picker-react.cjs.development.js

@@ -17088,14 +17088,14 @@ function PickerContextProvider(_ref) {
       activeSkinTone: activeSkinTone,
       disallowClickRef: disallowClickRef,
       disallowMouseRef: disallowMouseRef,
+      disallowedEmojisRef: disallowedEmojisRef,
       emojiVariationPickerState: emojiVariationPickerState,
       emojisThatFailedToLoadState: emojisThatFailedToLoadState,
       filterRef: filterRef,
       isPastInitialLoad: isPastInitialLoad,
       searchTerm: searchTerm,
       skinToneFanOpenState: skinToneFanOpenState,
-      suggestedUpdateState: suggestedUpdateState,
-      disallowedEmojisRef: disallowedEmojisRef
+      suggestedUpdateState: suggestedUpdateState
     }
   }, children);
 }
@@ -17674,12 +17674,10 @@ function useSetVariationPicker() {
     var _emojiFromElement = emojiFromElement(element),
         emoji = _emojiFromElement[0];
 
-    if (!emoji) {
-      return;
+    if (emoji) {
+      setAnchoredEmojiRef(element);
+      setEmojiVariationPicker(emoji);
     }
-
-    setAnchoredEmojiRef(element);
-    setEmojiVariationPicker(emoji);
   };
 }
 
@@ -18285,7 +18283,8 @@ function RenderCategory(_ref) {
       activeSkinTone = _useActiveSkinToneSta[0];
 
   var isEmojiDisallowed = useIsEmojiDisallowed();
-  var getEmojiUrl = useGetEmojiUrlConfig(); // Small trick to defer the rendering of all emoji categories until the first category is visible
+  var getEmojiUrl = useGetEmojiUrlConfig();
+  var 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.
 
   var emojisToPush = !isPastInitialLoad && index > 1 ? [] : emojisByCategory(category);
@@ -18309,6 +18308,7 @@ function RenderCategory(_ref) {
     }
 
     return React.createElement(ClickableEmoji, {
+      showVariations: showVariations,
       key: unified,
       emoji: emoji,
       unified: unified,
@@ -18482,10 +18482,6 @@ function EmojiVariationPicker() {
     pointerStyle = getPointerStyle();
   }
 
-  if (!emoji) {
-    return null;
-  }
-
   return React.createElement("div", {
     ref: VariationPickerRef,
     className: clsx(ClassNames.variationPicker, {
@@ -18495,7 +18491,7 @@ function EmojiVariationPicker() {
     style: {
       top: top
     }
-  }, visible ? [emojiUnified(emoji)].concat(emojiVariations(emoji)).slice(0, 6).map(function (unified) {
+  }, visible && emoji ? [emojiUnified(emoji)].concat(emojiVariations(emoji)).slice(0, 6).map(function (unified) {
     return React.createElement(ClickableEmoji, {
       key: unified,
       emoji: emoji,