emoji-picker-react 4.22.0 → 4.22.2

package/dist/emoji-picker-react.cjs.development.js

@@ -179,7 +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 && 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;
+}
+/**
+ * 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, 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];
+    });
+  });
+}
+/**
+ * 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 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'];
@@ -557,7 +604,6 @@ function PickerConfigProvider(_ref) {
   }, children);
 }
 function useSetConfig(config) {
-  var _config$customEmojis;
   var _React$useState = React.useState(function () {
       return mergeConfig(config);
     }),
@@ -570,7 +616,11 @@ function useSetConfig(config) {
     setMergedConfig(mergeConfig(config));
     // not gonna...
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [(_config$customEmojis = config.customEmojis) == null ? void 0 : _config$customEmojis.length, config.open, config.emojiVersion, config.reactionsDefaultOpen, config.searchPlaceHolder, config.searchPlaceholder, config.searchClearButtonLabel, config.defaultSkinTone, config.skinTonesDisabled, config.autoFocusSearch, config.emojiStyle, config.theme, config.suggestedEmojisMode, config.lazyLoadEmojis, config.className, config.height, config.width, config.searchDisabled, config.skinTonePickerLocation, config.allowExpandReactions, config.emojiData]);
+  }, [
+  // 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, config.searchPlaceHolder, config.searchPlaceholder, config.searchClearButtonLabel, config.defaultSkinTone, config.skinTonesDisabled, config.autoFocusSearch, config.emojiStyle, config.theme, config.suggestedEmojisMode, config.lazyLoadEmojis, config.className, config.height, config.width, config.searchDisabled, config.skinTonePickerLocation, config.allowExpandReactions, config.emojiData]);
   return mergedConfig;
 }
 function usePickerConfig() {
@@ -26927,9 +26977,9 @@ function useIsMounted() {
 var PickerDataContext = /*#__PURE__*/React__default.createContext({
   emojiData: {},
   allEmojis: [],
-  allEmojisByUnified: {},
-  searchIndex: {},
-  customGroups: {},
+  allEmojisByUnified: /*#__PURE__*/Object.create(null),
+  searchIndex: /*#__PURE__*/Object.create(null),
+  customGroups: /*#__PURE__*/Object.create(null),
   emojiByUnified: emojiByUnified,
   activeVariationFromUnified: function activeVariationFromUnified() {
     return null;
@@ -26944,7 +26994,10 @@ function PickerDataProvider(_ref) {
     var emojiData = genericEmojiData || defaultEmojiData;
     // Clone to avoid mutation of shared source
     var newData = JSON.parse(JSON.stringify(emojiData));
-    var customGroups = {};
+    // 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.
+    var customGroups = Object.create(null);
     if (customEmojis && customEmojis.length > 0) {
       for (var _iterator = _createForOfIteratorHelperLoose(customEmojis), _step; !(_step = _iterator()).done;) {
         var _customGroups$emoji$g;
@@ -26961,8 +27014,8 @@ function PickerDataProvider(_ref) {
     }
     var emojis = newData.emojis || {};
     var allEmojis = Object.values(emojis).concat(Object.values(customGroups)).flat();
-    var allEmojisByUnified = {};
-    var searchIndex = {};
+    var allEmojisByUnified = Object.create(null);
+    var searchIndex = Object.create(null);
     allEmojis.forEach(function (emoji) {
       var unified = emoji[EmojiProperties.unified];
       allEmojisByUnified[unified] = emoji;
@@ -26977,7 +27030,7 @@ function PickerDataProvider(_ref) {
       var joinedNameString = (emoji[EmojiProperties.name] || []).join('').toLowerCase().split('');
       joinedNameString.forEach(function (_char) {
         var _searchIndex$_char;
-        searchIndex[_char] = (_searchIndex$_char = searchIndex[_char]) != null ? _searchIndex$_char : {};
+        searchIndex[_char] = (_searchIndex$_char = searchIndex[_char]) != null ? _searchIndex$_char : Object.create(null);
         searchIndex[_char][unified] = emoji;
       });
     });
@@ -30507,7 +30560,8 @@ function categoryNameFromDom($category) {
 
 function useActiveCategoryScrollDetection(_ref) {
   var setActiveCategory = _ref.setActiveCategory,
-    setVisibleCategories = _ref.setVisibleCategories;
+    setVisibleCategories = _ref.setVisibleCategories,
+    categories = _ref.categories;
   var BodyRef = useBodyRef();
   React.useEffect(function () {
     var visibleCategories = new Map();
@@ -30559,7 +30613,7 @@ function useActiveCategoryScrollDetection(_ref) {
     return function () {
       observer.disconnect();
     };
-  }, [BodyRef, setActiveCategory, setVisibleCategories]);
+  }, [BodyRef, categories, setActiveCategory, setVisibleCategories]);
 }
 
 function useScrollCategoryIntoView() {
@@ -30945,10 +30999,6 @@ function CategoryNavigation() {
   var _useVisibleCategories = useVisibleCategoriesState(),
     setVisibleCategories = _useVisibleCategories[1];
   var scrollCategoryIntoView = useScrollCategoryIntoView();
-  useActiveCategoryScrollDetection({
-    setActiveCategory: setActiveCategory,
-    setVisibleCategories: setVisibleCategories
-  });
   var isSearchMode = useIsSearchMode();
   var categoriesConfig = useCategoriesConfig();
   var categoryIcons = useCategoryIconsConfig();
@@ -30957,6 +31007,13 @@ function CategoryNavigation() {
   var _usePickerDataContext = usePickerDataContext(),
     customGroups = _usePickerDataContext.customGroups,
     emojiData = _usePickerDataContext.emojiData;
+  // The observer re-subscribes when the merged categories reference
+  // changes (sections added/removed); the reference is stable otherwise.
+  useActiveCategoryScrollDetection({
+    setActiveCategory: setActiveCategory,
+    setVisibleCategories: setVisibleCategories,
+    categories: categoriesConfig
+  });
   var visibleCategories = categoriesConfig.filter(function (categoryConfig) {
     if (isCustomCategory(categoryConfig) && hideCustomCategory) {
       return false;