[pickers] Allow custom fields to validate the value

[flaviendelangle]

Closes #14495

Changes

useValidation

• No longer require to pass isSameError and defaultErrorState to useValidation, instead bind the valueManager direction to the validator (when using validateTime, we always need the isSameError and defaultErrorState of the singleItemValueManager
• Move the timezone, the value and the onChange outside of the props object passed to the useValidation hook. We often override these properties (because we don't want the one in the prop, we want the one with a default value, the one of the internal state, etc...), we were often doing props: { ...props, timezone, value: state.value } which was very error prone. Now props only contains the validation props (minDate, ...), we could even consider renaming it.
• Return additional information from useValidation (hasValidationError and getValidationErrorForNewValue) to make sure that people never need utils or valueManager to manage their error, useValidation should be sufficient.

Field components

• Create new DateFieldInPickerProps, TimeFieldInPickerProps, etc... interfaces that simplifies dramatically how to type custom fields. They contain the props the field actually receives from the picker.

New DX

import { Dayjs } from 'dayjs';
import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
import { DateFieldInPickerProps } from '@mui/x-date-pickers/DateField';
// Should be moved to a public endpoint
import { splitFieldInternalAndForwardedProps } from '@mui/x-date-pickers/internals';

function CustomField(props: DateFieldInPickerProps<Dayjs, false>) {
  const { internalProps, forwardedProps } = splitFieldInternalAndForwardedProps(
    props,
    'date',
  );

  const { value, timezone, onError } = internalProps;

  const { hasValidationError } = useValidation({
    validator: validateDate,
    value,
    timezone,
    onError,
    props: internalProps,
  });

  // Return the desired UI
  return <SomeComponent {...forwardedProps} />
}

And if you want to

Demo

• Demo source
• Demo preview

Extracted PRs

• [pickers] Improve onError JSDoc #14492
• [pickers] Move multi input range field validation tests to the describe test file #14501
• [fields] Improve useSplitFieldProps and make it public #14514

Follow up

• Build a public demo of a read-only field
• Build a public demo of a masked field ([docs] Try to create a recipe with a masked DateField #13515)
• Apply the improvements to all the custom field demos (add support for validation to autocomplete demo, use the simplified typing everywhere, ...)

[mui-bot]

Deploy preview: https://deploy-preview-14486--material-ui-x.netlify.app/

Updated pages:

• docs/data/date-pickers/experimentation/experimentation.md

Generated by 🚫 dangerJS against d6cc98e

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[LukasTy]

Great work! 👍
This is a masive improvement! 💙 💯
The new custom field DX looks awesome. 🙌