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

machine.js

const machine = Machine({
  id: 'field',
  type: 'parallel',
  states: {
    value: {
      initial: 'empty',
      states: {
        empty: {
          on: {
            change: 'not empty'
          }
        },
        'not empty': {
          on: {
            change: 'empty'
          }
        }
      }
    },
    phase: {
      initial: 'untouched',
      states: {
        untouched: {
          on: {
            change: 'dirty'
          }
        },
        dirty: {
          initial: 'debouncing',
          states: {
            debouncing: {
              on: {
                timeout: 'validating'
              }
            },
            validating: {
              on: {
                invalid: 'invalid',
                valid: 'valid'
              }
            },
            invalid: {},
            valid: {}
          },         
          // Attaching the transitions to the superstate
          // essentially is equal to having those transitions
          // from all the substates. "Internal" means that we
          // do not exit en re-enter the superstate, which is
          // important because of any events attached to it.
          on: {
            unfocus: {
              target: '.validating',
              internal: true
            },
            change: { 
              target: '.debouncing',
              internal: true
            }
          }
        }
      }
    }
  }
});