emoji-picker-react 4.0.0-rc.22 → 4.0.0-rc.23

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

@@ -3,15 +3,18 @@ import { EmojiRef } from '../../DomUtils/emojiElementRef';
 import { DataEmoji } from '../../dataUtils/DataTypes';
 import { EmojiStyle } from '../../types/exposedTypes';
 import './Emoji.css';
-declare type Props = Readonly<{
+declare type ClickableEmojiProps = Readonly<BaseProps & {
     hidden?: boolean;
+    showVariations?: boolean;
+    emojiRef?: EmojiRef;
+}>;
+declare type BaseProps = {
     emojiStyle: EmojiStyle;
     emoji: DataEmoji;
     unified: string;
-    showVariations?: boolean;
     size?: number;
-    emojiRef?: EmojiRef;
     lazyLoad?: boolean;
-}>;
-export declare function Emoji({ emoji, unified, hidden, emojiStyle, showVariations, size, emojiRef, lazyLoad }: Props): JSX.Element;
+};
+export declare function ClickableEmoji({ emoji, unified, hidden, emojiStyle, showVariations, size, emojiRef, lazyLoad }: ClickableEmojiProps): JSX.Element;
+export declare function ViewOnlyEmoji({ emoji, unified, emojiStyle, size, lazyLoad }: BaseProps): JSX.Element;
 export {};

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

@@ -16050,7 +16050,7 @@ function useIsEmojiHidden() {
   };
 }
 
-function Emoji(_ref) {
+function ClickableEmoji(_ref) {
   var _clsx;
 
   var emoji = _ref.emoji,
@@ -16063,31 +16063,46 @@ function Emoji(_ref) {
       emojiRef = _ref.emojiRef,
       lazyLoad = _ref.lazyLoad;
   var hasVariations = emojiHasVariations(emoji);
+  return React.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
+  }, React.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 React.createElement(React.Fragment, null, emojiStyle === exports.EmojiStyle.NATIVE ? React.createElement(NativeEmoji, {
+    unified: unified,
+    style: style
+  }) : React.createElement(EmojiImg, {
+    unified: unified,
     style: style,
-    unified: unified
-  };
-  return React.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 === exports.EmojiStyle.NATIVE ? React.createElement(NativeEmoji, Object.assign({}, base)) : React.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 React.createElement("span", {
     className: "epr-emoji-native",
     "data-unified": unified,
@@ -16095,13 +16110,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];
@@ -16170,7 +16185,7 @@ function Suggested(_ref) {
       return null;
     }
 
-    return React.createElement(Emoji, {
+    return React.createElement(ClickableEmoji, {
       showVariations: false,
       unified: suggestedItem.unified,
       emojiStyle: emojiStyle,
@@ -16229,7 +16244,7 @@ function RenderCategory(_ref) {
       hiddenCounter++;
     }
 
-    return React.createElement(Emoji, {
+    return React.createElement(ClickableEmoji, {
       key: unified,
       emoji: emoji,
       unified: unified,
@@ -16292,7 +16307,7 @@ function EmojiVariationPicker() {
       top: top
     }
   }, visible ? [emojiUnified(safeEmoji)].concat(emojiVariations(safeEmoji)).slice(0, 6).map(function (unified) {
-    return React.createElement(Emoji, {
+    return React.createElement(ClickableEmoji, {
       key: unified,
       emoji: safeEmoji,
       unified: unified,
@@ -16533,19 +16548,15 @@ function Preview() {
   function PreviewContent() {
     var defaultEmoji = asEmoji(variationPickerEmoji != null ? variationPickerEmoji : emojiByUnified(previewConfig.defaultEmoji));
     var defaultText = variationPickerEmoji ? emojiName(variationPickerEmoji) : previewConfig.defaultCaption;
-    return React.createElement(React.Fragment, null, React.createElement("div", null, show ? React.createElement(Emoji, {
+    return React.createElement(React.Fragment, null, React.createElement("div", null, show ? React.createElement(ViewOnlyEmoji, {
       unified: previewEmoji == null ? void 0 : previewEmoji.unified,
       emoji: asEmoji(emoji),
-      showVariations: false,
       emojiStyle: emojiStyle,
-      hidden: false,
       size: 45
-    }) : defaultEmoji ? React.createElement(Emoji, {
+    }) : defaultEmoji ? React.createElement(ViewOnlyEmoji, {
       unified: emojiUnified(defaultEmoji),
       emoji: defaultEmoji,
-      showVariations: false,
       emojiStyle: emojiStyle,
-      hidden: false,
       size: 45
     }) : null), show ? React.createElement("div", {
       className: "epr-preview-emoji-label"