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

package/README.md

@@ -37,6 +37,7 @@ function App() {
 - Skin tone change
 - Different emoji sets (Google, Apple, Facebook, Twitter)
 - Native Emoji support
+- Emoji Component To Render Emojis in your app
 
 # Props
 
@@ -169,6 +170,32 @@ The list of possible variables is quite extensive, but the main ones you may wan
 - `--epr-bg-color`: The background color of the picker. When changing it, you should also change `--epr-category-label-bg-color` as they are usually the same color.
 - `--epr-text-color`: The text color in the picker.
 
+# Rendering Output Emojis in Your App
+
+The picker exports an `Emoji` component. The emoji component is the same used within the picker, so it will render the same way as the emojis in the picker. You can choose to render emojis either as native, or as images.
+
+## Props
+
+| Name         | Type         | Default            | Description                                                                                 |
+| ------------ | ------------ | ------------------ | ------------------------------------------------------------------------------------------- |
+| `unified`    | string       | ""                 | The unified code of the emoji.                                                              |
+| `size`       | number       | 32                 | The size of the emoji.                                                                      |
+| `emojiStyle` | `EmojiStyle` | `EmojiStyle.APPLE` | The emoji style to use. Can be either `apple`, `google`, `facebook`, `twitter` or `native`. |
+| `lazyLoad`   | boolean      | `false`            | Whether to lazy load the emoji. image                                                       |
+
+```js
+import { Emoji, EmojiStyle } from 'emoji-picker-react';
+
+export function MyApp() {
+  return (
+    <p>
+      My Favorite emoji is:
+      <Emoji unified="1f423" size="25" />
+    </p>
+  );
+}
+```
+
 # Troubleshooting
 
 ## Error Boundary

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/components/emoji/ExportedEmoji.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { EmojiStyle } from '../../types/exposedTypes';
+export declare function ExportedEmoji({ unified, size, emojiStyle, lazyLoad }: {
+    unified: string;
+    emojiStyle?: EmojiStyle;
+    size?: number;
+    lazyLoad?: boolean;
+}): JSX.Element | null;

package/dist/dataUtils/emojiSelectors.d.ts

@@ -1,4 +1,4 @@
-import { Categories } from "../config/categoryConfig";
+import { Categories } from '../config/categoryConfig';
 import { EmojiStyle, SkinTones } from '../types/exposedTypes';
 import { DataEmoji, DataEmojis } from './DataTypes';
 export declare function emojiNames(emoji: DataEmoji): string[];

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

@@ -14989,7 +14989,12 @@ function emojiByUnified(unified) {
     return;
   }
 
-  return allEmojisByUnified[unified];
+  if (allEmojisByUnified[unified]) {
+    return allEmojisByUnified[unified];
+  }
+
+  var withoutSkinTone = unifiedWithoutSkinTone(unified);
+  return allEmojisByUnified[withoutSkinTone];
 }
 var allEmojis = /*#__PURE__*/Object.values(emojis).flat();
 var allEmojisByUnified = {};
@@ -15232,6 +15237,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 +15619,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 +15810,6 @@ function useSetVariationPicker() {
 
 function useMouseDownHandlers(BodyRef) {
   var mouseDownTimerRef = React.useRef();
-  var preloading = React.useRef(false);
   var setVariationPicker = useSetVariationPicker();
   var disallowClickRef = useDisallowClickRef();
 
@@ -15837,7 +15822,6 @@ function useMouseDownHandlers(BodyRef) {
       activeSkinTone = _useActiveSkinToneSta[0];
 
   var onEmojiClick = useOnEmojiClickConfig();
-  var emojiStyle = useEmojiStyleConfig();
 
   var _useUpdateSuggested = useUpdateSuggested(),
       updateSuggested = _useUpdateSuggested[1];
@@ -15863,7 +15847,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 +15860,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 +16206,10 @@ function useIsEmojiHidden() {
   };
 }
 
+function asEmoji(emoji) {
+  return emoji;
+}
+
 function ClickableEmoji(_ref) {
   var _clsx;
 
@@ -16271,13 +16250,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 +16267,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 +16287,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 +16427,6 @@ function RenderCategory(_ref) {
   }, emojis);
 }
 
-function asEmoji(emoji) {
-  return emoji;
-}
-
 var Direction;
 
 (function (Direction) {
@@ -17372,6 +17348,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 +17424,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
@@ -17432,9 +17472,31 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   return ErrorBoundary;
 }(React.Component);
 
+function ExportedEmoji(_ref) {
+  var unified = _ref.unified,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 32 : _ref$size,
+      _ref$emojiStyle = _ref.emojiStyle,
+      emojiStyle = _ref$emojiStyle === void 0 ? exports.EmojiStyle.APPLE : _ref$emojiStyle,
+      _ref$lazyLoad = _ref.lazyLoad,
+      lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad;
+
+  if (!unified) {
+    return null;
+  }
+
+  return React.createElement(ViewOnlyEmoji, {
+    unified: unified,
+    size: size,
+    emojiStyle: emojiStyle,
+    lazyLoad: lazyLoad
+  });
+}
+
 function EmojiPicker$1(props) {
   return React.createElement(ErrorBoundary, null, React.createElement(EmojiPicker, Object.assign({}, props)));
 }
 
+exports.Emoji = ExportedEmoji;
 exports.default = EmojiPicker$1;
 //# sourceMappingURL=emoji-picker-react.cjs.development.js.map