emoji-picker-react 4.0.0-rc.21 → 4.0.0-rc.24

package/dist/emoji-picker-react.esm.js

@@ -1,4 +1,4 @@
-import { useRef, createElement, createContext, createRef, useContext, useCallback, useState, useEffect, useMemo, Fragment, Component } from 'react';
+import { useRef, createElement, createContext, createRef, useContext, useCallback, useState, useEffect, Fragment, useMemo, Component } from 'react';
 import clsx from 'clsx';
 
 function _extends() {
@@ -16079,10 +16079,10 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = ".EmojiPickerReact button.epr-emoji{border-radius:8px;padding:var(--epr-emoji-padding);position:relative}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color);border-left:4px solid transparent;border-right:4px solid transparent;bottom:0;content:\"\";display:block;height:0;position:absolute;right:-2px;transform:rotate(135deg);width:0;z-index:var(--epr-emoji-variations-indictator-z-index)}.EmojiPickerReact button.epr-emoji>*{display:block;height:var(--epr-emoji-size);width:var(--epr-emoji-size)}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color-hover)}.EmojiPickerReact button.epr-emoji>.epr-emoji-img{font-size:0}.EmojiPickerReact button.epr-emoji>.epr-emoji-native{font-family:Noto Color Emoji,Apple Color Emoji,Segoe UI Emoji,Times,Symbola,Aegyptus,Code2000,Code2001,Code2002,Musica,serif,LastResort;font-size:var(--epr-emoji-size);line-height:100%}.EmojiPickerReact button.epr-emoji:hover{background-color:var(--epr-emoji-hover-color)}.EmojiPickerReact button.epr-emoji:focus-visible{background-color:var(--epr-focus-bg-color)}";
+var css_248z = ".EmojiPickerReact button.epr-emoji{border-radius:8px;height:var(--epr-emoji-fullsize);padding:var(--epr-emoji-padding);position:relative;width:var(--epr-emoji-fullsize)}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color);border-left:4px solid transparent;border-right:4px solid transparent;bottom:0;content:\"\";display:block;height:0;position:absolute;right:-2px;transform:rotate(135deg);width:0;z-index:var(--epr-emoji-variations-indictator-z-index)}.EmojiPickerReact button.epr-emoji>*{display:block;height:var(--epr-emoji-size);width:var(--epr-emoji-size)}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color-hover)}.EmojiPickerReact button.epr-emoji>.epr-emoji-img{font-size:0}.EmojiPickerReact button.epr-emoji>.epr-emoji-native{font-family:Noto Color Emoji,Apple Color Emoji,Segoe UI Emoji,Times,Symbola,Aegyptus,Code2000,Code2001,Code2002,Musica,serif,LastResort;font-size:var(--epr-emoji-size);line-height:100%}.EmojiPickerReact button.epr-emoji:hover{background-color:var(--epr-emoji-hover-color)}.EmojiPickerReact button.epr-emoji:focus{background-color:var(--epr-focus-bg-color)}";
 styleInject(css_248z);
 
-function Emoji(_ref) {
+function ClickableEmoji(_ref) {
   var _clsx;
 
   var emoji = _ref.emoji,
@@ -16095,31 +16095,46 @@ function Emoji(_ref) {
       emojiRef = _ref.emojiRef,
       lazyLoad = _ref.lazyLoad;
   var hasVariations = emojiHasVariations(emoji);
+  return createElement("button", {
+    className: clsx(ClassNames.emoji, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.visible] = !hidden, _clsx['epr-emoji-has-variations'] = hasVariations && showVariations, _clsx)),
+    "data-unified": unified,
+    // @ts-ignore - let's ignore the fact this is not a real react ref, ok?
+    ref: emojiRef
+  }, createElement(ViewOnlyEmoji, {
+    unified: unified,
+    emoji: emoji,
+    size: size,
+    emojiStyle: emojiStyle,
+    lazyLoad: lazyLoad
+  }));
+}
+function ViewOnlyEmoji(_ref2) {
+  var emoji = _ref2.emoji,
+      unified = _ref2.unified,
+      emojiStyle = _ref2.emojiStyle,
+      size = _ref2.size,
+      lazyLoad = _ref2.lazyLoad;
   var style = {};
 
   if (size) {
     style.width = style.height = style.fontSize = size + "px";
   }
 
-  var base = {
+  return createElement(Fragment, null, emojiStyle === EmojiStyle.NATIVE ? createElement(NativeEmoji, {
+    unified: unified,
+    style: style
+  }) : createElement(EmojiImg, {
+    unified: unified,
     style: style,
-    unified: unified
-  };
-  return createElement("button", {
-    className: clsx(ClassNames.emoji, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.visible] = !hidden, _clsx['epr-emoji-has-variations'] = hasVariations && showVariations, _clsx)),
-    "data-unified": unified,
-    // @ts-ignore - let's ignore the fact this is not a real react ref, ok?
-    ref: emojiRef
-  }, emojiStyle === EmojiStyle.NATIVE ? createElement(NativeEmoji, Object.assign({}, base)) : createElement(EmojiImg, Object.assign({}, base, {
     emoji: emoji,
     emojiStyle: emojiStyle,
     lazyLoad: lazyLoad
-  })));
+  }));
 }
 
-function NativeEmoji(_ref2) {
-  var unified = _ref2.unified,
-      style = _ref2.style;
+function NativeEmoji(_ref3) {
+  var unified = _ref3.unified,
+      style = _ref3.style;
   return createElement("span", {
     className: "epr-emoji-native",
     "data-unified": unified,
@@ -16127,13 +16142,13 @@ function NativeEmoji(_ref2) {
   }, parseNativeEmoji(unified));
 }
 
-function EmojiImg(_ref3) {
-  var emoji = _ref3.emoji,
-      unified = _ref3.unified,
-      emojiStyle = _ref3.emojiStyle,
-      style = _ref3.style,
-      _ref3$lazyLoad = _ref3.lazyLoad,
-      lazyLoad = _ref3$lazyLoad === void 0 ? false : _ref3$lazyLoad;
+function EmojiImg(_ref4) {
+  var emoji = _ref4.emoji,
+      unified = _ref4.unified,
+      emojiStyle = _ref4.emojiStyle,
+      style = _ref4.style,
+      _ref4$lazyLoad = _ref4.lazyLoad,
+      lazyLoad = _ref4$lazyLoad === void 0 ? false : _ref4$lazyLoad;
 
   var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
       setEmojisThatFailedToLoad = _useEmojisThatFailedT[1];
@@ -16205,7 +16220,7 @@ function Suggested(_ref) {
       return null;
     }
 
-    return createElement(Emoji, {
+    return createElement(ClickableEmoji, {
       showVariations: false,
       unified: suggestedItem.unified,
       emojiStyle: emojiStyle,
@@ -16267,7 +16282,7 @@ function RenderCategory(_ref) {
       hiddenCounter++;
     }
 
-    return createElement(Emoji, {
+    return createElement(ClickableEmoji, {
       key: unified,
       emoji: emoji,
       unified: unified,
@@ -16333,7 +16348,7 @@ function EmojiVariationPicker() {
       top: top
     }
   }, visible ? [emojiUnified(safeEmoji)].concat(emojiVariations(safeEmoji)).slice(0, 6).map(function (unified) {
-    return createElement(Emoji, {
+    return createElement(ClickableEmoji, {
       key: unified,
       emoji: safeEmoji,
       unified: unified,
@@ -16583,19 +16598,15 @@ function Preview() {
   function PreviewContent() {
     var defaultEmoji = asEmoji(variationPickerEmoji != null ? variationPickerEmoji : emojiByUnified(previewConfig.defaultEmoji));
     var defaultText = variationPickerEmoji ? emojiName(variationPickerEmoji) : previewConfig.defaultCaption;
-    return createElement(Fragment, null, createElement("div", null, show ? createElement(Emoji, {
+    return createElement(Fragment, null, createElement("div", null, show ? createElement(ViewOnlyEmoji, {
       unified: previewEmoji == null ? void 0 : previewEmoji.unified,
       emoji: asEmoji(emoji),
-      showVariations: false,
       emojiStyle: emojiStyle,
-      hidden: false,
       size: 45
-    }) : defaultEmoji ? createElement(Emoji, {
+    }) : defaultEmoji ? createElement(ViewOnlyEmoji, {
       unified: emojiUnified(defaultEmoji),
       emoji: defaultEmoji,
-      showVariations: false,
       emojiStyle: emojiStyle,
-      hidden: false,
       size: 45
     }) : null), show ? createElement("div", {
       className: "epr-preview-emoji-label"
@@ -16680,7 +16691,34 @@ function Search() {
   }) : null);
 }
 
-var css_248z$9 = ".EmojiPickerReact .epr-skin-tones{--epr-skin-tone-size:16px;align-items:center;display:flex;flex-basis:30px;justify-content:flex-end;transition:all .3s ease-in-out}.EmojiPickerReact .epr-skin-tones.open{flex-basis:170px}.EmojiPickerReact .epr-skin-tone-select{height:var(--epr-skin-tone-size);position:relative;width:var(--epr-skin-tone-size)}.EmojiPickerReact .epr-skin-tones.open .epr-tone{transition:transform .3s ease-in-out,opacity .3s ease-in-out}.EmojiPickerReact .epr-skin-tones:not(.open) .epr-tone{opacity:0;z-index:0}.EmojiPickerReact .epr-skin-tones .epr-tone{border-radius:4px;box-shadow:0 0 0 0 var(--epr-active-skin-hover-color);cursor:pointer;display:block;height:var(--epr-skin-tone-size);position:absolute;right:0;transition:transform .3s ease-in-out,opacity .5s ease-in-out;width:var(--epr-skin-tone-size);z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone:hover{box-shadow:0 0 0 5px var(--epr-active-skin-hover-color)}.EmojiPickerReact .epr-skin-tones .epr-tone:focus-visible{box-shadow:0 0 0 5px var(--epr-focus-bg-color)}.EmojiPickerReact .epr-skin-tones.open .epr-skin-tone-select .epr-tone.epr-active:after{border:1px solid var(--epr-active-skin-tone-indicator-border-color);border-radius:5px;bottom:-2px;content:\"\";left:-2px;position:absolute;right:-2px;top:-2px}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-active{opacity:1;z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-neutral{background-color:#ffd225}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fb{background-color:#ffdfbd}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fc{background-color:#e9c197}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fd{background-color:#c88e62}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fe{background-color:#a86637}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3ff{background-color:#60463a}";
+function useFocusSearchInput() {
+  var SearchInputRef = useSearchInputRef();
+  return useCallback(function () {
+    focusElement(SearchInputRef.current);
+  }, [SearchInputRef]);
+}
+function useFocusSkinTonePicker() {
+  var SkinTonePickerRef = useSkinTonePickerRef();
+  return useCallback(function () {
+    if (!SkinTonePickerRef.current) {
+      return;
+    }
+
+    focusFirstElementChild(SkinTonePickerRef.current);
+  }, [SkinTonePickerRef]);
+}
+function useFocusCategoryNavigation() {
+  var CategoryNavigationRef = useCategoryNavigationRef();
+  return useCallback(function () {
+    if (!CategoryNavigationRef.current) {
+      return;
+    }
+
+    focusFirstElementChild(CategoryNavigationRef.current);
+  }, [CategoryNavigationRef]);
+}
+
+var css_248z$9 = ".EmojiPickerReact .epr-skin-tones{--epr-skin-tone-size:16px;align-items:center;display:flex;flex-basis:30px;justify-content:flex-end;transition:all .3s ease-in-out}.EmojiPickerReact .epr-skin-tones.open{flex-basis:170px}.EmojiPickerReact .epr-skin-tone-select{height:var(--epr-skin-tone-size);position:relative;width:var(--epr-skin-tone-size)}.EmojiPickerReact .epr-skin-tones.open .epr-tone{transition:transform .3s ease-in-out,opacity .3s ease-in-out}.EmojiPickerReact .epr-skin-tones:not(.open) .epr-tone{opacity:0;z-index:0}.EmojiPickerReact .epr-skin-tones .epr-tone{border-radius:4px;box-shadow:0 0 0 0 var(--epr-active-skin-hover-color);cursor:pointer;display:block;height:var(--epr-skin-tone-size);position:absolute;right:0;transition:transform .3s ease-in-out,opacity .5s ease-in-out;width:var(--epr-skin-tone-size);z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone:hover{box-shadow:0 0 0 5px var(--epr-active-skin-hover-color)}.EmojiPickerReact .epr-skin-tones .epr-tone:focus{box-shadow:0 0 0 5px var(--epr-focus-bg-color)}.EmojiPickerReact .epr-skin-tones.open .epr-skin-tone-select .epr-tone.epr-active:after{border:1px solid var(--epr-active-skin-tone-indicator-border-color);border-radius:5px;bottom:-2px;content:\"\";left:-2px;position:absolute;right:-2px;top:-2px}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-active{opacity:1;z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-neutral{background-color:#ffd225}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fb{background-color:#ffdfbd}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fc{background-color:#e9c197}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fd{background-color:#c88e62}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fe{background-color:#a86637}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3ff{background-color:#60463a}";
 styleInject(css_248z$9);
 
 function SkinTonePicker() {
@@ -16696,6 +16734,7 @@ function SkinTonePicker() {
       setActiveSkinTone = _useActiveSkinToneSta[1];
 
   var closeAllOpenToggles = useCloseAllOpenToggles();
+  var focusSearchInput = useFocusSearchInput();
 
   if (isDisabled) {
     return null;
@@ -16720,7 +16759,11 @@ function SkinTonePicker() {
         transform: clsx("translateX(-" + i * (isOpen ? 28 : 0) + "px)", isOpen && active && 'scale(1.3)')
       },
       onClick: function onClick() {
-        isOpen && setActiveSkinTone(skinToneVariation);
+        if (isOpen) {
+          setActiveSkinTone(skinToneVariation);
+          focusSearchInput();
+        }
+
         closeAllOpenToggles();
       },
       key: skinToneVariation,
@@ -16859,33 +16902,6 @@ function visibleEmojiOneRowDown(element) {
   return itemInNextRow;
 }
 
-function useFocusSearchInput() {
-  var SearchInputRef = useSearchInputRef();
-  return useCallback(function () {
-    focusElement(SearchInputRef.current);
-  }, [SearchInputRef]);
-}
-function useFocusSkinTonePicker() {
-  var SkinTonePickerRef = useSkinTonePickerRef();
-  return useCallback(function () {
-    if (!SkinTonePickerRef.current) {
-      return;
-    }
-
-    focusFirstElementChild(SkinTonePickerRef.current);
-  }, [SkinTonePickerRef]);
-}
-function useFocusCategoryNavigation() {
-  var CategoryNavigationRef = useCategoryNavigationRef();
-  return useCallback(function () {
-    if (!CategoryNavigationRef.current) {
-      return;
-    }
-
-    focusFirstElementChild(CategoryNavigationRef.current);
-  }, [CategoryNavigationRef]);
-}
-
 var KeyboardEvents;
 
 (function (KeyboardEvents) {