From b65140f50b23ac964c67c696f395f584e00d2a45 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 30 Aug 2022 16:42:06 +0200
Subject: [PATCH] Update remaining `useAnchorRef` usages, switch to the
 `anchor` prop

---
 packages/components/src/autocomplete/autocompleter-ui.js | 4 ++--
 packages/format-library/src/image/index.js               | 4 ++--
 packages/format-library/src/link/inline.js               | 6 +++---
 packages/format-library/src/text-color/inline.js         | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/autocomplete/autocompleter-ui.js b/packages/components/src/autocomplete/autocompleter-ui.js
index c909aa6a4a5783..c25dcfb4030189 100644
--- a/packages/components/src/autocomplete/autocompleter-ui.js
+++ b/packages/components/src/autocomplete/autocompleter-ui.js
@@ -35,7 +35,7 @@ export function getAutoCompleterUI( autocompleter ) {
 		contentRef,
 	} ) {
 		const [ items ] = useItems( filterValue );
-		const anchorRef = useAnchorRef( { ref: contentRef, value } );
+		const popoverAnchor = useAnchorRef( { ref: contentRef, value } );
 
 		useLayoutEffect( () => {
 			onChangeOptions( items );
@@ -54,7 +54,7 @@ export function getAutoCompleterUI( autocompleter ) {
 				onClose={ onReset }
 				position="top right"
 				className="components-autocomplete__popover"
-				anchorRef={ anchorRef }
+				anchor={ popoverAnchor }
 			>
 				<div
 					id={ listBoxId }
diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js
index 3c1c2a08e62665..1969b5c5706042 100644
--- a/packages/format-library/src/image/index.js
+++ b/packages/format-library/src/image/index.js
@@ -36,7 +36,7 @@ export const image = {
 function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 	const { style } = activeObjectAttributes;
 	const [ width, setWidth ] = useState( style?.replace( /\D/g, '' ) );
-	const anchorRef = useAnchorRef( {
+	const popoverAnchor = useAnchorRef( {
 		ref: contentRef,
 		value,
 		settings: image,
@@ -46,7 +46,7 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
 		<Popover
 			position="bottom center"
 			focusOnMount={ false }
-			anchorRef={ anchorRef }
+			anchor={ popoverAnchor }
 			className="block-editor-format-toolbar__image-popover"
 		>
 			<form
diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js
index b2998636010533..178981b0eb8cac 100644
--- a/packages/format-library/src/link/inline.js
+++ b/packages/format-library/src/link/inline.js
@@ -183,13 +183,13 @@ function InlineLinkUI( {
 		}
 	}
 
-	const anchorRef = useAnchorRef( { ref: contentRef, value, settings } );
+	const popoverAnchor = useAnchorRef( { ref: contentRef, value, settings } );
 
 	// Generate a string based key that is unique to this anchor reference.
 	// This is used to force re-mount the LinkControl component to avoid
 	// potential stale state bugs caused by the component not being remounted
 	// See https://github.com/WordPress/gutenberg/pull/34742.
-	const forceRemountKey = useLinkInstanceKey( anchorRef );
+	const forceRemountKey = useLinkInstanceKey( popoverAnchor );
 
 	// The focusOnMount prop shouldn't evolve during render of a Popover
 	// otherwise it causes a render of the content.
@@ -223,7 +223,7 @@ function InlineLinkUI( {
 
 	return (
 		<Popover
-			anchorRef={ anchorRef }
+			anchor={ popoverAnchor }
 			focusOnMount={ focusOnMount.current }
 			onClose={ stopAddingLink }
 			position="bottom center"
diff --git a/packages/format-library/src/text-color/inline.js b/packages/format-library/src/text-color/inline.js
index 03a80fb18e6871..62d8d7d55c2a77 100644
--- a/packages/format-library/src/text-color/inline.js
+++ b/packages/format-library/src/text-color/inline.js
@@ -142,14 +142,14 @@ export default function InlineColorUI( {
 	onClose,
 	contentRef,
 } ) {
-	/* 
+	/*
 	 As you change the text color by typing a HEX value into a field,
 	 the return value of document.getSelection jumps to the field you're editing,
 	 not the highlighted text. Given that useAnchorRef uses document.getSelection,
 	 it will return null, since it can't find the <mark> element within the HEX input.
 	 This caches the last truthy value of the selection anchor reference.
 	 */
-	const anchorRef = useCachedTruthy(
+	const popoverAnchor = useCachedTruthy(
 		useAnchorRef( { ref: contentRef, value, settings } )
 	);
 
@@ -157,7 +157,7 @@ export default function InlineColorUI( {
 		<Popover
 			onClose={ onClose }
 			className="components-inline-color-popover"
-			anchorRef={ anchorRef }
+			anchor={ popoverAnchor }
 		>
 			<TabPanel
 				tabs={ [