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

machine.js

const filterBubbleMachineDefinition = Machine(
    {
        id: 'filterBubbleMachine',
      initial: 'dropdownHidden',
      states: {
        dropdownHidden: {
          on: {
            SEARCH_BAR_FOCUSED: {
              target: 'criteriaShown',
              actions: ['showCriteria'],
            },
          },
        },
        criteriaShown: {
          on: {
            SELECT_CRITERION: {
              target: 'valuesShown',
              actions: ['hideDropdown', 'showValues'],
            },
            SEARCH_BAR_DEFOCUSED: {
              target: 'dropdownHidden',
              actions: ['hideDropdown'],
            },
          },
        },
        valuesShown: {
          on: {
            SELECT_VALUE: 'dropdownHidden',
            SEARCH_BAR_DEFOCUSED: 'dropdownHidden',
          },
        },
      },
  })