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

machine.js

  const inputMachine = Machine({
    id: 'input',
    type: 'parallel',
    context: {
      value: '',
      hasChanges: false,
    },
    states: {
      focusStatus: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              FOCUS: 'focused',
            },
          },
          focused: {
            on: {
              BLUR: 'idle',
              CHANGE: { actions: 'updateValue' },
            },
          },
        },
      },
      dirtyStatus: {
        initial: 'clean',
        states: {
          clean: {
            on: {
              FOCUS: 'pendingDirty',
              FORCE_DIRTY: 'dirty' // enable all fields to be made dirty on form submission
            },
          },
          // This allows us to track FOCUS + CHANGE + BLUR before showing an error if this is dirty and invalid
          pendingDirty: {
            on: {
              BLUR: [
                { target: 'dirty', cond: 'isChanged' },
                { target: 'clean' },
              ],
              CHANGE: { actions: 'markChanged' },
            },
          },
          dirty: {},
        },
      },
      validStatus: {
        initial: 'unknown',
        states: {
          unknown: {
            on: {
              '': [{ target: 'valid', cond: 'isValid' }, { target: 'invalid' }],
            },
          },
          valid: {
            on: {
              CHANGE: 'unknown',
            },
          },
          invalid: {
            on: {
              CHANGE: 'unknown',
            },
          },
        },
      },
    },
  },
  {
    actions: {
      updateValue: assign({
        value: (_, event) => event.payload,
      }),
      markChanged: assign({ hasChanges: () => true }),
    },
    guards: {
      isValid: context => context.value && context.value.length > 2,
      isChanged: context => context.hasChanges,
    },
  });