Popover: use a11y hooks instead of HoCs

packages/components/src/popover/index.js

@@ -7,7 +7,12 @@ import mergeRefs from 'react-merge-refs';
 /**
  * WordPress dependencies
  */
-import { useRef, useState, useLayoutEffect } from '@wordpress/element';
+import {
+	useRef,
+	useState,
+	useLayoutEffect,
+	useCallback,
+} from '@wordpress/element';
 import { getRectangleFromRange } from '@wordpress/dom';
 import { ESCAPE } from '@wordpress/keycodes';
 import deprecated from '@wordpress/deprecated';
@@ -16,25 +21,21 @@ import {
 	useResizeObserver,
 	useFocusOnMount,
 	__experimentalUseFocusOutside as useFocusOutside,
+	useConstrainedTabbing,
+	useFocusReturn,
 } from '@wordpress/compose';
 import { close } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { computePopoverPosition } from './utils';
-import withFocusReturn from '../higher-order/with-focus-return';
-import withConstrainedTabbing from '../higher-order/with-constrained-tabbing';
 import Button from '../button';
 import ScrollLock from '../scroll-lock';
 import IsolatedEventContainer from '../isolated-event-container';
 import { Slot, Fill, useSlot } from '../slot-fill';
 import { getAnimateClassName } from '../animate';
 
-const FocusManaged = withConstrainedTabbing(
-	withFocusReturn( ( { children } ) => children )
-);
-
 /**
  * Name of slot in which popover should fill.
  *
@@ -417,8 +418,17 @@ const Popover = ( {
 		__unstableBoundaryParent,
 	] );
 
+	const constrainedTabbingRef = useConstrainedTabbing();
+	const focusReturnRef = useFocusReturn();
 	const focusOnMountRef = useFocusOnMount( focusOnMount );
 	const focusOutsideProps = useFocusOutside( handleOnFocusOutside );
+	const allRefs = [
+		containerRef,
+		constrainedTabbingRef,
+		focusReturnRef,
+		focusOnMountRef,
+	];
+	const mergedRefs = useCallback( mergeRefs( allRefs ), allRefs );
 
 	// Event handlers
 	const maybeClose = ( event ) => {
@@ -517,7 +527,7 @@ const Popover = ( {
 			{ ...contentProps }
 			onKeyDown={ maybeClose }
 			{ ...focusOutsideProps }
-			ref={ mergeRefs( [ containerRef, focusOnMountRef ] ) }
+			ref={ mergedRefs }
 			tabIndex="-1"
 		>
 			{ isExpanded && <ScrollLock /> }
@@ -542,12 +552,6 @@ const Popover = ( {
 		</IsolatedEventContainer>
 	);
 
-	// Apply focus to element as long as focusOnMount is truthy; false is
-	// the only "disabled" value.
-	if ( focusOnMount ) {
-		content = <FocusManaged>{ content }</FocusManaged>;
-	}
-
 	if ( slot.ref ) {
 		content = <Fill name={ __unstableSlotName }>{ content }</Fill>;
 	}