emoji-picker-react 4.22.1 → 4.22.3

package/dist/hooks/useActiveCategoryScrollDetection.d.ts

@@ -1,11 +1,11 @@
-export declare function useActiveCategoryScrollDetection({ setActiveCategory, setVisibleCategories, categoryIdentitiesKey, }: {
+import { CategoriesConfig } from '../config/categoryConfig';
+export declare function useActiveCategoryScrollDetection({ setActiveCategory, setVisibleCategories, categories, }: {
     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.
+     * Effective category list. The merged array reference only changes when
+     * the configuration is re-merged, so the observer re-subscribes exactly
+     * when sections are added or removed — no serialization involved.
      */
-    categoryIdentitiesKey: string;
+    categories: CategoriesConfig;
 }): void;

package/llms.txt

@@ -11,7 +11,7 @@ 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)**
+**[Live Demo](https://ealush.com/emoji-picker-react)** | **[Report a Bug](https://github.com/ealush/emoji-picker-react/issues)** | **[Sponsor](https://github.com/sponsors/ealush)**
 
 ![image](https://github.com/ealush/emoji-picker-react/assets/11255103/48901306-e7fd-49cd-8f1e-9b214083a61d)
 
@@ -117,6 +117,10 @@ On older versions only, the workaround was adding this to your HTML:
 </script>
 ```
 
+## Support Emoji Picker React
+
+Emoji Picker React is independently maintained. If your team relies on it, you can help fund ongoing maintenance and releases through [GitHub Sponsors](https://github.com/sponsors/ealush). Organizations can also support the project through [Tidelift](https://tidelift.com/subscription/pkg/npm-emoji-picker-react).
+
 ## More from the maintainer
 
 Building complex forms? Check out [**Vest**](https://vestjs.dev) — a validation framework for stateful, async, and dependent validation.

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.22.1",
+  "version": "4.22.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -26,6 +26,30 @@
     "type": "git",
     "url": "https://github.com/ealush/emoji-picker-react.git"
   },
+  "funding": [
+    {
+      "type": "github",
+      "url": "https://github.com/sponsors/ealush"
+    },
+    {
+      "type": "tidelift",
+      "url": "https://tidelift.com/subscription/pkg/npm-emoji-picker-react"
+    }
+  ],
+  "overrides": {
+    "decode-uri-component": "0.2.2",
+    "deep-object-diff": "1.1.9",
+    "ua-parser-js": "0.7.41",
+    "minimist": "1.2.8",
+    "loader-utils": "2.0.4",
+    "form-data": "4.0.6",
+    "request": {
+      "form-data": "2.5.6"
+    },
+    "tsconfig-paths": {
+      "json5": "1.0.2"
+    }
+  },
   "scripts": {
     "start": "tsdx watch",
     "build": "npm run build:data:src && npm run type-check && tsdx build --transpileOnly && npm run build:data:dist && npm run docs:llms",
@@ -122,7 +146,7 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typescript": "^4.7.4",
-    "vitest": "^2.0.5"
+    "vitest": "^4.1.11"
   },
   "dependencies": {
     "shipstyles": "1.0.0"

package/src/components/navigation/CategoryNavigation.tsx

@@ -36,16 +36,12 @@ 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('|');
+  // The observer re-subscribes when the merged categories reference
+  // changes (sections added/removed); the reference is stable otherwise.
   useActiveCategoryScrollDetection({
     setActiveCategory,
     setVisibleCategories,
-    categoryIdentitiesKey,
+    categories: categoriesConfig,
   });
 
   const visibleCategories = categoriesConfig.filter(categoryConfig => {

package/src/config/compareConfig.ts

@@ -1,3 +1,5 @@
+import { Categories, CategoryConfig } from '../types/exposedTypes';
+
 import { UserCategoryConfig } from './categoryConfig';
 import { PickerConfig } from './config';
 import { CustomEmoji } from './customEmojiConfig';
@@ -27,35 +29,74 @@ 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) &&
+    customEmojisEqual(prevCustomEmojis, nextCustomEmojis) &&
+    categoriesEqual(prev.categories, 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.
+ * Structural content equality for custom emojis. Length alone misses
+ * regroups and swaps, which would leave merged categories, search, and
+ * sections stale. Fields are compared element-wise (never serialized
+ * with delimiters) so user-controlled values cannot collide.
+ */
+function customEmojisEqual(
+  prev: CustomEmoji[],
+  next: CustomEmoji[],
+): boolean {
+  if (prev.length !== next.length) {
+    return false;
+  }
+  return prev.every((emoji, index) => {
+    const other = next[index];
+    return (
+      emoji.id === other.id &&
+      (emoji.group ?? '') === (other.group ?? '') &&
+      emoji.imgUrl === other.imgUrl &&
+      emoji.names.length === other.names.length &&
+      emoji.names.every((name, nameIndex) => name === other.names[nameIndex])
+    );
+  });
+}
+
+/**
+ * Structural content equality for the categories input. Order, labels,
+ * group selection, and icon identity all flow into the merged
+ * configuration. Icons compare by reference: swapping one icon element
+ * for another must rebuild, while a stable reference stays cheap.
  */
-function customEmojisKey(customEmojis: CustomEmoji[]): string {
-  return customEmojis
-    .map(
-      emoji =>
-        `${emoji.id}:${emoji.group ?? ''}:${emoji.names.join(',')}:${emoji.imgUrl}`,
-    )
-    .join('|');
+function categoriesEqual(
+  prev: UserCategoryConfig | undefined,
+  next: UserCategoryConfig | undefined,
+): boolean {
+  const prevEntries = prev ?? [];
+  const nextEntries = next ?? [];
+  if (prevEntries.length !== nextEntries.length) {
+    return false;
+  }
+  return prevEntries.every((entry, index) =>
+    categoryEntriesEqual(entry, nextEntries[index]),
+  );
 }
 
 /**
- * Content identity for the categories input. Order, labels, icons, and
- * group selection all flow into the merged configuration.
+ * One categories entry compared structurally. Icons compare by reference:
+ * swapping one icon element for another rebuilds, a stable reference stays
+ * cheap. Delimited serialization is avoided so user-controlled values
+ * cannot collide.
  */
-function categoriesKey(categories: UserCategoryConfig | undefined): string {
-  return (categories ?? [])
-    .map(entry =>
-      typeof entry === 'string'
-        ? entry
-        : `${entry.category}:${entry.name}:${entry.group ?? ''}:${entry.icon ? '1' : ''}`,
-    )
-    .join('|');
+function categoryEntriesEqual(
+  entry: Categories | CategoryConfig,
+  other: Categories | CategoryConfig,
+): boolean {
+  if (typeof entry === 'string' || typeof other === 'string') {
+    return entry === other;
+  }
+  return (
+    entry.category === other.category &&
+    entry.name === other.name &&
+    (entry.group ?? '') === (other.group ?? '') &&
+    entry.icon === other.icon
+  );
 }

package/src/hooks/useActiveCategoryScrollDetection.ts

@@ -3,21 +3,21 @@ import { useEffect } from 'react';
 import { categoryNameFromDom } from '../DomUtils/categoryNameFromDom';
 import { asSelectors, ClassNames } from '../DomUtils/classNames';
 import { useBodyRef } from '../components/context/ElementRefContext';
+import { CategoriesConfig } from '../config/categoryConfig';
 
 export function useActiveCategoryScrollDetection({
   setActiveCategory,
   setVisibleCategories,
-  categoryIdentitiesKey,
+  categories,
 }: {
   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.
+   * Effective category list. The merged array reference only changes when
+   * the configuration is re-merged, so the observer re-subscribes exactly
+   * when sections are added or removed — no serialization involved.
    */
-  categoryIdentitiesKey: string;
+  categories: CategoriesConfig;
 }) {
   const BodyRef = useBodyRef();
 
@@ -75,5 +75,5 @@ export function useActiveCategoryScrollDetection({
     return () => {
       observer.disconnect();
     };
-  }, [BodyRef, categoryIdentitiesKey, setActiveCategory, setVisibleCategories]);
+  }, [BodyRef, categories, setActiveCategory, setVisibleCategories]);
 }