implemented new fitView logic

packages/react/src/container/ReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import { ForwardedRef, type CSSProperties } from 'react';
+import { ForwardedRef, useCallback, type CSSProperties } from 'react';
 import cc from 'classcat';
 import { ConnectionLineType, PanOnScrollMode, SelectionMode, infiniteExtent, isMacOs } from '@xyflow/system';
 
@@ -144,6 +144,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
     height,
     colorMode = 'light',
     debug,
+    onScroll,
     ...rest
   }: ReactFlowProps<NodeType, EdgeType>,
   ref: ForwardedRef<HTMLDivElement>
@@ -151,10 +152,20 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
   const rfId = id || '1';
   const colorModeClassName = useColorModeClass(colorMode);
 
+  // Undo scroll events, preventing viewport from shifting when nodes outside of it are focused
+  const wrapperOnScroll = useCallback(
+    (e: React.UIEvent<HTMLDivElement>) => {
+      e.currentTarget.scrollTo({ top: 0, left: 0, behavior: 'instant' });
+      onScroll?.(e);
+    },
+    [onScroll]
+  );
+
   return (
     <div
       data-testid="rf__wrapper"
       {...rest}
+      onScroll={wrapperOnScroll}
       style={{ ...style, ...wrapperStyle }}
       ref={ref}
       className={cc(['react-flow', className, colorModeClassName])}
@@ -292,7 +303,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
           paneClickDistance={paneClickDistance}
           debug={debug}
         />
-        <SelectionListener onSelectionChange={onSelectionChange} />
+        <SelectionListener<NodeType, EdgeType> onSelectionChange={onSelectionChange} />
         {children}
         <Attribution proOptions={proOptions} position={attributionPosition} />
         <A11yDescriptions rfId={rfId} disableKeyboardA11y={disableKeyboardA11y} />
@@ -301,4 +312,24 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
   );
 }
 
+/**
+ * The `<ReactFlow />` component is the heart of your React Flow application.
+ * It renders your nodes and edges and handles user interaction
+ *
+ * @public
+ *
+ * @example
+ * ```tsx
+ *import { ReactFlow } from '@xyflow/react'
+ *
+ *export default function Flow() {
+ *  return (<ReactFlow
+ *    nodes={...}
+ *    edges={...}
+ *    onNodesChange={...}
+ *    ...
+ *  />);
+ *}
+ *```
+ */
 export default fixedForwardRef(ReactFlow);