chore: keep node even no need responsive (#22)

Author: zombieJ

src/Item.tsx

@@ -13,6 +13,12 @@ export interface ItemProps<ItemType> extends React.HTMLAttributes<any> {
   style?: React.CSSProperties;
   renderItem?: (item: ItemType) => React.ReactNode;
   responsive?: boolean;
+  // https://github.com/ant-design/ant-design/issues/35475
+  /**
+   * @private To make node structure stable. We need keep wrap with ResizeObserver.
+   * But disable it when it's no need to real measure.
+   */
+  responsiveDisabled?: boolean;
   itemKey?: React.Key;
   registerSize: (key: React.Key, width: number | null) => void;
   children?: React.ReactNode;
@@ -32,6 +38,7 @@ function InternalItem<ItemType>(
     item,
     renderItem,
     responsive,
+    responsiveDisabled,
     registerSize,
     itemKey,
     className,
@@ -99,6 +106,7 @@ function InternalItem<ItemType>(
         onResize={({ offsetWidth }) => {
           internalRegisterSize(offsetWidth);
         }}
+        disabled={responsiveDisabled}
       >
         {itemNode}
       </ResizeObserver>

src/Overflow.tsx

@@ -123,19 +123,21 @@ function Overflow<ItemType = any>(
   const mergedRestWidth = Math.max(prevRestWidth, restWidth);
 
   // ================================= Data =================================
-  const isResponsive = data.length && maxCount === RESPONSIVE;
+  const isResponsive = maxCount === RESPONSIVE;
+  const shouldResponsive = data.length && isResponsive;
   const invalidate = maxCount === INVALIDATE;
 
   /**
    * When is `responsive`, we will always render rest node to get the real width of it for calculation
    */
   const showRest =
-    isResponsive || (typeof maxCount === 'number' && data.length > maxCount);
+    shouldResponsive ||
+    (typeof maxCount === 'number' && data.length > maxCount);
 
   const mergedData = useMemo(() => {
     let items = data;
 
-    if (isResponsive) {
+    if (shouldResponsive) {
       if (containerWidth === null && fullySSR) {
         items = data;
       } else {
@@ -149,14 +151,14 @@ function Overflow<ItemType = any>(
     }
 
     return items;
-  }, [data, itemWidth, containerWidth, maxCount, isResponsive]);
+  }, [data, itemWidth, containerWidth, maxCount, shouldResponsive]);
 
   const omittedItems = useMemo(() => {
-    if (isResponsive) {
+    if (shouldResponsive) {
       return data.slice(mergedDisplayCount + 1);
     }
     return data.slice(mergedData.length);
-  }, [data, mergedData, isResponsive, mergedDisplayCount]);
+  }, [data, mergedData, shouldResponsive, mergedDisplayCount]);
 
   // ================================= Item =================================
   const getKey = useCallback(
@@ -284,7 +286,7 @@ function Overflow<ItemType = any>(
   const displayRest = restReady && !!omittedItems.length;
 
   let suffixStyle: React.CSSProperties = {};
-  if (suffixFixedStart !== null && isResponsive) {
+  if (suffixFixedStart !== null && shouldResponsive) {
     suffixStyle = {
       position: 'absolute',
       left: suffixFixedStart,
@@ -294,7 +296,7 @@ function Overflow<ItemType = any>(
 
   const itemSharedProps = {
     prefixCls: itemPrefixCls,
-    responsive: isResponsive,
+    responsive: shouldResponsive,
     component: itemComponent,
     invalidate,
   };
@@ -389,6 +391,8 @@ function Overflow<ItemType = any>(
       {suffix && (
         <Item
           {...itemSharedProps}
+          responsive={isResponsive}
+          responsiveDisabled={!shouldResponsive}
           order={mergedDisplayCount}
           className={`${itemPrefixCls}-suffix`}
           registerSize={registerSuffixSize}
@@ -403,7 +407,7 @@ function Overflow<ItemType = any>(
 
   if (isResponsive) {
     overflowNode = (
-      <ResizeObserver onResize={onOverflowResize}>
+      <ResizeObserver onResize={onOverflowResize} disabled={!shouldResponsive}>
         {overflowNode}
       </ResizeObserver>
     );

src/RawItem.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import Item from './Item';
-import { ComponentType, OverflowContext } from './Overflow';
+import { OverflowContext } from './Overflow';
+import type { ComponentType } from './Overflow';
 
 export interface RawItemProps extends React.HTMLAttributes<any> {
   component?: ComponentType;