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

machine.js

const menuButtonMachine = new Machine(
  {
    id: "menu-button",
    initial: "idle",
    context: {
      activeIndex: -1,
      items: [1, 2, 3],
      focused: ""
    },
    states: {
      idle: {
        on: {
          FOCUS: "focused"
        }
      },
      focused: {
        entry: "focus_button",
        meta: {
          message: "The button has focus"
        },
        on: {
          CLICK: {
            target: "opened",
            actions: ["focus_dropdown", "highlight_firstItem"]
          },
          ARROW_DOWN: {
            target: "opened",
            actions: ["focus_dropdown", "highlight_firstItem"]
          },
          ARROW_UP: {
            target: "opened",
            actions: ["focus_dropdown", "highlight_lastItem"]
          }
        }
      },
      opened: {
        entry: ["focus_dropdown"],
        on: {
          ARROW_DOWN: {
            actions: "increment"
          },
           ARROW_UP: {
            actions: "decrement"
          },
          ESCAPE: "closed"
        }
      },
      closed: {
        entry : ["clear_index"],
        on: { '': 'focused' }
      }
    }
  },
  {
    actions: {
      increment: assign({
        activeIndex: context => {
          const { length } = context.items;
          return (context.activeIndex + 1) % length;
        }
      }),
      decrement: assign({
        activeIndex: context => {
          const { length } = context.items;
          return (context.activeIndex - 1 + length) % length;
        }
      }),
      clear_index: assign({
        activeIndex: -1,
        focused: ""
      }),
      focus_button: assign({
        focused: "button"
      }),
       focus_dropdown: assign({
        focused: "dropdown"
      }),
      highlight_firstItem: assign({
        activeIndex: 1
      })
    }
  }
);