emoji-picker-react 4.20.0 → 4.20.2

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

@@ -1,4 +1,4 @@
-import React__default, { memo, createElement, useState, useEffect, useContext, createContext, useRef, useMemo, createRef, useCallback, Fragment, useLayoutEffect, Suspense, Component } from 'react';
+import React__default, { memo, createElement, useState, useEffect, useContext, createContext, useRef, useMemo, createRef, useCallback, Fragment, useLayoutEffect, Component } from 'react';
 import { createSheet, cx } from 'flairup';
 
 function _arrayLikeToArray(r, a) {
@@ -520,11 +520,10 @@ function useDebouncedState(initialValue, delay) {
   var timer = useRef(null);
   function debouncedSetState(value) {
     return new Promise(function (resolve) {
-      var _window;
       if (timer.current) {
         clearTimeout(timer.current);
       }
-      timer.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
+      timer.current = setTimeout(function () {
         setState(value);
         resolve(value);
       }, delay);
@@ -26744,67 +26743,7 @@ var defaultEmojiData = {
 	emojis: emojis
 };
 
-var SUGGESTED_LS_KEY = 'epr_suggested';
-function getSuggested(mode) {
-  try {
-    var _window, _window$localStorage$, _window2;
-    if (!((_window = window) != null && _window.localStorage)) {
-      return [];
-    }
-    var recent = JSON.parse((_window$localStorage$ = (_window2 = window) == null ? void 0 : _window2.localStorage.getItem(SUGGESTED_LS_KEY)) != null ? _window$localStorage$ : '[]');
-    if (mode === SuggestionMode.FREQUENT) {
-      return recent.sort(function (a, b) {
-        return b.count - a.count;
-      });
-    }
-    return recent;
-  } catch (_unused) {
-    return [];
-  }
-}
-function setSuggested(emoji, skinTone) {
-  var recent = getSuggested();
-  var unified = emojiUnified$1(emoji, skinTone);
-  var originalUnified = emojiUnified$1(emoji);
-  var existing = recent.find(function (_ref) {
-    var u = _ref.unified;
-    return u === unified;
-  });
-  var nextList;
-  if (existing) {
-    nextList = [existing].concat(recent.filter(function (i) {
-      return i !== existing;
-    }));
-  } else {
-    existing = {
-      unified: unified,
-      original: originalUnified,
-      count: 0
-    };
-    nextList = [existing].concat(recent);
-  }
-  existing.count++;
-  nextList.length = Math.min(nextList.length, 14);
-  try {
-    var _window3;
-    (_window3 = window) == null ? void 0 : _window3.localStorage.setItem(SUGGESTED_LS_KEY, JSON.stringify(nextList));
-    // Prevents the change from being seen immediately.
-  } catch (_unused2) {
-    // ignore
-  }
-}
-
-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];
-}
+// 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),
@@ -26822,28 +26761,6 @@ function emojiUnified$1(emoji, skinTone) {
   }
   return (_emojiVariationUnifie = emojiVariationUnified$1(emoji, skinTone)) != null ? _emojiVariationUnifie : unified;
 }
-function useGetEmojisByCategory() {
-  var suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
-  var _useUpdateSuggested = useUpdateSuggested(),
-    suggestedUpdated = _useUpdateSuggested[0];
-  var suggested = React__default.useMemo(function () {
-    var _getSuggested;
-    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
-  [suggestedUpdated, suggestedEmojisModeConfig]);
-  return function getEmojisByCategory(category) {
-    var _emojis$emojis$catego;
-    if (category === 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 : [];
@@ -26877,10 +26794,67 @@ allEmojis.reduce(function (allEmojis, Emoji) {
   }
   return allEmojis;
 }, allEmojisByUnified);
-function activeVariationFromUnified$1(unified) {
-  var _unified$split = unified.split('-'),
-    suspectedSkinTone = _unified$split[1];
-  return skinToneVariations.includes(suspectedSkinTone) ? suspectedSkinTone : null;
+
+var SUGGESTED_LS_KEY = 'epr_suggested';
+function getSuggested(mode) {
+  try {
+    var _window$localStorage$;
+    if (typeof window === 'undefined' || !window.localStorage) {
+      return [];
+    }
+    var recent = JSON.parse((_window$localStorage$ = window.localStorage.getItem(SUGGESTED_LS_KEY)) != null ? _window$localStorage$ : '[]');
+    if (mode === SuggestionMode.FREQUENT) {
+      return recent.sort(function (a, b) {
+        return b.count - a.count;
+      });
+    }
+    return recent;
+  } catch (_unused) {
+    return [];
+  }
+}
+function setSuggested(emoji, skinTone) {
+  var recent = getSuggested();
+  var unified = emojiUnified(emoji, skinTone);
+  var originalUnified = emojiUnified(emoji);
+  var existing = recent.find(function (_ref) {
+    var u = _ref.unified;
+    return u === unified;
+  });
+  var nextList;
+  if (existing) {
+    nextList = [existing].concat(recent.filter(function (i) {
+      return i !== existing;
+    }));
+  } else {
+    existing = {
+      unified: unified,
+      original: originalUnified,
+      count: 0
+    };
+    nextList = [existing].concat(recent);
+  }
+  existing.count++;
+  nextList.length = Math.min(nextList.length, 14);
+  try {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    window.localStorage.setItem(SUGGESTED_LS_KEY, JSON.stringify(nextList));
+    // Prevents the change from being seen immediately.
+  } catch (_unused2) {
+    // ignore
+  }
+}
+
+function useIsMounted() {
+  var _React$useState = useState(false),
+    isMounted = _React$useState[0],
+    setIsMounted = _React$useState[1];
+  useEffect(function () {
+    setIsMounted(true);
+  }, []);
+  return isMounted;
 }
 
 var PickerDataContext = /*#__PURE__*/React__default.createContext({
@@ -26950,15 +26924,21 @@ function PickerDataProvider(_ref) {
 function usePickerDataContext() {
   return React__default.useContext(PickerDataContext);
 }
-function useGetEmojisByCategory$1() {
+function useGetEmojisByCategory() {
   var _usePickerDataContext = usePickerDataContext(),
     emojiData = _usePickerDataContext.emojiData,
     emojiByUnified = _usePickerDataContext.emojiByUnified;
   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) {
       var _extends2;
@@ -26967,7 +26947,7 @@ function useGetEmojisByCategory$1() {
       return _extends({}, emoji, (_extends2 = {}, _extends2[EmojiProperties.unified] = s.unified, _extends2));
     }).filter(Boolean);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [suggestedUpdated, suggestedEmojisModeConfig, emojiByUnified]);
+  }, [isMounted, suggestedUpdated, suggestedEmojisModeConfig, emojiByUnified]);
   return function getEmojisByCategory(category) {
     var _emojiData$emojis$cat, _emojiData$emojis;
     if (category === Categories.SUGGESTED) {
@@ -28316,7 +28296,7 @@ function useOnFocus() {
       if (!emoji) {
         return;
       }
-      if (emojiHasVariations$1(emoji)) {
+      if (emojiHasVariations(emoji)) {
         preloadEmoji(getEmojiUrl, emoji, emojiStyle);
       }
     }
@@ -28793,22 +28773,21 @@ 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);
   }, [activeSkinTone, closeAllOpenToggles, disallowClickRef, emojiByUnified, onEmojiClick, updateSuggested, getEmojiUrl, activeEmojiStyle]);
   var onMouseDown = useCallback(function onMouseDown(event) {
-    var _window;
     if (mouseDownTimerRef.current) {
       clearTimeout(mouseDownTimerRef.current);
     }
     var _emojiFromEvent2 = emojiFromEvent(event, emojiByUnified),
       emoji = _emojiFromEvent2[0];
-    if (!emoji || !emojiHasVariations$1(emoji)) {
+    if (!emoji || !emojiHasVariations(emoji)) {
       return;
     }
-    mouseDownTimerRef.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
+    mouseDownTimerRef.current = setTimeout(function () {
       disallowClickRef.current = true;
       mouseDownTimerRef.current = undefined;
       closeAllOpenToggles();
@@ -28871,9 +28850,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,
@@ -28887,7 +28866,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),
@@ -28901,7 +28880,7 @@ function emojiClickOutput(emoji, activeSkinTone, activeEmojiStyle, getEmojiUrl)
     isCustom: false,
     names: names,
     unified: unified,
-    unifiedWithoutSkinTone: emojiUnified$1(emoji)
+    unifiedWithoutSkinTone: emojiUnified(emoji)
   };
 }
 
@@ -29143,13 +29122,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 createElement(ClickableEmojiButton, {
     hasVariations: hasVariations,
     showVariations: showVariations,
     hidden: hidden,
     hiddenOnSearch: hiddenOnSearch,
-    emojiNames: emojiNames$1(emoji),
+    emojiNames: emojiNames(emoji),
     unified: unified,
     noBackground: noBackground,
     style: style
@@ -29546,6 +29525,10 @@ var styles$7 = /*#__PURE__*/stylesheet.create({
   }
 });
 
+// `useLayoutEffect` warns during SSR since it never runs on the server.
+// Fall back to `useEffect` there: measurement only matters on the client.
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 function MeasureEmoji() {
   var categories = useCategoriesConfig();
   var getEmojisByCategory = useGetEmojisByCategory();
@@ -29558,7 +29541,7 @@ function MeasureEmoji() {
     emojiSize = _useEmojiSizeState[0],
     setEmojiSize = _useEmojiSizeState[1];
   var ref = useRef(null);
-  useLayoutEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     if (ref.current) {
       setEmojiSize(ref.current.clientHeight);
     }
@@ -29568,7 +29551,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;
   }
@@ -29602,7 +29585,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 createElement("ul", {
@@ -29615,9 +29598,8 @@ function EmojiList(_ref) {
     if (categoryHeight) {
       topOffset += categoryHeight + labelHeight;
     }
-    return createElement(Suspense, {
-      key: category
-    }, createElement(RenderCategory, {
+    return createElement(RenderCategory, {
+      key: category,
       categoryEmojis: getEmojisByCategory(category),
       categoryConfig: categoryConfig,
       topOffset: currentOffset,
@@ -29630,7 +29612,7 @@ function EmojiList(_ref) {
         }
       },
       scrollTop: scrollTop
-    }));
+    });
   }));
 }
 function RenderCategory(_ref2) {
@@ -29689,7 +29671,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));
   useEffect(function () {
     if (!visible) {
       return;
@@ -29709,7 +29691,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 createElement(ClickableEmoji, {
       key: unified,
       emoji: emoji,
@@ -30225,7 +30207,7 @@ function PreviewBody() {
     if (!defaultEmoji) {
       return null;
     }
-    var defaultText = variationPickerEmoji ? emojiName$1(variationPickerEmoji) : previewConfig.defaultCaption;
+    var defaultText = variationPickerEmoji ? emojiName(variationPickerEmoji) : previewConfig.defaultCaption;
     return createElement(Fragment, null, createElement("div", null, show ? createElement(ViewOnlyEmoji, {
       unified: previewEmoji == null ? void 0 : previewEmoji.unified,
       emoji: emoji,
@@ -30234,7 +30216,7 @@ function PreviewBody() {
       getEmojiUrl: getEmojiUrl,
       className: cx(styles$e.emoji)
     }) : defaultEmoji ? createElement(ViewOnlyEmoji, {
-      unified: emojiUnified$1(defaultEmoji),
+      unified: emojiUnified(defaultEmoji),
       emoji: defaultEmoji,
       emojiStyle: emojiStyle,
       size: 45,
@@ -30242,7 +30224,7 @@ function PreviewBody() {
       className: cx(styles$e.emoji)
     }) : null), createElement("div", {
       className: cx(styles$e.label)
-    }, show ? emojiName$1(emoji) : defaultText));
+    }, show ? emojiName(emoji) : defaultText));
   }
 }
 var styles$e = /*#__PURE__*/stylesheet.create({