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

machine.js

const highlightAction = amount =>
  assign({
    highlightedIndex: (context, event) =>
      context.highlightedIndex === null ? 0 : context.highlightedIndex + amount
  });
const highlightMachine = Machine({
  id: "highlight",
  initial: "idle",
  context: {
    highlightedIndex: null
  },
  states: {
    idle: {
      on: {
        ARROW_UP: {
          target: "idle",
          actions: highlightAction(-1)
        },
        ARROW_DOWN: {
          target: "idle",
          actions: highlightAction(1)
        }
      }
    }
  }
});