emoji-picker-react 4.21.1 → 4.22.1

package/dist/components/context/PickerDataContext.d.ts

@@ -6,6 +6,7 @@ export interface PickerDataContextValue {
     allEmojis: DataEmojis;
     allEmojisByUnified: Record<string, DataEmoji>;
     searchIndex: Record<string, Record<string, DataEmoji>>;
+    customGroups: Record<string, DataEmojis>;
     emojiByUnified: (unified?: string) => DataEmoji | undefined;
     activeVariationFromUnified: (unified: string) => SkinTones | null;
 }
@@ -13,4 +14,4 @@ export declare function PickerDataProvider({ children, }: {
     children: React.ReactNode;
 }): JSX.Element;
 export declare function usePickerDataContext(): PickerDataContextValue;
-export declare function useGetEmojisByCategory(): (category: Categories) => DataEmojis;
+export declare function useGetEmojisByCategory(): (category: Categories, group?: string | undefined) => DataEmojis;

package/dist/config/categoryConfig.d.ts

@@ -1,16 +1,34 @@
 import { Categories, CategoryConfig, EmojiData, SuggestionMode } from '../types/exposedTypes';
+import { CustomEmoji } from './customEmojiConfig';
 export { Categories };
 export declare const SuggestedRecent: CategoryConfig;
 export declare type CustomCategoryConfig = {
     category: Categories.CUSTOM;
     name: string;
+    /**
+     * Selects the `CustomEmoji` group rendered in this section. Each entry
+     * may carry its own `name` and `icon`, so multiple custom sections can
+     * coexist — each placed wherever its entry sits in `categories`.
+     * Entries without a group share the ungrouped customs bucket.
+     */
+    group?: string;
 };
+/**
+ * Stable identity for a category entry. Custom groups are namespaced so
+ * duplicate `{ category: CUSTOM }` configs no longer collide in React
+ * keys, scroll targets, and active-tab detection.
+ */
+export declare function categoryIdFromCategoryConfig(categoryConfig: CategoryConfig): string;
+/**
+ * The `CustomEmoji` group rendered by a category entry, if any.
+ */
+export declare function customGroupFromCategoryConfig(categoryConfig: CategoryConfig): string | undefined;
 export declare function baseCategoriesConfig(modifiers?: Record<Categories, CategoryConfig>): CategoriesConfig;
 export declare function categoryFromCategoryConfig(category: CategoryConfig): Categories;
 export declare function categoryNameFromCategoryConfig(category: CategoryConfig): string;
 export declare type CategoriesConfig = CategoryConfig[];
 export declare type UserCategoryConfig = Array<Categories | CategoryConfig>;
-export declare function mergeCategoriesConfig(userCategoriesConfig?: UserCategoryConfig, modifiers?: CategoryConfigModifiers, emojiData?: EmojiData): CategoriesConfig;
+export declare function mergeCategoriesConfig(userCategoriesConfig?: UserCategoryConfig, modifiers?: CategoryConfigModifiers, emojiData?: EmojiData, customEmojis?: CustomEmoji[]): CategoriesConfig;
 declare type CategoryConfigModifiers = {
     suggestionMode?: SuggestionMode;
 };

package/dist/config/customEmojiConfig.d.ts

@@ -3,4 +3,12 @@ export declare type CustomEmoji = {
     names: string[];
     [EmojiProperties.imgUrl]: string;
     id: string;
+    /**
+     * Optional group name. Customs sharing a group render as their own
+     * category section; ungrouped customs keep the single shared bucket.
+     * Reference the group from a `{ category: Categories.CUSTOM, group }`
+     * entry in the `categories` prop to place and name the section.
+     * https://github.com/ealush/emoji-picker-react/issues/510
+     */
+    group?: string;
 };

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

@@ -179,7 +179,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'];
@@ -322,6 +342,34 @@ var SuggestedRecent = {
   name: 'Recently Used',
   category: exports.Categories.SUGGESTED
 };
+/**
+ * Stable identity for a category entry. Custom groups are namespaced so
+ * duplicate `{ category: CUSTOM }` configs no longer collide in React
+ * keys, scroll targets, and active-tab detection.
+ */
+function categoryIdFromCategoryConfig(categoryConfig) {
+  var category = categoryFromCategoryConfig(categoryConfig);
+  if (isCustomGroupConfig(categoryConfig)) {
+    return category + ":" + categoryConfig.group;
+  }
+  return category;
+}
+function isCustomGroupConfig(categoryConfig) {
+  if (categoryConfig.category !== exports.Categories.CUSTOM) {
+    return false;
+  }
+  var group = categoryConfig.group;
+  return typeof group === 'string' && group.length > 0;
+}
+/**
+ * The `CustomEmoji` group rendered by a category entry, if any.
+ */
+function customGroupFromCategoryConfig(categoryConfig) {
+  if (isCustomGroupConfig(categoryConfig)) {
+    return categoryConfig.group;
+  }
+  return undefined;
+}
 var configByCategory = (_configByCategory = {}, _configByCategory[exports.Categories.SUGGESTED] = {
   category: exports.Categories.SUGGESTED,
   name: 'Frequently Used'
@@ -364,14 +412,17 @@ function categoryFromCategoryConfig(category) {
 function categoryNameFromCategoryConfig(category) {
   return category.name;
 }
-function mergeCategoriesConfig(userCategoriesConfig, modifiers, emojiData) {
-  var _userCategoriesConfig;
+function mergeCategoriesConfig(userCategoriesConfig, modifiers, emojiData, customEmojis) {
+  var _userCategoriesConfig, _userCategoriesConfig2;
   if (userCategoriesConfig === void 0) {
     userCategoriesConfig = [];
   }
   if (modifiers === void 0) {
     modifiers = {};
   }
+  if (customEmojis === void 0) {
+    customEmojis = [];
+  }
   var extra = function () {
     // 1. Start with localized categories from emojiData
     var fromData = emojiData != null && emojiData.categories ? Object.fromEntries(Object.entries(emojiData.categories).filter(function (_ref) {
@@ -390,15 +441,50 @@ function mergeCategoriesConfig(userCategoriesConfig, modifiers, emojiData) {
     return fromData;
   }();
   var base = baseCategoriesConfig(extra);
-  if (!((_userCategoriesConfig = userCategoriesConfig) != null && _userCategoriesConfig.length)) {
-    return base;
-  }
-  return userCategoriesConfig.map(function (category) {
+  var explicit = (_userCategoriesConfig = userCategoriesConfig) != null && _userCategoriesConfig.length ? userCategoriesConfig.map(mapUserEntry) : base;
+  // Groups without a `categories` entry get an appended section so their
+  // emojis always render somewhere — unless the user opted out of customs
+  // entirely by listing `categories` without CUSTOM. `categories` remains
+  // the override for order, display name, and icon.
+  // https://github.com/ealush/emoji-picker-react/issues/510
+  var customInPlay = !((_userCategoriesConfig2 = userCategoriesConfig) != null && _userCategoriesConfig2.length) || userCategoriesConfig.some(function (entry) {
+    return entry === exports.Categories.CUSTOM || typeof entry !== 'string' && entry.category === exports.Categories.CUSTOM;
+  });
+  var listedGroups = new Set(explicit.map(function (entry) {
+    return customGroupFromCategoryConfig(entry);
+  }).filter(function (group) {
+    return !!group;
+  }));
+  var appended = !customInPlay ? [] : Array.from(new Set(customEmojis.map(function (emoji) {
+    return emoji.group;
+  }).filter(function (group) {
+    return !!group;
+  }))).filter(function (group) {
+    return !listedGroups.has(group);
+  }).map(function (group) {
+    return {
+      category: exports.Categories.CUSTOM,
+      name: group,
+      group: group
+    };
+  });
+  // Collapse duplicate entries (same identity twice renders the same
+  // section twice under one React key); first occurrence wins.
+  var seen = new Set();
+  return explicit.concat(appended).filter(function (entry) {
+    var id = categoryIdFromCategoryConfig(entry);
+    if (seen.has(id)) {
+      return false;
+    }
+    seen.add(id);
+    return true;
+  });
+  function mapUserEntry(category) {
     if (typeof category === 'string') {
       return getBaseConfigByCategory(category, extra[category]);
     }
     return _extends({}, getBaseConfigByCategory(category.category, extra[category.category]), category);
-  });
+  }
 }
 function getBaseConfigByCategory(category, modifier) {
   if (modifier === void 0) {
@@ -429,7 +515,7 @@ function mergeConfig(userConfig) {
   var config = Object.assign(base, userConfig);
   var categories = mergeCategoriesConfig(userConfig.categories, {
     suggestionMode: config.suggestedEmojisMode
-  }, userConfig.emojiData);
+  }, userConfig.emojiData, userConfig.customEmojis);
   config.hiddenEmojis.forEach(function (emoji) {
     config.unicodeToHide.add(emoji);
   });
@@ -491,7 +577,6 @@ function PickerConfigProvider(_ref) {
   }, children);
 }
 function useSetConfig(config) {
-  var _config$customEmojis;
   var _React$useState = React.useState(function () {
       return mergeConfig(config);
     }),
@@ -504,7 +589,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() {
@@ -26861,8 +26950,9 @@ function useIsMounted() {
 var PickerDataContext = /*#__PURE__*/React__default.createContext({
   emojiData: {},
   allEmojis: [],
-  allEmojisByUnified: {},
-  searchIndex: {},
+  allEmojisByUnified: /*#__PURE__*/Object.create(null),
+  searchIndex: /*#__PURE__*/Object.create(null),
+  customGroups: /*#__PURE__*/Object.create(null),
   emojiByUnified: emojiByUnified,
   activeVariationFromUnified: function activeVariationFromUnified() {
     return null;
@@ -26877,13 +26967,28 @@ function PickerDataProvider(_ref) {
     var emojiData = genericEmojiData || defaultEmojiData;
     // Clone to avoid mutation of shared source
     var newData = JSON.parse(JSON.stringify(emojiData));
+    // 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) {
-      newData.emojis[exports.Categories.CUSTOM] = customEmojis.map(customToRegularEmoji);
+      for (var _iterator = _createForOfIteratorHelperLoose(customEmojis), _step; !(_step = _iterator()).done;) {
+        var _customGroups$emoji$g;
+        var emoji = _step.value;
+        if (!emoji.group) {
+          continue;
+        }
+        customGroups[emoji.group] = (_customGroups$emoji$g = customGroups[emoji.group]) != null ? _customGroups$emoji$g : [];
+        customGroups[emoji.group].push(customToRegularEmoji(emoji));
+      }
+      newData.emojis[exports.Categories.CUSTOM] = customEmojis.filter(function (emoji) {
+        return !emoji.group;
+      }).map(customToRegularEmoji);
     }
     var emojis = newData.emojis || {};
-    var allEmojis = Object.values(emojis).flat();
-    var allEmojisByUnified = {};
-    var searchIndex = {};
+    var allEmojis = Object.values(emojis).concat(Object.values(customGroups)).flat();
+    var allEmojisByUnified = Object.create(null);
+    var searchIndex = Object.create(null);
     allEmojis.forEach(function (emoji) {
       var unified = emoji[EmojiProperties.unified];
       allEmojisByUnified[unified] = emoji;
@@ -26898,7 +27003,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;
       });
     });
@@ -26906,7 +27011,8 @@ function PickerDataProvider(_ref) {
       emojiData: newData,
       allEmojis: allEmojis,
       allEmojisByUnified: allEmojisByUnified,
-      searchIndex: searchIndex
+      searchIndex: searchIndex,
+      customGroups: customGroups
     };
   }, [genericEmojiData, customEmojis]);
   var emojiByUnified = React__default.useCallback(function (unified) {
@@ -26928,7 +27034,8 @@ function usePickerDataContext() {
 function useGetEmojisByCategory() {
   var _usePickerDataContext = usePickerDataContext(),
     emojiData = _usePickerDataContext.emojiData,
-    emojiByUnified = _usePickerDataContext.emojiByUnified;
+    emojiByUnified = _usePickerDataContext.emojiByUnified,
+    customGroups = _usePickerDataContext.customGroups;
   var suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
   var _useUpdateSuggested = useUpdateSuggested(),
     suggestedUpdated = _useUpdateSuggested[0];
@@ -26949,11 +27056,15 @@ function useGetEmojisByCategory() {
     }).filter(Boolean);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isMounted, suggestedUpdated, suggestedEmojisModeConfig, emojiByUnified]);
-  return function getEmojisByCategory(category) {
+  return function getEmojisByCategory(category, group) {
     var _emojiData$emojis$cat, _emojiData$emojis;
     if (category === exports.Categories.SUGGESTED) {
       return suggested;
     }
+    if (category === exports.Categories.CUSTOM && group) {
+      var _customGroups$group;
+      return (_customGroups$group = customGroups[group]) != null ? _customGroups$group : [];
+    }
     return (_emojiData$emojis$cat = (_emojiData$emojis = emojiData.emojis) == null ? void 0 : _emojiData$emojis[category]) != null ? _emojiData$emojis$cat : [];
   };
 }
@@ -29587,11 +29698,10 @@ function EmojiCategory(_ref) {
     hiddenOnSearch = _ref.hiddenOnSearch,
     height = _ref.height,
     emojisPerRow = _ref.emojisPerRow;
-  var category = categoryFromCategoryConfig(categoryConfig);
   var categoryName = categoryNameFromCategoryConfig(categoryConfig);
   return React.createElement("li", {
     className: shipstyles.cx(styles$7.category, hidden && commonStyles.hidden, hiddenOnSearch && commonInteractionStyles.hiddenOnSearch),
-    "data-name": category,
+    "data-name": categoryIdFromCategoryConfig(categoryConfig),
     role: "rowgroup",
     "aria-label": categoryName
   }, React.createElement("h2", {
@@ -29666,7 +29776,7 @@ function MeasureEmoji() {
     return null;
   }
   var firstCategory = categories[0];
-  var dummyEmoji = getEmojisByCategory(categoryFromCategoryConfig(firstCategory))[0];
+  var dummyEmoji = firstCategory ? getEmojisByCategory(categoryFromCategoryConfig(firstCategory), customGroupFromCategoryConfig(firstCategory))[0] : undefined;
   var unified = dummyEmoji ? emojiUnified(dummyEmoji, activeSkinTone) : '';
   if (!dummyEmoji) {
     return null;
@@ -29720,22 +29830,24 @@ function EmojiList(_ref) {
       role: "grid"
     }, React.createElement(MeasureEmoji, null), categories.map(function (categoryConfig, index) {
       var category = categoryFromCategoryConfig(categoryConfig);
+      var categoryId = categoryIdFromCategoryConfig(categoryConfig);
+      var group = customGroupFromCategoryConfig(categoryConfig);
       var currentOffset = topOffset;
-      var categoryHeight = categoryHeights[category];
+      var categoryHeight = categoryHeights[categoryId];
       if (categoryHeight) {
         topOffset += categoryHeight + labelHeight;
       }
       return React.createElement(RenderCategory, {
-        key: category,
-        categoryEmojis: getEmojisByCategory(category),
+        key: categoryId,
+        categoryEmojis: getEmojisByCategory(category, group),
         categoryConfig: categoryConfig,
         topOffset: currentOffset,
         isFirstCategory: index === 0,
         onHeightReady: function onHeightReady(height) {
-          if (categoryHeights[category] !== height) {
+          if (categoryHeights[categoryId] !== height) {
             setCategoryHeights(function (prev) {
               var _extends2;
-              return _extends({}, prev, (_extends2 = {}, _extends2[category] = height, _extends2));
+              return _extends({}, prev, (_extends2 = {}, _extends2[categoryId] = height, _extends2));
             });
           }
         },
@@ -29759,7 +29871,7 @@ function RenderCategory(_ref2) {
   // the deadlock; the observer takes over from there.
   // https://github.com/ealush/emoji-picker-react/issues/469
   // https://github.com/ealush/emoji-picker-react/issues/475
-  var isCategoryVisible = isFirstCategory || visibleCategories.includes(categoryConfig.category);
+  var isCategoryVisible = isFirstCategory || visibleCategories.includes(categoryIdFromCategoryConfig(categoryConfig));
   var _useEmojiVirtualizati = useEmojiVirtualization({
       categoryEmojis: categoryEmojis,
       topOffset: topOffset,
@@ -30421,7 +30533,8 @@ function categoryNameFromDom($category) {
 
 function useActiveCategoryScrollDetection(_ref) {
   var setActiveCategory = _ref.setActiveCategory,
-    setVisibleCategories = _ref.setVisibleCategories;
+    setVisibleCategories = _ref.setVisibleCategories,
+    categoryIdentitiesKey = _ref.categoryIdentitiesKey;
   var BodyRef = useBodyRef();
   React.useEffect(function () {
     var visibleCategories = new Map();
@@ -30473,7 +30586,7 @@ function useActiveCategoryScrollDetection(_ref) {
     return function () {
       observer.disconnect();
     };
-  }, [BodyRef, setActiveCategory, setVisibleCategories]);
+  }, [BodyRef, categoryIdentitiesKey, setActiveCategory, setVisibleCategories]);
 }
 
 function useScrollCategoryIntoView() {
@@ -30484,7 +30597,8 @@ function useScrollCategoryIntoView() {
     if (!BodyRef.current) {
       return;
     }
-    var $category = (_BodyRef$current = BodyRef.current) == null ? void 0 : _BodyRef$current.querySelector("[data-name=\"" + category + "\"]");
+    // Group names are user-controlled; escape for the attribute selector.
+    var $category = (_BodyRef$current = BodyRef.current) == null ? void 0 : _BodyRef$current.querySelector("[data-name=\"" + CSS.escape(category) + "\"]");
     if (!$category) {
       return;
     }
@@ -30858,17 +30972,40 @@ 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();
   var CategoryNavigationRef = useCategoryNavigationRef();
   var hideCustomCategory = useShouldHideCustomEmojis();
+  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) {
-    return !(isCustomCategory(categoryConfig) && hideCustomCategory);
+    if (isCustomCategory(categoryConfig) && hideCustomCategory) {
+      return false;
+    }
+    // Tabs navigating to an empty (hidden) section are dead weight.
+    var group = customGroupFromCategoryConfig(categoryConfig);
+    if (group) {
+      var _customGroups$group$l, _customGroups$group;
+      return ((_customGroups$group$l = (_customGroups$group = customGroups[group]) == null ? void 0 : _customGroups$group.length) != null ? _customGroups$group$l : 0) > 0;
+    }
+    if (isCustomCategory(categoryConfig)) {
+      var _emojiData$emojis$Cat, _emojiData$emojis, _emojiData$emojis$Cat2;
+      return ((_emojiData$emojis$Cat = (_emojiData$emojis = emojiData.emojis) == null ? void 0 : (_emojiData$emojis$Cat2 = _emojiData$emojis[exports.Categories.CUSTOM]) == null ? void 0 : _emojiData$emojis$Cat2.length) != null ? _emojiData$emojis$Cat : 0) > 0;
+    }
+    return true;
   });
   // A single tab navigates nowhere — hide the bar to reclaim its space.
   // https://github.com/ealush/emoji-picker-react/issues/396
@@ -30883,19 +31020,20 @@ function CategoryNavigation() {
     ref: CategoryNavigationRef
   }, visibleCategories.map(function (categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
-    var isActiveCategory = category === activeCategory;
+    var categoryId = categoryIdFromCategoryConfig(categoryConfig);
+    var isActiveCategory = categoryId === activeCategory;
     var allowNavigation = !isSearchMode && !isActiveCategory;
     return React.createElement(CategoryButton, {
-      key: category,
+      key: categoryId,
       category: category,
       isActiveCategory: isActiveCategory,
       allowNavigation: allowNavigation,
       categoryConfig: categoryConfig,
       customIcon: categoryIcons[category],
       onClick: function onClick() {
-        scrollCategoryIntoView(category);
+        scrollCategoryIntoView(categoryId);
         setTimeout(function () {
-          setActiveCategory(category);
+          setActiveCategory(categoryId);
         }, 10);
       }
     });