@wordpress/components 21.0.0 → 21.0.1

package/build-types/popover/stories/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/popover/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AActE,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAkB7B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,OAAO,CAmBxC,CAAC;AAEF,eAAe,IAAI,CAAC;AAyBpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,OAAO,CAiCnD,CAAC;AAYF,eAAO,MAAM,aAAa,EAAE,cAAc,CAAE,OAAO,OAAO,CA0BzD,CAAC;AAsBF,eAAO,MAAM,aAAa,EAAE,cAAc,CAAE,OAAO,OAAO,CA8CzD,CAAC;AAMF,eAAO,MAAM,qBAAqB,EAAE,cAAc,CAAE,OAAO,OAAO,CAgDjE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/popover/stories/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AActE,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;AAkB7B,QAAA,MAAM,IAAI,EAAE,aAAa,CAAE,OAAO,OAAO,CAoBxC,CAAC;AAEF,eAAe,IAAI,CAAC;AAyBpB,eAAO,MAAM,OAAO,EAAE,cAAc,CAAE,OAAO,OAAO,CAiCnD,CAAC;AAYF,eAAO,MAAM,aAAa,EAAE,cAAc,CAAE,OAAO,OAAO,CA0BzD,CAAC;AAsBF,eAAO,MAAM,aAAa,EAAE,cAAc,CAAE,OAAO,OAAO,CA8CzD,CAAC;AAMF,eAAO,MAAM,qBAAqB,EAAE,cAAc,CAAE,OAAO,OAAO,CAgDjE,CAAC"}

package/build-types/popover/types.d.ts

@@ -18,6 +18,9 @@ export declare type PopoverAnchorRefTopBottom = {
     top: Element;
     bottom: Element;
 };
+export declare type VirtualElement = Pick<Element, 'getBoundingClientRect'> & {
+    ownerDocument?: Document;
+};
 export declare type PopoverProps = {
     /**
      * The name of the Slot in which the popover should be rendered. It should
@@ -27,16 +30,14 @@ export declare type PopoverProps = {
      */
     __unstableSlotName?: string;
     /**
-     * An object extending a `DOMRect` with an additional optional `ownerDocument`
-     * property, used to specify a fixed popover position.
-     */
-    anchorRect?: DomRectWithOwnerDocument;
-    /**
-     * Used to specify a fixed popover position. It can be an `Element`, a React
-     * reference to an `element`, an object with a `top` and a `bottom` properties
-     * (both pointing to elements), or a `range`.
+     * The element that should be used by the popover as its anchor. It can either
+     * be an `Element` or, alternatively, a `VirtualElement` — ie. an object with
+     * the `getBoundingClientRect()` and the `ownerDocument` properties defined.
+     *
+     * **The anchor element should be stored in local state** rather than a
+     * plain React ref to ensure reactive updating when it changes.
      */
-    anchorRef?: Element | PopoverAnchorRefReference | PopoverAnchorRefTopBottom | Range;
+    anchor?: Element | VirtualElement | null;
     /**
      * Whether the popover should animate when opening.
      *
@@ -81,11 +82,6 @@ export declare type PopoverProps = {
      * When not provided, the `onClose` callback will be called instead.
      */
     onFocusOutside?: (event: SyntheticEvent) => void;
-    /**
-     * A function returning the same value as the one expected by the `anchorRect`
-     * prop, used to specify a dynamic popover position.
-     */
-    getAnchorRect?: (fallbackReferenceElement: Element | null) => DomRectWithOwnerDocument;
     /**
      * Used to customize the header text shown when the popover is toggled to
      * fullscreen on mobile viewports (see the `expandOnMobile` prop).
@@ -150,6 +146,28 @@ export declare type PopoverProps = {
      * @deprecated
      */
     __unstableShift?: boolean;
+    /**
+     * An object extending a `DOMRect` with an additional optional `ownerDocument`
+     * property, used to specify a fixed popover position.
+     *
+     * @deprecated
+     */
+    anchorRect?: DomRectWithOwnerDocument;
+    /**
+     * Used to specify a fixed popover position. It can be an `Element`, a React
+     * reference to an `element`, an object with a `top` and a `bottom` properties
+     * (both pointing to elements), or a `range`.
+     *
+     * @deprecated
+     */
+    anchorRef?: Element | PopoverAnchorRefReference | PopoverAnchorRefTopBottom | Range;
+    /**
+     * A function returning the same value as the one expected by the `anchorRect`
+     * prop, used to specify a dynamic popover position.
+     *
+     * @deprecated
+     */
+    getAnchorRect?: (fallbackReferenceElement: Element | null) => DomRectWithOwnerDocument;
     /**
      * _Note: this prop is deprecated and has no effect on the component._
      *

package/build-types/popover/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/popover/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,aAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACjD,aAAK,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACjD,aAAK,cAAc,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE1D,aAAK,wBAAwB,GAAG,OAAO,GAAG;IACzC,aAAa,CAAC,EAAE,QAAQ,CAAC;CACzB,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IAClC,SAAS,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,oBAAY,yBAAyB,GAAG,gBAAgB,CACvD,OAAO,GAAG,IAAI,GAAG,SAAS,CAC1B,CAAC;AACF,oBAAY,yBAAyB,GAAG;IAAE,GAAG,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE,CAAC;AAE1E,oBAAY,YAAY,GAAG;IAC1B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC;;;;OAIG;IACH,SAAS,CAAC,EACP,OAAO,GACP,yBAAyB,GACzB,yBAAyB,GACzB,KAAK,CAAC;IACT;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC;IACxC;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,CAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;IACnD;;;OAGG;IACH,aAAa,CAAC,EAAE,CACf,wBAAwB,EAAE,OAAO,GAAG,IAAI,KACpC,wBAAwB,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EACN,GAAI,aAAc,IAAK,aAAc,EAAE,GACvC,GAAI,aAAc,IAAK,aAAc,IAAK,cAAe,EAAE,CAAC;IAC/D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAGhB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/popover/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,aAAK,aAAa,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACjD,aAAK,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AACjD,aAAK,cAAc,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE1D,aAAK,wBAAwB,GAAG,OAAO,GAAG;IACzC,aAAa,CAAC,EAAE,QAAQ,CAAC;CACzB,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IAClC,SAAS,EAAE,SAAS,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,oBAAY,yBAAyB,GAAG,gBAAgB,CACvD,OAAO,GAAG,IAAI,GAAG,SAAS,CAC1B,CAAC;AACF,oBAAY,yBAAyB,GAAG;IAAE,GAAG,EAAE,OAAO,CAAC;IAAC,MAAM,EAAE,OAAO,CAAA;CAAE,CAAC;AAE1E,oBAAY,cAAc,GAAG,IAAI,CAAE,OAAO,EAAE,uBAAuB,CAAE,GAAG;IACvE,aAAa,CAAC,EAAE,QAAQ,CAAC;CACzB,CAAC;AAEF,oBAAY,YAAY,GAAG;IAC1B;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAAC;IACzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC;IACxC;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,CAAE,KAAK,EAAE,cAAc,KAAM,IAAI,CAAC;IACnD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EACN,GAAI,aAAc,IAAK,aAAc,EAAE,GACvC,GAAI,aAAc,IAAK,aAAc,IAAK,cAAe,EAAE,CAAC;IAC/D;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAGhB;;;;;;OAMG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC;;;;;;OAMG;IACH,SAAS,CAAC,EACP,OAAO,GACP,yBAAyB,GACzB,yBAAyB,GACzB,KAAK,CAAC;IACT;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CACf,wBAAwB,EAAE,OAAO,GAAG,IAAI,KACpC,wBAAwB,CAAC;IAC9B;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC"}

package/build-types/popover/utils.d.ts

@@ -35,11 +35,11 @@ export declare const getFrameOffset: (document?: Document | undefined) => {
     x: number;
     y: number;
 } | undefined;
-export declare const getReferenceOwnerDocument: ({ anchorRef, anchorRect, getAnchorRect, fallbackReferenceElement, fallbackDocument, }: Pick<PopoverProps, "anchorRef" | "anchorRect" | "getAnchorRect"> & {
+export declare const getReferenceOwnerDocument: ({ anchor, anchorRef, anchorRect, getAnchorRect, fallbackReferenceElement, fallbackDocument, }: Pick<PopoverProps, "anchor" | "anchorRef" | "anchorRect" | "getAnchorRect"> & {
     fallbackReferenceElement: Element | null;
     fallbackDocument: Document;
 }) => Document;
-export declare const getReferenceElement: ({ anchorRef, anchorRect, getAnchorRect, fallbackReferenceElement, }: Pick<PopoverProps, "anchorRef" | "anchorRect" | "getAnchorRect"> & {
+export declare const getReferenceElement: ({ anchor, anchorRef, anchorRect, getAnchorRect, fallbackReferenceElement, }: Pick<PopoverProps, "anchor" | "anchorRef" | "anchorRect" | "getAnchorRect"> & {
     fallbackReferenceElement: Element | null;
 }) => ReferenceType | null;
 //# sourceMappingURL=utils.d.ts.map

package/build-types/popover/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/popover/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EAGZ,MAAM,SAAS,CAAC;AAEjB;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,aACrB,YAAa,YAAY,CAAE,UAAU,CAAE,CAAE,KACjD,YAAa,YAAY,CAAE,WAAW,CAAE,CAe1C,CAAC;AA2BF;;;;;;GAMG;AACH,eAAO,MAAM,+BAA+B,cAChC,YAAa,YAAY,CAAE,WAAW,CAAE,CAAE,KACnD,WAoBF,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,uCAExB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAO7B,CAAC;AAEF,eAAO,MAAM,yBAAyB;8BAOX,OAAO,GAAG,IAAI;sBACtB,QAAQ;MACtB,QAiCJ,CAAC;AAEF,eAAO,MAAM,mBAAmB;8BAML,OAAO,GAAG,IAAI;MACpC,aAAa,GAAG,IA6DpB,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/popover/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;GAEG;AACH,OAAO,KAAK,EACX,YAAY,EAGZ,MAAM,SAAS,CAAC;AAEjB;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,aACrB,YAAa,YAAY,CAAE,UAAU,CAAE,CAAE,KACjD,YAAa,YAAY,CAAE,WAAW,CAAE,CAe1C,CAAC;AA2BF;;;;;;GAMG;AACH,eAAO,MAAM,+BAA+B,cAChC,YAAa,YAAY,CAAE,WAAW,CAAE,CAAE,KACnD,WAoBF,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,uCAExB;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,SAO7B,CAAC;AAEF,eAAO,MAAM,yBAAyB;8BAWX,OAAO,GAAG,IAAI;sBACtB,QAAQ;MACtB,QAmCJ,CAAC;AAEF,eAAO,MAAM,mBAAmB;8BAUL,OAAO,GAAG,IAAI;MACpC,aAAa,GAAG,IA+DpB,CAAC"}

package/build-types/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.js"],"names":[],"mappings":"AAqBA;;;;GAIG;AACH,4BAFU,MAAM,CAEiB;;AAmFjC,0CAoKC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.js"],"names":[],"mappings":"AAoBA;;;;GAIG;AACH,4BAFU,MAAM,CAEiB;;AAmFjC,0CAyKC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "21.0.0",
+	"version": "21.0.1",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -39,10 +39,10 @@
 		"@floating-ui/react-dom": "^1.0.0",
 		"@use-gesture/react": "^10.2.6",
 		"@wordpress/a11y": "^3.17.0",
-		"@wordpress/compose": "^5.15.0",
+		"@wordpress/compose": "^5.15.1",
 		"@wordpress/date": "^4.17.0",
 		"@wordpress/deprecated": "^3.17.0",
-		"@wordpress/dom": "^3.17.0",
+		"@wordpress/dom": "^3.17.1",
 		"@wordpress/element": "^4.15.0",
 		"@wordpress/escape-html": "^2.17.0",
 		"@wordpress/hooks": "^3.17.0",
@@ -51,7 +51,7 @@
 		"@wordpress/is-shallow-equal": "^4.17.0",
 		"@wordpress/keycodes": "^3.17.0",
 		"@wordpress/primitives": "^3.15.0",
-		"@wordpress/rich-text": "^5.15.0",
+		"@wordpress/rich-text": "^5.15.1",
 		"@wordpress/warning": "^2.17.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0d732d4b184adcb28cc83087603e81b764390d4b"
+	"gitHead": "56ef3f5a754e44155ee79e827c7a1d0efc1ee5aa"
 }

package/src/autocomplete/autocompleter-ui.js

@@ -8,7 +8,7 @@ import { map } from 'lodash';
  * WordPress dependencies
  */
 import { useLayoutEffect } from '@wordpress/element';
-import { useAnchorRef } from '@wordpress/rich-text';
+import { useAnchor } from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -35,7 +35,10 @@ export function getAutoCompleterUI( autocompleter ) {
 		contentRef,
 	} ) {
 		const [ items ] = useItems( filterValue );
-		const anchorRef = useAnchorRef( { ref: contentRef, value } );
+		const popoverAnchor = useAnchor( {
+			editableContentElement: contentRef.current,
+			value,
+		} );
 
 		useLayoutEffect( () => {
 			onChangeOptions( items );
@@ -54,7 +57,7 @@ export function getAutoCompleterUI( autocompleter ) {
 				onClose={ onReset }
 				position="top right"
 				className="components-autocomplete__popover"
-				anchorRef={ anchorRef }
+				anchor={ popoverAnchor }
 			>
 				<div
 					id={ listBoxId }

package/src/border-box-control/border-box-control/component.tsx

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import type { ComponentProps } from 'react';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -24,7 +19,10 @@ import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { useBorderBoxControl } from './hook';
 
 import type { BorderBoxControlProps } from '../types';
-import type { LabelProps } from '../../border-control/types';
+import type {
+	LabelProps,
+	BorderControlProps,
+} from '../../border-control/types';
 
 const BorderLabel = ( props: LabelProps ) => {
 	const { label, hideLabelFromVision } = props;
@@ -67,18 +65,29 @@ const BorderBoxControl = (
 		__next36pxDefaultSize = false,
 		...otherProps
 	} = useBorderBoxControl( props );
-	const containerRef = useRef();
-	const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
-	const popoverProps: ComponentProps<
-		typeof BorderControl
-	>[ '__unstablePopoverProps' ] = popoverPlacement
-		? {
-				placement: popoverPlacement,
-				offset: popoverOffset,
-				anchorRef: containerRef,
-				shift: true,
-		  }
-		: undefined;
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(
+		null
+	);
+
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =
+		useMemo(
+			() =>
+				popoverPlacement
+					? {
+							placement: popoverPlacement,
+							offset: popoverOffset,
+							anchor: popoverAnchor,
+							shift: true,
+					  }
+					: undefined,
+			[ popoverPlacement, popoverOffset, popoverAnchor ]
+		);
+
+	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
 
 	return (
 		<View className={ className } { ...otherProps } ref={ mergedRef }>

package/src/border-box-control/border-box-control-linked-button/component.tsx

@@ -28,10 +28,9 @@ const BorderBoxControlLinkedButton = (
 			<View className={ className }>
 				<Button
 					{ ...buttonProps }
-					variant={ isLinked ? 'primary' : 'secondary' }
 					isSmall
 					icon={ isLinked ? link : linkOff }
-					iconSize={ 16 }
+					iconSize={ 24 }
 					aria-label={ label }
 					ref={ forwardedRef }
 				/>

package/src/border-box-control/border-box-control-split-controls/component.tsx

@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import type { ComponentProps } from 'react';
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -18,6 +14,7 @@ import { Grid } from '../../grid';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { useBorderBoxControlSplitControls } from './hook';
 
+import type { BorderControlProps } from '../../border-control/types';
 import type { SplitControlsProps } from '../types';
 
 const BorderBoxControlSplitControls = (
@@ -40,18 +37,27 @@ const BorderBoxControlSplitControls = (
 		__next36pxDefaultSize,
 		...otherProps
 	} = useBorderBoxControlSplitControls( props );
-	const containerRef = useRef();
-	const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
-	const popoverProps: ComponentProps<
-		typeof BorderControl
-	>[ '__unstablePopoverProps' ] = popoverPlacement
-		? {
-				placement: popoverPlacement,
-				offset: popoverOffset,
-				anchorRef: containerRef,
-				shift: true,
-		  }
-		: undefined;
+
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState< Element | null >(
+		null
+	);
+
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps: BorderControlProps[ '__unstablePopoverProps' ] =
+		useMemo(
+			() =>
+				popoverPlacement
+					? {
+							placement: popoverPlacement,
+							offset: popoverOffset,
+							anchor: popoverAnchor,
+							shift: true,
+					  }
+					: undefined,
+			[ popoverPlacement, popoverOffset, popoverAnchor ]
+		);
 
 	const sharedBorderControlProps = {
 		colors,
@@ -64,6 +70,8 @@ const BorderBoxControlSplitControls = (
 		__next36pxDefaultSize,
 	};
 
+	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
+
 	return (
 		<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>
 			<BorderBoxControlVisualizer

package/src/border-box-control/stories/index.js

@@ -85,6 +85,7 @@ Default.args = {
 		width: '1px',
 	},
 	__next36pxDefaultSize: false,
+	popoverPlacement: 'right-start',
 };
 
 const WrapperView = styled.div`

package/src/border-box-control/styles.ts

@@ -23,7 +23,8 @@ export const BorderBoxControlLinkedButton = (
 ) => {
 	return css`
 		flex: 0;
-		flex-basis: 36px;
+		flex-basis: 24px;
+		line-height: 0;
 		margin-top: ${ __next36pxDefaultSize ? '6px' : '3px' };
 	`;
 };

package/src/box-control/linked-button.js

@@ -11,18 +11,18 @@ import Button from '../button';
 import Tooltip from '../tooltip';
 
 export default function LinkedButton( { isLinked, ...props } ) {
-	const label = isLinked ? __( 'Unlink Sides' ) : __( 'Link Sides' );
+	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
 
+	// TODO: Remove span after merging https://github.com/WordPress/gutenberg/pull/44198
 	return (
 		<Tooltip text={ label }>
 			<span>
 				<Button
 					{ ...props }
 					className="component-box-control__linked-button"
-					variant={ isLinked ? 'primary' : 'secondary' }
 					isSmall
 					icon={ isLinked ? link : linkOff }
-					iconSize={ 16 }
+					iconSize={ 24 }
 					aria-label={ label }
 				/>
 			</span>

package/src/box-control/test/index.js

@@ -162,7 +162,7 @@ describe( 'BoxControl', () => {
 		} );
 	} );
 
-	describe( 'Unlinked Sides', () => {
+	describe( 'Unlinked sides', () => {
 		it( 'should update a single side value when unlinked', async () => {
 			let state = {};
 			const setState = ( newState ) => ( state = newState );
@@ -174,7 +174,7 @@ describe( 'BoxControl', () => {
 				/>
 			);
 			const user = setupUser();
-			const unlink = screen.getByLabelText( /Unlink Sides/ );
+			const unlink = screen.getByLabelText( /Unlink sides/ );
 
 			await user.click( unlink );
 
@@ -207,7 +207,7 @@ describe( 'BoxControl', () => {
 				/>
 			);
 			const user = setupUser();
-			const unlink = screen.getByLabelText( /Unlink Sides/ );
+			const unlink = screen.getByLabelText( /Unlink sides/ );
 
 			await user.click( unlink );
 
@@ -240,7 +240,7 @@ describe( 'BoxControl', () => {
 			await user.selectOptions( allUnitSelect, [ 'em' ] );
 
 			// Unlink the controls.
-			await user.click( screen.getByLabelText( /Unlink Sides/ ) );
+			await user.click( screen.getByLabelText( /Unlink sides/ ) );
 
 			// Confirm that each individual control has the selected unit
 			const unlinkedSelects = screen.getAllByDisplayValue( 'em' );
@@ -257,7 +257,7 @@ describe( 'BoxControl', () => {
 			await user.selectOptions( allUnitSelect, [ 'vw' ] );
 
 			// Unlink the controls.
-			await user.click( screen.getByLabelText( /Unlink Sides/ ) );
+			await user.click( screen.getByLabelText( /Unlink sides/ ) );
 
 			// Confirm that each individual control has the selected unit
 			const unlinkedSelects = screen.getAllByDisplayValue( 'vw' );

package/src/button/style.scss

@@ -288,14 +288,15 @@
 	}
 
 	&.is-small {
-		height: 24px;
+		height: $icon-size;
 		line-height: 22px;
 		padding: 0 8px;
 		font-size: 11px;
 
 		&.has-icon:not(.has-text) {
-			padding: 0 8px;
-			width: 24px;
+			padding: 0;
+			width: $icon-size;
+			min-width: $icon-size;
 		}
 	}
 

package/src/dropdown/index.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useRef, useEffect, useState } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -42,6 +43,10 @@ export default function Dropdown( props ) {
 		onToggle,
 		style,
 	} = props;
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ fallbackPopoverAnchor, setFallbackPopoverAnchor ] =
+		useState( null );
 	const containerRef = useRef();
 	const [ isOpen, setIsOpen ] = useObservableState( false, onToggle );
 
@@ -83,7 +88,10 @@ export default function Dropdown( props ) {
 	}
 
 	const args = { isOpen, onToggle: toggle, onClose: close };
-	const hasAnchorRef =
+	const popoverPropsHaveAnchor =
+		!! popoverProps?.anchor ||
+		// Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and
+		// be removed from `Popover` from WordPress 6.3
 		!! popoverProps?.anchorRef ||
 		!! popoverProps?.getAnchorRect ||
 		!! popoverProps?.anchorRect;
@@ -91,7 +99,7 @@ export default function Dropdown( props ) {
 	return (
 		<div
 			className={ classnames( 'components-dropdown', className ) }
-			ref={ containerRef }
+			ref={ useMergeRefs( [ setFallbackPopoverAnchor, containerRef ] ) }
 			// Some UAs focus the closest focusable parent when the toggle is
 			// clicked. Making this div focusable ensures such UAs will focus
 			// it and `closeIfFocusOutside` can tell if the toggle was clicked.
@@ -110,7 +118,11 @@ export default function Dropdown( props ) {
 					// This value is used to ensure that the dropdowns
 					// align with the editor header by default.
 					offset={ 13 }
-					anchorRef={ ! hasAnchorRef ? containerRef : undefined }
+					anchor={
+						! popoverPropsHaveAnchor
+							? fallbackPopoverAnchor
+							: undefined
+					}
 					{ ...popoverProps }
 					className={ classnames(
 						'components-dropdown__content',

package/src/modal/style.scss

@@ -8,8 +8,7 @@
 	background-color: rgba($black, 0.35);
 	z-index: z-index(".components-modal__screen-overlay");
 	display: flex;
-	backdrop-filter: blur($grid-unit);
-
+	// backdrop-filter: blur($grid-unit);
 	// This animates the appearance of the white background.
 	@include edit-post__fade-in-animation();
 }
@@ -31,8 +30,8 @@
 		margin: auto;
 		width: auto;
 		min-width: $modal-min-width;
-		max-width: calc(100% - #{ $grid-unit-20 * 2 });
-		max-height: calc(100% - #{ $header-height * 2 });
+		max-width: calc(100% - #{$grid-unit-20 * 2});
+		max-height: calc(100% - #{$header-height * 2});
 
 		// Animate the modal frame/contents appearing on the page.
 		animation: components-modal__appear-animation 0.1s ease-out;

package/src/navigation/menu/menu-title-search.js

@@ -52,6 +52,8 @@ function MenuTitleSearch( {
 			count
 		);
 		debouncedSpeak( resultsFoundMessage );
+		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ items, search ] );
 
 	const onClose = () => {

package/src/navigation/menu/use-navigation-tree-menu.js

@@ -21,5 +21,7 @@ export const useNavigationTreeMenu = ( props ) => {
 		return () => {
 			removeMenu( key );
 		};
+		// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 };

package/src/panel/README.md

@@ -176,7 +176,7 @@ The class that will be added with `components-panel__row`. to the classes of the
 
 PanelRow accepts a forwarded ref that will be added to the wrapper div. Usage:
 
-`<PanelRow className="edit-post-post-schedule" ref={ anchorRef }>`
+`<PanelRow className="edit-post-post-schedule" ref={ panelRowRef }>`
 
 ---
 

package/src/popover/README.md

@@ -6,7 +6,9 @@ The behavior of the popover when it exceeds the viewport's edges can be controll
 
 ## Usage
 
-Render a Popover within the parent to which it should anchor:
+Render a Popover within the parent to which it should anchor.
+
+If a Popover is returned by your component, it will be shown. To hide the popover, simply omit it from your component's render value.
 
 ```jsx
 import { Button, Popover } from '@wordpress/components';
@@ -27,7 +29,36 @@ const MyPopover = () => {
 };
 ```
 
-If a Popover is returned by your component, it will be shown. To hide the popover, simply omit it from your component's render value.
+In order to pass an explicit anchor, you can use the `anchor` prop. When doing so, **the anchor element should be stored in local state** rather than a plain React ref to ensure reactive updating when it changes.
+
+```jsx
+import { Button, Popover } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+const MyPopover = () => {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState();
+	const [ isVisible, setIsVisible ] = useState( false );
+	const toggleVisible = () => {
+		setIsVisible( ( state ) => ! state );
+	};
+
+	return (
+		<p ref={ setPopoverAnchor }>Popover s anchor</p>
+		<Button variant="secondary" onClick={ toggleVisible }>
+			Toggle Popover!
+		</Button>
+		{ isVisible && (
+			<Popover
+				anchor={ popoverAnchor }
+			>
+				Popover is toggled!
+			</Popover>
+		) }
+	);
+};
+```
 
 If you want Popover elements to render to a specific location on the page to allow style cascade to take effect, you must render a `Popover.Slot` further up the element tree:
 
@@ -51,14 +82,26 @@ render(
 
 The component accepts the following props. Props not included in this set will be applied to the element wrapping Popover content.
 
+### `anchor`: `Element | VirtualElement | null`
+
+The element that should be used by the `Popover` as its anchor. It can either be an `Element` or, alternatively, a `VirtualElement` — ie. an object with the `getBoundingClientRect()` and the `ownerDocument` properties defined.
+
+The element should be stored in state rather than a plain ref to ensure reactive updating when it changes.
+
+-   Required: No
+
 ### `anchorRect`: `DomRectWithOwnerDocument`
 
+_Note: this prop is deprecated and will be removed in WordPress 6.3. Please use the `anchor` prop instead._
+
 An object extending a `DOMRect` with an additional optional `ownerDocument` property, used to specify a fixed popover position.
 
 -   Required: No
 
 ### `anchorRef`: `Element | PopoverAnchorRefReference | PopoverAnchorRefTopBottom | Range`
 
+_Note: this prop is deprecated and will be removed in WordPress 6.3. Please use the `anchor` prop instead._
+
 Used to specify a fixed popover position. It can be an `Element`, a React reference to an `element`, an object with a `top` and a `bottom` properties (both pointing to elements), or a `range`.
 
 -   Required: No
@@ -114,6 +157,8 @@ When not provided, the `onClose` callback will be called instead.
 
 ### `getAnchorRect`: `( fallbackReferenceElement: Element | null ) => DomRectWithOwnerDocument`
 
+_Note: this prop is deprecated and will be removed in WordPress 6.3. Please use the `anchor` prop instead._
+
 A function returning the same value as the one expected by the `anchorRect` prop, used to specify a dynamic popover position.
 
 -   Required: No
@@ -180,6 +225,6 @@ Adjusts the size of the popover to prevent its contents from going out of view w
 
 ### `range`: `unknown`
 
-_Note: this prop is deprecated and has no effect on the component._
+_Note: this prop is deprecated and will be removed in WordPress 6.3. It has no effect on the component._
 
 -   Required: No