Move TextInput, ValidatedTextInput and ValidationInputError to …

…the `@woocommerce/blocks-components` package. (#11654)

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.tsx

@@ -7,7 +7,7 @@ import { SelectControl } from 'wordpress-components';
 import type { SelectControl as SelectControlType } from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
 import classnames from 'classnames';
-import { ValidationInputError } from '@woocommerce/blocks-checkout';
+import { ValidationInputError } from '@woocommerce/blocks-components';
 import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 import { useDispatch, useSelect } from '@wordpress/data';
 

assets/js/base/components/cart-checkout/address-form/address-form.tsx

@@ -1,11 +1,11 @@
 /**
  * External dependencies
  */
+import { isPostcode } from '@woocommerce/blocks-checkout';
 import {
 	ValidatedTextInput,
-	isPostcode,
 	type ValidatedTextInputHandle,
-} from '@woocommerce/blocks-checkout';
+} from '@woocommerce/blocks-components';
 import {
 	BillingCountryInput,
 	ShippingCountryInput,

assets/js/base/components/cart-checkout/totals/coupon/index.tsx

@@ -9,11 +9,11 @@ import { withInstanceId } from '@wordpress/compose';
 import {
 	ValidatedTextInput,
 	ValidationInputError,
-} from '@woocommerce/blocks-checkout';
+} from '@woocommerce/blocks-components';
 import { useSelect } from '@wordpress/data';
 import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
 import classnames from 'classnames';
-import type { MouseEvent } from 'react';
+import type { MouseEvent, MouseEventHandler } from 'react';
 
 /**
  * Internal dependencies
@@ -62,18 +62,18 @@ export const TotalsCoupon = ( {
 			validationErrorId: store.getValidationErrorId( textInputId ),
 		};
 	} );
-	const handleCouponAnchorClick = (
-		e: MouseEvent< HTMLAnchorElement, MouseEvent >
+	const handleCouponAnchorClick: MouseEventHandler< HTMLAnchorElement > = (
+		e: MouseEvent< HTMLAnchorElement >
 	) => {
 		e.preventDefault();
 		setIsCouponFormHidden( false );
 	};
-	const handleCouponSubmit = (
-		e: MouseEvent< HTMLButtonElement, MouseEvent >
+	const handleCouponSubmit: MouseEventHandler< HTMLButtonElement > = (
+		e: MouseEvent< HTMLButtonElement >
 	) => {
 		e.preventDefault();
-		if ( onSubmit !== undefined ) {
-			onSubmit( couponValue ).then( ( result ) => {
+		if ( typeof onSubmit !== 'undefined' ) {
+			onSubmit( couponValue )?.then( ( result ) => {
 				if ( result ) {
 					setCouponValue( '' );
 					setIsCouponFormHidden( true );

assets/js/base/components/combobox/index.tsx

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
 import { withInstanceId } from '@wordpress/compose';
 import { ComboboxControl } from 'wordpress-components';
-import { ValidationInputError } from '@woocommerce/blocks-checkout';
+import { ValidationInputError } from '@woocommerce/blocks-components';
 import { isObject } from '@woocommerce/types';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';

assets/js/base/components/state-input/state-input.tsx

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useCallback, useMemo, useEffect, useRef } from '@wordpress/element';
 import classnames from 'classnames';
-import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
+import { ValidatedTextInput } from '@woocommerce/blocks-components';
 
 /**
  * Internal dependencies

assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts

@@ -16,7 +16,7 @@ import {
 	PAYMENT_STORE_KEY,
 	CART_STORE_KEY,
 } from '@woocommerce/block-data';
-import { ValidationInputError } from '@woocommerce/blocks-checkout';
+import { ValidationInputError } from '@woocommerce/blocks-components';
 
 /**
  * Internal dependencies

assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx

@@ -10,17 +10,13 @@ import {
 import { getSetting } from '@woocommerce/settings';
 import {
 	CheckboxControl,
-	ValidatedTextInput,
 	StoreNoticesContainer,
 } from '@woocommerce/blocks-checkout';
+import { ValidatedTextInput } from '@woocommerce/blocks-components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { CHECKOUT_STORE_KEY } from '@woocommerce/block-data';
 import { isEmail } from '@wordpress/url';
 
-/**
- * Internal dependencies
- */
-
 const Block = (): JSX.Element => {
 	const { customerId, shouldCreateAccount } = useSelect( ( select ) => {
 		const store = select( CHECKOUT_STORE_KEY );

assets/js/blocks/checkout/phone-number/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ValidatedTextInput } from '@woocommerce/blocks-checkout';
+import { ValidatedTextInput } from '@woocommerce/blocks-components';
 
 /**
  * Renders a phone number input.

assets/js/types/type-defs/payment-method-interface.ts

@@ -5,7 +5,7 @@
 import type PaymentMethodLabel from '@woocommerce/base-components/cart-checkout/payment-method-label';
 import type PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons';
 import type LoadingMask from '@woocommerce/base-components/loading-mask';
-import type { ValidationInputError } from '@woocommerce/blocks-checkout';
+import type { ValidationInputError } from '@woocommerce/blocks-components';
 
 /**
  * Internal dependencies

packages/checkout/components/index.ts

@@ -9,10 +9,6 @@ export { default as Button } from './button';
 export { default as Label } from './label';
 export { default as StoreNoticesContainer } from './store-notices-container';
 export { default as CheckboxControl } from './checkbox-control';
-export {
-	default as ValidatedTextInput,
-	ValidatedTextInputHandle,
-} from './text-input/validated-text-input';
-export { default as TextInput } from './text-input/text-input';
-export { default as ValidationInputError } from './validation-input-error';
+export { ValidationInputError } from './validation-input-error';
+export { ValidatedTextInput, TextInput } from './text-input';
 export { default as StoreNotice } from './store-notice';

packages/checkout/components/text-input/index.tsx

@@ -0,0 +1,2 @@
+export { default as TextInput } from '../../../components/text-input/text-input';
+export { default as ValidatedTextInput } from '../../../components/text-input/validated-text-input';

packages/checkout/components/validation-input-error/index.tsx

@@ -1,46 +1 @@
-/**
- * External dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
-
-/**
- * Internal dependencies
- */
-import './style.scss';
-
-interface ValidationInputErrorProps {
-	errorMessage?: string;
-	propertyName?: string;
-	elementId?: string;
-}
-
-export const ValidationInputError = ( {
-	errorMessage = '',
-	propertyName = '',
-	elementId = '',
-}: ValidationInputErrorProps ): JSX.Element | null => {
-	const { validationError, validationErrorId } = useSelect( ( select ) => {
-		const store = select( VALIDATION_STORE_KEY );
-		return {
-			validationError: store.getValidationError( propertyName ),
-			validationErrorId: store.getValidationErrorId( elementId ),
-		};
-	} );
-
-	if ( ! errorMessage || typeof errorMessage !== 'string' ) {
-		if ( validationError?.message && ! validationError?.hidden ) {
-			errorMessage = validationError.message;
-		} else {
-			return null;
-		}
-	}
-
-	return (
-		<div className="wc-block-components-validation-error" role="alert">
-			<p id={ validationErrorId }>{ errorMessage }</p>
-		</div>
-	);
-};
-
-export default ValidationInputError;
+export { ValidationInputError } from '../../../components/validation-input-error/';

packages/components/index.ts

@@ -14,4 +14,10 @@ export { default as RadioControlAccordion } from './radio-control-accordion';
 export { default as SortSelect } from './sort-select';
 export { default as Spinner } from './spinner';
 export { default as Textarea } from './textarea';
+export {
+	default as ValidatedTextInput,
+	type ValidatedTextInputHandle,
+} from './text-input/validated-text-input';
+export { default as TextInput } from './text-input/text-input';
 export { default as Title } from './title';
+export { default as ValidationInputError } from './validation-input-error';

packages/checkout/components/text-input/types.ts → packages/components/text-input/types.ts

@@ -11,7 +11,7 @@ export interface ValidatedTextInputProps
 	// id to use for the input. If not provided, an id will be generated.
 	id?: string;
 	// Unique instance ID. id will be used instead if provided.
-	instanceId: string;
+	instanceId?: string | undefined;
 	// Class name to add to the input.
 	className?: string | undefined;
 	// aria-describedby attribute to add to the input.

packages/checkout/components/text-input/validated-text-input.tsx → packages/components/text-input/validated-text-input.tsx

@@ -22,7 +22,7 @@ import { useInstanceId } from '@wordpress/compose';
 import TextInput from './text-input';
 import './style.scss';
 import { ValidationInputError } from '../validation-input-error';
-import { getValidityMessageForInput } from '../../utils';
+import { getValidityMessageForInput } from '../../checkout/utils';
 import { ValidatedTextInputProps } from './types';
 
 export type ValidatedTextInputHandle = {

packages/components/validation-input-error/index.tsx

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { VALIDATION_STORE_KEY } from '@woocommerce/block-data';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+interface ValidationInputErrorProps {
+	errorMessage?: string;
+	propertyName?: string;
+	elementId?: string;
+}
+
+export const ValidationInputError = ( {
+	errorMessage = '',
+	propertyName = '',
+	elementId = '',
+}: ValidationInputErrorProps ): JSX.Element | null => {
+	const { validationError, validationErrorId } = useSelect( ( select ) => {
+		const store = select( VALIDATION_STORE_KEY );
+		return {
+			validationError: store.getValidationError( propertyName ),
+			validationErrorId: store.getValidationErrorId( elementId ),
+		};
+	} );
+
+	if ( ! errorMessage || typeof errorMessage !== 'string' ) {
+		if ( validationError?.message && ! validationError?.hidden ) {
+			errorMessage = validationError.message;
+		} else {
+			return null;
+		}
+	}
+
+	return (
+		<div className="wc-block-components-validation-error" role="alert">
+			<p id={ validationErrorId }>{ errorMessage }</p>
+		</div>
+	);
+};
+
+export default ValidationInputError;