Split CountryInput and Select

assets/js/base/components/country-input/country-input.js

@@ -2,14 +2,12 @@
  * External dependencies
  */
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { CustomSelectControl } from 'wordpress-components';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
-import './style.scss';
+import Select from '../select';
 
 const CountryInput = ( {
 	className,
@@ -22,21 +20,20 @@ const CountryInput = ( {
 		key,
 		name: decodeEntities( countries[ key ] ),
 	} ) );
+	const formattedValue = value
+		? {
+				key: value,
+				name: decodeEntities( countries[ value ] ),
+		  }
+		: null;
 
 	return (
-		<CustomSelectControl
-			className={ classnames( 'wc-block-country-input', className, {
-				'is-active': value,
-			} ) }
+		<Select
+			className={ className }
 			label={ label }
+			onChange={ onChange }
 			options={ options }
-			onChange={ ( { selectedItem } ) => {
-				onChange( selectedItem.key );
-			} }
-			value={ {
-				key: value,
-				name: decodeEntities( countries[ value ] ),
-			} }
+			value={ formattedValue }
 		/>
 	);
 };

assets/js/base/components/input-row/style.scss

@@ -3,7 +3,7 @@
 	flex-wrap: wrap;
 	justify-content: space-between;
 
-	> .wc-block-country-input,
+	> .wc-block-select,
 	> .wc-block-text-input {
 		margin-right: $gap-small;
 		flex-basis: 0;

assets/js/base/components/select/index.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { CustomSelectControl } from 'wordpress-components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+const Select = ( { className, label, onChange, options, value } ) => {
+	return (
+		<CustomSelectControl
+			className={ classnames( 'wc-block-select', className, {
+				'is-active': value,
+			} ) }
+			label={ label }
+			onChange={ ( { selectedItem } ) => {
+				onChange( selectedItem.key );
+			} }
+			options={ options }
+			value={ value }
+		/>
+	);
+};
+
+Select.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	options: PropTypes.arrayOf(
+		PropTypes.shape( {
+			key: PropTypes.string.isRequired,
+			name: PropTypes.string.isRequired,
+		} ).isRequired
+	).isRequired,
+	className: PropTypes.string,
+	label: PropTypes.string,
+	value: PropTypes.shape( {
+		key: PropTypes.string.isRequired,
+		name: PropTypes.string.isRequired,
+	} ),
+};
+
+export default Select;

assets/js/base/components/country-input/style.scss → assets/js/base/components/select/style.scss

@@ -1,4 +1,4 @@
-.wc-block-country-input {
+.wc-block-select {
 	position: relative;
 	margin-top: $gap;