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

machine.js

const inputActions = {
  CHANGE: "input/change",
  FOCUS: "input/focus",
  BLUR: "input/blur"
};

const valid = "editing.dirty.valid";

const inputMachine = Machine(
  {
    id: "input",
    initial: "pristine",
    context: { value: "", errors: [] },
    states: {
      pristine: {
        on: {
          "": {
            cond: "validate",
            target: "editing.dirty.valid"
          },
          [inputActions.FOCUS]: {
            target: "editing",
            actions: "focusInput"
          }
        }
      },
      editing: {
        initial: "focused",
        on: {
          [inputActions.CHANGE]: [
            {
              cond: "validate",
              target: "editing.dirty.valid",
              actions: "updateValue"
            },
            {
              target: "editing.dirty.invalid",
              actions: "updateValue"
            }
          ],
          [inputActions.BLUR]: {
            actions: "blurInput",
            target: ".blurred"
          }
        },
        states: {
          focused: {},
          blurred: {
            type: "final"
          },
          dirty: {
            initial: "invalid",
            states: {
              valid: {},
              invalid: {}
            }
          }
        }
      }
    }
  },
  {
    actions: {
      focusInput: () => {},
      updateValue: assign({
        value: (ctx, evt) => evt.data || ""
      })
    },
    guards: {
      validate: (ctx, evt) => evt.data === "valid"
    }
  }
);