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

machine.js

const singleMachine = Machine({
  id: 'single',
  initial: 'winOnly',
  context: {
    stake: '',
  },
  states: {
    winOnly: {
      id: 'winOnly',
      initial: 'idle',
      states: {
        idle: {
          on: {
            FOCUS_STAKE: 'changingStake',
            TOGGLE_EACH_WAY: '#eachWay',
            TOGGLE_SELECTIONS: 'expanded',
          },
        },
        changingStake: {
          on: {
            PLACE_BET: {
              actions: sendParent('PLACE_BET'),
            },
            TOGGLE_EACH_WAY: '#eachWay',
            TOGGLE_SELECTIONS: 'expanded',
          },
        },
        expanded: {
          initial: 'idle',
          states: {
            idle: {
              on: {
                FOCUS_STAKE: 'changingStake',
                TOGGLE_EACH_WAY: '#eachWay.expanded',
                TOGGLE_SELECTIONS: '#winOnly',
              },
            },
            changingStake: {
              on: {
                PLACE_BET: {
                  actions: sendParent('PLACE_BET'),
                },
                TOGGLE_EACH_WAY: '#eachWay.expanded',
                TOGGLE_SELECTIONS: '#winOnly',
              },
            },
          },
        },
      },
    },
    eachWay: {
      id: 'eachWay',
      initial: 'idle',
      states: {
        idle: {
          on: {
            FOCUS_STAKE: 'changingStake',
            TOGGLE_EACH_WAY: '#winOnly',
            TOGGLE_SELECTIONS: 'expanded',
          },
        },
        changingStake: {
          on: {
            PLACE_BET: {
              actions: sendParent('PLACE_BET'),
            },
            TOGGLE_EACH_WAY: '#winOnly',
            TOGGLE_SELECTIONS: 'expanded',
          },
        },
        expanded: {
          initial: 'idle',
          states: {
            idle: {
              on: {
                FOCUS_STAKE: 'changingStake',
                TOGGLE_EACH_WAY: '#winOnly.expanded',
                TOGGLE_SELECTIONS: '#eachWay',
              },
            },
            changingStake: {
              on: {
                PLACE_BET: {
                  actions: sendParent('PLACE_BET'),
                },
                TOGGLE_EACH_WAY: '#winOnly.expanded',
                TOGGLE_SELECTIONS: '#eachWay',
              },
            },
          },
        },
      },
    },
  },
});