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

machine.js

const itemMachine = Machine(
  {
    id: "item",
    context: {
      view: "SIDE",
    },
    on: {
      SELECT_ALL: "forSelection.selected",
      SET_VIEW: {
        target: ["forHover.idle", "forSelection.unselected"],
        actions: ["setView"],
      },
      SET_VIEW_FULL: {
        target: ["forHover.idle", "forSelection.unselected"],
        actions: ["setViewFull"],
      },
      SET_VIEW_SIDE: {
        target: ["forHover.idle", "forSelection.unselected"],
        actions: ["setViewSide"],
      },
      UNSELECT_ALL: "forSelection.unselected",
    },
    type: "parallel",
    states: {
      forHover: {
        initial: "idle",
        states: {
          idle: {
            on: {
              HOVER: "hovered",
            },
          },
          hovered: {
            entry: ["hoverItem", "updateAssetSelection"],
            exit: ["leaveItem", "resetAssetSelection"],
            initial: "normal",
            states: {
              normal: {
                on: {
                  PRESELECT: {
                    target: "preselected",
                    cond: "isFullView",
                  },
                },
              },
              preselected: {
                on: {
                  LEAVE: "normal",
                },
              },
            },
            on: {
              LEAVE: "idle",
            },
          },
        },
      },
      forSelection: {
        initial: "unselected",
        states: {
          unselected: {
            on: {
              SELECT: "selected",
            },
          },
          selected: {
            on: {
              UNSELECT: "unselected",
            },
          },
        },
      },
    },
  },
  {
    actions: {
      setView: assign((ctx, evt) => ({
        view: evt.view,
      })),
      setViewFull: assign({view: 'FULL'}),
      setViewSide: assign({view: 'SIDE' })
    },
    guards: {
      isFullView: (ctx) => ctx.view === "FULL",
    },
  }
);