Generated by XState Viz: https://xstate.js.org/viz

machine.js

const machine = Machine({
  id: 'field',
  context: {
    value: '',
    output: ''
  },
  type: 'parallel',
  states: {
    value: {
      initial: 'empty',
      states: {
        empty: {
          on: {
            change: {
              target: 'not empty',
              cond: 'value is not empty'
            }
          }
        },
        'not empty': {
          on: {
            change: {
              target: 'empty',
              cond: 'value is empty'
            }
          }
        }
      }
    },
    phase: {
      initial: 'untouched',
      states: {
        untouched: {
          on: {
            change: 'dirty'
          }
        },
        dirty: {
          initial: 'debouncing',
          states: {
            debouncing: {
              after: {
                5000: 'validating'
              }
            },
            validating: {
              on: {
                invalid: 'invalid',
                valid: 'valid'
              }
            },
            invalid: {},
            valid: {}
          },
          on: {
            unfocus: {
              target: '.validating',
              internal: true
            },
            change: { 
              target: '.debouncing',
              internal: false
            }
          }
        }
      }
    }
  }
}, {
  guards: {
    'value is empty': (context, event) =>
      context.value === '',
    'value is not empty': (context, event) =>
      context.value !== ''
  }
});