[pickers] Remove TSection and strictly type TValue

docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';

docs/data/date-pickers/fields/ControlledSelectedSectionsSingleInputRangeField.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Dayjs } from 'dayjs';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
@@ -9,14 +10,14 @@ import {
   FieldSelectedSections,
   FieldRef,
 } from '@mui/x-date-pickers/models';
-import { RangeFieldSection, RangePosition } from '@mui/x-date-pickers-pro/models';
+import { DateRange, RangePosition } from '@mui/x-date-pickers-pro/models';
 import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
 
 export default function ControlledSelectedSectionsSingleInputRangeField() {
   const [selectedSections, setSelectedSections] =
     React.useState<FieldSelectedSections>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const fieldRef = React.useRef<FieldRef<RangeFieldSection>>(null);
+  const fieldRef = React.useRef<FieldRef<DateRange<Dayjs>>>(null);
 
   const setSelectedSectionType = (
     selectedSectionType: FieldSectionType,

docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import dayjs from 'dayjs';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
 import Box from '@mui/material/Box';
-import dayjs from 'dayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';

docs/data/date-pickers/shortcuts/CustomizedRangeShortcuts.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
 import Box from '@mui/material/Box';
-import dayjs, { Dayjs } from 'dayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';

docs/data/migration/migration-pickers-v7/migration-pickers-v7.md

@@ -348,9 +348,9 @@ const theme = createTheme({
   +console.log(readOnly);
   ```
 
-## Renamed variables
+## Renamed variables and types
 
-The following variables were renamed to have a coherent `Picker` / `Pickers` prefix:
+The following variables and types have been renamed to have a coherent `Picker` / `Pickers` prefix:
 
 - `usePickersTranslations`
 
@@ -394,9 +394,19 @@ The following variables were renamed to have a coherent `Picker` / `Pickers` pre
   +import { PickerValueType } from '@mui/x-date-pickers-pro';
   ```
 
+  - `RangeFieldSection`
+
+  ```diff
+  -import { RangeFieldSection } from '@mui/x-date-pickers-pro/models';
+  -import { RangeFieldSection } from '@mui/x-date-pickers-pro';
+
+  +import { FieldRangeSection } from '@mui/x-date-pickers-pro/models';
+  +import { FieldRangeSection } from '@mui/x-date-pickers-pro';
+  ```
+
 ## Typing breaking changes
 
-### Remove `TDate` generic
+### Do not pass the date object as a generic
 
 The `TDate` generic has been removed from all the types, interfaces, and variables of the `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` packages.
 
@@ -406,14 +416,24 @@ If you were passing your date object type as a generic to any element of one of
 -<DatePicker<Dayjs> value={value} onChange={onChange} />
 +<DatePicker value={value} onChange={onChange} />
 
--type Slot = DateCalendarSlots<Dayjs>['calendarHeader'];
-+type Slot = DateCalendarSlots['calendarHeader'];
+-type FieldComponent = DatePickerSlots<Dayjs>['field'];
++type FieldComponent = DatePickerSlots['field'];
 
--type Props = DatePickerToolbarProps<Dayjs>;
-+type Props = DatePickerToolbarProps;
+-function CustomDatePicker(props: DatePickerProps<Dayjs>) {}
++function CustomDatePicker(props: DatePickerProps) {}
 ```
 
-A follow-up release will add the full list of the impacted elements to the migration guide.
+### Do not pass the section type as a generic
+
+The `TSection` generic of the `FieldRef` type has been replaced with the `TValue` generic:
+
+```diff
+-const fieldRef = React.useRef<FieldRef<FieldSection>>(null);
++const fieldRef = React.useRef<Dayjs | null>(null);
+
+-const fieldRef = React.useRef<FieldRef<RangeFieldSection>>(null);
++const fieldRef = React.useRef<DateRange<Dayjs>>(null);
+```
 
 ### Removed types
 

packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.types.ts

@@ -9,7 +9,7 @@ import {
   MobileDateRangePickerSlots,
   MobileDateRangePickerSlotProps,
 } from '../MobileDateRangePicker';
-import { DateRangeValidationError, RangeFieldSection } from '../models';
+import { DateRangeValidationError } from '../models';
 import { ValidateDateRangeProps } from '../validation';
 
 export interface DateRangePickerSlots
@@ -48,7 +48,6 @@ export type DateRangePickerFieldProps<TEnableAccessibleFieldDOMStructure extends
   ValidateDateRangeProps &
     BaseSingleInputFieldProps<
       PickerRangeValue,
-      RangeFieldSection,
       TEnableAccessibleFieldDOMStructure,
       DateRangeValidationError
     >;

packages/x-date-pickers-pro/src/DateTimeRangePicker/DateTimeRangePicker.types.ts

@@ -9,7 +9,7 @@ import {
   MobileDateTimeRangePickerSlots,
   MobileDateTimeRangePickerSlotProps,
 } from '../MobileDateTimeRangePicker';
-import { DateTimeRangeValidationError, RangeFieldSection } from '../models';
+import { DateTimeRangeValidationError } from '../models';
 import type { ValidateDateTimeRangeProps } from '../validation';
 
 export interface DateTimeRangePickerSlots
@@ -49,7 +49,6 @@ export type DateTimeRangePickerFieldProps<
 > = ValidateDateTimeRangeProps &
   BaseSingleInputFieldProps<
     PickerRangeValue,
-    RangeFieldSection,
     TEnableAccessibleFieldDOMStructure,
     DateTimeRangeValidationError
   >;

packages/x-date-pickers-pro/src/DesktopDateRangePicker/tests/describes.DesktopDateRangePicker.test.tsx

@@ -12,6 +12,7 @@ import {
 } from 'test/utils/pickers';
 import { DesktopDateRangePicker } from '@mui/x-date-pickers-pro/DesktopDateRangePicker';
 import { SingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
+import { PickerNonNullableRangeValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import { describeConformance } from 'test/utils/describeConformance';
 
 describe('<DesktopDateRangePicker /> - Describes', () => {
@@ -45,7 +46,7 @@ describe('<DesktopDateRangePicker /> - Describes', () => {
     ],
   }));
 
-  describeValue(DesktopDateRangePicker, () => ({
+  describeValue<PickerRangeValue, 'picker'>(DesktopDateRangePicker, () => ({
     render,
     componentFamily: 'picker',
     type: 'date-range',
@@ -76,7 +77,7 @@ describe('<DesktopDateRangePicker /> - Describes', () => {
       value,
       { isOpened, applySameValue, setEndDate = false, selectSection, pressKey },
     ) => {
-      let newValue: any[];
+      let newValue: PickerNonNullableRangeValue;
       if (applySameValue) {
         newValue = value;
       } else if (setEndDate) {
@@ -101,7 +102,7 @@ describe('<DesktopDateRangePicker /> - Describes', () => {
   }));
 
   // With single input field
-  describeValue(DesktopDateRangePicker, () => ({
+  describeValue<PickerRangeValue, 'picker'>(DesktopDateRangePicker, () => ({
     render,
     componentFamily: 'picker',
     type: 'date-range',
@@ -138,7 +139,7 @@ describe('<DesktopDateRangePicker /> - Describes', () => {
       value,
       { isOpened, applySameValue, setEndDate = false, selectSection, pressKey },
     ) => {
-      let newValue: any[];
+      let newValue: PickerNonNullableRangeValue;
       if (applySameValue) {
         newValue = value;
       } else if (setEndDate) {

packages/x-date-pickers-pro/src/DesktopDateTimeRangePicker/tests/describes.DesktopDateTimeRangePicker.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { describeConformance, fireEvent, screen } from '@mui/internal-test-utils';
+import { PickerNonNullableRangeValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import {
   createPickerRenderer,
   adapterToUse,
@@ -46,7 +47,7 @@ describe('<DesktopDateTimeRangePicker /> - Describes', () => {
     ],
   }));
 
-  describeValue(DesktopDateTimeRangePicker, () => ({
+  describeValue<PickerRangeValue, 'picker'>(DesktopDateTimeRangePicker, () => ({
     render,
     componentFamily: 'picker',
     type: 'date-time-range',
@@ -86,7 +87,7 @@ describe('<DesktopDateTimeRangePicker /> - Describes', () => {
       value,
       { isOpened, applySameValue, setEndDate = false, selectSection, pressKey },
     ) => {
-      let newValue: any[];
+      let newValue: PickerNonNullableRangeValue;
       if (applySameValue) {
         newValue = value;
       } else if (setEndDate) {

packages/x-date-pickers-pro/src/MobileDateRangePicker/tests/describes.MobileDateRangePicker.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { screen, fireDiscreteEvent, fireEvent } from '@mui/internal-test-utils';
 import { MobileDateRangePicker } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
+import { PickerNonNullableRangeValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import {
   adapterToUse,
   createPickerRenderer,
@@ -45,7 +46,7 @@ describe('<MobileDateRangePicker /> - Describes', () => {
     ],
   }));
 
-  describeValue(MobileDateRangePicker, () => ({
+  describeValue<PickerRangeValue, 'picker'>(MobileDateRangePicker, () => ({
     render,
     componentFamily: 'picker',
     type: 'date-range',
@@ -73,7 +74,7 @@ describe('<MobileDateRangePicker /> - Describes', () => {
       expectFieldValueV7(endFieldRoot, expectedEndValueStr);
     },
     setNewValue: (value, { isOpened, applySameValue, setEndDate = false }) => {
-      let newValue: any[];
+      let newValue: PickerNonNullableRangeValue;
       if (applySameValue) {
         newValue = value;
       } else if (setEndDate) {

packages/x-date-pickers-pro/src/MobileDateTimeRangePicker/tests/describes.MobileDateTimeRangePicker.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { describeConformance, fireEvent, screen } from '@mui/internal-test-utils';
+import { PickerNonNullableRangeValue, PickerRangeValue } from '@mui/x-date-pickers/internals';
 import {
   createPickerRenderer,
   adapterToUse,
@@ -10,7 +11,7 @@ import {
   getFieldSectionsContainer,
   openPicker,
 } from 'test/utils/pickers';
-import { MobileDateTimeRangePicker } from '../MobileDateTimeRangePicker';
+import { MobileDateTimeRangePicker } from '@mui/x-date-pickers-pro/MobileDateTimeRangePicker';
 
 describe('<MobileDateTimeRangePicker /> - Describes', () => {
   const { render, clock } = createPickerRenderer({
@@ -47,7 +48,7 @@ describe('<MobileDateTimeRangePicker /> - Describes', () => {
     ],
   }));
 
-  describeValue(MobileDateTimeRangePicker, () => ({
+  describeValue<PickerRangeValue, 'picker'>(MobileDateTimeRangePicker, () => ({
     render,
     componentFamily: 'picker',
     type: 'date-time-range',
@@ -91,7 +92,7 @@ describe('<MobileDateTimeRangePicker /> - Describes', () => {
           initialFocus: setEndDate ? 'end' : 'start',
         });
       }
-      let newValue: any[];
+      let newValue: PickerNonNullableRangeValue;
       if (applySameValue) {
         newValue = value;
       } else if (setEndDate) {

packages/x-date-pickers-pro/src/SingleInputDateRangeField/SingleInputDateRangeField.types.ts

@@ -1,18 +1,14 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import TextField from '@mui/material/TextField';
-import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models';
 import {
   ExportedUseClearableFieldProps,
   UseClearableFieldSlots,
   UseClearableFieldSlotProps,
 } from '@mui/x-date-pickers/hooks';
-import type {
-  RangeFieldSection,
-  DateRangeValidationError,
-  UseDateRangeFieldProps,
-} from '../models';
+import type { DateRangeValidationError, UseDateRangeFieldProps } from '../models';
 
 export interface UseSingleInputDateRangeFieldProps<
   TEnableAccessibleFieldDOMStructure extends boolean,
@@ -21,7 +17,6 @@ export interface UseSingleInputDateRangeFieldProps<
     Pick<
       UseFieldInternalProps<
         PickerRangeValue,
-        RangeFieldSection,
         TEnableAccessibleFieldDOMStructure,
         DateRangeValidationError
       >,

packages/x-date-pickers-pro/src/SingleInputDateRangeField/useSingleInputDateRangeField.ts

@@ -5,7 +5,6 @@ import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { UseSingleInputDateRangeFieldProps } from './SingleInputDateRangeField.types';
 import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
 import { validateDateRange } from '../validation';
-import { RangeFieldSection } from '../models';
 
 export const useSingleInputDateRangeField = <
   TEnableAccessibleFieldDOMStructure extends boolean,
@@ -27,7 +26,6 @@ export const useSingleInputDateRangeField = <
 
   return useField<
     PickerRangeValue,
-    RangeFieldSection,
     TEnableAccessibleFieldDOMStructure,
     typeof forwardedProps,
     typeof internalProps

packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/SingleInputDateTimeRangeField.types.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { SlotComponentProps } from '@mui/utils';
 import TextField from '@mui/material/TextField';
-import { UseFieldInternalProps, PickerRangeValue } from '@mui/x-date-pickers/internals';
+import { PickerRangeValue, UseFieldInternalProps } from '@mui/x-date-pickers/internals';
 import { BuiltInFieldTextFieldProps } from '@mui/x-date-pickers/models';
 import {
   ExportedUseClearableFieldProps,
   UseClearableFieldSlots,
   UseClearableFieldSlotProps,
 } from '@mui/x-date-pickers/hooks';
 import { UseDateTimeRangeFieldProps } from '../internals/models';
-import { RangeFieldSection, DateTimeRangeValidationError } from '../models';
+import { DateTimeRangeValidationError } from '../models';
 
 export interface UseSingleInputDateTimeRangeFieldProps<
   TEnableAccessibleFieldDOMStructure extends boolean,
@@ -18,7 +18,6 @@ export interface UseSingleInputDateTimeRangeFieldProps<
     Pick<
       UseFieldInternalProps<
         PickerRangeValue,
-        RangeFieldSection,
         TEnableAccessibleFieldDOMStructure,
         DateTimeRangeValidationError
       >,

packages/x-date-pickers-pro/src/SingleInputDateTimeRangeField/useSingleInputDateTimeRangeField.ts

@@ -9,7 +9,6 @@ import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { UseSingleInputDateTimeRangeFieldProps } from './SingleInputDateTimeRangeField.types';
 import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
 import { validateDateTimeRange } from '../validation';
-import { RangeFieldSection } from '../models';
 
 export const useSingleInputDateTimeRangeField = <
   TEnableAccessibleFieldDOMStructure extends boolean,
@@ -31,7 +30,6 @@ export const useSingleInputDateTimeRangeField = <
 
   return useField<
     PickerRangeValue,
-    RangeFieldSection,
     TEnableAccessibleFieldDOMStructure,
     typeof forwardedProps,
     typeof internalProps

packages/x-date-pickers-pro/src/SingleInputTimeRangeField/SingleInputTimeRangeField.types.ts

@@ -9,7 +9,7 @@ import {
   UseClearableFieldSlotProps,
 } from '@mui/x-date-pickers/hooks';
 import { UseTimeRangeFieldProps } from '../internals/models';
-import { RangeFieldSection, TimeRangeValidationError } from '../models';
+import { TimeRangeValidationError } from '../models';
 
 export interface UseSingleInputTimeRangeFieldProps<
   TEnableAccessibleFieldDOMStructure extends boolean,
@@ -18,7 +18,6 @@ export interface UseSingleInputTimeRangeFieldProps<
     Pick<
       UseFieldInternalProps<
         PickerRangeValue,
-        RangeFieldSection,
         TEnableAccessibleFieldDOMStructure,
         TimeRangeValidationError
       >,

packages/x-date-pickers-pro/src/SingleInputTimeRangeField/useSingleInputTimeRangeField.ts

@@ -5,7 +5,6 @@ import { useSplitFieldProps } from '@mui/x-date-pickers/hooks';
 import { UseSingleInputTimeRangeFieldProps } from './SingleInputTimeRangeField.types';
 import { rangeValueManager, getRangeFieldValueManager } from '../internals/utils/valueManagers';
 import { validateTimeRange } from '../validation';
-import { RangeFieldSection } from '../models';
 
 export const useSingleInputTimeRangeField = <
   TEnableAccessibleFieldDOMStructure extends boolean,
@@ -27,7 +26,6 @@ export const useSingleInputTimeRangeField = <
 
   return useField<
     PickerRangeValue,
-    RangeFieldSection,
     TEnableAccessibleFieldDOMStructure,
     typeof forwardedProps,
     typeof internalProps