emoji-picker-react 4.1.0 → 4.2.0

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

@@ -15,7 +15,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() {
@@ -234,238 +236,6 @@ var Categories;
   Categories["FLAGS"] = "flags";
 })(Categories || (Categories = {}));
 
-var _configByCategory;
-var categoriesOrdered = [Categories.SUGGESTED, Categories.SMILEYS_PEOPLE, Categories.ANIMALS_NATURE, Categories.FOOD_DRINK, Categories.TRAVEL_PLACES, Categories.ACTIVITIES, Categories.OBJECTS, Categories.SYMBOLS, Categories.FLAGS];
-var SuggestedRecent = {
-  name: 'Recently Used',
-  category: Categories.SUGGESTED
-};
-var configByCategory = (_configByCategory = {}, _configByCategory[Categories.SUGGESTED] = {
-  category: Categories.SUGGESTED,
-  name: 'Frequently Used'
-}, _configByCategory[Categories.SMILEYS_PEOPLE] = {
-  category: Categories.SMILEYS_PEOPLE,
-  name: 'Smileys & People'
-}, _configByCategory[Categories.ANIMALS_NATURE] = {
-  category: Categories.ANIMALS_NATURE,
-  name: 'Animals & Nature'
-}, _configByCategory[Categories.FOOD_DRINK] = {
-  category: Categories.FOOD_DRINK,
-  name: 'Food & Drink'
-}, _configByCategory[Categories.TRAVEL_PLACES] = {
-  category: Categories.TRAVEL_PLACES,
-  name: 'Travel & Places'
-}, _configByCategory[Categories.ACTIVITIES] = {
-  category: Categories.ACTIVITIES,
-  name: 'Activities'
-}, _configByCategory[Categories.OBJECTS] = {
-  category: Categories.OBJECTS,
-  name: 'Objects'
-}, _configByCategory[Categories.SYMBOLS] = {
-  category: Categories.SYMBOLS,
-  name: 'Symbols'
-}, _configByCategory[Categories.FLAGS] = {
-  category: 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 === SuggestionMode.RECENT) {
-    extra[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: SkinTones.NEUTRAL,
-    emojiStyle: 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: SuggestionMode.FREQUENT,
-    theme: Theme.LIGHT,
-    width: 350
-  };
-}
-var basePreviewConfig = {
-  defaultEmoji: '1f60a',
-  defaultCaption: "What's your mood?",
-  showPreview: true
-};
-
-var _excluded = ["children"];
-var ConfigContext = /*#__PURE__*/createContext( /*#__PURE__*/basePickerConfig());
-function PickerConfigProvider(_ref) {
-  var children = _ref.children,
-      config = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return createElement(ConfigContext.Provider, {
-    value: mergeConfig(config)
-  }, children);
-}
-function usePickerConfig() {
-  return 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 === Theme.AUTO) {
-    return isSystemDarkTheme() ? Theme.DARK : 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/';
@@ -16868,8 +16638,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) {
@@ -16912,6 +16683,245 @@ function activeVariationFromUnified(unified) {
   return skinToneVariations.includes(suspectedSkinTone) ? suspectedSkinTone : null;
 }
 
+var _configByCategory;
+var categoriesOrdered = [Categories.SUGGESTED, Categories.SMILEYS_PEOPLE, Categories.ANIMALS_NATURE, Categories.FOOD_DRINK, Categories.TRAVEL_PLACES, Categories.ACTIVITIES, Categories.OBJECTS, Categories.SYMBOLS, Categories.FLAGS];
+var SuggestedRecent = {
+  name: 'Recently Used',
+  category: Categories.SUGGESTED
+};
+var configByCategory = (_configByCategory = {}, _configByCategory[Categories.SUGGESTED] = {
+  category: Categories.SUGGESTED,
+  name: 'Frequently Used'
+}, _configByCategory[Categories.SMILEYS_PEOPLE] = {
+  category: Categories.SMILEYS_PEOPLE,
+  name: 'Smileys & People'
+}, _configByCategory[Categories.ANIMALS_NATURE] = {
+  category: Categories.ANIMALS_NATURE,
+  name: 'Animals & Nature'
+}, _configByCategory[Categories.FOOD_DRINK] = {
+  category: Categories.FOOD_DRINK,
+  name: 'Food & Drink'
+}, _configByCategory[Categories.TRAVEL_PLACES] = {
+  category: Categories.TRAVEL_PLACES,
+  name: 'Travel & Places'
+}, _configByCategory[Categories.ACTIVITIES] = {
+  category: Categories.ACTIVITIES,
+  name: 'Activities'
+}, _configByCategory[Categories.OBJECTS] = {
+  category: Categories.OBJECTS,
+  name: 'Objects'
+}, _configByCategory[Categories.SYMBOLS] = {
+  category: Categories.SYMBOLS,
+  name: 'Symbols'
+}, _configByCategory[Categories.FLAGS] = {
+  category: 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 === SuggestionMode.RECENT) {
+    extra[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: SkinTones.NEUTRAL,
+    emojiStyle: 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: SuggestionMode.FREQUENT,
+    theme: Theme.LIGHT,
+    width: 350
+  };
+}
+var basePreviewConfig = {
+  defaultEmoji: '1f60a',
+  defaultCaption: "What's your mood?",
+  showPreview: true
+};
+
+var _excluded = ["children"];
+var ConfigContext = /*#__PURE__*/createContext( /*#__PURE__*/basePickerConfig());
+function PickerConfigProvider(_ref) {
+  var children = _ref.children,
+      config = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return createElement(ConfigContext.Provider, {
+    value: mergeConfig(config)
+  }, children);
+}
+function usePickerConfig() {
+  return 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 === Theme.AUTO) {
+    return isSystemDarkTheme() ? Theme.DARK : 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) {
@@ -17821,6 +17831,7 @@ function useMouseDownHandlers(BodyRef) {
   var _useUpdateSuggested = useUpdateSuggested(),
       updateSuggested = _useUpdateSuggested[1];
 
+  var getEmojiUrl = useGetEmojiUrlConfig();
   var onClick = useCallback(function onClick(event) {
     if (disallowClickRef.current) {
       return;
@@ -17839,8 +17850,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 = useCallback(function onMouseDown(event) {
     var _window;
 
@@ -17911,13 +17922,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,
@@ -18207,7 +18218,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 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)),
@@ -18219,7 +18231,8 @@ function ClickableEmoji(_ref) {
     emoji: emoji,
     size: size,
     emojiStyle: emojiStyle,
-    lazyLoad: lazyLoad
+    lazyLoad: lazyLoad,
+    getEmojiUrl: getEmojiUrl
   }));
 }
 function ViewOnlyEmoji(_ref2) {
@@ -18227,7 +18240,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) {
@@ -18243,7 +18258,8 @@ function ViewOnlyEmoji(_ref2) {
     style: style,
     emoji: asEmoji(emojiToRender),
     emojiStyle: emojiStyle,
-    lazyLoad: lazyLoad
+    lazyLoad: lazyLoad,
+    getEmojiUrl: getEmojiUrl
   }));
 }
 
@@ -18263,13 +18279,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 createElement("img", {
-    src: emojiUrlByUnified(emojiStyle, unified),
+    src: getEmojiUrl(unified, emojiStyle),
     alt: emojiName(emoji),
     className: clsx(ClassNames.external, 'epr-emoji-img'),
     loading: lazyLoad ? 'lazy' : 'eager',
@@ -18314,6 +18331,7 @@ function Suggested(_ref) {
       suggestedUpdated = _useUpdateSuggested[0];
 
   var suggestedEmojisModeConfig = useSuggestedEmojisModeConfig();
+  var getEmojiUrl = useGetEmojiUrlConfig();
   var suggested = useMemo(function () {
     var _getsuggested;
 
@@ -18337,7 +18355,8 @@ function Suggested(_ref) {
       unified: suggestedItem.unified,
       emojiStyle: emojiStyle,
       emoji: emoji,
-      key: suggestedItem.unified
+      key: suggestedItem.unified,
+      getEmojiUrl: getEmojiUrl
     });
   }));
 }
@@ -18348,7 +18367,7 @@ styleInject(css_248z$2);
 function EmojiList() {
   var categories = useCategoriesConfig();
   return createElement("ul", {
-    className: "epr-emoji-list"
+    className: ClassNames.emojiList
   }, categories.map(function (categoryConfig, index) {
     var category = categoryFromCategoryConfig(categoryConfig);
 
@@ -18380,7 +18399,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);
@@ -18410,7 +18430,8 @@ function RenderCategory(_ref) {
       hidden: failedToLoad,
       hiddenOnSearch: filteredOut,
       emojiStyle: emojiStyle,
-      lazyLoad: lazyLoadEmojis
+      lazyLoad: lazyLoadEmojis,
+      getEmojiUrl: getEmojiUrl
     });
   });
   return createElement(EmojiCategory, {
@@ -18446,6 +18467,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;
@@ -18474,7 +18496,8 @@ function EmojiVariationPicker() {
       emoji: safeEmoji,
       unified: unified,
       emojiStyle: emojiStyle,
-      showVariations: false
+      showVariations: false,
+      getEmojiUrl: getEmojiUrl
     });
   }) : null, createElement("div", {
     className: "epr-emoji-pointer",
@@ -18681,6 +18704,7 @@ function Preview() {
   var _useEmojiVariationPic = useEmojiVariationPickerState(),
       variationPickerEmoji = _useEmojiVariationPic[0];
 
+  var getEmojiUrl = useGetEmojiUrlConfig();
   useEmojiPreviewEvents(previewConfig.showPreview, setPreviewEmoji);
 
   if (!previewConfig.showPreview) {
@@ -18700,12 +18724,14 @@ function Preview() {
       unified: previewEmoji == null ? void 0 : previewEmoji.unified,
       emoji: asEmoji(emoji),
       emojiStyle: emojiStyle,
-      size: 45
+      size: 45,
+      getEmojiUrl: getEmojiUrl
     }) : defaultEmoji ? createElement(ViewOnlyEmoji, {
       unified: emojiUnified(defaultEmoji),
       emoji: defaultEmoji,
       emojiStyle: emojiStyle,
-      size: 45
+      size: 45,
+      getEmojiUrl: getEmojiUrl
     }) : null), show ? createElement("div", {
       className: "epr-preview-emoji-label"
     }, emojiName(asEmoji(emoji))) : createElement("div", {
@@ -18885,10 +18911,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 ? 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 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  ");
 }
 
 var css_248z$9 = ".EmojiPickerReact .epr-skin-tones{--epr-skin-tone-size:16px;align-items:center;display:flex;flex-basis:30px;justify-content:flex-end;transition:all .3s ease-in-out}.EmojiPickerReact .epr-skin-tones.open{flex-basis:170px}.EmojiPickerReact .epr-skin-tone-select{height:var(--epr-skin-tone-size);position:relative;width:var(--epr-skin-tone-size)}.EmojiPickerReact .epr-skin-tones.open .epr-tone{transition:transform .3s ease-in-out,opacity .3s ease-in-out}.EmojiPickerReact .epr-skin-tones:not(.open) .epr-tone{opacity:0;z-index:0}.EmojiPickerReact .epr-skin-tones .epr-tone{border-radius:4px;box-shadow:0 0 0 0 var(--epr-active-skin-hover-color);cursor:pointer;display:block;height:var(--epr-skin-tone-size);position:absolute;right:0;transition:transform .3s ease-in-out,opacity .5s ease-in-out;width:var(--epr-skin-tone-size);z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone:hover{box-shadow:0 0 0 5px var(--epr-active-skin-hover-color)}.EmojiPickerReact .epr-skin-tones .epr-tone:focus{box-shadow:0 0 0 5px var(--epr-focus-bg-color)}.EmojiPickerReact .epr-skin-tones.open .epr-skin-tone-select .epr-tone.epr-active:after{border:1px solid var(--epr-active-skin-tone-indicator-border-color);border-radius:5px;bottom:-2px;content:\"\";left:-2px;position:absolute;right:-2px;top:-2px}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-active{opacity:1;z-index:1}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-neutral{background-color:#ffd225}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fb{background-color:#ffdfbd}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fc{background-color:#e9c197}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fd{background-color:#c88e62}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3fe{background-color:#a86637}.EmojiPickerReact .epr-skin-tones .epr-tone.epr-tone-1f3ff{background-color:#60463a}";
@@ -19339,7 +19372,7 @@ function hasModifier(event) {
   return metaKey || ctrlKey || altKey;
 }
 
-function preloadEmoji(emoji, emojiStyle) {
+function preloadEmoji(getEmojiUrl, emoji, emojiStyle) {
   if (!emoji) {
     return;
   }
@@ -19355,7 +19388,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);
@@ -19370,6 +19403,7 @@ function preloadImage(url) {
 function useOnFocus() {
   var BodyRef = useBodyRef();
   var emojiStyle = useEmojiStyleConfig();
+  var getEmojiUrl = useGetEmojiUrlConfig();
   useEffect(function () {
     if (emojiStyle === EmojiStyle.NATIVE) {
       return;
@@ -19396,10 +19430,10 @@ function useOnFocus() {
       }
 
       if (emojiHasVariations(emoji)) {
-        preloadEmoji(emoji, emojiStyle);
+        preloadEmoji(getEmojiUrl, emoji, emojiStyle);
       }
     }
-  }, [BodyRef, emojiStyle]);
+  }, [BodyRef, emojiStyle, getEmojiUrl]);
 }
 
 var css_248z$b = "aside.EmojiPickerReact.epr-main{border-color:var(--epr-picker-border-color);border-radius:var(--epr-picker-border-radius);border-style:solid;border-width:1px;display:flex;flex-direction:column;position:relative}";
@@ -19429,7 +19463,7 @@ function PickerRootElement(_ref2) {
     width: width + "px"
   };
   return createElement("aside", {
-    className: clsx('EmojiPickerReact', 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === Theme.DARK, _clsx)),
+    className: clsx(ClassNames.emojiPicker, 'epr-main', (_clsx = {}, _clsx[ClassNames.searchActive] = searchModeActive, _clsx['epr-dark-theme'] = theme === Theme.DARK, _clsx)),
     ref: PickerMainRef,
     style: style
   }, children);
@@ -19486,7 +19520,8 @@ function ExportedEmoji(_ref) {
       _ref$emojiStyle = _ref.emojiStyle,
       emojiStyle = _ref$emojiStyle === void 0 ? 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;
@@ -19496,7 +19531,8 @@ function ExportedEmoji(_ref) {
     unified: unified,
     size: size,
     emojiStyle: emojiStyle,
-    lazyLoad: lazyLoad
+    lazyLoad: lazyLoad,
+    getEmojiUrl: getEmojiUrl
   });
 }