rebase on oct-10-2023

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/hocs/test/with-searched-products.js

@@ -6,13 +6,24 @@
  */
 import TestRenderer, { act } from 'react-test-renderer';
 import * as mockUtils from '@woocommerce/editor-components/utils';
-import * as mockUseDebounce from 'use-debounce';
+import { useDebouncedCallback } from 'use-debounce';
 
 /**
  * Internal dependencies
  */
 import withSearchedProducts from '../with-searched-products';
 
+// Add a mock implementation of debounce for testing so we can spy on the onSearch call.
+jest.mock( 'use-debounce', () => {
+	return {
+		useDebouncedCallback: jest
+			.fn()
+			.mockImplementation(
+				( search ) => () => mockUtils.getProducts( search )
+			),
+	};
+} );
+
 jest.mock( '@woocommerce/block-settings', () => ( {
 	__esModule: true,
 	blocksConfig: {
@@ -28,15 +39,10 @@ mockUtils.getProducts = jest.fn().mockImplementation( () =>
 	] )
 );
 
-// Add a mock implementation of debounce for testing so we can spy on the onSearch call.
-mockUseDebounce.useDebouncedCallback = jest
-	.fn()
-	.mockImplementation( ( search ) => () => mockUtils.getProducts( search ) );
-
 describe( 'withSearchedProducts Component', () => {
 	const { getProducts } = mockUtils;
 	afterEach( () => {
-		mockUseDebounce.useDebouncedCallback.mockClear();
+		useDebouncedCallback.mockClear();
 		mockUtils.getProducts.mockClear();
 	} );
 	const TestComponent = withSearchedProducts(
@@ -77,7 +83,7 @@ describe( 'withSearchedProducts Component', () => {
 				props.onSearch();
 			} );
 
-			expect( mockUseDebounce.useDebouncedCallback ).toHaveBeenCalled();
+			expect( useDebouncedCallback ).toHaveBeenCalled();
 			expect( getProducts ).toHaveBeenCalledTimes( 1 );
 		} );
 	} );

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/hocs/with-transform-single-select-to-multiple-select.js

@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { Component } from '@wordpress/element';
-import { createHigherOrderComponent } from '@wordpress/compose';
-import PropTypes from 'prop-types';
-
-/**
- * HOC that transforms a single select to a multiple select.
- *
- * @param {Function} OriginalComponent Component being wrapped.
- */
-const withTransformSingleSelectToMultipleSelect = createHigherOrderComponent(
-	( OriginalComponent ) => {
-		class WrappedComponent extends Component {
-			render() {
-				const { selected } = this.props;
-				const isNil = selected === null || selected === undefined;
-
-				return Array.isArray( selected ) ? (
-					<OriginalComponent { ...this.props } />
-				) : (
-					<OriginalComponent
-						{ ...this.props }
-						selected={ isNil ? [] : [ selected ] }
-					/>
-				);
-			}
-		}
-		WrappedComponent.propTypes = {
-			selected: PropTypes.oneOfType( [
-				PropTypes.number,
-				PropTypes.string,
-			] ),
-		};
-		WrappedComponent.defaultProps = {
-			selected: null,
-		};
-		return WrappedComponent;
-	},
-	'withTransformSingleSelectToMultipleSelect'
-);
-
-export default withTransformSingleSelectToMultipleSelect;

wp/wp-content/plugins/woocommerce/packages/woocommerce-blocks/assets/js/hocs/with-transform-single-select-to-multiple-select.tsx

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - Ignoring because @wordpress/element library does not have type definition for FunctionComponent
+// eslint-disable-next-line
+import { FunctionComponent } from '@wordpress/element';
+
+type SelectedOption = number | string | null | number[] | string[];
+
+interface OriginalComponentProps {
+	selected?: SelectedOption;
+}
+
+/**
+ * HOC that transforms a single select to a multiple select.
+ *
+ * @param {FunctionComponent< Record< string, unknown > >} OriginalComponent Component being wrapped.
+ */
+const withTransformSingleSelectToMultipleSelect = (
+	OriginalComponent: FunctionComponent< Record< string, unknown > >
+) => {
+	return ( props: OriginalComponentProps ): JSX.Element => {
+		let { selected } = props;
+		selected = selected === undefined ? null : selected;
+		const isNil = selected === null;
+
+		return Array.isArray( selected ) ? (
+			<OriginalComponent { ...props } />
+		) : (
+			<OriginalComponent
+				{ ...props }
+				selected={ isNil ? [] : [ selected ] }
+			/>
+		);
+	};
+};
+
+export default withTransformSingleSelectToMultipleSelect;