emoji-picker-react 4.1.0 → 4.2.0

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

@@ -21,7 +21,9 @@ var ClassNames;
   ClassNames["categoryContent"] = "epr-emoji-category-content";
   ClassNames["emojiHasVariatios"] = "epr-emoji-has-variations";
   ClassNames["scrollBody"] = "epr-body";
+  ClassNames["emojiList"] = "epr-emoji-list";
   ClassNames["external"] = "__EmojiPicker__";
+  ClassNames["emojiPicker"] = "EmojiPickerReact";
 })(ClassNames || (ClassNames = {}));
 
 function asSelectors() {
@@ -230,238 +232,6 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   Categories["FLAGS"] = "flags";
 })(exports.Categories || (exports.Categories = {}));
 
-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);
-}
-
-function mergeConfig(userConfig) {
-  var _userConfig$previewCo;
-
-  if (userConfig === void 0) {
-    userConfig = {};
-  }
-
-  var base = basePickerConfig();
-  var previewConfig = Object.assign(base.previewConfig, (_userConfig$previewCo = userConfig.previewConfig) != null ? _userConfig$previewCo : {});
-  var config = Object.assign(base, userConfig);
-  var categories = mergeCategoriesConfig(userConfig.categories, {
-    suggestionMode: config.suggestedEmojisMode
-  });
-  return _extends({}, config, {
-    categories: categories,
-    previewConfig: previewConfig
-  });
-}
-function basePickerConfig() {
-  return {
-    autoFocusSearch: true,
-    categories: baseCategoriesConfig(),
-    defaultSkinTone: exports.SkinTones.NEUTRAL,
-    emojiStyle: exports.EmojiStyle.APPLE,
-    emojiVersion: null,
-    height: 450,
-    lazyLoadEmojis: false,
-    onEmojiClick: function defaultOnClickHandler( // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    emoji, // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    event) {},
-    previewConfig: _extends({}, basePreviewConfig),
-    searchPlaceHolder: 'Search',
-    skinTonesDisabled: false,
-    suggestedEmojisMode: exports.SuggestionMode.FREQUENT,
-    theme: exports.Theme.LIGHT,
-    width: 350
-  };
-}
-var basePreviewConfig = {
-  defaultEmoji: '1f60a',
-  defaultCaption: "What's your mood?",
-  showPreview: true
-};
-
-var _excluded = ["children"];
-var ConfigContext = /*#__PURE__*/React.createContext( /*#__PURE__*/basePickerConfig());
-function PickerConfigProvider(_ref) {
-  var children = _ref.children,
-      config = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return React.createElement(ConfigContext.Provider, {
-    value: mergeConfig(config)
-  }, children);
-}
-function usePickerConfig() {
-  return React.useContext(ConfigContext);
-}
-
-function useSearchPlaceHolderConfig() {
-  var _usePickerConfig = usePickerConfig(),
-      searchPlaceHolder = _usePickerConfig.searchPlaceHolder;
-
-  return searchPlaceHolder;
-}
-function useDefaultSkinToneConfig() {
-  var _usePickerConfig2 = usePickerConfig(),
-      defaultSkinTone = _usePickerConfig2.defaultSkinTone;
-
-  return defaultSkinTone;
-}
-function useSkinTonesDisabledConfig() {
-  var _usePickerConfig3 = usePickerConfig(),
-      skinTonesDisabled = _usePickerConfig3.skinTonesDisabled;
-
-  return skinTonesDisabled;
-}
-function useEmojiStyleConfig() {
-  var _usePickerConfig4 = usePickerConfig(),
-      emojiStyle = _usePickerConfig4.emojiStyle;
-
-  return emojiStyle;
-}
-function useAutoFocusSearchConfig() {
-  var _usePickerConfig5 = usePickerConfig(),
-      autoFocusSearch = _usePickerConfig5.autoFocusSearch;
-
-  return autoFocusSearch;
-}
-function useCategoriesConfig() {
-  var _usePickerConfig6 = usePickerConfig(),
-      categories = _usePickerConfig6.categories;
-
-  return categories;
-}
-function useOnEmojiClickConfig() {
-  var _usePickerConfig7 = usePickerConfig(),
-      onEmojiClick = _usePickerConfig7.onEmojiClick;
-
-  return onEmojiClick;
-}
-function usePreviewConfig() {
-  var _usePickerConfig8 = usePickerConfig(),
-      previewConfig = _usePickerConfig8.previewConfig;
-
-  return previewConfig;
-}
-function useThemeConfig() {
-  var _usePickerConfig9 = usePickerConfig(),
-      theme = _usePickerConfig9.theme;
-
-  if (theme === exports.Theme.AUTO) {
-    return isSystemDarkTheme() ? exports.Theme.DARK : exports.Theme.LIGHT;
-  }
-
-  return theme;
-}
-function useSuggestedEmojisModeConfig() {
-  var _usePickerConfig10 = usePickerConfig(),
-      suggestedEmojisMode = _usePickerConfig10.suggestedEmojisMode;
-
-  return suggestedEmojisMode;
-}
-function useLazyLoadEmojisConfig() {
-  var _usePickerConfig11 = usePickerConfig(),
-      lazyLoadEmojis = _usePickerConfig11.lazyLoadEmojis;
-
-  return lazyLoadEmojis;
-}
-function usePickerSizeConfig() {
-  var _usePickerConfig12 = usePickerConfig(),
-      height = _usePickerConfig12.height,
-      width = _usePickerConfig12.width;
-
-  return {
-    height: height,
-    width: width
-  };
-}
-function useEmojiVersionConfig() {
-  var _usePickerConfig13 = usePickerConfig(),
-      emojiVersion = _usePickerConfig13.emojiVersion;
-
-  return emojiVersion;
-}
-
 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/';
@@ -16864,8 +16634,9 @@ function emojisByCategory(category) {
 
   // @ts-ignore
   return (_emojis$category = emojis == null ? void 0 : emojis[category]) != null ? _emojis$category : [];
-}
-function emojiUrlByUnified(emojiStyle, unified) {
+} // WARNING: DO NOT USE DIRECTLY
+
+function emojiUrlByUnified(unified, emojiStyle) {
   return "" + cdnUrl(emojiStyle) + unified + ".png";
 }
 function emojiVariations(emoji) {
@@ -16908,6 +16679,245 @@ 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);
+}
+
+function mergeConfig(userConfig) {
+  var _userConfig$previewCo;
+
+  if (userConfig === void 0) {
+    userConfig = {};
+  }
+
+  var base = basePickerConfig();
+  var previewConfig = Object.assign(base.previewConfig, (_userConfig$previewCo = userConfig.previewConfig) != null ? _userConfig$previewCo : {});
+  var config = Object.assign(base, userConfig);
+  var categories = mergeCategoriesConfig(userConfig.categories, {
+    suggestionMode: config.suggestedEmojisMode
+  });
+  return _extends({}, config, {
+    categories: categories,
+    previewConfig: previewConfig
+  });
+}
+function basePickerConfig() {
+  return {
+    autoFocusSearch: true,
+    categories: baseCategoriesConfig(),
+    defaultSkinTone: exports.SkinTones.NEUTRAL,
+    emojiStyle: exports.EmojiStyle.APPLE,
+    emojiVersion: null,
+    getEmojiUrl: emojiUrlByUnified,
+    height: 450,
+    lazyLoadEmojis: false,
+    onEmojiClick: function defaultOnClickHandler( // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    emoji, // @ts-ignore
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    event) {},
+    previewConfig: _extends({}, basePreviewConfig),
+    searchPlaceHolder: 'Search',
+    skinTonesDisabled: false,
+    suggestedEmojisMode: exports.SuggestionMode.FREQUENT,
+    theme: exports.Theme.LIGHT,
+    width: 350
+  };
+}
+var basePreviewConfig = {
+  defaultEmoji: '1f60a',
+  defaultCaption: "What's your mood?",
+  showPreview: true
+};
+
+var _excluded = ["children"];
+var ConfigContext = /*#__PURE__*/React.createContext( /*#__PURE__*/basePickerConfig());
+function PickerConfigProvider(_ref) {
+  var children = _ref.children,
+      config = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return React.createElement(ConfigContext.Provider, {
+    value: mergeConfig(config)
+  }, children);
+}
+function usePickerConfig() {
+  return React.useContext(ConfigContext);
+}
+
+function useSearchPlaceHolderConfig() {
+  var _usePickerConfig = usePickerConfig(),
+      searchPlaceHolder = _usePickerConfig.searchPlaceHolder;
+
+  return searchPlaceHolder;
+}
+function useDefaultSkinToneConfig() {
+  var _usePickerConfig2 = usePickerConfig(),
+      defaultSkinTone = _usePickerConfig2.defaultSkinTone;
+
+  return defaultSkinTone;
+}
+function useSkinTonesDisabledConfig() {
+  var _usePickerConfig3 = usePickerConfig(),
+      skinTonesDisabled = _usePickerConfig3.skinTonesDisabled;
+
+  return skinTonesDisabled;
+}
+function useEmojiStyleConfig() {
+  var _usePickerConfig4 = usePickerConfig(),
+      emojiStyle = _usePickerConfig4.emojiStyle;
+
+  return emojiStyle;
+}
+function useAutoFocusSearchConfig() {
+  var _usePickerConfig5 = usePickerConfig(),
+      autoFocusSearch = _usePickerConfig5.autoFocusSearch;
+
+  return autoFocusSearch;
+}
+function useCategoriesConfig() {
+  var _usePickerConfig6 = usePickerConfig(),
+      categories = _usePickerConfig6.categories;
+
+  return categories;
+}
+function useOnEmojiClickConfig() {
+  var _usePickerConfig7 = usePickerConfig(),
+      onEmojiClick = _usePickerConfig7.onEmojiClick;
+
+  return onEmojiClick;
+}
+function usePreviewConfig() {
+  var _usePickerConfig8 = usePickerConfig(),
+      previewConfig = _usePickerConfig8.previewConfig;
+
+  return previewConfig;
+}
+function useThemeConfig() {
+  var _usePickerConfig9 = usePickerConfig(),
+      theme = _usePickerConfig9.theme;
+
+  if (theme === exports.Theme.AUTO) {
+    return isSystemDarkTheme() ? exports.Theme.DARK : exports.Theme.LIGHT;
+  }
+
+  return theme;
+}
+function useSuggestedEmojisModeConfig() {
+  var _usePickerConfig10 = usePickerConfig(),
+      suggestedEmojisMode = _usePickerConfig10.suggestedEmojisMode;
+
+  return suggestedEmojisMode;
+}
+function useLazyLoadEmojisConfig() {
+  var _usePickerConfig11 = usePickerConfig(),
+      lazyLoadEmojis = _usePickerConfig11.lazyLoadEmojis;
+
+  return lazyLoadEmojis;
+}
+function usePickerSizeConfig() {
+  var _usePickerConfig12 = usePickerConfig(),
+      height = _usePickerConfig12.height,
+      width = _usePickerConfig12.width;
+
+  return {
+    height: height,
+    width: width
+  };
+}
+function useEmojiVersionConfig() {
+  var _usePickerConfig13 = usePickerConfig(),
+      emojiVersion = _usePickerConfig13.emojiVersion;
+
+  return emojiVersion;
+}
+function useGetEmojiUrlConfig() {
+  var _usePickerConfig14 = usePickerConfig(),
+      getEmojiUrl = _usePickerConfig14.getEmojiUrl;
+
+  return getEmojiUrl;
+}
+
 var alphaNumericEmojiIndex = {};
 setTimeout(function () {
   allEmojis.reduce(function (searchIndex, emoji) {
@@ -17817,6 +17827,7 @@ function useMouseDownHandlers(BodyRef) {
   var _useUpdateSuggested = useUpdateSuggested(),
       updateSuggested = _useUpdateSuggested[1];
 
+  var getEmojiUrl = useGetEmojiUrlConfig();
   var onClick = React.useCallback(function onClick(event) {
     if (disallowClickRef.current) {
       return;
@@ -17835,8 +17846,8 @@ function useMouseDownHandlers(BodyRef) {
     var skinToneToUse = activeVariationFromUnified(unified) || activeSkinTone;
     updateSuggested();
     setsuggested(emoji, skinToneToUse);
-    onEmojiClick(emojiClickOutput(emoji, skinToneToUse), event);
-  }, [activeSkinTone, closeAllOpenToggles, disallowClickRef, onEmojiClick, updateSuggested]);
+    onEmojiClick(emojiClickOutput(emoji, skinToneToUse, getEmojiUrl), event);
+  }, [activeSkinTone, closeAllOpenToggles, disallowClickRef, onEmojiClick, updateSuggested, getEmojiUrl]);
   var onMouseDown = React.useCallback(function onMouseDown(event) {
     var _window;
 
@@ -17907,13 +17918,13 @@ function emojiFromEvent(event) {
   return emojiFromElement(target);
 }
 
-function emojiClickOutput(emoji, activeSkinTone) {
+function emojiClickOutput(emoji, activeSkinTone, getEmojiUrl) {
   var unified = emojiUnified(emoji, activeSkinTone);
   return {
     activeSkinTone: activeSkinTone,
     emoji: parseNativeEmoji(unified),
     getImageUrl: function getImageUrl(emojiStyle) {
-      return emojiUrlByUnified(emojiStyle, unified);
+      return getEmojiUrl(unified, emojiStyle);
     },
     names: emojiNames(emoji),
     unified: unified,
@@ -18173,7 +18184,8 @@ function ClickableEmoji(_ref) {
       _ref$showVariations = _ref.showVariations,
       showVariations = _ref$showVariations === void 0 ? true : _ref$showVariations,
       size = _ref.size,
-      lazyLoad = _ref.lazyLoad;
+      lazyLoad = _ref.lazyLoad,
+      getEmojiUrl = _ref.getEmojiUrl;
   var hasVariations = emojiHasVariations(emoji);
   return React.createElement(Button, {
     className: clsx(ClassNames.emoji, (_clsx = {}, _clsx[ClassNames.hidden] = hidden, _clsx[ClassNames.hiddenOnSearch] = hiddenOnSearch, _clsx[ClassNames.visible] = !hidden && !hiddenOnSearch, _clsx[ClassNames.emojiHasVariatios] = hasVariations && showVariations, _clsx)),
@@ -18185,7 +18197,8 @@ function ClickableEmoji(_ref) {
     emoji: emoji,
     size: size,
     emojiStyle: emojiStyle,
-    lazyLoad: lazyLoad
+    lazyLoad: lazyLoad,
+    getEmojiUrl: getEmojiUrl
   }));
 }
 function ViewOnlyEmoji(_ref2) {
@@ -18193,7 +18206,9 @@ function ViewOnlyEmoji(_ref2) {
       unified = _ref2.unified,
       emojiStyle = _ref2.emojiStyle,
       size = _ref2.size,
-      lazyLoad = _ref2.lazyLoad;
+      lazyLoad = _ref2.lazyLoad,
+      _ref2$getEmojiUrl = _ref2.getEmojiUrl,
+      getEmojiUrl = _ref2$getEmojiUrl === void 0 ? emojiUrlByUnified : _ref2$getEmojiUrl;
   var style = {};
 
   if (size) {
@@ -18209,7 +18224,8 @@ function ViewOnlyEmoji(_ref2) {
     style: style,
     emoji: asEmoji(emojiToRender),
     emojiStyle: emojiStyle,
-    lazyLoad: lazyLoad
+    lazyLoad: lazyLoad,
+    getEmojiUrl: getEmojiUrl
   }));
 }
 
@@ -18229,13 +18245,14 @@ function EmojiImg(_ref4) {
       emojiStyle = _ref4.emojiStyle,
       style = _ref4.style,
       _ref4$lazyLoad = _ref4.lazyLoad,
-      lazyLoad = _ref4$lazyLoad === void 0 ? false : _ref4$lazyLoad;
+      lazyLoad = _ref4$lazyLoad === void 0 ? false : _ref4$lazyLoad,
+      getEmojiUrl = _ref4.getEmojiUrl;
 
   var _useEmojisThatFailedT = useEmojisThatFailedToLoadState(),
       setEmojisThatFailedToLoad = _useEmojisThatFailedT[1];
 
   return React.createElement("img", {
-    src: emojiUrlByUnified(emojiStyle, unified),
+    src: getEmojiUrl(unified, emojiStyle),
     alt: emojiName(emoji),
     className: clsx(ClassNames.external, 'epr-emoji-img'),
     loading: lazyLoad ? 'lazy' : 'eager',
@@ -18277,6 +18294,7 @@ function Suggested(_ref) {
       suggestedUpdated = _useUpdateSuggested[0];
 
   var suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
+  var getEmojiUrl = useGetEmojiUrlConfig();
   var suggested = React.useMemo(function () {
     var _getsuggested;
 
@@ -18300,7 +18318,8 @@ function Suggested(_ref) {
       unified: suggestedItem.unified,
       emojiStyle: emojiStyle,
       emoji: emoji,
-      key: suggestedItem.unified
+      key: suggestedItem.unified,
+      getEmojiUrl: getEmojiUrl
     });
   }));
 }
@@ -18308,7 +18327,7 @@ function Suggested(_ref) {
 function EmojiList() {
   var categories = useCategoriesConfig();
   return React.createElement("ul", {
-    className: "epr-emoji-list"
+    className: ClassNames.emojiList
   }, categories.map(function (categoryConfig, index) {
     var category = categoryFromCategoryConfig(categoryConfig);
 
@@ -18340,7 +18359,8 @@ function RenderCategory(_ref) {
   var _useActiveSkinToneSta = useActiveSkinToneState(),
       activeSkinTone = _useActiveSkinToneSta[0];
 
-  var disallowedEmojisRef = useDisallowedEmojisRef(); // Small trick to defer the rendering of all emoji categories until the first category is visible
+  var disallowedEmojisRef = useDisallowedEmojisRef();
+  var getEmojiUrl = useGetEmojiUrlConfig(); // Small trick to defer the rendering of all emoji categories until the first category is visible
   // This way the user gets to actually see something and not wait for the whole picker to render.
 
   var emojisToPush = !isPastInitialLoad && index > 1 ? [] : emojisByCategory(category);
@@ -18370,7 +18390,8 @@ function RenderCategory(_ref) {
       hidden: failedToLoad,
       hiddenOnSearch: filteredOut,
       emojiStyle: emojiStyle,
-      lazyLoad: lazyLoadEmojis
+      lazyLoad: lazyLoadEmojis,
+      getEmojiUrl: getEmojiUrl
     });
   });
   return React.createElement(EmojiCategory, {
@@ -18403,6 +18424,7 @@ function EmojiVariationPicker() {
 
   var setAnchoredEmojiRef = useSetAnchoredEmojiRef();
   var getPointerStyle = usePointerStyle(VariationPickerRef);
+  var getEmojiUrl = useGetEmojiUrlConfig();
   var button = buttonFromTarget(AnchoredEmojiRef.current);
   var visible = emoji && button && emojiHasVariations(emoji) && button.classList.contains(ClassNames.emojiHasVariatios);
   var top, pointerStyle;
@@ -18431,7 +18453,8 @@ function EmojiVariationPicker() {
       emoji: safeEmoji,
       unified: unified,
       emojiStyle: emojiStyle,
-      showVariations: false
+      showVariations: false,
+      getEmojiUrl: getEmojiUrl
     });
   }) : null, React.createElement("div", {
     className: "epr-emoji-pointer",
@@ -18629,6 +18652,7 @@ function Preview() {
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
       variationPickerEmoji = _useEmojiVariationPic[0];
 
+  var getEmojiUrl = useGetEmojiUrlConfig();
   useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
 
   if (!previewConfig.showPreview) {
@@ -18648,12 +18672,14 @@ function Preview() {
       unified: previewEmoji == null ? void 0 : previewEmoji.unified,
       emoji: asEmoji(emoji),
       emojiStyle: emojiStyle,
-      size: 45
+      size: 45,
+      getEmojiUrl: getEmojiUrl
     }) : defaultEmoji ? React.createElement(ViewOnlyEmoji, {
       unified: emojiUnified(defaultEmoji),
       emoji: defaultEmoji,
       emojiStyle: emojiStyle,
-      size: 45
+      size: 45,
+      getEmojiUrl: getEmojiUrl
     }) : null), show ? React.createElement("div", {
       className: "epr-preview-emoji-label"
     }, emojiName(asEmoji(emoji))) : React.createElement("div", {
@@ -18827,10 +18853,17 @@ function Search() {
     className: "epr-icn-clear-search"
   })));
 }
+var CSS_SEARCH_SELECTOR = /*#__PURE__*/asSelectors(ClassNames.emojiPicker) + " " + /*#__PURE__*/asSelectors(ClassNames.emojiList);
 
 function CssSearch(_ref) {
   var value = _ref.value;
-  return value ? React.createElement("style", null, "\n        .EmojiPickerReact button.epr-emoji:not([data-full-name*=\"" + getNormalizedSearchTerm(value) + "\"]) {\n          display: none;\n        }\n  ") : null;
+
+  if (!value) {
+    return null;
+  }
+
+  var searchQuery = "button[data-full-name*=\"" + getNormalizedSearchTerm(value) + "\"]";
+  return React.createElement("style", null, "\n        " + CSS_SEARCH_SELECTOR + " " + asSelectors(ClassNames.category) + ":not(:has(" + searchQuery + ")) {\n        display: none;\n      }\n\n        " + CSS_SEARCH_SELECTOR + " button" + asSelectors(ClassNames.emoji) + ":not(" + searchQuery + ") {\n        display: none;\n      }\n  ");
 }
 
 function SkinTonePicker() {
@@ -19275,7 +19308,7 @@ function hasModifier(event) {
   return metaKey || ctrlKey || altKey;
 }
 
-function preloadEmoji(emoji, emojiStyle) {
+function preloadEmoji(getEmojiUrl, emoji, emojiStyle) {
   if (!emoji) {
     return;
   }
@@ -19291,7 +19324,7 @@ function preloadEmoji(emoji, emojiStyle) {
   }
 
   emojiVariations(emoji).forEach(function (variation) {
-    var emojiUrl = emojiUrlByUnified(emojiStyle, variation);
+    var emojiUrl = getEmojiUrl(variation, emojiStyle);
     preloadImage(emojiUrl);
   });
   preloadedEmojs.add(unified);
@@ -19306,6 +19339,7 @@ function preloadImage(url) {
 function useOnFocus() {
   var BodyRef = useBodyRef();
   var emojiStyle = useEmojiStyleConfig();
+  var getEmojiUrl = useGetEmojiUrlConfig();
   React.useEffect(function () {
     if (emojiStyle === exports.EmojiStyle.NATIVE) {
       return;
@@ -19332,10 +19366,10 @@ function useOnFocus() {
       }
 
       if (emojiHasVariations(emoji)) {
-        preloadEmoji(emoji, emojiStyle);
+        preloadEmoji(getEmojiUrl, emoji, emojiStyle);
       }
     }
-  }, [BodyRef, emojiStyle]);
+  }, [BodyRef, emojiStyle, getEmojiUrl]);
 }
 
 function PickerMain(_ref) {
@@ -19362,7 +19396,7 @@ function PickerRootElement(_ref2) {
     width: width + "px"
   };
   return React.createElement("aside", {
-    className: clsx('EmojiPickerReact', 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === exports.Theme.DARK, _clsx)),
+    className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === exports.Theme.DARK, _clsx)),
     ref: PickerMainRef,
     style: style
   }, children);
@@ -19416,7 +19450,8 @@ function ExportedEmoji(_ref) {
       _ref$emojiStyle = _ref.emojiStyle,
       emojiStyle = _ref$emojiStyle === void 0 ? exports.EmojiStyle.APPLE : _ref$emojiStyle,
       _ref$lazyLoad = _ref.lazyLoad,
-      lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad;
+      lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
+      getEmojiUrl = _ref.getEmojiUrl;
 
   if (!unified) {
     return null;
@@ -19426,7 +19461,8 @@ function ExportedEmoji(_ref) {
     unified: unified,
     size: size,
     emojiStyle: emojiStyle,
-    lazyLoad: lazyLoad
+    lazyLoad: lazyLoad,
+    getEmojiUrl: getEmojiUrl
   });
 }