emoji-picker-react 4.20.1 → 4.20.4

package/llms.txt

@@ -64,7 +64,7 @@ See [PROPS.md](PROPS.md) for the complete props reference.
 
 ## Styling
 
-No stylesheet import needed. All styles are scoped via [Flairup](https://github.com/ealush/flairup) — generated class names are hashed, so the picker's CSS won't leak into or clash with your app's styles.
+No stylesheet import needed. All styles are scoped via [ShipStyles](https://github.com/ealush/shipstyles) — generated class names are hashed, so the picker's CSS won't leak into or clash with your app's styles.
 
 Restyle the picker by overriding [CSS variables](CSS_VARIABLES.md) on `.EmojiPickerReact`:
 
@@ -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.4",
   "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": {
@@ -75,6 +76,10 @@
     "@babel/preset-react": "^7.24.1",
     "@babel/preset-typescript": "^7.24.1",
     "@playwright/test": "^1.46.1",
+    "@semantic-release/changelog": "^7.0.0",
+    "@semantic-release/git": "^11.0.1",
+    "@semantic-release/github": "^12.0.9",
+    "@semantic-release/npm": "^13.1.5",
     "@size-limit/preset-small-lib": "^8.0.1",
     "@storybook/addon-essentials": "^8.6.15",
     "@storybook/addon-info": "^5.3.21",
@@ -92,6 +97,7 @@
     "@typescript-eslint/parser": "^5.36.2",
     "autoprefixer": "^10.4.8",
     "babel-loader": "^8.2.5",
+    "conventional-changelog-conventionalcommits": "^9.3.1",
     "cssnano": "^5.1.13",
     "emoji-datasource": "^16.0.0",
     "emojibase-data": "^17.0.0",
@@ -109,6 +115,7 @@
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rollup-plugin-svg": "^2.0.0",
+    "semantic-release": "^25.0.9",
     "size-limit": "^8.0.1",
     "storybook": "8.6.15",
     "tiny-invariant": "^1.2.0",
@@ -118,6 +125,6 @@
     "vitest": "^2.0.5"
   },
   "dependencies": {
-    "flairup": "1.1.1"
+    "shipstyles": "1.0.0"
   }
 }

package/src/Stylesheet/stylesheet.tsx

@@ -1,5 +1,5 @@
-import { Styles, createSheet } from 'flairup';
 import * as React from 'react';
+import { Styles, createSheet } from 'shipstyles';
 
 import { ClassNames } from '../DomUtils/classNames';
 

package/src/components/Layout/Flex.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
 

package/src/components/Layout/Space.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 type Props = Readonly<{
   className?: string;

package/src/components/Reactions/BtnPlus.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { darkMode, stylesheet } from '../../Stylesheet/stylesheet';
 import { Button } from '../atoms/Button';

package/src/components/Reactions/Reactions.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { commonStyles, stylesheet } from '../../Stylesheet/stylesheet';
 import {

package/src/components/atoms/Button.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
 

package/src/components/body/Body.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { ClassNames } from '../../DomUtils/classNames';
 import {

package/src/components/body/EmojiCategory.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { ClassNames } from '../../DomUtils/classNames';
 import {

package/src/components/body/EmojiList.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { ClassNames } from '../../DomUtils/classNames';
 import { getLabelHeight } from '../../DomUtils/elementPositionInRow';
@@ -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

@@ -1,6 +1,6 @@
-import { cx } from 'flairup';
 import * as React from 'react';
 import { useEffect } from 'react';
+import { cx } from 'shipstyles';
 
 import { ClassNames } from '../../DomUtils/classNames';
 import { focusFirstVisibleEmoji } from '../../DomUtils/keyboardNavigation';
@@ -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/ClickableEmojiButton.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { ClassNames } from '../../DomUtils/classNames';
 import {

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/emoji/EmojiImg.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
 import { EmojiStyle } from '../../types/exposedTypes';

package/src/components/emoji/NativeEmoji.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
 import { parseNativeEmoji } from '../../dataUtils/parseNativeEmoji';

package/src/components/footer/Preview.tsx

@@ -1,6 +1,6 @@
-import { cx } from 'flairup';
 import * as React from 'react';
 import { useState } from 'react';
+import { cx } from 'shipstyles';
 
 import {
   commonInteractionStyles,
@@ -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/components/header/Header.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { commonInteractionStyles } from '../../Stylesheet/stylesheet';
 import Relative from '../Layout/Relative';

package/src/components/header/Search/BtnClearSearch.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import {
   commonInteractionStyles,

package/src/components/header/Search/IcnSearch.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { darkMode, stylesheet } from '../../../Stylesheet/stylesheet';
 

package/src/components/header/Search/Search.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { darkMode, stylesheet } from '../../../Stylesheet/stylesheet';
 import {

package/src/components/header/SkinTonePicker/BtnSkinToneVariation.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { stylesheet } from '../../../Stylesheet/stylesheet';
 import { skinTonesNamed } from '../../../data/skinToneVariations';

package/src/components/header/SkinTonePicker/SkinTonePicker.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable complexity */
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { ClassNames } from '../../../DomUtils/classNames';
 import { stylesheet } from '../../../Stylesheet/stylesheet';

package/src/components/main/PickerMain.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { ClassNames } from '../../DomUtils/classNames';
 import { stylesheet } from '../../Stylesheet/stylesheet';

package/src/components/navigation/CategoryButton.tsx

@@ -1,5 +1,5 @@
-import { cx } from 'flairup';
 import * as React from 'react';
+import { cx } from 'shipstyles';
 
 import { ClassNames } from '../../DomUtils/classNames';
 import {

package/src/components/navigation/CategoryNavigation.tsx

@@ -1,6 +1,6 @@
-import { cx } from 'flairup';
 import * as React from 'react';
 import { useState } from 'react';
+import { cx } from 'shipstyles';
 
 import { stylesheet } from '../../Stylesheet/stylesheet';
 import { categoryFromCategoryConfig } from '../../config/categoryConfig';

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';