From 7b901f9addeb72aa6dc153dee7bf120fc13d932a Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 16 Aug 2021 15:28:17 +1000
Subject: [PATCH] Add tools panel item deregistration (#34085)

---
 .../src/tools-panel/tools-panel-item/hook.js           |  8 +++++++-
 .../components/src/tools-panel/tools-panel/hook.js     | 10 +++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.js b/packages/components/src/tools-panel/tools-panel-item/hook.js
index fe9050ab91db9..1847f172ab790 100644
--- a/packages/components/src/tools-panel/tools-panel-item/hook.js
+++ b/packages/components/src/tools-panel/tools-panel-item/hook.js
@@ -28,7 +28,11 @@ export function useToolsPanelItem( props ) {
 		return cx( styles.ToolsPanelItem, className );
 	} );
 
-	const { menuItems, registerPanelItem } = useToolsPanelContext();
+	const {
+		menuItems,
+		registerPanelItem,
+		deregisterPanelItem,
+	} = useToolsPanelContext();
 
 	// Registering the panel item allows the panel to include it in its
 	// automatically generated menu and determine its initial checked status.
@@ -38,6 +42,8 @@ export function useToolsPanelItem( props ) {
 			isShownByDefault,
 			label,
 		} );
+
+		return () => deregisterPanelItem( label );
 	}, [] );
 
 	const isValueSet = hasValue();
diff --git a/packages/components/src/tools-panel/tools-panel/hook.js b/packages/components/src/tools-panel/tools-panel/hook.js
index 898d1c5e04333..f64039bb49253 100644
--- a/packages/components/src/tools-panel/tools-panel/hook.js
+++ b/packages/components/src/tools-panel/tools-panel/hook.js
@@ -28,6 +28,14 @@ export function useToolsPanel( props ) {
 		setPanelItems( ( items ) => [ ...items, item ] );
 	};
 
+	// Panels need to deregister on unmount to avoid orphans in menu state.
+	// This is an issue when panel items are being injected via SlotFills.
+	const deregisterPanelItem = ( label ) => {
+		setPanelItems( ( items ) =>
+			items.filter( ( item ) => item.label !== label )
+		);
+	};
+
 	// Manage and share display state of menu items representing child controls.
 	const [ menuItems, setMenuItems ] = useState( {} );
 
@@ -67,7 +75,7 @@ export function useToolsPanel( props ) {
 		setMenuItems( resetMenuItems );
 	};
 
-	const panelContext = { menuItems, registerPanelItem };
+	const panelContext = { menuItems, registerPanelItem, deregisterPanelItem };
 
 	return {
 		...otherProps,