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

machine.js

const buttonMachine = Machine(
  {
      id: "submitButtonWithTransitions",
      initial: "disabled",
      states: {
        active: {
          on: {
            HOVER: "hovered",
            PRESS: "pressed",
            CLICK: "clicked",
            DISABLE: "disabled",
            FOCUS: "focused"
          }
        },
        disabled: {
          on: {
            ENABLE: "active"
          }
        },
        hovered: {
          on: {
            HOVEROFF: "active",
            PRESS: "pressed"
          }
        },
        pressed: {
          on: {
            "": "clicked"
          }
        },
        clicked: {
          invoke: {
            id: "asyncFn",
            src: "asyncFn",
            onDone: "success",
            onError: "retry"
          }
        },
        focused: {
          on: {
            PRESS: "pressed",
            BLUR: "active"
          }
        },
        success: {
          type: 'final'
        },
        retry: {
          on: {
            HOVER: "hovered",
            PRESS: "pressed",
            CLICK: "clicked",
            DISABLE: "disabled",
            FOCUS: "focused"
          }
        }
      }
    },
  {
    services: {
      asyncFn: (ctx, evt) => new Promise((resolve, reject) => setTimeout(() => (Math.random() < 0.5 ? reject() : resolve()), 1000))
    }
  }
);