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

machine.js

const machine = Machine(
  {
    id: "Search Field",
    context: {
      filterTyped: "",
      filterApplied: "",
    },
    initial: "collapsed",
    states: {
      collapsed: {
        on: {
          "ENTER SEARCH": "expanded",
        },
      },
      expanded: {
        exit: "clear filter",
        initial: "filtering",
        states: {
          filtering: {
            entry: "apply filter",
            on: {
              "EDIT FILTER": {
                target: "typing",
                actions: "edit filter",
              },
            },
          },
          typing: {
            on: {
              "EDIT FILTER": {
                target: "typing",
                actions: "edit filter",
              },
            },
            after: {
              "debounce search": "filtering",
            },
          },
        },
        on: {
          "LEAVE SEARCH": "collapsed",
          "CLEAR FILTER": {
            actions: "clear filter",
          },
        },
      },
    },
  },
  {
    actions: {
      "edit filter": assign({
        // @ts-ignore
        filterTyped: (context, { filterTyped = "er" }) => filterTyped,
      }),

      "clear filter": assign({
        filterTyped: "",
        filterApplied: "",
      }),

      "apply filter": assign({
        // Copy the typed filter over to be applied, after debouncing
        filterApplied: ({ filterTyped }) => filterTyped,
      }),
    },

    services: {
      // 'service name': async () => {
      //   return Promise.resolve();
      // },
    },

    guards: {
      // 'guard name': (context, event) => true,
    },

    delays: {
      // NOTE: this can be a dynamic function as needed: (context, event) => value
      "debounce search": 2000,
    },
  }
);