Merge pull request #4826 from xyflow/fix/panel-ref

fix(panel): forward ref to inner panel div

.changeset/thick-fans-cheer.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+Forward ref of the div inside Panel components.

packages/react/src/components/Panel/index.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 import cc from 'classcat';
 import type { PanelPosition } from '@xyflow/system';
 
@@ -15,7 +15,8 @@ export type PanelProps = HTMLAttributes<HTMLDivElement> & {
 
 const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all');
 
-export function Panel({ position = 'top-left', children, className, style, ...rest }: PanelProps) {
+export const Panel = forwardRef<HTMLDivElement, PanelProps>(
+  ({ position = 'top-left', children, className, style, ...rest }, ref) => {
     const pointerEvents = useStore(selector);
     const positionClasses = `${position}`.split('-');
 
@@ -23,9 +24,11 @@ export function Panel({ position = 'top-left', children, className, style, ...re
       <div
         className={cc(['react-flow__panel', className, ...positionClasses])}
         style={{ ...style, pointerEvents }}
+        ref={ref}
         {...rest}
       >
         {children}
       </div>
     );
   }
+);