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

machine.js

const VIEWS = {
  FULL: 'FULL',
  SIDE: 'SIDE'
}

const itemMachine = Machine({
  id: 'item',
  context: {
    view: VIEWS.SIDE,
  },
  on: {
    SELECT_ALL: 'forSelection.selected',
    UNSELECT_ALL: 'forSelection.unselected',
    SET_VIEW: {
      target: ['forHover.idle', 'forSelection.unselected'],
      actions: ['setView'],
    },
  },
  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',
          },
        },
      },
    },
  },
});