withFocusReturn: Convert to TypeScript (#48748)

* withFocusReturn: Convert to TypeScript

* Add changelog

* Fix import error on CI

packages/components/CHANGELOG.md

@@ -19,6 +19,7 @@
 -   `PanelBody`: Convert to TypeScript ([#47702](https://github.com/WordPress/gutenberg/pull/47702)).
 -   `withFilters` HOC: Convert to TypeScript ([#48721](https://github.com/WordPress/gutenberg/pull/48721)).
 -   `withFallbackStyles` HOC: Convert to TypeScript ([#48720](https://github.com/WordPress/gutenberg/pull/48720)).
+-   `withFocusReturn` HOC: Convert to TypeScript ([#48748](https://github.com/WordPress/gutenberg/pull/48748)).
 -   `navigateRegions` HOC: Convert to TypeScript ([#48632](https://github.com/WordPress/gutenberg/pull/48632)).
 -   `withSpokenMessages`: HOC: Convert to TypeScript ([#48163](https://github.com/WordPress/gutenberg/pull/48163)).
 -   `DimensionControl(Experimental)`: Convert to TypeScript ([#47351](https://github.com/WordPress/gutenberg/pull/47351)).

packages/components/src/higher-order/with-focus-return/index.tsx

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { createHigherOrderComponent, useFocusReturn } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
+
+/**
+ * Returns true if the given object is component-like. An object is component-
+ * like if it is an instance of wp.element.Component, or is a function.
+ *
+ * @param object Object to test.
+ *
+ * @return Whether object is component-like.
+ */
+function isComponentLike( object: any ): object is React.ComponentType {
+	return object instanceof Component || typeof object === 'function';
+}
+
+type Props = {
+	onFocusReturn?: () => void;
+};
+
+/**
+ * Higher Order Component used to be used to wrap disposable elements like
+ * sidebars, modals, dropdowns. When mounting the wrapped component, we track a
+ * reference to the current active element so we know where to restore focus
+ * when the component is unmounted.
+ *
+ * @param options The component to be enhanced with
+ *                focus return behavior, or an object
+ *                describing the component and the
+ *                focus return characteristics.
+ *
+ * @return Higher Order Component with the focus restauration behaviour.
+ */
+export default createHigherOrderComponent(
+	// @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types
+	( options: WPComponent | Record< string, unknown > ) => {
+		const HoC =
+			( { onFocusReturn }: Props = {} ) =>
+			( WrappedComponent: React.ComponentType ) => {
+				const WithFocusReturn = (
+					props: Record< string, unknown >
+				) => {
+					const ref = useFocusReturn( onFocusReturn );
+					return (
+						<div ref={ ref }>
+							<WrappedComponent { ...props } />
+						</div>
+					);
+				};
+
+				return WithFocusReturn;
+			};
+
+		if ( isComponentLike( options ) ) {
+			const WrappedComponent = options;
+			return HoC()( WrappedComponent );
+		}
+
+		return HoC( options );
+	},
+	'withFocusReturn'
+);
+
+export const Provider = ( { children }: { children: React.ReactNode } ) => {
+	deprecated( 'wp.components.FocusReturnProvider component', {
+		since: '5.7',
+		hint: 'This provider is not used anymore. You can just remove it from your codebase',
+	} );
+
+	return children;
+};

packages/components/src/higher-order/with-focus-return/test/index.js → packages/components/src/higher-order/with-focus-return/test/index.tsx

@@ -12,9 +12,9 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import withFocusReturn from '../';
+import withFocusReturn from '..';
 
-class Test extends Component {
+class Test extends Component< { className: string; focusHistory: unknown } > {
 	render() {
 		const { className, focusHistory } = this.props;
 		return (

packages/components/tsconfig.json

@@ -48,7 +48,6 @@
 		"src/custom-gradient-picker",
 		"src/duotone-picker",
 		"src/gradient-picker",
-		"src/higher-order/with-focus-return",
 		"src/higher-order/with-notices",
 		"src/palette-edit"
 	]