[pickers] Remove utils and value params from translations (#14986)

Signed-off-by: Arthur Suh Balduini <34691066+arthurbalduini@users.noreply.github.com> Co-authored-by: Flavien DELANGLE <flaviendelangle@gmail.com>
mui · Oct 29, 2024 · 5b553c8 · 5b553c8
1 parent bde9466
commit 5b553c8
Show file tree

Hide file tree

Showing 57 changed files with 433 additions and 520 deletions.
diff --git a/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md b/docs/data/migration/migration-pickers-v7/migration-pickers-v7.md
@@ -314,3 +314,109 @@ If you were using them, you need to replace them with the following code:
   > &
     UseDateTimeFieldProps<TDate, TEnableAccessibleFieldDOMStructure>;
   ```
+
+## Stop passing `utils` and the date object to some translation keys
+
+Some translation keys no longer require `utils` and the date object as parameters, but only the formatted value as a string. The keys affected by this changes are: `clockLabelText`, `openDatePickerDialogue` and `openTimePickerDialogue`.
+If you have customized those translation keys, you have to update them following the examples below:
+
+- If you are setting a custom value in a picker component:
+
+```diff
+-clockLabelText: (view, time, utils) =>
+-   `Select ${view}. ${
+-     time === null || !utils.isValid(time)
+-       ? 'No time selected'
+-       : `Selected time is ${utils.format(time, 'fullTime')}`
+-   }`
++clockLabelText: (view, formattedTime) =>
++   `Select ${view}. ${
++     formattedTime == null ? 'No time selected' : `Selected time is ${formattedTime}`
++   }`
+
+-openDatePickerDialogue: (value, utils) =>
+-  value !== null && utils.isValid(value)
+-    ? `Choose date, selected date is ${utils.format(value, 'fullDate')}`
+-    : 'Choose date',
++openDatePickerDialogue: (formattedDate) =>
++  formattedDate ? `Choose date, selected date is ${formattedDate}` : 'Choose date'
+
+-openTimePickerDialogue: (value, utils) =>
+-  value !== null && utils.isValid(value)
+-    ? `Choose time, selected time is ${utils.format(value, 'fullTime')}`
+-    : 'Choose time',
++openTimePickerDialogue: (formattedTime) =>
++  formattedTime ? `Choose time, selected time is ${formattedTime}` : 'Choose time'
+```
+
+- If you are setting a custom value in the `LocalizationProvider`:
+
+```diff
+ <LocalizationProvider localeText={{
+-   clockLabelText: (view, time, utils) =>
+-     `Select ${view}. ${
+-       time === null || !utils.isValid(time)
+-         ? 'No time selected'
+-         : `Selected time is ${utils.format(time, 'fullTime')}`
+-     }`
++   clockLabelText: (view, formattedTime) =>
++     `Select ${view}. ${
++       formattedTime == null ? 'No time selected' : `Selected time is ${formattedTime}`
++     }`
+-   openDatePickerDialogue: (value, utils) =>
+-     value !== null && utils.isValid(value)
+-      ? `Choose date, selected date is ${utils.format(value, 'fullDate')}`
+-      : 'Choose date',
++   openDatePickerDialogue: (formattedDate) =>
++     formattedDate ? `Choose date, selected date is ${formattedDate}` : 'Choose date'
+-   openTimePickerDialogue: (value, utils) =>
+-     value !== null && utils.isValid(value)
+-       ? `Choose time, selected time is ${utils.format(value, 'fullTime')}`
+-       : 'Choose time',
++   openTimePickerDialogue: (formattedTime) =>
++     formattedTime ? `Choose time, selected time is ${formattedTime}` : 'Choose time'
+ }} >
+```
+
+- If you using this translation key in a custom component:
+
+```diff
+ const translations = usePickersTranslations();
+
+-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')
++);
+
+-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')
++);
+
+-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')
++);
+```
+
+Also the following types and interfaces no longer receive a generic type parameter:
+
+- `PickersComponentAgnosticLocaleText`
+- `PickersInputComponentLocaleText`
+- `PickersInputLocaleText`
+- `PickersLocaleText`
+- `PickersTranslationKeys`
diff --git a/packages/x-date-pickers-pro/src/DateRangePicker/shared.tsx b/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;
     }

diff --git a/packages/x-date-pickers-pro/src/DateTimeRangePicker/shared.tsx b/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;

diff --git a/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts b/packages/x-date-pickers-pro/src/internals/hooks/useEnrichedRangePickerFieldProps.ts
@@ -114,7 +114,7 @@ export interface UseEnrichedRangePickerFieldPropsParams<
   TEnableAccessibleFieldDOMStructure extends boolean,
   TError,
 > extends Pick<
-      UsePickerResponse<DateRange<TDate>, TDate, TView, RangeFieldSection, any>,
+      UsePickerResponse<DateRange<TDate>, TView, RangeFieldSection, any>,
       'open' | 'actions'
     >,
     UseRangePositionResponse {
@@ -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<

diff --git a/packages/x-date-pickers/src/DatePicker/shared.tsx b/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;
     }

diff --git a/packages/x-date-pickers/src/DateTimePicker/shared.tsx b/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;
     }

diff --git a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.test.tsx b/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');
   });
 });
diff --git a/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx b/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>(

diff --git a/packages/x-date-pickers/src/TimeClock/Clock.tsx b/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}

diff --git a/packages/x-date-pickers/src/TimePicker/shared.tsx b/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;
     }

diff --git a/packages/x-date-pickers/src/internals/components/PickersProvider.tsx b/packages/x-date-pickers/src/internals/components/PickersProvider.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PickerOwnerState, PickerValidDate } from '../../models';
+import { PickerOwnerState } from '../../models';
 import { PickersInputLocaleText } from '../../locales';
 import { LocalizationProvider } from '../../LocalizationProvider';
 
@@ -14,7 +14,7 @@ export const PickersPrivateContext = React.createContext<PickersPrivateContextVa
  *
  * @ignore - do not document.
  */
-export function PickersProvider<TDate extends PickerValidDate>(props: PickersProviderProps<TDate>) {
+export function PickersProvider(props: PickersProviderProps) {
   const { contextValue, privateContextValue, localeText, children } = props;
 
   return (
@@ -26,10 +26,10 @@ export function PickersProvider<TDate extends PickerValidDate>(props: PickersPro
   );
 }
 
-export interface PickersProviderProps<TDate extends PickerValidDate> {
+export interface PickersProviderProps {
   contextValue: PickersContextValue;
   privateContextValue: PickersPrivateContextValue;
-  localeText: PickersInputLocaleText<TDate> | undefined;
+  localeText: PickersInputLocaleText | undefined;
   children: React.ReactNode;
 }
 

diff --git a/packages/x-date-pickers/src/internals/hooks/useField/buildSectionsFromFormat.ts b/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,
 ) => {

diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.ts
@@ -33,7 +33,7 @@ export const usePicker = <
   TSection,
   TExternalProps,
   TAdditionalProps
->): UsePickerResponse<TValue, TDate, TView, TSection, InferError<TExternalProps>> => {
+>): UsePickerResponse<TValue, TView, TSection, InferError<TExternalProps>> => {
   if (process.env.NODE_ENV !== 'production') {
     if ((props as any).renderInput != null) {
       warnOnce([

diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePicker.types.ts
@@ -55,19 +55,18 @@ export interface UsePickerParams<
       UsePickerViewParams<TValue, TDate, TView, TSection, TExternalProps, TAdditionalProps>,
       'additionalViewProps' | 'autoFocusView' | 'rendererInterceptor' | 'fieldRef'
     >,
-    Pick<UsePickerProviderParameters<TValue, TDate>, 'localeText'> {
+    Pick<UsePickerProviderParameters<TValue>, 'localeText'> {
   props: TExternalProps;
 }
 
 export interface UsePickerResponse<
   TValue,
-  TDate extends PickerValidDate,
   TView extends DateOrTimeViewWithMeridiem,
   TSection extends FieldSection,
   TError,
 > extends Omit<UsePickerValueResponse<TValue, TSection, TError>, 'viewProps' | 'layoutProps'>,
     Omit<UsePickerViewsResponse<TView>, 'layoutProps'>,
     UsePickerLayoutPropsResponse<TValue, TView> {
   ownerState: PickerOwnerState;
-  providerProps: UsePickerProviderReturnValue<TDate>;
+  providerProps: UsePickerProviderReturnValue;
 }
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerProvider.ts
@@ -1,24 +1,23 @@
 import * as React from 'react';
-import { FieldSection, PickerOwnerState, PickerValidDate } from '../../../models';
+import { FieldSection, PickerOwnerState } from '../../../models';
 import { UsePickerValueResponse } from './usePickerValue.types';
 import {
   PickersProviderProps,
   PickersContextValue,
   PickersPrivateContextValue,
 } from '../../components/PickersProvider';
 
-export interface UsePickerProviderParameters<TValue, TDate extends PickerValidDate>
-  extends Pick<PickersProviderProps<TDate>, 'localeText'> {
+export interface UsePickerProviderParameters<TValue>
+  extends Pick<PickersProviderProps, 'localeText'> {
   pickerValueResponse: UsePickerValueResponse<TValue, FieldSection, any>;
   ownerState: PickerOwnerState;
 }
 
-export interface UsePickerProviderReturnValue<TDate extends PickerValidDate>
-  extends Omit<PickersProviderProps<TDate>, 'children'> {}
+export interface UsePickerProviderReturnValue extends Omit<PickersProviderProps, 'children'> {}
 
-export function usePickerProvider<TValue, TDate extends PickerValidDate>(
-  parameters: UsePickerProviderParameters<TValue, TDate>,
-): UsePickerProviderReturnValue<TDate> {
+export function usePickerProvider<TValue>(
+  parameters: UsePickerProviderParameters<TValue>,
+): UsePickerProviderReturnValue {
   const { pickerValueResponse, ownerState, localeText } = parameters;
 
   const contextValue = React.useMemo<PickersContextValue>(

diff --git a/packages/x-date-pickers/src/internals/hooks/useUtils.ts b/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],
   );

diff --git a/packages/x-date-pickers/src/internals/models/props/basePickerProps.tsx b/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;
 }
 
 /**