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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const rovingTabIndexMachine = Machine({
    id: 'rovingTabIndex',
    initial: 'inactive',
    context: {
      n: 5,
      selectedIndex: 0,
    },
    states: {
      inactive: {
        on: {
          updateCount: {
            actions: ['updateCount']
          },
          activate: {
            target: 'active',
            actions: ['setInitialTabIndex'],
          }
        },
      },
      active: {
        on: {
          updateCount: {
            actions: ['updateCount']
          },
          deactivate: 'inactive',
          forward: [
            {
              target: 'active',
              actions: ['moveToStart'],
              cond: 'isEnd'
            },
            {
              target: 'active',
              actions: ['forward']
            }
          ],
          backward: [
            {
              target: 'active',
              actions: ['moveToEnd'],
              cond: 'isStart',
            },
            {
              target: 'active',
              actions: ['backward'],
            }
          ],
          movetoStart: {
            target: 'active',
            actions: ['moveToStart'],
          },
          movetoEnd: {
            target: 'active',
            actions: ['moveToEnd'],
          }  
        }
      }
    },
  },
  {
    actions: {
      forward: assign({
        selectedIndex: (ctx) => ctx.selectedIndex + 1
      }),
      backward: assign({
        selectedIndex: (ctx) => ctx.selectedIndex - 1
      }),
      moveToStart: assign({
        selectedIndex: 0
      }),
      moveToEnd: assign({
        selectedIndex: (ctx) => ctx.n - 1
      }),
      updateCount: assign({
        n: 3,
        selectedIndex: (ctx, event) => Math.min(ctx.selectedIndex, event.count)
      })
    },
    guards: {
      isEnd: ctx => ctx.selectedIndex >= ctx.n - 1,
      isStart: ctx => ctx.selectedIndex <= 0
    }
  });