fix: make srr="full" render full items invisible initially

Author: huan-qiu

src/Overflow.tsx

@@ -302,7 +302,18 @@ function Overflow<ItemType = any>(
   // ================================ Render ================================
   const displayRest = restReady && !!omittedItems.length;
 
-  let suffixStyle: React.CSSProperties = {};
+  const isFullySSRAndFirstRender = fullySSR && containerWidth === null;
+  const fullySSRFirstRenderStyle: React.CSSProperties = {
+    maxWidth: 0,
+    padding: 0,
+    margin: 0,
+    borderWidth: 0,
+    overflowX: 'hidden',
+  };
+
+  let suffixStyle: React.CSSProperties = isFullySSRAndFirstRender
+    ? fullySSRFirstRenderStyle
+    : {};
   if (suffixFixedStart !== null && shouldResponsive) {
     suffixStyle = {
       position: 'absolute',
@@ -316,13 +327,20 @@ function Overflow<ItemType = any>(
     responsive: shouldResponsive,
     component: itemComponent,
     invalidate,
+    style: isFullySSRAndFirstRender ? 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
+          ? isFullySSRAndFirstRender ||
+            (isIdxCheckPass && getItemWidth(index) > 0)
+          : isIdxCheckPass;
         return (
           <OverflowContext.Provider
             key={key}
@@ -332,7 +350,7 @@ function Overflow<ItemType = any>(
               item,
               itemKey: key,
               registerSize,
-              display: index <= mergedDisplayCount,
+              display: shouldDisplay,
             }}
           >
             {renderRawItem(item, index)}
@@ -341,7 +359,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
+          ? isFullySSRAndFirstRender ||
+            (isIdxCheckPass && getItemWidth(index) > 0)
+          : isIdxCheckPass;
         return (
           <Item
             {...itemSharedProps}
@@ -351,7 +375,7 @@ function Overflow<ItemType = any>(
             renderItem={mergedRenderItem}
             itemKey={key}
             registerSize={registerSize}
-            display={index <= mergedDisplayCount}
+            display={shouldDisplay}
           />
         );
       };