index.tsx000064400000002144151554611100006413 0ustar00/**
 * 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;
style.scss000064400000000626151554611100006604 0ustar00.wc-block-components-validation-error {
	@include font-size(smaller);
	color: $alert-red;
	max-width: 100%;
	white-space: normal;

	> p {
		margin: 0;
		padding: $gap-smallest 0 0 0;
	}
}

.has-dark-mode-palette .wc-block-components-validation-error {
	color: color.adjust($alert-red, $lightness: 30%);
}

.wc-block-components-select + .wc-block-components-validation-error {
	margin-bottom: $gap-large;
}