emoji-picker-react 4.20.1 → 4.20.2

package/README.md

@@ -98,9 +98,11 @@ const Picker = dynamic(() => import('emoji-picker-react'));
 
 ## Troubleshooting
 
-### `global is not defined` (Vite)
+### `global is not defined` (Vite, versions before 4.20)
 
-Add this to your HTML:
+Since 4.20 the picker is SSR-safe and no longer references the Node-style
+`global`. If you see `global is not defined`, upgrade to the latest version.
+On older versions only, the workaround was adding this to your HTML:
 
 ```html
 <script>

package/dist/dataUtils/emojiSelectors.d.ts

@@ -1,4 +1,3 @@
-import { Categories } from '../config/categoryConfig';
 import { CustomEmoji } from '../config/customEmojiConfig';
 import { EmojiStyle, SkinTones } from '../types/exposedTypes';
 import { DataEmoji, DataEmojis, WithName } from './DataTypes';
@@ -7,7 +6,6 @@ export declare function addedIn(emoji: DataEmoji): number;
 export declare function emojiName(emoji?: WithName): string;
 export declare function unifiedWithoutSkinTone(unified: string): string;
 export declare function emojiUnified(emoji: DataEmoji, skinTone?: string): string;
-export declare function useGetEmojisByCategory(): (Category: Categories) => DataEmojis;
 export declare function emojiUrlByUnified(unified: string, emojiStyle: EmojiStyle): string;
 export declare function emojiVariations(emoji: DataEmoji): string[];
 export declare function emojiHasVariations(emoji: DataEmoji): boolean;

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

@@ -26744,15 +26744,57 @@ var defaultEmojiData = {
 	emojis: emojis
 };
 
-function useIsMounted() {
-  var _React$useState = React.useState(false),
-    isMounted = _React$useState[0],
-    setIsMounted = _React$useState[1];
-  React.useEffect(function () {
-    setIsMounted(true);
-  }, []);
-  return isMounted;
+// Pure data helpers plus the legacy global registry. This module intentionally
+function unifiedWithoutSkinTone$1(unified) {
+  var splat = unified.split('-');
+  var _splat$splice = splat.splice(1, 1),
+    skinTone = _splat$splice[0];
+  if (skinTonesMapped[skinTone]) {
+    return splat.join('-');
+  }
+  return unified;
 }
+function emojiUnified$1(emoji, skinTone) {
+  var _emojiVariationUnifie;
+  var unified = emoji[EmojiProperties.unified];
+  if (!skinTone || !emojiHasVariations$1(emoji)) {
+    return unified;
+  }
+  return (_emojiVariationUnifie = emojiVariationUnified$1(emoji, skinTone)) != null ? _emojiVariationUnifie : unified;
+}
+function emojiVariations$1(emoji) {
+  var _emoji$EmojiPropertie2;
+  return (_emoji$EmojiPropertie2 = emoji[EmojiProperties.variations]) != null ? _emoji$EmojiPropertie2 : [];
+}
+function emojiHasVariations$1(emoji) {
+  return emojiVariations$1(emoji).length > 0;
+}
+function emojiVariationUnified$1(emoji, skinTone) {
+  return skinTone ? emojiVariations$1(emoji).find(function (variation) {
+    return variation.includes(skinTone);
+  }) : emojiUnified$1(emoji);
+}
+function emojiByUnified(unified) {
+  if (!unified) {
+    return;
+  }
+  if (allEmojisByUnified[unified]) {
+    return allEmojisByUnified[unified];
+  }
+  var withoutSkinTone = unifiedWithoutSkinTone$1(unified);
+  return allEmojisByUnified[withoutSkinTone];
+}
+var allEmojis = /*#__PURE__*/Object.values(defaultEmojiData.emojis).flat();
+var allEmojisByUnified = {};
+allEmojis.reduce(function (allEmojis, Emoji) {
+  allEmojis[emojiUnified$1(Emoji)] = Emoji;
+  if (emojiHasVariations$1(Emoji)) {
+    emojiVariations$1(Emoji).forEach(function (variation) {
+      allEmojis[variation] = Emoji;
+    });
+  }
+  return allEmojis;
+}, allEmojisByUnified);
 
 var SUGGESTED_LS_KEY = 'epr_suggested';
 function getSuggested(mode) {
@@ -26774,8 +26816,8 @@ function getSuggested(mode) {
 }
 function setSuggested(emoji, skinTone) {
   var recent = getSuggested();
-  var unified = emojiUnified$1(emoji, skinTone);
-  var originalUnified = emojiUnified$1(emoji);
+  var unified = emojiUnified(emoji, skinTone);
+  var originalUnified = emojiUnified(emoji);
   var existing = recent.find(function (_ref) {
     var u = _ref.unified;
     return u === unified;
@@ -26806,99 +26848,14 @@ function setSuggested(emoji, skinTone) {
   }
 }
 
-function emojiNames$1(emoji) {
-  var _emoji$EmojiPropertie;
-  return (_emoji$EmojiPropertie = emoji[EmojiProperties.name]) != null ? _emoji$EmojiPropertie : [];
-}
-function emojiName$1(emoji) {
-  if (!emoji) {
-    return '';
-  }
-  var names = emojiNames$1(emoji);
-  return names[names.length - 1];
-}
-function unifiedWithoutSkinTone$1(unified) {
-  var splat = unified.split('-');
-  var _splat$splice = splat.splice(1, 1),
-    skinTone = _splat$splice[0];
-  if (skinTonesMapped[skinTone]) {
-    return splat.join('-');
-  }
-  return unified;
-}
-function emojiUnified$1(emoji, skinTone) {
-  var _emojiVariationUnifie;
-  var unified = emoji[EmojiProperties.unified];
-  if (!skinTone || !emojiHasVariations$1(emoji)) {
-    return unified;
-  }
-  return (_emojiVariationUnifie = emojiVariationUnified$1(emoji, skinTone)) != null ? _emojiVariationUnifie : unified;
-}
-function useGetEmojisByCategory() {
-  var suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
-  var _useUpdateSuggested = useUpdateSuggested(),
-    suggestedUpdated = _useUpdateSuggested[0];
-  // Suggestions come from localStorage, which doesn't exist during SSR.
-  // Read them only after mount so the first client render matches the server.
-  var isMounted = useIsMounted();
-  var suggested = React__default.useMemo(function () {
-    var _getSuggested;
-    if (!isMounted) {
-      return [];
-    }
-    var suggested = (_getSuggested = getSuggested(suggestedEmojisModeConfig)) != null ? _getSuggested : [];
-    return suggested.map(function (s) {
-      return emojiByUnified(s.unified);
-    }).filter(Boolean);
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isMounted, suggestedUpdated, suggestedEmojisModeConfig]);
-  return function getEmojisByCategory(category) {
-    var _emojis$emojis$catego;
-    if (category === exports.Categories.SUGGESTED) {
-      return suggested;
-    }
-    // @ts-ignore
-    return (_emojis$emojis$catego = defaultEmojiData.emojis[category]) != null ? _emojis$emojis$catego : [];
-  };
-}
-function emojiVariations$1(emoji) {
-  var _emoji$EmojiPropertie2;
-  return (_emoji$EmojiPropertie2 = emoji[EmojiProperties.variations]) != null ? _emoji$EmojiPropertie2 : [];
-}
-function emojiHasVariations$1(emoji) {
-  return emojiVariations$1(emoji).length > 0;
-}
-function emojiVariationUnified$1(emoji, skinTone) {
-  return skinTone ? emojiVariations$1(emoji).find(function (variation) {
-    return variation.includes(skinTone);
-  }) : emojiUnified$1(emoji);
-}
-function emojiByUnified(unified) {
-  if (!unified) {
-    return;
-  }
-  if (allEmojisByUnified[unified]) {
-    return allEmojisByUnified[unified];
-  }
-  var withoutSkinTone = unifiedWithoutSkinTone$1(unified);
-  return allEmojisByUnified[withoutSkinTone];
-}
-var allEmojis = /*#__PURE__*/Object.values(defaultEmojiData.emojis).flat();
-var allEmojisByUnified = {};
-allEmojis.reduce(function (allEmojis, Emoji) {
-  allEmojis[emojiUnified$1(Emoji)] = Emoji;
-  if (emojiHasVariations$1(Emoji)) {
-    emojiVariations$1(Emoji).forEach(function (variation) {
-      allEmojis[variation] = Emoji;
-    });
-  }
-  return allEmojis;
-}, allEmojisByUnified);
-function activeVariationFromUnified$1(unified) {
-  var _unified$split = unified.split('-'),
-    suspectedSkinTone = _unified$split[1];
-  return skinToneVariations.includes(suspectedSkinTone) ? suspectedSkinTone : null;
+function useIsMounted() {
+  var _React$useState = React.useState(false),
+    isMounted = _React$useState[0],
+    setIsMounted = _React$useState[1];
+  React.useEffect(function () {
+    setIsMounted(true);
+  }, []);
+  return isMounted;
 }
 
 var PickerDataContext = /*#__PURE__*/React__default.createContext({
@@ -26968,7 +26925,7 @@ function PickerDataProvider(_ref) {
 function usePickerDataContext() {
   return React__default.useContext(PickerDataContext);
 }
-function useGetEmojisByCategory$1() {
+function useGetEmojisByCategory() {
   var _usePickerDataContext = usePickerDataContext(),
     emojiData = _usePickerDataContext.emojiData,
     emojiByUnified = _usePickerDataContext.emojiByUnified;
@@ -28340,7 +28297,7 @@ function useOnFocus() {
       if (!emoji) {
         return;
       }
-      if (emojiHasVariations$1(emoji)) {
+      if (emojiHasVariations(emoji)) {
         preloadEmoji(getEmojiUrl, emoji, emojiStyle);
       }
     }
@@ -28817,7 +28774,7 @@ function useMouseDownHandlers(ContainerRef, mouseEventSource) {
     if (!emoji || !unified) {
       return;
     }
-    var skinToneToUse = activeVariationFromUnified$1(unified) || activeSkinTone;
+    var skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
     updateSuggested();
     setSuggested(emoji, skinToneToUse);
     onEmojiClick(emojiClickOutput(emoji, skinToneToUse, activeEmojiStyle, getEmojiUrl), event);
@@ -28828,7 +28785,7 @@ function useMouseDownHandlers(ContainerRef, mouseEventSource) {
     }
     var _emojiFromEvent2 = emojiFromEvent(event, emojiByUnified),
       emoji = _emojiFromEvent2[0];
-    if (!emoji || !emojiHasVariations$1(emoji)) {
+    if (!emoji || !emojiHasVariations(emoji)) {
       return;
     }
     mouseDownTimerRef.current = setTimeout(function () {
@@ -28894,9 +28851,9 @@ function emojiFromEvent(event, lookupEmojiByUnified) {
   return [emoji, unified != null ? unified : resolvedUnified];
 }
 function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl) {
-  var names = emojiNames$1(emoji);
+  var names = emojiNames(emoji);
   if (isCustomEmoji(emoji)) {
-    var _unified = emojiUnified$1(emoji);
+    var _unified = emojiUnified(emoji);
     return {
       activeSkinTone: activeSkinTone,
       emoji: _unified,
@@ -28910,7 +28867,7 @@ function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl)
       unifiedWithoutSkinTone: _unified
     };
   }
-  var unified = emojiUnified$1(emoji, activeSkinTone);
+  var unified = emojiUnified(emoji, activeSkinTone);
   return {
     activeSkinTone: activeSkinTone,
     emoji: parseNativeEmoji(unified),
@@ -28924,7 +28881,7 @@ function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl)
     isCustom: false,
     names: names,
     unified: unified,
-    unifiedWithoutSkinTone: emojiUnified$1(emoji)
+    unifiedWithoutSkinTone: emojiUnified(emoji)
   };
 }
 
@@ -29166,13 +29123,13 @@ function ClickableEmoji(_ref) {
     _ref$noBackground = _ref.noBackground,
     noBackground = _ref$noBackground === void 0 ? false : _ref$noBackground,
     style = _ref.style;
-  var hasVariations = emojiHasVariations$1(emoji);
+  var hasVariations = emojiHasVariations(emoji);
   return React.createElement(ClickableEmojiButton, {
     hasVariations: hasVariations,
     showVariations: showVariations,
     hidden: hidden,
     hiddenOnSearch: hiddenOnSearch,
-    emojiNames: emojiNames$1(emoji),
+    emojiNames: emojiNames(emoji),
     unified: unified,
     noBackground: noBackground,
     style: style
@@ -29595,7 +29552,7 @@ function MeasureEmoji() {
   }
   var firstCategory = categories[0];
   var dummyEmoji = getEmojisByCategory(categoryFromCategoryConfig(firstCategory))[0];
-  var unified = dummyEmoji ? emojiUnified$1(dummyEmoji, activeSkinTone) : '';
+  var unified = dummyEmoji ? emojiUnified(dummyEmoji, activeSkinTone) : '';
   if (!dummyEmoji) {
     return null;
   }
@@ -29629,7 +29586,7 @@ function EmojiList(_ref) {
     categoryHeights = _React$useState[0],
     setCategoryHeights = _React$useState[1];
   var EmojiListRef = useEmojiListRef();
-  var getEmojisByCategory = useGetEmojisByCategory$1();
+  var getEmojisByCategory = useGetEmojisByCategory();
   var labelHeight = getLabelHeight(EmojiListRef.current);
   var topOffset = 0;
   return React.createElement("ul", {
@@ -29642,9 +29599,8 @@ function EmojiList(_ref) {
     if (categoryHeight) {
       topOffset += categoryHeight + labelHeight;
     }
-    return React.createElement(React.Suspense, {
-      key: category
-    }, React.createElement(RenderCategory, {
+    return React.createElement(RenderCategory, {
+      key: category,
       categoryEmojis: getEmojisByCategory(category),
       categoryConfig: categoryConfig,
       topOffset: currentOffset,
@@ -29657,7 +29613,7 @@ function EmojiList(_ref) {
         }
       },
       scrollTop: scrollTop
-    }));
+    });
   }));
 }
 function RenderCategory(_ref2) {
@@ -29716,7 +29672,7 @@ function EmojiVariationPicker() {
   var getPointerStyle = usePointerStyle(VariationPickerRef);
   var getEmojiUrl = useGetEmojiUrlConfig();
   var button = buttonFromTarget(AnchoredEmojiRef.current);
-  var visible = Boolean(emoji && button && emojiHasVariations$1(emoji) && button.classList.contains(ClassNames.emojiHasVariations));
+  var visible = Boolean(emoji && button && emojiHasVariations(emoji) && button.classList.contains(ClassNames.emojiHasVariations));
   React.useEffect(function () {
     if (!visible) {
       return;
@@ -29736,7 +29692,7 @@ function EmojiVariationPicker() {
     style: {
       top: top
     }
-  }, visible && emoji ? [emojiUnified$1(emoji)].concat(emojiVariations$1(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,
@@ -30252,7 +30208,7 @@ function PreviewBody() {
     if (!defaultEmoji) {
       return null;
     }
-    var defaultText = variationPickerEmoji ? emojiName$1(variationPickerEmoji) : previewConfig.defaultCaption;
+    var defaultText = variationPickerEmoji ? emojiName(variationPickerEmoji) : previewConfig.defaultCaption;
     return React.createElement(React.Fragment, null, React.createElement("div", null, show ? React.createElement(ViewOnlyEmoji, {
       unified: previewEmoji == null ? void 0 : previewEmoji.unified,
       emoji: emoji,
@@ -30261,7 +30217,7 @@ function PreviewBody() {
       getEmojiUrl: getEmojiUrl,
       className: flairup.cx(styles$e.emoji)
     }) : defaultEmoji ? React.createElement(ViewOnlyEmoji, {
-      unified: emojiUnified$1(defaultEmoji),
+      unified: emojiUnified(defaultEmoji),
       emoji: defaultEmoji,
       emojiStyle: emojiStyle,
       size: 45,
@@ -30269,7 +30225,7 @@ function PreviewBody() {
       className: flairup.cx(styles$e.emoji)
     }) : null), React.createElement("div", {
       className: flairup.cx(styles$e.label)
-    }, show ? emojiName$1(emoji) : defaultText));
+    }, show ? emojiName(emoji) : defaultText));
   }
 }
 var styles$e = /*#__PURE__*/stylesheet.create({