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: 'filter-bar',
    initial: 'unfocused',
        on: {
          DELETE: {
            target: 'refreshing',
            action: async () => {
              await this.pills[this.pills.length - 1].delete();
              pillNumber = Math.max(pillNumber - 1, 0);
            },
          },
        },
        states: {
          'unfocused': {
            on: {
              FOCUS: {
                target: 'enteringClause',
                action: () => this.focus(),
              },
            },
          },
          'enteringClause': {
            on: {
              ENTER_TEXT: {
                action: async (event) => {
                  await this.clauseInputs[pillNumber].fillIn(event.text);
                },
              },
              ENTERED_HAS_ITEMS: { target: 'autoCompletingClause' },
              ENTERED_HAS_NOITEMS: { target: 'manuallyCompletingClause' },
            },
          },
          'autoCompletingClause': {
            on: {
              SELECT: {
                target: 'enteringValue',
                action: async (event) => {
                  await this.autoCompleteWithDropdown(event.position);
                },
              },
            },
          },
          'manuallyCompletingClause': {
            on: {
              SELECT: {
                target: 'enteringValue',
                action: async () => {
                  await this.clauseInputs[pillNumber].manualySelect();
                },
              },
            },
          },
          'enteringValue': {
            on: {
              ENTER_TEXT: {
                action: async (event) => {
                  await this.valueInputs[pillNumber].fillIn(event.text);
                },
              },
              ENTERED_HAS_ITEMS: { target: 'autoCompletingValue' },
              ENTERED_HAS_NOITEMS: { target: 'manuallyCompletingValue' },
            },
          },
          'autoCompletingValue': {
            on: {
              SELECT: {
                target: 'loading',
                action: async (event) => {
                  await this.autoCompleteWithDropdown(event.position);
                },
              },
            },
          },
          'manuallyCompletingValue': {
            on: {
              SELECT: {
                target: 'loading',
                action: async () => {
                  await this.valueInputs[pillNumber].manualySelect();
                  pillNumber = Math.max(pillNumber + 1, 0);
                },
              },
            },
          },
          'loading': {
            on: { DONE: { target: 'enteringClause' } },
          },
          'refreshing': {
            on: { DONE: { target: 'unfocused' } },
          },
        },
  });