[pickers] Remove utils and value params from translations

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

@@ -0,0 +1,91 @@
+---
+productId: x-date-pickers
+---
+
+# Migration from v7 to v8
+
+<p class="description">This guide describes the changes needed to migrate the Date and Time Pickers from v7 to v8.</p>
+
+## Introduction
+
+This is a reference guide for upgrading `@mui/x-date-pickers` from v7 to v8.
+
+## Start using the new release
+
+In `package.json`, change the version of the date pickers package to `^8.0.0`.
+
+```diff
+-"@mui/x-date-pickers": "7.x.x",
++"@mui/x-date-pickers": "^8.0.0",
+```
+
+Since `v8` is a major release, it contains changes that affect the public API.
+These changes were done for consistency, improved stability and to make room for new features.
+Described below are the steps needed to migrate from v7 to v8.
+
+## Run codemods
+
+The `preset-safe` codemod will automatically adjust the bulk of your code to account for breaking changes in v8. You can run `v8.0.0/pickers/preset-safe` targeting only Date and Time Pickers or `v8.0.0/preset-safe` to target the other packages as well.
+
+You can either run it on a specific file, folder, or your entire codebase when choosing the `<path>` argument.
+
+<!-- #default-branch-switch -->
+
+```bash
+// Date and Time Pickers specific
+npx @mui/x-codemod@latest v8.0.0/pickers/preset-safe <path>
+
+// Target the other packages as well
+npx @mui/x-codemod@latest v8.0.0/preset-safe <path>
+```
+
+:::info
+If you want to run the transformers one by one, check out the transformers included in the [preset-safe codemod for pickers](https://github.com/mui/mui-x/blob/HEAD/packages/x-codemod/README.md#preset-safe-for-pickers-v800) for more details.
+:::
+
+Breaking changes that are handled by this codemod are denoted by a ✅ emoji in the table of contents on the right side of the screen.
+
+If you have already applied the `v8.0.0/pickers/preset-safe` (or `v8.0.0/preset-safe`) codemod, then you should not need to take any further action on these items.
+
+All other changes must be handled manually.
+
+:::warning
+Not all use cases are covered by codemods. In some scenarios, like props spreading, cross-file dependencies, etc., the changes are not properly identified and therefore must be handled manually.
+
+For example, if a codemod tries to rename a prop, but this prop is hidden with the spread operator, it won't be transformed as expected.
+
+```tsx
+<DatePicker {...pickerProps} />
+```
+
+After running the codemods, make sure to test your application and that you don't have any console errors.
+
+Feel free to [open an issue](https://github.com/mui/mui-x/issues/new/choose) for support if you need help to proceed with your migration.
+:::
+
+## Deprecated parameters used on translation keys functions
+
+If you are using a Picker with controlled value and views and you need to compose some of the following translation keys: `openDatePickerDialogue`, `openTimePickerDialogue`, or `clockLabelText`, after upgrading to v8 you only need to pass the formatted value and the time view (only for `clockLabelText`):
+
+```js
+const translations = useTranslations();
+
+const openDatePickerDialogue = translations.openDatePickerDialogue(
+  value == null ? null : value.format('MM/DD/YYY'),
+);
+const openTimePickerDialogue = translations.openTimePickerDialogue(
+  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`

docs/data/pages.ts

@@ -531,9 +531,19 @@ const pages: MuiPage[] = [
     pathname: '/x/migration-group',
     title: 'Migration',
     children: [
+      {
+        pathname: '/x/migration-v8',
+        subheader: 'Upgrade to v8',
+        children: [
+          {
+            pathname: '/x/migration/migration-pickers-v7',
+            title: 'Breaking changes: Date and Time Pickers',
+          },
+        ],
+      },
       {
         pathname: '/x/migration-v7',
-        subheader: 'Upgrade to v7',
+        title: 'Upgrade to v7',
         children: [
           { pathname: '/x/migration/migration-data-grid-v6', title: 'Breaking changes: Data Grid' },
           {

docs/pages/x/migration/migration-pickers-v7.js

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

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