emoji-picker-react 4.20.5 → 4.20.6

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

@@ -29691,50 +29691,61 @@ function EmojiList(_ref) {
   // native button role for activation semantics.
   // https://github.com/ealush/emoji-picker-react/issues/508
   // The list markup is kept for a backwards-compatible DOM structure;
-  // the grid role override is intentional (see below).
-  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
-  return createElement("ul", {
-    className: cx(styles$8.emojiList),
-    ref: EmojiListRef,
-    role: "grid"
-  }, createElement(MeasureEmoji, null), categories.map(function (categoryConfig) {
-    var category = categoryFromCategoryConfig(categoryConfig);
-    var currentOffset = topOffset;
-    var categoryHeight = categoryHeights[category];
-    if (categoryHeight) {
-      topOffset += categoryHeight + labelHeight;
-    }
-    return createElement(RenderCategory, {
-      key: category,
-      categoryEmojis: getEmojisByCategory(category),
-      categoryConfig: categoryConfig,
-      topOffset: currentOffset,
-      onHeightReady: function onHeightReady(height) {
-        if (categoryHeights[category] !== height) {
-          setCategoryHeights(function (prev) {
-            var _extends2;
-            return _extends({}, prev, (_extends2 = {}, _extends2[category] = height, _extends2));
-          });
-        }
-      },
-      scrollTop: scrollTop
-    });
-  }));
+  // the grid role override is intentional.
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+    createElement("ul", {
+      className: cx(styles$8.emojiList),
+      ref: EmojiListRef,
+      role: "grid"
+    }, createElement(MeasureEmoji, null), categories.map(function (categoryConfig, index) {
+      var category = categoryFromCategoryConfig(categoryConfig);
+      var currentOffset = topOffset;
+      var categoryHeight = categoryHeights[category];
+      if (categoryHeight) {
+        topOffset += categoryHeight + labelHeight;
+      }
+      return createElement(RenderCategory, {
+        key: category,
+        categoryEmojis: getEmojisByCategory(category),
+        categoryConfig: categoryConfig,
+        topOffset: currentOffset,
+        isFirstCategory: index === 0,
+        onHeightReady: function onHeightReady(height) {
+          if (categoryHeights[category] !== height) {
+            setCategoryHeights(function (prev) {
+              var _extends2;
+              return _extends({}, prev, (_extends2 = {}, _extends2[category] = height, _extends2));
+            });
+          }
+        },
+        scrollTop: scrollTop
+      });
+    }))
+  );
 }
 function RenderCategory(_ref2) {
   var categoryEmojis = _ref2.categoryEmojis,
     categoryConfig = _ref2.categoryConfig,
     topOffset = _ref2.topOffset,
     onHeightReady = _ref2.onHeightReady,
-    scrollTop = _ref2.scrollTop;
+    scrollTop = _ref2.scrollTop,
+    isFirstCategory = _ref2.isFirstCategory;
   var _useVisibleCategories = useVisibleCategoriesState(),
     visibleCategories = _useVisibleCategories[0];
+  // The observer is the only writer of visibleCategories. When it never
+  // fires (zero-height container at mount, hidden modal), no category
+  // would ever render. The first category paints optimistically to break
+  // the deadlock; the observer takes over from there.
+  // https://github.com/ealush/emoji-picker-react/issues/469
+  // https://github.com/ealush/emoji-picker-react/issues/475
+  var isCategoryVisible = isFirstCategory || visibleCategories.includes(categoryConfig.category);
   var _useEmojiVirtualizati = useEmojiVirtualization({
       categoryEmojis: categoryEmojis,
       topOffset: topOffset,
       onHeightReady: onHeightReady,
       scrollTop: scrollTop,
-      isCategoryVisible: visibleCategories.includes(categoryConfig.category)
+      isCategoryVisible: isCategoryVisible
     }),
     virtualizedCounter = _useEmojiVirtualizati.virtualizedCounter,
     emojis = _useEmojiVirtualizati.emojis,