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

machine.js

const assetManagerViewMachine = Machine(
  {
    id: "assetManagerView",
    initial: "closed",
    context: {
      assetsSelected: 0
    },
    states: {
      closed: {
        on: {
          OPEN_SIDE: "side",
          OPEN_MASTER: "master"
        }
      },
      side: {
        on: {
          CLOSE: "closed",
          OPEN_MASTER: "master"
        }
      },
      master: {
        exit: ['resetAssetsSelected'],
        on: {
          CLOSE: "closed",
          OPEN_SIDE: "side",
          SELECT_ASSET: {
            target: ".selecting",
            actions: ["incAssetsSelected"]
          }
        },
        initial: "idle",
        states: {
          idle: {},
          selecting: {
            on: {
              DESELECT_ASSET:{
                target: 'deselecting',
                actions: ['decAssetsSelected']
              }
            }
          },
          deselecting: {
            on: {
              "": [
                { target: "idle", cond: "noAssetsSelected" },
                { target: "selecting" }
              ]
            }
          }
        }
      }
    }
  },
  {
    actions: {
      incAssetsSelected: assign({
        assetsSelected: ctx => ctx.assetsSelected + 1
      }),
      decAssetsSelected: assign({
        assetsSelected: ctx => ctx.assetsSelected - 1
      }),
      resetAssetsSelected: assign({
        assetsSelected: 0
      })
    },
    guards: {
      noAssetsSelected: ctx => ctx.assetsSelected === 0
    }
  }
);