[pickers] Remove utils and value params from translations

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

@@ -256,3 +256,69 @@ const theme = createTheme({
   },
 });
 ```
+
+## Stop passing `utils` and the date/time object to some translation keys
+
+If you are customizing the translation of those keys, you no longer need to provide `utils` and the date/time object to it, but only the formatted date/time value as a string.
+
+When migrating to v8, you must have a small refactor on the usage of those keys:
+
+- `openDatePickerDialogue`:
+
+  ```diff
+   // If you are setting a custom value in a picker component
+  -<DatePicker localeText={{ openDatePickerDialogue: (date, utils) => string; }} />
+  +<DatePicker localeText={{ openDatePickerDialogue: (formattedDate) => string; }} />
+
+   // If you are setting a custom value in the `LocalizationProvider`
+  -<LocalizationProvider localeText={{ openDatePickerDialogue: (date, utils) => string; }} >
+  +<LocalizationProvider localeText={{ openDatePickerDialogue: (formattedDate) => string; }} >
+
+   // If you using this translation key in a custom component
+   const translations = useTranslations();
+  -const openDatePickerDialogue = translations.openDatePickerDialogue(value, {} as any, value == null ? null : value.format('MM/DD/YYY'));
+  +const openDatePickerDialogue = translations.openDatePickerDialogue(value == null ? null : value.format('MM/DD/YYY'));
+  ```
+
+  - `openTimePickerDialogue`:
+
+  ```diff
+   // If you are setting a custom value in a picker component or in the `LocalizationProvider`
+  -<DatePicker localeText={{ openTimePickerDialogue: (time, utils) => string; }} />
+  +<DatePicker localeText={{ openTimePickerDialogue: (formattedTime) => string; }} />
+
+   // If you are setting a custom value in the `LocalizationProvider`
+  -<LocalizationProvider localeText={{ openTimePickerDialogue: (time, utils) => string; }} >
+  +<LocalizationProvider localeText={{ openTimePickerDialogue: (formattedTime) => string; }} >
+
+   // If you using this translation key in a custom component
+   const translations = useTranslations();
+  -const openTimePickerDialogue = translations.openTimePickerDialogue(value, {} as any, value == null ? null : value.format('hh:mm:ss'));
+  +const openTimePickerDialogue = translations.openTimePickerDialogue(value == null ? null : value.format('hh:mm:ss'));
+  ```
+
+  - `clockLabelText`:
+
+  ```diff
+   // If you are setting a custom value in a picker component or in the `LocalizationProvider`
+  -<DatePicker localeText={{ clockLabelText: (view, time, utils) => string; }} />
+  +<DatePicker localeText={{ clockLabelText: (view, formattedTime) => string; }} />
+
+   // If you are setting a custom value in the `LocalizationProvider`
+  -<LocalizationProvider localeText={{ clockLabelText: (view, time, utils) => string; }} >
+  +<LocalizationProvider localeText={{ clockLabelText: (view, formattedTime) => string; }} >
+
+
+   // If you using this translation key in a custom component
+   const translations = useTranslations();
+  -const clockLabelText = translations.clockLabelText(view, value, {} as any, value == null ? null : value.format('hh:mm:ss'));
+  +const clockLabelText = translations.clockLabelText(view, value == null ? null : value.format('hh:mm:ss'));
+  ```
+
+Also the following types and interfaces no longer receive a generic type parameter:
+
+- `PickersComponentAgnosticLocaleText`
+- `PickersInputComponentLocaleText`
+- `PickersInputLocaleText`
+- `PickersLocaleText`
+- `PickersTranslationKeys`

packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx

@@ -68,7 +68,7 @@ export interface BaseDateRangePickerProps<TDate extends PickerValidDate>
 type UseDateRangePickerDefaultizedProps<
   TDate extends PickerValidDate,
   Props extends BaseDateRangePickerProps<TDate>,
-> = LocalizedComponent<TDate, DefaultizedProps<Props, keyof BaseDateValidationProps<TDate>>>;
+> = LocalizedComponent<DefaultizedProps<Props, keyof BaseDateValidationProps<TDate>>>;
 
 export function useDateRangePickerDefaultizedProps<
   TDate extends PickerValidDate,
@@ -81,7 +81,7 @@ export function useDateRangePickerDefaultizedProps<
     name,
   });
 
-  const localeText = React.useMemo<PickersInputLocaleText<TDate> | undefined>(() => {
+  const localeText = React.useMemo<PickersInputLocaleText | undefined>(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;
     }

packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx

@@ -128,7 +128,6 @@ type UseDateTimeRangePickerDefaultizedProps<
   TDate extends PickerValidDate,
   Props extends BaseDateTimeRangePickerProps<TDate>,
 > = LocalizedComponent<
-  TDate,
   Omit<DefaultizedProps<Props, 'openTo' | 'ampm' | keyof BaseDateValidationProps<TDate>>, 'views'>
 > & {
   shouldRenderTimeInASingleColumn: boolean;

packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts

@@ -125,7 +125,7 @@ export interface UseEnrichedRangePickerFieldPropsParams<
   disableOpenPicker?: boolean;
   onBlur?: () => void;
   label?: React.ReactNode;
-  localeText: PickersInputLocaleText<TDate> | undefined;
+  localeText: PickersInputLocaleText | undefined;
   pickerSlotProps: RangePickerFieldSlotProps<TDate, TEnableAccessibleFieldDOMStructure> | undefined;
   pickerSlots: RangePickerFieldSlots | undefined;
   fieldProps: RangePickerPropsForFieldSlot<

packages/x-date-pickers/src/DatePicker/shared.tsx

@@ -71,7 +71,6 @@ type UseDatePickerDefaultizedProps<
   TDate extends PickerValidDate,
   Props extends BaseDatePickerProps<TDate>,
 > = LocalizedComponent<
-  TDate,
   DefaultizedProps<Props, 'views' | 'openTo' | keyof BaseDateValidationProps<TDate>>
 >;
 
@@ -86,7 +85,7 @@ export function useDatePickerDefaultizedProps<
     name,
   });
 
-  const localeText = React.useMemo<PickersInputLocaleText<TDate> | undefined>(() => {
+  const localeText = React.useMemo<PickersInputLocaleText | undefined>(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;
     }

packages/x-date-pickers/src/DateTimePicker/shared.tsx

@@ -112,7 +112,6 @@ type UseDateTimePickerDefaultizedProps<
   TView extends DateOrTimeViewWithMeridiem,
   Props extends BaseDateTimePickerProps<TDate, TView>,
 > = LocalizedComponent<
-  TDate,
   DefaultizedProps<
     Props,
     | 'views'
@@ -138,7 +137,7 @@ export function useDateTimePickerDefaultizedProps<
 
   const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
 
-  const localeText = React.useMemo<PickersInputLocaleText<TDate> | undefined>(() => {
+  const localeText = React.useMemo<PickersInputLocaleText | undefined>(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;
     }

packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.test.tsx

@@ -46,7 +46,7 @@ describe('<LocalizationProvider />', () => {
       </ThemeProvider>,
     );
 
-    const localeText: PickersLocaleText<any> = handleContextChange.lastCall.args[0].localeText;
+    const localeText: PickersLocaleText = handleContextChange.lastCall.args[0].localeText;
     expect(localeText.start).to.equal('Debut');
     expect(localeText.end).to.equal('End');
   });
@@ -72,7 +72,7 @@ describe('<LocalizationProvider />', () => {
       </ThemeProvider>,
     );
 
-    const localeText: PickersLocaleText<any> = handleContextChange.lastCall.args[0].localeText;
+    const localeText: PickersLocaleText = handleContextChange.lastCall.args[0].localeText;
     expect(localeText.start).to.equal('Start');
   });
 
@@ -87,7 +87,7 @@ describe('<LocalizationProvider />', () => {
       </LocalizationProvider>,
     );
 
-    const localeText: PickersLocaleText<any> = handleContextChange.lastCall.args[0].localeText;
+    const localeText: PickersLocaleText = handleContextChange.lastCall.args[0].localeText;
     expect(localeText.start).to.equal('Début');
   });
 
@@ -102,7 +102,7 @@ describe('<LocalizationProvider />', () => {
       </LocalizationProvider>,
     );
 
-    const localeText: PickersLocaleText<any> = handleContextChange.lastCall.args[0].localeText;
+    const localeText: PickersLocaleText = handleContextChange.lastCall.args[0].localeText;
     expect(localeText.start).to.equal('Empezar');
   });
 });

packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx

@@ -12,7 +12,7 @@ export interface MuiPickersAdapterContextValue<TDate extends PickerValidDate> {
   };
 
   utils: MuiPickersAdapter<TDate>;
-  localeText: PickersInputLocaleText<TDate> | undefined;
+  localeText: PickersInputLocaleText | undefined;
 }
 
 export type MuiPickersAdapterContextNullableValue<TDate extends PickerValidDate> = {
@@ -49,7 +49,7 @@ export interface LocalizationProviderProps<TDate extends PickerValidDate, TLocal
   /**
    * Locale for components texts
    */
-  localeText?: PickersInputLocaleText<TDate>;
+  localeText?: PickersInputLocaleText;
 }
 
 type LocalizationProviderComponent = (<TDate extends PickerValidDate, TLocale>(

packages/x-date-pickers/src/TimeClock/Clock.tsx

@@ -380,8 +380,6 @@ export function Clock<TDate extends PickerValidDate>(inProps: ClockProps<TDate>)
           aria-activedescendant={selectedId}
           aria-label={translations.clockLabelText(
             type,
-            value,
-            utils,
             value == null ? null : utils.format(value, 'fullTime'),
           )}
           ref={listboxRef}

packages/x-date-pickers/src/TimePicker/shared.tsx

@@ -74,7 +74,6 @@ type UseTimePickerDefaultizedProps<
   TView extends TimeViewWithMeridiem,
   Props extends BaseTimePickerProps<TDate, TView>,
 > = LocalizedComponent<
-  TDate,
   DefaultizedProps<Props, 'views' | 'openTo' | 'ampm' | keyof BaseTimeValidationProps>
 >;
 
@@ -91,7 +90,7 @@ export function useTimePickerDefaultizedProps<
 
   const ampm = themeProps.ampm ?? utils.is12HourCycleInCurrentLocale();
 
-  const localeText = React.useMemo<PickersInputLocaleText<TDate> | undefined>(() => {
+  const localeText = React.useMemo<PickersInputLocaleText | undefined>(() => {
     if (themeProps.localeText?.toolbarTitle == null) {
       return themeProps.localeText;
     }

packages/x-date-pickers/src/internals/components/PickersProvider.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { PickerValidDate } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
 import { LocalizationProvider } from '../../LocalizationProvider';
 
@@ -12,9 +11,7 @@ export const PickersContext = React.createContext<PickersContextValue | null>(nu
  *
  * @ignore - do not document.
  */
-export function PickersProvider<TDate extends PickerValidDate>(
-  props: PickersFieldProviderProps<TDate>,
-) {
+export function PickersProvider(props: PickersFieldProviderProps) {
   const { contextValue, localeText, children } = props;
 
   return (
@@ -24,9 +21,9 @@ export function PickersProvider<TDate extends PickerValidDate>(
   );
 }
 
-interface PickersFieldProviderProps<TDate extends PickerValidDate> {
+interface PickersFieldProviderProps {
   contextValue: PickersContextValue;
-  localeText: PickersInputLocaleText<TDate> | undefined;
+  localeText: PickersInputLocaleText | undefined;
   children: React.ReactNode;
 }
 

packages/x-date-pickers/src/internals/hooks/useField/buildSectionsFromFormat.ts

@@ -14,7 +14,7 @@ interface BuildSectionsFromFormatParams<TDate extends PickerValidDate> {
   formatDensity: 'dense' | 'spacious';
   isRtl: boolean;
   shouldRespectLeadingZeros: boolean;
-  localeText: PickersLocaleText<TDate>;
+  localeText: PickersLocaleText;
   localizedDigits: string[];
   date: TDate | null;
   enableAccessibleFieldDOMStructure: boolean;
@@ -63,7 +63,7 @@ const getEscapedPartsFromFormat = <TDate extends PickerValidDate>({
 
 const getSectionPlaceholder = <TDate extends PickerValidDate>(
   utils: MuiPickersAdapter<TDate>,
-  localeText: PickersLocaleText<TDate>,
+  localeText: PickersLocaleText,
   sectionConfig: Pick<FieldSection, 'type' | 'contentType'>,
   sectionFormat: string,
 ) => {

packages/x-date-pickers/src/internals/hooks/useUtils.ts

@@ -39,7 +39,7 @@ export const useLocalizationContext = <TDate extends PickerValidDate>() => {
         ...localization,
         localeText,
       }) as Omit<MuiPickersAdapterContextValue<TDate>, 'localeText'> & {
-        localeText: PickersLocaleText<TDate>;
+        localeText: PickersLocaleText;
       },
     [localization, localeText],
   );

packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx

@@ -29,7 +29,7 @@ export interface BasePickerProps<
    * Locale for components texts.
    * Allows overriding texts coming from `LocalizationProvider` and `theme`.
    */
-  localeText?: PickersInputComponentLocaleText<TDate>;
+  localeText?: PickersInputComponentLocaleText;
 }
 
 /**

packages/x-date-pickers/src/locales/beBY.ts

@@ -10,7 +10,7 @@ const views: Record<TimeViewWithMeridiem, string> = {
   meridiem: 'мерыдыем',
 };
 
-const beBYPickers: Partial<PickersLocaleText<any>> = {
+const beBYPickers: Partial<PickersLocaleText> = {
   // Calendar navigation
   previousMonth: 'Папярэдні месяц',
   nextMonth: 'Наступны месяц',
@@ -44,8 +44,8 @@ const beBYPickers: Partial<PickersLocaleText<any>> = {
   dateRangePickerToolbarTitle: 'Абраць каляндарны перыяд',
 
   // Clock labels
-  clockLabelText: (view, time, utils, formattedTime) =>
-    `Абярыце ${views[view]}. ${!formattedTime && (time === null || !utils.isValid(time)) ? 'Час не абраны' : `Абраны час ${formattedTime ?? utils.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, formattedTime) =>
+    `Абярыце ${views[view]}. ${!formattedTime ? 'Час не абраны' : `Абраны час ${formattedTime}`}`,
   hoursClockNumberText: (hours) => `${hours} гадзін`,
   minutesClockNumberText: (minutes) => `${minutes} хвілін`,
   secondsClockNumberText: (seconds) => `${seconds} секунд`,
@@ -60,14 +60,10 @@ const beBYPickers: Partial<PickersLocaleText<any>> = {
   calendarWeekNumberText: (weekNumber) => `${weekNumber}`,
 
   // Open picker labels
-  openDatePickerDialogue: (value, utils, formattedDate) =>
-    formattedDate || (value !== null && utils.isValid(value))
-      ? `Абраць дату, абрана дата  ${formattedDate ?? utils.format(value, 'fullDate')}`
-      : 'Абраць дату',
-  openTimePickerDialogue: (value, utils, formattedTime) =>
-    formattedTime || (value !== null && utils.isValid(value))
-      ? `Абраць час, абрыны час  ${formattedTime ?? utils.format(value, 'fullTime')}`
-      : 'Абраць час',
+  openDatePickerDialogue: (formattedDate) =>
+    formattedDate ? `Абраць дату, абрана дата  ${formattedDate}` : 'Абраць дату',
+  openTimePickerDialogue: (formattedTime) =>
+    formattedTime ? `Абраць час, абрыны час  ${formattedTime}` : 'Абраць час',
   // fieldClearLabel: 'Clear',
 
   // Table labels

packages/x-date-pickers/src/locales/bgBG.ts

@@ -9,7 +9,7 @@ const views: Record<TimeViewWithMeridiem, string> = {
   meridiem: 'преди обяд/след обяд',
 };
 
-const bgBGPickers: Partial<PickersLocaleText<any>> = {
+const bgBGPickers: Partial<PickersLocaleText> = {
   // Calendar navigation
   previousMonth: 'Предишен месец',
   nextMonth: 'Следващ месец',
@@ -43,8 +43,8 @@ const bgBGPickers: Partial<PickersLocaleText<any>> = {
   dateRangePickerToolbarTitle: 'Избери времеви период',
 
   // Clock labels
-  clockLabelText: (view, time, adapter) =>
-    `Избери ${views[view]}. ${time === null ? 'Не е избран час' : `Избраният час е ${adapter.format(time, 'fullTime')}`}`,
+  clockLabelText: (view, formattedTime) =>
+    `Избери ${views[view]}. ${!formattedTime ? 'Не е избран час' : `Избраният час е ${formattedTime}`}`,
   hoursClockNumberText: (hours) => `${hours} часа`,
   minutesClockNumberText: (minutes) => `${minutes} минути`,
   secondsClockNumberText: (seconds) => `${seconds} секунди`,
@@ -59,14 +59,10 @@ const bgBGPickers: Partial<PickersLocaleText<any>> = {
   calendarWeekNumberText: (weekNumber) => `${weekNumber}`,
 
   // Open picker labels
-  openDatePickerDialogue: (value, utils) =>
-    value !== null && utils.isValid(value)
-      ? `Избери дата, избраната дата е ${utils.format(value, 'fullDate')}`
-      : 'Избери дата',
-  openTimePickerDialogue: (value, utils) =>
-    value !== null && utils.isValid(value)
-      ? `Избери час, избраният час е ${utils.format(value, 'fullTime')}`
-      : 'Избери час',
+  openDatePickerDialogue: (formattedDate) =>
+    formattedDate ? `Избери дата, избраната дата е ${formattedDate}` : 'Избери дата',
+  openTimePickerDialogue: (formattedTime) =>
+    formattedTime ? `Избери час, избраният час е ${formattedTime}` : 'Избери час',
   fieldClearLabel: 'Изчисти стойност',
 
   // Table labels