[fields] Use the PickersTextField component in the fields

docs/data/date-pickers/custom-field/PickerWithBrowserField.js → docs/data/date-pickers/custom-field/BrowserV6Field.js

@@ -10,6 +10,8 @@ import { useClearableField } from '@mui/x-date-pickers/hooks';
 
 const BrowserField = React.forwardRef((props, ref) => {
   const {
+    // Should be ignored
+    enableAccessibleFieldDOMStructure,
     disabled,
     id,
     label,
@@ -41,7 +43,10 @@ const BrowserField = React.forwardRef((props, ref) => {
 const BrowserDateField = React.forwardRef((props, ref) => {
   const { slots, slotProps, ...textFieldProps } = props;
 
-  const fieldResponse = useDateField(textFieldProps);
+  const fieldResponse = useDateField({
+    ...textFieldProps,
+    enableAccessibleFieldDOMStructure: false,
+  });
 
   /* If you don't need a clear button, you can skip the use of this hook */
   const processedFieldProps = useClearableField({
@@ -63,7 +68,7 @@ const BrowserDatePicker = React.forwardRef((props, ref) => {
   );
 });
 
-export default function PickerWithBrowserField() {
+export default function BrowserV6Field() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <BrowserDatePicker

docs/data/date-pickers/custom-field/PickerWithBrowserField.tsx → docs/data/date-pickers/custom-field/BrowserV6Field.tsx

@@ -14,7 +14,7 @@ import {
   BaseSingleInputFieldProps,
   DateValidationError,
   FieldSection,
-} from '@mui/x-date-pickers-pro';
+} from '@mui/x-date-pickers/models';
 
 interface BrowserFieldProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -29,6 +29,7 @@ interface BrowserFieldProps
   focused?: boolean;
   ownerState?: any;
   sx?: any;
+  enableAccessibleFieldDOMStructure: boolean;
 }
 
 type BrowserFieldComponent = ((
@@ -38,6 +39,9 @@ type BrowserFieldComponent = ((
 const BrowserField = React.forwardRef(
   (props: BrowserFieldProps, ref: React.Ref<HTMLDivElement>) => {
     const {
+      // Should be ignored
+      enableAccessibleFieldDOMStructure,
+
       disabled,
       id,
       label,
@@ -68,19 +72,23 @@ const BrowserField = React.forwardRef(
 ) as BrowserFieldComponent;
 
 interface BrowserDateFieldProps
-  extends UseDateFieldProps<Dayjs>,
+  extends UseDateFieldProps<Dayjs, false>,
     BaseSingleInputFieldProps<
       Dayjs | null,
       Dayjs,
       FieldSection,
+      false,
       DateValidationError
     > {}
 
 const BrowserDateField = React.forwardRef(
   (props: BrowserDateFieldProps, ref: React.Ref<HTMLDivElement>) => {
     const { slots, slotProps, ...textFieldProps } = props;
 
-    const fieldResponse = useDateField<Dayjs, typeof textFieldProps>(textFieldProps);
+    const fieldResponse = useDateField<Dayjs, false, typeof textFieldProps>({
+      ...textFieldProps,
+      enableAccessibleFieldDOMStructure: false,
+    });
 
     /* If you don't need a clear button, you can skip the use of this hook */
     const processedFieldProps = useClearableField({
@@ -94,9 +102,9 @@ const BrowserDateField = React.forwardRef(
 );
 
 const BrowserDatePicker = React.forwardRef(
-  (props: DatePickerProps<Dayjs>, ref: React.Ref<HTMLDivElement>) => {
+  (props: DatePickerProps<Dayjs, false>, ref: React.Ref<HTMLDivElement>) => {
     return (
-      <DatePicker
+      <DatePicker<Dayjs, false>
         ref={ref}
         {...props}
         slots={{ ...props.slots, field: BrowserDateField }}
@@ -105,7 +113,7 @@ const BrowserDatePicker = React.forwardRef(
   },
 );
 
-export default function PickerWithBrowserField() {
+export default function BrowserV6Field() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <BrowserDatePicker

docs/data/date-pickers/custom-field/RangePickerWithBrowserField.js → docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.js

@@ -11,6 +11,8 @@ import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } f
 
 const BrowserField = React.forwardRef((props, ref) => {
   const {
+    // Should be ignored
+    enableAccessibleFieldDOMStructure,
     disabled,
     id,
     label,
@@ -57,6 +59,8 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
     selectedSections,
     onSelectedSectionsChange,
     className,
+    unstableStartFieldRef,
+    unstableEndFieldRef,
   } = props;
 
   const startTextFieldProps = useSlotProps({
@@ -87,9 +91,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
       disablePast,
       selectedSections,
       onSelectedSectionsChange,
+      enableAccessibleFieldDOMStructure: false,
     },
     startTextFieldProps,
     endTextFieldProps,
+    unstableStartFieldRef,
+    unstableEndFieldRef,
   });
 
   return (
@@ -117,7 +124,7 @@ const BrowserDateRangePicker = React.forwardRef((props, ref) => {
   );
 });
 
-export default function RangePickerWithBrowserField() {
+export default function BrowserV6MultiInputRangeField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <BrowserDateRangePicker />

docs/data/date-pickers/custom-field/RangePickerWithBrowserField.tsx → docs/data/date-pickers/custom-field/BrowserV6MultiInputRangeField.tsx

@@ -15,10 +15,10 @@ import {
   BaseMultiInputFieldProps,
   DateRange,
   DateRangeValidationError,
-  UseDateRangeFieldProps,
   MultiInputFieldSlotTextFieldProps,
   RangeFieldSection,
-} from '@mui/x-date-pickers-pro';
+} from '@mui/x-date-pickers-pro/models';
+import { UseDateRangeFieldProps } from '@mui/x-date-pickers-pro';
 
 interface BrowserFieldProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -33,6 +33,7 @@ interface BrowserFieldProps
   focused?: boolean;
   ownerState?: any;
   sx?: any;
+  enableAccessibleFieldDOMStructure: boolean;
 }
 
 type BrowserFieldComponent = ((
@@ -42,6 +43,9 @@ type BrowserFieldComponent = ((
 const BrowserField = React.forwardRef(
   (props: BrowserFieldProps, ref: React.Ref<HTMLDivElement>) => {
     const {
+      // Should be ignored
+      enableAccessibleFieldDOMStructure,
+
       disabled,
       id,
       label,
@@ -72,11 +76,12 @@ const BrowserField = React.forwardRef(
 ) as BrowserFieldComponent;
 
 interface BrowserMultiInputDateRangeFieldProps
-  extends UseDateRangeFieldProps<Dayjs>,
+  extends UseDateRangeFieldProps<Dayjs, false>,
     BaseMultiInputFieldProps<
       DateRange<Dayjs>,
       Dayjs,
       RangeFieldSection,
+      false,
       DateRangeValidationError
     > {}
 
@@ -103,6 +108,8 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
       selectedSections,
       onSelectedSectionsChange,
       className,
+      unstableStartFieldRef,
+      unstableEndFieldRef,
     } = props;
 
     const startTextFieldProps = useSlotProps({
@@ -119,6 +126,7 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
 
     const fieldResponse = useMultiInputDateRangeField<
       Dayjs,
+      false,
       MultiInputFieldSlotTextFieldProps
     >({
       sharedProps: {
@@ -136,9 +144,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
         disablePast,
         selectedSections,
         onSelectedSectionsChange,
+        enableAccessibleFieldDOMStructure: false,
       },
       startTextFieldProps,
       endTextFieldProps,
+      unstableStartFieldRef,
+      unstableEndFieldRef,
     });
 
     return (
@@ -158,7 +169,7 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
 ) as BrowserMultiInputDateRangeFieldComponent;
 
 const BrowserDateRangePicker = React.forwardRef(
-  (props: DateRangePickerProps<Dayjs>, ref: React.Ref<HTMLDivElement>) => {
+  (props: DateRangePickerProps<Dayjs, false>, ref: React.Ref<HTMLDivElement>) => {
     return (
       <DateRangePicker
         ref={ref}
@@ -169,7 +180,7 @@ const BrowserDateRangePicker = React.forwardRef(
   },
 );
 
-export default function RangePickerWithBrowserField() {
+export default function BrowserV6MultiInputRangeField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <BrowserDateRangePicker />

docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.js → docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.js

@@ -14,6 +14,8 @@ import { useClearableField } from '@mui/x-date-pickers/hooks';
 
 const BrowserField = React.forwardRef((props, ref) => {
   const {
+    // Should be ignored
+    enableAccessibleFieldDOMStructure,
     disabled,
     id,
     label,
@@ -63,7 +65,10 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
     ),
   };
 
-  const fieldResponse = useSingleInputDateRangeField(textFieldProps);
+  const fieldResponse = useSingleInputDateRangeField({
+    ...textFieldProps,
+    enableAccessibleFieldDOMStructure: false,
+  });
 
   /* If you don't need a clear button, you can skip the use of this hook */
   const processedFieldProps = useClearableField({
@@ -113,7 +118,7 @@ const BrowserSingleInputDateRangePicker = React.forwardRef((props, ref) => {
   );
 });
 
-export default function RangePickerWithSingleInputBrowserField() {
+export default function BrowserV6SingleInputRangeField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <BrowserSingleInputDateRangePicker

docs/data/date-pickers/custom-field/RangePickerWithSingleInputBrowserField.tsx → docs/data/date-pickers/custom-field/BrowserV6SingleInputRangeField.tsx

@@ -15,8 +15,16 @@ import {
 import {
   unstable_useSingleInputDateRangeField as useSingleInputDateRangeField,
   SingleInputDateRangeFieldProps,
+  UseSingleInputDateRangeFieldProps,
 } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
 import { useClearableField } from '@mui/x-date-pickers/hooks';
+import { BaseSingleInputFieldProps } from '@mui/x-date-pickers/models';
+import {
+  DateRangeValidationError,
+  RangeFieldSection,
+  DateRange,
+  FieldType,
+} from '@mui/x-date-pickers-pro/models';
 
 interface BrowserFieldProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -31,6 +39,7 @@ interface BrowserFieldProps
   focused?: boolean;
   ownerState?: any;
   sx?: any;
+  enableAccessibleFieldDOMStructure: boolean;
 }
 
 type BrowserFieldComponent = ((
@@ -40,6 +49,9 @@ type BrowserFieldComponent = ((
 const BrowserField = React.forwardRef(
   (props: BrowserFieldProps, ref: React.Ref<HTMLDivElement>) => {
     const {
+      // Should be ignored
+      enableAccessibleFieldDOMStructure,
+
       disabled,
       id,
       label,
@@ -70,27 +82,32 @@ const BrowserField = React.forwardRef(
 ) as BrowserFieldComponent;
 
 interface BrowserSingleInputDateRangeFieldProps
-  extends SingleInputDateRangeFieldProps<
-    Dayjs,
-    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>
-  > {
+  extends UseSingleInputDateRangeFieldProps<Dayjs, false>,
+    BaseSingleInputFieldProps<
+      DateRange<Dayjs>,
+      Dayjs,
+      RangeFieldSection,
+      false,
+      DateRangeValidationError
+    > {
   onAdornmentClick?: () => void;
 }
 
 type BrowserSingleInputDateRangeFieldComponent = ((
   props: BrowserSingleInputDateRangeFieldProps & React.RefAttributes<HTMLDivElement>,
-) => React.JSX.Element) & { fieldType?: string };
+) => React.JSX.Element) & { fieldType?: FieldType };
 
 const BrowserSingleInputDateRangeField = React.forwardRef(
   (props: BrowserSingleInputDateRangeFieldProps, ref: React.Ref<HTMLDivElement>) => {
     const { slots, slotProps, onAdornmentClick, ...other } = props;
 
-    const textFieldProps: SingleInputDateRangeFieldProps<Dayjs> = useSlotProps({
-      elementType: 'input',
-      externalSlotProps: slotProps?.textField,
-      externalForwardedProps: other,
-      ownerState: props as any,
-    });
+    const textFieldProps: SingleInputDateRangeFieldProps<Dayjs, false> =
+      useSlotProps({
+        elementType: 'input',
+        externalSlotProps: slotProps?.textField,
+        externalForwardedProps: other,
+        ownerState: props as any,
+      });
 
     textFieldProps.InputProps = {
       ...textFieldProps.InputProps,
@@ -103,9 +120,11 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
       ),
     };
 
-    const fieldResponse = useSingleInputDateRangeField<Dayjs, typeof textFieldProps>(
-      textFieldProps,
-    );
+    const fieldResponse = useSingleInputDateRangeField<
+      Dayjs,
+      false,
+      typeof textFieldProps
+    >({ ...textFieldProps, enableAccessibleFieldDOMStructure: false });
 
     /* If you don't need a clear button, you can skip the use of this hook */
     const processedFieldProps = useClearableField({
@@ -158,7 +177,7 @@ const BrowserSingleInputDateRangePicker = React.forwardRef(
   },
 );
 
-export default function RangePickerWithSingleInputBrowserField() {
+export default function BrowserV6SingleInputRangeField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <BrowserSingleInputDateRangePicker