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,17 +15,20 @@ export type PanelProps = HTMLAttributes<HTMLDivElement> & {
 
 const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all');
 
-export function Panel({ position = 'top-left', children, className, style, ...rest }: PanelProps) {
-  const pointerEvents = useStore(selector);
-  const positionClasses = `${position}`.split('-');
+export const Panel = forwardRef<HTMLDivElement, PanelProps>(
+  ({ position = 'top-left', children, className, style, ...rest }, ref) => {
+    const pointerEvents = useStore(selector);
+    const positionClasses = `${position}`.split('-');
 
-  return (
-    <div
-      className={cc(['react-flow__panel', className, ...positionClasses])}
-      style={{ ...style, pointerEvents }}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-}
+    return (
+      <div
+        className={cc(['react-flow__panel', className, ...positionClasses])}
+        style={{ ...style, pointerEvents }}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);