emoji-picker-react 4.0.0-rc.32 → 4.0.0-rc.33

package/dist/DomUtils/classNames.d.ts

@@ -8,6 +8,7 @@ export declare enum ClassNames {
     category = "epr-emoji-category",
     label = "epr-emoji-category-label",
     categoryContent = "epr-emoji-category-content",
-    emojiHasVariatios = "epr-emoji-has-variations"
+    emojiHasVariatios = "epr-emoji-has-variations",
+    external = "__EmojiPicker__"
 }
 export declare function asSelectors(...classNames: ClassNames[]): string;

package/dist/components/emoji/Emoji.d.ts

@@ -8,10 +8,11 @@ declare type ClickableEmojiProps = Readonly<BaseProps & {
     showVariations?: boolean;
     emojiRef?: EmojiRef;
     hiddenOnSearch?: boolean;
+    emoji: DataEmoji;
 }>;
 declare type BaseProps = {
+    emoji?: DataEmoji;
     emojiStyle: EmojiStyle;
-    emoji: DataEmoji;
     unified: string;
     size?: number;
     lazyLoad?: boolean;

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

@@ -1,4 +1,4 @@
-.EmojiPickerReact button.epr-emoji{align-items:center;border-radius:8px;box-sizing:border-box;display:flex;height:var(--epr-emoji-fullsize);justify-content:center;max-height:var(--epr-emoji-fullsize);max-width:var(--epr-emoji-fullsize);overflow:hidden;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:1px;content:"";display:block;height:0;position:absolute;right:0;transform:rotate(135deg);width:0;z-index:var(--epr-emoji-variations-indictator-z-index)}.EmojiPickerReact button.epr-emoji .epr-emoji-img{max-height:var(--epr-emoji-fullsize);max-width:var(--epr-emoji-fullsize);padding:var(--epr-emoji-padding)}.EmojiPickerReact button.epr-emoji .epr-emoji-native{padding:var(--epr-emoji-padding)}.EmojiPickerReact button.epr-emoji>*{align-self:center;display:block;justify-self:center}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color-hover)}.EmojiPickerReact .epr-emoji-img{font-size:0}.EmojiPickerReact .epr-emoji-native{align-self:center;font-family:Segoe UI Emoji,Segoe UI Symbol,Segoe UI,Apple Color Emoji,Twemoji Mozilla,Noto Color Emoji,Android Emoji,Times,Symbola,Aegyptus,Code2000,Code2001,Code2002,Musica,serif,LastResort;font-size:var(--epr-emoji-size);justify-self:center;letter-spacing:0;line-height:100%;position:relative;text-align:center}.EmojiPickerReact button.epr-emoji:hover>*{background-color:var(--epr-emoji-hover-color)}.EmojiPickerReact button.epr-emoji:focus>*{background-color:var(--epr-focus-bg-color)}
+.EmojiPickerReact button.epr-emoji{align-items:center;border-radius:8px;box-sizing:border-box;display:flex;height:var(--epr-emoji-fullsize);justify-content:center;max-height:var(--epr-emoji-fullsize);max-width:var(--epr-emoji-fullsize);overflow:hidden;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:1px;content:"";display:block;height:0;position:absolute;right:0;transform:rotate(135deg);width:0;z-index:var(--epr-emoji-variations-indictator-z-index)}.EmojiPickerReact button.epr-emoji .epr-emoji-img{max-height:var(--epr-emoji-fullsize);max-width:var(--epr-emoji-fullsize);padding:var(--epr-emoji-padding)}.EmojiPickerReact button.epr-emoji .epr-emoji-native{padding:var(--epr-emoji-padding)}.EmojiPickerReact button.epr-emoji>*{align-self:center;display:block;justify-self:center}.EmojiPickerReact button.epr-emoji.epr-emoji-has-variations:hover:after{border-bottom:4px solid var(--epr-emoji-variation-indicator-color-hover)}.__EmojiPicker__.epr-emoji-img{font-size:0}.__EmojiPicker__.epr-emoji-native{align-self:center;font-family:Segoe UI Emoji,Segoe UI Symbol,Segoe UI,Apple Color Emoji,Twemoji Mozilla,Noto Color Emoji,Android Emoji,Times,Symbola,Aegyptus,Code2000,Code2001,Code2002,Musica,serif,LastResort;font-size:var(--epr-emoji-size);justify-self:center;letter-spacing:0;line-height:100%;position:relative;text-align:center}.EmojiPickerReact button.epr-emoji:hover>*{background-color:var(--epr-emoji-hover-color)}.EmojiPickerReact button.epr-emoji:focus>*{background-color:var(--epr-focus-bg-color)}
 .EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-content{grid-gap:0;display:grid;grid-template-columns:repeat(auto-fill,var(--epr-emoji-fullsize));justify-content:space-between;margin:var(--epr-category-padding);position:relative}.EmojiPickerReact li.epr-emoji-category:not(:has(.epr-visible)){display:none}.EmojiPickerReact li.epr-emoji-category>.epr-emoji-category-label{align-items:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background-color:var(--epr-category-label-bg-color);color:var(--epr-category-label-text-color);display:flex;font-weight:700;height:var(--epr-category-label-height);padding:var(--epr-category-label-padding);position:-webkit-sticky;position:sticky;text-transform:capitalize;top:0;width:100%;z-index:var(--epr-category-label-z-index)}
 .EmojiPickerReact ul.epr-emoji-list{list-style:none;margin:0;padding:0}
 .EmojiPickerReact .epr-emoji-variation-picker{align-items:center;background:var(--epr-emoji-variation-picker-bg-color);border:1px solid var(--epr-picker-border-color);border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.2);display:flex;height:0;height:var(--epr-emoji-variation-picker-height);justify-content:space-around;left:15px;opacity:0;padding:5px;pointer-events:none;position:absolute;right:15px;top:0;top:-100%;transform:scale(.9);transition:transform .1s ease-out,opacity .2s ease-out;visibility:hidden;z-index:var(--epr-skin-variation-picker-z-index)}.EmojiPickerReact .epr-emoji-variation-picker.pointing-up{transform:scale(.9);transform-origin:center 0}.EmojiPickerReact .epr-emoji-variation-picker.visible{opacity:1;pointer-events:all;transform:scale(1);visibility:visible}.EmojiPickerReact .epr-emoji-variation-picker .EmojiPickerReact .epr-emoji-variation-picker button.epr-emoji:hover{background:none}.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='15' xml:space='preserve'%3E%3Cg stroke-miterlimit='10'%3E%3Cpath fill='%23FFF' stroke='%23E8E7E7' d='m1.86-.43 9.83 11.53c.59.69 1.56.69 2.14 0L23.66-.43'/%3E%3Cpath fill='%23010202' stroke='%23151617' d='m26.86-.43 9.83 11.53c.59.69 1.56.69 2.14 0L48.66-.43'/%3E%3C/g%3E%3C/svg%3E");background-position:0 0;background-repeat:no-repeat;background-size:50px 15px;content:"";height:15px;position:absolute;top:-10px;width:25px}.EmojiPickerReact.epr-dark-theme .epr-emoji-variation-picker .epr-emoji-pointer{background-position:-25px 0}.EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer{top:100%;transform:translateX(-18px)}.EmojiPickerReact .epr-emoji-variation-picker.pointing-up .epr-emoji-pointer{top:0;transform:rotate(180deg) translateY(100%) translateX(18px)}

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

@@ -15232,6 +15232,7 @@ var ClassNames;
   ClassNames["label"] = "epr-emoji-category-label";
   ClassNames["categoryContent"] = "epr-emoji-category-content";
   ClassNames["emojiHasVariatios"] = "epr-emoji-has-variations";
+  ClassNames["external"] = "__EmojiPicker__";
 })(ClassNames || (ClassNames = {}));
 
 function asSelectors() {
@@ -15613,26 +15614,6 @@ function setsuggested(emoji, skinTone) {
   }
 }
 
-function preloadEmoji(emoji, emojiStyle) {
-  var unified = emojiUnified(emoji);
-
-  if (preloadedEmojs.has(unified)) {
-    return;
-  }
-
-  emojiVariations(emoji).forEach(function (variation) {
-    var emojiUrl = emojiUrlByUnified(emojiStyle, variation);
-    preloadImage(emojiUrl);
-  });
-  preloadedEmojs.add(unified);
-}
-var preloadedEmojs = /*#__PURE__*/new Set();
-
-function preloadImage(url) {
-  var image = new Image();
-  image.src = url;
-}
-
 function useCloseAllOpenToggles() {
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
       variationPicker = _useEmojiVariationPic[0],
@@ -15824,7 +15805,6 @@ function useSetVariationPicker() {
 
 function useMouseDownHandlers(BodyRef) {
   var mouseDownTimerRef = React.useRef();
-  var preloading = React.useRef(false);
   var setVariationPicker = useSetVariationPicker();
   var disallowClickRef = useDisallowClickRef();
 
@@ -15837,7 +15817,6 @@ function useMouseDownHandlers(BodyRef) {
       activeSkinTone = _useActiveSkinToneSta[0];
 
   var onEmojiClick = useOnEmojiClickConfig();
-  var emojiStyle = useEmojiStyleConfig();
 
   var _useUpdateSuggested = useUpdateSuggested(),
       updateSuggested = _useUpdateSuggested[1];
@@ -15863,7 +15842,7 @@ function useMouseDownHandlers(BodyRef) {
     onEmojiClick(emojiClickOutput(emoji, skinToneToUse), event);
   }, [activeSkinTone, closeAllOpenToggles, disallowClickRef, onEmojiClick, updateSuggested]);
   var onMouseDown = React.useCallback(function onMouseDown(event) {
-    var _window, _window2;
+    var _window;
 
     if (mouseDownTimerRef.current) {
       clearTimeout(mouseDownTimerRef.current);
@@ -15876,24 +15855,15 @@ function useMouseDownHandlers(BodyRef) {
       return;
     }
 
-    preloading.current = true;
-    (_window = window) == null ? void 0 : _window.setTimeout(function () {
-      if (preloading.current) {
-        preloadEmoji(emoji, emojiStyle);
-        preloading.current = false;
-      }
-    }, 50);
-    mouseDownTimerRef.current = (_window2 = window) == null ? void 0 : _window2.setTimeout(function () {
+    mouseDownTimerRef.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
       disallowClickRef.current = true;
       mouseDownTimerRef.current = undefined;
       closeAllOpenToggles();
       setVariationPicker(event.target);
       setEmojiVariationPicker(emoji);
     }, 500);
-  }, [disallowClickRef, closeAllOpenToggles, setVariationPicker, emojiStyle, setEmojiVariationPicker]);
+  }, [disallowClickRef, closeAllOpenToggles, setVariationPicker, setEmojiVariationPicker]);
   var onMouseUp = React.useCallback(function onMouseUp() {
-    preloading.current = false;
-
     if (mouseDownTimerRef.current) {
       clearTimeout(mouseDownTimerRef.current);
       mouseDownTimerRef.current = undefined;
@@ -16231,6 +16201,10 @@ function useIsEmojiHidden() {
   };
 }
 
+function asEmoji(emoji) {
+  return emoji;
+}
+
 function ClickableEmoji(_ref) {
   var _clsx;
 
@@ -16271,13 +16245,14 @@ function ViewOnlyEmoji(_ref2) {
     style.width = style.height = style.fontSize = size + "px";
   }
 
+  var emojiToRender = emoji ? emoji : emojiByUnified(unified);
   return React.createElement(React.Fragment, null, emojiStyle === exports.EmojiStyle.NATIVE ? React.createElement(NativeEmoji, {
     unified: unified,
     style: style
   }) : React.createElement(EmojiImg, {
     unified: unified,
     style: style,
-    emoji: emoji,
+    emoji: asEmoji(emojiToRender),
     emojiStyle: emojiStyle,
     lazyLoad: lazyLoad
   }));
@@ -16287,7 +16262,7 @@ function NativeEmoji(_ref3) {
   var unified = _ref3.unified,
       style = _ref3.style;
   return React.createElement("span", {
-    className: "epr-emoji-native",
+    className: clsx(ClassNames.external, 'epr-emoji-native'),
     "data-unified": unified,
     style: style
   }, parseNativeEmoji(unified));
@@ -16307,7 +16282,7 @@ function EmojiImg(_ref4) {
   return React.createElement("img", {
     src: emojiUrlByUnified(emojiStyle, unified),
     alt: emojiName(emoji),
-    className: "epr-emoji-img",
+    className: clsx(ClassNames.external, 'epr-emoji-img'),
     loading: lazyLoad ? 'lazy' : 'eager',
     onError: onError,
     style: style
@@ -16447,10 +16422,6 @@ function RenderCategory(_ref) {
   }, emojis);
 }
 
-function asEmoji(emoji) {
-  return emoji;
-}
-
 var Direction;
 
 (function (Direction) {
@@ -17372,6 +17343,69 @@ function hasModifier(event) {
   return metaKey || ctrlKey || altKey;
 }
 
+function preloadEmoji(emoji, emojiStyle) {
+  if (!emoji) {
+    return;
+  }
+
+  if (emojiStyle === exports.EmojiStyle.NATIVE) {
+    return;
+  }
+
+  var unified = emojiUnified(emoji);
+
+  if (preloadedEmojs.has(unified)) {
+    return;
+  }
+
+  emojiVariations(emoji).forEach(function (variation) {
+    var emojiUrl = emojiUrlByUnified(emojiStyle, variation);
+    preloadImage(emojiUrl);
+  });
+  preloadedEmojs.add(unified);
+}
+var preloadedEmojs = /*#__PURE__*/new Set();
+
+function preloadImage(url) {
+  var image = new Image();
+  image.src = url;
+}
+
+function useOnFocus() {
+  var BodyRef = useBodyRef();
+  var emojiStyle = useEmojiStyleConfig();
+  React.useEffect(function () {
+    if (emojiStyle === exports.EmojiStyle.NATIVE) {
+      return;
+    }
+
+    var bodyRef = BodyRef.current;
+    bodyRef == null ? void 0 : bodyRef.addEventListener('focusin', onFocus);
+    return function () {
+      bodyRef == null ? void 0 : bodyRef.removeEventListener('focusin', onFocus);
+    };
+
+    function onFocus(event) {
+      var button = buttonFromTarget(event.target);
+
+      if (!button) {
+        return;
+      }
+
+      var _emojiFromElement = emojiFromElement(button),
+          emoji = _emojiFromElement[0];
+
+      if (!emoji) {
+        return;
+      }
+
+      if (emojiHasVariations(emoji)) {
+        preloadEmoji(emoji, emojiStyle);
+      }
+    }
+  }, [BodyRef, emojiStyle]);
+}
+
 function PickerMain(_ref) {
   var children = _ref.children;
   return React.createElement(PickerContextProvider, null, React.createElement(PickerRootElement, null, children));
@@ -17385,6 +17419,7 @@ function PickerRootElement(_ref2) {
   var searchModeActive = useIsSearchMode();
   var PickerMainRef = usePickerMainRef();
   useKeyboardNavigation();
+  useOnFocus();
   return React.createElement("aside", {
     className: clsx('EmojiPickerReact', 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === exports.Theme.DARK, _clsx)),
     ref: PickerMainRef
@@ -17436,5 +17471,6 @@ function EmojiPicker$1(props) {
   return React.createElement(ErrorBoundary, null, React.createElement(EmojiPicker, Object.assign({}, props)));
 }
 
+exports.Emoji = ViewOnlyEmoji;
 exports.default = EmojiPicker$1;
 //# sourceMappingURL=emoji-picker-react.cjs.development.js.map