emoji-picker-react 4.22.1 → 4.22.3

package/README.md

@@ -4,7 +4,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)
 
@@ -110,6 +110,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/dist/emoji-picker-react.cjs.development.js

@@ -179,27 +179,54 @@ function compareConfig(prev, next) {
   var _prev$customEmojis, _next$customEmojis;
   var prevCustomEmojis = (_prev$customEmojis = prev.customEmojis) != null ? _prev$customEmojis : [];
   var nextCustomEmojis = (_next$customEmojis = next.customEmojis) != null ? _next$customEmojis : [];
-  return prev.open === next.open && prev.emojiVersion === next.emojiVersion && prev.reactionsDefaultOpen === next.reactionsDefaultOpen && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.searchClearButtonLabel === next.searchClearButtonLabel && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && 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;
+  return prev.open === next.open && prev.emojiVersion === next.emojiVersion && prev.reactionsDefaultOpen === next.reactionsDefaultOpen && prev.searchPlaceHolder === next.searchPlaceHolder && prev.searchPlaceholder === next.searchPlaceholder && prev.searchClearButtonLabel === next.searchClearButtonLabel && prev.defaultSkinTone === next.defaultSkinTone && prev.skinTonesDisabled === next.skinTonesDisabled && prev.autoFocusSearch === next.autoFocusSearch && prev.emojiStyle === next.emojiStyle && prev.theme === next.theme && prev.suggestedEmojisMode === next.suggestedEmojisMode && prev.lazyLoadEmojis === next.lazyLoadEmojis && prev.className === next.className && prev.height === next.height && prev.width === next.width && prev.style === next.style && prev.searchDisabled === next.searchDisabled && prev.skinTonePickerLocation === next.skinTonePickerLocation && prevCustomEmojis.length === nextCustomEmojis.length && 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 customEmojisKey(customEmojis) {
-  return customEmojis.map(function (emoji) {
-    var _emoji$group;
-    return emoji.id + ":" + ((_emoji$group = emoji.group) != null ? _emoji$group : '') + ":" + emoji.names.join(',') + ":" + emoji.imgUrl;
-  }).join('|');
+function customEmojisEqual(prev, next) {
+  if (prev.length !== next.length) {
+    return false;
+  }
+  return prev.every(function (emoji, index) {
+    var _emoji$group, _other$group;
+    var other = next[index];
+    return emoji.id === other.id && ((_emoji$group = emoji.group) != null ? _emoji$group : '') === ((_other$group = other.group) != null ? _other$group : '') && emoji.imgUrl === other.imgUrl && emoji.names.length === other.names.length && emoji.names.every(function (name, nameIndex) {
+      return name === other.names[nameIndex];
+    });
+  });
 }
 /**
- * Content identity for the categories input. Order, labels, icons, and
- * group selection all flow into the merged configuration.
+ * 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 categoriesKey(categories) {
-  return (categories != null ? categories : []).map(function (entry) {
-    var _entry$group;
-    return typeof entry === 'string' ? entry : entry.category + ":" + entry.name + ":" + ((_entry$group = entry.group) != null ? _entry$group : '') + ":" + (entry.icon ? '1' : '');
-  }).join('|');
+function categoriesEqual(prev, next) {
+  var prevEntries = prev != null ? prev : [];
+  var nextEntries = next != null ? next : [];
+  if (prevEntries.length !== nextEntries.length) {
+    return false;
+  }
+  return prevEntries.every(function (entry, index) {
+    return categoryEntriesEqual(entry, nextEntries[index]);
+  });
+}
+/**
+ * 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 categoryEntriesEqual(entry, other) {
+  var _entry$group, _other$group2;
+  if (typeof entry === 'string' || typeof other === 'string') {
+    return entry === other;
+  }
+  return entry.category === other.category && entry.name === other.name && ((_entry$group = entry.group) != null ? _entry$group : '') === ((_other$group2 = other.group) != null ? _other$group2 : '') && entry.icon === other.icon;
 }
 
 var DEFAULT_REACTIONS = ['1f44d', '2764-fe0f', '1f603', '1f622', '1f64f', '1f44e', '1f621'];
@@ -30534,7 +30561,7 @@ function categoryNameFromDom($category) {
 function useActiveCategoryScrollDetection(_ref) {
   var setActiveCategory = _ref.setActiveCategory,
     setVisibleCategories = _ref.setVisibleCategories,
-    categoryIdentitiesKey = _ref.categoryIdentitiesKey;
+    categories = _ref.categories;
   var BodyRef = useBodyRef();
   React.useEffect(function () {
     var visibleCategories = new Map();
@@ -30586,7 +30613,7 @@ function useActiveCategoryScrollDetection(_ref) {
     return function () {
       observer.disconnect();
     };
-  }, [BodyRef, categoryIdentitiesKey, setActiveCategory, setVisibleCategories]);
+  }, [BodyRef, categories, setActiveCategory, setVisibleCategories]);
 }
 
 function useScrollCategoryIntoView() {
@@ -30980,16 +31007,12 @@ function CategoryNavigation() {
   var _usePickerDataContext = usePickerDataContext(),
     customGroups = _usePickerDataContext.customGroups,
     emojiData = _usePickerDataContext.emojiData;
-  // 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.
-  var categoryIdentitiesKey = categoriesConfig.map(function (entry) {
-    return categoryIdFromCategoryConfig(entry);
-  }).join('|');
+  // The observer re-subscribes when the merged categories reference
+  // changes (sections added/removed); the reference is stable otherwise.
   useActiveCategoryScrollDetection({
     setActiveCategory: setActiveCategory,
     setVisibleCategories: setVisibleCategories,
-    categoryIdentitiesKey: categoryIdentitiesKey
+    categories: categoriesConfig
   });
   var visibleCategories = categoriesConfig.filter(function (categoryConfig) {
     if (isCustomCategory(categoryConfig) && hideCustomCategory) {