Merge 411fb3b into 0553047

Author: huan-qiu

src/Overflow.tsx

@@ -302,7 +302,19 @@ function Overflow<ItemType = any>(
   // ================================ Render ================================
   const displayRest = restReady && !!omittedItems.length;
 
-  let suffixStyle: React.CSSProperties = {};
+  const isFullySSRResponsiveFirstRender =
+    fullySSR && shouldResponsive && containerWidth === null;
+  const fullySSRFirstRenderStyle: React.CSSProperties = {
+    maxWidth: 0,
+    padding: 0,
+    margin: 0,
+    borderWidth: 0,
+    overflowX: 'hidden',
+  };
+
+  let suffixStyle: React.CSSProperties = isFullySSRResponsiveFirstRender
+    ? fullySSRFirstRenderStyle
+    : {};
   if (suffixFixedStart !== null && shouldResponsive) {
     suffixStyle = {
       position: 'absolute',
@@ -316,13 +328,22 @@ function Overflow<ItemType = any>(
     responsive: shouldResponsive,
     component: itemComponent,
     invalidate,
+    style: isFullySSRResponsiveFirstRender
+      ? fullySSRFirstRenderStyle
+      : undefined,
   };
 
   // >>>>> Choice render fun by `renderRawItem`
   const internalRenderItemNode = renderRawItem
     ? (item: ItemType, index: number) => {
         const key = getKey(item, index);
-
+        const isIdxCheckPass = index <= mergedDisplayCount;
+        // in `ssr="full"` case, item's `display` will be set to `true` when either condition is met:
+        // 1) at initial render; 2) its corresponding width is valid and pass the index check
+        const shouldDisplay = fullySSR
+          ? isFullySSRResponsiveFirstRender ||
+            (isIdxCheckPass && getItemWidth(index) > 0)
+          : isIdxCheckPass;
         return (
           <OverflowContext.Provider
             key={key}
@@ -332,7 +353,7 @@ function Overflow<ItemType = any>(
               item,
               itemKey: key,
               registerSize,
-              display: index <= mergedDisplayCount,
+              display: shouldDisplay,
             }}
           >
             {renderRawItem(item, index)}
@@ -341,7 +362,13 @@ function Overflow<ItemType = any>(
       }
     : (item: ItemType, index: number) => {
         const key = getKey(item, index);
-
+        const isIdxCheckPass = index <= mergedDisplayCount;
+        // in `ssr="full"` case, item's `display` will be set to `true` when either condition is met:
+        // 1) at initial render; 2) its corresponding width is valid and pass the index check
+        const shouldDisplay = fullySSR
+          ? isFullySSRResponsiveFirstRender ||
+            (isIdxCheckPass && getItemWidth(index) > 0)
+          : isIdxCheckPass;
         return (
           <Item
             {...itemSharedProps}
@@ -351,7 +378,7 @@ function Overflow<ItemType = any>(
             renderItem={mergedRenderItem}
             itemKey={key}
             registerSize={registerSize}
-            display={index <= mergedDisplayCount}
+            display={shouldDisplay}
           />
         );
       };

tests/__snapshots__/ssr.spec.tsx.snap

@@ -6,20 +6,20 @@ exports[`Overflow.SSR basic 1`] = `
 >
   <div
     class="rc-overflow-item"
-    style="opacity:1;order:0"
+    style="opacity:1;order:0;max-width:0;padding:0;margin:0;border-width:0;overflow-x:hidden"
   >
     Label 0
   </div>
   <div
     class="rc-overflow-item"
-    style="opacity:1;order:1"
+    style="opacity:1;order:1;max-width:0;padding:0;margin:0;border-width:0;overflow-x:hidden"
   >
     Label 1
   </div>
   <div
     aria-hidden="true"
     class="rc-overflow-item rc-overflow-item-rest"
-    style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute"
+    style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none;position:absolute;max-width:0;padding:0;margin:0;border-width:0;overflow-x:hidden"
   >
     + 0 ...
   </div>