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

machine.js

  const fetchMachine = Machine({
    id: 'Radio Group',
    initial: 'unfocused',
    context: {
      // 
      insideToolbar: false,
      checkedIndex: -1
    },
    states: {
      unfocused: {
        on: {
          TAB: 'focused'
        }
      },
      focused: {
        on: {
          KEYDOWN: [
            {
              target: "unfocused",
              cond: "tab"
            },
            {
              target: "unfocused",
              cond: "shiftTab"
            },
            {
              target: "focused",
              cond: "rightOrDown"
            },
            {
              target: "focused",
              cond: "leftOrUp"
            }
          ],
        }
      },
      success: {
        type: 'final'
      },
      failure: {
        on: {
          RETRY: {
            target: 'unfocused',
            actions: assign({
              retries: (context, event) => context.retries + 1
            })
          }
        }
      }
    }
  },{
    guards: {
      tab: (c,e) => {
        // tab key, no shift
        if(e.which == 9 && !e.shiftKey) {
          // no other modifiers
          return !(e.altKey || e.ctrlKey || e.metaKey)
        }
        return false
      },
      shiftTab: (c,e) => {
        // tab key w/ shift
        if(e.which == 9 && e.shiftKey) {
          // no other modifiers
          return !(e.altKey || e.ctrlKey || e.metaKey)
        }
        return false
      },
      rightOrDown: () => {
        return true
      },
      leftOrUp: () => {
        return true
      }
    }
  });