emoji-picker-react 4.5.4 → 4.5.6

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

@@ -21,6 +21,8 @@ var ClassNames;
   ClassNames["vertical"] = "epr-vertical";
   ClassNames["horizontal"] = "epr-horizontal";
   ClassNames["variationPicker"] = "epr-emoji-variation-picker";
+  ClassNames["darkTheme"] = "epr-dark-theme";
+  ClassNames["autoTheme"] = "epr-auto-theme";
 })(ClassNames || (ClassNames = {}));
 
 function asSelectors() {
@@ -154,14 +156,6 @@ function useVariationPickerRef() {
   return useElementRef()['VariationPickerRef'];
 }
 
-function isSystemDarkTheme() {
-  if (typeof window === 'undefined') {
-    return false;
-  }
-
-  return !!window.matchMedia('(prefers-color-scheme: dark)').matches;
-}
-
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -17039,10 +17033,6 @@ function useThemeConfig() {
   var _usePickerConfig9 = usePickerConfig(),
       theme = _usePickerConfig9.theme;
 
-  if (theme === Theme.AUTO) {
-    return isSystemDarkTheme() ? Theme.DARK : Theme.LIGHT;
-  }
-
   return theme;
 }
 function useSuggestedEmojisModeConfig() {
@@ -18465,9 +18455,10 @@ styleInject(css_248z$2);
 
 function EmojiList() {
   var categories = useCategoriesConfig();
+  var renderdCategoriesCountRef = useRef(0);
   return createElement("ul", {
     className: ClassNames.emojiList
-  }, categories.map(function (categoryConfig, index) {
+  }, categories.map(function (categoryConfig) {
     var category = categoryFromCategoryConfig(categoryConfig);
 
     if (category === Categories.SUGGESTED) {
@@ -18479,17 +18470,17 @@ function EmojiList() {
 
     return createElement(RenderCategory, {
       key: category,
-      index: index,
       category: category,
-      categoryConfig: categoryConfig
+      categoryConfig: categoryConfig,
+      renderdCategoriesCountRef: renderdCategoriesCountRef
     });
   }));
 }
 
 function RenderCategory(_ref) {
-  var index = _ref.index,
-      category = _ref.category,
-      categoryConfig = _ref.categoryConfig;
+  var category = _ref.category,
+      categoryConfig = _ref.categoryConfig,
+      renderdCategoriesCountRef = _ref.renderdCategoriesCountRef;
   var isEmojiHidden = useIsEmojiHidden();
   var lazyLoadEmojis = useLazyLoadEmojisConfig();
   var emojiStyle = useEmojiStyleConfig();
@@ -18503,7 +18494,12 @@ function RenderCategory(_ref) {
   var showVariations = !useSkinTonesDisabledConfig(); // 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);
+  var emojisToPush = !isPastInitialLoad && renderdCategoriesCountRef.current > 0 ? [] : emojisByCategory(category);
+
+  if (emojisToPush.length > 0) {
+    renderdCategoriesCountRef.current++;
+  }
+
   var hiddenCounter = 0;
   var emojis = emojisToPush.map(function (emoji) {
     var unified = emojiUnified(emoji, activeSkinTone);
@@ -19825,13 +19821,13 @@ function PickerRootElement(_ref2) {
     width: width
   };
   return createElement("aside", {
-    className: clsx(ClassNames.emojiPicker, '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[ClassNames.darkTheme] = theme === Theme.DARK, _clsx[ClassNames.autoTheme] = theme === Theme.AUTO, _clsx)),
     ref: PickerMainRef,
     style: style
   }, children);
 }
 
-var css_248z$c = ".EmojiPickerReact{--epr-highlight-color:#007aeb;--epr-hover-bg-color:#f1f8ff;--epr-focus-bg-color:#e0f0ff;--epr-text-color:#858585;--epr-search-input-bg-color:#f6f6f6;--epr-picker-border-color:#e7e7e7;--epr-bg-color:#fff;--epr-category-icon-active-color:#6aa8de;--epr-skin-tone-picker-menu-color:#ffffff95;--epr-horizontal-padding:10px;--epr-picker-border-radius:8px;--epr-search-border-color:var(--epr-highlight-color);--epr-header-padding:15px var(--epr-horizontal-padding);--epr-active-skin-tone-indicator-border-color:var(--epr-highlight-color);--epr-active-skin-hover-color:var(--epr-hover-bg-color);--epr-search-input-bg-color-active:var(--epr-search-input-bg-color);--epr-search-input-padding:0 30px;--epr-search-input-border-radius:8px;--epr-search-input-height:40px;--epr-search-input-text-color:var(--epr-text-color);--epr-search-input-placeholder-color:var(--epr-text-color);--epr-search-bar-inner-padding:var(--epr-horizontal-padding);--epr-category-navigation-button-size:30px;--epr-emoji-variation-picker-height:45px;--epr-emoji-variation-picker-bg-color:var(--epr-bg-color);--epr-preview-height:70px;--epr-preview-text-size:14px;--epr-preview-text-padding:0 var(--epr-horizontal-padding);--epr-preview-border-color:var(--epr-picker-border-color);--epr-preview-text-color:var(--epr-text-color);--epr-category-padding:0 var(--epr-horizontal-padding);--epr-category-label-bg-color:#ffffffe6;--epr-category-label-text-color:var(--epr-text-color);--epr-category-label-padding:0 var(--epr-horizontal-padding);--epr-category-label-height:40px;--epr-emoji-size:30px;--epr-emoji-padding:5px;--epr-emoji-fullsize:calc(var(--epr-emoji-size) + var(--epr-emoji-padding)*2);--epr-emoji-hover-color:var(--epr-hover-bg-color);--epr-emoji-variation-indicator-color:var(--epr-picker-border-color);--epr-emoji-variation-indicator-color-hover:var(--epr-text-color);--epr-header-overlay-z-index:3;--epr-emoji-variations-indictator-z-index:1;--epr-category-label-z-index:2;--epr-skin-variation-picker-z-index:5;--epr-preview-z-index:6}.EmojiPickerReact.epr-dark-theme{--epr-dark:#000;--epr-emoji-variation-picker-bg-color:var(--epr-dark);--epr-highlight-color:silver;--epr-text-color:var(--epr-highlight-color);--epr-hover-bg-color:#363636f6;--epr-focus-bg-color:#474747;--epr-search-input-bg-color:#333;--epr-category-label-bg-color:#222222e6;--epr-picker-border-color:#151617;--epr-bg-color:#222;--epr-search-input-bg-color-active:var(--epr-dark);--epr-emoji-variation-indicator-color:#444;--epr-category-icon-active-color:#3271b7;--epr-skin-tone-picker-menu-color:#22222295}.EmojiPickerReact{background-color:var(--epr-bg-color);overflow:hidden}.EmojiPickerReact .epr-hidden,.EmojiPickerReact.epr-search-active .epr-hidden-on-search,.EmojiPickerReact:not(.epr-search-active) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:not(:-moz-placeholder-shown)) .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown)) .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:-moz-placeholder-shown) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:placeholder-shown) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}.EmojiPickerReact *{box-sizing:border-box;font-family:sans-serif}.EmojiPickerReact button.epr-btn{background:none;border:0;cursor:pointer;outline:none}";
+var css_248z$c = ".EmojiPickerReact{--epr-highlight-color:#007aeb;--epr-hover-bg-color:#f1f8ff;--epr-focus-bg-color:#e0f0ff;--epr-text-color:#858585;--epr-search-input-bg-color:#f6f6f6;--epr-picker-border-color:#e7e7e7;--epr-bg-color:#fff;--epr-category-icon-active-color:#6aa8de;--epr-skin-tone-picker-menu-color:#ffffff95;--epr-horizontal-padding:10px;--epr-picker-border-radius:8px;--epr-search-border-color:var(--epr-highlight-color);--epr-header-padding:15px var(--epr-horizontal-padding);--epr-active-skin-tone-indicator-border-color:var(--epr-highlight-color);--epr-active-skin-hover-color:var(--epr-hover-bg-color);--epr-search-input-bg-color-active:var(--epr-search-input-bg-color);--epr-search-input-padding:0 30px;--epr-search-input-border-radius:8px;--epr-search-input-height:40px;--epr-search-input-text-color:var(--epr-text-color);--epr-search-input-placeholder-color:var(--epr-text-color);--epr-search-bar-inner-padding:var(--epr-horizontal-padding);--epr-category-navigation-button-size:30px;--epr-emoji-variation-picker-height:45px;--epr-emoji-variation-picker-bg-color:var(--epr-bg-color);--epr-preview-height:70px;--epr-preview-text-size:14px;--epr-preview-text-padding:0 var(--epr-horizontal-padding);--epr-preview-border-color:var(--epr-picker-border-color);--epr-preview-text-color:var(--epr-text-color);--epr-category-padding:0 var(--epr-horizontal-padding);--epr-category-label-bg-color:#ffffffe6;--epr-category-label-text-color:var(--epr-text-color);--epr-category-label-padding:0 var(--epr-horizontal-padding);--epr-category-label-height:40px;--epr-emoji-size:30px;--epr-emoji-padding:5px;--epr-emoji-fullsize:calc(var(--epr-emoji-size) + var(--epr-emoji-padding)*2);--epr-emoji-hover-color:var(--epr-hover-bg-color);--epr-emoji-variation-indicator-color:var(--epr-picker-border-color);--epr-emoji-variation-indicator-color-hover:var(--epr-text-color);--epr-header-overlay-z-index:3;--epr-emoji-variations-indictator-z-index:1;--epr-category-label-z-index:2;--epr-skin-variation-picker-z-index:5;--epr-preview-z-index:6;--epr-dark:#000;--epr-dark-emoji-variation-picker-bg-color:var(--epr-dark);--epr-dark-highlight-color:silver;--epr-dark-text-color:var(--epr-highlight-color);--epr-dark-hover-bg-color:#363636f6;--epr-dark-focus-bg-color:#474747;--epr-dark-search-input-bg-color:#333;--epr-dark-category-label-bg-color:#222222e6;--epr-dark-picker-border-color:#151617;--epr-dark-bg-color:#222;--epr-dark-search-input-bg-color-active:var(--epr-dark);--epr-dark-emoji-variation-indicator-color:#444;--epr-dark-category-icon-active-color:#3271b7;--epr-dark-skin-tone-picker-menu-color:#22222295}@media (prefers-color-scheme:dark){.EmojiPickerReact.epr-auto-theme{--epr-dark:var(--epr-dark-dark);--epr-emoji-variation-picker-bg-color:var(\n      --epr-dark-emoji-variation-picker-bg-color\n    );--epr-highlight-color:var(--epr-dark-highlight-color);--epr-text-color:var(--epr-dark-text-color);--epr-hover-bg-color:var(--epr-dark-hover-bg-color);--epr-focus-bg-color:var(--epr-dark-focus-bg-color);--epr-search-input-bg-color:var(--epr-dark-search-input-bg-color);--epr-category-label-bg-color:var(--epr-dark-category-label-bg-color);--epr-picker-border-color:var(--epr-dark-picker-border-color);--epr-bg-color:var(--epr-dark-bg-color);--epr-search-input-bg-color-active:var(\n      --epr-dark-search-input-bg-color-active\n    );--epr-emoji-variation-indicator-color:var(\n      --epr-dark-emoji-variation-indicator-color\n    );--epr-category-icon-active-color:var(\n      --epr-dark-category-icon-active-color\n    );--epr-skin-tone-picker-menu-color:var(\n      --epr-dark-skin-tone-picker-menu-color\n    )}}.EmojiPickerReact.epr-dark-theme{--epr-dark:var(--epr-dark-dark);--epr-emoji-variation-picker-bg-color:var(\n    --epr-dark-emoji-variation-picker-bg-color\n  );--epr-highlight-color:var(--epr-dark-highlight-color);--epr-text-color:var(--epr-dark-text-color);--epr-hover-bg-color:var(--epr-dark-hover-bg-color);--epr-focus-bg-color:var(--epr-dark-focus-bg-color);--epr-search-input-bg-color:var(--epr-dark-search-input-bg-color);--epr-category-label-bg-color:var(--epr-dark-category-label-bg-color);--epr-picker-border-color:var(--epr-dark-picker-border-color);--epr-bg-color:var(--epr-dark-bg-color);--epr-search-input-bg-color-active:var(\n    --epr-dark-search-input-bg-color-active\n  );--epr-emoji-variation-indicator-color:var(\n    --epr-dark-emoji-variation-indicator-color\n  );--epr-category-icon-active-color:var(--epr-dark-category-icon-active-color);--epr-skin-tone-picker-menu-color:var(\n    --epr-dark-skin-tone-picker-menu-color\n  )}.EmojiPickerReact{background-color:var(--epr-bg-color);overflow:hidden}.EmojiPickerReact .epr-hidden,.EmojiPickerReact.epr-search-active .epr-hidden-on-search,.EmojiPickerReact:not(.epr-search-active) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:not(:-moz-placeholder-shown)) .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:not(:placeholder-shown)) .epr-hidden-on-search{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:-moz-placeholder-shown) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}aside.EmojiPickerReact.epr-main:has(input:placeholder-shown) .epr-visible-on-search-only{display:none!important;opacity:0!important;pointer-events:none!important;visibility:hidden!important}.EmojiPickerReact *{box-sizing:border-box;font-family:sans-serif}.EmojiPickerReact button.epr-btn{background:none;border:0;cursor:pointer;outline:none}";
 styleInject(css_248z$c);
 
 function EmojiPicker(props) {