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