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

machine.js

const menuMachine = Machine(
  {
    id: "menu-machine",
    initial: "idle",
    context: {
      activeDescendantId: null,
      menuId: "",
      buttonId: "",
      onSelect: () => {}
    },
    states: {
      idle: {
        on: {
          BUTTON_CLICK: {
            target: "open",
            actions: "focusFirstItem"
          },
          BUTTON_FOCUS: "close"
        }
      },
      close: {
        entry: ["resetId", "focusButton"],
        on: {
          BUTTON_CLICK: {
            target: "open",
            actions: "focusFirstItem"
          },
          BUTTON_BLUR: "idle",
          ARROW_DOWN: {
            target: "open",
            actions: "focusFirstItem"
          },
          ARROW_UP: {
            target: "open",
            actions: "focusLastItem"
          }
        }
      },
      open: {
        entry: "focusMenu",
        on: {
          BUTTON_CLICK: "close",
          ARROW_UP: {
            actions: "focusPrevItem"
          },
          ARROW_DOWN: {
            actions: "focusNextItem"
          },
          BLUR: "close",
          ENTER: {
            target: "close",
            actions: "selectCurrentItem"
          },
          ESCAPE: "close",
          ITEM_POINTEROVER: {
            actions: "focusItem"
          },
          ITEM_POINTERLEAVE: {
            actions: "resetId"
          },
          ITEM_CLICK: {
            target: "close",
            actions: "selectCurrentItem"
          }
        }
      }
    }
  },
);