From 02532fcdc5e8d600105c5cdb25883962223fb2dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20M=C3=B6ller?= <chrtze@gmail.com>
Date: Mon, 18 Nov 2024 14:56:58 +0100
Subject: [PATCH 1/3] fix(panel): forward ref to inner panel div

---
 packages/react/src/components/Panel/index.tsx | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/components/Panel/index.tsx b/packages/react/src/components/Panel/index.tsx
index eeb01a15..83b4a87b 100644
--- a/packages/react/src/components/Panel/index.tsx
+++ b/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>
+    );
+  }
+);

From 5f90acdab1f4748bb04f8b1ec67d569983684058 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christopher=20M=C3=B6ller?= <chrtze@gmail.com>
Date: Mon, 18 Nov 2024 15:40:10 +0100
Subject: [PATCH 2/3] chore(changeset): add

---
 .changeset/thick-fans-cheer.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/thick-fans-cheer.md

diff --git a/.changeset/thick-fans-cheer.md b/.changeset/thick-fans-cheer.md
new file mode 100644
index 00000000..da57aec5
--- /dev/null
+++ b/.changeset/thick-fans-cheer.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+forward ref to the inner div of the panel component

From 190e5ccc1c0733534d1498ae97a6d0100217db85 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 28 Nov 2024 15:55:15 +0100
Subject: [PATCH 3/3] adjusted wording of changeset

---
 .changeset/thick-fans-cheer.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/thick-fans-cheer.md b/.changeset/thick-fans-cheer.md
index da57aec5..af987d35 100644
--- a/.changeset/thick-fans-cheer.md
+++ b/.changeset/thick-fans-cheer.md
@@ -2,4 +2,4 @@
 '@xyflow/react': patch
 ---
 
-forward ref to the inner div of the panel component
+Forward ref of the div inside Panel components.