emoji-picker-react 4.20.1 → 4.20.2

package/llms.txt

@@ -105,9 +105,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>
@@ -328,6 +330,7 @@ function App() {
 - `emojis-sv` (Swedish)
 - `emojis-th` (Thai)
 - `emojis-uk` (Ukrainian)
+- `emojis-vi` (Vietnamese)
 - `emojis-zh-hant` (Traditional Chinese)
 - `emojis-zh` (Simplified Chinese)
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.20.1",
+  "version": "4.20.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -42,10 +42,11 @@
     "build:data": "npm run build:data:src && npm run build:data:dist",
     "storybook": "npm run build:data && storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "docs:llms": "node ./scripts/generateLlmsTxt.js"
+    "docs:llms": "node ./scripts/generateLlmsTxt.js",
+    "check:react-floor": "node ./scripts/checkReactApiFloor.js"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=16.8"
   },
   "husky": {
     "hooks": {
@@ -63,11 +64,11 @@
   "size-limit": [
     {
       "path": "dist/emoji-picker-react.cjs.production.min.js",
-      "limit": "10 KB"
+      "limit": "95 KB"
     },
     {
       "path": "dist/emoji-picker-react.esm.js",
-      "limit": "10 KB"
+      "limit": "95 KB"
     }
   ],
   "devDependencies": {
@@ -118,6 +119,6 @@
     "vitest": "^2.0.5"
   },
   "dependencies": {
-    "flairup": "1.1.1"
+    "flairup": "1.1.2"
   }
 }

package/src/components/body/EmojiList.tsx

@@ -40,22 +40,21 @@ export function EmojiList({ scrollTop }: { scrollTop: number }) {
         }
 
         return (
-          <React.Suspense key={category}>
-            <RenderCategory
-              categoryEmojis={getEmojisByCategory(category)}
-              categoryConfig={categoryConfig}
-              topOffset={currentOffset}
-              onHeightReady={(height) => {
-                if (categoryHeights[category] !== height) {
-                  setCategoryHeights((prev) => ({
-                    ...prev,
-                    [category]: height,
-                  }));
-                }
-              }}
-              scrollTop={scrollTop}
-            />
-          </React.Suspense>
+          <RenderCategory
+            key={category}
+            categoryEmojis={getEmojisByCategory(category)}
+            categoryConfig={categoryConfig}
+            topOffset={currentOffset}
+            onHeightReady={(height) => {
+              if (categoryHeights[category] !== height) {
+                setCategoryHeights((prev) => ({
+                  ...prev,
+                  [category]: height,
+                }));
+              }
+            }}
+            scrollTop={scrollTop}
+          />
         );
       })}
     </ul>

package/src/components/body/EmojiVariationPicker.tsx

@@ -19,7 +19,7 @@ import {
   emojiHasVariations,
   emojiUnified,
   emojiVariations,
-} from '../../dataUtils/emojiSelectors';
+} from '../../dataUtils/emojiUtils';
 import {
   useAnchoredEmojiRef,
   useBodyRef,

package/src/components/body/MeasureEmoji.tsx

@@ -7,15 +7,13 @@ import {
   useGetEmojiUrlConfig,
   useLazyLoadEmojisConfig,
 } from '../../config/useConfig';
-import {
-  useGetEmojisByCategory,
-  emojiUnified,
-} from '../../dataUtils/emojiSelectors';
+import { emojiUnified } from '../../dataUtils/emojiUtils';
 import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
 import {
   useActiveSkinToneState,
   useEmojiSizeState,
 } from '../context/PickerContext';
+import { useGetEmojisByCategory } from '../context/PickerDataContext';
 import { ClickableEmoji } from '../emoji/Emoji';
 
 export function MeasureEmoji() {

package/src/components/emoji/Emoji.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { DataEmoji } from '../../dataUtils/DataTypes';
-import { emojiHasVariations, emojiNames } from '../../dataUtils/emojiSelectors';
+import { emojiHasVariations, emojiNames } from '../../dataUtils/emojiUtils';
 
 import { BaseEmojiProps } from './BaseEmojiProps';
 import { ClickableEmojiButton } from './ClickableEmojiButton';

package/src/components/footer/Preview.tsx

@@ -11,7 +11,7 @@ import {
   useGetEmojiUrlConfig,
   usePreviewConfig,
 } from '../../config/useConfig';
-import { emojiName, emojiUnified } from '../../dataUtils/emojiSelectors';
+import { emojiName, emojiUnified } from '../../dataUtils/emojiUtils';
 import { useEmojiPreviewEvents } from '../../hooks/useEmojiPreviewEvents';
 import { useIsSkinToneInPreview } from '../../hooks/useShouldShowSkinTonePicker';
 import Flex from '../Layout/Flex';

package/src/dataUtils/emojiSelectors.ts

@@ -1,20 +1,18 @@
-import React from 'react';
-
-import { useUpdateSuggested } from '../components/context/PickerContext';
+// Pure data helpers plus the legacy global registry. This module intentionally
+// imports no React components, hooks, or context providers so it can never
+// form an import cycle with them. Context-aware lookups live in
+// components/context/PickerDataContext instead.
 import { Categories } from '../config/categoryConfig';
 import { cdnUrl } from '../config/cdnUrls';
 import { CustomEmoji } from '../config/customEmojiConfig';
-import { useSuggestedEmojisModeConfig } from '../config/useConfig';
 import emojis from '../data/emojis';
 import skinToneVariations, {
   skinTonesMapped,
 } from '../data/skinToneVariations';
-import { useIsMounted } from '../hooks/useIsMounted';
 import { EmojiStyle, SkinTones } from '../types/exposedTypes';
 
 import { DataEmoji, DataEmojis, EmojiProperties, WithName } from './DataTypes';
 import { indexEmoji } from './alphaNumericEmojiIndex';
-import { getSuggested } from './suggested';
 
 export function emojiNames(emoji: WithName): string[] {
   return emoji[EmojiProperties.name] ?? [];
@@ -54,39 +52,6 @@ export function emojiUnified(emoji: DataEmoji, skinTone?: string): string {
   return emojiVariationUnified(emoji, skinTone) ?? unified;
 }
 
-export function useGetEmojisByCategory(): (Category: Categories) => DataEmojis {
-  const suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
-  const [suggestedUpdated] = useUpdateSuggested();
-  // Suggestions come from localStorage, which doesn't exist during SSR.
-  // Read them only after mount so the first client render matches the server.
-  const isMounted = useIsMounted();
-
-  const suggested = React.useMemo(
-    () => {
-      if (!isMounted) {
-        return [] as DataEmojis;
-      }
-
-      const suggested = getSuggested(suggestedEmojisModeConfig) ?? [];
-
-      return suggested
-        .map((s) => emojiByUnified(s.unified))
-        .filter(Boolean) as DataEmojis;
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isMounted, suggestedUpdated, suggestedEmojisModeConfig],
-  );
-
-  return function getEmojisByCategory(category: Categories): DataEmojis {
-    if (category === Categories.SUGGESTED) {
-      return suggested;
-    }
-
-    // @ts-ignore
-    return emojis.emojis[category] ?? [];
-  };
-}
-
 // WARNING: DO NOT USE DIRECTLY
 export function emojiUrlByUnified(
   unified: string,

package/src/dataUtils/suggested.ts

@@ -1,7 +1,7 @@
 import { SkinTones, SuggestionMode } from '../types/exposedTypes';
 
 import { DataEmoji } from './DataTypes';
-import { emojiUnified } from './emojiSelectors';
+import { emojiUnified } from './emojiUtils';
 
 const SUGGESTED_LS_KEY = 'epr_suggested';
 

package/src/hooks/useMouseDownHandlers.ts

@@ -26,7 +26,7 @@ import {
   emojiHasVariations,
   emojiNames,
   emojiUnified,
-} from '../dataUtils/emojiSelectors';
+} from '../dataUtils/emojiUtils';
 import { parseNativeEmoji } from '../dataUtils/parseNativeEmoji';
 import { setSuggested } from '../dataUtils/suggested';
 import { isCustomEmoji } from '../typeRefinements/typeRefinements';

package/src/hooks/useOnFocus.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { buttonFromTarget, emojiFromElement } from '../DomUtils/selectors';
 import { useBodyRef } from '../components/context/ElementRefContext';
 import { useEmojiStyleConfig, useGetEmojiUrlConfig } from '../config/useConfig';
-import { emojiHasVariations } from '../dataUtils/emojiSelectors';
+import { emojiHasVariations } from '../dataUtils/emojiUtils';
 import { EmojiStyle } from '../types/exposedTypes';
 
 import { preloadEmoji } from './preloadEmoji';