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: "autocomplete",
  type: "parallel",
  context: {
    hits: [],
    highlightedIndex: null
  },
  states: {
    searchBox: {
      initial: "idle",
      states: {
        idle: {
          entry: ["reset", "hello"],
          on: { INPUT: "searching" }
        },
        searching: {
          entry: ["search"],
          on: {
            FETCHED: "success",
            INPUT: "searching",
            RESET_SEARCH: "idle"
          }
        },
        success: {
          entry: ["setHits", "openOrCloseDropdown"],
          on: { INPUT: "searching", RESET_SEARCH: "idle" }
        }
      }
    },
    dropdown: {
      initial: "closed",
      states: {
        closed: {
          on: { OPEN: "opened" }
        },
        opened: {
          on: { CLOSE: "closed" }
        }
      }
    },
    highlight: {
      initial: "none",
      states: {
        none: {
          entry: ["resetHighlightedIndex"],
          on: {
            HIGHLIGHT_NEXT: { target: "highlighted", cond: "hasHits" },
            HIGHLIGHT_PREV: { target: "highlighted", cond: "hasHits" }
          }
        },
        highlighted: {
          entry: ["updateHighlightedIndex"],
          on: {
            HIGHLIGHT_NEXT: "highlighted",
            HIGHLIGHT_PREV: "highlighted",
            RESET_HIGHLIGHT: "none"
          }
        }
      }
    }
  }
});