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: {
              target: 'dirty',
              actions: assign({
                value: (context, event) =>
                  event.value
              })
            }
          }
        },
        dirty: {
          initial: 'debouncing',
          states: {
            debouncing: {
              after: {
                500: 'validating'
              }
            },
            validating: {
              entry: 'start validation',
              on: {
                invalid: {
                  target: 'invalid',
                  actions: assign({
                    output: ''
                  })
                },
                valid: {
                  target: 'valid',
                  actions: assign({
                    output: (context, event) =>
                      event.value
                  })
                }
              }
            },
            invalid: {},
            valid: {}
          },
          on: {
            unfocus: {
              target: '.validating',
              internal: true,
              actions: 'cancel validation'
            },
            change: { 
              target: '.debouncing',
              internal: false,
              actions: [
                assign({
                  value: (context, event) =>
                    event.value
                }),
                'cancel validation'
              ]
            }
          }
        }
      }
    }
  }
}, {
  guards: {
    'value is empty': (context, event) =>
      context.value === '',
    'value is not empty': (context, event) =>
      context.value !== ''
  }
});