✨ Create a generic select field

modules/ppcp-settings/resources/css/components/screens/settings/_input.scss

@@ -1,5 +1,5 @@
 // Fields
-.ppcp-r {
+.ppcp-r-app {
 	input[type='text'] {
 		border-color: $color-gray-700;
 		width: 100%;
@@ -13,7 +13,7 @@
 }
 
 // MultiSelect control
-.ppcp-r {
+.ppcp-r-app {
 	.ppcp-r__radio-wrapper {
 		align-items: flex-start;
 		gap: 12px;
@@ -33,45 +33,43 @@
 		padding-left: 32px;
 	}
 
-	// Select control styles
-	.ppcp-r__control {
-		border-radius: 2px;
-		border-color: $color-gray-700;
-		min-height: auto;
-		padding: 0;
-	}
-
-	.ppcp-r__input-container {
-		padding: 0;
-		margin: 0;
-	}
-
-	.ppcp-r__value-container {
-		padding: 0 0 0 7px;
-	}
-
-	.ppcp-r__indicator {
-		padding: 5px;
-	}
-
-	.ppcp-r__indicator-separator {
-		display: none;
-	}
-
-	.ppcp-r__value-container--has-value {
-		.ppcp-r__single-value {
-			color: $color-gray-800;
+	// Styles for "react-select" (see `Fields/Select.js`)
+	.ppcp-r-select {
+		.ppcp__control {
+			border-radius: 2px;
+			border-color: $color-gray-700;
+			min-height: auto;
+			padding: 0;
 		}
-	}
 
-	.ppcp-r__placeholder,
-	.ppcp-r__single-value {
-		@include font(13, 20, 400);
-	}
+		.ppcp__input-container {
+			padding: 0;
+			margin: 0;
+		}
 
-	.ppcp-r__option {
-		.ppcp-r__option--is-selected {
-			background-color: $color-gray-200;
+		.ppcp__value-container {
+			padding: 0 0 0 7px;
+		}
+
+		.ppcp__indicator {
+			padding: 5px;
+		}
+
+		.ppcp__value-container--has-value {
+			.ppcp__single-value {
+				color: $color-gray-800;
+			}
+		}
+
+		.ppcp__placeholder,
+		.ppcp__single-value {
+			@include font(13, 20, 400);
+		}
+
+		.ppcp__option {
+			.ppcp__option--is-selected {
+				background-color: $color-gray-200;
+			}
 		}
 	}
 }

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/Select.js

@@ -0,0 +1,28 @@
+import { Icon } from '@wordpress/components';
+import { chevronDown, chevronUp } from '@wordpress/icons';
+
+// TODO: Replace this with the WordPress select control once V2 with multi-select is ready.
+// see https://wordpress.github.io/gutenberg/?path=/story/components-customselectcontrol-v2--multiple-selection
+import { default as ReactSelect, components } from 'react-select';
+
+const DropdownIndicator = ( props ) => (
+	<components.DropdownIndicator { ...props }>
+		<Icon icon={ props.selectProps.menuIsOpen ? chevronUp : chevronDown } />
+	</components.DropdownIndicator>
+);
+const IndicatorSeparator = () => null;
+
+const Select = ( { options, value, onChange, isMulti, placeholder } ) => (
+	<ReactSelect
+		className="ppcp-r-select"
+		classNamePrefix="ppcp"
+		isMulti={ isMulti }
+		options={ options }
+		value={ value }
+		onChange={ onChange }
+		placeholder={ placeholder }
+		components={ { DropdownIndicator, IndicatorSeparator } }
+	/>
+);
+
+export default Select;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Fields/index.js

@@ -7,3 +7,4 @@ export { default as CheckboxGroup } from './CheckboxGroup';
 export { default as PayPalRdb } from './RadioButton';
 export { default as PayPalRdbWithContent } from './RadioContent';
 export { default as SelectBox } from './SelectableContent';
+export { default as Select } from './Select';