From 89982346ac650a3466f9507ed0d6abcbcbef3b07 Mon Sep 17 00:00:00 2001
From: huan-qiu <huan.qiu183@gmail.com>
Date: Sat, 14 Oct 2023 14:29:28 +1300
Subject: [PATCH 1/3] fix: make srr="full" render full items invisible
 initially

---
 src/Overflow.tsx | 34 +++++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/Overflow.tsx b/src/Overflow.tsx
index de6241b..23b1c68 100644
--- a/src/Overflow.tsx
+++ b/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}
           />
         );
       };

From 0c7a75517537cefc2f76ed7bba835ca92d3355bd Mon Sep 17 00:00:00 2001
From: huan-qiu <huan.qiu183@gmail.com>
Date: Sat, 14 Oct 2023 14:30:07 +1300
Subject: [PATCH 2/3] test: update snapshot of ssr test case

---
 tests/__snapshots__/ssr.spec.tsx.snap | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/__snapshots__/ssr.spec.tsx.snap b/tests/__snapshots__/ssr.spec.tsx.snap
index 494b349..e7cc6f9 100644
--- a/tests/__snapshots__/ssr.spec.tsx.snap
+++ b/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>

From 411fb3bee22d8a0f9e14b0b06c37f16ff1302b30 Mon Sep 17 00:00:00 2001
From: huan-qiu <huan.qiu183@gmail.com>
Date: Sat, 14 Oct 2023 14:49:53 +1300
Subject: [PATCH 3/3] fix: make changes of ssr full only affect code that set
 to be responsive

---
 src/Overflow.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/Overflow.tsx b/src/Overflow.tsx
index 23b1c68..5ace08b 100644
--- a/src/Overflow.tsx
+++ b/src/Overflow.tsx
@@ -302,7 +302,8 @@ function Overflow<ItemType = any>(
   // ================================ Render ================================
   const displayRest = restReady && !!omittedItems.length;
 
-  const isFullySSRAndFirstRender = fullySSR && containerWidth === null;
+  const isFullySSRResponsiveFirstRender =
+    fullySSR && shouldResponsive && containerWidth === null;
   const fullySSRFirstRenderStyle: React.CSSProperties = {
     maxWidth: 0,
     padding: 0,
@@ -311,7 +312,7 @@ function Overflow<ItemType = any>(
     overflowX: 'hidden',
   };
 
-  let suffixStyle: React.CSSProperties = isFullySSRAndFirstRender
+  let suffixStyle: React.CSSProperties = isFullySSRResponsiveFirstRender
     ? fullySSRFirstRenderStyle
     : {};
   if (suffixFixedStart !== null && shouldResponsive) {
@@ -327,7 +328,9 @@ function Overflow<ItemType = any>(
     responsive: shouldResponsive,
     component: itemComponent,
     invalidate,
-    style: isFullySSRAndFirstRender ? fullySSRFirstRenderStyle : undefined,
+    style: isFullySSRResponsiveFirstRender
+      ? fullySSRFirstRenderStyle
+      : undefined,
   };
 
   // >>>>> Choice render fun by `renderRawItem`
@@ -338,7 +341,7 @@ function Overflow<ItemType = any>(
         // 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 ||
+          ? isFullySSRResponsiveFirstRender ||
             (isIdxCheckPass && getItemWidth(index) > 0)
           : isIdxCheckPass;
         return (
@@ -363,7 +366,7 @@ function Overflow<ItemType = any>(
         // 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 ||
+          ? isFullySSRResponsiveFirstRender ||
             (isIdxCheckPass && getItemWidth(index) > 0)
           : isIdxCheckPass;
         return (