emoji-picker-react 4.22.0 → 4.22.1

package/dist/hooks/useActiveCategoryScrollDetection.d.ts

@@ -1,4 +1,11 @@
-export declare function useActiveCategoryScrollDetection({ setActiveCategory, setVisibleCategories, }: {
+export declare function useActiveCategoryScrollDetection({ setActiveCategory, setVisibleCategories, categoryIdentitiesKey, }: {
     setActiveCategory: (category: string) => void;
     setVisibleCategories: (categories: string[]) => void;
+    /**
+     * Stable string derived from the rendered category identities
+     * (e.g. ids joined). Re-subscribes the observer when sections are
+     * added or removed so new elements are observed and detached ones
+     * stop contributing; unrelated renders keep the same key.
+     */
+    categoryIdentitiesKey: string;
 }): void;

package/llms.txt

@@ -236,6 +236,13 @@ automatically (after the standard categories), so grouped emojis always
 render somewhere. Omit `CUSTOM` from `categories` entirely to hide all
 customs — explicit `categories` stay an allowlist:
 
+### Updating groups at runtime
+
+`categories` and `customEmojis` are immutable inputs: replacing either
+array (even with a same-length array) rebuilds sections, tabs, search,
+and lookup. Mutating an array in place is not detected — always provide
+a new reference. Group strings are exact, case-sensitive identifiers.
+
 ```tsx
 import EmojiPicker, { Categories } from 'emoji-picker-react';
 

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.22.0",
+  "version": "4.22.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/context/PickerConfigContext.tsx

@@ -39,7 +39,11 @@ export function useSetConfig(config: PickerConfig) {
     // not gonna...
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    config.customEmojis?.length,
+    // New references rebuild merged categories and data even at equal
+    // length; compareConfig above still gates no-op updates so inline
+    // literals don't loop.
+    config.categories,
+    config.customEmojis,
     config.open,
     config.emojiVersion,
     config.reactionsDefaultOpen,

package/src/components/context/PickerDataContext.tsx

@@ -34,9 +34,9 @@ export interface PickerDataContextValue {
 const PickerDataContext = React.createContext<PickerDataContextValue>({
   emojiData: {} as EmojiData,
   allEmojis: [],
-  allEmojisByUnified: {},
-  searchIndex: {},
-  customGroups: {},
+  allEmojisByUnified: Object.create(null),
+  searchIndex: Object.create(null),
+  customGroups: Object.create(null),
   emojiByUnified,
   activeVariationFromUnified: () => null,
 });
@@ -54,7 +54,10 @@ export function PickerDataProvider({
     // Clone to avoid mutation of shared source
     const newData: EmojiData = JSON.parse(JSON.stringify(emojiData));
 
-    const customGroups: Record<string, DataEmojis> = {};
+    // Group names and emoji ids are user-controlled strings: use
+    // null-prototype dictionaries so names like `__proto__` behave as
+    // ordinary data instead of resolving Object.prototype members.
+    const customGroups: Record<string, DataEmojis> = Object.create(null);
 
     if (customEmojis && customEmojis.length > 0) {
       for (const emoji of customEmojis) {
@@ -75,8 +78,10 @@ export function PickerDataProvider({
     const allEmojis: DataEmojis = Object.values(emojis)
       .concat(Object.values(customGroups))
       .flat();
-    const allEmojisByUnified: Record<string, DataEmoji> = {};
-    const searchIndex: Record<string, Record<string, DataEmoji>> = {};
+    const allEmojisByUnified: Record<string, DataEmoji> =
+      Object.create(null);
+    const searchIndex: Record<string, Record<string, DataEmoji>> =
+      Object.create(null);
 
     allEmojis.forEach((emoji) => {
       const unified = emoji[Keys.unified];
@@ -96,7 +101,7 @@ export function PickerDataProvider({
         .split('');
 
       joinedNameString.forEach((char: string) => {
-        searchIndex[char] = searchIndex[char] ?? {};
+        searchIndex[char] = searchIndex[char] ?? Object.create(null);
         searchIndex[char][unified] = emoji;
       });
     });

package/src/components/navigation/CategoryNavigation.tsx

@@ -28,7 +28,6 @@ export function CategoryNavigation() {
   const [activeCategory, setActiveCategory] = useState<string | null>(null);
   const [, setVisibleCategories] = useVisibleCategoriesState();
   const scrollCategoryIntoView = useScrollCategoryIntoView();
-  useActiveCategoryScrollDetection({ setActiveCategory, setVisibleCategories });
   const isSearchMode = useIsSearchMode();
 
   const categoriesConfig = useCategoriesConfig();
@@ -37,6 +36,18 @@ export function CategoryNavigation() {
   const hideCustomCategory = useShouldHideCustomEmojis();
   const { customGroups, emojiData } = usePickerDataContext();
 
+  // Rendered section identities. Passed to the scroll-detection hook so
+  // added/removed sections are (re-)subscribed; stable across renders
+  // unless the effective category list changes.
+  const categoryIdentitiesKey = categoriesConfig
+    .map(entry => categoryIdFromCategoryConfig(entry))
+    .join('|');
+  useActiveCategoryScrollDetection({
+    setActiveCategory,
+    setVisibleCategories,
+    categoryIdentitiesKey,
+  });
+
   const visibleCategories = categoriesConfig.filter(categoryConfig => {
     if (isCustomCategory(categoryConfig) && hideCustomCategory) {
       return false;

package/src/config/compareConfig.ts

@@ -1,4 +1,6 @@
+import { UserCategoryConfig } from './categoryConfig';
 import { PickerConfig } from './config';
+import { CustomEmoji } from './customEmojiConfig';
 
 // eslint-disable-next-line complexity
 export function compareConfig(prev: PickerConfig, next: PickerConfig) {
@@ -25,6 +27,35 @@ export function compareConfig(prev: PickerConfig, next: PickerConfig) {
     prev.searchDisabled === next.searchDisabled &&
     prev.skinTonePickerLocation === next.skinTonePickerLocation &&
     prevCustomEmojis.length === nextCustomEmojis.length &&
+    customEmojisKey(prevCustomEmojis) === customEmojisKey(nextCustomEmojis) &&
+    categoriesKey(prev.categories) === categoriesKey(next.categories) &&
     prev.emojiData === next.emojiData
   );
 }
+
+/**
+ * Content identity for custom emojis. Length alone misses regroups and
+ * swaps, which would leave merged categories, search, and sections stale.
+ */
+function customEmojisKey(customEmojis: CustomEmoji[]): string {
+  return customEmojis
+    .map(
+      emoji =>
+        `${emoji.id}:${emoji.group ?? ''}:${emoji.names.join(',')}:${emoji.imgUrl}`,
+    )
+    .join('|');
+}
+
+/**
+ * Content identity for the categories input. Order, labels, icons, and
+ * group selection all flow into the merged configuration.
+ */
+function categoriesKey(categories: UserCategoryConfig | undefined): string {
+  return (categories ?? [])
+    .map(entry =>
+      typeof entry === 'string'
+        ? entry
+        : `${entry.category}:${entry.name}:${entry.group ?? ''}:${entry.icon ? '1' : ''}`,
+    )
+    .join('|');
+}

package/src/hooks/useActiveCategoryScrollDetection.ts

@@ -7,9 +7,17 @@ import { useBodyRef } from '../components/context/ElementRefContext';
 export function useActiveCategoryScrollDetection({
   setActiveCategory,
   setVisibleCategories,
+  categoryIdentitiesKey,
 }: {
   setActiveCategory: (category: string) => void;
   setVisibleCategories: (categories: string[]) => void;
+  /**
+   * Stable string derived from the rendered category identities
+   * (e.g. ids joined). Re-subscribes the observer when sections are
+   * added or removed so new elements are observed and detached ones
+   * stop contributing; unrelated renders keep the same key.
+   */
+  categoryIdentitiesKey: string;
 }) {
   const BodyRef = useBodyRef();
 
@@ -67,5 +75,5 @@ export function useActiveCategoryScrollDetection({
     return () => {
       observer.disconnect();
     };
-  }, [BodyRef, setActiveCategory, setVisibleCategories]);
+  }, [BodyRef, categoryIdentitiesKey, setActiveCategory, setVisibleCategories]);
 }