function ValidationMessage({
  message,
  open = false,
  onClose = () => {},
}) {
  const [showError, setShowError] = useState(open);

  useEffect(() => {
    setShowError(open);
  }, [open]);

  /**
   * Closes the validation error message and notifies parent
   *
   * @param {Event} event
   */
  const closeValidationError = event => {
    event.preventDefault();
    setShowError(false);
    onClose();
  };

  return (
    <input
      type="button"
      data-testid={showError ? 'message-open' : 'message-closed'}
      onClick={closeValidationError}
      className={classnames(
        'absolute z-10 h-touch-minimum shadow',
        'text-white border-0 bg-error whitespace-nowrap overflow-hidden',
        // Narrow viewports position the message to the right of the input
        'left-full',
        // Sm and larger breakpoints position the message to the left of the input
        'sm:left-0 sm:-translate-x-full',
        'hyp-u-outline-on-keyboard-focus',
        {
          'animate-validationMessageOpen': showError,
          'animate-validationMessageClose': !showError,
        }
      )}
      value={message}
      tabIndex={showError ? 0 : -1}
    />
  );
}
/**
 * Shows a single validation error message that can be open or closed.
 * A user can also close the message by clicking on it.
 *
 * @param {ValidationMessageProps} props
 */
Shows a single validation error message that can be open or closed.
A user can also close the message by clicking on it.


Shows a single validation error message that can be open or closed . A user can also close the message by clicking on it .
function ValidationMessage({
  message,
  open = false,
  onClose = () => {},
}) {
  const [showError, setShowError] = useState(open);
  useEffect(() => {
    setShowError(open);
  }, [open]);
  const closeValidationError = event => {
    event.preventDefault();
    setShowError(false);
    onClose();
  };
  return (
    <input
      type="button"
      data-testid={showError ? 'message-open' : 'message-closed'}
      onClick={closeValidationError}
      className={classnames(
        'absolute z-10 h-touch-minimum shadow',
        'text-white border-0 bg-error whitespace-nowrap overflow-hidden',
        'left-full',
        'sm:left-0 sm:-translate-x-full',
        'hyp-u-outline-on-keyboard-focus',
        {
          'animate-validationMessageOpen': showError,
          'animate-validationMessageClose': !showError,
        }
      )}
      value={message}
      tabIndex={showError ? 0 : -1}
    />
  );
}
function ValidationMessage ( { message , open = false , onClose = ( ) => { } , } ) { const [ showError , setShowError ] = useState ( open ) ; useEffect ( ( ) => { setShowError ( open ) ; } , [ open ] ) ; const closeValidationError = event => { event . preventDefault ( ) ; setShowError ( false ) ; onClose ( ) ; } ; return ( < input type = "button" data-testid = { showError ? 'message-open' : 'message-closed' } onClick = { closeValidationError } className = { classnames ( 'absolute z-10 h-touch-minimum shadow' , 'text-white border-0 bg-error whitespace-nowrap overflow-hidden' , 'left-full' , 'sm:left-0 sm:-translate-x-full' , 'hyp-u-outline-on-keyboard-focus' , { 'animate-validationMessageOpen' : showError , 'animate-validationMessageClose' : ! showError , } ) } value = { message } tabIndex = { showError ? 0 : - 1 } / > ) ; }
Shows a single validation error message that can be open or closed.
Shows a single validation error message that can be open or closed .
/**
   * Closes the validation error message and notifies parent
   *
   * @param {Event} event
   */ // Narrow viewports position the message to the right of the input // Sm and larger breakpoints position the message to the left of the input