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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchMachine = Machine({
    id: 'asyncSelectMachine',
    initial: 'idle',
    context: {
      isOpen: false,
      isLoading: false,
      query: '',
      options: [],
      selectedOption: null,
    },
    on: {
      OPEN: {actions: ['openMenu']},
      CLOSE: {target: 'idle', actions: ['closeMenu']},
    },
    states: {
      fetching: {
        invoke: {
          id: 'fetchOptions',
          src: 'fetchOptions',
          onDone: {
            target: 'completed',
          },
          onError: 'failure',
        },
        onEntry: ['loadingStarted', 'openMenu'],
        onExit: ['loadingFinished'],
        on: {
          SET_QUERY: 'typing',
        },
      },
      failure: {
        on: {
          RETRY: 'fetching',
          SET_QUERY: 'typing',
        },
      },
      completed: {
        on: {
          SET_QUERY: 'typing',
          SET_SELECTED_OPTION: {
            target: 'idle',
            actions: 'setSelectedOption',
          },
        },
      },
      idle: {
        onEntry: ['clearQuery', 'closeMenu'],
        on: {
          SET_QUERY: 'typing',
        },
      },
      typing: {
        onEntry: ['assignQuery'],
        on: {
          SET_QUERY: 'typing',
        },
        after: {
          300: {target: 'fetching', actions: ['clearOptions']},
        },
      },
    },
  });