From e8b0fc4925ecb51a4b2caf1ba252afb92d290265 Mon Sep 17 00:00:00 2001
From: kiner-tang <1127031143@qq.com>
Date: Wed, 2 Oct 2024 17:46:22 +0800
Subject: [PATCH] fix(Splitter): fix the issue about Splitter had unexpected
 gaps in Flex (#51096)

---
 components/splitter/Splitter.tsx | 103 +++++++++++++++----------------
 1 file changed, 50 insertions(+), 53 deletions(-)

diff --git a/components/splitter/Splitter.tsx b/components/splitter/Splitter.tsx
index 42fcb83f46..c2bc04755b 100644
--- a/components/splitter/Splitter.tsx
+++ b/components/splitter/Splitter.tsx
@@ -146,65 +146,62 @@ const Splitter: React.FC<React.PropsWithChildren<SplitterProps>> = (props) => {
   const mergedStyle: React.CSSProperties = { ...splitter?.style, ...style };
 
   return wrapCSSVar(
-    <>
-      <ResizeObserver onResize={onContainerResize}>
-        <div style={mergedStyle} className={containerClassName}>
-          {items.map((item, idx) => {
-            // Panel
-            const panel = <InternalPanel {...item} prefixCls={prefixCls} size={itemPxSizes[idx]} />;
+    <ResizeObserver onResize={onContainerResize}>
+      <div style={mergedStyle} className={containerClassName}>
+        {items.map((item, idx) => {
+          // Panel
+          const panel = <InternalPanel {...item} prefixCls={prefixCls} size={itemPxSizes[idx]} />;
 
-            // Split Bar
-            let splitBar: React.ReactElement | null = null;
+          // Split Bar
+          let splitBar: React.ReactElement | null = null;
 
-            const resizableInfo = resizableInfos[idx];
-            if (resizableInfo) {
-              const ariaMinStart = (stackSizes[idx - 1] || 0) + itemPtgMinSizes[idx];
-              const ariaMinEnd = (stackSizes[idx + 1] || 100) - itemPtgMaxSizes[idx + 1];
+          const resizableInfo = resizableInfos[idx];
+          if (resizableInfo) {
+            const ariaMinStart = (stackSizes[idx - 1] || 0) + itemPtgMinSizes[idx];
+            const ariaMinEnd = (stackSizes[idx + 1] || 100) - itemPtgMaxSizes[idx + 1];
 
-              const ariaMaxStart = (stackSizes[idx - 1] || 0) + itemPtgMaxSizes[idx];
-              const ariaMaxEnd = (stackSizes[idx + 1] || 100) - itemPtgMinSizes[idx + 1];
+            const ariaMaxStart = (stackSizes[idx - 1] || 0) + itemPtgMaxSizes[idx];
+            const ariaMaxEnd = (stackSizes[idx + 1] || 100) - itemPtgMinSizes[idx + 1];
 
-              splitBar = (
-                <SplitBar
-                  index={idx}
-                  active={movingIndex === idx}
-                  prefixCls={prefixCls}
-                  vertical={isVertical}
-                  resizable={resizableInfo.resizable}
-                  ariaNow={stackSizes[idx] * 100}
-                  ariaMin={Math.max(ariaMinStart, ariaMinEnd) * 100}
-                  ariaMax={Math.min(ariaMaxStart, ariaMaxEnd) * 100}
-                  startCollapsible={resizableInfo.startCollapsible}
-                  endCollapsible={resizableInfo.endCollapsible}
-                  onOffsetStart={onInternalResizeStart}
-                  onOffsetUpdate={(index, offsetX, offsetY) => {
-                    let offset = isVertical ? offsetY : offsetX;
-                    if (reverse) {
-                      offset = -offset;
-                    }
-                    onInternalResizeUpdate(index, offset);
-                  }}
-                  onOffsetEnd={onInternalResizeEnd}
-                  onCollapse={onInternalCollapse}
-                />
-              );
-            }
-
-            return (
-              <React.Fragment key={`split-panel-${idx}`}>
-                {panel}
-                {splitBar}
-              </React.Fragment>
+            splitBar = (
+              <SplitBar
+                index={idx}
+                active={movingIndex === idx}
+                prefixCls={prefixCls}
+                vertical={isVertical}
+                resizable={resizableInfo.resizable}
+                ariaNow={stackSizes[idx] * 100}
+                ariaMin={Math.max(ariaMinStart, ariaMinEnd) * 100}
+                ariaMax={Math.min(ariaMaxStart, ariaMaxEnd) * 100}
+                startCollapsible={resizableInfo.startCollapsible}
+                endCollapsible={resizableInfo.endCollapsible}
+                onOffsetStart={onInternalResizeStart}
+                onOffsetUpdate={(index, offsetX, offsetY) => {
+                  let offset = isVertical ? offsetY : offsetX;
+                  if (reverse) {
+                    offset = -offset;
+                  }
+                  onInternalResizeUpdate(index, offset);
+                }}
+                onOffsetEnd={onInternalResizeEnd}
+                onCollapse={onInternalCollapse}
+              />
             );
-          })}
-        </div>
-      </ResizeObserver>
+          }
 
-      {/* Fake mask for cursor */}
-      {typeof movingIndex === 'number' && (
-        <div aria-hidden className={classNames(maskCls, `${maskCls}-${layout}`)} />
-      )}
-    </>,
+          return (
+            <React.Fragment key={`split-panel-${idx}`}>
+              {panel}
+              {splitBar}
+            </React.Fragment>
+          );
+        })}
+        {/* Fake mask for cursor */}
+        {typeof movingIndex === 'number' && (
+          <div aria-hidden className={classNames(maskCls, `${maskCls}-${layout}`)} />
+        )}
+      </div>
+    </ResizeObserver>,
   );
 };