emoji-picker-react 4.22.0 → 4.22.1

package/dist/emoji-picker-react.esm.js

@@ -172,7 +172,27 @@ 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 && 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) {
+  return customEmojis.map(function (emoji) {
+    var _emoji$group;
+    return emoji.id + ":" + ((_emoji$group = emoji.group) != null ? _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) {
+  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('|');
 }
 
 var DEFAULT_REACTIONS = ['1f44d', '2764-fe0f', '1f603', '1f622', '1f64f', '1f44e', '1f621'];
@@ -556,7 +576,6 @@ function PickerConfigProvider(_ref) {
   }, children);
 }
 function useSetConfig(config) {
-  var _config$customEmojis;
   var _React$useState = useState(function () {
       return mergeConfig(config);
     }),
@@ -569,7 +588,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() {
@@ -26926,9 +26949,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;
@@ -26943,7 +26966,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;
@@ -26960,8 +26986,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;
@@ -26976,7 +27002,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;
       });
     });
@@ -30506,7 +30532,8 @@ function categoryNameFromDom($category) {
 
 function useActiveCategoryScrollDetection(_ref) {
   var setActiveCategory = _ref.setActiveCategory,
-    setVisibleCategories = _ref.setVisibleCategories;
+    setVisibleCategories = _ref.setVisibleCategories,
+    categoryIdentitiesKey = _ref.categoryIdentitiesKey;
   var BodyRef = useBodyRef();
   useEffect(function () {
     var visibleCategories = new Map();
@@ -30558,7 +30585,7 @@ function useActiveCategoryScrollDetection(_ref) {
     return function () {
       observer.disconnect();
     };
-  }, [BodyRef, setActiveCategory, setVisibleCategories]);
+  }, [BodyRef, categoryIdentitiesKey, setActiveCategory, setVisibleCategories]);
 }
 
 function useScrollCategoryIntoView() {
@@ -30944,10 +30971,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();
@@ -30956,6 +30979,17 @@ 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('|');
+  useActiveCategoryScrollDetection({
+    setActiveCategory: setActiveCategory,
+    setVisibleCategories: setVisibleCategories,
+    categoryIdentitiesKey: categoryIdentitiesKey
+  });
   var visibleCategories = categoriesConfig.filter(function (categoryConfig) {
     if (isCustomCategory(categoryConfig) && hideCustomCategory) {
       return false;