Update to MUI5

[fxlemire]

This PR picks up where @smo043 left with his draft PR. I could unfortunately not target his PR with this one since it's in a draft state.

I've tried to scope my commits as best as I could to make the review easy. I had to take a design decision for the pickers as they changed quite a lot since V4. I'm unsure about the direction I took, so feel free to modify as you see fit.

I did not write the documentation on migration yet since the design direction could potentially change.

As part of the "rebranding" commit (d822918), I've only changed what referenced to the real MUI framework. I've kept formik-material-ui and all the material-ui references as they are, as I don't know if we want to rebrand the packages to formik-mui along with the documentation URLs.

With some hope, this will help with speeding up the release of MUI V5 support. Thanks for maintaining the repo @cliedeman!

[cliedeman]

We should add a dev mode warning if we encounter a date with a string value

[cliedeman]

Is this stated somewhere in the mui5 docs?

[fxlemire]

I'm not the author of this content, I've simply moved over the old material-ui-pickers documentation

https://github.com/stackworx/formik-material-ui/blob/master/docs/docs/api/material-ui-pickers.md?plain=1#L8

[cliedeman]

nit: mui seems to have switched to clsx and I should switch this project over too at some point

[cliedeman]

@smo043 and @fxlemire thanks this is fantastic.

I have gone through the code and it looks good to go. I am going to run through the stories and then we can do some beta releases

[max-degterev]

Any chance to get this out as a beta?

[fxlemire]

@suprMax To unblock myself I've temporarily published an alpha version of this PR under @mercantile/formik-material-ui and @mercantile/formik-material-ui-lab. Feel free to use this until this gets officially published.

💡 I recommend using an alias to avoid changing the imports later on: npm i formik-material-ui@npm:@mercantile/formik-material-ui@alpha

[cliedeman]

@fxlemire @smo043

Thanks for the effort.
this has been released as

• formik-mui-lab@1.0.0-alpha.3
• formik-mui@4.0.0-alpha.3

[fxlemire]

Pleasure @cliedeman ! FYI, there is still some polishing needed around the implementation (on top of better documentation, mostly for Select and the Pickers`). For example:

• I'm not sure that validateOnChange and validateOnBlur are respected for all components that I've touched significantly (e.g. the pickers and Select)
• Found out recently that the DatePicker starts validating ASAP as opposed to once the field gets marked as touched. Tried fixing it but in the time I've put, didn't manage 😕 Some help there would be great
• There's insane code repetition in the picker implementation, we should do some refactoring there
• After some thoughts I think I introduced a performance issue (not sure? wanted to test but lacking time these days) specifically here:

  formik-mui/packages/formik-mui-lab/src/DatePicker.tsx

  Lines 39 to 52 in bcb37b4

  	((params) => (
  	<TextField
  	{...params}
  	error={showError}
  	helperText={showError ? fieldError : helperText}
  	label={label}
  	onBlur={
  	onBlur ??
  	function () {
  	setFieldTouched(field.name, true, true);
  	}
  	}
  	{...textField}
  	/>

  We probably want to extract that out of the component, because I think this renders a new component every single time now 🤔
• I think the picker props need some logic change to respect validateOnChange=false, validateOnBlur=true, something like what's below.

    // ...
    onChange:
      onChange ??
      function (date) {
        // Do not switch this order, otherwise you might cause a race condition
        // See https://github.com/formium/formik/issues/2083#issuecomment-884831583
        if (getIn(touched, field.name)) {
          setFieldTouched(field.name, true, false);
        }
        setFieldValue(field.name, date, validateOnChange ?? true);
      },
    onClose:
      onClose ??
      (() => {
        setFieldTouched(field.name, true, validateOnBlur ?? true);
      }),
    // ...

For lack of time, I don't think I'll be able to tackle these items over the next month.

That's about it. Cheers y'all, enjoy MUI!!

[cliedeman]

@fxlemire thanks for the insights, I will create tickets for the issues so we can tackle them