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

machine.js

const submenuStates = {
  initial: "collapsed",
  states: {
    collapsed: {
      on: {
        "ITEM_WITH_SUBMENU.MOUSEOVER": "shouldExpand",
        "ITEM_WITH_SUBMENU.CLICK": "expanded",
      },
    },
    shouldExpand: {
      after: {
        1000: "expanded",
      },
      on: {
        "ITEM_WITH_SUBMENU.MOUSEOUT": "collapsed",
      },
    },
    expanded: {
      on: {
        "ITEM_WITH_NO_SUBMENU.MOUSEOVER": "shouldCollapse",
        "ITEM_WITH_NO_SUBMENU.CLICK": "collapsed",
      },
    },
    shouldCollapse: {
      after: {
        1000: "collapsed",
      },
      on: {
        "ITEM_WITH_SUBMENU.MOUSEOVER": "expanded",
        "ITEM_WITH_NO_SUBMENU.MOUSEOUT": "expanded",
      },
    },
  },
};

const mainMenuStates = {
  initial: "noItemSelected",
  states: {
    noItemSelected: {
      on: {
        "ITEM_WITH_NO_SUBMENU.MOUSEOVER": {
          target: "itemWithNoSubmenuSelected",
          actions: "setSelectedIndex",
        },
        "ITEM_WITH_NO_SUBMENU.CLICK": {
          target: "itemWithNoSubmenuSelected",
          actions: "setSelectedIndex",
        },
        "ITEM_WITH_SUBMENU.MOUSEOVER": {
          target: "itemWithSubmenuSelected",
          actions: "setSelectedIndex",
        },
        "ITEM_WITH_SUBMENU.CLICK": {
          target: "itemWithSubmenuSelected",
          actions: "setSelectedIndex",
        },
      },
    },
    itemWithNoSubmenuSelected: {
      on: {
        "ITEM_WITH_NO_SUBMENU.MOUSEOUT": {
          target: "noItemSelected",
          actions: "unsetSelectedIndex",
        },
        "ITEM_WITH_NO_SUBMENU.CLICK": {
          target: "itemWithNoSubmenuSelected",
          actions: "setSelectedIndex",
        },
        "ITEM_WITH_SUBMENU.CLICK": {
          target: "itemWithSubmenuSelected",
          actions: "setSelectedIndex",
        },
      },
    },
    itemWithSubmenuSelected: {
      on: {
        "ITEM_WITH_NO_SUBMENU.MOUSEOUT": {
          target: "noItemSelected",
          actions: "unsetSelectedIndex",
        },
        "ITEM_WITH_NO_SUBMENU.CLICK": {
          target: "itemWithNoSubmenuSelected",
          actions: "setSelectedIndex",
        },
        "ITEM_WITH_SUBMENU.CLICK": {
          target: "itemWithSubmenuSelected",
          actions: "setSelectedIndex",
        },
      },
    },
  },
};

const cascadingMenuMachine = Machine({
  key: "cascadingMenu",
  context: {
    selectedIndex: null,
  },
  initial: "closed",
  states: {
    closed: {
      on: {
        "MENU_BUTTON.CLICK": "open",
      },
    },
    open: {
      on: {
        "MENU_BUTTON.CLICK": "closed",
      },
      type: "parallel",
      states: {
        mainMenu: mainMenuStates,
        submenu: submenuStates,
      },
    },
  },
  actions: {
    setSelectedIndex: assign({
      selectedIndex: (context, event) => event.index,
    }),
    unsetSelectedIndex: assign({
      selectedIndex: null,
    }),
  },
});