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

machine.js

const autocompleteMachine = Machine({
    id: "autocomplete",
    type: "parallel",
    context: {
        hits: [],
        highlightedIndex: null
    },
    states: {
        searchBox: {
            initial: "idle",
            states: {
                idle: {
                    entry: ["reset", "hello"],
                    on: { INPUT: "debounce" }
                },
                debounce: {
                    states: {
                        debouncing: {
                            invoke: {
                                id: "debounce",
                                src: (_, { data: { query } }) =>
                                    new Promise(resolve => {
                                        setTimeout(() => resolve(query), 1500);
                                    }),
                                onDone: {target: "#autocomplete.searchBox.searching", actions: ["search"]}
                            }
                        },
                        debouncerestart: {
                            on: {
                                "": "debouncing"
                            }
                        },
                        settled: {
                            on: {
                                // SETTLED: {target: "#autocomplete.searchBox.searching"}
                            }
                        }
                    },
                    initial: "debouncing",
                    on: {
                        INPUT: ".debouncerestart"
                    }
                },
                searching: {
                    // entry: ["search"],
                    on: {
                        FETCHED: "success",
                        RESET_SEARCH: "idle"
                    }
                },
                success: {
                    entry: ["setHits", "openOrCloseDropdown"],
                    on: { INPUT: "debounce", 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"
                    }
                }
            }
        }
    }
});