[pickers] DRAFT PickersInput Sizing fixes behavior

docs/data/date-pickers-component-api-pages.ts

@@ -66,6 +66,7 @@ export default [
   { pathname: '/x/api/date-pickers/pickers-layout', title: 'PickersLayout' },
   { pathname: '/x/api/date-pickers/pickers-section-list', title: 'PickersSectionList' },
   { pathname: '/x/api/date-pickers/pickers-shortcuts', title: 'PickersShortcuts' },
+  { pathname: '/x/api/date-pickers/pickers-text-field', title: 'PickersTextField' },
   {
     pathname: '/x/api/date-pickers/single-input-date-range-field',
     title: 'SingleInputDateRangeField',

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

@@ -20,6 +20,7 @@ const BrowserField = React.forwardRef((props, ref) => {
     focused,
     ownerState,
     sx,
+    textField,
     ...other
   } = props;
 
@@ -41,7 +42,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,
+    shouldUseV6TextField: true,
+  });
 
   /* If you don't need a clear button, you can skip the use of this hook */
   const processedFieldProps = useClearableField({
@@ -63,7 +67,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

@@ -29,6 +29,7 @@ interface BrowserFieldProps
   focused?: boolean;
   ownerState?: any;
   sx?: any;
+  textField: 'v6' | 'v7';
 }
 
 type BrowserFieldComponent = ((
@@ -48,6 +49,7 @@ const BrowserField = React.forwardRef(
       focused,
       ownerState,
       sx,
+      textField,
       ...other
     } = props;
 
@@ -68,19 +70,23 @@ const BrowserField = React.forwardRef(
 ) as BrowserFieldComponent;
 
 interface BrowserDateFieldProps
-  extends UseDateFieldProps<Dayjs>,
+  extends UseDateFieldProps<Dayjs, true>,
     BaseSingleInputFieldProps<
       Dayjs | null,
       Dayjs,
       FieldSection,
+      true,
       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, true, typeof textFieldProps>({
+      ...textFieldProps,
+      shouldUseV6TextField: true,
+    });
 
     /* If you don't need a clear button, you can skip the use of this hook */
     const processedFieldProps = useClearableField({
@@ -94,9 +100,9 @@ const BrowserDateField = React.forwardRef(
 );
 
 const BrowserDatePicker = React.forwardRef(
-  (props: DatePickerProps<Dayjs>, ref: React.Ref<HTMLDivElement>) => {
+  (props: DatePickerProps<Dayjs, true>, ref: React.Ref<HTMLDivElement>) => {
     return (
-      <DatePicker
+      <DatePicker<Dayjs, true>
         ref={ref}
         {...props}
         slots={{ ...props.slots, field: BrowserDateField }}
@@ -105,7 +111,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

@@ -21,6 +21,7 @@ const BrowserField = React.forwardRef((props, ref) => {
     focused,
     ownerState,
     sx,
+    textField,
     ...other
   } = props;
 
@@ -57,6 +58,8 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
     selectedSections,
     onSelectedSectionsChange,
     className,
+    unstableStartFieldRef,
+    unstableEndFieldRef,
   } = props;
 
   const startTextFieldProps = useSlotProps({
@@ -87,9 +90,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
       disablePast,
       selectedSections,
       onSelectedSectionsChange,
+      shouldUseV6TextField: true,
     },
     startTextFieldProps,
     endTextFieldProps,
+    unstableStartFieldRef,
+    unstableEndFieldRef,
   });
 
   return (
@@ -117,7 +123,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

@@ -33,6 +33,7 @@ interface BrowserFieldProps
   focused?: boolean;
   ownerState?: any;
   sx?: any;
+  textField: 'v6' | 'v7';
 }
 
 type BrowserFieldComponent = ((
@@ -52,6 +53,7 @@ const BrowserField = React.forwardRef(
       focused,
       ownerState,
       sx,
+      textField,
       ...other
     } = props;
 
@@ -72,11 +74,12 @@ const BrowserField = React.forwardRef(
 ) as BrowserFieldComponent;
 
 interface BrowserMultiInputDateRangeFieldProps
-  extends UseDateRangeFieldProps<Dayjs>,
+  extends UseDateRangeFieldProps<Dayjs, true>,
     BaseMultiInputFieldProps<
       DateRange<Dayjs>,
       Dayjs,
       RangeFieldSection,
+      true,
       DateRangeValidationError
     > {}
 
@@ -103,6 +106,8 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
       selectedSections,
       onSelectedSectionsChange,
       className,
+      unstableStartFieldRef,
+      unstableEndFieldRef,
     } = props;
 
     const startTextFieldProps = useSlotProps({
@@ -119,6 +124,7 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
 
     const fieldResponse = useMultiInputDateRangeField<
       Dayjs,
+      true,
       MultiInputFieldSlotTextFieldProps
     >({
       sharedProps: {
@@ -136,9 +142,12 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
         disablePast,
         selectedSections,
         onSelectedSectionsChange,
+        shouldUseV6TextField: true,
       },
       startTextFieldProps,
       endTextFieldProps,
+      unstableStartFieldRef,
+      unstableEndFieldRef,
     });
 
     return (
@@ -158,7 +167,7 @@ const BrowserMultiInputDateRangeField = React.forwardRef(
 ) as BrowserMultiInputDateRangeFieldComponent;
 
 const BrowserDateRangePicker = React.forwardRef(
-  (props: DateRangePickerProps<Dayjs>, ref: React.Ref<HTMLDivElement>) => {
+  (props: DateRangePickerProps<Dayjs, true>, ref: React.Ref<HTMLDivElement>) => {
     return (
       <DateRangePicker
         ref={ref}
@@ -169,7 +178,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

@@ -24,6 +24,7 @@ const BrowserField = React.forwardRef((props, ref) => {
     focused,
     ownerState,
     sx,
+    textField,
     ...other
   } = props;
 
@@ -63,7 +64,10 @@ const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
     ),
   };
 
-  const fieldResponse = useSingleInputDateRangeField(textFieldProps);
+  const fieldResponse = useSingleInputDateRangeField({
+    ...textFieldProps,
+    shouldUseV6TextField: true,
+  });
 
   /* If you don't need a clear button, you can skip the use of this hook */
   const processedFieldProps = useClearableField({
@@ -113,7 +117,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,15 @@ 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,
+} from '@mui/x-date-pickers-pro/models';
+import { DateRange } from '@mui/x-date-pickers-pro';
 
 interface BrowserFieldProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
@@ -31,6 +38,7 @@ interface BrowserFieldProps
   focused?: boolean;
   ownerState?: any;
   sx?: any;
+  textField: 'v6' | 'v7';
 }
 
 type BrowserFieldComponent = ((
@@ -50,6 +58,7 @@ const BrowserField = React.forwardRef(
       focused,
       ownerState,
       sx,
+      textField,
       ...other
     } = props;
 
@@ -70,10 +79,14 @@ const BrowserField = React.forwardRef(
 ) as BrowserFieldComponent;
 
 interface BrowserSingleInputDateRangeFieldProps
-  extends SingleInputDateRangeFieldProps<
-    Dayjs,
-    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>
-  > {
+  extends UseSingleInputDateRangeFieldProps<Dayjs, true>,
+    BaseSingleInputFieldProps<
+      DateRange<Dayjs>,
+      Dayjs,
+      RangeFieldSection,
+      true,
+      DateRangeValidationError
+    > {
   onAdornmentClick?: () => void;
 }
 
@@ -85,12 +98,14 @@ 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, true> = useSlotProps(
+      {
+        elementType: 'input',
+        externalSlotProps: slotProps?.textField,
+        externalForwardedProps: other,
+        ownerState: props as any,
+      },
+    );
 
     textFieldProps.InputProps = {
       ...textFieldProps.InputProps,
@@ -103,9 +118,11 @@ const BrowserSingleInputDateRangeField = React.forwardRef(
       ),
     };
 
-    const fieldResponse = useSingleInputDateRangeField<Dayjs, typeof textFieldProps>(
-      textFieldProps,
-    );
+    const fieldResponse = useSingleInputDateRangeField<
+      Dayjs,
+      true,
+      typeof textFieldProps
+    >({ ...textFieldProps, shouldUseV6TextField: true });
 
     /* If you don't need a clear button, you can skip the use of this hook */
     const processedFieldProps = useClearableField({
@@ -158,7 +175,7 @@ const BrowserSingleInputDateRangePicker = React.forwardRef(
   },
 );
 
-export default function RangePickerWithSingleInputBrowserField() {
+export default function BrowserV6SingleInputRangeField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
       <BrowserSingleInputDateRangePicker