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

machine.js

const buttonMachine = Machine({
  key: 'button',
  initial: 'activated',
  context: {
    hasLoading: true,
    hasSuccess: false,
    hasFailure: false,
    isFocused: false,
    isMouseIn: false,
    isKeyboardIn: false
  },
  states: {
    activated: {
      initial: 'basic',
      states: {
        basic: {
          initial: 'idle',
          type: 'parallel',
          states: {
            mouse:{
              initial: 'out',
              states: {
                out:{
                  entry: assign({isMouseIn: false}),
                  on: { 
                    MOUSEOVER: 'in',
                  }
                },
                in:{
                  initial: 'hovered',
                  entry: assign({isMouseIn: true}),
                  states: {
                    hovered:{
                      on: { 
                        MOUSEDOWN: 'active',
                      }
                    },
                    active:{
                      on: {
                        MOUSEUP: {
                          target: 'hovered',
                          actions: ['emitClick']
                        },
                      }
                    }
                  },
                  on: {
                    MOUSELEAVE: 'out',
                  }
                }
              }
            },
            keyboard:{
              initial: 'out',
              states: {
                out:{
                  entry: assign({isKeyboardIn: false}),
                  on: { 
                    FOCUSIN: 'in',
                  }
                },
                in:{
                  initial: 'hovered',
                  entry: assign({isKeyboardIn: true}),
                  states: {
                    hovered:{
                      on: { 
                        ENTERDOWN: 'active',
                      }
                    },
                    active:{
                      on: {
                        ENTERUP: {
                          target: 'hovered',
                          actions: ['emitClick']
                        },
                        ESCAPE: 'hovered'
                      }
                    }
                  },
                  on: {
                    FOCUSOUT: 'out',
                  }
                }
              }
            },
            idle: {
              entry: assign({isFocused: false}),
              on: {
                MOUSEOVER: {
                  target: 'focused'
                },
                FOCUSIN: {
                  target: 'focused'
                }
              }
            },
            focused: {
              initial: 'hovered',
              entry: assign({isFocused: true}),
              states: {
                hovered: {
                  on: { 
                    MOUSEDOWN: 'holdingClick',
                    ENTERDOWN: 'holdingEnter',
                  }
                },
                holdingClick: {
                  on: {
                    MOUSEUP: {
                      target: 'hovered',
                      actions: ['emitClick']
                    },
                  }
                },
                holdingEnter:{
                  on: {
                      ENTERUP: {
                        target: 'hovered',
                        actions: ['emitClick'],
                    },
                    ESCAPE: 'hovered'
                  }
                }
              },
              on: {
                FOCUSOUT: 'idle',
                MOUSELEAVE: 'idle',
              }
            }
          },
          on:{
            LOAD: {
              target: 'animated',
              cond: (context) => context.hasLoading
            }
          }
        },
        animated: {
          initial: "loading",
          states: {
            loading: {
              on: {
                LOAD_SUCCESS: [{
                    target: 'success',
                    cond: (context) => context.hasSuccess
                  },
                  {
                    invoke: {
                      id: 'sendBack',
                      src: (context, event) => (callback, onReceive) => {
                        callback('BACK')
                      }
                    },
                  }
                ],
                LOAD_FAILURE: [{
                    target: 'failure',
                    cond: (context) => context.hasFailure
                  },
                  {
                    target: '#button.activated.basic.focused',
                    cond:  (context) => context.isFocused
                  },
                  {
                    target: '#button.activated.basic.idle',
                    cond:  (context) => !context.isFocused
                  }
                ]
              }
            },
            success: {
              after: {
                5000: [{
                    target: '#button.activated.basic.focused',
                    cond:  (context) => context.isFocused
                  },
                  {
                    target: '#button.activated.basic.idle',
                    cond:  (context) => !context.isFocused
                  }
                ]
              },
            },
            failure: {
              after: {
                5000: [{
                    target: '#button.activated.basic.focused',
                    cond:  (context) => context.isFocused
                  },
                  {
                    target: '#button.activated.basic.idle',
                    cond:  (context) => !context.isFocused
                  }
                ]
              },
            }
          },
          on: {
            MOUSELEAVE: {
              actions: assign({isMouseIn: false}),
            },
            MOUSEOVER: {
              actions: assign({isMouseIn: true}),
            },
            FOCUSOUT: {
              actions: assign({isKeyboardIn: false}),
            },
            FOCUSIN: {
              actions: assign({isKeyboardIn: true}),
            },
            BACK: [
              {
                    target: ['#button.activated.basic.mouse.in', '#button.activated.basic.keyboard.in'],
                    cond:  (context) => context.isMouseIn && context.isKeyboardIn
              },
            ],
          }
        }
      },
      on: {
        DEACTIVATE: 'deactivated',
      }
    },
    deactivated: {
      on: {
        ACTIVATE: 'activated'
      }
    }
  }
}, {
  actions: {
    emitClick: () => { console.log('click') }
  }
});