initial commit

packages/woocommerce-blocks/assets/js/base/components/state-input/StateInputProps.ts

@@ -0,0 +1,15 @@
+export interface StateInputProps {
+	className?: string;
+	label: string;
+	id: string;
+	autoComplete?: string;
+	value: string;
+	country: string;
+	onChange: ( value: string ) => void;
+	required?: boolean;
+	errorMessage?: string;
+}
+
+export type StateInputWithStatesProps = StateInputProps & {
+	states: Record< string, Record< string, string > >;
+};

packages/woocommerce-blocks/assets/js/base/components/state-input/billing-state-input.tsx

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { ALLOWED_STATES } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import StateInput from './state-input';
+import type { StateInputProps } from './StateInputProps';
+
+const BillingStateInput = ( props: StateInputProps ): JSX.Element => {
+	return <StateInput states={ ALLOWED_STATES } { ...props } />;
+};
+
+export default BillingStateInput;

packages/woocommerce-blocks/assets/js/base/components/state-input/index.ts

@@ -0,0 +1,3 @@
+export { default as StateInput } from './state-input';
+export { default as BillingStateInput } from './billing-state-input';
+export { default as ShippingStateInput } from './shipping-state-input';

packages/woocommerce-blocks/assets/js/base/components/state-input/shipping-state-input.tsx

@@ -0,0 +1,16 @@
+/**
+ * External dependencies
+ */
+import { SHIPPING_STATES } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import StateInput from './state-input';
+import type { StateInputProps } from './StateInputProps';
+
+const ShippingStateInput = ( props: StateInputProps ): JSX.Element => {
+	return <StateInput states={ SHIPPING_STATES } { ...props } />;
+};
+
+export default ShippingStateInput;

packages/woocommerce-blocks/assets/js/base/components/state-input/state-input.tsx

@@ -0,0 +1,145 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useCallback, useMemo, useEffect, useRef } from '@wordpress/element';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { ValidatedTextInput } from '../text-input';
+import Combobox from '../combobox';
+import './style.scss';
+import type { StateInputWithStatesProps } from './StateInputProps';
+
+const optionMatcher = (
+	value: string,
+	options: { label: string; value: string }[]
+): string => {
+	const foundOption = options.find(
+		( option ) =>
+			option.label.toLocaleUpperCase() === value.toLocaleUpperCase() ||
+			option.value.toLocaleUpperCase() === value.toLocaleUpperCase()
+	);
+	return foundOption ? foundOption.value : '';
+};
+
+const StateInput = ( {
+	className,
+	id,
+	states,
+	country,
+	label,
+	onChange,
+	autoComplete = 'off',
+	value = '',
+	required = false,
+}: StateInputWithStatesProps ): JSX.Element => {
+	const countryStates = states[ country ];
+	const options = useMemo(
+		() =>
+			countryStates
+				? Object.keys( countryStates ).map( ( key ) => ( {
+						value: key,
+						label: decodeEntities( countryStates[ key ] ),
+				  } ) )
+				: [],
+		[ countryStates ]
+	);
+
+	/**
+	 * Handles state selection onChange events. Finds a matching state by key or value.
+	 */
+	const onChangeState = useCallback(
+		( stateValue: string ) => {
+			onChange(
+				options.length > 0
+					? optionMatcher( stateValue, options )
+					: stateValue
+			);
+		},
+		[ onChange, options ]
+	);
+
+	/**
+	 * Track value changes.
+	 */
+	const valueRef = useRef< string >( value );
+
+	useEffect( () => {
+		if ( valueRef.current !== value ) {
+			valueRef.current = value;
+		}
+	}, [ value ] );
+
+	/**
+	 * If given a list of options, ensure the value matches those options or trigger change.
+	 */
+	useEffect( () => {
+		if ( options.length > 0 && valueRef.current ) {
+			const match = optionMatcher( valueRef.current, options );
+			if ( match !== valueRef.current ) {
+				onChangeState( match );
+			}
+		}
+	}, [ options, onChangeState ] );
+
+	if ( options.length > 0 ) {
+		return (
+			<>
+				<Combobox
+					className={ classnames(
+						className,
+						'wc-block-components-state-input'
+					) }
+					id={ id }
+					label={ label }
+					onChange={ onChangeState }
+					options={ options }
+					value={ value }
+					errorMessage={ __(
+						'Please select a state.',
+						'woo-gutenberg-products-block'
+					) }
+					required={ required }
+					autoComplete={ autoComplete }
+				/>
+				{ autoComplete !== 'off' && (
+					<input
+						type="text"
+						aria-hidden={ true }
+						autoComplete={ autoComplete }
+						value={ value }
+						onChange={ ( event ) =>
+							onChangeState( event.target.value )
+						}
+						style={ {
+							minHeight: '0',
+							height: '0',
+							border: '0',
+							padding: '0',
+							position: 'absolute',
+						} }
+						tabIndex={ -1 }
+					/>
+				) }
+			</>
+		);
+	}
+
+	return (
+		<ValidatedTextInput
+			className={ className }
+			id={ id }
+			label={ label }
+			onChange={ onChangeState }
+			autoComplete={ autoComplete }
+			value={ value }
+			required={ required }
+		/>
+	);
+};
+
+export default StateInput;

packages/woocommerce-blocks/assets/js/base/components/state-input/style.scss

@@ -0,0 +1,3 @@
+.wc-block-components-state-input {
+	margin-top: em($gap-large);
+}