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

machine.js

const documentUploadSheetStates = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        DELETE_ALL: 'idle',
        FOCUS_INPUT: 'typing',
      },
    },
    typing: {
      on: {
        ENTER_FILENAME: {
          actions: 'setEmail',
        },
        DELETE_ALL: 'idle',
        BLUR_INPUT: 'idle',
      },
    },
  },
  actions: {
    setEmail: assign((context, event) => ({
      fileName: event.value,
    })),
  },
};

const userInterfaceMachine = Machine(
  {
    id: 'UI',
    initial: 'allClosed',
    context: {
      selectedDocumentTypeId: '',
      fileName: '',
    },
    states: {
      allClosed: {
        on: {
          INITIALIZE_UPLOAD_PROCESS: 'documentTypePickerSheetOpen',
        },
      },
      documentTypePickerSheetOpen: {
        on: {
          CANCEL: 'allClosed',
          SELECT_DOCUMENT_TYPE: {
            target: 'documentUploadSheetOpen',
            actions: [
              'setSelectedDocumentType', 'openFilePicker'
              ],
          },
        },
      },
      documentUploadSheetOpen: {
        on: {
          CANCEL: 'allClosed',
          SUBMIT: 'allClosed',
        },
        ...documentUploadSheetStates,
      },
    },
  },
  {
    actions: {
      setSelectedDocumentType: assign((context, event) => ({
        selectedDocumentTypeId: event.value,
      })),
      openFilePicker: ()=> {}
    },
  },
);