with-focus-outside: Convert to TypeScript

packages/components/CHANGELOG.md

@@ -18,13 +18,13 @@
 -   `PaletteEdit`: Fix padding in RTL languages ([#54034](https://github.com/WordPress/gutenberg/pull/54034)).
 -   `CircularOptionPicker`: make focus styles resilient to button size changes ([#54196](https://github.com/WordPress/gutenberg/pull/54196)).
 
-
 ### Internal
 
 -   `Composite`: Convert to TypeScript ([#54028](https://github.com/WordPress/gutenberg/pull/54028)).
 -   `BorderControl`: Refactor unit tests to use `userEvent` ([#54155](https://github.com/WordPress/gutenberg/pull/54155))
 -   `FocusableIframe`: Convert to TypeScript ([#53979](https://github.com/WordPress/gutenberg/pull/53979)).
 -   `Popover`: Remove unused `overlay` type from `positionToPlacement` utility function ([#54101](https://github.com/WordPress/gutenberg/pull/54101)).
+-   `Higher Order` -- `with-focus-outside`: Convert to TypeScript ([#53980](https://github.com/WordPress/gutenberg/pull/53980)).
 
 ### Experimental
 

packages/components/src/combobox-control/index.tsx

@@ -36,16 +36,18 @@ import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props'
 
 const noop = () => {};
 
+interface DetectOutsideComponentProps {
+	onFocusOutside: ( event: FocusEvent ) => void;
+	children?: React.ReactNode;
+}
+
 const DetectOutside = withFocusOutside(
-	class extends Component {
-		// @ts-expect-error - TODO: Should be resolved when `withFocusOutside` is refactored to TypeScript
-		handleFocusOutside( event ) {
-			// @ts-expect-error - TODO: Should be resolved when `withFocusOutside` is refactored to TypeScript
+	class extends Component< DetectOutsideComponentProps > {
+		handleFocusOutside( event: FocusEvent ) {
 			this.props.onFocusOutside( event );
 		}
 
 		render() {
-			// @ts-expect-error - TODO: Should be resolved when `withFocusOutside` is refactored to TypeScript
 			return this.props.children;
 		}
 	}

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

@@ -1,5 +1,3 @@
-//@ts-nocheck
-
 /**
  * WordPress dependencies
  */
@@ -11,9 +9,14 @@ import {
 
 export default createHigherOrderComponent(
 	( WrappedComponent ) => ( props ) => {
-		const [ handleFocusOutside, setHandleFocusOutside ] = useState();
-		const bindFocusOutsideHandler = useCallback(
-			( node ) =>
+		const [ handleFocusOutside, setHandleFocusOutside ] = useState<
+			undefined | ( ( event: React.FocusEvent ) => void )
+		>( undefined );
+
+		const bindFocusOutsideHandler = useCallback<
+			( node: React.FocusEvent ) => void
+		>(
+			( node: any ) =>
 				setHandleFocusOutside( () =>
 					node?.handleFocusOutside
 						? node.handleFocusOutside.bind( node )

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

@@ -12,17 +12,21 @@ import { Component } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import withFocusOutside from '../';
+import withFocusOutside from '..';
 
-let onFocusOutside;
+interface TestComponentProps {
+	onFocusOutside: ( event: FocusEvent ) => void;
+}
+
+let onFocusOutside: () => void;
 
 describe( 'withFocusOutside', () => {
-	let origHasFocus;
+	let origHasFocus: typeof document.hasFocus;
 
 	const EnhancedComponent = withFocusOutside(
-		class extends Component {
+		class extends Component< TestComponentProps > {
 			handleFocusOutside() {
-				this.props.onFocusOutside();
+				this.props.onFocusOutside( new FocusEvent( 'blur' ) );
 			}
 
 			render() {
@@ -36,15 +40,13 @@ describe( 'withFocusOutside', () => {
 		}
 	);
 
-	class TestComponent extends Component {
-		render() {
-			return <EnhancedComponent { ...this.props } />;
-		}
-	}
+	const TestComponent: React.FC< TestComponentProps > = ( props ) => {
+		return <EnhancedComponent { ...props } />;
+	};
 
 	beforeEach( () => {
 		// Mock document.hasFocus() to always be true for testing
-		// note: we overide this for some tests.
+		// note: we override this for some tests.
 		origHasFocus = document.hasFocus;
 		document.hasFocus = () => true;
 

packages/compose/src/hooks/use-focus-outside/index.ts

@@ -82,7 +82,7 @@ type UseFocusOutsideReturn = {
  * wrapping element element to capture when focus moves outside that element.
  */
 export default function useFocusOutside(
-	onFocusOutside: ( event: FocusEvent ) => void
+	onFocusOutside: ( ( event: FocusEvent ) => void ) | undefined
 ): UseFocusOutsideReturn {
 	const currentOnFocusOutside = useRef( onFocusOutside );
 	useEffect( () => {