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 hoverStates = {
    initial: 'unhovered',
    states: {
      unhovered: {
        on: {
          MOUSE_ENTER: 'hovered'
        }
      },
      hovered: {
        on: {
          MOUSE_EXIT: 'unhovered'
        }
      }
    }
  }
  
  const focusStates = {
    initial: 'unfocused',
    states: {
      unfocused: {
        on: {
          FOCUS: 'focused'
        }
      },
      focused: {
        on: {
          BLUR: 'unfocused'
        }
      }
    }
  }
  
  const fillStates = {
    initial: 'empty',
    states: {
      empty: {
        on: { ADD_TEXT: 'filled' }
      },
      filled: {
        on: { CLEAR: 'empty' }
      }
    }
  }
  
  const validationStates = {
    initial: 'noError',
    states: {
      noError: {
        on: { 
          VALIDATE: 'validating' 
    
        }
      },
      validating: {
        on: {
          INVALID: 'error',
          VALID: 'noError'
        }
      },
      error: {
        on: { 
          SUCCESS: 'noError'
        }
      }
    }
  }
  
  const enableStates = {
    type: 'parallel',
    states: {
      validation: {
        ...validationStates
      },
      hover: {
        ...hoverStates
      }
    }
  };
  
  const operableStates = {
    initial: 'enabled',
    states: {
      enabled: {
        on: {
          DISABLE: 'disabled'
        },
        ...enableStates
      },
      disabled: {
        on: {
          ENABLE: 'enabled'
        }
      }
    }
  }
  
  const inputMachine = Machine({
    id: 'textfield',
    type: 'parallel',
    states: {
     fill: {
       ...fillStates
     },
     operable: {
       ...operableStates
     },
     focus: {
       ...focusStates
     }
    }
  });