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 selectMachine = Machine(
  {
    initial: 'closed',
    context: {
      tempFilter: '',
      filter: '',
      selectedIndex: 0,
    },
    states: {
      closed: {
        id: 'closed',
        on: {
          TOGGLE: 'open',
          OPEN: 'open',
        },
      },
      open: {
        initial: 'filtered',
        on: {
          TOGGLE: 'closed',
          CLOSE: 'closed',
          FILTER: {
            target: 'open.filtering',
            actions: [
              actions.assign({
                tempFilter: (context, { filter }) => filter,
              }),
              actions.cancel('debounce-filter'),
              send('APPLY_FILTER', {
                delay: 300,
                id: 'debounce-filter',
              }),
            ],
          },
        },
        states: {
          filtering: {
            on: {
              APPLY_FILTER: [
                {
                  target: 'filtered',
                  actions: [
                    actions.assign({ filter: (context) => context.tempFilter }),
                  ],
                },
              ],
            },
          },
          filtered: {
            entry: assign({
              selectedIndex: () => 0,
            }),
            on: {
              UP: {
                actions: [
                  actions.assign({
                    selectedIndex: (context) => context.selectedIndex - 1,
                  }),
                ],
                cond: 'upIsPossible',
              },
              DOWN: {
                actions: [
                  assign({
                    selectedIndex: (context) => context.selectedIndex + 1,
                  }),
                ],
                cond: 'downIsPossible',
              },
              ENTER: '#closed',
            },
          },
        },
      },
    },
  },
  {
    guards: {
      upIsPossible() {},
      downIsPossible() {},
    },
  }
);