emoji-picker-react 4.19.4 → 4.20.1

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

@@ -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,14 +26743,24 @@ var defaultEmojiData = {
 	emojis: emojis
 };
 
+function useIsMounted() {
+  var _React$useState = useState(false),
+    isMounted = _React$useState[0],
+    setIsMounted = _React$useState[1];
+  useEffect(function () {
+    setIsMounted(true);
+  }, []);
+  return isMounted;
+}
+
 var SUGGESTED_LS_KEY = 'epr_suggested';
 function getSuggested(mode) {
   try {
-    var _window, _window$localStorage$, _window2;
-    if (!((_window = window) != null && _window.localStorage)) {
+    var _window$localStorage$;
+    if (typeof window === 'undefined' || !window.localStorage) {
       return [];
     }
-    var recent = JSON.parse((_window$localStorage$ = (_window2 = window) == null ? void 0 : _window2.localStorage.getItem(SUGGESTED_LS_KEY)) != null ? _window$localStorage$ : '[]');
+    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;
@@ -26786,8 +26795,10 @@ function setSuggested(emoji, skinTone) {
   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));
+    if (typeof window === 'undefined') {
+      return;
+    }
+    window.localStorage.setItem(SUGGESTED_LS_KEY, JSON.stringify(nextList));
     // Prevents the change from being seen immediately.
   } catch (_unused2) {
     // ignore
@@ -26826,15 +26837,21 @@ 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
-  [suggestedUpdated, suggestedEmojisModeConfig]);
+  [isMounted, suggestedUpdated, suggestedEmojisModeConfig]);
   return function getEmojisByCategory(category) {
     var _emojis$emojis$catego;
     if (category === Categories.SUGGESTED) {
@@ -26957,8 +26974,14 @@ function useGetEmojisByCategory$1() {
   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 +26990,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) {
@@ -28799,7 +28822,6 @@ function useMouseDownHandlers(ContainerRef, mouseEventSource) {
     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);
     }
@@ -28808,7 +28830,7 @@ function useMouseDownHandlers(ContainerRef, mouseEventSource) {
     if (!emoji || !emojiHasVariations$1(emoji)) {
       return;
     }
-    mouseDownTimerRef.current = (_window = window) == null ? void 0 : _window.setTimeout(function () {
+    mouseDownTimerRef.current = setTimeout(function () {
       disallowClickRef.current = true;
       mouseDownTimerRef.current = undefined;
       closeAllOpenToggles();
@@ -28917,7 +28939,12 @@ var styles$1 = /*#__PURE__*/stylesheet.create({
     '.': 'epr-btn',
     cursor: 'pointer',
     border: '0',
-    background: 'none',
+    // Longhand, not `background: 'none'`: a shorthand reset shares its
+    // conflict keys with every background longhand, so cx() would drop
+    // this whole class wherever a later class sets background-image
+    // (e.g. the category nav sprite) and the native button face would
+    // show through.
+    backgroundColor: 'transparent',
     outline: 'none'
   }
 });
@@ -29047,7 +29074,11 @@ function NativeEmoji(_ref) {
     style = _ref.style,
     className = _ref.className;
   return createElement("span", {
-    className: cx(styles$4.nativeEmoji, emojiStyles.common, emojiStyles.external, className),
+    className: cx(
+    // Order matters: cx() lets the later class win same-property
+    // conflicts, so the zeroing reset must come first and the real
+    // font-size last — otherwise the emoji renders at 0px.
+    emojiStyles.external, emojiStyles.common, styles$4.nativeEmoji, className),
     "data-unified": unified,
     style: style
   }, parseNativeEmoji(unified));
@@ -29537,6 +29568,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();
@@ -29549,7 +29584,7 @@ function MeasureEmoji() {
     emojiSize = _useEmojiSizeState[0],
     setEmojiSize = _useEmojiSizeState[1];
   var ref = useRef(null);
-  useLayoutEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     if (ref.current) {
       setEmojiSize(ref.current.clientHeight);
     }