[pickers] Clean the validation internals DX to prepare for publication

docs/data/date-pickers/experimentation/CustomField.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import dayjs from 'dayjs';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import TextField from '@mui/material/TextField';
+
+import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
+
+import { splitFieldInternalAndForwardedProps } from '@mui/x-date-pickers/internals';
+
+function ReadOnlyField(props) {
+  const { internalProps, forwardedProps } = splitFieldInternalAndForwardedProps(
+    props,
+    'date',
+  );
+
+  const { value, timezone, format } = internalProps;
+  const { InputProps, slotProps, slots, ...other } = forwardedProps;
+
+  const { hasValidationError } = useValidation({
+    validator: validateDate,
+    value,
+    timezone,
+    props: internalProps,
+  });
+
+  return (
+    <TextField
+      {...other}
+      value={value == null ? '' : value.format(format)}
+      InputProps={{ ...InputProps, readOnly: true }}
+      error={hasValidationError}
+    />
+  );
+}
+
+export default function CustomField() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DatePicker']}>
+        <DatePicker
+          label="Date Picker"
+          slots={{ field: ReadOnlyField }}
+          maxDate={dayjs('2022-04-17')}
+          defaultValue={dayjs('2022-04-18')}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/experimentation/CustomField.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import TextField from '@mui/material/TextField';
+import {
+  BaseSingleInputFieldProps,
+  DateValidationError,
+  FieldSection,
+} from '@mui/x-date-pickers/models';
+import { useValidation, validateDate } from '@mui/x-date-pickers/validation';
+import { UseDateFieldProps } from '@mui/x-date-pickers/DateField';
+import {
+  BaseDateValidationProps,
+  DefaultizedProps,
+  splitFieldInternalAndForwardedProps,
+} from '@mui/x-date-pickers/internals';
+
+interface ReadOnlyDateFieldProps
+  extends DefaultizedProps<
+      UseDateFieldProps<Dayjs, false>,
+      keyof BaseDateValidationProps<Dayjs>
+    >,
+    BaseSingleInputFieldProps<
+      Dayjs | null,
+      Dayjs,
+      FieldSection,
+      false,
+      DateValidationError
+    > {}
+
+function ReadOnlyField(props: ReadOnlyDateFieldProps) {
+  const { internalProps, forwardedProps } = splitFieldInternalAndForwardedProps<
+    typeof props,
+    keyof UseDateFieldProps<any, any>
+  >(props, 'date');
+
+  const { value, timezone, format } = internalProps;
+  const { InputProps, slotProps, slots, ...other } = forwardedProps;
+
+  const { hasValidationError } = useValidation({
+    validator: validateDate,
+    value,
+    timezone,
+    props: internalProps,
+  });
+
+  return (
+    <TextField
+      {...other}
+      value={value == null ? '' : value.format(format)}
+      InputProps={{ ...InputProps, readOnly: true }}
+      error={hasValidationError}
+    />
+  );
+}
+
+export default function CustomField() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DemoContainer components={['DatePicker']}>
+        <DatePicker
+          label="Date Picker"
+          slots={{ field: ReadOnlyField }}
+          maxDate={dayjs('2022-04-17')}
+          defaultValue={dayjs('2022-04-18')}
+        />
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+}

docs/data/date-pickers/experimentation/CustomField.tsx.preview

@@ -0,0 +1,6 @@
+<DatePicker
+  label="Date Picker"
+  slots={{ field: ReadOnlyField }}
+  maxDate={dayjs('2022-04-17')}
+  defaultValue={dayjs('2022-04-18')}
+/>

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

@@ -0,0 +1,11 @@
+---
+productId: x-date-pickers
+---
+
+# Date and Time Pickers experimentation
+
+<p class="description">Demos not accessible through the navbar of the doc</p>
+
+## Custom field
+
+{{"demo": "CustomField.js"}}

docs/pages/x/react-date-pickers/experimentation.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docsx/data/date-pickers/experimentation/experimentation.md?muiMarkdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}

docs/translations/api-docs/date-pickers/date-field/date-field.json

@@ -66,10 +66,10 @@
     },
     "onClear": { "description": "Callback fired when the clear button is clicked." },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onSelectedSectionsChange": {

docs/translations/api-docs/date-pickers/date-picker/date-picker.json

@@ -77,10 +77,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onMonthChange": {

docs/translations/api-docs/date-pickers/date-range-picker/date-range-picker.json

@@ -91,10 +91,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onMonthChange": {

docs/translations/api-docs/date-pickers/date-time-field/date-time-field.json

@@ -83,10 +83,10 @@
     },
     "onClear": { "description": "Callback fired when the clear button is clicked." },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onSelectedSectionsChange": {

docs/translations/api-docs/date-pickers/date-time-picker/date-time-picker.json

@@ -97,10 +97,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onMonthChange": {

docs/translations/api-docs/date-pickers/date-time-range-picker/date-time-range-picker.json

@@ -108,10 +108,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onMonthChange": {

docs/translations/api-docs/date-pickers/desktop-date-picker/desktop-date-picker.json

@@ -74,10 +74,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onMonthChange": {

docs/translations/api-docs/date-pickers/desktop-date-range-picker/desktop-date-range-picker.json

@@ -88,10 +88,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onMonthChange": {

docs/translations/api-docs/date-pickers/desktop-date-time-picker/desktop-date-time-picker.json

@@ -94,10 +94,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onMonthChange": {

docs/translations/api-docs/date-pickers/desktop-date-time-range-picker/desktop-date-time-range-picker.json

@@ -105,10 +105,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onMonthChange": {

docs/translations/api-docs/date-pickers/desktop-time-picker/desktop-time-picker.json

@@ -66,10 +66,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onOpen": {

docs/translations/api-docs/date-pickers/mobile-date-picker/mobile-date-picker.json

@@ -74,10 +74,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onMonthChange": {

docs/translations/api-docs/date-pickers/mobile-date-range-picker/mobile-date-range-picker.json

@@ -85,10 +85,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onMonthChange": {

docs/translations/api-docs/date-pickers/mobile-date-time-picker/mobile-date-time-picker.json

@@ -94,10 +94,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onMonthChange": {

docs/translations/api-docs/date-pickers/mobile-date-time-range-picker/mobile-date-time-range-picker.json

@@ -102,10 +102,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onMonthChange": {

docs/translations/api-docs/date-pickers/mobile-time-picker/mobile-time-picker.json

@@ -66,10 +66,10 @@
       "description": "Callback fired when the popup requests to be closed. Use in controlled mode (see <code>open</code>)."
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes. If the error has a non-null value, then the <code>TextField</code> will be rendered in <code>error</code> state.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error describing why the current value is not valid.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onOpen": {

docs/translations/api-docs/date-pickers/multi-input-date-range-field/multi-input-date-range-field.json

@@ -34,10 +34,10 @@
       }
     },
     "onError": {
-      "description": "Callback fired when the error associated to the current value changes.",
+      "description": "Callback fired when the error associated to the current value changes. When a validation error is detected, the <code>error</code> parameter contains a non-null value. This can be used to render an appropriate form error.",
       "typeDescriptions": {
-        "error": "The new error.",
-        "value": "The value associated to the error."
+        "error": "The reason why the current value is not valid.",
+        "value": "The value associated to the error"
       }
     },
     "onSelectedSectionsChange": {