emoji-picker-react 4.21.0 → 4.22.0

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

@@ -322,6 +322,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 +392,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 +421,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 +495,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);
   });
@@ -26863,6 +26929,7 @@ var PickerDataContext = /*#__PURE__*/React__default.createContext({
   allEmojis: [],
   allEmojisByUnified: {},
   searchIndex: {},
+  customGroups: {},
   emojiByUnified: emojiByUnified,
   activeVariationFromUnified: function activeVariationFromUnified() {
     return null;
@@ -26877,11 +26944,23 @@ function PickerDataProvider(_ref) {
     var emojiData = genericEmojiData || defaultEmojiData;
     // Clone to avoid mutation of shared source
     var newData = JSON.parse(JSON.stringify(emojiData));
+    var customGroups = {};
     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 allEmojis = Object.values(emojis).concat(Object.values(customGroups)).flat();
     var allEmojisByUnified = {};
     var searchIndex = {};
     allEmojis.forEach(function (emoji) {
@@ -26906,7 +26985,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 +27008,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 +27030,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 +29672,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 +29750,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 +29804,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 +29845,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,
@@ -29974,6 +30060,16 @@ var styles$a = /*#__PURE__*/stylesheet.create({
   }
 });
 
+function detectEmojyPartiallyBelowFold(button, bodyRef) {
+  if (!button || !bodyRef) {
+    return 0;
+  }
+  var buttonRect = button.getBoundingClientRect();
+  var bodyRect = bodyRef.getBoundingClientRect();
+  // If the element is obscured by at least half of its size
+  return bodyRect.height - (buttonRect.y - bodyRect.y);
+}
+
 function useEmojiPreviewEvents(allow, setPreviewEmoji) {
   var BodyRef = useBodyRef();
   var PickerMainRef = usePickerMainRef();
@@ -30046,12 +30142,19 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
       // Pulling focus out of an external element steals the caret from
       // host-app inputs (issue #320). The guard runs again inside the
       // deferred callback in case focus moved out after this event.
-      if (!isExternalElementFocused()) {
+      // Partially visible buttons are never focused: focusing would make
+      // the browser scroll them into view, yanking the scroll position
+      // while the user is browsing (see also PR #509).
+      if (!isExternalElementFocused() && !isPartiallyBelowFold(button, bodyRef)) {
         focusElement(button, function () {
           return !isExternalElementFocused();
         });
       }
     }
+    function isPartiallyBelowFold(button, body) {
+      var belowFoldByPx = detectEmojyPartiallyBelowFold(button, body);
+      return belowFoldByPx < button.getBoundingClientRect().height;
+    }
     function isExternalElementFocused() {
       var _PickerMainRef$curren;
       var active = document.activeElement;
@@ -30067,7 +30170,7 @@ function useEmojiPreviewEvents(allow, setPreviewEmoji) {
       bodyRef == null ? void 0 : bodyRef.removeEventListener('blur', onLeave, true);
       bodyRef == null ? void 0 : bodyRef.removeEventListener('keydown', onEscape);
     };
-  }, [BodyRef, allow, setPreviewEmoji, isMouseDisallowed, allowMouseMove]);
+  }, [BodyRef, PickerMainRef, allow, setPreviewEmoji, isMouseDisallowed, allowMouseMove]);
 }
 
 var _stylesheet$create;
@@ -30467,7 +30570,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;
     }
@@ -30850,8 +30954,24 @@ function CategoryNavigation() {
   var categoryIcons = useCategoryIconsConfig();
   var CategoryNavigationRef = useCategoryNavigationRef();
   var hideCustomCategory = useShouldHideCustomEmojis();
+  var _usePickerDataContext = usePickerDataContext(),
+    customGroups = _usePickerDataContext.customGroups,
+    emojiData = _usePickerDataContext.emojiData;
   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
@@ -30866,19 +30986,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);
       }
     });