SlotFill: updateSlot should check the ref

WordPress · Nov 7, 2024 · 7122b9d · 7122b9d
1 parent 0d43fd4
commit 7122b9d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx b/packages/components/src/slot-fill/bubbles-virtually/slot-fill-provider.tsx
@@ -43,13 +43,18 @@ function createSlotRegistry(): SlotFillBubblesVirtuallyContext {
 
 	const updateSlot: SlotFillBubblesVirtuallyContext[ 'updateSlot' ] = (
 		name,
+		ref,
 		fillProps
 	) => {
 		const slot = slots.get( name );
 		if ( ! slot ) {
 			return;
 		}
 
+		if ( slot.ref !== ref ) {
+			return;
+		}
+
 		if ( isShallowEqual( slot.fillProps, fillProps ) ) {
 			return;
 		}

diff --git a/packages/components/src/slot-fill/bubbles-virtually/slot.tsx b/packages/components/src/slot-fill/bubbles-virtually/slot.tsx
@@ -58,7 +58,7 @@ function Slot(
 	// fillProps may be an update that interacts with the layout, so we
 	// useLayoutEffect.
 	useLayoutEffect( () => {
-		registry.updateSlot( name, fillProps );
+		registry.updateSlot( name, ref, fillProps );
 	} );
 
 	return (

diff --git a/packages/components/src/slot-fill/bubbles-virtually/use-slot.ts b/packages/components/src/slot-fill/bubbles-virtually/use-slot.ts
@@ -21,8 +21,10 @@ export default function useSlot( name: SlotKey ) {
 
 	const api = useMemo(
 		() => ( {
-			updateSlot: ( fillProps: FillProps ) =>
-				registry.updateSlot( name, fillProps ),
+			updateSlot: (
+				ref: SlotFillBubblesVirtuallySlotRef,
+				fillProps: FillProps
+			) => registry.updateSlot( name, ref, fillProps ),
 			unregisterSlot: ( ref: SlotFillBubblesVirtuallySlotRef ) =>
 				registry.unregisterSlot( name, ref ),
 			registerFill: ( ref: SlotFillBubblesVirtuallyFillRef ) =>

diff --git a/packages/components/src/slot-fill/types.ts b/packages/components/src/slot-fill/types.ts
@@ -131,7 +131,11 @@ export type SlotFillBubblesVirtuallyContext = {
 		name: SlotKey,
 		ref: SlotFillBubblesVirtuallySlotRef
 	) => void;
-	updateSlot: ( name: SlotKey, fillProps: FillProps ) => void;
+	updateSlot: (
+		name: SlotKey,
+		ref: SlotFillBubblesVirtuallySlotRef,
+		fillProps: FillProps
+	) => void;
 	registerFill: (
 		name: SlotKey,
 		ref: SlotFillBubblesVirtuallyFillRef