emoji-picker-react 4.20.0 → 4.20.2

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;

package/llms.txt

@@ -0,0 +1,425 @@
+# emoji-picker-react — LLM context
+
+> This file is auto-generated by `npm run docs:llms`. Do not edit by hand.
+> Sources: README.md, PROPS.md, CUSTOMIZATION.md, INTERNATIONALIZATION.md, CSS_VARIABLES.md
+
+<!-- source: README.md -->
+
+# Emoji Picker React
+
+The most popular fully customizable emoji picker for React.
+
+[![npm downloads](https://img.shields.io/npm/dm/emoji-picker-react.svg)](https://www.npmjs.com/package/emoji-picker-react)
+
+**[Live Demo](https://ealush.com/emoji-picker-react)** | **[Report a Bug](https://github.com/ealush/emoji-picker-react/issues)**
+
+![image](https://github.com/ealush/emoji-picker-react/assets/11255103/48901306-e7fd-49cd-8f1e-9b214083a61d)
+
+![reactions](https://github.com/ealush/emoji-picker-react/assets/11255103/c28cc954-dc1d-4d82-91a8-64a74cf1d598)
+
+## Features
+
+- Fully customizable through props and CSS variables
+- Light, dark, and auto themes
+- Reactions picker mode and custom click handlers
+- Dozens of built-in languages
+- Custom image-based emojis
+- Apple, Google, Facebook, Twitter, and native emoji styles
+- Responsive and mobile-friendly
+- SSR-safe
+
+## Installation
+
+```bash
+npm install emoji-picker-react
+```
+
+## Usage
+
+```jsx
+import EmojiPicker from 'emoji-picker-react';
+
+function App() {
+  return (
+    <EmojiPicker onEmojiClick={(emojiData) => console.log(emojiData.emoji)} />
+  );
+}
+```
+
+`onEmojiClick` receives an `EmojiClickData` object (unified code, names, image URL, active skin tone) and the underlying mouse event.
+
+## Configuration
+
+```jsx
+<EmojiPicker
+  theme="dark"
+  emojiStyle="native"
+  width={320}
+  height={400}
+  previewConfig={{ showPreview: false }}
+/>
+```
+
+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.
+
+Restyle the picker by overriding [CSS variables](CSS_VARIABLES.md) on `.EmojiPickerReact`:
+
+```css
+.EmojiPickerReact {
+  --epr-emoji-size: 32px;
+}
+```
+
+## Internationalization
+
+Pass imported locale data via the `emojiData` prop:
+
+```jsx
+import EmojiPicker from 'emoji-picker-react';
+import es from 'emoji-picker-react/dist/data/emojis-es'; // Spanish
+
+function App() {
+  return <EmojiPicker emojiData={es} />;
+}
+```
+
+See [INTERNATIONALIZATION.md](INTERNATIONALIZATION.md) for the supported languages.
+
+## Customization
+
+Custom emojis, custom category icons, preview configuration, and CSP nonces are covered in [CUSTOMIZATION.md](CUSTOMIZATION.md).
+
+## Server-Side Rendering
+
+The picker renders on the server, with styles inlined into the server HTML — no setup needed. Since the picker is usually opened on demand rather than shown immediately, lazy-loading it is still recommended to keep the initial bundle small:
+
+```javascript
+import dynamic from 'next/dynamic';
+
+const Picker = dynamic(() => import('emoji-picker-react'));
+```
+
+## Troubleshooting
+
+### `global is not defined` (Vite, versions before 4.20)
+
+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>
+  window.global = window;
+</script>
+```
+
+## More from the maintainer
+
+Building complex forms? Check out [**Vest**](https://vestjs.dev) — a validation framework for stateful, async, and dependent validation.
+
+## Contributing
+
+Contributions are welcome — see the [Contributing Guide](https://github.com/ealush/emoji-picker-react/blob/master/CONTRIBUTING.md).
+
+Design inspiration by [Pavel Bolo](https://pavelbolo.com).
+
+<!-- source: PROPS.md -->
+
+# Props Reference
+
+Complete list of all props accepted by `EmojiPicker`. All props are optional.
+
+## General Configuration
+
+| Prop              | Type         | Default            | Description                                                                                  |
+| ----------------- | ------------ | ------------------ | -------------------------------------------------------------------------------------------- |
+| `open`            | `boolean`    | `true`             | Controls the visibility of the picker.                                                       |
+| `theme`           | `Theme`      | `Theme.LIGHT`      | The visual theme. Options: `'light'`, `'dark'`, `'auto'`.                                    |
+| `emojiStyle`      | `EmojiStyle` | `EmojiStyle.APPLE` | The emoji set to use. Options: `'apple'`, `'google'`, `'facebook'`, `'twitter'`, `'native'`. |
+| `emojiVersion`    | `string`     | `null`             | Limit emojis to a specific unicode version (e.g., `"14.0"`).                                 |
+| `lazyLoadEmojis`  | `boolean`    | `false`            | If true, emoji images are loaded only when they scroll into view.                            |
+| `autoFocusSearch` | `boolean`    | `true`             | Focuses the search input automatically when the picker mounts.                               |
+| `emojiData`       | `object`     | `undefined`        | Pass imported locale data here for internationalization. See [INTERNATIONALIZATION.md](INTERNATIONALIZATION.md). |
+
+## Dimensions & Styling
+
+| Prop        | Type                 | Default | Description                                           |
+| ----------- | -------------------- | ------- | ----------------------------------------------------- |
+| `width`     | `string \| number`   | `350`   | Picker width. Numbers are treated as pixels.          |
+| `height`    | `string \| number`   | `450`   | Picker height. Numbers are treated as pixels.         |
+| `style`     | `CSSProperties`      | `{}`    | Inline styles applied to the root element.            |
+| `className` | `string`             | `""`    | CSS class applied to the root element.                |
+
+Visual styling beyond size is done via [CSS variables](CSS_VARIABLES.md).
+
+## Events & Interaction
+
+| Prop               | Type                                                     | Description                                                          |
+| ------------------ | -------------------------------------------------------- | -------------------------------------------------------------------- |
+| `onEmojiClick`     | `(emojiData: EmojiClickData, event: MouseEvent) => void` | Callback triggered when a user clicks an emoji.                      |
+| `onReactionClick`  | `(emojiData: EmojiClickData, event: MouseEvent) => void` | Callback triggered when a user clicks a reaction (in reaction mode). |
+| `onSkinToneChange` | `(skinTone: SkinTones) => void`                          | Callback triggered when the user selects a new skin tone.            |
+
+## Search & Categories
+
+| Prop                     | Type                     | Default                   | Description                                                          |
+| ------------------------ | ------------------------ | ------------------------- | -------------------------------------------------------------------- |
+| `searchDisabled`         | `boolean`                | `false`                   | If true, the search bar is completely removed.                       |
+| `searchPlaceholder`      | `string`                 | `"Search"`                | Placeholder text for the search input.                               |
+| `searchClearButtonLabel` | `string`                 | `"Clear"`                 | Aria label for the search clear button.                              |
+| `categories`             | `CategoryConfig[]`       | _(All)_                   | Array of category objects to customize order or visibility.          |
+| `suggestedEmojisMode`    | `SuggestionMode`         | `SuggestionMode.FREQUENT` | Logic for "Suggested" category. Options: `'recent'`, `'frequent'`.   |
+| `defaultSkinTone`        | `SkinTones`              | `SkinTones.NEUTRAL`       | The initial skin tone.                                               |
+| `skinTonesDisabled`      | `boolean`                | `false`                   | If true, users cannot change the skin tone.                          |
+| `skinTonePickerLocation` | `SkinTonePickerLocation` | `SEARCH`                  | Location of the skin tone trigger. Options: `'SEARCH'`, `'PREVIEW'`. |
+
+## Customization & Advanced
+
+| Prop            | Type                                             | Default                 | Description                                                              |
+| --------------- | ------------------------------------------------ | ----------------------- | ------------------------------------------------------------------------ |
+| `customEmojis`  | `CustomEmoji[]`                                  | `[]`                    | Array of custom image-based emojis to inject. See [CUSTOMIZATION.md](CUSTOMIZATION.md). |
+| `hiddenEmojis`  | `string[]`                                       | `[]`                    | Array of unified IDs (e.g., `'1f921'`) to hide from the picker.          |
+| `previewConfig` | `PreviewConfig`                                  | `{ showPreview: true }` | Configuration for the bottom preview bar. See [CUSTOMIZATION.md](CUSTOMIZATION.md). |
+| `getEmojiUrl`   | `(unified: string, style: EmojiStyle) => string` | -                       | Function to override the default CDN URL for emoji images.               |
+| `categoryIcons` | `CategoryIcons`                                  | `{}`                    | Map `Categories` enum values to custom React nodes for navigation icons. See [CUSTOMIZATION.md](CUSTOMIZATION.md). |
+| `nonce`         | `string`                                         | `undefined`             | Content Security Policy (CSP) nonce for the inline style tag. See [CUSTOMIZATION.md](CUSTOMIZATION.md). |
+
+## Reactions Picker Mode
+
+| Prop                   | Type       | Default         | Description                                                              |
+| ---------------------- | ---------- | --------------- | ------------------------------------------------------------------------ |
+| `reactionsDefaultOpen` | `boolean`  | `false`         | If true, mounts in "Reactions" mode (single row) instead of full picker. |
+| `reactions`            | `string[]` | _(Default Set)_ | Array of unified IDs to display in the reactions bar.                    |
+| `allowExpandReactions` | `boolean`  | `true`          | If true, shows a `+` button to switch from reactions to full picker.     |
+
+<!-- source: CUSTOMIZATION.md -->
+
+# Customization
+
+## Custom Emojis
+
+Pass the `customEmojis` prop to inject image-based emojis. Each entry uses this structure:
+
+```ts
+{
+  id: string;      // Unique ID
+  names: string[]; // Search keywords
+  imgUrl: string;  // Image source
+}
+```
+
+```jsx
+<EmojiPicker
+  customEmojis={[
+    {
+      id: 'panda',
+      names: ['panda', 'bear'],
+      imgUrl: 'https://example.com/panda.png',
+    },
+  ]}
+/>
+```
+
+## Preview Bar
+
+Control the footer preview area with `previewConfig`:
+
+```ts
+{
+  defaultEmoji: string; // Default: "1f60a"
+  defaultCaption: string; // Default: "What's your mood?"
+  showPreview: boolean; // Default: true
+}
+```
+
+## Custom Category Icons
+
+Customize the navigation icons using one of two methods.
+
+**Method 1: The `categoryIcons` prop**
+
+Map `Categories` enum values to React nodes:
+
+```tsx
+import EmojiPicker, { Categories } from 'emoji-picker-react';
+
+<EmojiPicker
+  categoryIcons={{
+    [Categories.SUGGESTED]: <img src="recent.png" alt="Recent" />,
+    [Categories.SMILEYS_PEOPLE]: <MyCustomFaceIcon />,
+  }}
+/>;
+```
+
+**Method 2: The `categories` configuration array**
+
+Define the icon directly within the category configuration object:
+
+```tsx
+import EmojiPicker, { Categories } from 'emoji-picker-react';
+
+<EmojiPicker
+  categories={[
+    {
+      category: Categories.SUGGESTED,
+      name: 'Recently Used',
+      icon: <img src="recent.png" alt="Recent" />,
+    },
+    {
+      category: Categories.SMILEYS_PEOPLE,
+      name: 'Smileys & People',
+      icon: <MyCustomFaceIcon />,
+    },
+  ]}
+/>;
+```
+
+Note: if both methods are used for the same category, the icon from the `categories` configuration takes precedence over the `categoryIcons` prop.
+
+## Content Security Policy (CSP)
+
+If your site has a CSP that blocks inline styles, pass a `nonce` to the `EmojiPicker` component. It is applied to the inline `<style>` tag:
+
+```jsx
+<EmojiPicker nonce="your-nonce-value" />
+```
+
+<!-- source: INTERNATIONALIZATION.md -->
+
+# Internationalization (i18n)
+
+Import the dictionary you need and pass it to the `emojiData` prop:
+
+```javascript
+import EmojiPicker from 'emoji-picker-react';
+import es from 'emoji-picker-react/dist/data/emojis-es'; // Spanish
+
+function App() {
+  return <EmojiPicker emojiData={es} />;
+}
+```
+
+## Supported Languages
+
+- `emojis-bn` (Bengali)
+- `emojis-da` (Danish)
+- `emojis-de` (German)
+- `emojis-en-gb` (English, GB)
+- `emojis-en` (English, US)
+- `emojis-es-mx` (Spanish, Mexico)
+- `emojis-es` (Spanish)
+- `emojis-et` (Estonian)
+- `emojis-fi` (Finnish)
+- `emojis-fr` (French)
+- `emojis-hi` (Hindi)
+- `emojis-hu` (Hungarian)
+- `emojis-it` (Italian)
+- `emojis-ja` (Japanese)
+- `emojis-ko` (Korean)
+- `emojis-lt` (Lithuanian)
+- `emojis-ms` (Malay)
+- `emojis-nb` (Norwegian Bokmal)
+- `emojis-nl` (Dutch)
+- `emojis-pl` (Polish)
+- `emojis-pt` (Portuguese)
+- `emojis-ru` (Russian)
+- `emojis-sv` (Swedish)
+- `emojis-th` (Thai)
+- `emojis-uk` (Ukrainian)
+- `emojis-vi` (Vietnamese)
+- `emojis-zh-hant` (Traditional Chinese)
+- `emojis-zh` (Simplified Chinese)
+
+<!-- source: CSS_VARIABLES.md -->
+
+# 🎨 CSS Variables
+
+You can customize specific parts of the picker by overriding these CSS variables. Target `.EmojiPickerReact` or `aside.EmojiPickerReact` to apply them.
+
+```css
+.EmojiPickerReact {
+  --epr-emoji-size: 32px;
+}
+```
+
+or
+
+```css
+aside.EmojiPickerReact {
+  --epr-emoji-size: 32px;
+}
+```
+
+## 🎛️ General Variables
+
+| Variable                     | Description                                        | Default   |
+| :--------------------------- | :------------------------------------------------- | :-------- |
+| `--epr-emoji-size`           | Size of the emojis.                                | `30px`    |
+| `--epr-emoji-padding`        | Padding around each emoji.                         | `5px`     |
+| `--epr-emoji-gap`            | **Deprecated**. Use `--epr-emoji-padding` instead. | -         |
+| `--epr-bg-color`             | Background color of the picker.                    | `#fff`    |
+| `--epr-text-color`           | Main text color.                                   | `#858585` |
+| `--epr-picker-border-color`  | Border color of the picker container.              | `#e7e7e7` |
+| `--epr-picker-border-radius` | Border radius of the picker.                       | `8px`     |
+| `--epr-horizontal-padding`   | Horizontal padding for various elements.           | `10px`    |
+| `--epr-highlight-color`      | Color for active states and highlights.            | `#007aeb` |
+| `--epr-hover-bg-color`       | Background color on hover.                         | `#e5f0fa` |
+| `--epr-focus-bg-color`       | Background color on focus.                         | `#e0f0ff` |
+
+## 🔎 Search Input
+
+| Variable                               | Description                             | Default                            |
+| :------------------------------------- | :-------------------------------------- | :--------------------------------- |
+| `--epr-search-input-bg-color`          | Background color of the search input.   | `#f6f6f6`                          |
+| `--epr-search-input-bg-color-active`   | Background color when search is active. | `var(--epr-search-input-bg-color)` |
+| `--epr-search-input-text-color`        | Text color in the search input.         | `var(--epr-text-color)`            |
+| `--epr-search-input-placeholder-color` | Placeholder text color.                 | `var(--epr-text-color)`            |
+| `--epr-search-border-color`            | Border color of the search input.       | `var(--epr-search-input-bg-color)` |
+| `--epr-search-border-color-active`     | Border color when search is active.     | `var(--epr-highlight-color)`       |
+| `--epr-search-input-border-radius`     | Border radius of the search input.      | `8px`                              |
+| `--epr-search-input-height`            | Height of the search input.             | `40px`                             |
+| `--epr-search-icon-color`              | Color of the search icon.               | -                                  |
+
+## 🏷️ Category Navigation
+
+| Variable                                | Description                          | Default   |
+| :-------------------------------------- | :----------------------------------- | :-------- |
+| `--epr-category-navigation-button-size` | Size of category navigation buttons. | `30px`    |
+| `--epr-category-icon-active-color`      | Color of the active category icon.   | `#6aa8de` |
+
+## 📃 Category Labels
+
+| Variable                          | Description                                    | Default                 |
+| :-------------------------------- | :--------------------------------------------- | :---------------------- |
+| `--epr-category-label-bg-color`   | Background color of the sticky category label. | `#ffffffe6`             |
+| `--epr-category-label-text-color` | Text color of the category label.              | `var(--epr-text-color)` |
+| `--epr-category-label-height`     | Height of the category label.                  | `40px`                  |
+
+## 👁️ Preview Area
+
+| Variable                   | Description                            | Default                 |
+| :------------------------- | :------------------------------------- | :---------------------- |
+| `--epr-preview-height`     | Height of the preview area.            | `70px`                  |
+| `--epr-preview-text-size`  | Font size of text in the preview area. | `14px`                  |
+| `--epr-preview-text-color` | Text color in the preview area.        | `var(--epr-text-color)` |
+
+## 🖐️ Skin Tone Picker
+
+| Variable                            | Description                                    | Default     |
+| :---------------------------------- | :--------------------------------------------- | :---------- |
+| `--epr-skin-tone-picker-menu-color` | Background color of the skin tone picker menu. | `#ffffff95` |
+| `--epr-skin-tone-size`              | Size of skin tone circles.                     | `20px`      |
+
+## 🌑 Dark Mode
+
+| Variable                           | Description                           | Default                      |
+| :--------------------------------- | :------------------------------------ | :--------------------------- |
+| `--epr-dark-bg-color`              | Background color in dark mode.        | `#222222`                    |
+| `--epr-dark-picker-border-color`   | Border color in dark mode.            | `#151617`                    |
+| `--epr-dark-text-color`            | Text color in dark mode.              | `var(--epr-highlight-color)` |
+| `--epr-dark-search-input-bg-color` | Search input background in dark mode. | `#333333`                    |
+| `--epr-dark-hover-bg-color`        | Hover background color in dark mode.  | `#363636f6`                  |

package/package.json

@@ -1,12 +1,13 @@
 {
-  "version": "4.20.0",
+  "version": "4.20.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "homepage": "https://ealush.com/emoji-picker-react",
   "files": [
     "dist",
-    "src"
+    "src",
+    "llms.txt"
   ],
   "description": "Emoji Picker component for React Applications on the web",
   "keywords": [
@@ -27,7 +28,7 @@
   },
   "scripts": {
     "start": "tsdx watch",
-    "build": "npm run build:data:src && npm run type-check && tsdx build --transpileOnly && npm run build:data:dist",
+    "build": "npm run build:data:src && npm run type-check && tsdx build --transpileOnly && npm run build:data:dist && npm run docs:llms",
     "type-check": "tsc --noEmit --incremental --pretty --project tsconfig.json",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -40,10 +41,12 @@
     "build:data:dist": "tsc --project tsconfig.data.json && node ./scripts/copyData.js",
     "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"
+    "build-storybook": "storybook build",
+    "docs:llms": "node ./scripts/generateLlmsTxt.js",
+    "check:react-floor": "node ./scripts/checkReactApiFloor.js"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=16.8"
   },
   "husky": {
     "hooks": {
@@ -61,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": {
@@ -116,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,14 +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() {
@@ -27,7 +26,7 @@ export function MeasureEmoji() {
   const [emojiSize, setEmojiSize] = useEmojiSizeState();
   const ref = React.useRef<HTMLDivElement>(null);
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (ref.current) {
       setEmojiSize(ref.current.clientHeight);
     }

package/src/components/context/PickerDataContext.tsx

@@ -15,6 +15,7 @@ import {
   unifiedWithoutSkinTone,
 } from '../../dataUtils/emojiUtils';
 import { getSuggested } from '../../dataUtils/suggested';
+import { useIsMounted } from '../../hooks/useIsMounted';
 import { Categories, EmojiData, SkinTones } from '../../types/exposedTypes';
 
 import { usePickerConfig } from './PickerConfigContext';
@@ -126,8 +127,15 @@ export function useGetEmojisByCategory() {
   const { emojiData, emojiByUnified } = usePickerDataContext();
   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
@@ -141,7 +149,7 @@ export function useGetEmojisByCategory() {
       })
       .filter(Boolean) as DataEmojis;
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [suggestedUpdated, suggestedEmojisModeConfig, emojiByUnified]);
+  }, [isMounted, suggestedUpdated, suggestedEmojisModeConfig, emojiByUnified]);
 
   return function getEmojisByCategory(category: Categories): DataEmojis {
     if (category === Categories.SUGGESTED) {

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,10 +1,10 @@
-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,
@@ -13,7 +13,6 @@ 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] ?? [];
@@ -53,32 +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();
-
-  const suggested = React.useMemo(
-    () => {
-      const suggested = getSuggested(suggestedEmojisModeConfig) ?? [];
-
-      return suggested
-        .map((s) => emojiByUnified(s.unified))
-        .filter(Boolean) as DataEmojis;
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [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,