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

machine.js

const toggleSubDialogOpen = assign({
    subDialogOpen: context => !context.subDialogOpen
  });
  
  const canOpenSubDialog = context => !context.subDialogOpen;
  
  const hasSearchStates = {
    type: 'parallel',
    states: {
      unsavedChanges: {
        initial: 'unsavedClosed',
        states: {
          unsavedClosed: {
            on: { 
              TOGGLE_UNSAVED: [
                {
                  target: 'unsavedOpen',
                  actions: 'toggleSubDialogOpen',
                  cond: 'canOpenSubDialog'
                }
              ]
            }
          },
          unsavedOpen: {
            on: { 
              TOGGLE_UNSAVED: [
                {
                  target: 'unsavedClosed',
                  actions: 'toggleSubDialogOpen',
                  cond: 'canOpenSubDialog'
                }
              ]
            }
          }
        }
      },
      saveAs: {
        initial: 'saveAsClosed',
        states: {
          saveAsClosed: {
            on: { 
              TOGGLE_SAVE_AS: [
                {
                  target: 'saveAsOpen',
                  actions: 'toggleSubDialogOpen'
                }
              ]
            }
          },
          saveAsOpen: {
            on: { 
              TOGGLE_SAVE_AS: [
                {
                  target: 'saveAsClosed',
                  actions: 'toggleSubDialogOpen'
                }
              ]
            }
          }
        }
      }
    }
  }
  
  const openStates = {
    initial: 'noSearch',
    context: {
      subDialogOpen: false
    },
    states: {
      noSearch: {
        on: {
          SEARCH_SPECIFIED: 'hasSearch',
          CLOSE: '#closed'
        }
      },
      hasSearch: {
        on: {
          SEARCH_CLEARED: 'noSearch'
        },
        ...hasSearchStates
      }
    }
  }
    
  const findDialogMachine = Machine({
    id: 'findDialog',
    key: 'findDialog',
    initial: 'closed',
    states: {
      closed: {
        id: 'closed',
        on: {
          TOGGLE: 'open'
        }
      },
      open: {
        on: {
          TOGGLE: 'closed'
        },
        ...openStates
      }
    }
  }, {
    actions: {
      toggleSubDialogOpen
    },
    guards: {
      canOpenSubDialog
    }
  });