emoji-picker-react 4.4.11 → 4.5.0-rc.1

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

@@ -255,6 +255,7 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
 
 (function (Categories) {
   Categories["SUGGESTED"] = "suggested";
+  Categories["CUSTOM"] = "custom";
   Categories["SMILEYS_PEOPLE"] = "smileys_people";
   Categories["ANIMALS_NATURE"] = "animals_nature";
   Categories["FOOD_DRINK"] = "food_drink";
@@ -270,6 +271,94 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   SkinTonePickerLocation["PREVIEW"] = "PREVIEW";
 })(exports.SkinTonePickerLocation || (exports.SkinTonePickerLocation = {}));
 
+var _configByCategory;
+var categoriesOrdered = [exports.Categories.SUGGESTED, exports.Categories.CUSTOM, exports.Categories.SMILEYS_PEOPLE, exports.Categories.ANIMALS_NATURE, exports.Categories.FOOD_DRINK, exports.Categories.TRAVEL_PLACES, exports.Categories.ACTIVITIES, exports.Categories.OBJECTS, exports.Categories.SYMBOLS, exports.Categories.FLAGS];
+var SuggestedRecent = {
+  name: 'Recently Used',
+  category: exports.Categories.SUGGESTED
+};
+var configByCategory = (_configByCategory = {}, _configByCategory[exports.Categories.SUGGESTED] = {
+  category: exports.Categories.SUGGESTED,
+  name: 'Frequently Used'
+}, _configByCategory[exports.Categories.CUSTOM] = {
+  category: exports.Categories.CUSTOM,
+  name: 'Custom Emojis'
+}, _configByCategory[exports.Categories.SMILEYS_PEOPLE] = {
+  category: exports.Categories.SMILEYS_PEOPLE,
+  name: 'Smileys & People'
+}, _configByCategory[exports.Categories.ANIMALS_NATURE] = {
+  category: exports.Categories.ANIMALS_NATURE,
+  name: 'Animals & Nature'
+}, _configByCategory[exports.Categories.FOOD_DRINK] = {
+  category: exports.Categories.FOOD_DRINK,
+  name: 'Food & Drink'
+}, _configByCategory[exports.Categories.TRAVEL_PLACES] = {
+  category: exports.Categories.TRAVEL_PLACES,
+  name: 'Travel & Places'
+}, _configByCategory[exports.Categories.ACTIVITIES] = {
+  category: exports.Categories.ACTIVITIES,
+  name: 'Activities'
+}, _configByCategory[exports.Categories.OBJECTS] = {
+  category: exports.Categories.OBJECTS,
+  name: 'Objects'
+}, _configByCategory[exports.Categories.SYMBOLS] = {
+  category: exports.Categories.SYMBOLS,
+  name: 'Symbols'
+}, _configByCategory[exports.Categories.FLAGS] = {
+  category: exports.Categories.FLAGS,
+  name: 'Flags'
+}, _configByCategory);
+function baseCategoriesConfig(modifiers) {
+  return categoriesOrdered.map(function (category) {
+    return _extends({}, configByCategory[category], modifiers && modifiers[category] && modifiers[category]);
+  });
+}
+function categoryFromCategoryConfig(category) {
+  return category.category;
+}
+function categoryNameFromCategoryConfig(category) {
+  return category.name;
+}
+function mergeCategoriesConfig(userCategoriesConfig, modifiers) {
+  var _userCategoriesConfig;
+
+  if (userCategoriesConfig === void 0) {
+    userCategoriesConfig = [];
+  }
+
+  if (modifiers === void 0) {
+    modifiers = {};
+  }
+
+  var extra = {};
+
+  if (modifiers.suggestionMode === exports.SuggestionMode.RECENT) {
+    extra[exports.Categories.SUGGESTED] = SuggestedRecent;
+  }
+
+  var base = baseCategoriesConfig(extra);
+
+  if (!((_userCategoriesConfig = userCategoriesConfig) != null && _userCategoriesConfig.length)) {
+    return base;
+  }
+
+  return userCategoriesConfig.map(function (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) {
+    modifier = {};
+  }
+
+  return Object.assign(configByCategory[category], modifier);
+}
+
 var CDN_URL_APPLE = 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/';
 var CDN_URL_FACEBOOK = 'https://cdn.jsdelivr.net/npm/emoji-datasource-facebook/img/facebook/64/';
 var CDN_URL_TWITTER = 'https://cdn.jsdelivr.net/npm/emoji-datasource-twitter/img/twitter/64/';
@@ -291,6 +380,8 @@ function cdnUrl(emojiStyle) {
   }
 }
 
+var custom = [
+];
 var smileys_people = [
 	{
 		n: [
@@ -16601,6 +16692,7 @@ var flags = [
 	}
 ];
 var emojis = {
+	custom: custom,
 	smileys_people: smileys_people,
 	animals_nature: animals_nature,
 	food_drink: food_drink,
@@ -16631,8 +16723,26 @@ var EmojiProperties;
   EmojiProperties["unified"] = "u";
   EmojiProperties["variations"] = "v";
   EmojiProperties["added_in"] = "a";
+  EmojiProperties["imgUrl"] = "imgUrl";
 })(EmojiProperties || (EmojiProperties = {}));
 
+var alphaNumericEmojiIndex = {};
+setTimeout(function () {
+  allEmojis.reduce(function (searchIndex, emoji) {
+    indexEmoji(emoji);
+    return searchIndex;
+  }, alphaNumericEmojiIndex);
+});
+function indexEmoji(emoji) {
+  var joinedNameString = emojiNames(emoji).flat().join('').toLowerCase().replace(/[^a-zA-Z\d]/g, '').split('');
+  joinedNameString.forEach(function (_char) {
+    var _alphaNumericEmojiInd;
+
+    alphaNumericEmojiIndex[_char] = (_alphaNumericEmojiInd = alphaNumericEmojiIndex[_char]) != null ? _alphaNumericEmojiInd : {};
+    alphaNumericEmojiIndex[_char][emojiUnified(emoji)] = emoji;
+  });
+}
+
 function emojiNames(emoji) {
   var _emoji$EmojiPropertie;
 
@@ -16707,6 +16817,29 @@ function emojiByUnified(unified) {
   return allEmojisByUnified[withoutSkinTone];
 }
 var allEmojis = /*#__PURE__*/Object.values(emojis).flat();
+function addCustomEmojis(customEmojis) {
+  customEmojis.forEach(function (emoji) {
+    var emojiData = customToRegularEmoji(emoji);
+
+    if (allEmojisByUnified[emojiData[EmojiProperties.unified]]) {
+      return;
+    }
+
+    allEmojis.push(emojiData);
+    allEmojisByUnified[emojiData[EmojiProperties.unified]] = emojiData;
+    emojis[exports.Categories.CUSTOM].push(emojiData);
+    indexEmoji(emojiData);
+  });
+}
+
+function customToRegularEmoji(emoji) {
+  var _ref;
+
+  return _ref = {}, _ref[EmojiProperties.name] = emoji.names.map(function (name) {
+    return name.toLowerCase();
+  }), _ref[EmojiProperties.unified] = emoji.id.toLowerCase(), _ref[EmojiProperties.added_in] = '0', _ref[EmojiProperties.imgUrl] = emoji.imgUrl, _ref;
+}
+
 var allEmojisByUnified = {};
 setTimeout(function () {
   allEmojis.reduce(function (allEmojis, Emoji) {
@@ -16721,94 +16854,10 @@ function activeVariationFromUnified(unified) {
   return skinToneVariations.includes(suspectedSkinTone) ? suspectedSkinTone : null;
 }
 
-var _configByCategory;
-var categoriesOrdered = [exports.Categories.SUGGESTED, exports.Categories.SMILEYS_PEOPLE, exports.Categories.ANIMALS_NATURE, exports.Categories.FOOD_DRINK, exports.Categories.TRAVEL_PLACES, exports.Categories.ACTIVITIES, exports.Categories.OBJECTS, exports.Categories.SYMBOLS, exports.Categories.FLAGS];
-var SuggestedRecent = {
-  name: 'Recently Used',
-  category: exports.Categories.SUGGESTED
-};
-var configByCategory = (_configByCategory = {}, _configByCategory[exports.Categories.SUGGESTED] = {
-  category: exports.Categories.SUGGESTED,
-  name: 'Frequently Used'
-}, _configByCategory[exports.Categories.SMILEYS_PEOPLE] = {
-  category: exports.Categories.SMILEYS_PEOPLE,
-  name: 'Smileys & People'
-}, _configByCategory[exports.Categories.ANIMALS_NATURE] = {
-  category: exports.Categories.ANIMALS_NATURE,
-  name: 'Animals & Nature'
-}, _configByCategory[exports.Categories.FOOD_DRINK] = {
-  category: exports.Categories.FOOD_DRINK,
-  name: 'Food & Drink'
-}, _configByCategory[exports.Categories.TRAVEL_PLACES] = {
-  category: exports.Categories.TRAVEL_PLACES,
-  name: 'Travel & Places'
-}, _configByCategory[exports.Categories.ACTIVITIES] = {
-  category: exports.Categories.ACTIVITIES,
-  name: 'Activities'
-}, _configByCategory[exports.Categories.OBJECTS] = {
-  category: exports.Categories.OBJECTS,
-  name: 'Objects'
-}, _configByCategory[exports.Categories.SYMBOLS] = {
-  category: exports.Categories.SYMBOLS,
-  name: 'Symbols'
-}, _configByCategory[exports.Categories.FLAGS] = {
-  category: exports.Categories.FLAGS,
-  name: 'Flags'
-}, _configByCategory);
-function baseCategoriesConfig(modifiers) {
-  return categoriesOrdered.map(function (category) {
-    return _extends({}, configByCategory[category], modifiers && modifiers[category] && modifiers[category]);
-  });
-}
-function categoryFromCategoryConfig(category) {
-  return category.category;
-}
-function categoryNameFromCategoryConfig(category) {
-  return category.name;
-}
-function mergeCategoriesConfig(userCategoriesConfig, modifiers) {
-  var _userCategoriesConfig;
-
-  if (userCategoriesConfig === void 0) {
-    userCategoriesConfig = [];
-  }
-
-  if (modifiers === void 0) {
-    modifiers = {};
-  }
-
-  var extra = {};
-
-  if (modifiers.suggestionMode === exports.SuggestionMode.RECENT) {
-    extra[exports.Categories.SUGGESTED] = SuggestedRecent;
-  }
-
-  var base = baseCategoriesConfig(extra);
-
-  if (!((_userCategoriesConfig = userCategoriesConfig) != null && _userCategoriesConfig.length)) {
-    return base;
-  }
-
-  return userCategoriesConfig.map(function (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) {
-    modifier = {};
-  }
-
-  return Object.assign(configByCategory[category], modifier);
-}
-
 var KNOWN_FAILING_EMOJIS = ['2640-fe0f', '2642-fe0f', '2695-fe0f'];
+var DEFAULT_SEARCH_PLACEHOLDER = 'Search';
 function mergeConfig(userConfig) {
-  var _userConfig$previewCo;
+  var _userConfig$previewCo, _config$customEmojis;
 
   if (userConfig === void 0) {
     userConfig = {};
@@ -16820,6 +16869,7 @@ function mergeConfig(userConfig) {
   var categories = mergeCategoriesConfig(userConfig.categories, {
     suggestionMode: config.suggestedEmojisMode
   });
+  addCustomEmojis((_config$customEmojis = config.customEmojis) != null ? _config$customEmojis : []);
   var skinTonePickerLocation = config.searchDisabled ? exports.SkinTonePickerLocation.PREVIEW : config.skinTonePickerLocation;
   return _extends({}, config, {
     categories: categories,
@@ -16831,6 +16881,7 @@ function basePickerConfig() {
   return {
     autoFocusSearch: true,
     categories: baseCategoriesConfig(),
+    customEmojis: [],
     defaultSkinTone: exports.SkinTones.NEUTRAL,
     emojiStyle: exports.EmojiStyle.APPLE,
     emojiVersion: null,
@@ -16844,7 +16895,8 @@ function basePickerConfig() {
     event) {},
     previewConfig: _extends({}, basePreviewConfig),
     searchDisabled: false,
-    searchPlaceHolder: 'Search',
+    searchPlaceHolder: DEFAULT_SEARCH_PLACEHOLDER,
+    searchPlaceholder: DEFAULT_SEARCH_PLACEHOLDER,
     skinTonePickerLocation: exports.SkinTonePickerLocation.SEARCH,
     skinTonesDisabled: false,
     suggestedEmojisMode: exports.SuggestionMode.FREQUENT,
@@ -16865,8 +16917,13 @@ function PickerConfigProvider(_ref) {
   var children = _ref.children,
       config = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var _React$useState = React.useState(function () {
+    return mergeConfig(config);
+  }),
+      mergedConfig = _React$useState[0];
+
   return React.createElement(ConfigContext.Provider, {
-    value: mergeConfig(config)
+    value: mergedConfig
   }, children);
 }
 function usePickerConfig() {
@@ -16874,10 +16931,15 @@ function usePickerConfig() {
 }
 
 function useSearchPlaceHolderConfig() {
+  var _find;
+
   var _usePickerConfig = usePickerConfig(),
-      searchPlaceHolder = _usePickerConfig.searchPlaceHolder;
+      searchPlaceHolder = _usePickerConfig.searchPlaceHolder,
+      searchPlaceholder = _usePickerConfig.searchPlaceholder;
 
-  return searchPlaceHolder;
+  return (_find = [searchPlaceHolder, searchPlaceholder].find(function (p) {
+    return p !== DEFAULT_SEARCH_PLACEHOLDER;
+  })) != null ? _find : DEFAULT_SEARCH_PLACEHOLDER;
 }
 function useDefaultSkinToneConfig() {
   var _usePickerConfig2 = usePickerConfig(),
@@ -16909,21 +16971,27 @@ function useCategoriesConfig() {
 
   return categories;
 }
-function useOnEmojiClickConfig() {
+function useCustomEmojisConfig() {
   var _usePickerConfig7 = usePickerConfig(),
-      onEmojiClick = _usePickerConfig7.onEmojiClick;
+      customEmojis = _usePickerConfig7.customEmojis;
+
+  return customEmojis;
+}
+function useOnEmojiClickConfig() {
+  var _usePickerConfig8 = usePickerConfig(),
+      onEmojiClick = _usePickerConfig8.onEmojiClick;
 
   return onEmojiClick;
 }
 function usePreviewConfig() {
-  var _usePickerConfig8 = usePickerConfig(),
-      previewConfig = _usePickerConfig8.previewConfig;
+  var _usePickerConfig9 = usePickerConfig(),
+      previewConfig = _usePickerConfig9.previewConfig;
 
   return previewConfig;
 }
 function useThemeConfig() {
-  var _usePickerConfig9 = usePickerConfig(),
-      theme = _usePickerConfig9.theme;
+  var _usePickerConfig10 = usePickerConfig(),
+      theme = _usePickerConfig10.theme;
 
   if (theme === exports.Theme.AUTO) {
     return isSystemDarkTheme() ? exports.Theme.DARK : exports.Theme.LIGHT;
@@ -16932,21 +17000,21 @@ function useThemeConfig() {
   return theme;
 }
 function useSuggestedEmojisModeConfig() {
-  var _usePickerConfig10 = usePickerConfig(),
-      suggestedEmojisMode = _usePickerConfig10.suggestedEmojisMode;
+  var _usePickerConfig11 = usePickerConfig(),
+      suggestedEmojisMode = _usePickerConfig11.suggestedEmojisMode;
 
   return suggestedEmojisMode;
 }
 function useLazyLoadEmojisConfig() {
-  var _usePickerConfig11 = usePickerConfig(),
-      lazyLoadEmojis = _usePickerConfig11.lazyLoadEmojis;
+  var _usePickerConfig12 = usePickerConfig(),
+      lazyLoadEmojis = _usePickerConfig12.lazyLoadEmojis;
 
   return lazyLoadEmojis;
 }
 function usePickerSizeConfig() {
-  var _usePickerConfig12 = usePickerConfig(),
-      height = _usePickerConfig12.height,
-      width = _usePickerConfig12.width;
+  var _usePickerConfig13 = usePickerConfig(),
+      height = _usePickerConfig13.height,
+      width = _usePickerConfig13.width;
 
   return {
     height: getDimension(height),
@@ -16954,32 +17022,32 @@ function usePickerSizeConfig() {
   };
 }
 function useEmojiVersionConfig() {
-  var _usePickerConfig13 = usePickerConfig(),
-      emojiVersion = _usePickerConfig13.emojiVersion;
+  var _usePickerConfig14 = usePickerConfig(),
+      emojiVersion = _usePickerConfig14.emojiVersion;
 
   return emojiVersion;
 }
 function useSearchDisabledConfig() {
-  var _usePickerConfig14 = usePickerConfig(),
-      searchDisabled = _usePickerConfig14.searchDisabled;
+  var _usePickerConfig15 = usePickerConfig(),
+      searchDisabled = _usePickerConfig15.searchDisabled;
 
   return searchDisabled;
 }
 function useSkinTonePickerLocationConfig() {
-  var _usePickerConfig15 = usePickerConfig(),
-      skinTonePickerLocation = _usePickerConfig15.skinTonePickerLocation;
+  var _usePickerConfig16 = usePickerConfig(),
+      skinTonePickerLocation = _usePickerConfig16.skinTonePickerLocation;
 
   return skinTonePickerLocation;
 }
 function useUnicodeToHide() {
-  var _usePickerConfig16 = usePickerConfig(),
-      unicodeToHide = _usePickerConfig16.unicodeToHide;
+  var _usePickerConfig17 = usePickerConfig(),
+      unicodeToHide = _usePickerConfig17.unicodeToHide;
 
   return unicodeToHide;
 }
 function useGetEmojiUrlConfig() {
-  var _usePickerConfig17 = usePickerConfig(),
-      getEmojiUrl = _usePickerConfig17.getEmojiUrl;
+  var _usePickerConfig18 = usePickerConfig(),
+      getEmojiUrl = _usePickerConfig18.getEmojiUrl;
 
   return getEmojiUrl;
 }
@@ -16988,20 +17056,6 @@ function getDimension(dimensionConfig) {
   return typeof dimensionConfig === 'number' ? dimensionConfig + "px" : dimensionConfig;
 }
 
-var alphaNumericEmojiIndex = {};
-setTimeout(function () {
-  allEmojis.reduce(function (searchIndex, emoji) {
-    var joinedNameString = emojiNames(emoji).flat().join('').replace(/[^a-zA-Z\d]/g, '').split('');
-    joinedNameString.forEach(function (_char) {
-      var _searchIndex$_char;
-
-      searchIndex[_char] = (_searchIndex$_char = searchIndex[_char]) != null ? _searchIndex$_char : {};
-      searchIndex[_char][emojiUnified(emoji)] = emoji;
-    });
-    return searchIndex;
-  }, alphaNumericEmojiIndex);
-});
-
 function useDebouncedState(initialValue, delay) {
   if (delay === void 0) {
     delay = 0;
@@ -18108,42 +18162,71 @@ function Button(props) {
   }), props.children);
 }
 
-function ClickableEmoji(_ref) {
+function ClickableEmojiButton(_ref) {
   var _clsx;
 
-  var emoji = _ref.emoji,
+  var emojiNames = _ref.emojiNames,
       unified = _ref.unified,
       hidden = _ref.hidden,
       hiddenOnSearch = _ref.hiddenOnSearch,
-      emojiStyle = _ref.emojiStyle,
       _ref$showVariations = _ref.showVariations,
       showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
-      size = _ref.size,
-      lazyLoad = _ref.lazyLoad,
-      getEmojiUrl = _ref.getEmojiUrl;
-  var hasVariations = emojiHasVariations(emoji);
+      hasVariations = _ref.hasVariations,
+      children = _ref.children;
   return React.createElement(Button, {
     className: clsx(ClassNames.emoji, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx[ClassNames.visible] = !hidden && !hiddenOnSearch, _clsx[ClassNames.emojiHasVariations] = hasVariations && showVariations, _clsx)),
     "data-unified": unified,
-    "aria-label": emojiName(emoji),
-    "data-full-name": emojiNames(emoji)
-  }, React.createElement(ViewOnlyEmoji, {
-    unified: unified,
-    emoji: emoji,
-    size: size,
-    emojiStyle: emojiStyle,
-    lazyLoad: lazyLoad,
-    getEmojiUrl: getEmojiUrl
-  }));
+    "aria-label": emojiNames[0],
+    "data-full-name": emojiNames
+  }, children);
+}
+
+function isCustomCategory(category) {
+  return category.category === exports.Categories.CUSTOM;
+}
+function isCustomEmoji(emoji) {
+  return emoji.imgUrl !== undefined;
+}
+
+function EmojiImg(_ref) {
+  var emojiName = _ref.emojiName,
+      style = _ref.style,
+      _ref$lazyLoad = _ref.lazyLoad,
+      lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
+      imgUrl = _ref.imgUrl,
+      onError = _ref.onError;
+  return React.createElement("img", {
+    src: imgUrl,
+    alt: emojiName,
+    className: clsx(ClassNames.external, 'epr-emoji-img'),
+    loading: lazyLoad ? 'lazy' : 'eager',
+    onError: onError,
+    style: style
+  });
 }
-function ViewOnlyEmoji(_ref2) {
-  var emoji = _ref2.emoji,
-      unified = _ref2.unified,
-      emojiStyle = _ref2.emojiStyle,
-      size = _ref2.size,
-      lazyLoad = _ref2.lazyLoad,
-      _ref2$getEmojiUrl = _ref2.getEmojiUrl,
-      getEmojiUrl = _ref2$getEmojiUrl === void 0 ? emojiUrlByUnified : _ref2$getEmojiUrl;
+
+function NativeEmoji(_ref) {
+  var unified = _ref.unified,
+      style = _ref.style;
+  return React.createElement("span", {
+    className: clsx(ClassNames.external, 'epr-emoji-native'),
+    "data-unified": unified,
+    style: style
+  }, parseNativeEmoji(unified));
+}
+
+function ViewOnlyEmoji(_ref) {
+  var emoji = _ref.emoji,
+      unified = _ref.unified,
+      emojiStyle = _ref.emojiStyle,
+      size = _ref.size,
+      lazyLoad = _ref.lazyLoad,
+      _ref$getEmojiUrl = _ref.getEmojiUrl,
+      getEmojiUrl = _ref$getEmojiUrl === void 0 ? emojiUrlByUnified : _ref$getEmojiUrl;
+
+  var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
+      setEmojisThatFailedToLoad = _useEmojisThatFailedT[1];
+
   var style = {};
 
   if (size) {
@@ -18156,49 +18239,28 @@ function ViewOnlyEmoji(_ref2) {
     return null;
   }
 
+  if (isCustomEmoji(emojiToRender)) {
+    return React.createElement(EmojiImg, {
+      style: style,
+      emojiName: unified,
+      emojiStyle: emojiStyle,
+      lazyLoad: lazyLoad,
+      imgUrl: emojiToRender.imgUrl,
+      onError: onError
+    });
+  }
+
   return React.createElement(React.Fragment, null, emojiStyle === exports.EmojiStyle.NATIVE ? React.createElement(NativeEmoji, {
     unified: unified,
     style: style
   }) : React.createElement(EmojiImg, {
-    unified: unified,
     style: style,
-    emoji: emojiToRender,
+    emojiName: emojiName(emojiToRender),
     emojiStyle: emojiStyle,
     lazyLoad: lazyLoad,
-    getEmojiUrl: getEmojiUrl
+    imgUrl: getEmojiUrl(unified, emojiStyle),
+    onError: onError
   }));
-}
-
-function NativeEmoji(_ref3) {
-  var unified = _ref3.unified,
-      style = _ref3.style;
-  return React.createElement("span", {
-    className: clsx(ClassNames.external, 'epr-emoji-native'),
-    "data-unified": unified,
-    style: style
-  }, parseNativeEmoji(unified));
-}
-
-function EmojiImg(_ref4) {
-  var emoji = _ref4.emoji,
-      unified = _ref4.unified,
-      emojiStyle = _ref4.emojiStyle,
-      style = _ref4.style,
-      _ref4$lazyLoad = _ref4.lazyLoad,
-      lazyLoad = _ref4$lazyLoad === void 0 ? false : _ref4$lazyLoad,
-      getEmojiUrl = _ref4.getEmojiUrl;
-
-  var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
-      setEmojisThatFailedToLoad = _useEmojisThatFailedT[1];
-
-  return React.createElement("img", {
-    src: getEmojiUrl(unified, emojiStyle),
-    alt: emojiName(emoji),
-    className: clsx(ClassNames.external, 'epr-emoji-img'),
-    loading: lazyLoad ? 'lazy' : 'eager',
-    onError: onError,
-    style: style
-  });
 
   function onError() {
     setEmojisThatFailedToLoad(function (prev) {
@@ -18207,6 +18269,35 @@ function EmojiImg(_ref4) {
   }
 }
 
+function ClickableEmoji(_ref) {
+  var emoji = _ref.emoji,
+      unified = _ref.unified,
+      hidden = _ref.hidden,
+      hiddenOnSearch = _ref.hiddenOnSearch,
+      emojiStyle = _ref.emojiStyle,
+      _ref$showVariations = _ref.showVariations,
+      showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
+      size = _ref.size,
+      lazyLoad = _ref.lazyLoad,
+      getEmojiUrl = _ref.getEmojiUrl;
+  var hasVariations = emojiHasVariations(emoji);
+  return React.createElement(ClickableEmojiButton, {
+    hasVariations: hasVariations,
+    showVariations: showVariations,
+    hidden: hidden,
+    hiddenOnSearch: hiddenOnSearch,
+    emojiNames: emojiNames(emoji),
+    unified: unified
+  }, React.createElement(ViewOnlyEmoji, {
+    unified: unified,
+    emoji: emoji,
+    size: size,
+    emojiStyle: emojiStyle,
+    lazyLoad: lazyLoad,
+    getEmojiUrl: getEmojiUrl
+  }));
+}
+
 function EmojiCategory(_ref) {
   var _clsx;
 
@@ -18967,6 +19058,16 @@ function useScrollCategoryIntoView() {
   };
 }
 
+function useShouldHideCustomEmojis() {
+  var customCategoryConfig = useCustomEmojisConfig();
+
+  if (!customCategoryConfig) {
+    return false;
+  }
+
+  return customCategoryConfig.length === 0;
+}
+
 function CategoryNavigation() {
   var _useState = React.useState(null),
       activeCategory = _useState[0],
@@ -18977,6 +19078,7 @@ function CategoryNavigation() {
   var isSearchMode = useIsSearchMode();
   var categoriesConfig = useCategoriesConfig();
   var CategoryNavigationRef = useCategoryNavigationRef();
+  var hideCustomCategory = useShouldHideCustomEmojis();
   return React.createElement("div", {
     className: "epr-category-nav",
     ref: CategoryNavigationRef
@@ -18984,6 +19086,11 @@ function CategoryNavigation() {
     var _clsx;
 
     var category = categoryFromCategoryConfig(categoryConfig);
+
+    if (isCustomCategory(categoryConfig) && hideCustomCategory) {
+      return null;
+    }
+
     return React.createElement(Button, {
       tabIndex: isSearchMode ? -1 : 0,
       className: clsx('epr-cat-btn', "epr-icn-" + category, (_clsx = {}, _clsx[ClassNames.active] = category === activeCategory, _clsx)),