From 7bfe851ff9456d9479b280bf699ed191a04296b5 Mon Sep 17 00:00:00 2001
From: Levente Balogh <balogh.levente.hu@gmail.com>
Date: Wed, 30 Oct 2024 09:24:47 +0100
Subject: [PATCH 1/2] docs: fix typo

---
 docusaurus/docs/visualizations.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docusaurus/docs/visualizations.md b/docusaurus/docs/visualizations.md
index 3cfe921e4..a439ff208 100644
--- a/docusaurus/docs/visualizations.md
+++ b/docusaurus/docs/visualizations.md
@@ -44,7 +44,7 @@ in a typical dashboard panel when you view the **JSON** tab in the panel inspect
 
 ## Menu
 
-The menu property of type VizPanelMenu is optionl, when set it defines a menu in the top right of the panel. The menu object is only activated when the dropdown menu itself is rendered. So the best way to add dynamic menu actions and links is by adding them in a [behavior](./advanced-behaviors.md) attached to the menu.
+The menu property of type VizPanelMenu is optional, when set it defines a menu in the top right of the panel. The menu object is only activated when the dropdown menu itself is rendered. So the best way to add dynamic menu actions and links is by adding them in a [behavior](./advanced-behaviors.md) attached to the menu.
 
 ```ts
 new VizPanel({

From 8f49fc4386b03a65bf1d8fe42b0a2937e8b30a0f Mon Sep 17 00:00:00 2001
From: Levente Balogh <balogh.levente.hu@gmail.com>
Date: Wed, 30 Oct 2024 09:24:56 +0100
Subject: [PATCH 2/2] feat(VizPanelMenu): add support for a component panel
 menu item

---
 packages/scenes/src/components/VizPanel/VizPanelMenu.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/scenes/src/components/VizPanel/VizPanelMenu.tsx b/packages/scenes/src/components/VizPanel/VizPanelMenu.tsx
index 7899c02dc..c10df3bcb 100644
--- a/packages/scenes/src/components/VizPanel/VizPanelMenu.tsx
+++ b/packages/scenes/src/components/VizPanel/VizPanelMenu.tsx
@@ -39,6 +39,13 @@ function VizPanelMenuRenderer({ model }: SceneComponentProps<VizPanelMenu>) {
 
   const renderItems = (items: PanelMenuItem[]) => {
     return items.map((item) => {
+      // @ts-ignore
+      const Component: () => React.ReactElement | null = item.component;
+
+      if (Component) {
+        return <Component key={item.text} />;
+      }
+
       switch (item.type) {
         case 'divider':
           return <Menu.Divider key={item.text} />;